@extends('layouts.app')

@section('content')
<script>
    // Guardar token en localStorage para peticiones API
    if ('{{ session('api_token') }}') {
        localStorage.setItem('api_token', '{{ session('api_token') }}');
    }
</script>
<div class="min-h-screen bg-gradient-to-br from-neutral-50 to-neutral-100 p-4 md:p-8">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="mb-6 md:mb-8">
            <div class="flex items-center gap-3 mb-2">
                <div class="w-10 h-10 rounded-xl bg-blue-100 text-blue-600 flex items-center justify-center">
                    <i class="fas fa-key text-lg"></i>
                </div>
                <h1 class="text-2xl md:text-4xl font-bold text-neutral-900">Permisos del Sistema</h1>
            </div>
            <p class="text-neutral-600">Administra qué funcionalidades puede acceder cada rol</p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
            <!-- Sidebar: Selección de Rol -->
            <div class="lg:col-span-1">
                <div class="bg-white rounded-xl border border-neutral-200 shadow-sm p-4 md:p-6 sticky top-4 md:top-8">
                    <h2 class="text-lg font-bold text-neutral-900 mb-4">Seleccionar Rol</h2>
                    <select id="selectRol" class="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">-- Elige un rol --</option>
                    </select>

                    <!-- Estadísticas -->
                    <div class="mt-6 grid grid-cols-2 gap-3">
                        <div class="bg-blue-50 rounded-lg p-3 border border-blue-100">
                            <div class="text-xs text-blue-600 font-medium">Permisos Asignados</div>
                            <div class="text-2xl font-bold text-blue-600" id="statsAsignados">0</div>
                        </div>
                        <div class="bg-neutral-50 rounded-lg p-3 border border-neutral-200">
                            <div class="text-xs text-neutral-600 font-medium">Permisos Disponibles</div>
                            <div class="text-2xl font-bold text-neutral-600" id="statsDisponibles">0</div>
                        </div>
                    </div>

                    <!-- Botones de Acción -->
                    <div class="mt-6 space-y-2">
                        <button id="btnSeleccionarTodos" class="w-full px-3 py-2 bg-green-50 text-green-600 rounded-lg font-medium text-sm hover:bg-green-100 transition border border-green-200">
                            <i class="fas fa-check-double mr-1"></i> Seleccionar Todo
                        </button>
                        <button id="btnDeseleccionarTodos" class="w-full px-3 py-2 bg-red-50 text-red-600 rounded-lg font-medium text-sm hover:bg-red-100 transition border border-red-200">
                            <i class="fas fa-times-circle mr-1"></i> Deseleccionar Todo
                        </button>
                        <button id="btnGuardarPermisos" class="w-full px-3 py-2 bg-blue-600 text-white rounded-lg font-medium text-sm hover:bg-blue-700 transition" style="display:none;">
                            <i class="fas fa-save mr-1"></i> Guardar
                        </button>
                    </div>
                </div>
            </div>

            <!-- Contenido Principal: Permisos por Categoría -->
            <div class="lg:col-span-3">
                <div id="contenidoPermisos" class="space-y-4 md:space-y-6">
                    <div class="bg-white rounded-xl border border-dashed border-neutral-300 text-center text-neutral-500 py-12 px-4">
                        <i class="fas fa-info-circle text-2xl mb-2"></i>
                        <p>Selecciona un rol para ver y administrar sus permisos</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Toast Notifications -->
<div id="toastContainer" class="fixed bottom-4 right-4 space-y-2 pointer-events-none z-50"></div>

@vite(['resources/js/permisos.js'])
@endsection