@extends('header_nuevo_generico')
@section('main')
<div class="container-fluid mt-5 pt-5">
    <div class="row justify-content-left my-2">
        <div id="seccion-buscar-nuevo">
            <button type="button" id="btnClienteNuevo" class="btn btn-success float-end"><i class="bi bi-person-plus"></i> NUEVO CLIENTE</button>
            <button type="button" id="btnClienteBuscar" class="btn btn-success float-end d-none"><i class="bi bi-search"></i> BUSCAR CLIENTE</button>
            <a id="backBtn" class="nav-link text-fidelitas text-uppercase float-end" role="button" href="/departamento-comercial">Volver</a>            
        </div>
    </div>
    <!-- ===================================================== -->
    <!-- ----------------  BUSCADOR CLIENTE  ----------------- -->
    <!-- ===================================================== -->
    <div id="buscadorClientes" class='row justify-content-center align-items-center pt-3 pt-xxl-5'>
        <div class='col-12 col-lg-6 my-2 my-xxl-5'>
            @if(($_SERVER["REQUEST_URI"]) == "/administracion-clientes")
                <div class="d-flex justify-content-center mt-5 pt-5 row align-items-center" style="padding-left:5%;transform:translateY(150%)">
                    <div class="col-xl-3">
                        <div class="col form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="busqueda" id="busqueda_por_cliente" >
                            <label class="form-check-label" for="busqueda_por_cliente">@traducir('Busqueda por cliente', 'Busqueda por cliente')</label>
                        </div>
                    </div>
                    <!-- -->
                    <div class="col-xl-3">
                        <div class=" col form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="busqueda" id="busqueda_por_usuario" >
                            <label class="form-check-label" for="busqueda_por_usuario">@traducir('Busqueda por usuario', 'Busqueda por usuario')</label>
                        </div>
                    </div>
                </div>
            @endif
            <div class='text-center my-5 pt-0 pt-xxl-5'>
                <h2 id="tituloMod" class="text-fidelitas">Buscar Cliente</h2>
            </div>
            <form id='form_busqueda_cliente' action="/blue_buscar_cliente" method='post'>
                <div class='row justify-content-center my-2 segunCliente'>
                    <small class="text-secondary text-center">Ingrese CUIT, CUIL o nombre completo para realizar una busqueda, luego presione enter</small>
                </div>              
                <div class='input-group shadow mt-3 busquedasClientes'>
                    <input type="hidden" id='token' name="_token" value="{{ csrf_token() }}" />
                    <input type="hidden" id='clienteOk' name="clienteOk" value="">
                    <input type="hidden" id='urlAnterior' name="urlAnterior" value="{{$ruta}}">
                    <input type="text" id='cliente' name='cliente' value='' class='form-control form-control-lg text-center cli' list='lista_clientes' placeholder='Buscar Cliente' autocomplete='off'>                  
                    <input type="text" id='usuario' name='usuario' value='' class='form-control form-control-lg text-center cli' list='lista_usuarios' placeholder='Buscar Cliente por usuario' autocomplete='off'>
                    <span class='input-group-text'>
                        <i id="lupa" class="bi bi-search fs-5"></i>
                        <div id="loading" class="spinner-border text-fidelitas ms-auto d-none" role="status" aria-hidden="true"></div>
                    </span>
                </div>
                <div id='notificacion' class='mt-2'></div>
                <div id='lista_clientes' class='overflow-auto col-12 py-2 list-group'></div>
                <div id='lista_usuarios' class='overflow-auto col-12 py-2 list-group'></div>
            </form>
            <div id="buscando"></div>
        </div>
    </div>
    <!-- =========================================================== -->
    <!-- ----------------  BUSCADOR NUEVO CLIENTE  ----------------- -->
    <!-- =========================================================== -->
    <div  id="nuevoClienteVista" class="d-none">
        <div class='row justify-content-center align-items-center pt-3 pt-xxl-5' id="buscadorPersona">
            <div class='col-12 col-lg-6 my-2 my-xxl-5 align-items-center'>
                <h2 id="tituloMod" class="text-center text-fidelitas my-5 pt-0 pt-xxl-5">Nuevo Cliente</h2>
                <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 mt-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 id="lupaPersona" class="bi bi-search fs-5"></i>
                            <div id="loadingPersona" class="spinner-border text-fidelitas ms-auto d-none" role="status" aria-hidden="true"></div>
                        </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>
    </div>
    <!-- ================================================= -->
    <!-- ----------------  ALTA CLIENTE  ----------------- -->
    <!-- ================================================= -->
    <div class="row justify-content-center d-none" id="formBuscadorPersona">
        <div class="card col-12 col-lg-10 shadow">
            <div class="card-body">
                <div class="col12 col-lg-2">
                    <small class="text-muted"><i>(*) @traducir('Requerido', '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>@traducir('Cliente', 'Cliente')</b>
                        </div>
                        <div class='form-group col-12 col-lg-6 p-2'>
                            <label for="nombreCliente" class="text-primary fs-6 fst-italic">@traducir('Nombre Cliente', 'Nombre Cliente')<b class="text-danger">*</b></label>
                            <input type="text" id="nombreCliente" name="nombreCliente" class='form-control form-control-sm required' placeholder='@traducir("Nombre Cliente", "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>@traducir('Seleccione País', '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">@traducir('Tipo Identificación', 'Tipo Identificación')<b class="text-danger">*</b></label>
                            <select id="tipoIdentificador" name="tipoIdentificador" class='form-select form-select-sm required'>
                                <option value="" selected>@traducir('Tipo Identificación', '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">@traducir("Nro identificación", "Nro identificación")<b class="text-danger">*</b></label>
                            <input type="text" id='nroIdentificacion' name='nroIdentificacion' class='form-control form-control-sm required' placeholder='@traducir("Nro identificación", "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">@traducir('Código de facturación', '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='@traducir("Código de facturación", "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">@traducir('Domicilio Legal', 'Domicilio Legal')<b class="text-danger">*</b></label>
                            <input type="text" id="domicilioCliente" name="domicilioCliente" class='form-control form-control-sm required' placeholder='@traducir("Domicilio Legal", "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">@traducir('Altura', 'Altura')</label>
                            <input type="text" id="alturaCliente" name="alturaCliente" class='form-control form-control-sm' placeholder='@traducir("Altura", "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">@traducir('Piso', 'Piso')</label>
                            <input type="text" id="pisoCliente" name="pisoCliente" class='form-control form-control-sm' placeholder='@traducir("Piso", "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">@traducir("Departamento", "Departamento")</label>
                            <input type="text" id="deptoCliente" name="deptoCliente" class='form-control form-control-sm' placeholder='@traducir("Departamento", "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">@traducir('Localidad', 'Localidad')<b class="text-danger">*</b></label>
                            <input type="text" id="localidadCliente" name="localidadCliente" class='form-control form-control-sm required' placeholder='@traducir("Localidad", "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">@traducir('Provincia', 'Provincia')<b class="text-danger">*</b></label>
                            <input type="text" id="provinciaCliente" name="provinciaCliente" class='form-control form-control-sm required' placeholder='@traducir("Provincia", "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">@traducir("Código Postal", "Código Postal")<b class="text-danger">*</b></label>
                            <input type="text" id="cpCliente" name="cpCliente" class='form-control form-control-sm required' placeholder='@traducir("Código Postal", "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">@traducir("Teléfono", "Teléfono")<b class="text-danger">*</b></label>
                            <input type="text" id="telCliente" name="telCliente" class='form-control form-control-sm required' placeholder='@traducir("Teléfono", "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">@traducir("Sitio web", "Sitio web")<b class="text-danger">*</b></label>
                            <input type="text" id="webCliente" name="webCliente" class='form-control form-control-sm' placeholder='@traducir("Sitio Web", "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">@traducir("E-mail", "E-mail")<b class="text-danger">*</b></label>
                            <input type="text" id="mailCliente" name="mailCliente" class='form-control form-control-sm required' placeholder='@traducir("E-mail", "E-mail") *' data-format="email" required>
                            <div class="invalid-feedback"></div>
                        </div>
                    </div>
                    <!-- CONTACTO 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> (@traducir('Datos donde se enviará la facturación', '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">@traducir('Nombre Completo', 'Nombre Completo')<b class="text-danger">*</b></label>
                            <input type="text" id="nombreContactoFactura" name="nombreContactoFactura" class='form-control form-control-sm required' placeholder='@traducir("Nombre Completo", "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">@traducir("Teléfono", "Teléfono")<b class="text-danger">*</b></label>
                            <input type="text" id="telContactoFactura" name="telContactoFactura" class='form-control form-control-sm required' placeholder='@traducir("Teléfono", "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">@traducir("E-mail Facturación", "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='@traducir("E-mail Facturación", "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=''>@traducir('Contactos otros', '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">@traducir("Nombre Completo", "Nombre Completo")</label>
                            <input type="text" id="nombreContacto1" name="nombreContacto1" class='form-control form-control-sm' placeholder='@traducir("Nombre Completo", "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">@traducir("Teléfono", "Teléfono")</label>
                            <input type="text" id="telContacto1" name="telContacto1" class='form-control form-control-sm' placeholder='@traducir("Teléfono", "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">@traducir("E-mail", "E-mail")</label>
                            <input type="text" id="emailContacto1" name="emailContacto1" class='form-control form-control-sm' placeholder='@traducir("E-mail", "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">@traducir("Nombre Completo", "Nombre Completo")</label>
                            <input type="text" id="nombreContacto2" name="nombreContacto2" class='form-control form-control-sm' placeholder='@traducir("Nombre Completo", "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">@traducir("Teléfono", "Teléfono")</label>
                            <input type="text" id="telContacto2" name="telContacto2" class='form-control form-control-sm' placeholder='@traducir("Teléfono", "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">@traducir("E-mail", "E-mail")</label>
                            <input type="text" id="emailContacto2" name="emailContacto2" class='form-control form-control-sm' placeholder='@traducir("E-mail", "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>@traducir("Comentarios", "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">@traducir("Volver", "Volver")</button>
                        </div>
                        <div class="col-2 px-2 text-end">
                            <button class="btn btn-fidelitas w-100 btn-sm" type="submit">@traducir("Agregar Cliente", "Agregar Cliente")</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>        
</div>
<div class='row justify-content-center'>
    <div class='col-12 col-md-2 text-primary text-center fst-italic'>
        <p>@traducir("Cantidad Cliente", "Cantidad Cliente"): <strong>{{ ($clientes['activos'] + $clientes['inactivos'])}}</strong></p>
    </div>
    <div class='col-12 col-md-2 text-success text-center fst-italic'>
        <p>@traducir("Activos", "Activos"): <strong>{{ $clientes['activos'] }}</strong></p>
    </div>
    <div class='col-12 col-md-2 text-danger text-center fst-italic'>
        <p>@traducir("No activos", "No activos"): <strong>{{ $clientes['inactivos']  }}</strong></p>
    </div>
</div>

@endsection
@section('funcionesJS')
    <script src="{{ asset('/Libreria_CA/Js/funciones_departamento_comercial.js') }}?v={{rand()}}"></script>
    <script src="{{ asset('/Libreria_CA/Js/funciones.js') }}?v={{rand()}}"></script>
    <script>        
        $(document).ready(function() {
            verSecciones();
            busqueda_cliente(0,1);
            altaNuevoCliente();
            clienteDefault()
            limpiaCamposdebusqueda();            
            //detectamos cambio de pantalla y regresión a la misma en donde estaba
            document.addEventListener('visibilitychange', function() {
                if (document.visibilityState === 'visible') {
                    // La ventana/página está visible
                    clienteDefault()
                }
            })

            //se utiliza para elegir el campo de búsqueda sea por cliente o usuario 
            $('.segunClienteporUsuario').addClass('d-none')
            $('#usuario').addClass('d-none')
            
            $('#busqueda_por_cliente').on('change',function (e) {
                e.preventDefault();
                $('#lista_clientes').empty();
                $('#lista_usuarios').empty();
                limpiaCamposdebusqueda()
                let clientecheckeado = $(this).prop('checked');  
                if(clientecheckeado){
                    $('#usuario').addClass('d-none')
                    $('#cliente').removeClass('d-none')
                }
                $('.busquedasClientes').removeClass('d-none')
                $('.segunCliente').removeClass('d-none')
                $('.segunClienteporUsuario').addClass('d-none')
            });

            $('#busqueda_por_usuario').on('change',function (e) {
                e.preventDefault();
                $('#lista_clientes').empty();
                $('#lista_usuarios').empty();
                limpiaCamposdebusqueda()
                let usuariocheckeado = $(this).prop('checked');   
                if(usuariocheckeado){
                    $('#usuario').removeClass('d-none')
                    $('#cliente').addClass('d-none')
                }
                $('.busquedasClientes').removeClass('d-none')
                $('.segunClienteporUsuario').removeClass('d-none')
                $('.segunCliente').addClass('d-none')
            })

            busquedaPorCliente('#usuario')                                   
        })
    </script>  
@endsection