@extends('layouts.master')
@section('title') Inicio @endsection
@section('content')
<!-- this is breadcrumbs -->
@component('components.breadcrumb')
@slot('li_1') Inicio @endslot
@slot('li_2') Panel Academico @endslot
@slot('title') Usuarios de Sistema @endslot
@endcomponent

<!-- start page content -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body mb-n3">
                <button class="btn btn-de-primary btn-sm px-4 mb-3"
                        data-bs-toggle="modal"
                        data-bs-target="#modalNuevoUsuario">
                    <i class="fas fa-plus me-1"></i> Nuevo Usuario
                </button>
                
                <div class="table-responsive">
                    <table id="tablaPersonal" class="table table-striped mb-0 table-hover">
                          <thead class="thead-light">
                            <tr>
                                <th>ID</th>
                                <th>Username</th>
                                <th>Persona</th>
                                <th>Roles</th>
                                <th>Áreas</th>
                                <th>Estado</th>
                                <th>Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($usuarios as $usuario)
                            <tr id="fila-{{ $usuario->id }}">
                                <td>{{ $usuario->id }}</td>
                                <td>{{ $usuario->username }}</td>
                                <td>{{ $usuario->persona }}</td>

                                <td>
                                    @foreach($usuario->roles as $rol)
                                        <span class="badge bg-info text-dark">
                                            {{ $rol->nombre }}
                                        </span>
                                    @endforeach
                                </td>

                                <td>
                                    @foreach($usuario->areas as $area)
                                        <span class="badge bg-secondary">
                                            {{ $area->nombre }}
                                        </span>
                                    @endforeach
                                </td>

                                <td>
                                    @if($usuario->status == 'Activo')
                                        <span class="badge bg-success">Activo</span>
                                    @else
                                        <span class="badge bg-danger">Inactivo</span>
                                    @endif
                                </td>

                                <td>

                                    <!-- Editar -->
                                    <a href="#"
                                    class="btn-editar-usuario"
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalEditarUsuario"
                                    data-id="{{ $usuario->id }}"
                                    data-username="{{ $usuario->username }}"
                                    data-status="{{ $usuario->status }}">
                                        <i class="las la-pen text-secondary font-18"></i>
                                    </a>

                                    <!-- Roles -->
                                    <a href="#"
                                    class="btn-roles-usuario"
                                    data-bs-toggle="modal"
                                    data-bs-target="#modalRolesUsuario"
                                    data-id="{{ $usuario->id }}">
                                        <i class="las la-user-tag text-primary font-18"></i>
                                    </a>

                                    <!-- Reset -->
                                    <a href="#" class="btn-reset-password"
                                    data-id="{{ $usuario->id }}">
                                        <i class="las la-key text-warning font-18"></i>
                                    </a>

                                    <!-- Estado -->
                                    <a href="#" class="btn-estado-usuario"
                                    data-id="{{ $usuario->id }}">
                                        <i class="las la-sync text-info font-18"></i>
                                    </a>

                                    <!-- Eliminar -->
                                    <a href="#" class="btn-eliminar-usuario text-danger"
                                    data-id="{{ $usuario->id }}">
                                        <i class="las la-trash-alt font-18"></i>
                                    </a>

                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <!--end card-body-->
        </div>
        <!--end card-->
    </div>
    <!--end col-->
</div>

@include('usuarios.modals')

@endsection
@section('script')
<!-- jQuery y DataTables -->

<!-- jQuery y DataTables -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- DataTables Buttons -->
<script src="https://cdn.datatables.net/buttons/2.3.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.6/js/buttons.colVis.min.js"></script>

<!-- DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.6/css/buttons.dataTables.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- DataTables CSS -->
<script>
    $(document).ready(function () {
        $("#tablaPersonal").DataTable({
            "responsive": true,
            "lengthChange": true,
            "autoWidth": false,
            "buttons": [
                {
                    extend: 'collection',
                    text: 'Opciones',
                    buttons: [
                        { extend: 'copy', text: 'Copiar' },
                        { extend: 'csv', text: 'CSV' },
                        { extend: 'excel', text: 'Excel', title: 'Periodos Académicos' },
                        { extend: 'pdf', text: 'PDF' },
                        { extend: 'print', text: 'Imprimir' }
                    ]
                },
                { extend: 'colvis', text: 'Visibilidad de Columna' }
            ],
            "paging": true,
            "searching": true,
            "info": true,
            "language": {
                "search": "Buscar:",
                "lengthMenu": "Mostrar _MENU_ registros por página",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
                "paginate": {
                    "first": "Primero",
                    "previous": "Anterior",
                    "next": "Siguiente",
                    "last": "Último"
                }
            }
        }).buttons().container().appendTo('#tablaPersonal_wrapper .col-md-6:eq(0)');
    });
