@extends('layouts.app')

@section('content')
    <!-- Modal Create/Edit/View Users -->
    <div class="modal fade" id="modal-user" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modal-title">Usuario</h5>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <form id="user-form">
                    <div class="modal-body">
                        @csrf
                        <input type="hidden" name="_method" id="_method" value="POST">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="name">Nombre</label>
                                    <input placeholder="Nombre" type="text" class="form-control" id="name" name="name"
                                        required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="email">Correo</label>
                                    <input placeholder="email@example.com" type="email" class="form-control" id="email"
                                        name="email" required>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6" id="password-group">
                                <div class="form-group">
                                    <label for="password">Contraseña</label>
                                    <input placeholder="Contraseña" type="password" class="form-control" id="password"
                                        name="password">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="rol">Rol de Usuario</label>
                                    <select class="form-control" id="rol" required>
                                        <option value="" class="text-center"> Selecciona un Rol </option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Tabla de Permisos -->
                        <div class="col-12 mt-3">
                            <h5>Permisos de Usuario</h5>
                            <div class="table-responsive">
                                <table class="table table-bordered table-sm">
                                    <thead class="text-center">
                                        <tr>
                                            <th>Módulo</th>
                                            <th>Ver</th>
                                            <th>Crear</th>
                                            <th>Editar</th>
                                            <th>Eliminar</th>
                                            <th>Todo</th>
                                        </tr>
                                    </thead>
                                    <tbody id="permisos-body">
                                        <!-- Filas generadas dinámicamente -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-success" id="btn-submit">
                            <i class="fas fa-check"></i> Crear
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="row justify-content-center">
        <div class="col-md-9">
            <div class="card card-outline card-info">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6">
                            <h4><i class="fa fa-users"></i> Lista de Usuarios</h4>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="#" class="btn bg-gradient-navy btn-sm shadow" id="btn-add" data-bs-toggle="modal"
                                data-bs-target="#modal-user"><i class="fa fa-plus"></i> Nuevo Usuario</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive" style="overflow-x: hidden">
                        <table class="table table-bordered table-sm table-striped" id="tabla-usuarios">
                            <thead class="text-center">
                                <th>N°</th>
                                <th>Nombre</th>
                                <th>Email</th>
                                <th>Acciones</th>
                            </thead>
                            <tbody id="tbody-usuarios"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        // Módulos para la tabla de permisos
        const modulos = [
            { id: 'retenciones', nombre: 'Retenciones' },
            { id: 'proveedores', nombre: 'Proveedores' },
            { id: 'periodos', nombre: 'Periodos Fiscales' },
            { id: 'unidad_tributaria', nombre: 'Unidad Tributaria' },
            { id: 'usuarios', nombre: 'Usuarios' }
        ];

        // Lista de roles y permisos disponibles
        let rolesDisponibles = [];
        let permisosDisponibles = [];

        // Configuraciones predefinidas de permisos por rol
        const permisosPredefinidos = {
            's.admin': ['ver', 'crear', 'editar', 'eliminar'], // Todos los permisos
            'editor': ['ver', 'editar'], // Solo ver y editar
            'visor': ['ver'], // Solo ver
            // Otros roles no tienen permisos predefinidos
        };

        // Función para cargar roles dinámicamente (retorna una Promise)
        function cargarRoles() {
            return new Promise((resolve, reject) => {
                fetch('/api/roles/list', {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 'ok' && data.data) {
                            rolesDisponibles = data.data;
                            const rolSelect = $('#rol');
                            rolSelect.empty();
                            rolSelect.append('<option value="" class="text-center"> Selecciona un Rol </option>');
                            data.data.forEach(rol => {
                                rolSelect.append(`<option value="${rol.name}">${rol.name}</option>`);
                            });
                            resolve();
                        } else {
                            reject(new Error('No se pudieron cargar los roles'));
                        }
                    })
                    .catch(error => {
                        console.error('Error al cargar roles:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'No se pudieron cargar los roles',
                            timer: 3000
                        });
                        reject(error);
                    });
            });
        }

        // Función para cargar permisos desde la BD
        function cargarPermisosDisponibles() {
            fetch('/api/permissions/list', {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'ok' && data.data) {
                        permisosDisponibles = data.data;
                        // console.log('Permisos disponibles:', permisosDisponibles);
                        generarTablaPermisos();
                    } else {
                        console.error('Datos de permisos no válidos:', data);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'No se pudieron cargar los permisos',
                            timer: 3000
                        });
                    }
                })
                .catch(error => {
                    console.error('Error al cargar permisos:', error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'No se pudieron cargar los permisos',
                        timer: 3000
                    });
                });
        }

        // Función para obtener el nombre de un permiso
        function getPermissionName(accion, modulo) {
            const permission = permisosDisponibles.find(p => p.name === `${accion}_${modulo}`);
            if (!permission) {
                console.warn(`Permiso no encontrado: ${accion}_${modulo}`);
                return null;
            }
            return permission.name;
        }

        // Función para generar la tabla de permisos
        function generarTablaPermisos() {
    const tbody = $('#permisos-body');
    tbody.empty();

    modulos.forEach(modulo => {
        const permisos = ['ver', 'crear', 'editar', 'eliminar']
            .map(accion => ({
                accion,
                name: getPermissionName(accion, modulo.id)
            }))
            .filter(permiso => permiso.name !== null);

        if (permisos.length === 0) {
            console.warn(`No se encontraron permisos para el módulo: ${modulo.nombre}`);
            return;
        }

        let tr = `
            <tr>
                <td>${modulo.nombre}</td>
        `;

        ['ver', 'crear', 'editar', 'eliminar'].forEach(accion => {
            const permiso = permisos.find(p => p.accion === accion);
            if (permiso) {
                tr += `
                    <td class="text-center">
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input permiso" 
                                name="permissions[]" id="${modulo.id}_${accion}" value="${permiso.name}" data-modulo="${modulo.id}">
                        </div>
                    </td>
                `;
            } else {
                tr += `<td></td>`;
            }
        });

        tr += `
                <td class="text-center">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input check-all" 
                            data-modulo="${modulo.id}">
                    </div>
                </td>
            </tr>
        `;
        tbody.append(tr);
    });

    $('.check-all').on('change', function () {
        const modulo = $(this).data('modulo');
        $(`input[name='permissions[]'][data-modulo='${modulo}']`).prop('checked', $(this).prop('checked'));
    });

    $('.permiso').on('change', function () {
        const modulo = $(this).data('modulo');
        const checkAll = $(`.check-all[data-modulo='${modulo}']`);
        const allChecked = $(`input[name='permissions[]'][data-modulo='${modulo}']`).length === $(`input[name='permissions[]'][data-modulo='${modulo}']:checked`).length;
        checkAll.prop('checked', allChecked);
    });
}

        // Función para cargar permisos predefinidos según el rol
        function cargarPermisosPredefinidos(rol) {
            $('.permiso, .check-all').prop('checked', false);

            if (!permisosPredefinidos[rol]) return;

            modulos.forEach(modulo => {
                permisosPredefinidos[rol].forEach(accion => {
                    const checkbox = $(`input[name='permissions[]'][id='${modulo.id}_${accion}']`);
                    if (checkbox.length) {
                        checkbox.prop('checked', true);
                    }
                });
                const totalPermisos = $(`input[name='permissions[]'][id^='${modulo.id}_']`).length;
                const permisosMarcados = $(`input[name='permissions[]'][id^='${modulo.id}_']:checked`).length;
                $(`.check-all[data-modulo='${modulo.id}']`).prop('checked', totalPermisos > 0 && permisosMarcados === totalPermisos);
            });
        }

        // Función para cargar permisos existentes
        function cargarPermisos(permisos) {
            $('.permiso, .check-all').prop('checked', false);

            if (!permisos) return;

            permisos.forEach(permiso => {
                const checkbox = $(`input[name='permissions[]'][value='${permiso.name}']`);
                if (checkbox.length) {
                    checkbox.prop('checked', true);
                } else {
                    console.warn(`Checkbox no encontrado para permiso: ${permiso.name}`);
                }
            });

            modulos.forEach(modulo => {
                const totalPermisos = $(`input[name='permissions[]'][id^='${modulo.id}_']`).length;
                const permisosMarcados = $(`input[name='permissions[]'][id^='${modulo.id}_']:checked`).length;
                $(`.check-all[data-modulo='${modulo.id}']`).prop('checked', totalPermisos > 0 && permisosMarcados === totalPermisos);
            });
        }

        function configurarFormulario(modo, userId = null) {
            const form = $('#user-form');
            const submitBtn = $('#btn-submit');
            const passwordField = $('#password');
            const passwordGroup = $('#password-group');
            const nameField = $('#name');
            const emailField = $('#email');
            const rolField = $('#rol');

            form.trigger('reset');
            $('#_method').val('POST');
            generarTablaPermisos();

            if (modo === 'crear') {
                $('#modal-title').text('Nuevo Usuario');
                submitBtn.html('<i class="fas fa-check"></i> Crear').show();
                passwordGroup.show();
                passwordField.prop('required', true);
                nameField.prop('disabled', false);
                emailField.prop('disabled', false);
                rolField.prop('disabled', false);
                $('.permiso, .check-all').prop('disabled', false);
                form.attr('action', '/api/users/store');
                // No asignar permisos predefinidos al cambiar el rol en modo crear
                rolField.off('change'); // Desactivar cualquier evento change
            } else if (modo === 'editar') {
                $('#modal-title').text('Editar Usuario');
                submitBtn.html('<i class="fas fa-save"></i> Actualizar').show();
                $('#_method').val('PUT');
                passwordGroup.show();
                passwordField.prop('required', false).val('');
                nameField.prop('disabled', false);
                emailField.prop('disabled', false);
                rolField.prop('disabled', false);
                $('.permiso, .check-all').prop('disabled', false);
                form.attr('action', `/api/users/${userId}`);
                // Cargar datos del usuario, incluyendo permisos actuales
                cargarDatosUsuario(userId, false);
                // No asignar permisos predefinidos al cambiar el rol en modo edición
                rolField.off('change'); // Desactivar cualquier evento change
            } else if (modo === 'ver') {
                $('#modal-title').text('Detalles del Usuario');
                submitBtn.hide();
                passwordGroup.hide();
                nameField.prop('disabled', true);
                emailField.prop('disabled', true);
                rolField.prop('disabled', true);
                $('.permiso, .check-all').prop('disabled', true);
                form.attr('action', '');
                cargarDatosUsuario(userId, true);
                // Desactivar el evento change en modo ver
                rolField.off('change');
            }
        }

        // Cargar datos del usuario
        async function cargarDatosUsuario(id_user, isView) {
            try {

                const response = await fetch(`/api/users/${id_user}`, {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });
                const data = await response.json();

                if (data && data.status === 'ok' && data.data) {
                    $('#name').val(data.data.name || '');
                    $('#email').val(data.data.email || '');
                    // Establecer el rol seleccionado
                    const rolName = data.data.rol && data.data.rol.name ? data.data.rol.name : '';
                    $('#rol').val(data.data.rol[0].name); // Selecciona el rol actual
                    cargarPermisos(data.data.permisos || []);
                    if (isView) {
                        $('.permiso, .check-all, #rol').prop('disabled', true);
                    }
                } else {
                    throw new Error('Formato de datos inesperado');
                }
            } catch (error) {
                console.error('Error:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: error.message || 'No se pudieron cargar los datos del usuario',
                    timer: 3000
                });
            }
        }

        $(document).ready(function () {
            let id_user_gl = '';
            consultarUsuarios();
            cargarRoles();
            cargarPermisosDisponibles();

            // Botón para crear nuevo usuario
            $('#btn-add').on('click', function () {
                configurarFormulario('crear');
                $('#modal-user').modal('show');
            });

            // Botón para editar usuario
            $(document).on('click', '.edit', function (e) {
                e.preventDefault();
                id_user_gl = $(this).data('id');
                configurarFormulario('editar', id_user_gl);
                $('#modal-user').modal('show');
            });

            // Botón para ver detalles del usuario
            $(document).on('click', '.detalle', function (e) {
                e.preventDefault();
                id_user_gl = $(this).data('id');
                configurarFormulario('ver', id_user_gl);
                $('#modal-user').modal('show');
            });

            // Botón para eliminar usuario
            $(document).on('click', '.delete', function (e) {
                e.preventDefault();
                const id_user = $(this).data('id');
                if (!id_user) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'ID de usuario no válido',
                        timer: 3000
                    });
                    return;
                }
                Swal.fire({
                    title: 'Eliminar',
                    text: '¿Estás seguro de que quieres eliminar este usuario?',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Aceptar',
                    cancelButtonText: 'Cancelar',
                    reverseButtons: true
                }).then((result) => {
                    if (result.isConfirmed) {
                        eliminarUsuario(id_user);
                    }
                });
            });

            // Limpiar el modal al cerrarlo para evitar bloqueo
            $('#modal-user').on('hidden.bs.modal', function () {
                $('#user-form').trigger('reset'); // Reinicia el formulario
                $('.permiso, .check-all').prop('checked', false); // Desmarca los checkboxes
                $('#name, #email, #rol').prop('disabled', false); // Habilita los campos
                $('#password-group').show(); // Muestra el campo de contraseña
                $('#_method').val('POST'); // Restaura el método
                $('#modal-title').text('Usuario'); // Restaura el título
                $('#btn-submit').show(); // Muestra el botón
                $('.modal-backdrop').remove(); // Elimina el backdrop
                $('body').removeClass('modal-open'); // Restaura el body
            });

            // Enviar formulario
            $('#user-form').on('submit', function (e) {
                e.preventDefault();
                const formData = new FormData(this);
                const method = $('#_method').val();
                const url = $(this).attr('action');

                // Agregar rol
                const rol = $('#rol').val();
                formData.delete('rol');
                if (rol) {
                    formData.append('roles[]', rol);
                }

                // Depuración: Mostrar datos enviados
                const formObject = {};
                for (let [key, value] of formData.entries()) {
                    if (key.endsWith('[]')) {
                        const baseKey = key.slice(0, -2);
                        formObject[baseKey] = formObject[baseKey] || [];
                        formObject[baseKey].push(value);
                    } else {
                        formObject[key] = value;
                    }
                }
                // console.log('Datos enviados:', formObject);

                fetch(url, {
                    method: 'POST',
                    body: JSON.stringify(formObject),
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        // console.log('Respuesta del servidor:', data);
                        if (data.status) {
                            consultarUsuarios(); // Actualizar la tabla
                            Swal.fire({
                                title: method === 'POST' ? '¡Usuario creado!' : '¡Usuario actualizado!',
                                text: data.message,
                                icon: 'success',
                                timer: 3000
                            });
                            $('#modal-user').modal('hide');
                        } else {
                            let template = '<div><ol>';
                            if (data.mjs) {
                                template += `<li class='text-left text-danger'>${data.mjs}</li>`;
                            } else {
                                $.each(data.errors, function (key, value) {
                                    template += `<li class='text-left text-danger'>${value}</li>`;
                                });
                            }
                            template += '</ol></div>';
                            Swal.fire({
                                icon: 'error',
                                title: '¡Ups!',
                                html: template
                            });
                        }
                    })
                    .catch(error => {
                        console.error('Error en fetch:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Error al procesar la solicitud: ' + error.message,
                            timer: 3000
                        });
                    });
            });

            // Consultar usuarios
            function consultarUsuarios() {
                fetch('/api/users/list/all', {
                    method: 'GET',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Error en la consulta: ' + response.statusText);
                        }
                        return response.json();
                    })
                    .then(data => {
                        let num = 1;
                        let template = '';
                        if (data.status === 'ok' && data.data) {
                            data.data.forEach(e => {
                                template += `
                                                <tr>
                                                    <td class="text-center">${num}</td>
                                                    <td class="text-center">${e.name}</td>
                                                    <td class="text-center">${e.email}</td>
                                                    <td class="text-center">
                                                        <button type="button" class="detalle btn btn-sm bg-gradient-navy" data-id="${e.id}" title="Información del Usuario">
                                                            <i class="fas fa-info-circle"></i>
                                                        </button>
                                                        <button type="button" class="edit btn btn-sm bg-navy-500" data-id="${e.id}" title="Editar Usuario">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                        <button type="button" class="delete btn btn-sm btn-danger" data-id="${e.id}" title="Eliminar">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            `;
                                num++;
                            });
                        } else {
                            console.warn('Datos de usuarios no válidos:', data);
                        }

                        // Destruir y reiniciar DataTable
                        if ($.fn.DataTable.isDataTable('#tabla-usuarios')) {
                            $('#tabla-usuarios').DataTable().clear().destroy();
                        }
                        $('#tbody-usuarios').html(template);
                        $('#tabla-usuarios').DataTable({
                            language: {
                                "decimal": "",
                                "emptyTable": "No hay datos disponibles en la tabla",
                                "info": "Mostrando _START_ a _END_ de _TOTAL_ entradas",
                                "infoEmpty": "Mostrando 0 a 0 de 0 entradas",
                                "infoFiltered": "(filtrado de _MAX_ entradas totales)",
                                "infoPostFix": "",
                                "thousands": ",",
                                "lengthMenu": "Mostrar _MENU_ entradas",
                                "loadingRecords": "Cargando...",
                                "processing": "Procesando...",
                                "search": "Buscar:",
                                "zeroRecords": "No se encontraron registros coincidentes",
                                "paginate": {
                                    "first": "Primero",
                                    "last": "Último",
                                    "next": "Siguiente",
                                    "previous": "Anterior"
                                },
                                "aria": {
                                    "sortAscending": ": activar para ordenar la columna de manera ascendente",
                                    "sortDescending": ": activar para ordenar la columna de manera descendente"
                                }
                            },
                            // responsive: true,
                            destroy: true
                        });
                    })
                    .catch(error => {
                        console.error('Error al consultar usuarios:', error);
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'No se pudo cargar la lista de usuarios: ' + error.message,
                            timer: 3000
                        });
                    });
            }

            // Eliminar usuario
            function eliminarUsuario(id_user) {
                fetch(`/api/users/${id_user}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            return response.json().then(err => {
                                throw new Error(`HTTP ${response.status}: ${err.message || response.statusText}`);
                            });
                        }
                        return response.json();
                    })
                    .then(data => {
                        consultarUsuarios(); // Actualizar la tabla
                        if (data.status === 'ok') {
                            Swal.fire({
                                title: 'Usuario eliminado',
                                text: data.message || 'Usuario eliminado correctamente',
                                icon: 'success',
                                timer: 2000
                            });
                        } else {
                            throw new Error(data.message || 'Error al eliminar el usuario');
                        }
                    })
                    .catch(error => {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: `Error al eliminar usuario: ${error.message}`,
                            timer: 3000
                        });
                    });
            }
        });
    </script>
@endsection