@extends('layouts.edit')

<x-app-layout>
    <x-slot name="header"></x-slot>
    <div class="py-20">
        <div class="bg-white overflow-hidden shadow-2xl sm:rounded-lg p-6 max-w-7xl mx-auto my-4 border">
            <h2 class="text-2xl font-bold mb-4 text-center text-gray-700">Usuarios Registrados</h2>
            <div class="container mx-auto">
                <!-- Tabla de Resultados -->
                <div class="overflow-x-auto">
                    <div class="overflow-x-auto">
                        {{-- regresar si se ve mal --}}
                        <table id="TableUser" class="min-w-full bg-white border border-gray-300">
                            <thead class="bg-gray-100 text-gray-700 uppercase text-sm leading-normal">
                                <tr>
                                    <th class="px-3 py-2 text-center w-20">Cédula</th>
                                    <th class="px-3 py-2 text-center w-40">Nombre</th>
                                    <th class="px-3 py-2 text-center w-52">Correo</th>
                                    <th class="px-3 py-2 text-center w-20">Rol</th>
                                    <th class="px-3 py-2 text-center w-32">Departamento</th>
                                    <th class="px-3 py-2 text-center w-20">Extensión</th>
                                    <th class="px-3 py-2 text-center w-28">Acciones</th>
                                    <th class="px-3 py-2 text-center w-20">Conexión</th>
                                </tr>
                            </thead>
                            <tbody class="text-gray-700 text-sm">
                                @foreach ($users as $user)
                                <tr class="border-b hover:bg-gray-50">
                                    <td class="px-3 py-2 text-center">{{ $user->cedula }}</td>
                                    <td class="px-3 py-2 text-center">{{ $user->name }}</td>
                                    <td class="px-3 py-2 text-center">{{ $user->email }}</td>
                                    <td class="px-3 py-2 text-center">{{ $user->rol }}</td>
                                    <td class="px-3 py-2 text-center">{{ $user->departamento ?? '-' }}</td>
                                    <td class="px-3 py-2 text-center">{{ $user->extension ?? '-' }}</td>

                                    <!-- Acciones -->
                                    <td class="px-3 py-2 flex justify-center space-x-2">
                                        <a href="{{ route('admin.users.edit', $user->id) }}"
                                            class="bg-blue-500 text-white text-xs px-3 py-1 rounded-md hover:bg-blue-600 transition">
                                            Editar
                                        </a>
                                        <button class="toggle-status text-xs px-3 py-1 rounded-md
                                                {{ $user->estado ? 'bg-green-500 text-white' : 'bg-red-500 text-white' }}"
                                                data-user-id="{{ $user->id }}">
                                            <span>{{ $user->estado ? 'Activo' : 'Inactivo' }}</span>
                                        </button>
                                    </td>

                                    <!-- Conexión -->
                                    <td class="px-3 py-2 text-center">
                                        @if ($user->status === 'activo')
                                            <i class="fas fa-circle text-green-500" title="Conectado"></i>
                                        @else
                                            <i class="fas fa-circle text-red-500" title="Desconectado"></i>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
</x-app-layout>

<!-- DataTables CSS y JS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<!-- Toastr CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" rel="stylesheet">
<!-- Toastr JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>



<script>
    $(document).ready(function() {
        $('#TableUser').DataTable({
            "pageLength": 10,
            "lengthMenu": [[10, 20, 50], [10, 20, 50]],
            "responsive": true,
            "ordering": false,
            "autoWidth": false,
            "language": {
                "emptyTable": "No hay usuarios registrados",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ usuarios",
                "infoEmpty": "Mostrando 0 usuarios",
                "lengthMenu": "Mostrar _MENU_ usuarios",
                "loadingRecords": "Cargando...",
                "search": "Buscar:",
                "paginate": {
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            }
        });
    });
</script>

<style>
    /* Clase personalizada para mover el Toastr más abajo */
    .custom-toast-position {
        top: 150px !important;  /* Mueve el mensaje 150px más abajo */
    }

    /* Cambiar el color de fondo y el texto para los mensajes de éxito */
    .toast-success {
        background-color: #28a745 !important;  /* Color de fondo verde */
        color: white !important;  /* Color del texto blanco */
    }

    /* Cambiar el color de fondo y el texto para los mensajes de error */
    .toast-error {
        background-color: #dc3545 !important;  /* Color de fondo rojo */
        color: white !important;  /* Color del texto blanco */
    }

    /* Cambiar el color de fondo y el texto para los mensajes de información */
    .toast-info {
        background-color: #17a2b8 !important;  /* Color de fondo azul */
        color: white !important;  /* Color del texto blanco */
    }

    /* Cambiar el color de fondo y el texto para los mensajes de advertencia */
    .toast-warning {
        background-color: #ffc107 !important;  /* Color de fondo amarillo */
        color: black !important;  /* Color del texto negro */
    }
</style>
<script>
    document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.toggle-status').forEach(button => {
        button.addEventListener('click', async () => {
            const userId = button.dataset.userId;
            const statusSpan = button.querySelector('span');
            const url = `/usuarios/${userId}/toggle-status`;

            // Mostrar mensaje de confirmación
            const confirmacion = confirm('¿Estás seguro de que deseas cambiar el estado de este usuario?');

            if (!confirmacion) {
                return; // Salir si el usuario cancela
            }

            try {
                const response = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });

                const data = await response.json();

                if (data.success) {
                    // Actualizar el botón
                    const newStatus = data.newStatus ? 'Activo' : 'Inactivo';
                    statusSpan.textContent = newStatus;

                    button.classList.toggle('btn-success', data.newStatus);
                    button.classList.toggle('btn-danger', !data.newStatus);

                    // Mostrar mensaje diferente según el estado
                    if (data.newStatus) {
                        toastr.success('El usuario ha sido activado correctamente.');
                    } else {
                        toastr.error('El usuario ha sido desactivado correctamente.');
                    }
                } else {
                    toastr.error('No se pudo cambiar el estado del usuario.');
                }
            } catch (error) {
                console.error('Error al cambiar el estado:', error);
                toastr.error('Error al intentar cambiar el estado del usuario.');
            }
        });
    });
});

    </script>



<script>
    function actualizarEstados() {
        $.ajax({
            url: "{{ route('usuarios.estado') }}",
            type: "GET",
            success: function(response) {
                if (response.html) {
                    $('#TableUser tbody').html(response.html);
                } else {
                    console.error("No se recibió HTML para actualizar.");
                }
            },
            error: function(xhr, status, error) {
                console.error("Error en la solicitud AJAX:", error);
            }
        });
    }
</script>

@if (session('success'))
    <script>
        toastr.success("{{ session('success') }}");
    </script>
@endif

@if (session('error'))
    <script>
        toastr.error("{{ session('error') }}");
    </script>
@endif