</script>
<!-- agregar -->
<script>

// =============================
// CARGAR PERSONAS DINÁMICAMENTE
// =============================
document.getElementById('tipoPersona').addEventListener('change', function(){

    let tipo = this.value;
    let selectPersona = document.getElementById('persona_id');

    if(!tipo){
        selectPersona.innerHTML = '<option value="">Seleccione primero el tipo</option>';
        return;
    }

    selectPersona.innerHTML = '<option>Cargando...</option>';

    fetch(`/usuarios/personas/${tipo}`)
        .then(async response => {

            if(!response.ok){
                throw new Error("Error al cargar personas");
            }

            return response.json();
        })
        .then(data => {

            selectPersona.innerHTML = '<option value="">Seleccionar persona</option>';

            if(data.length === 0){
                selectPersona.innerHTML = '<option value="">No hay registros disponibles</option>';
                return;
            }

            data.forEach(persona => {
                selectPersona.innerHTML += `
                    <option value="${persona.id}">
                        ${persona.nombre} ${persona.apellido}
                    </option>
                `;
            });

        })
        .catch(error => {
            console.error(error);
            selectPersona.innerHTML = '<option value="">Error al cargar</option>';
            Swal.fire('Error', 'No se pudieron cargar las personas', 'error');
        });
});


// =============================
// ENVIAR FORMULARIO POR AJAX
// =============================
document.getElementById('formNuevoUsuario').addEventListener('submit', function(e){

    e.preventDefault();

    // Validación básica frontend
    let tipo = document.getElementById('tipoPersona').value;
    let persona = document.getElementById('persona_id').value;

    if(!tipo || !persona){
        Swal.fire('Atención', 'Debe seleccionar tipo y persona', 'warning');
        return;
    }

    // Set hidden values
    document.getElementById('tipoHidden').value = tipo;
    document.getElementById('personaHidden').value = persona;

    let formData = new FormData(this);

    fetch("{{ route('usuarios.store') }}", {
        method: "POST",
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        body: formData
    })
    .then(async response => {

        let data;

        try {
            data = await response.json();
        } catch (error) {
            throw new Error("Respuesta inválida del servidor");
        }

        if(!response.ok){
            throw new Error(data.message || "Error del servidor");
        }

        return data;
    })
    .then(data => {

        if(data.status){
            Swal.fire('Correcto', data.message, 'success')
                .then(() => location.reload());
        } else {
            Swal.fire('Error', data.message, 'error');
        }

    })
    .catch(error => {
        console.error(error);
        Swal.fire('Error', error.message, 'error');
    });

});

</script>
<script>

// RESET PASSWORD
document.addEventListener('click', function(e){
    if(e.target.closest('.btn-reset-password')){
        let id = e.target.closest('.btn-reset-password').dataset.id;

        Swal.fire({
            title: '¿Resetear contraseña?',
            icon: 'warning',
            showCancelButton: true,
        }).then(result => {

            if(result.isConfirmed){
                fetch(`/usuarios/${id}/reset-password`, {
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}"
                    }
                })
                .then(res => res.json())
                .then(data => {
                    Swal.fire('Correcto', data.message, 'success');
                });
            }

        });
    }
});

// CAMBIAR ESTADO
document.addEventListener('click', function(e){
    if(e.target.closest('.btn-estado-usuario')){
        let id = e.target.closest('.btn-estado-usuario').dataset.id;

        fetch(`/usuarios/${id}/estado`, {
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            }
        })
        .then(res => res.json())
        .then(data => {
            Swal.fire('Correcto', data.message, 'success')
                .then(() => location.reload());
        });
    }
});

