@extends('layouts.app')

@section('content')
    <div class="flex h-screen">
        <aside class="w-64 bg-gray-800 text-white p-4">
            <h1 class="text-2xl font-bold mb-8">WowDash</h1>
            <nav>
                <a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded transition-all">Dashboard</a>
                <a href="#" class="block py-2 px-4 hover:bg-gray-600 rounded transition-all">Widgets</a>
            </nav>
        </aside>

        <main class="flex-1 p-8">
            <form id="searchForm" method="POST" action="{{ route('buscar-usuarios') }}">
                @csrf
                <div class="flex items-center space-x-2">
                    <input type="text" name="query" id="searchPaciente"
                        class="border px-4 py-2 rounded-lg dark:bg-gray-800 dark:text-white"
                        placeholder="Buscar usuario...">
                    <button type="submit"
                        class="py-2 px-4 bg-cyan-700 text-white rounded hover:bg-cyan-800">Buscar</button>
                </div>
            </form>

            <p id="error-message" class="text-red-600 mt-2 hidden"></p>

            <!-- Tarjetas de estadísticas -->
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
                <div class="bg-white shadow-lg p-6 rounded-lg">
                    <h3 class="text-lg font-semibold text-gray-800">Usuarios registrados</h3>
                    <p class="text-2xl font-bold text-cyan-700">150</p>
                </div>
                <div class="bg-white shadow-lg p-6 rounded-lg">
                    <h3 class="text-lg font-semibold text-gray-800">Exámenes realizados</h3>
                    <p class="text-2xl font-bold text-green-600">320</p>
                </div>
                <div class="bg-white shadow-lg p-6 rounded-lg">
                    <h3 class="text-lg font-semibold text-gray-800">Usuarios bloqueados</h3>
                    <p class="text-2xl font-bold text-red-600">5</p>
                </div>
            </div>

            <!-- Gráficos -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
                <div class="bg-white shadow-lg p-6 rounded-lg">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Distribución de Usuarios</h3>
                    <canvas id="userChart"></canvas>
                </div>
                <div class="bg-white shadow-lg p-6 rounded-lg">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Exámenes por mes</h3>
                    <canvas id="examChart"></canvas>
                </div>
            </div>

            <!-- MODAL DE RESULTADOS -->
            <div id="searchModal" class="fixed inset-0 bg-black bg-opacity-50 hidden flex items-center justify-center">
                <div class="bg-white dark:bg-gray-800 w-full max-w-3xl p-6 rounded-lg shadow-lg">
                    <div class="flex justify-between items-center border-b pb-3">
                        <h2 class="text-xl font-bold text-cyan-700 dark:text-white">Resultados de la Búsqueda</h2>
                        <button onclick="cerrarModal()"
                            class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">&times;</button>
                    </div>
                    <div class="mt-4">
                        <table class="w-full border-collapse border border-gray-300 dark:border-gray-600">
                            <thead>
                                <tr class="bg-gray-200 dark:bg-gray-700">
                                    <th class="border border-gray-300 px-4 py-2 text-left">Nombre</th>
                                    <th class="border border-gray-300 px-4 py-2 text-left">Email</th>
                                    <th class="border border-gray-300 px-4 py-2 text-left">Celular</th>
                                    <th class="border border-gray-300 px-4 py-2 text-left">Validado</th>
                                    <th class="border border-gray-300 px-4 py-2 text-left">Bloqueado</th>
                                </tr>
                            </thead>
                            <tbody id="searchResults">
                                @if (session('usuarios'))
                                    @foreach (session('usuarios') as $user)
                                        <tr>
                                            <td class="border border-gray-300 px-4 py-2">{{ $user['name'] }}</td>
                                            <td class="border border-gray-300 px-4 py-2">
                                                {{ $user['email'] ?: 'No disponible' }}</td>
                                            <td class="border border-gray-300 px-4 py-2">{{ $user['celular'] }}</td>
                                            <td class="border border-gray-300 px-4 py-2">
                                                {{ $user['validado'] ? 'Está validado' : 'No está validado' }}
                                            </td>
                                            <td class="border border-gray-300 px-4 py-2">
                                                @if ($user['bloqueado_login'] || $user['bloqueado_validacion'])
                                                    <form action="{{ route('desbloquear-usuario', $user['user_id']) }}"
                                                        method="POST">
                                                        @csrf
                                                        @method('PUT')
                                                        <button type="submit"
                                                            class="py-1 px-3 bg-red-600 text-white rounded hover:bg-red-700">
                                                            Desbloquear
                                                        </button>
                                                    </form>
                                                @else
                                                    No está bloqueado
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                    <script>
                                        document.addEventListener("DOMContentLoaded", () => mostrarModal());
                                    </script>
                                @endif
                            </tbody>
                        </table>
                    </div>
                    <div class="mt-4 flex justify-end">
                        <button onclick="cerrarModal()"
                            class="py-2 px-4 bg-red-600 text-white rounded hover:bg-red-700">Cerrar</button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        function mostrarModal() {
            document.getElementById('searchModal').classList.remove('hidden');
        }

        function cerrarModal() {
            document.getElementById('searchModal').classList.add('hidden');
        }

        // Inicialización de Chart.js
        document.addEventListener("DOMContentLoaded", function () {
            const userChartCtx = document.getElementById('userChart').getContext('2d');
            const examChartCtx = document.getElementById('examChart').getContext('2d');

            new Chart(userChartCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Hombres', 'Mujeres', 'Otros'],
                    datasets: [{
                        data: [60, 35, 5],
                        backgroundColor: ['#3498db', '#e74c3c', '#2ecc71']
                    }]
                }
            });

            new Chart(examChartCtx, {
                type: 'bar',
                data: {
                    labels: ['Enero', 'Febrero', 'Marzo', 'Abril'],
                    datasets: [{
                        label: 'Exámenes',
                        data: [30, 50, 40, 60],
                        backgroundColor: '#f39c12'
                    }]
                }
            });
        });
    </script>
@endsection