@extends('layouts.app')

@section('title', 'Usuarios')

@section('css')
    <style>
        #usuarios thead {
            background-color: #343a40;
            color: white;
        }
    </style>
@endsection

@section('content')
    <div class="card mt-2">
        <div class="card-header d-flex justify-content-between">
            <h4>Lista de Usuarios</h4>
            <div class="align-self-center">
                <a href="{{ route('users.create') }}" class="btn btn-success btn-sm">Nuevo Registro</a>
            </div>
        </div>
        <div class="card-body">

            <table id="usuarios" class="table table-striped table-bordered">
                <thead class="table-dark">
                    <tr>
                        <th>Nombres</th>
                        <th>Email</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
@endsection

@section('js')
    <script>
        $(document).ready(function() {
            var table = $('#usuarios').DataTable({
                ajax: {
                    url: URLs+'/mostrar-users',
                    dataSrc: 'data'
                },
                columns: [
                    { data: 'name' },
                    { data: 'email' },
                    { data: 'actions', title: 'Acciones', orderable: false, searchable: false }
                ],
                language: {
                    "lengthMenu": "Mostrar _MENU_ registros por página",
                    "zeroRecords": "Nada encontrado - disculpa",
                    "info": "Mostrando la página _PAGE_ de _PAGES_",
                    "infoEmpty": "No se encuentran registros",
                    "infoFiltered": "(filtrado de _MAX_ registros totales)",
                    "search": "Buscar:",
                    "paginate": {
                        'next': "Siguiente",
                        'previous': "Anterior"
                    }
                }
            });

            $('#usuarios').on('draw.dt', function() {
                $('[data-bs-toggle="tooltip"]').tooltip();
            });

             // Botón Eliminar
            $('#usuarios').on('click', '.eliminar-btn', function() {
                var userId = $(this).data('id');

                Swal.fire({
                    title: '¿Está seguro?',
                    text: "¡Este usuario será desactivado!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, eliminar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: `${URLs}/users/${userId}`,
                            type: 'DELETE',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Usuario eliminado correctamente',
                                    showConfirmButton: true,
                                }).then(() => {
                                    table.ajax.reload(null, false); // Recarga sin resetear paginación
                                });
                            },
                            error: function() {
                                Swal.fire('Error', 'Hubo un problema al eliminar.', 'error');
                            }
                        });
                    }
                });
            });

            // Botón Restaurar
            $('#usuarios').on('click', '.restaurar-btn', function() {
                var userId = $(this).data('id');
                Swal.fire({
                    title: '¿Restaurar usuario?',
                    text: "El usuario volverá a estar activo",
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#28a745',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, restaurar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: `${URLs}/users/${userId}/restaurar`,
                            type: 'PUT',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Usuario restaurado correctamente',
                                    showConfirmButton: true,
                                }).then(() => {
                                    table.ajax.reload(null, false);
                                });
                            },
                            error: function() {
                                Swal.fire('Error', 'Hubo un problema al restaurar.', 'error');
                            }
                        });
                    }
                });
            });

            // Botón Enviar Link de Recuperación
            $('#usuarios').on('click', '.send-reset-link-btn', function() {
                var userId = $(this).data('id');
                var userEmail = $(this).data('email');
                Swal.fire({
                    title: '¿Enviar link de recuperación?',
                    text: "Se enviará un correo a: " + userEmail,
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Sí, enviar',
                    cancelButtonText: 'Cancelar'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Mostrar loading
                        Swal.fire({
                            title: 'Enviando...',
                            text: 'Por favor espera',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                        $.ajax({
                            url: `${URLs}/admin/send-reset-link/${userId}`,
                            type: 'POST',
                            data: {
                                _token: '{{ csrf_token() }}'
                            },
                            success: function(response) {
                                Swal.fire(
                                    '¡Enviado!',
                                    'Link de recuperación enviado correctamente',
                                    'success'
                                );
                            },
                            error: function(xhr) {
                                Swal.fire(
                                    'Error',
                                    'Hubo un problema al enviar el link',
                                    'error'
                                );
                            }
                        });
                    }
                });
            });
        });
    </script>
@endsection