@extends('layouts.back')

@section('titulo', 'Usuário')

@section('page_header','Painel')

@section('breadcrumbs')
@if(isset($item->id))
@breadcrumbs(["itens" => ["Usuários" => route('usuarios.index'), "Editar usuario #" . $item->id => ""]])
@else
@breadcrumbs(["itens" => ["Usuários" => route('usuarios.index'), "Criar usuario" => "" ]])
@endif
@endsection

@push('header_imports')
    <link href="{{asset('plugins/select2/css/select2.min.css')}}" rel="stylesheet" type="text/css" />
@endpush

@section('content')
    <div class="row">
        <div class="col-lg-12">

            @component('components.outros.botoes-padroes-topo', ['route' => 'usuarios', 'item' => $item])
            @endcomponent

            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{ $item->id ? 'Editar Usuário' : 'Novo Usuário'}}</h4>
                </div>

                <form action="{{ $item->id ? route('usuarios.update', $item->id) : route('usuarios.store')}}" method="post" class="form-horizontal form-bordered" enctype="multipart/form-data" id="form-principal">
                    @csrf
                    {{ $item->id ? method_field('PATCH') : ''}}

                    @component('components.outros.alerta-erros', compact('errors'))
                    @endcomponent

                    <div class="card-body">

                        <div class="tab-content">

                            <div class="row">
                                <div class="form-group col-md-12">
                                    <label class="col-md-6 control-label">Avatar</label>
                                    <div class="col-md-12 no-gutters">
                                        <img class="rounded-circle" src="{{$item->avatar ? asset('storage/avatars/sm_' . $item->avatar) : asset('images/user.jpg')}}" id="avatar-thumb-img" style="width: 100px; height: 100px; margin-bottom: 15px;">
                                        <div class="col-md-6 input-group">
                                            <input id="excluir-imagem-upload" name="excluir-imagem-upload" value="0" type="hidden"/>
                                            <input type="file" id="path-imagem" name="avatar" accept="image/jpg, image/jpeg, image/png" style="display: none;" value="">
                                            <input type="text" class="form-control" id="avatar" value="" readonly>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-primary waves-effect waves-light" id="btn-selecionar-imagem">Selecionar imagem</button>
                                                <button type="button" class="btn btn-danger waves-effect waves-light" id="btn-remover">Remover</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="nome">Nome <span class="required">*</span></label>
                                <div class="col-md-12">
                                    <input type="text" class="form-control" name="nome" id="nome" minlength="3" maxlength="60" value="{{old('nome', $item->nome)}}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="email">E-mail <span class="required">*</span></label>
                                <div class="col-md-12">
                                    <input type="email" class="form-control" name="email" id="email" maxlength="80" value="{{old('email', $item->email)}}">
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="funcao">Função <span class="required">*</span></label>
                                <div class="col-md-12">
                                    <select class="form-control" name="funcao" id="funcao">
                                        @foreach($roles as $role)
                                            <option value="{{$role->name}}" {{ (isset($funcao->id) && (old('funcao', $funcao->name) == $role->name)) || old('funcao') == $role->name ? 'selected' : ''}}>{{$role->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="grupo_comissao_id">Grupo Comissão</label>
                                <div class="col-md-12">
                                    <select class="form-control" name="grupo_comissao_id" id="grupo_comissao_id">
                                        <option></option>
                                        @foreach($grupos as $grupo)
                                            <option value="{{$grupo->id}}" {{$grupo->id && $grupo->id == $item->grupo_comissao_id ? 'selected' : ''}}>{{$grupo->nome}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="password">Senha
                                    @if(! $item->id)
                                        <span class="required">*</span>
                                    @endif
                                </label>
                                <div class="col-md-12">
                                    <input type="password" class="form-control" name="password" id="password" minlength="8" maxlength="32" value="" autocomplete="new-password" {{ $item->id ? '' : 'required' }}>
                                    @if($item->id)
                                        <span class="help-block">Deixe em branco caso não queira alterar a senha.</span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-3 control-label" for="repetir password">Repetir senha
                                    @if(! $item->id)
                                        <span class="required">*</span>
                                    @endif
                                </label>
                                <div class="col-md-12">
                                    <input type="password" class="form-control" name="repetir_password" maxlength="100" id="repetir_password" value="" {{ $item->id ? '' : 'required' }}>
                                    @if($item->id)
                                        <span class="help-block">Deixe em branco caso não queira alterar a senha.</span>
                                    @endif
                                </div>
                            </div>

                            <div class="row form-group">
                                <div class="col-md-6 col-sm-12">
                                    <label class="control-label col-md-9" for="is_consultor">Consultor</label>
                                    <div class="col-md-12">
                                        <select class="form-control" style="width: 100%" name="is_consultor" id="is_consultor">
                                            <option value="0" {{ old('is_consultor', $item->is_consultor) == 0 ? 'selected' : '' }}>Não</option>
                                            <option value="1" {{ old('is_consultor', $item->is_consultor) == 1 ? 'selected' : '' }}>Sim</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 col-sm-12 espacamento-superior-sm">
                                    <label class="control-label col-md-12" for="melhor_dia_comissao">Melhor Dia para Pagamento da Comissão</label>
                                    <div class="col-md-12">
                                        <input type="number" class="form-control" name="melhor_dia_comissao" id="melhor_dia_comissao" min="0" max="31" value="{{old('melhor_dia_comissao', $item->melhor_dia_comissao ? $item->melhor_dia_comissao : 0)}}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row col-md-12 ml-1">
                            <button type="submit" class="btn btn-success waves-effect waves-light">Salvar</button>
                            <a href="{{route('usuarios.index')}}" class="btn btn-secondary waves-effect">Cancelar</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@push('footer_imports_end')
    <!-- select2 js -->
    <script src="{{asset('plugins/select2/js/select2.min.js')}}"></script>
    <script src="{{asset('js/validations/adm/valida.users.js') }}"></script>
@endpush

@push('js')

    <script type="text/javascript">

        $(function() {
            //gerando TOKEN automaticamente
            $.ajaxSetup({
                headers:{
                    'X-CSRF-TOKEN':"{{ csrf_token()}}"
                }
            });

            melhorDiaComissao();

        });

        // Select2
        $(".select2").select2();

        $('#btn-selecionar-imagem').click(function() {
            $('#path-imagem').click();
        });

        $('#btn-remover').click(function() {
            $('#avatar-thumb-img').attr('src', '/images/user.jpg');
            $('#avatar').val('');
            $('#path-imagem').val('');
            $('#excluir-imagem-upload').val('1');
        });

        $('#path-imagem').change(function() {
            let pathArquivo = $(this).val();
            let arquivo = pathArquivo.substring(pathArquivo.lastIndexOf("\\") + 1, pathArquivo.lenght);
            let $avatar = $('#avatar');
            $avatar.val('');
            $avatar.val(arquivo);
            $('#excluir-imagem-upload').val('0')
        });

        $('#is_consultor').on('change', function() {
            melhorDiaComissao();
        });

        function melhorDiaComissao() {
            let opcao = $('#is_consultor').val();
            if (opcao == 0) {
                $('#melhor_dia_comissao').attr('readonly', 'readonly');
                $('#melhor_dia_comissao').val(0);
            } else
                $('#melhor_dia_comissao').removeAttr('readonly');
        }

    </script>

@endpush