@extends('layouts.app')

@section('title', 'Panel del Superadministrador')

@section('content')
    {{-- BOTONES FLOTANTES DE CAMBIO DE CONTEXTO --}}
    <div class="fixed top-20 right-6 z-40 flex flex-col space-y-3">
        <!-- Cambiar Empresa -->
        <button onclick="document.getElementById('modalCambiarEmpresa').classList.remove('hidden')"
            class="bg-sky-600 hover:bg-sky-700 text-white px-4 py-2 rounded-full shadow-lg transition">
            🏢 Cambiar Institución/Proveedor de Salud
        </button>

        <!-- Cambiar Sucursal -->
        <button onclick="document.getElementById('modalCambiarSucursal').classList.remove('hidden')"
            class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-full shadow-lg transition">
            🏬 Cambiar Sede/Convenio/Centro
        </button>
    </div>
    <div class="px-6 py-8 space-y-6"> {{-- Padding agregado --}}
        <h1 class="text-2xl font-bold text-sky-700">Panel del Superadministrador</h1>
        <p>Empresa seleccionada: {{ $empresaSeleccionada->razon_social ?? 'No definida' }}</p>
        <p>Sucursal seleccionada: {{ $sucursalSeleccionada->nombre ?? 'No definida' }}</p>


        <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-6">

            {{-- Tarjeta 1: Usuarios --}}
            <div onclick="document.getElementById('modalUsuarios').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Usuarios</span>
                        <div class="text-3xl font-bold text-sky-700">{{ $totalUsuarios }}</div>
                    </div>
                    <button
                        onclick="event.stopPropagation(); document.getElementById('modalImpersonar').classList.remove('hidden')"
                        class="bg-sky-600 hover:bg-sky-700 text-white px-4 py-2 rounded-full shadow-lg transition"
                        title="Acceder como otro usuario">
                        🔍Buscar Usuario-Entrar a su Sesion
                    </button>
                    <i class="fas fa-users text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

            {{-- Tarjeta 2: Unidades Médicas --}}
            <div onclick="document.getElementById('modalUnidades').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Unidades Médicas</span>
                        <div class="text-3xl font-bold text-sky-700">{{ $totalUnidadesMedicas }}</div>
                    </div>
                    <i class="fas fa-hospital text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

            {{-- Tarjeta 3: Equipos o Salas --}}
            <div onclick="document.getElementById('modalEquipos').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Equipos o Salas</span>
                        <div class="text-3xl font-bold text-sky-700">{{ $totalEquipos }}</div>
                    </div>
                    <i class="fas fa-laptop-medical text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

            {{-- Tarjeta 4: Prestaciones --}}
            <div onclick="document.getElementById('modalPrestaciones').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Prestaciones</span>
                        <div class="text-3xl font-bold text-sky-700">{{ $totalPrestaciones }}</div>
                    </div>
                    <i class="fas fa-clipboard-list text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

            {{-- Tarjeta 5: Médicos --}}
            <div onclick="document.getElementById('modalMedicos').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Médicos</span>
                        <div class="text-3xl font-bold text-sky-700">{{ $totalMedicos }}</div>
                    </div>
                    <i class="fas fa-user-md text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

            {{-- Tarjeta 6: Pacientes --}}
            <div onclick="document.getElementById('modalPacientes').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Pacientes</span>
                        <div class="text-3xl font-bold text-sky-700">{{ $totalPacientes }}</div>
                    </div>
                    <i class="fas fa-procedures text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

            {{-- Tarjeta 7: Solicitudes --}}
            <div onclick="document.getElementById('modalSolicitudes').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Solicitudes</span>
                        <div class="text-3xl font-bold text-sky-700">{{ $totalSolicitudes }}</div>
                    </div>
                    <i class="fas fa-file-prescription text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

            {{-- Tarjeta 8: Informes --}}
            <div onclick="document.getElementById('modalInformes').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Informes</span>
                        <div class="text-3xl font-bold text-sky-700">{{ $totalInformes }}</div>
                    </div>
                    <i class="fas fa-file-medical text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

            {{-- Tarjeta 9: Configuración --}}
            <div onclick="document.getElementById('modalConfiguracion').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Configuración</span>
                        <div class="text-3xl font-bold text-sky-700">⚙️</div>
                    </div>
                    <i class="fas fa-cogs text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

            {{-- Tarjeta 10: Roles --}}
            <div onclick="document.getElementById('modalRoles').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Roles</span>
                        <div class="text-3xl font-bold text-sky-700">{{ $totalRoles }}</div>
                    </div>
                    <i class="fas fa-user-shield text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

            {{-- Tarjeta 11: Logs --}}
            <div onclick="document.getElementById('modalLogs').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Logs</span>
                        <div class="text-3xl font-bold text-sky-700">📝</div>
                    </div>
                    <i class="fas fa-clipboard-check text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

            {{-- Tarjeta 12: Soporte --}}
            <div onclick="document.getElementById('modalSoporte').classList.remove('hidden')"
                class="cursor-pointer bg-white dark:bg-gray-800 p-6 rounded-xl shadow group hover:shadow-lg hover:scale-105 transition">
                <div class="flex justify-between items-center">
                    <div>
                        <span class="text-gray-600 dark:text-gray-300 font-medium">Soporte</span>
                        <div class="text-3xl font-bold text-sky-700">💬</div>
                    </div>
                    <i class="fas fa-life-ring text-4xl text-sky-700 group-hover:text-sky-900 transition"></i>
                </div>
            </div>

        </div>
    </div>
    @include('modales.modal_cambiar_empresa')
    @include('modales.modal_agregar_empresa')
    @include('modales.modal_horario_profesional')
    @include('modales.modal_cambiar_sucursal')
    @include('modales.modal_agregar_sucursal')

    @include('modales.modal_usuarios')
    @include('modales.modal_crear_usuario')
    @include('modales.modal_impersonar_clonar')

    @include('modales.modal_unidades_medicas')
    @include('modales.modal_nueva_unidad')
