@extends('layouts.app')

@section('title', 'Meja Kerja Kepala BPAD')

@section('content')
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-slate-900">Kendali Manajemen Alur & Regulasi</h1>
        <p class="text-sm text-gray-500">Halaman otorisasi tinggi Kepala Badan Pengelola Aset Daerah untuk mengendalikan
            siklus sistem.</p>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 max-w-3xl">
        <div class="flex items-start justify-between">
            <div>
                <h3 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                    <i class="fa-solid fa-toggle-on text-blue-600"></i> Master Saklar Registrasi Akun
                </h3>
                <p class="text-sm text-gray-500 mt-1 max-w-md">
                    Jika saklar dalam kondisi aktif, sistem database PostgreSQL akan membuka hak akses bagi Kepala SKPD dan
                    UKPD untuk mendaftarkan operator mereka.
                </p>
            </div>

            <div class="flex flex-col items-end gap-2">
                <form action="{{ route('bpad.toggle-fase') }}" method="POST">
                    @csrf
                    <button type="submit"
                        class="px-5 py-2.5 rounded-lg font-semibold text-sm shadow flex items-center gap-2 transition-all {{ $faseStatus == 'open' ? 'bg-emerald-600 hover:bg-emerald-700 text-white' : 'bg-rose-600 hover:bg-rose-700 text-white' }}">
                        <i class="fa-solid {{ $faseStatus == 'open' ? 'fa-lock-open' : 'fa-lock' }}"></i>
                        <span>FASE: {{ strtoupper($faseStatus) }}</span>
                    </button>
                </form>
                <span
                    class="text-[11px] font-bold px-2 py-0.5 rounded {{ $faseStatus == 'open' ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-100 text-rose-800' }}">
                    {{ $faseStatus == 'open' ? 'Pendaftaran Akun Terbuka' : 'Pendaftaran Akun Terkunci' }}
                </span>
            </div>
        </div>

        <hr class="my-6 border-gray-100">

        <div class="space-y-4">
            <label class="block text-sm font-semibold text-slate-700">Dokumen Dasar Hukum / Surat Edaran (SE):</label>
            <div class="flex gap-4">
                <div
                    class="flex-1 bg-gray-50 p-3 rounded-lg border border-dashed border-gray-300 flex items-center justify-between text-sm">
                    <span class="text-gray-600 font-medium">
                        <i class="fa-regular fa-file-pdf text-rose-500 mr-2 text-base"></i> SE_Membuka_Fase_EHarga_2026.pdf
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 max-w-3xl mt-6">
        <div class="mb-4">
            <h3 class="text-lg font-bold text-slate-800 flex items-center gap-2">
                <i class="fa-solid fa-clock-rotate-left text-slate-600"></i> Log Aktivitas Perubahan Fase
            </h3>
            <p class="text-xs text-gray-500 mt-1">Rekam jejak digital pembukaan dan penutupan akses registrasi sistem.</p>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50 border-b border-gray-200 text-xs font-bold text-gray-500 uppercase">
                        <th class="p-3">Waktu Perubahan</th>
                        <th class="p-3">Aksi Sistem</th>
                        <th class="p-3">Eksekutor (Ka. BPAD)</th>
                    </tr>
                </thead>
                <tbody class="text-sm divide-y divide-gray-100">
                    @forelse($faseLogs as $log)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="p-3 font-mono text-xs text-gray-600">
                                {{ date('d M Y | H:i', strtotime($log->created_at)) }} WIB
                            </td>
                            <td class="p-3">
                                <span
                                    class="text-[11px] font-bold px-2.5 py-1 rounded-full inline-flex items-center gap-1 {{ strtoupper($log->action) == 'OPEN' ? 'bg-emerald-100 text-emerald-800' : 'bg-rose-100 text-rose-800' }}">
                                    <i
                                        class="fa-solid {{ strtoupper($log->action) == 'OPEN' ? 'fa-lock-open' : 'fa-lock' }} text-[10px]"></i>
                                    {{ strtoupper($log->action) == 'OPEN' ? 'Akses Dibuka' : 'Akses Ditutup' }}
                                </span>
                            </td>
                            <td class="p-3">
                                <div class="text-xs">
                                    <p class="font-semibold text-slate-800">{{ $log->user_name }}</p>
                                    <p class="text-gray-400 font-mono text-[10px]">NIP. {{ $log->user_nip }}</p>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="3" class="p-8 text-center text-gray-400">
                                <div class="flex flex-col items-center justify-center gap-2 py-4">
                                    <i class="fa-solid fa-clipboard-list text-gray-200 text-4xl"></i>
                                    <p class="text-xs font-medium italic mt-2">Belum ada rekam jejak perubahan fase
                                        registrasi.</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection