@extends('layouts.app')

@section('title', 'Dashboard Otoritas Utama')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-slate-900">Selamat Datang Kembali</h1>
        <p class="text-sm text-gray-500">Meja kerja elektronik terenkripsi milik {{ $currentUser->name }}.</p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-200 col-span-2">
            <h3 class="text-base font-bold text-slate-800 mb-2 border-b border-gray-100 pb-3">Informasi Akun Pegawai</h3>
            <div class="space-y-2 text-xs">
                <p><strong class="text-slate-500 inline-block w-24">Nama:</strong> {{ $currentUser->name }}</p>
                <p><strong class="text-slate-500 inline-block w-24">NIP:</strong> {{ $currentUser->nip }}</p>
                <p><strong class="text-slate-500 inline-block w-24">Username:</strong> {{ $currentUser->username }}</p>
                <p><strong class="text-slate-500 inline-block w-24">Hak Otoritas:</strong> <span class="bg-amber-100 text-amber-800 font-bold px-2 py-0.5 rounded">{{ strtoupper($currentRole) }}</span></p>
            </div>
        </div>

        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-200">
            <h3 class="text-base font-bold text-slate-800 mb-2 border-b border-gray-100 pb-3">Status Fase Pusat</h3>
            <div class="text-center pt-4">
                <span class="px-4 py-2 rounded-xl text-xs font-black tracking-wide inline-block {{ $faseStatus == 'open' ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-100 text-rose-800' }}">
                    STATUS SAKLAR: {{ strtoupper($faseStatus) }}
                </span>
                <p class="text-[11px] text-gray-400 mt-3 leading-relaxed">Status dikontrol langsung secara mutlak oleh Kepala BPAD Regional.</p>
            </div>
        </div>
    </div>
@endsection