// ELIMINAR
document.addEventListener('click', function(e){
    if(e.target.closest('.btn-eliminar-usuario')){
        let id = e.target.closest('.btn-eliminar-usuario').dataset.id;

        Swal.fire({
            title: '¿Eliminar usuario?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33'
        }).then(result => {

            if(result.isConfirmed){
                fetch(`/usuarios/${id}`, {
                    method: "POST",
                    headers: {
                        'X-CSRF-TOKEN': "{{ csrf_token() }}",
                        'X-HTTP-Method-Override': 'DELETE'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    if(data.status){
                        document.getElementById('fila-'+id).remove();
                        Swal.fire('Eliminado', data.message, 'success');
                    }else{
                        Swal.fire('Error', data.message, 'error');
                    }
                });
            }

        });
    }
});

</script>


<script>

    // Cargar personas según tipo
    document.getElementById('tipoPersona').addEventListener('change', function(){

        let tipo = this.value;
        let selectPersona = document.getElementById('persona_id');

        selectPersona.innerHTML = '<option>Cargando...</option>';

        fetch(`/usuarios/personas/${tipo}`)
            .then(res => res.json())
            .then(data => {

                selectPersona.innerHTML = '<option value="">Seleccionar persona</option>';

                data.forEach(persona => {
                    selectPersona.innerHTML += `
                        <option value="${persona.id}">
                            ${persona.nombre} ${persona.apellido}
                        </option>
                    `;
                });

            });

    });

</script>

<script>

// Cargar datos al modal
document.addEventListener('click', function(e){

    if(e.target.closest('.btn-editar-usuario')){

        let btn = e.target.closest('.btn-editar-usuario');

        document.getElementById('edit_id').value = btn.dataset.id;
        document.getElementById('edit_username').value = btn.dataset.username;
        document.getElementById('edit_status').value = btn.dataset.status;
        document.getElementById('edit_password').value = '';

    }

});

</script>

<script>

document.getElementById('formEditarUsuario').addEventListener('submit', function(e){

    e.preventDefault();

    let id = document.getElementById('edit_id').value;

    fetch(`/usuarios/${id}`, {
        method: "POST",
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}",
            'X-HTTP-Method-Override': 'PUT'
        },
        body: new URLSearchParams({
            username: document.getElementById('edit_username').value,
            status: document.getElementById('edit_status').value,
            password: document.getElementById('edit_password').value
        })
    })
    .then(async response => {

        let data = await response.json();

        if(!response.ok){
            throw new Error(data.message || "Error");
        }

        return data;
    })
    .then(data => {

        if(data.status){
            Swal.fire('Actualizado', data.message, 'success')
                .then(() => location.reload());
        }

    })
    .catch(error => {
        Swal.fire('Error', error.message, 'error');
    });

});

</script>

<script>

// =============================
// CARGAR ROLES EN MODAL
// =============================
document.addEventListener('click', function(e){

    if(e.target.closest('.btn-roles-usuario')){

        let btn = e.target.closest('.btn-roles-usuario');
        let usuarioId = btn.dataset.id;

        document.getElementById('roles_usuario_id').value = usuarioId;

        let contenedor = document.getElementById('contenedorRoles');
        contenedor.innerHTML = '<p>Cargando roles...</p>';

        fetch(`/usuarios/${usuarioId}/roles`)
            .then(res => res.json())
            .then(data => {

                contenedor.innerHTML = '';

                data.roles.forEach(rol => {

                    let checked = data.usuario_roles.includes(rol.id) ? 'checked' : '';

                    contenedor.innerHTML += `
                        <div class="form-check">
                            <input class="form-check-input"
                                   type="checkbox"
                                   name="roles[]"
                                   value="${rol.id}"
                                   id="rol_${rol.id}"
                                   ${checked}>
                            <label class="form-check-label" for="rol_${rol.id}">
                                ${rol.nombre}
                            </label>
                        </div>
                    `;
                });

            });

    }

});


// =============================
// GUARDAR ROLES
// =============================
document.getElementById('formRolesUsuario').addEventListener('submit', function(e){

    e.preventDefault();

    let usuarioId = document.getElementById('roles_usuario_id').value;
    let formData = new FormData(this);

    fetch(`/usuarios/${usuarioId}/roles`, {
        method: "POST",
        headers: {
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        body: formData
    })
    .then(res => res.json())
    .then(data => {

        if(data.status){
            Swal.fire('Correcto', data.message, 'success')
                .then(() => location.reload());
        }

    })
    .catch(() => {
        Swal.fire('Error', 'No se pudieron actualizar los roles', 'error');
    });

});

</script>
@endsection