@extends('layouts.admin', ['title' => 'Overview'])

@section('content')
    <div x-data="overviewPage()">
        <h1 class="text-2xl font-semibold text-slate-900 mb-6">Overview</h1>
        <div x-show="loading" class="flex items-center justify-center py-20">
            <div class="h-8 w-8 animate-spin rounded-full border-4 border-amber-200 border-t-amber-600"></div>
        </div>

        <div x-show="error" x-transition class="rounded-xl bg-red-50 border border-red-200 px-4 py-3 mb-6">
            <p class="text-sm text-red-600" x-text="error"></p>
        </div>

        <div x-show="!loading && !error" class="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
            <a href="/admin/employees" class="block rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
                <div class="flex items-center gap-4">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-50 text-blue-600">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
                    </div>
                    <div>
                        <p class="text-sm text-slate-500">Total Employees</p>
                        <p class="text-2xl font-bold text-slate-900" x-text="stats.employees"></p>
                    </div>
                </div>
            </a>

            <a href="/admin/employees" class="block rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
                <div class="flex items-center gap-4">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-green-50 text-green-600">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                    </div>
                    <div>
                        <p class="text-sm text-slate-500">Active Employees</p>
                        <p class="text-2xl font-bold text-slate-900" x-text="stats.activeEmployees"></p>
                    </div>
                </div>
            </a>

            <a href="/admin/branches" class="block rounded-2xl border border-slate-200/80 bg-white p-6 shadow-sm transition hover:-translate-y-0.5 hover:shadow-md">
                <div class="flex items-center gap-4">
                    <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-amber-50 text-amber-600">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg>
                    </div>
                    <div>
                        <p class="text-sm text-slate-500">Branches</p>
                        <p class="text-2xl font-bold text-slate-900" x-text="stats.branches"></p>
                    </div>
                </div>
            </a>

        </div>
    </div>
@endsection