@php
    $tahunBerjalan = date('Y');
    $tahunUsulan = date('Y') + 1;

    $statusMap = [
        'menunggu_verifikasi' => [
            'label' => 'Menunggu Verifikasi',
            'class' => 'bg-amber-100 text-amber-800 border-amber-200',
        ],
        'proses_verifikasi' => [
            'label' => 'Menunggu Verifikasi',
            'class' => 'bg-amber-100 text-amber-800 border-amber-200',
        ],
        'menunggu_validasi' => [
            'label' => 'Lolos Verifikasi (Menunggu Validasi)',
            'class' => 'bg-indigo-100 text-indigo-800 border-indigo-200',
        ],
        'diverifikasi_staf' => [
            'label' => 'Lolos Verifikasi (Menunggu Validasi)',
            'class' => 'bg-indigo-100 text-indigo-800 border-indigo-200',
        ],
        'verifikasi_tertolak' => [
            'label' => 'Verifikasi Tertolak',
            'class' => 'bg-rose-100 text-rose-800 border-rose-200',
        ],
        'ditolak' => [
            'label' => 'Verifikasi Tertolak',
            'class' => 'bg-rose-100 text-rose-800 border-rose-200',
        ],
        'validasi_success' => [
            'label' => 'Validasi Disetujui',
            'class' => 'bg-emerald-100 text-emerald-800 border-emerald-200',
        ],
    ];

    $st = $statusMap[$usulan->status] ?? [
        'label' => str_replace('_', ' ', $usulan->status),
        'class' => 'bg-slate-100 text-slate-700 border-slate-200',
    ];

    $isPendingVerifikasi = in_array(strtolower($usulan->status ?? ''), ['menunggu_verifikasi', 'proses_verifikasi']);
    $bpkdSudahVerif = (bool) $usulan->is_verifikasi_bpkd;
    $bpadSudahVerif = (bool) $usulan->is_verifikasi_bpad;

    $alasanPenolakan = $usulan->catatan_penolakan ?? ($usulan->catatan_bpkd ?? ($usulan->catatan_bpad ?? null));
    $penolakName = $usulan->rejectedByUser->name ?? null;
    $penolakRole = match ($usulan->rejected_by_role) {
        'staff_bpkd' => 'Staff BPKD',
        'staff_bpad' => 'Staff BPAD',
        'ka_skpd'    => 'Kepala SKPD',
        default      => 'Verifikator',
    };
@endphp

@extends('layouts.app')

@section('title', 'Detail Verifikasi Usulan BPKD')

