@php
$tarjetas = [
[
'permiso' => 'ver.editar',
'route' => route('escuela.edit', \App\Models\Escuela::first()?->id ?? 1),
'svg' => 'school',
'title' => 'Escuela',
'desc' => 'Configura los datos generales de la escuela',
'color' => 'blue',
],
[
'permiso' => 'listar.ciclos',
'route' => route('ciclos-escolares.index'),
'svg' => 'calendar-range',
'title' => 'Ciclos Escolares',
'desc' => 'Gestiona los ciclos activos y anteriores',
'color' => 'green',
],
[
'permiso' => 'listar.puestos',
'route' => route('puestos.index'),
'svg' => 'briefcase',
'title' => 'Puestos de Trabajo',
'desc' => 'Define los cargos del personal escolar',
'color' => 'purple',
],
[
'permiso' => 'listar.usuarios',
'route' => route('usuarios.index'),
'svg' => 'users',
'title' => 'Usuarios',
'desc' => 'Define el rol que tendrá cada usuario',
'color' => 'pink',
],
[
'permiso' => 'listar.proveedores',
'route' => route('proveedores.index'),
'svg' => 'truck',
'title' => 'Proveedores',
'desc' => 'Administra los proveedores de productos',
'color' => 'yellow',
],
[
'permiso' => 'listar.roles',
'route' => route('roles.index'),
'svg' => 'check',
'title' => 'Roles',
'desc' => 'Gestiona los roles de usuarios',
'color' => 'amber',
],
];

// Paleta fija para evitar clases dinámicas que Tailwind pueda purgar
$palette = [
'blue' => ['bg' => 'bg-blue-600', 'hover' => 'hover:bg-blue-700', 'text' => 'text-white'],
'green' => ['bg' => 'bg-green-600', 'hover' => 'hover:bg-green-700', 'text' => 'text-white'],
'purple' => ['bg' => 'bg-purple-600', 'hover' => 'hover:bg-purple-700', 'text' => 'text-white'],
'yellow' => ['bg' => 'bg-yellow-500', 'hover' => 'hover:bg-yellow-600', 'text' => 'text-black'], // mejor contraste
'pink' => ['bg' => 'bg-pink-600', 'hover' => 'hover:bg-pink-700', 'text' => 'text-white'],
'amber' => ['bg' => 'bg-amber-600', 'hover' => 'hover:bg-amber-700', 'text' => 'text-white'],
];
@endphp

<x-layouts.app :title="__('Configuración')">
    <div class="p-6">
        <h1 class="text-3xl font-bold mb-2 text-white">Configuración del sistema</h1>
        <p class="text-sm text-zinc-300 mb-8">
            Ajusta datos de escuela, usuarios, roles, proveedores y más.
        </p>

        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach ($tarjetas as $t)
            @can($t['permiso'])
            @php
            $c = $palette[$t['color']] ?? $palette['blue'];
            @endphp
            <a href="{{ $t['route'] }}" class="{{ $c['bg'] }} {{ $c['hover'] }} {{ $c['text'] }} rounded-2xl p-6 shadow-xl 
                              transform hover:scale-105 transition duration-200 flex items-start gap-4">
                {!! str_replace('<svg', '<svg class="w-10 h-10"' ,
                    file_get_contents(resource_path('svg/custom/'.$t['svg'].'.svg'))) !!} <div>
                    <h2 class="text-xl font-semibold">{{ $t['title'] }}</h2>
                    <p class="text-sm opacity-90">{{ $t['desc'] }}</p>
        </div>
        </a>
        @endcan
        @endforeach
    </div>
    </div>
</x-layouts.app>