<?php
helper('html');
?>
<?= $this->extend('plantilla/view_plantilla') ?>
<?= $this->section('js') ?>
<?php
echo script_tag('js/modulos/seguridad/usuario.js');
?>
<?= $this->endSection() ?>

<?= $this->section('content') ?>
<style>

</style>
<div class="row">
    <div class="col-xl-12">
        <div class="card">
            <div class="card-body">

                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="mb-3">

                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="d-flex flex-wrap align-items-center justify-content-end gap-2 mb-3">
                            <div>
                                <a href="/seguridad/usuario/reporte" class="btn btn-primary btnDescargar"><i class="bx bx-download me-1"></i> Descargar Usuarios</a>
                            </div>
                        </div>

                    </div>
                    <div class="col-md-3">
                        <div class="d-flex flex-wrap align-items-center justify-content-end gap-2 mb-3">
                            <div>
                                <a href="#" class="btn btn-danger btnAgregar"><i class="bx bx-plus me-1"></i> Agregar Usuario</a>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-12">
                        <div class="">
                            <div class="table-responsive divTbl">
                                <table class="table table-nowrap align-middle table-hover">

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

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



<div class="modal fade" id="mdlDatos" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true" style="display: none;">
    <div class="modal-dialog  modal-xl">
        <div class="modal-content">
            <div class="modal-header bg-danger">
                <h5 class="modal-title" id="mdlDatosTitle">NUEVO USUARIO</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form action="<?= route_to('usuario.guardar') ?>" method="post" class="frmDatos">
                    <div class="row">
                        <div class="col-md-3">
                            <label for="nombres" class="form-label">Primer nombre</label>
                            <input type="text" class="form-control" id="pers_primer_nombre" name="pers_primer_nombre" placeholder="Primer nombre" required>
                        </div>
                        <div class="col-md-3">
                            <label for="apellido_paterno" class="form-label">Segundo Nombre</label>
                            <input type="text" class="form-control" id="pers_segundo_nombre" name="pers_segundo_nombre" placeholder="Segundo nombre" required>
                        </div>
                        <div class="col-md-3">
                            <label for="apellido_materno" class="form-label">Apellido paterno</label>
                            <input type="text" class="form-control" id="pers_primer_apellido" name="pers_primer_apellido" placeholder="Apellido Paterno" required>
                        </div>
                        <div class="col-md-3">
                            <label for="apellido_materno" class="form-label">Apellido materno</label>
                            <input type="text" class="form-control" id="pers_segundo_apellido" name="pers_segundo_apellido" placeholder="Apellido Materno" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-3">
                            <label for="nombres" class="form-label">Fecha de nacimiento</label>
                            <input type="date" class="form-control" id="pers_fecha_nac" name="pers_fecha_nac" placeholder="Fecha de nacimiento" required>
                        </div>
                        <div class="col-md-3">
                            <label for="pers_sexo" class="form-label">Sexo</label>
                            <select id="pers_sexo" name="pers_sexo" class="form-select" required onchange="">
                                <option selected disabled>Seleccione...</option>
                                <option value="M">Masculino</option>
                                <option value="F">Femenino</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="apellido_materno" class="form-label">Documento de identidad</label>
                            <input type="number" class="form-control" id="pers_num_doc" name="pers_num_doc" placeholder="Documento de identidad" required>
                        </div>
                        <div class="col-md-3">
                            <label for="apellido_materno" class="form-label">Celular</label>
                            <input type="text" class="form-control" id="pers_celular" name="pers_celular" placeholder="Número de celular" required>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12"><br><b>LUGAR DE PROCEDENCIA</b>
                            <hr>
                        </div>

                        <div class="col-md-3">
                            <label for="departamento" class="form-label">Departamento</label>
                            <select class="form-select" id="departamento" name="" aria-label="Floating label select example">
                                <?php foreach ($lsDepartamentos as $departamentos) : ?>
                                    <option value="<?= $departamentos->id ?>"><?= $departamentos->name ?></option>
                                <?php endforeach ?>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="pers_sexo" class="form-label">Provincia</label>
                            <select id="provincia" name="" class="form-select" required onchange="">
                                <option selected disabled>Seleccione...</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="pers_sexo" class="form-label">Distrito</label>
                            <select id="pers_ubigeo_nac" name="pers_ubigeo_nac" class="form-select" required onchange="">
                                <option selected disabled>Seleccione...</option>
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12"><br><b>LUGAR DE RESIDENCIA</b>
                            <hr>
                        </div>

                        <div class="col-md-3">
                            <label for="departamento" class="form-label">Departamento</label>
                            <select class="form-select" id="departamentor" name="" aria-label="Floating label select example">
                                <?php foreach ($lsDepartamentos as $departamentos) : ?>
                                    <option value="<?= $departamentos->id ?>"><?= $departamentos->name ?></option>
                                <?php endforeach ?>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="" class="form-label">Provincia</label>
                            <select id="provinciar" name="" class="form-select" required onchange="">
                                <option selected disabled>Seleccione...</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="" class="form-label">Distrito</label>
                            <select id="pers_ubigeo_actual" name="pers_ubigeo_actual" class="form-select" required onchange="">
                                <option selected disabled>Seleccione...</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label for="pers_direccion" class="form-label">Dirección</label>
                            <input type="text" class="form-control" id="pers_direccion" name="pers_direccion" placeholder="Dirección" required>
                        </div>
                        <div class="col-md-3">
                            <label for="pers_correo" class="form-label">Correo</label>
                            <input type="text" class="form-control" id="pers_correo" name="pers_correo" placeholder="Correo" required>
                        </div>
                        <div class="col-md-12">
                            <center> <label for="departamento" class="form-label"><b>PERFIL DE USUARIO</b></label></center>
                            <center><span>Seleccione al menos un perfil de usuario</span><br></center><br>
                            <?php foreach ($lsPerfiles as $perfiles) : ?>
                                <div class="form-check form-check-inline ">
                                    <input class="form-check-input custom-checkbox" type="checkbox" value="<?= $perfiles->perf_id ?>" id="perfil_<?= $perfiles->perf_id ?>" name="perf_id[]">
                                    <label class="form-check-label" for="perfil_<?= $perfiles->perf_id ?>"><?= $perfiles->perf_descripcion ?></label>
                                </div>
                            <?php endforeach ?>
                        </div>

                    </div>



                    <input type="hidden" id="usua_id" name="usua_id">
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal"><i class="bx bx-x"></i>
                    Cerrar</button>
                <button type="button" class="btn btn-danger btnGuardar"><i class="bx bx-save"></i> Guardar</button>
            </div>
        </div>
    </div>
