@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 Paises</h3>
            </div>            
        </div>
        <!-- -->
        <div class="botonAltaPais float-end ">
            <button type="button" class="btn btn-danger float-right " id="agregarPais">Agregar pais</button>
        </div>
        <br>
        <!--  Tabla -->
        <br>
        <div class="row justify-content-center my-2" id="fancyTablaPaises"></div>
        <!--  Alta paises -->
        <div id="altaPais" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="modal-title">Agregar Pais</h3>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body" id="modalAltaPais">
                            <form id="formularioAlta" method="POST">
                                <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" class="form-control">
                                <div class="mb-3">
                                    <label for="nombrePais" class="form-label">Nombre pais</label>
                                    <input type="text" class="form-control nombrePais" id="nombrePais" aria-describedby="" value="">                            
                                </div>
                                <div class="mb-3">
                                    <label for="codigISO2" class="form-label">Codigo ISO 2</label>
                                    <input type="text" class="form-control codigISO2" id="codigISO2" aria-describedby="" value="">
                                    <div id="helpISO" class="form-text">Siglas que se utilizan para identificar de forma estandarizada los diferentes países, de acuerdo a una normativa de 
                                        la International Standard Organization (ISO).</div>                            
                                </div>
                                <div class="mb-3">
                                    <label for="codigISO3" class="form-label">Codigo ISO 3</label>
                                    <input type="text" class="form-control codigISO3" id="codigISO3" aria-describedby="" value="">                            
                                </div>
                                <div class="mb-3">
                                    <label for="nacionalidad" class="form-label">Nacionalidad</label>
                                    <input type="text" class="form-control nacionalidad" id="nacionalidad" aria-describedby="" value="">                            
                                </div>
                                <div class="mb-3">
                                    <label for="idioma" class="form-label">Idioma</label>
                                    <select name="idioma" id="idioma" class="form-control">
                                        <option value="">Seleccione un idioma...</option>
                                        @foreach ($idiomas as $idioma)
                                        <option value="{{$idioma->codigo}}">{{ $idioma->nombre }}</option>
                                        @endforeach
                                    </select>                                                                                    
                                </div>
                                 <!-- seccion moneda -->
                                 <fieldset>
                                    <legend>Moneda</legend>
                                    <div class="mb-3">
                                        <label for="moneda_code" class="form-label">Código</label>
                                        <input type="text" class="form-control moneda_code" id="moneda_code" aria-describedby="" value="" maxlength="3">                            
                                    </div>
                                    <div class="mb-3">
                                        <label for="moneda-name" class="form-label">Nombre</label>
                                        <input type="text" class="form-control moneda-name" id="moneda-name" aria-describedby="" value="" >                            
                                    </div>
                                </fieldset>
                                <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="cancelarGuardarAltaPais">Cancelar <i class="bi bi-x-circle-fill"></i></button>
                            <button type="button" class="btn btn-success" id="guardarAltaPais">Guardar <i class="bi bi-check-circle-fill"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--  editar pais -->
        <div id="editarPais" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="modal-title">Editar Pais</h3>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body" id="modalEditarPais">
                            <form id="formularioAlta" method="POST">
                                <input type="hidden" name="_token" id="token" value="{{ csrf_token() }}" class="form-control">
                                <div class="mb-3">
                                    <label for="nombrePaisEdicion" class="form-label">Nombre pais</label>
                                    <input type="text" class="form-control nombrePaisEdicion" id="nombrePaisEdicion" aria-describedby="" value="" >                            
                                </div>
                                <div class="mb-3">
                                    <label for="codigISO2Edicion" class="form-label">Codigo ISO 2</label>
                                    <input type="text" class="form-control codigISO2Edicion" id="codigISO2Edicion" aria-describedby="" value="" readonly>
                                    <div id="helpISO" class="form-text">Siglas que se utilizan para identificar de forma estandarizada los diferentes países, de acuerdo a una normativa de 
                                        la International Standard Organization (ISO).</div>                            
                                </div>
                                <div class="mb-3">
                                    <label for="codigISO3Edicion" class="form-label">Codigo ISO 3</label>
                                    <input type="text" class="form-control codigISO3Edicion" id="codigISO3Edicion" aria-describedby="" value="">                            
                                </div>
                                <div class="mb-3">
                                    <label for="nacionalidadEdicion" class="form-label">Nacionalidad</label>
                                    <input type="text" class="form-control nacionalidadEdicion" id="nacionalidadEdicion" aria-describedby="" value="">                            
                                </div>
                                <div class="mb-3">
                                    <label for="idiomaEdicion" class="form-label">Idioma</label>
                                    <select name="idiomaEdicion" id="idiomaEdicion" class="form-control">
                                        <option value="">Seleccione un idioma...</option>
                                        @foreach ($idiomas as $idioma)
                                        <option value="{{$idioma->codigo}}">{{ $idioma->nombre }}</option>
                                        @endforeach
                                    </select>                                                                                    
                                </div>   
                                <div class="mb-3">
                                    <fieldset>
                                        <legend>Moneda</legend>
                                        <div class="mb-3">
                                            <label for="moneda_code_edit" class="form-label">Código</label>
                                            <input type="text" class="form-control moneda_code_edit" id="moneda_code_edit" aria-describedby="" value="" maxlength="3">                            
                                        </div>
                                        <div class="mb-3">
                                            <label for="moneda-name-edit" class="form-label">Nombre</label>
                                            <input type="text" class="form-control moneda-name-edit" id="moneda-name-edit" aria-describedby="" value="" >                            
                                        </div>
                                    </fieldset>
                                </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>
                                <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="cancelarPaisEdicion">Cancelar <i class="bi bi-x-circle-fill"></i></button>
                            <button type="button" class="btn btn-success" id="guardarPaisEdicion">Guardar <i class="bi bi-check-circle-fill"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Modal estado -->
        <div id="modalEstadoPais" class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h3 class="modal-title" id="modal-title">Estado del pais</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 pais?</p>
                            <br>
                            <div class="d-flex justify-content-center d-none cargandoEstado">
                                <div class="spinner-border text-fidelitas" role="status"></div>
                                <div>
                                    <span class="">Cargando...</span>
                                </div>
                            </div>
                            <div class="alert alert-success d-none exitoCambioEstado" role="alert" style="text-align: center;">
                                Carga exitosa
                            </div>
                            <div class="alert alert-danger d-none errorCambioEstado" 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" id="cancelarCambioEstado">Cancelar <i class="bi bi-x-circle-fill"></i></button>
                            <button class="btn btn-success" id="paisCambiarEstado">Aceptar <i class="bi bi-check-circle-fill"></i></button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- -->
        @include("/provincias/provincias")
        @include("/identificadores/modalIdentificador") 
    </div>