@endsection
@push('scripts')
    <script>
        $(document).ready(function() {
            $('#tablaUsuarios').DataTable({
                responsive: true,
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.6/i18n/es-ES.json'
                },
                pageLength: 10
            });
        });
    </script>
<script>
    const urlBuscarUsuarios = "{{ route('usuarios.buscar') }}";
    const formAction = "{{ route('usuarios.cambiar-sesion') }}";
    const csrfToken = "{{ csrf_token() }}";

    const buscador = document.getElementById('buscadorUsuarios');
    const usuarioResults = document.getElementById('usuarioResults');
    const usuarioDropdown = document.getElementById('usuarioDropdown');

    // Función de búsqueda
    async function buscarUsuarios(filtro = '') {
        try {
            console.log(`Buscando usuarios con filtro: "${filtro}"`);
            console.log(`URL de búsqueda: ${urlBuscarUsuarios}?q=${filtro}`);

            const res = await fetch(`${urlBuscarUsuarios}?q=${filtro}`);
            const usuarios = await res.json();

            usuarioResults.innerHTML = '';

            if (usuarios.length === 0) {
                usuarioResults.innerHTML =
                    '<li class="px-4 py-2 text-gray-500">No se encontraron usuarios.</li>';
                return;
            }

            usuarios.forEach(u => {
                const li = document.createElement('li');
                li.className = 'px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 cursor-pointer';
                li.innerHTML = `
                    <div class="font-medium">${u.nombre} ${u.apellido}</div>
                    <div class="text-sm text-gray-500">${u.email}</div>
                `;
                li.onclick = () => enviarFormulario(u.id);
                usuarioResults.appendChild(li);
            });

            usuarioDropdown.classList.remove('hidden');
        } catch (error) {
            console.error('Error al buscar usuarios:', error);
            usuarioResults.innerHTML = '<li class="px-4 py-2 text-red-500">Error al cargar usuarios</li>';
        }
    }

    // Enviar formulario POST
    function enviarFormulario(userId) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = formAction;

        const inputId = document.createElement('input');
        inputId.type = 'hidden';
        inputId.name = 'user_id';
        inputId.value = userId;

        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;

        form.appendChild(inputId);
        form.appendChild(csrfInput);
        document.body.appendChild(form);
        form.submit();
    }

    // Evento de entrada
    buscador.addEventListener('input', (e) => {
        const filtro = e.target.value.trim();
        if (filtro.length >= 2) {
            buscarUsuarios(filtro);
        } else {
            usuarioDropdown.classList.add('hidden');
        }
    });

    // Ocultar dropdown si se hace clic fuera
    document.addEventListener('click', function(e) {
        if (!usuarioDropdown.contains(e.target) && e.target !== buscador) {
            usuarioDropdown.classList.add('hidden');
        }
    });
</script>
@endpush