@extends('admin.layouts.app')

@section('title', 'FILE APP PORTAL - Dashboard')

@section('breadcrumbs')
    <i class="fa-solid fa-chevron-right mx-3 text-[8px]"></i>
    <span class="text-slate-900">Dashboard</span>
@endsection

@section('content')
<!-- ── ROLE TYPE CARDS ── -->
<div class="grid grid-cols-4 gap-4 px-8 pb-4 flex-shrink-0 mt-4">
    <!-- Total Menus -->
    <div class="bg-white rounded-2xl p-5 flex items-center justify-between border border-slate-100 shadow-sm hover:shadow-md transition-all" style="border-right: 4px solid #10b981;">
        <div class="flex-1">
            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Overview</p>
            <h3 class="text-sm font-extrabold text-slate-800 mt-1">Total Menus</h3>
            <p class="text-lg font-black text-emerald-600 mt-2">{{ $menuCount }}</p>
        </div>
        <div class="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 bg-emerald-50 text-emerald-500">
            <i class="fa-solid fa-bars"></i>
        </div>
    </div>
    <!-- Total Modules -->
    <div class="bg-white rounded-2xl p-5 flex items-center justify-between border border-slate-100 shadow-sm hover:shadow-md transition-all" style="border-right: 4px solid #0ea5e9;">
        <div class="flex-1">
            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Overview</p>
            <h3 class="text-sm font-extrabold text-slate-800 mt-1">Total Modules</h3>
            <p class="text-lg font-black text-sky-600 mt-2">{{ $moduleCount }}</p>
        </div>
        <div class="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 bg-sky-50 text-sky-500">
            <i class="fa-solid fa-puzzle-piece"></i>
        </div>
    </div>
    <!-- Active Modules -->
    <div class="bg-white rounded-2xl p-5 flex items-center justify-between border border-slate-100 shadow-sm hover:shadow-md transition-all" style="border-right: 4px solid #8b5cf6;">
        <div class="flex-1">
            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Overview</p>
            <h3 class="text-sm font-extrabold text-slate-800 mt-1">Active Modules</h3>
            <p class="text-lg font-black text-violet-600 mt-2">{{ $activeModules }}</p>
        </div>
        <div class="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 bg-violet-50 text-violet-500">
            <i class="fa-solid fa-check-circle"></i>
        </div>
    </div>
    <!-- Quick Actions -->
    <div class="bg-white rounded-2xl p-5 flex items-center justify-between border border-slate-100 shadow-sm hover:shadow-md transition-all" style="border-right: 4px solid #f59e0b;">
        <div class="flex-1">
            <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">Quick Actions</p>
            <h3 class="text-sm font-extrabold text-slate-800 mt-1">Generate</h3>
            <div class="flex gap-2 mt-2">
                <a href="{{ route('admin.menus.create') }}" class="text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-md hover:bg-amber-100"><i class="fas fa-plus mr-1"></i>Menu</a>
                <a href="{{ route('admin.modules.create') }}" class="text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-1 rounded-md hover:bg-amber-100"><i class="fas fa-plus mr-1"></i>Module</a>
            </div>
        </div>
        <div class="w-12 h-12 rounded-2xl flex items-center justify-center flex-shrink-0 bg-amber-50 text-amber-500">
            <i class="fa-solid fa-rocket"></i>
        </div>
    </div>
</div>

<div class="workspace-console min-h-full p-8 shadow-sm flex flex-col items-center justify-center text-center space-y-4">
    <div class="w-20 h-20 bg-[#f0fdfa] rounded-full flex items-center justify-center">
       <i class="fa-solid fa-chart-line text-3xl text-[#00ada8]"></i>
    </div>
    <h2 class="text-2xl font-extrabold text-slate-800 tracking-tight">Welcome back!</h2>
    <p class="text-sm font-medium text-slate-500 max-w-sm">Use the dashboard navigation to manage your application menus, modules and user access efficiently.</p>
</div>
@endsection