@endsection
@section('funcionesJS')
<script src="{{ asset('/Libreria_CA/Js/funciones_paises.js') }}?v={{rand()}}"></script>
<script src="{{ asset('/Libreria_CA/Js/funciones_provincias.js') }}?v={{rand()}}"></script>
<script src="{{ asset('/Libreria_CA/Js/funciones_identificadores.js') }}?v={{rand()}}"></script>
<script>
    $(document).ready(function(){
        let data = '<?php echo(json_encode($paises)); ?>';
        tablaPaises(data);
        altaPais();
        addFormProvincias();
        altaIdentificador();

    });


    $("#editarIndicador").on('click', function() {
                        let E_abreviatura = document.querySelector('#abreviaturaE').value;
                        let E_identificador = document.querySelector('#identificadorE').value;
                        let E_nombre_identificador = document.querySelector('#nombreIdentificadorE').value; 
                        let E_tipo_ident = obtenerValorSeleccionado('tipo_personaE');
                        let E_pasaporte = obtenerValorSeleccionado('esPasaporteE');
                        let pais = $('#seleccionPais').val()
                        let activo = $('#activo').val()
                        $.ajax({
                            method: 'post',
                            url: '/identificadores/editar',
                            data: {E_abreviatura,E_identificador,E_nombre_identificador,E_tipo_ident,pais:$('#seleccionPais').val(),activo,E_pasaporte,_token:$('#token').val()},
                            beforeSend: function(){
                                $('.cargandoE').removeClass('d-none');
                                $("#cancelarEditarIndicador").attr("disabled",true);
                                $("#editarIndicador").attr("disabled",true); 
                            },
                            success: function(data) {
                                $('.cargandoE').addClass('d-none');
                                $('.exitosEdicion').removeClass('d-none');
                                $("#cancelarEditarIndicador").removeAttr("disabled",false);
                                $("#editarIndicador").removeAttr("disabled",false);                                                                                                                                                                 
                                setTimeout(function() {
                                    $('.exitosEdicion').addClass('d-none');
                                    $('#edicionIdentificador').modal('hide'); 
                                }, 1000);   
                                $('#tablaIdentificadores').remove()
                                let divIndicadores = $('<div class="tablaIdentificadores row justify-content-center my-2" id="tablaIdentificadores" style="margin: auto;"></div>')
                                $('.divTabla').append(divIndicadores);
                                paisSeleccinado(pais)
                            },
                            error: function(err){
                                $('.cargandoE').removeClass('d-none');
                                $('.errorEdicion').removeClass('d-none');
                                
                            }

                        });        
                    });   
                    

</script>
@endsection