</div>
<script>
    function cargarDatos(url, selectId, targetId) {
        var targetSelect = document.getElementById(targetId);
        var selectedValue = document.getElementById(selectId).value;
        fetch(url + selectedValue)
            .then(response => {
                if (!response.ok) {
                    throw new Error('La solicitud ha fallado: ' + response.status);
                }
                return response.text();
            })
            .then(html => {
                targetSelect.innerHTML = html;
            })
            .catch(error => console.error('Error:', error.message));
    }

    document.getElementById('departamento').addEventListener('change', function() {
        cargarDatos('<?= site_url("seguridad/usuario/provincia") ?>/', 'departamento', 'provincia');
    });

    document.getElementById('provincia').addEventListener('change', function() {
        cargarDatos('<?= site_url("seguridad/usuario/distrito") ?>/', 'provincia', 'pers_ubigeo_nac');
    });

    document.getElementById('departamentor').addEventListener('change', function() {
        cargarDatos('<?= site_url("seguridad/usuario/provincia") ?>/', 'departamentor', 'provinciar');
    });

    document.getElementById('provinciar').addEventListener('change', function() {
        cargarDatos('<?= site_url("seguridad/usuario/distrito") ?>/', 'provinciar', 'pers_ubigeo_actual');
    });
</script>

<?= $this->endSection() ?>