@extends('layouts.app')

@section('title', 'Detail Akun Staf UKPD')

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

        <div class="flex items-center justify-between">
            <div>
                <h1 class="text-2xl font-bold text-slate-900">Detail Akun Staf UKPD</h1>
                <p class="text-sm text-gray-500">Informasi detail profil dan status akun Staf Operator UKPD.</p>
            </div>
            <a href="{{ route('ukpd.ka.index') }}"
                class="px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 text-sm font-semibold rounded-lg transition-all flex items-center gap-2">
                <i class="fa-solid fa-arrow-left"></i> Kembali
            </a>
        </div>

        @if (session('success'))
            <div class="p-4 bg-emerald-50 border-l-4 border-emerald-500 text-emerald-800 rounded-r-lg text-sm font-medium">
                <i class="fa-solid fa-circle-check mr-2"></i> {{ session('success') }}
            </div>
        @endif

        <div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
            <div class="p-6 border-b border-gray-100 bg-slate-50 flex justify-between items-center">
                <div class="flex items-center gap-3">
                    <div
                        class="w-12 h-12 rounded-full bg-blue-600 text-white font-bold text-lg flex items-center justify-center">
                        {{ substr($staf->name, 0, 2) }}
                    </div>
                    <div>
                        <h3 class="text-base font-bold text-slate-800">{{ $staf->name }}</h3>
                        <p class="text-xs text-gray-500">Staf Operator UKPD</p>
                    </div>
                </div>

                <div class="flex items-center gap-2">
                    <a href="{{ route('ukpd.ka.staf.edit', $staf->id) }}"
                        class="px-3 py-1.5 bg-amber-500 hover:bg-amber-600 text-white text-xs font-semibold rounded-lg shadow flex items-center gap-1.5">
                        <i class="fa-solid fa-pen-to-square"></i> Edit
                    </a>

                    <form action="{{ route('ukpd.ka.staf.destroy', $staf->id) }}" method="POST"
                        onsubmit="return confirm('Yakin ingin menghapus akun staf ini?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                            class="px-3 py-1.5 bg-rose-600 hover:bg-rose-700 text-white text-xs font-semibold rounded-lg shadow flex items-center gap-1.5">
                            <i class="fa-solid fa-trash"></i> Hapus
                        </button>
                    </form>
                </div>
            </div>

            <div class="p-6 space-y-4">
                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <span class="text-xs font-bold text-gray-400 uppercase tracking-wider block">NIP</span>
                        <p class="text-sm font-mono text-slate-800 mt-1">{{ $staf->nip ?? '-' }}</p>
                    </div>

                    <div>
                        <span class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Username</span>
                        <p class="text-sm font-mono text-blue-600 mt-1">{{ $staf->username ?? '-' }}</p>
                    </div>

                    <div>
                        <span class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Email</span>
                        <p class="text-sm text-slate-800 mt-1">{{ $staf->email }}</p>
                    </div>

                    <div>
                        <span class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Instansi / OPD</span>
                        <p class="text-sm font-semibold text-slate-800 mt-1">{{ $staf->opd ?? '-' }}</p>
                    </div>

                    <div>
                        <span class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Status Akun</span>
                        <p class="mt-1">
                            @if ($staf->is_active ?? true)
                                <span
                                    class="px-2.5 py-1 bg-emerald-100 text-emerald-800 rounded-full text-[10px] font-bold uppercase">Aktif</span>
                            @else
                                <span
                                    class="px-2.5 py-1 bg-rose-100 text-rose-800 rounded-full text-[10px] font-bold uppercase">Nonaktif</span>
                            @endif
                        </p>
                    </div>

                    <div>
                        <span class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Total Usulan
                            Dibuat</span>
                        <p class="text-sm font-bold text-blue-700 mt-1">{{ $totalUsulan }} Item</p>
                    </div>
                </div>
            </div>
        </div>

    </div>
@endsection