@extends('layouts.app')

@section('content')
<div class="grid grid-cols-1 gap-6 lg:grid-cols-[280px_1fr]">
    <aside class="overflow-hidden rounded-2xl border border-slate-200 bg-white shadow-soft">
        <div class="border-b border-slate-200 bg-gradient-to-br from-brand-700 to-ink-700 p-5 text-white">
            <div class="text-sm font-semibold">Panel Guru</div>
            <div class="text-xs text-white/70">Absensi &amp; Laporan</div>
        </div>
        <nav class="p-3">
            @php
                $item = function ($routeIs, $href, $label) {
                    $active = request()->routeIs($routeIs);
                    return [
                        'href' => $href,
                        'label' => $label,
                        'class' => $active
                            ? 'bg-brand-50 text-brand-900 ring-1 ring-brand-200'
                            : 'text-slate-700 hover:bg-slate-50',
                    ];
                };
                $items = [
                    $item('guru.dashboard', route('guru.dashboard'), 'Dashboard'),
                    $item('guru.absensi.*', route('guru.absensi.index'), 'Absensi Siswa'),
                    $item('guru.laporan-bulanan.*', route('guru.laporan-bulanan.index'), 'Laporan Bulanan'),
                    $item('guru.laporan.riwayat', route('guru.laporan.riwayat'), 'Riwayat Siswa'),
                    $item('guru.hari-libur.*', route('guru.hari-libur.index'), 'Hari Libur'),
                    $item('guru.password.*', route('guru.password.edit'), 'Ubah Password'),
                ];
            @endphp

            <div class="space-y-1">
                @foreach($items as $it)
                    <a href="{{ $it['href'] }}" class="flex items-center justify-between rounded-xl px-4 py-3 text-sm font-semibold transition {{ $it['class'] }}">
                        <span>{{ $it['label'] }}</span>
                        <span class="h-2 w-2 rounded-full {{ request()->routeIs($it['label']) ? 'bg-ink-500' : 'bg-slate-200' }}"></span>
                    </a>
                @endforeach
            </div>
        </nav>
    </aside>

    <section class="min-w-0">
        <div class="mb-6 rounded-2xl border border-slate-200 bg-white p-5 shadow-soft">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <div>
                    <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Absensi Kelas</div>
                    <div class="text-lg font-bold text-slate-900">@yield('page-title', 'Guru')</div>
                </div>
                <div class="flex items-center gap-2">
                    @yield('page-actions')
                </div>
            </div>
        </div>

        @yield('guru-content')
    </section>
</div>
@endsection