@extends('padrao')
@section('content')
<div class="row clearfix">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="card">
            <div class="header">
                <h2>
                    <strong>@yield('tipo')</strong> Usuário
                </h2>
            </div>
            <div class="body">
                <form id="form_validation" method="POST" @yield('action')>
                    {{ csrf_field() }}
                    <div class="row clearfix">
                        <div class="col-sm-1">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input type="text" readonly name="id" class="form-control"
                                        value="{{ old('id',(isset($usuario)) ? $usuario->id : '') }}">
                                    <label class="form-label">ID</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input type="text" name="nome" class="form-control" id="nome"
                                        value="{{ old('nome', (isset($usuario)) ? $usuario->nome : '') }}" required
                                        title="Esse campo é obrigatório">
                                    <label class="form-label">Nome</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input type="text" name="email" class="form-control" id="email"
                                        value="{{ old('email', (isset($usuario)) ? $usuario->email : '') }}" required
                                        title="Esse campo é obrigatório">
                                    <label class="form-label">E-mail</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input type="text" name="login" class="form-control" id="login"
                                        value="{{ old('login', (isset($usuario)) ? $usuario->login : '') }}" required
                                        title="Esse campo é obrigatório">
                                    <label class="form-label">Login</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <select tabindex="-1" name="status" id="status">
                                        <option value="1" @if(isset($usuario)){{{$usuario->status ==
                                            old('status', 1) ? 'selected' : '' }}} @endif>Habilitado</option>
                                        <option value="0" @if(isset($usuario)){{{$usuario->status ==
                                            old('status', 0) ? 'selected' : '' }}} @endif>Desabilitado</option>
                                    </select>
                                    <label class="form-label"
                                        style="top: -10px;left: 0;font-size: 12px;">Situação</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-2">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input type="password" name="senha" class="form-control" id="senha">
                                    <label class="form-label">Senha</label>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="form-group form-float">
                                <div class="form-line">
                                    <input style="display:inline; width: calc(100% - 40px)" type="password"
                                        name="confirmar_senha" class="form-control" id="confirmar_senha">
                                    <label class="form-label">Confirmação de Senha</label>
                                    <button type="button" id="olho"
                                        class="btn btn-primary btn-circle waves-effect waves-circle waves-float">
                                        <i class="material-icons">remove_red_eye</i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12 text-center">
                            <span>Permissões</span>
                            <hr>
                        </div>
                        @php
                            $grupo = '';
                            $novo_grupo = false;
                        @endphp
                        <div class="form-check m-l-10 todas_permissoes">
                            <label class="form-check-label" style="font-weight: bold;">
                                <input class="form-check-input check_all" data-check="{{$grupo}}" type="checkbox">Selecionar todas as permissões
                                    <span class="form-check-sign">
                                        <span class="check"></span>
                                </span>
                            </label>
                        </div>
                        <div class="col-sm-12">
                            <div class="row clearfix">
                                <div class="col-sm-12">
                                    @foreach ($permissoes as $permissao)
                                        @php
                                            $aux = substr($permissao->nome, strpos($permissao->nome, "_") + 1);
                                            if ($aux !== $grupo) {
                                                $grupo = $aux;
                                                $novo_grupo = true;      
                                            } else {
                                                $novo_grupo = false;
                                            }    
                                        @endphp
                                    @if($novo_grupo)
                                    <div class="grupo">
                                        <details class="grupo_{{$grupo}} botao_summary">
                                        <summary></summary>
                                        </details>
                                        <div class="form-check m-l-10 grupo">
                                                <label class="form-check-label" style="font-weight: bold;">
                                                    <input class="form-check-input grupo_check" data-check="{{$grupo}}" type="checkbox"> {{$grupo}}
                                                        <span class="form-check-sign">
                                                            <span class="check"></span>
                                                    </span>
                                            </label>
                                        </div>
                                    </div>
                                    @endif
                                    <div class="form-check m-l-30 sub_{{$grupo}} sub_grupo" style="display: none;">
                                            <label class="form-check-label">
                                                <input class="form-check-input check_{{$grupo}}" name="permissao[{{$permissao->id}}]" 
                                                @if(!empty($permissoes_usuario) && array_search($permissao->id, array_column($permissoes_usuario->all(), 'id_permissao')) !== false) checked @endif type="checkbox"> {{$permissao->nome}}
                                                    <span class="form-check-sign">
                                                        <span class="check"></span>
                                                </span>
                                        </label>
                                    </div>
                                    @endforeach                                                         
                                <div>
                            </div>
                        </div>
                    </div>
                    <div class="pull-right">
                        @yield('botoes')
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('js')
<script>
$(document).on('change', 'input:checkbox', function() {
    $('.grupo_check').each(function(i, obj) {
        let grupo = $(this).data("check");
        let classe = 'check_'+grupo;
        if ($('.'+classe+':checked').length == $('.'+classe).length) {
            $(this).prop("checked", true); 
        } else {
            $(this).prop("checked", false); 
        }
    });
});

$( document ).ready(function() {
    $('.grupo_check').each(function(i, obj) {
        let grupo = $(this).data("check");
        let classe = 'check_'+grupo;
        if ($('.'+classe+':checked').length == $('.'+classe).length) {
            $(this).prop("checked", true); 
        } else {
            $(this).prop("checked", false); 
        }

        $(".grupo_"+ grupo).click(function(){
            $('.sub_'+ grupo).toggle('milliseconds');
        });        
    });   
});

$(".grupo_check").change(function() {
    let grupo = $(this).data("check");
    if(this.checked) {   
        $('.check_'+ grupo).prop("checked", true);
    } else {
        $('.check_'+ grupo).prop("checked", false); 
    }
});

$(".check_all").change(function() {
    $('input:checkbox').prop('checked', this.checked);
});

$("#olho").mousedown(function() {
    $("#senha").attr("type", "text")
    $("#confirmar_senha").attr("type", "text");
});

$("#olho").mouseup(function() {
    $("#senha").attr("type", "password")
    $("#confirmar_senha").attr("type", "password");
});

</script>
@endsection
@section('css')
<style>
    .botao_summary {
        position: relative;	    
        right: -10px;
        top: 10px;
        width: 10px;
    }

    .grupo {
        margin-top:-8px;
        right: -25px;
    }

    .sub_grupo{
        right: -20px;
    }

    .todas_permissoes{
        position: relative;	
        top: -8px;
        right: -10px;
    }

    summary {
    list-style-type: '+';  
    }

    details[open] summary {
        list-style-type: '-';
    }
</style>
@endsection