@section('content')
    <div x-data="{ openTolakModal: false }" class="max-w-5xl mx-auto space-y-6">

        {{-- Header & Back Button --}}
        <div class="flex items-center justify-between pb-2 border-b border-gray-200">
            <div>
                <h1 class="text-2xl font-bold text-slate-900">Detail Verifikasi Usulan SHS (BPKD)</h1>
                <p class="text-sm text-gray-500">Pemeriksaan komponen rekening belanja, kelayakan harga, dan penetapan verifikasi usulan.</p>
            </div>
            <a href="{{ route('bpkd.staf.usulan.index') }}"
                class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-semibold rounded-xl flex items-center gap-2 transition-all border shadow-sm">
                <i class="fa-solid fa-arrow-left"></i> Kembali
            </a>
        </div>

        {{-- Main Detail Card --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-6">

            {{-- Info Pengusul & Status --}}
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 pb-6 border-b border-gray-100">
                <div>
                    <span class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Pengusul / SKPD</span>
                    <p class="text-base font-bold text-slate-900 mt-1">{{ $usulan->user->name ?? 'Staf SKPD' }}</p>
                    <p class="text-xs text-gray-500">NIP: {{ $usulan->user->nip ?? '-' }}</p>
                </div>
                <div>
                    <span class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Tanggal Pengajuan</span>
                    <p class="text-base font-semibold text-slate-800 mt-1">{{ $usulan->created_at->format('d F Y, H:i') }} WIB</p>
                </div>
                <div>
                    <span class="text-xs font-bold text-gray-400 uppercase tracking-wider block">Status Keseluruhan</span>
                    <span class="inline-block mt-1 px-3 py-1 rounded-full text-xs font-bold uppercase border {{ $st['class'] }}">
                        {{ $st['label'] }}
                    </span>
                </div>
            </div>

            {{-- Status Verifikasi Dua Pintu (BPAD & BPKD) --}}
            <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                <span class="text-xs font-bold text-slate-700 uppercase tracking-wider block mb-3">
                    <i class="fa-solid fa-user-check text-blue-600 mr-1"></i> Status Verifikasi Dua Pintu
                </span>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    {{-- Status BPKD --}}
                    <div class="flex items-center justify-between p-3.5 rounded-lg border bg-white shadow-sm {{ $bpkdSudahVerif ? 'border-sky-300 bg-sky-50/20' : '' }}">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-lg flex items-center justify-center {{ $bpkdSudahVerif ? 'bg-sky-100 text-sky-700' : 'bg-gray-100 text-gray-500' }}">
                                <i class="fa-solid fa-landmark"></i>
                            </div>
                            <div>
                                <p class="text-xs font-bold text-slate-800">Verifikasi Staff BPKD</p>
                                @if ($bpkdSudahVerif)
                                    <p class="text-[11px] text-sky-700 font-medium">Oleh: {{ $usulan->verifikatorBpkd->name ?? 'Staff BPKD' }}</p>
                                @else
                                    <p class="text-[11px] text-gray-400">Menunggu aksi Anda</p>
                                @endif
                            </div>
                        </div>
                        @if ($bpkdSudahVerif)
                            <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-sky-100 text-sky-800 border border-sky-300 flex items-center gap-1">
                                <i class="fa-solid fa-check"></i> Disetujui
                            </span>
                        @else
                            <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 border border-amber-300">
                                Pending
                            </span>
                        @endif
                    </div>

                    {{-- Status BPAD --}}
                    <div class="flex items-center justify-between p-3.5 rounded-lg border bg-white shadow-sm {{ $bpadSudahVerif ? 'border-teal-300 bg-teal-50/20' : '' }}">
                        <div class="flex items-center gap-3">
                            <div class="w-9 h-9 rounded-lg flex items-center justify-center {{ $bpadSudahVerif ? 'bg-teal-100 text-teal-700' : 'bg-gray-100 text-gray-500' }}">
                                <i class="fa-solid fa-building-shield"></i>
                            </div>
                            <div>
                                <p class="text-xs font-bold text-slate-800">Verifikasi Staff BPAD</p>
                                @if ($bpadSudahVerif)
                                    <p class="text-[11px] text-teal-700 font-medium">Oleh: {{ $usulan->verifikatorBpad->name ?? 'Staff BPAD' }}</p>
                                @else
                                    <p class="text-[11px] text-gray-400">Menunggu Verifikasi BPAD</p>
                                @endif
                            </div>
                        </div>
                        @if ($bpadSudahVerif)
                            <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-teal-100 text-teal-800 border border-teal-300 flex items-center gap-1">
                                <i class="fa-solid fa-check"></i> Disetujui
                            </span>
                        @else
                            <span class="px-2.5 py-1 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 border border-amber-300">
                                Pending
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            {{-- Rincian Komponen Barang & Rekening --}}
            <div class="space-y-3">
                <h3 class="text-xs font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2 pb-2 border-b border-gray-100">
                    <i class="fa-solid fa-boxes-stacked text-blue-600"></i> Rincian Komponen Barang, Rekening & Anggaran
                </h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50 p-5 rounded-xl border border-gray-100 text-sm">
                    <div>
                        <span class="text-xs text-gray-500 block">Kelompok Barang</span>
                        <p class="font-bold text-slate-800 mt-0.5">{{ $usulan->nama_kelompok ?? '-' }}</p>
                    </div>

                    <div>
                        <span class="text-xs text-gray-500 block">Kode Rekening Belanja</span>
                        <p class="font-mono font-bold text-blue-700 mt-0.5">{{ $usulan->kode_rekening ?? '-' }}</p>
                    </div>

                    <div>
                        <span class="text-xs text-gray-500 block">Kode Barang</span>
                        <p class="font-mono font-bold text-slate-800 mt-0.5">{{ $usulan->kode_barang ?? '-' }}</p>
                    </div>

                    <div>
                        <span class="text-xs text-gray-500 block">Satuan & Tingkat TKDN</span>
                        <p class="font-semibold text-slate-800 mt-0.5">
                            <span class="bg-white border px-2 py-0.5 rounded text-xs">{{ $usulan->satuan ?? 'Unit' }}</span>
                            <span class="ml-2 bg-emerald-50 text-emerald-700 border border-emerald-200 px-2 py-0.5 rounded text-xs font-bold">
                                TKDN: {{ $usulan->tkdn ?? 0 }}%
                            </span>
                        </p>
                    </div>

                    <div class="md:col-span-2">
                        <span class="text-xs text-gray-500 block">Uraian Barang / Jasa</span>
                        <p class="font-bold text-slate-900 mt-0.5 text-base">{{ $usulan->uraian_barang }}</p>
                    </div>

                    <div class="md:col-span-2">
                        <span class="text-xs text-gray-500 block">Spesifikasi Detail</span>
                        <p class="font-medium text-slate-700 mt-0.5 bg-white p-3 rounded-lg border border-gray-200">
                            {{ $usulan->spesifikasi ?? '-' }}
                        </p>
                    </div>

                    {{-- Komparasi Harga --}}
                    <div class="p-3 bg-white rounded-lg border">
                        <span class="text-xs text-gray-500 block">Harga Penetapan {{ $tahunBerjalan }}</span>
                        <p class="font-mono font-bold text-slate-700 mt-0.5 text-base">
                            Rp {{ number_format($usulan->harga_2025 ?? 0, 0, ',', '.') }}
                        </p>
                    </div>

                    <div class="p-3 bg-blue-50/50 rounded-lg border border-blue-200">
                        <span class="text-xs text-blue-600 font-bold block">Usulan Harga Baru {{ $tahunUsulan }}</span>
                        <p class="font-mono font-bold text-blue-700 mt-0.5 text-lg">
                            Rp {{ number_format($usulan->usulan_harga_2026 ?? 0, 0, ',', '.') }}
                        </p>
                    </div>
                </div>
            </div>

            {{-- Audit Trail Penolakan --}}
            @if ($alasanPenolakan)
                <div class="p-4 bg-rose-50 border border-rose-200 rounded-xl space-y-1">
                    <span class="text-xs font-bold text-rose-800 uppercase flex items-center gap-1">
                        <i class="fa-solid fa-circle-exclamation text-rose-600"></i> Catatan Penolakan:
                    </span>
                    <p class="text-xs text-rose-700 font-semibold">
                        Ditolak Oleh: {{ $penolakName ?? 'Verifikator' }} ({{ $penolakRole }})
                    </p>
                    <p class="text-sm text-rose-900 italic">"{{ $alasanPenolakan }}"</p>
                </div>
            @endif

            {{-- Action Buttons & Status Banners --}}
            <div class="pt-6 border-t border-gray-100 flex flex-col sm:flex-row items-center justify-between gap-4">
                <div>
                    <span class="text-xs text-gray-400 block">Status Dokumen</span>
                    <span class="text-xs font-bold uppercase tracking-wider text-slate-800">{{ $st['label'] }}</span>
                </div>

                {{-- KONDISI 1: Belum diverifikasi BPKD dan status masih antrean --}}
                @if ($isPendingVerifikasi && !$bpkdSudahVerif)
                    <div class="flex items-center gap-3 w-full sm:w-auto justify-end">
                        <button type="button" @click="openTolakModal = true"
                            class="px-4 py-2.5 bg-rose-50 hover:bg-rose-100 text-rose-700 border border-rose-200 text-xs font-bold rounded-xl transition-all flex items-center gap-2 shadow-sm">
                            <i class="fa-solid fa-xmark"></i> Tolak Usulan
                        </button>

                        <form action="{{ route('bpkd.staf.usulan.verifikasi', $usulan->id) }}" method="POST"
                            onsubmit="return confirm('Apakah Anda yakin data rekening dan anggaran sudah sesuai dan ingin menyetujui usulan ini?')">
                            @csrf
                            <button type="submit"
                                class="px-5 py-2.5 bg-sky-600 hover:bg-sky-700 text-white text-xs font-bold rounded-xl transition-all shadow-md flex items-center gap-2">
                                <i class="fa-solid fa-check"></i> Setujui Verifikasi BPKD
                            </button>
                        </form>
                    </div>

                {{-- KONDISI 2: BPKD SUDAH verifikasi, tetapi BPAD BELUM --}}
                @elseif ($isPendingVerifikasi && $bpkdSudahVerif)
                    <div class="p-3 bg-sky-50 border border-sky-200 rounded-xl text-sky-800 text-xs font-semibold flex items-center gap-2">
                        <i class="fa-solid fa-lock text-sky-600 text-base"></i>
                        <span>Persetujuan BPKD telah terkunci. Menunggu verifikasi dari Staff BPAD.</span>
                    </div>

                {{-- KONDISI 3: Keduanya lolos dan menuju Validasi Kepala SKPD --}}
                @elseif (in_array($usulan->status, ['menunggu_validasi', 'diverifikasi_staf']))
                    <div class="p-3 bg-indigo-50 border border-indigo-200 rounded-xl text-indigo-800 text-xs font-semibold flex items-center gap-2">
                        <i class="fa-solid fa-check-double text-indigo-600 text-base"></i>
                        <span>Usulan lolos verifikasi BPKD & BPAD. Sedang menunggu validasi Kepala SKPD.</span>
                    </div>

                {{-- KONDISI 4: Validasi Berhasil / Selesai --}}
                @elseif ($usulan->status === 'validasi_success')
                    <div class="p-3 bg-emerald-50 border border-emerald-200 rounded-xl text-emerald-800 text-xs font-semibold flex items-center gap-2">
                        <i class="fa-solid fa-circle-check text-emerald-600 text-base"></i>
                        <span>Usulan telah divalidasi dan disahkan secara final oleh Kepala SKPD.</span>
                    </div>

                {{-- KONDISI 5: Tertolak --}}
                @else
                    <div class="text-xs text-rose-700 bg-rose-50 px-4 py-2.5 rounded-xl border border-rose-200 font-semibold flex items-center gap-2">
                        <i class="fa-solid fa-circle-xmark text-rose-600"></i>
                        <span>Usulan berstatus tertolak dan dikembalikan ke pengusul.</span>
                    </div>
                @endif
            </div>
        </div>

        {{-- Modal Tolak Usulan --}}
        <div x-show="openTolakModal"
            class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/60 backdrop-blur-sm" x-cloak>
            <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 space-y-4" @click.away="openTolakModal = false">
                <div class="flex justify-between items-center border-b pb-3">
                    <h3 class="text-base font-bold text-slate-800 flex items-center gap-2">
                        <i class="fa-solid fa-triangle-exclamation text-rose-600"></i> Alasan Penolakan (BPKD)
                    </h3>
                    <button @click="openTolakModal = false" class="text-gray-400 hover:text-gray-600">
                        <i class="fa-solid fa-xmark text-lg"></i>
                    </button>
                </div>

                <form action="{{ route('bpkd.staf.usulan.tolak', $usulan->id) }}" method="POST" class="space-y-4">
                    @csrf
                    <div>
                        <label class="block text-xs font-bold text-gray-700 mb-1">
                            Catatan Koreksi / Alasan Penolakan <span class="text-rose-500">*</span>
                        </label>
                        <textarea name="catatan_penolakan" rows="4" required
                            placeholder="Contoh: Kode rekening belanja tidak sesuai dengan peruntukan belanja barang operasional."
                            class="w-full border border-gray-300 rounded-xl p-3 text-sm focus:ring-2 focus:ring-slate-900 focus:outline-none"></textarea>
                    </div>

                    <div class="flex justify-end gap-2 pt-3 border-t">
                        <button type="button" @click="openTolakModal = false"
                            class="px-4 py-2 bg-gray-100 text-gray-700 rounded-xl text-xs font-semibold hover:bg-gray-200">
                            Batal
                        </button>
                        <button type="submit"
                            class="px-4 py-2 bg-rose-600 text-white rounded-xl text-xs font-semibold hover:bg-rose-700 shadow">
                            Kirim Penolakan
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
@endsection