@extends('school.layouts.app')

@section('content')
  <!-- TOP HEADER SECTION (Sleek & Compact) -->
<div class="flex flex-col md:flex-row items-center justify-between gap-4 mb-4">
    
    <!-- Left: Command Center Title -->
    <div class="flex-1">
        <h1 class="text-2xl font-extrabold text-slate-800 tracking-tight leading-tight">School Command Center</h1>
        <p class="text-slate-500 mt-1 font-medium text-sm">Welcome, <span class="text-indigo-600">{{ Auth::user()->name }}</span>. Select a module to begin.</p>
    </div>

    <!-- Right: Ultra-Compact AI Admissions Card -->
    <div class="relative overflow-hidden bg-slate-900 rounded-2xl p-3 text-white shadow-xl flex items-center gap-4 border border-slate-800 min-w-[340px] transition-transform hover:scale-[1.01]">
        <!-- Subtle Glow -->
        <div class="absolute -top-6 -right-6 w-16 h-16 bg-indigo-500/20 rounded-full blur-2xl"></div>
        
        <!-- Smaller Icon Container -->
        <div class="w-11 h-11 bg-indigo-500 rounded-xl flex items-center justify-center shadow-lg shadow-indigo-500/30 ring-4 ring-indigo-400/10 shrink-0">
            <i class="fa-solid fa-robot text-lg text-white"></i>
        </div>
        
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 mb-0.5">
                <span class="px-1 py-0.5 bg-indigo-500 text-[8px] font-bold uppercase tracking-widest rounded">New</span>
                <h3 class="text-xs font-bold truncate">AI-Powered Admissions</h3>
            </div>
            <p class="text-slate-400 text-[11px] leading-none">Instant Aadhar/Certificate OCR Scanning</p>
        </div>

        <!-- Compact Button -->
        <a href="{{ route('school.admissions.create') }}" class="whitespace-nowrap px-3 py-1.5 bg-white text-slate-900 rounded-lg font-bold text-[11px] hover:bg-indigo-50 transition-all shadow-md">
            Launch <i class="fa-solid fa-arrow-right ml-1 text-[10px]"></i>
        </a>
    </div>
</div>

    <!-- MODULE HUB GRID (3D Luxury Edition) -->
<div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-8 mb-10">
    @foreach($activeModules as $module)
        @php
            // ✅ SAFE CHECK: Check if the route exists before trying to generate the URL
            $routeExists = isset($module['route']) && Route::has($module['route']);
            $finalUrl = $routeExists ? route($module['route']) : '#';
        @endphp

        <a href="{{ $finalUrl }}" 
           {{-- If the route doesn't exist, we add a 'cursor-not-allowed' and a gray tint --}}
           class="group relative bg-white aspect-square rounded-[2.5rem] border border-slate-200 shadow-[0_10px_20px_-5px_rgba(0,0,0,0.05)] hover:shadow-[0_20px_40px_-10px_rgba(0,0,0,0.1)] hover:-translate-y-2 transition-all duration-300 flex flex-col items-center justify-center p-6 text-center {{ !$routeExists ? 'opacity-60 cursor-not-allowed' : '' }}">
            
            <div class="relative">
                <div class="absolute inset-0 translate-y-1.5 rounded-2xl {{ $module['text'] }} opacity-30 blur-sm group-hover:blur-md transition-all"></div>
                
                <div class="relative w-20 h-20 {{ $module['bg'] }} {{ $module['text'] }} rounded-2xl flex items-center justify-center transition-all duration-300 group-hover:translate-y-[-2px] shadow-[inset_0_2px_4px_rgba(255,255,255,0.8),0_4px_6px_rgba(0,0,0,0.1)] {{ $module['hover'] }} group-hover:text-white">
                    <div class="absolute top-0 left-0 right-0 h-1/2 bg-gradient-to-b from-white/40 to-transparent rounded-t-2xl pointer-events-none"></div>
                    <i class="fa-solid {{ $module['icon'] }} text-3xl relative z-10"></i>
                </div>
            </div>

            <h3 class="mt-6 text-sm font-extrabold text-slate-700 group-hover:text-indigo-600 transition-colors leading-tight tracking-tight">
                {{ $module['name'] }}
                @if(!$routeExists)
                    <span class="block text-[8px] text-slate-400 uppercase tracking-tighter font-normal">Coming Soon</span>
                @endif
            </h3>

            <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-1/3 h-1 bg-indigo-500 rounded-full opacity-0 group-hover:opacity-100 transition-all"></div>
        </a>
    @endforeach
</div>

@endsection