@extends('header_nuevo_generico')
@section('main')
<!--  -->
<div class="container-fluid pt-5 mt-5">
    <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">
    <div class="container py-5">
        <div>
            <h3 class = "text-fidelitas" style="text-align: center;">Panel de Identificadores</h3>
        </div>    
        <div>
            <h5 class = "text-fidelitas">Seleccione el pais</h5>
        </div>
        <div>
            <input type="hidden" id="seleccionPaisIdent" name="seleccionPaisIdent">
            <select class="seleccionPais form-select" aria-label="">
                <option selected>...</option>
                @foreach( $paises as $pais )
                    <option value="{{ $pais->country_code }}">{{ $pais->nombre_pais }}</option>
                @endforeach
            </select>
        </div>
    </div>
    <div class="botonAlta float-end d-none">
        <button type="button" class="btn btn-danger float-right " id="agregarIdentificador">Agregar identificador</button>
    </div>
    <br>
    <!--  Tabla -->
    <br>
    <div class="tablaIdentificadores row justify-content-center my-2" id="tablaIdentificadores" style="margin: auto;"></div>
</div>
<!-- Modales -->
<!--  Alta identificador -->
<div id="altaIdentificador" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">Agregar Identificador</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="modalEditar">
                    <form id="formularioAlta" method="POST">
                        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" class="form-control">
                        <div class="mb-3">
                            <label for="nombreIdentificador" class="form-label">Nombre identificador</label>
                            <input type="text" class="form-control nombreIdentificador" id="nombreIdentificador" aria-describedby="" value="">                            
                        </div>
                        <div class="mb-3">
                            <label for="abreviatura" class="form-label">Abreviatura</label>
                            <input type="text" class="form-control abreviatura" id="abreviatura" aria-describedby="" value="">                            
                        </div>
                        <div class="mb-3">
                            <label for="identificador" class="form-label">Identificador</label>
                            <input type="text" class="form-control identificador" id="identificador" aria-describedby="" value="">                            
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="1" name="esPasaporte" id="esPasaporte">
                                <label class="form-check-label" for="esPasaporte">Es pasaporte</label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="tipo_persona" id="tipo_persona_j" value="J">
                                <label class="form-check-label" for="tipo_persona_j">
                                    Persona juridica
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="tipo_persona" id="tipo_persona_f" value="F" checked>
                                <label class="form-check-label" for="tipo_persona_f">
                                    Persona fisica
                                </label>
                            </div>                                              
                        </div>
                        <div class="alert alert-success d-none exitosAlta" role="alert" style="text-align: center;">
                            Carga exitosa
                        </div>
                        <div class="alert alert-danger d-none errorAlta" role="alert" style="text-align: center;">
                            Ocurrio un error, vuelva a intentarlo mas tarde.
                        </div>
                        <div class="d-flex justify-content-center d-none cargando">
                            <div class="spinner-border text-fidelitas" role="status"></div>
                            <div>
                                <span class="">Cargando...</span>
                            </div>
                        </div>                        
                    </form>                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-fidelitas" data-bs-dismiss="modal" id="cancelarGuardarAlta">Cancelar <i class="bi bi-x-circle-fill"></i></button>
                    <button type="button" class="btn btn-success" id="guardarAlta">Guardar <i class="bi bi-check-circle-fill"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Baja identificador -->
<div id="modalBajaIdetificador" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">Estado de identificador</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>                
                <div class="modal-body" id="modalBaja">                    
                    <p>Esta seguro que quiere cambiar el estado del identificador?</p>
                    <br>
                    <div class="d-flex justify-content-center d-none cargandoDA">
                        <div class="spinner-border text-fidelitas" role="status"></div>
                        <div>
                            <span class="">Cargando...</span>
                        </div>
                    </div>
                    <div class="alert alert-success d-none exitoAltaBaja" role="alert" style="text-align: center;">
                        Carga exitosa
                    </div>
                    <div class="alert alert-danger d-none errorAltaBaja" role="alert" style="text-align: center;">
                        Ocurrio un error, vuelva a intentarlo mas tarde.
                    </div>
                </div>                
                <div class="modal-footer">                                            
                    <form  method="POST">
                        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" class="form-control">                                    
                    </form>
                    <button class="btn btn-fidelitas" data-bs-dismiss="modal" aria-hidden="true">Cancelar <i class="bi bi-x-circle-fill"></i></button>
                    <button class="btn btn-success" id="desactivarIdent">Aceptar <i class="bi bi-check-circle-fill"></i></button>
                </div>
            </div>

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

<!-- Edicion Identificador -->
<div id="edicionIdentificador" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modal-title">Edicion Identificador</h3>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" id="modalEditar">
                    <form id="formularioAlta" method="POST">
                        <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" class="form-control">
                        <div class="mb-3">                            
                            <label for="nombreIdentificadorE" class="form-label">Nombre identificador</label>
                            <input type="text" class="form-control nombreIdentificadorE" id="nombreIdentificadorE" aria-describedby="" value="">                            
                        </div>
                        <div class="mb-3">
                            <label for="abreviaturaE" class="form-label">Abreviatura</label>
                            <input type="text" class="form-control abreviaturaE" id="abreviaturaE" aria-describedby="" value="">                            
                        </div>
                        <div class="mb-3">
                            <label for="identificadorE" class="form-label">Identificador</label>
                            <input type="text" class="form-control identificadorE" id="identificadorE" aria-describedby="" value="" readonly>                            
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" value="" name="esPasaporteE" id="esPasaporteE">
                                <label class="form-check-label" for="esPasaporteE">Es pasaporte</label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="tipo_personaE" id="tipo_persona_ej" value="J">
                                <label class="form-check-label" for="tipo_persona_ej">
                                    Persona juridica
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="tipo_personaE" id="tipo_persona_ef" value="F">
                                <label class="form-check-label" for="tipo_persona_ef">
                                    Persona fisica
                                </label>
                            </div>                                              
                        </div>
                        <div class="d-flex justify-content-center d-none cargandoE">
                            <div class="spinner-border text-fidelitas" role="status"></div>
                            <div>
                                <span class="">Cargando...</span>
                            </div>
                        </div>
                        <div class="alert alert-success d-none exitosEdicion" role="alert" style="text-align: center;">
                            Carga exitosa
                        </div>
                        <div class="alert alert-danger d-none errorEdicion" role="alert" style="text-align: center;">
                            Ocurrio un error, vuelva a intentarlo mas tarde.
                        </div>                                                 
                    </form>                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-fidelitas" data-bs-dismiss="modal" id="cancelarEditarIndicador">Cancelar <i class="bi bi-x-circle-fill"></i></button>
                    <button type="button" class="btn btn-success" id="editarIndicador">Guardar <i class="bi bi-check-circle-fill"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>
<!--  -->
@endsection
@section('funcionesJS')
<script src="{{ asset('/Libreria_CA/Js/funciones_identificadores.js') }}?v={{rand()}}"></script>
<script>
    $(document).ready(function(){
        eventos();
    });
</script>
@endsection