@extends('layouts.app')

@section('content')
<div class="p-6 max-w-5xl mx-auto space-y-6">

    <!-- WELCOME HEADER STAFF -->
    <div class="rounded-2xl p-6 text-white shadow-sm" style="background:#1c1d56;">
        <h2 class="text-xl font-bold">Panel Dashboard Staff 🖥️</h2>
        <p class="text-white/80 mt-1 text-sm">
            Halo, {{ Auth::user()->name }}. Selamat bekerja. Gunakan menu di bawah atau sidebar untuk mengelola data LPKA.
        </p>
    </div>

    <!-- SHORTCUT MENU UTAMA (4 CARDS) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
        
        <!-- CARD 1: JURNAL HARIAN -->
        <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between min-h-[150px]">
            <div>
                <div class="text-sm font-bold text-[#1c1d56] mb-1">📝 Jurnal Harian</div>
                <p class="text-[11px] text-gray-500 leading-relaxed">Kelola, tambah, dan edit catatan perkembangan harian anak binaan.</p>
            </div>
            <div class="mt-4 flex justify-end">
                <a href="{{ url('staff/jurnal') }}" class="text-[11px] bg-[#1c1d56] text-white font-bold px-3 py-1.5 rounded-lg hover:opacity-90 transition">
                    Buka Jurnal →
                </a>
            </div>
        </div>

        <!-- CARD 2: DATA KUNJUNGAN -->
        <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between min-h-[150px]">
            <div>
                <div class="text-sm font-bold text-[#1c1d56] mb-1">✅ Data Kunjungan</div>
                <p class="text-[11px] text-gray-500 leading-relaxed">Verifikasi permohonan izin kunjungan baru dari pihak keluarga.</p>
            </div>
            <div class="mt-4 flex justify-end">
                <a href="{{ url('staff/kunjungan') }}" class="text-[11px] bg-[#1c1d56] text-white font-bold px-3 py-1.5 rounded-lg hover:opacity-90 transition">
                    Verifikasi →
                </a>
            </div>
        </div>

        <!-- CARD 3: INPUT TRACKING -->
        <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between min-h-[150px]">
            <div>
                <div class="text-sm font-bold text-[#1c1d56] mb-1">📍 Input Tracking</div>
                <p class="text-[11px] text-gray-500 leading-relaxed">Update data masa tahanan, remisi, dan status aktif anak binaan.</p>
            </div>
            <div class="mt-4 flex justify-end">
                <a href="{{ url('staff/tracking') }}" class="text-[11px] bg-[#1c1d56] text-white font-bold px-3 py-1.5 rounded-lg hover:opacity-90 transition">
                    Input Data →
                </a>
            </div>
        </div>

        <!-- CARD 4: PEMANGGILAN ANAK -->
        <div class="bg-white p-5 rounded-2xl shadow-sm border border-slate-200 flex flex-col justify-between min-h-[150px]">
            <div>
                <div class="text-sm font-bold text-[#1c1d56] mb-1">📢 Pemanggilan Anak</div>
                <p class="text-[11px] text-gray-500 leading-relaxed">Kelola surat dan jadwal pemanggilan resmi anak binaan.</p>
            </div>
            <div class="mt-4 flex justify-end">
                <a href="{{ url('staff/pemanggilan') }}" class="text-[11px] bg-[#1c1d56] text-white font-bold px-3 py-1.5 rounded-lg hover:opacity-90 transition">
                    Kelola →
                </a>
            </div>
        </div>

    </div>

</div>
@endsection