@if (!isset($es_modal) || empty($es_modal)) {{-- si es modal, el titulo está en el modal --}}
    <div class="container mt-5 pt-5">
@else
    <div class="container">
@endif
<style>
    
    .ui-widget-header {
        background: #03704f; 
    }
    .select-custom {
    max-height: 50px; 
    overflow-y: auto; 
    }

</style>
        @if (!isset($es_modal) || empty($es_modal)) {{-- si es modal, el titulo está en el modal --}}
            <div class="row justify-content-center my-2 mb-4">
                <div class="col-md-12">
                    <h2 class="text-fidelitas display-6 text-center"> @if (isset($desde)) {{ $desde }} @else Buscador Padrón
                    @endif </h2>
                </div>
            </div>
        @endif
        
        <div id="buscadorClientes" class='row justify-content-center align-items-center'>
            <div class='col-12 col-lg-10'>
                @if (isset($es_modal) && !empty($es_modal))
                    <h6 class="text-center">Buscar Persona / Empresa<br></h6>
                @else
                    @if (isset($desde) && $desde == 'Asignaciones de CUIT en juicios')
                        <h6 class="text-center">Busque la Persona / Empresa a quien le va a asignar los juicios que
                            seleccione<br></h6>
                    @else
                        <h6 class="text-center">Busque la Persona / Empresa con la que desea trabajar<br></h6>
                    @endif
                @endif
            <form id='form_busqueda_cliente_avanzada'>
                    <input type="hidden" id='token' name="_token" value="{{ csrf_token() }}" />
                    <input type="hidden" name="cliente" id="form_cliente" value="{{$cliente->cliente ?? ''}}">
                    <input type="hidden" name="servicio" id="form_servicio" value="{{$servicio ?? ''}}">
                    <input type="hidden" name="tipo_persona" id="tipo_persona" value="F">
                   
                    <div class="d-flex justify-content-center my-2 pt-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="tipoBusqueda" id="busquedaPadron" value="empresa" checked>
                            <label class="form-check-label" for="busquedaPadron">Libre</label>
                        </div>
                        <div class="form-check me-5 ms-5"> <!-- Añade margen derecho -->
                            <input class="form-check-input" type="radio" name="tipoBusqueda" id="busquedaPersona" value="persona">
                            <label class="form-check-label" for="busquedaPersona">Avanzada por Persona</label>
                        </div>
                        <div class="form-check me-3">
                            <input class="form-check-input" type="radio" name="tipoBusqueda" id="busquedaEmpresa" value="empresa">
                            <label class="form-check-label" for="busquedaEmpresa">Avanzada por Empresa</label>
                        </div>                        
                    </div>

                    <div id="textoAvanzado" class='row justify-content-center my-2 segunCliente d-none'>
                        <small class="text-secondary text-center">Para realizar la búsqueda, ingrese los datos en los campos correspondientes y haga click en el botón "Buscar".</small>

                    </div>
                    
                    <div id="textoLibre" class='row justify-content-center my-2 segunCliente'>
                        <small class="text-secondary text-center">Para realizar la búsqueda, ingrese preferentemente
                            CUIT/CUIL/TAXID, sino DNI o nombre completo, luego presione enter o haga click en la
                            lupa</small>
                    </div>

                    
            <div id="div_general">
                <div class="row justify-content-center my-2 w-75 m-auto">
                    <!-- Campo: Apellido -->
                    <div class="col-lg-4 col-md-4 mb-3" id="apellido_ocult">
                        <span class="text-muted">Apellido :</span> <span class="text-danger">*</span>
                        <input type="text" id="apellido" name="apellido" style="text-transform:uppercase;" class="form-control form-control-lg text-left fs-6" placeholder="" autocomplete="off">
                    </div>
                    <!-- Campo: Nombre -->
                    <div class="col-lg-4 col-md-4 mb-3" id="nombre_ocult">
                    <span class="text-muted">Nombre:</span>
                        <input type="text" id="nombre" name="nombre" style="text-transform:uppercase;" class="form-control form-control-lg text-left fs-6" placeholder="" autocomplete="off">
                    </div>
                     <!-- Selector: Género -->
                    <div class="col-lg-4 col-md-4 mb-3" id="genero_ocult">
                        <span class="text-muted">Género :</span>
                        <select name="genero" id="genero" class="form-select form-select-lg text-left fs-7">
                            <option value="" selected>Seleccione un Genero</option>
                            <option value="M">Masculino</option>
                            <option value="F">Femenino</option>
                        </select>
                    </div>
                </div>
               
                <div class="row justify-content-center my-2">  
                    <div class="row align-items-end justify-content-center g-1 container-selector" id="container-selector-pais-prov-localidad-persona">
                        <!-- Campo: Razón Social (Oculto inicialmente) -->
                        <div class="col-lg-3 col-md-3 mb-3 d-none" id="razon_ocult">
                            <!-- Razón Social -->
                            <div>
                                <span class="text-muted">Razón Social:</span> <span class="text-danger">*</span>
                                <input type="text" id="razon_social" name="razon_social" style="text-transform:uppercase;" class="form-control form-control text-left" placeholder="" autocomplete="off">
                            </div>
                        </div>
                        <!-- Select País -->
                        <div class="col-lg-2 col-md-2 mb-3 selector-pais-container">
                            <span class="text-muted">País:</span>
                            <input type="hidden" name="selector_pais" class="selector_pais_input selector_pais_avanzado" value="AR">
                            <select name="selector_pais" class="selector_pais form-select form-select-lg text-left fs-7">
                                <option value="" selected>Seleccione un país</option>
                                @foreach($paises as $pais)
                                    <option value="{{$pais->country_code}}">{{$pais->country_name}}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Select Provincia -->
                        <div class="col-lg-2 col-md-2 mb-3 provincia-container">
                            <span class="text-muted">Provincia:</span>
                            <select name="selector_provincia" class="selector_provincia form-select form-select-lg text-left fs-7">
                                <option value="" selected>Seleccione una Provincia</option>
                                @foreach($provincias as $provincia)
                                    <option value="{{$provincia->codigo_afip}}" @if(isset($sociedad) && $provincia->codigo_afip == $sociedad->codigo_afip) selected="selected" @endif>
                                        {{$provincia->prv_nombre}}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <!-- Select Localidad -->
                        <div class="col-lg-2 col-md-2 mb-3 localidad-container">
                            <span class="text-muted">Localidad:</span>
                            <select name="selector_localidad" class="selector_localidad form-select form-select-lg text-left fs-7">
                                <option value="" selected>Seleccione una localidad</option>
                                {{-- populado por js --}}
                            </select>
                        </div>
                        
                        <!-- Checkbox Mostrar Fallecidos -->
                        <div class="col-lg-2 col-md-2 mb-3 d-flex align-items-center justify-content-center" id="Rango_Etario_checkbox">
                            <input class="form-check-input me-2" type="checkbox" name="Mostrarfallecidos" id="Mostrarfallecidos" value="fallecidos" autocomplete="off">
                            <label class="form-check-label" for="Mostrarfallecidos">Mostrar Fallecidos</label>
                        </div>
                        
                        <!-- Rango Etario -->
                        <div class="col-lg-4 col-md-4 mb-3" id="Rango_Etario"> 
                            <div id="rango-etario-valores" class="text-left pt-3 pb-1 fs-7">
                                Rango Etario: <span id="min-edad">18</span> a <span id="max-edad">100</span>
                            </div>
                            <div id="rango-etario-slider"></div>
                        </div>
                    </div>
                        
                    <!-- Selector: Provincia -->
                     {{-- -
                    <div class="col-lg-4 col-md-4 mb-3">
                    <span class="text-muted"> Provincia :</span> 
                        <select name="codigo_afip" id="codigo_afip" class="form-select form-select-lg text-left fs-7 ">
                            <div class="select-custom">
                            <option value="" selected>Seleccione una Provincia</option>
                            @foreach($provincias as $provincia)
                                @if(isset($provincia->visible) && $provincia->visible == 1)
                                    <option value="{{$provincia->codigo_afip}}" @if(isset($sociedad) && $provincia->codigo_afip == $sociedad->codigo_afip) selected="selected" @endif>
                                        {{$provincia->prv_nombre}}
                                    </option>
                                @endif
                            @endforeach
                            </div> 
                        </select>
                    </div>
                     --}}
                     <div>
                </div>

                    <div class="row justify-content-center my-2">
                        <!-- Botón de Búsqueda -->
                        <div class="col-lg-3 col-md-4 text-center">
                            <button type="button" id="buscar" class="btn btn-fidelitas btn-sm w-30">
                                <i class="bi bi-search"></i> Buscar
                            </button>
                        </div>
                    </div>
                </div>
                </div>
                </form>
                <div id="buscando"></div>
            </div>
             <!-- BUSQUEDA PADRON -->
             <div id="div_padron" class="d-none d-flex justify-content-center">
             <form id='form_busqueda_cliente' class="w-75">
                <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                <div class='input-group shadow mt-3 busquedasClientes'>
                    <input type="hidden" id='clienteOk' name="clienteOk" value="">
                    <input type="hidden" id='desde' name="desde" @if(isset($desde)) value="{{$desde}}" @endif>
                    <input type="hidden" name="selector_pais" value="AR">
                    <input type="text" id='razon_social' name='razon_social' style="text-transform:uppercase; flex: 1 1 auto;"
                        value='' class='form-control form-control-lg text-center cli' list='lista_clientes'
                        placeholder='Buscar Padron...' autocomplete='off'>
                    
                    <button class='input-group-text'>
                        <i id="lupaPersona" class="bi bi-search fs-5 submit"></i>
                        <div id="loadingPersona" class="spinner-border text-fidelitas ms-auto d-none" role="status"
                            aria-hidden="true"></div>
                    </button>
                </div>
            </form>     
      
            </div>
                <div id='notificacion' class='mt-2'></div>
                <div id='lista_clientes' class='overflow-auto col-12 py-2 list-group'></div>
        </div>
    </div>

    @if (isset($desde) && $desde == "Descargar Informe Completo")
    <div class="modal fade" id="exportar" tabindex="-1" role="dialog" aria-labelledby="exportar" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="modal-content" style="line-height: 1em; padding: 30px;">
                <form id="exportar_pdf" name="exportar_pdf" action="/generar-plantilla-ic" method="POST" target="_BLANK" class="p-4 bg-light rounded shadow-sm">
                        {{ csrf_field() }}
                        <div class="col-md-12">
                            <div class="heading-block mb-4 text-center">
                                <h3 class="modal-title fw-bold text-primary">Imprimir</h3>
                            </div>
                        </div>
                        <div class="modal-body text-center">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <h4 class="text-center text-muted mb-3">Seleccione las Secciones que desea Imprimir a PDF</h4>
                                        <div class="col-md-12 text-center d-flex align-items-center justify-content-center">
                                            <input type="checkbox" checked id="exportar_todo" name="seccion_todo" class="form-check-input">
                                            <label for="exportar_todo" class="form-check-label ms-2">Seleccionar todo</label>
                                        </div>
                                        <hr class="my-4"/>
                                        <div class="row">
                                            <!-- Secciones de checkboxes -->
                                            <div class="col-md-4 d-flex align-items-center">
                                                <input type="checkbox" checked id="exportar_brief" name="secciones[]" value="brief" class="form-check-input">
                                                <label for="exportar_brief" class="form-check-label ms-2">Resumen</label>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-center">
                                                <input type="checkbox" checked id="exportar_formales" name="secciones[]" value="formales" class="form-check-input">
                                                <label for="exportar_formales" class="form-check-label ms-2">Formales</label>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-center">
                                                <input type="checkbox" checked id="exportar_comerciales" name="secciones[]" value="comerciales" class="form-check-input">
                                                <label for="exportar_comerciales" class="form-check-label ms-2">Comercial</label>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-center">
                                                <input type="checkbox" checked id="exportar_fiscales" name="secciones[]" value="fiscales" class="form-check-input">
                                                <label for="exportar_fiscales" class="form-check-label ms-2">Fiscales</label>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-center">
                                                <input type="checkbox" checked id="exportar_contables" name="secciones[]" value="contables" class="form-check-input">
                                                <label for="exportar_contables" class="form-check-label ms-2">Contables</label>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-center">
                                                <input type="checkbox" checked id="exportar_sociedades" name="secciones[]" value="sociedades" class="form-check-input">
                                                <label for="exportar_sociedades" class="form-check-label ms-2">Sociedades</label>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-center">
                                                <input type="checkbox" checked id="exportar_legales" name="secciones[]" value="legales" class="form-check-input">
                                                <label for="exportar_legales" class="form-check-label ms-2">Legales</label>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-center">
                                                <input type="checkbox" checked id="exportar_bancos" name="secciones[]" value="bancos" class="form-check-input">
                                                <label for="exportar_bancos" class="form-check-label ms-2">Bancos</label>
                                            </div>
                                            <div class="col-md-4 d-flex align-items-center">
                                                <input type="checkbox" checked id="exportar_comex" name="secciones[]" value="comex" class="form-check-input">
                                                <label for="exportar_comex" class="form-check-label ms-2">ComEx</label>
                                            </div>
                            
                                        </div>
                                    </div>
                                </div>
                                <!-- Campo oculto que recibirá las secciones -->
                                <input type="hidden" id="seccion_ic" name="seccion_ic" value="">
                            </div>
                        </div>
                        <input type="hidden" id="cuit" name="cuit" value="{{$cuit ?? 0}}">
                        <input type="hidden" id="apikey" name="apikey" value="{{$apikey ?? 0}}">
                        <input type="hidden" id="razon_social" name="razon_social" value="{{$razon_social ?? 0}}">
                        <div class="row mt-4">
                            <div class="col-md-6 mb-3">
                                <button id="btn_exportar_pdf_led" class="btn btn-primary w-100 d-flex align-items-center justify-content-center">
                                    <i class="fa fa-file-pdf text-white" style="font-size:22px;"></i>
                                    <span class="ms-2 text-white">Generar PDF</span>
                                </button>
                            </div>
                            <div class="col-md-6 mb-3">
                                <button class="btn btn-secondary w-100" data-bs-dismiss="modal" type="button">Cancelar</button>
                            </div>
                        </div>
                    </form>
        </div>
    </div>
    </div>
    
    @endif