@extends('header_new')
@section('main')
    <main>
        <!-- BUSCADOR PERSONA -->
        <div class="container py-5">
            <div class='row justify-content-center mt-3' id="buscadorPersona">
                <div class='col-12 col-lg-7 my-2 my-xxl-5 align-items-center'>
                    <h2 id="tituloMod" class="text-center my-5">Nuevo Cliente</h2>
                    <!-- <h3 class="text-center mb-5">Nuevo Cliente</h3> -->
                    <form id='busqueda_persona' action="/" method='post'>
                        <div class='row justify-content-center'>
                            <small class="text-secondary text-center">Ingrese CUIT, CUIL, DNI o nombre completo para realizar una busqueda, luego presione enter</small>
                        </div>                        
                        <div class='input-group shadow pt-3'>
                            <input type="hidden" id='token' name="_token" value="{{ csrf_token() }}" />
                            <input type="text" id='buscarPadron' name='buscarPadron' value='' class='form-control form-control-lg text-center' list='lista_clientes' placeholder='       Buscar en Padrón...' autocomplete='off'>
                            <button class='input-group-text'>
                                <i class="bi bi-search fs-5"></i>
                            </button>
                        </div>
                        <div id='notificacion' class='mt-2'></div>
                        <div id='lista_padron' class='overflow-auto col-12 py-2 list-group'></div>
                        
                    </form>
                    <button id="btn_reactivar_cliente" type="button" class="btn d-none" data-bs-toggle="modal" data-bs-target="#modalReactivar"></button>
                    <button id="btn_editar_cliente" type="button" class="btn d-none" data-bs-toggle="modal" data-bs-target="#modalEditar"></button>
                </div>
            </div>
            <!----->
            @if($errors->any())
            <div class="row justify-content-center">
                <div class="col-3">
                    <h6 class="text-center text-danger my-5">{{$errors->first()}}</h6>
                </div>
            </div>
            @endif
            <!----->
            <div class="row justify-content-center">
                <div class="card col-12 col-lg-10 shadow d-none">
                    <div class="card-body">
                        <div class="col12 col-lg-2">
                            <small class="text-muted"><i>(*) Requerido</i></small>
                        </div>
                        <form action="/" method="post" id='formularioAltaCliente'>
                            <input type="hidden" id='token' name="_token" value="{{ csrf_token() }}" />

                            <!-- CLIENTE -->
                            <div class='row justify-content-center' id='rowCliente'>
                                <div class='col-12 pt-5'>
                                    <b>Cliente</b>
                                </div>

                                <div class='form-group col-12 col-lg-6 p-2'>
                                    <label for="nombreCliente" class="text-primary fs-6 fst-italic">Nombre Cliente<b class="text-danger">*</b></label>
                                    <input type="text" id="nombreCliente" name="nombreCliente" class='form-control form-control-sm required' placeholder='Nombre Cliente *' data-format="razon_social" required disabled>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-3 p-2'>
                                    <label for="selectPais" class="text-primary fs-6 fst-italic">Pais<b class="text-danger">*</b></label>
                                    <select id="selectPais" name="selectPais" class='form-select form-select-sm required' required disabled>
                                        <option value="" selected>Seleccione País *</option>
                                        @foreach ($paises as $i => $e)
                                        <option value="{{$i}}">{{$e}}</option>
                                        @endforeach
                                    </select>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-3 p-2'> 
                                    <label for="tipoIdentificador" class="text-primary fs-6 fst-italic">Tipo Identificación<b class="text-danger">*</b></label>
                                    <select id="tipoIdentificador" name="tipoIdentificador" class='form-select form-select-sm required'>
                                        <option value="" selected>Tipo Identificación *</option>
                                    </select required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-6 p-2'>
                                    <label for="nroIdentificacion" class="text-primary fs-6 fst-italic">Nro identificación<b class="text-danger">*</b></label>
                                    <input type="text" id='nroIdentificacion' name='nroIdentificacion' class='form-control form-control-sm required' placeholder='Nro identificación *' data-format="numero" required disabled>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-6 p-2'>
                                    <label for="codFacturacionCliente" class="text-primary  fs-6 fst-italic">Código de facturación (tango)<b class="text-danger">*</b></label>
                                    <input type="text" id='codFacturacionCliente' name='codFacturacionCliente' class='form-control form-control-sm required' placeholder='Código de facturación (tango) *' data-format="numero" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                            </div>

                            <div class='row justify-content-center'>
                                <div class='form-group col-12 col-lg-6 p-2'>
                                    <label for="domicilioCliente" class="text-primary fst-italic">Domicilio Legal<b class="text-danger">*</b></label>
                                    <input type="text" id="domicilioCliente" name="domicilioCliente" class='form-control form-control-sm required' placeholder='Domicilio Legal *' data-format="calle" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-2 p-2'>
                                    <label for="alturaCliente" class="text-primary fs-6 fst-italic">Altura</label>
                                    <input type="text" id="alturaCliente" name="alturaCliente" class='form-control form-control-sm' placeholder='Altura' data-format="numero" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-2 p-2'>
                                    <label for="pisoCliente" class="text-primary fs-6 fst-italic">Piso</label>
                                    <input type="text" id="pisoCliente" name="pisoCliente" class='form-control form-control-sm' placeholder='Piso' data-format="piso">
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-2 p-2'>
                                    <label for="deptoCliente" class="text-primary fs-6 fst-italic">Departamento</label>
                                    <input type="text" id="deptoCliente" name="deptoCliente" class='form-control form-control-sm' placeholder='Departamento' data-format="dpto">
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-2 p-2'>
                                    <label for="localidadCliente" class="text-primary fs-6 fst-italic">Localidad<b class="text-danger">*</b></label>
                                    <input type="text" id="localidadCliente" name="localidadCliente" class='form-control form-control-sm required' placeholder='Localidad *' data-format="localidad" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-2 p-2'>
                                    <label for="provinciaCliente" class="text-primary fs-6 fst-italic">Provincia<b class="text-danger">*</b></label>
                                    <input type="text" id="provinciaCliente" name="provinciaCliente" class='form-control form-control-sm required' placeholder='Provincia *' data-format="nombre" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-2 p-2'>
                                    <label for="cpCliente" class="text-primary fs-6 fst-italic">Código Postal<b class="text-danger">*</b></label>
                                    <input type="text" id="cpCliente" name="cpCliente" class='form-control form-control-sm required' placeholder='Código Postal *' data-format="codigo_postal" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-6 p-2'>
                                    <label for="telCliente" class="text-primary fs-6 fst-italic">Teléfono<b class="text-danger">*</b></label>
                                    <input type="text" id="telCliente" name="telCliente" class='form-control form-control-sm required' placeholder='Teléfono *' data-format="telefono" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-4 p-2'>
                                    <label for="webCliente" class="text-primary fs-6 fst-italic">Sitio web<b class="text-danger">*</b></label>
                                    <input type="text" id="webCliente" name="webCliente" class='form-control form-control-sm' placeholder='Sitio Web' data-format="web">
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-4 p-2'>
                                    <label for="mailCliente" class="text-primary fs-6 fst-italic">E-mail<b class="text-danger">*</b></label>
                                    <input type="text" id="mailCliente" name="mailCliente" class='form-control form-control-sm required' placeholder='E-mail *' data-format="email" required>
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>

                            <!-- CONTAACTO FACTURACIÓN -->
                            <div class='row justify-content-center mt-3'>
                                <div class='col-12 pt-5'>
                                    <b>Contacto Facturación </b>
                                    <small class="text-muted mx-3"><i> (Datos donde se enviará la facturación)</i></small>
                                </div>

                                <div class='form-group col-12 col-lg-4 p-2'>
                                    <label for="nombreContactoFactura" class="text-primary fs-6 fst-italic">Nombre Completo<b class="text-danger">*</b></label>
                                    <input type="text" id="nombreContactoFactura" name="nombreContactoFactura" class='form-control form-control-sm required' placeholder='Nombre Completo *' data-format="nombre" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-4 p-2'>
                                    <label for="telContactoFactura" class="text-primary fs-6 fst-italic">Teléfono<b class="text-danger">*</b></label>
                                    <input type="text" id="telContactoFactura" name="telContactoFactura" class='form-control form-control-sm required' placeholder='Teléfono *' data-format="telefono" required>
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-4 p-2'>
                                    <label for="emailFacturacion" class="text-primary fs-6 fst-italic">E-mail Facturación<b class="text-danger">*</b></label>
                                    <input type="text" class='form-control form-control-sm required' id="emailFacturacion" name="emailFacturacion" placeholder='E-mail Facturación *' data-format="email" required>
                                    <div class="invalid-feedback"></div>
                                </div>
                                
                            </div>

                            <!-- CONTAACTO 1 -->
                            <div id='contenedorTodosContactos' class='row justify-content-center'>
                                <input type="hidden" id='cantidadContactoOtros' name='cantidadContactoOtros'>
                                <div class='col-12 pt-5 d-flex'>
                                    <b class='px-2'>Contactos otros</b>
                                    <i style="cursor:pointer;" class='text-success px-2 fs-6 bi bi-plus-circle-dotted' id='contacAdd'></i>
                                    <i style="cursor:pointer; display:none;" class='text-danger px-2 bi bi-dash-circle-dotted fs-5' id='contacDelete'>
                                    </i>
                                </div>
                                
                                <div class='form-group col-12 col-lg-4 p-2'>
                                    <label for="nombreContacto1" class="text-primary fs-6 fst-italic">Nombre Completo</label>
                                    <input type="text" id="nombreContacto1" name="nombreContacto1" class='form-control form-control-sm' placeholder='Nombre Completo' data-format="nombre">
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-4 p-2'>
                                    <label for="telContacto1" class="text-primary fs-6 fst-italic">Teléfono</label>
                                    <input type="text" id="telContacto1" name="telContacto1" class='form-control form-control-sm' placeholder='Teléfono' data-format="telefono">
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-4 p-2'>
                                    <label for="emailContacto1" class="text-primary fs-6 fst-italic">E-mail</label>
                                    <input type="text" id="emailContacto1" name="emailContacto1" class='form-control form-control-sm' placeholder='E-mail' data-format="email">
                                    <div class="invalid-feedback"></div>
                                </div>                                
                            </div>

                            <!-- CONTACTO 2 -->
                            <div id="contenedorContacto" class="row justify-content-center d-none">
                                <div class='form-group col-12 col-lg-4 p-2 contact2'>
                                    <label for="nombreContacto2" class="text-primary fs-6 fst-italic">Nombre Completo</label>
                                    <input type="text" id="nombreContacto2" name="nombreContacto2" class='form-control form-control-sm' placeholder='Nombre Completo' data-format="nombre">
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-4 p-2 contact2'>
                                    <label for="telContacto2" class="text-primary fs-6 fst-italic">Teléfono</label>
                                    <input type="text" id="telContacto2" name="telContacto2" class='form-control form-control-sm' placeholder='Teléfono' data-format="telefono">
                                    <div class="invalid-feedback"></div>
                                </div>

                                <div class='form-group col-12 col-lg-4 p-2 contact2'>
                                    <label for="emailContacto2" class="text-primary fs-6 fst-italic">E-mail</label>
                                    <input type="text" id="emailContacto2" name="emailContacto2" class='form-control form-control-sm' placeholder='E-mail' data-format="email">
                                    <div class="invalid-feedback"></div>
                                </div>
                            </div>

                            <!-- COMETARIOS -->
                            <div class='row justify-content-center'>
                                <div class='col-12 pt-5 d-flex'>
                                    <b>Comentarios</b>
                                </div>
                                <div class='form-group col-12 p-2'>
                                    <textarea class="form-control form-control-sm" id="comentarios" name="comentarios" rows="3"></textarea>
                                </div>

                            </div>

                            <div id="notifNuevoCliente" class='row mt-5 d-none'>
                            </div>

                            <!-- BOTON DE AGREGAR -->
                            <div class='row justify-content-end mt-5'>
                                <div class="col-2 text-end">
                                    <button class="btn btn-danger w-100 btn-sm" type="button" id="volver">Volver</button>
                                </div>
                                <div class="col-2 px-2 text-end">
                                    <button class="btn btn-primary w-100 btn-sm" type="submit">Agregar Cliente</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
        </div>
    </main>
    <footer class='continer fixed-bottom bg-white'>
        <div class='row justify-content-end'>
            <div class='col-12 col-md-2 text-primary text-center fst-italic'>
                <p>Cantidad Cliente: <strong>{{ ($clientes['activos'] + $clientes['inactivos'])}}</strong></p>
            </div>
            <div class='col-12 col-md-2 text-success text-center fst-italic'>
                <p>Activos: <strong>{{ $clientes['activos'] }}</strong></p>
            </div>
            <div class='col-12 col-md-2 text-danger text-center fst-italic'>
                <p>No activos: <strong>{{ $clientes['inactivos']  }}</strong></p>
            </div>
        </div>
    </footer>
@endsection

<div class="modal fade" id="modalReactivar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-bs-backdrop="static">
  <div class="modal-dialog modal-xl modal-fullscreen-md-down" role="document">
    <div class="modal-content">
      @include('blue/modals/modal_warning_reactivar')
    </div>
  </div>
</div>
<!-- -->
<div class="modal fade" id="modalEditar" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-xl modal-fullscreen-md-down" role="document">
        <div class="modal-content">
        @include('blue/modals/modal_warning_editar')
        </div>
    </div>
</div>
@section('funcionesJs')
    <script>
        $(document).ready(function(){
            altaNuevoCliente();
        });
    </script>
@endsection