@extends('layouts.back')

@section('titulo', $item->id ? 'Editar Cliente' : 'Novo Cliente')

@section('page_header', $item->id ? 'Editar Cliente' : 'Novo Cliente')

@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">

            <div class="row mb-3">
                <div class="col-sm-12 text-right">
                    <div class="btn-group">
                        <button class="btn btn-sm btn-success waves-effect waves-light" onclick="$('#form-principal').submit();">Salvar</button>
                        <a href="{{route("clientes.index")}}" type="button" class="btn btn-sm btn-blue-grey waves-effect waves-light space-left-btn-top">Cancelar</a>
                    </div>
                </div>
            </div>

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

                    @csrf
                    {{ $item->id ? method_field('PATCH') : "" }}

                    <div class="card-body">

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

                        <ul class="nav nav-tabs nav-tabs-custom" role="tablist" id="tabs">
                            <li class="nav-item" id="tab-detalhes">
                                <a class="nav-link active" data-toggle="tab" href="#detalhes" role="tab">
                                    <span class="d-none d-md-block"><i class="fa fa-exclamation-circle text-danger {{$errors->has('cliente.*') ? '' : 'd-none'}} error-alert"></i> Detalhes<span class="d-block d-md-none"><i class="mdi mdi-home-variant h5"></i></span>
                                </a>
                            </li>
                            <li class="nav-item" id="tab-representante">
                                <a class="nav-link" data-toggle="tab" href="#representante" role="tab">
                                    <span class="d-none d-md-block"><i class="fa fa-exclamation-circle text-danger {{$errors->has('representante.*') ? '' : 'd-none'}} error-alert"></i> Representante</span><span class="d-block d-md-none"><i class="mdi mdi-account h5"></i></span>
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content offset-1">
                            <div class="tab-pane active" id="detalhes" role="tabpanel">

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label label-position" for="filial">Filial</label>
                                    <div class="col-md-8">
                                        <select class="form-control" id="filial" onchange="alterarCampoMatriz($(this).val(), $('#matriz'))">
                                            <option value="{{old('filial', 0)}}" {{ $item->matriz_id ? '' : 'selected'}}>Não</option>
                                            <option value="{{old('filial', 1)}}" {{ $item->matriz_id ? 'selected' : ''}}>Sim</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="control-label col-md-2 control-label label-position" for="matriz">Matriz</label>
                                    <div class="col-md-8 {{$errors->has('cliente.matriz_id') ? 'has-error' : ''}}">
                                        <select class="form-control" style="width: 100%;" name="cliente[matriz_id]" id="matriz">
                                            <option></option>
                                            @foreach (\App\Cliente::matrizes($item->id) as $matriz)
                                                <option value="{{old('cliente.matriz_id', $matriz->id)}}" {{$item->matriz_id ? 'selected' : ''}}>{{$matriz->fantasia}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label text-right label-position" for="cnpj">CNPJ <span class="required">*</span></label>
                                    <div class="col-md-8 {{$errors->has('cliente.cnpj') ? 'has-error' : ''}}">
                                        <input type="text" class="form-control cnpj" name="cliente[cnpj]" id="cnpj" data-plugin-masked-input data-input-mask="99.999.999/9999-99" placeholder="00.000.000/0000-00" value="{{old('cliente.cnpj', $item->cnpj)}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label text-right label-position" for="fantasia">Nome Fantasia <span class="required">*</span></label>
                                    <div class="col-md-8 {{$errors->has('cliente.fantasia') ? 'has-error' : ''}}">
                                        <input type="text" class="form-control" name="cliente[fantasia]" id="fantasia" value="{{old('cliente.fantasia', $item->fantasia)}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label label-position" for="razao_social">Razão Social <span class="required">*</span></label>
                                    <div class="col-md-8 {{$errors->has('cliente.razao_social') ? 'has-error' : ''}}">
                                        <input type="text" class="form-control" name="cliente[razao_social]" id="razao_social" value="{{old('cliente.razao_social', $item->razao_social)}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 control-label label-position" for="Inscrição estadual">Inscrição estadual</label>
                                    <div class="col-md-8 ie-section">
                                        <div class="row">
                                            <div class="col-md-6 ">
                                                <label class="control-label" for="nao_isento">Possuo Inscrição estadual</label>
                                                <div class="input-group {{$errors->has('cliente.ie') ? 'has-error' : ''}}">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">
                                                            <input type="radio" name="cliente[isento]" id="nao_isento" value="0" {{ $item->isento == 0 ? 'checked' : '' }} onclick="$('#ie').focus();$('#ie').prop('required',true);">
                                                        </span>
                                                    </div>
                                                    <input type="text" class="form-control" name="cliente[ie]" id="ie" value="{{old('cliente.ie', $item->ie)}}" placeholder="Insira sua IE aqui.">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="control-label" for="isento">Sou isento. Não possuo IE.</label>
                                                <div class="input-group">
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">
                                                            <input type="radio" id="isento" name="cliente[isento]" value="1" {{ old('cliente.isento') || $item->isento == 1 ? 'checked' : '' }} onclick="$('#ie').prop('required',false);">
                                                        </span>
                                                    </div>
                                                    <input type="text" placeholder="" class="form-control" value="ISENTO" disabled>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label label-position" for="telefone">Telefone</label>
                                    <div class="col-md-8 {{$errors->has('cliente.telefone') ? 'has-error' : ''}}">
                                        <input type="text" class="form-control telefone" name="cliente[telefone]" id="telefone" data-plugin-masked-input data-input-mask="(99) 9999-9999" placeholder="(00) 0000-0000" value="{{old('cliente.telefone', $item->telefone)}}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label label-position" for="celular">Celular <span class="required">*</span></label>
                                    <div class="col-md-8 {{$errors->has('cliente.celular') ? 'has-error' : ''}}">
                                        <input type="text" class="form-control celular" name="cliente[celular]" id="celular" data-plugin-masked-input data-input-mask="(99) 99999-9999" placeholder="(00) 00000-0000" value="{{old('cliente.celular', $item->celular)}}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label label-position" for="email">E-mail <span class="required">*</span></label>
                                    <div class="col-md-8 {{$errors->has('cliente.email') ? 'has-error' : ''}}">
                                        <input type="email" class="form-control" name="cliente[email]" id="email" value="{{old('cliente.email', $item->email)}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label label-position" for="rua">Rua <span class="required">*</span></label>
                                    <div class="col-md-8 {{$errors->has('cliente.rua') ? 'has-error' : ''}}">
                                        <input type="text" class="form-control" name="cliente[rua]" id="rua" value="{{old('cliente.rua', $item->rua)}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label label-position" for="numero">Número <span class="required">*</span></label>
                                    <div class="col-md-8 {{$errors->has('cliente.numero') ? 'has-error' : ''}}">
                                        <input type="number" class="form-control" name="cliente[numero]" id="numero" min="0" value="{{old('cliente.numero', $item->numero)}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label label-position" for="complemento">Complemento</label>
                                    <div class="col-md-8 {{$errors->has('cliente.complemento') ? 'has-error' : ''}}">
                                        <input type="text" class="form-control" name="cliente[complemento]" id="complemento" value="{{old('cliente.complemento', $item->complemento)}}">
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label label-position" for="bairro">Bairro <span class="required">*</span></label>
                                    <div class="col-md-8 {{$errors->has('cliente.bairro') ? 'has-error' : ''}}">
                                        <input type="text" class="form-control" name="cliente[bairro]" id="bairro" value="{{old('cliente.bairro', $item->bairro)}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label label-position" for="cep">Cep <span class="required">*</span></label>
                                    <div class="col-md-8 {{$errors->has('cliente.cep') ? 'has-error' : ''}}">
                                        <input type="text" class="form-control cep" name="cliente[cep]" id="cep" value="{{old('cliente.cep', $item->cep)}}" required>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 control-label label-position" for="estado">Estado </label>
                                    <div class="col-md-8">
                                        <select class="form-control" style="width: 100%;" id="estado" onChange="carregarCidades($(this).val(),'cidade',{{$item->cidade_id}});">
                                            @foreach($estados as $estado)
                                                <option value="{{$estado->id}}" {{ ($item->id ? old('estado', $item->cidade->estado->id) : old('estado')) == $estado->id ? "selected" : ""}}>{{$estado->nome}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 control-label label-position" for="cidade">Cidades <span class="required">*</span></label>
                                    <div class="col-md-8 {{$errors->has('cliente.cidade_id') ? 'has-error' : ''}}">
                                        <select class="form-control" style="width: 100%;" name="cliente[cidade_id]" id="cidade" required>
                                        </select>
                                    </div>
                                </div>

                            </div>

                            <div class="tab-pane" id="representante" role="tabpanel">

                                    <div class="form-group row">
                                        <label class="col-md-2 col-form-label label-position" for="nome">Nome <span class="required">*</span></label>
                                        <div class="col-md-8 {{$errors->has('representante.nome') ? 'has-error' : ''}}">
                                            <input type="text" class="form-control" name="representante[name]" id="nome"
                                                value="{{old('representante.name', $representante->name)}}" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-md-2 col-form-label label-position" for="sobrenome">Sobrenome <span class="required">*</span></label>
                                        <div class="col-md-8 {{$errors->has('representante.sobrenome') ? 'has-error' : ''}}">
                                            <input type="text" class="form-control" name="representante[last_name]" id="sobrenome"
                                                value="{{old('representante.last_name', $representante->last_name)}}" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-md-2 col-form-label label-position" for="cpf">CPF <span class="required">*</span></label>
                                        <div class="col-md-8 {{$errors->has('representante.cpf') ? 'has-error' : ''}}">
                                            <input type="text" class="form-control cpf" name="representante[cpf]" id="cpf"
                                                data-plugin-masked-input data-input-mask="999.999.999-44" placeholder="999.999.999-44"
                                                    value="{{old('representante.cpf', $representante->cpf)}}" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-md-2 col-form-label label-position" for="telefone_representante">Telefone</label>
                                        <div class="col-md-8 {{$errors->has('representante.phone_number') ? 'has-error' : ''}}">
                                            <input type="text" class="form-control telefone" name="representante[phone_number]" id="telefone_representante"
                                                data-plugin-masked-input data-input-mask="(99) 9999-9999" placeholder="(00) 0000-0000"
                                                    value="{{old('representante.phone_number', $representante->phone_number)}}">
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-md-2 col-form-label label-position" for="celular_representante">Celular <span class="required">*</span></label>
                                        <div class="col-md-8 {{$errors->has('representante.celular') ? 'has-error' : ''}}">
                                            <input type="text" class="form-control celular" name="representante[cell_phone]" id="celular_representante"
                                                data-plugin-masked-input data-input-mask="(99) 99999-9999" placeholder="(00) 00000-0000"
                                                    value="{{old('representante.cell_phone', $representante->cell_phone)}}" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label class="col-md-2 col-form-label label-position" for="email">E-mail</label>
                                        <div class="col-md-8 {{$errors->has('representante.email') ? 'has-error' : ''}}">
                                            <input type="email" class="form-control" name="representante[email]" id="email-representante"
                                                value="{{old('representante.email', $representante->email)}}" required>
                                        </div>
                                    </div>

                            </div>

                        </div>

                    </div>
                    <div class="card-footer">
                        <div class="col-md-6">
                            @if($item->id)
                                <button type="submit" class="btn btn-success waves-effect waves-light btn-salvar">Salvar</button>
                            @else
                                <button type="submit" class="btn btn-success waves-effect waves-light btn-salvar" id="question-message">Salvar</button>
                            @endif
                            <a href="{{route('clientes.index')}}" class="btn btn-secondary waves-effect">Cancelar</a>
                        </div>
                    </div>

                    <div class="modal fade bs-example-modal-md" tabindex="-1" role="dialog" aria-labelledby="myMediumModalLabel" aria-hidden="true">
                        <div class="modal-dialog modal-md">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title mt-0" id="myMediumModalLabel">Escolher Plano</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group row">
                                        <label class="label-control col-md-8" for="plano">Plano:</label>
                                        <div class="col-md-12">
                                            <select class="form-control" style="width: 100%" name="plano" id="plano">
                                                <option value="0">Selecione o Plano</option>
                                                @foreach ($planos as $item)
                                                    <option value="{{$item->id}}">{{$item->nome}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                <div class="modal-footer">
                                    <button class="btn btn-success waves-effect waves-light" id="escolher-plano">Salvar</button>
                                    <button class="btn btn-secondary waves-effect" id="cancelar">Cancelar</button>
                                </div>
                            </div>
                        </div>

                    </div>

                </form>
            </div>
        </div>
    </div>

@endsection

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

@push('js')

    <script type="text/javascript">

        $(function() {

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

            alterarCampoMatriz($('#filial').val(), $('#matriz'));
            carregarCidades($('#estado').val(), 'cidade', {{$item['cidade_id']}});
        });

        var validacao = true;

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

        if ($('#nao_isento').prop("checked") == true){
            $("#ie").prop('required',true);
        }

        $('#numero').on('keypress', function() {
            let quantidade = $(this).val().length;
            if (quantidade > 10) {
                let numero = $(this).val().substring(0, 10);
                $(this).val(numero);
            }
        });

        //permitir somente números
        $("#numero").on("keypress", function(e) {
            var keyCode = e.which ? e.which : e.keyCode
            if (!(keyCode >= 48 && keyCode <= 57)) {
                return false;
            } else {
                return true;
            }
        });

        function alterarCampoMatriz(is_filial, matriz) {
            let matriz_id = matriz.val();
            let value = matriz_id != undefined || matriz_id != null ? matriz_id : 0;
            if (is_filial != '0') {
                matriz.removeAttr('disabled');
                matriz.attr('required', 'required');
                matriz.val(value);
                matriz.focus();
            } else {
                matriz.val('0');
                matriz.attr('disabled','disabled');
                matriz.removeAttr('required');
                $('#cnpj').focus();
            }
        }

         //Success Message
         $('#question-message').click(function(event) {
                event.preventDefault();
                let form = $('#form-principal');
                //só mostra modal se todos os campos tiverem sido validados
                if (form.valid()){
                    Swal.fire({
                    title: 'Deseja informar um plano para o cliente',
                    type: 'question',
                    showCancelButton: true,
                    confirmButtonClass: 'btn btn-success',
                    cancelButtonClass: 'btn btn-danger m-l-10'
                    }).then(function(e) {
                        let informarPlano = e['value'] != undefined;
                        if (! informarPlano)
                            $('#form-principal').submit();
                        else {
                            $('.bs-example-modal-md').modal('show');
                        }
                    });
                }

         });

         $('#escolher-plano').on('click', function(e) {
            let plano = $('#plano').val();
            if (plano == '0') {
                e.preventDefault();
                alerta('Ops!', 'Você deve selecionar um plano', 'warning');
            }
         });

    </script>

@endpush