@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-blue-100 text-blue-800 border-blue-200',
        ],
        'diverifikasi_staf' => [
            'label' => 'Lolos Verifikasi (Menunggu Validasi)',
            'class' => 'bg-blue-100 text-blue-800 border-blue-200',
        ],
        'verifikasi_tertolak' => [
            'label' => 'Verifikasi Tertolak',
            'class' => 'bg-rose-100 text-rose-800 border-rose-200',
        ],
        'validasi_tertolak' => ['label' => 'Validasi Tertolak', 'class' => 'bg-rose-100 text-rose-800 border-rose-200'],
        'validasi_success' => [
            'label' => 'Validasi Success',
            'class' => 'bg-emerald-100 text-emerald-800 border-emerald-200',
        ],
        'disetujui' => ['label' => 'Validasi Success', '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']);
    $bpadSudahVerif = (bool) $usulan->is_verifikasi_bpad;
    $bpkdSudahVerif = (bool) $usulan->is_verifikasi_bpkd;

    $alasanPenolakan = $usulan->catatan_penolakan ?? ($usulan->catatan_bpad ?? ($usulan->catatan_bpkd ?? null));
    $penolakName = $usulan->rejectedByUser->name ?? null;
    $penolakRole =
        $usulan->rejected_by_role === 'staff_bpkd'
            ? 'Staff BPKD'
            : ($usulan->rejected_by_role === 'staff_bpad'
                ? 'Staff BPAD'
                : 'Verifikator');
@endphp

@extends('layouts.app')

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

@section('content')
    <div x-data="{ openTolakModal: false }" class="max-w-4xl 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</h1>
                <p class="text-sm text-gray-500">Pemeriksaan komponen dokumen dan penetapan verifikasi usulan SKPD.</p>
            </div>
            <a href="{{ route('bpad.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">
                <i class="fa-solid fa-arrow-left"></i> Kembali
            </a>
        </div>

        {{-- Error Alert --}}
        @if ($errors->any())
            <div class="p-4 bg-rose-50 border-l-4 border-rose-500 text-rose-800 rounded-r-lg text-sm font-medium shadow-sm">
                <ul class="list-disc pl-5 space-y-1 text-xs">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

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

            {{-- Pengusul Info & Indikator Verifikasi Paralel --}}
            <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 BPAD --}}
                    <div class="flex items-center justify-between p-3 rounded-lg border bg-white shadow-sm">
                        <div class="flex items-center gap-2">
                            <i class="fa-solid fa-building-shield text-slate-600"></i>
                            <div>
                                <p class="text-xs font-bold text-slate-800">Verifikasi Staff BPAD</p>
                                @if ($bpadSudahVerif)
                                    <p class="text-[10px] text-gray-400">Oleh:
                                        {{ $usulan->verifikatorBpad->name ?? 'Staff BPAD' }}</p>
                                @endif
                            </div>
                        </div>
                        @if ($bpadSudahVerif)
                            <span
                                class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800 border border-emerald-200">
                                <i class="fa-solid fa-check mr-1"></i> Disetujui
                            </span>
                        @else
                            <span
                                class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 border border-amber-200">
                                Menunggu
                            </span>
                        @endif
                    </div>

                    {{-- Status BPKD --}}
                    <div class="flex items-center justify-between p-3 rounded-lg border bg-white shadow-sm">
                        <div class="flex items-center gap-2">
                            <i class="fa-solid fa-landmark text-slate-600"></i>
                            <div>
                                <p class="text-xs font-bold text-slate-800">Verifikasi Staff BPKD</p>
                                @if ($bpkdSudahVerif)
                                    <p class="text-[10px] text-gray-400">Oleh:
                                        {{ $usulan->verifikatorBpkd->name ?? 'Staff BPKD' }}</p>
                                @endif
                            </div>
                        </div>
                        @if ($bpkdSudahVerif)
                            <span
                                class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-100 text-emerald-800 border border-emerald-200">
                                <i class="fa-solid fa-check mr-1"></i> Disetujui
                            </span>
                        @else
                            <span
                                class="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-100 text-amber-800 border border-amber-200">
                                Menunggu
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            {{-- 1. Klasifikasi --}}
            <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-layer-group text-blue-600"></i> 1. Klasifikasi & Pengelompokan
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50 p-4 rounded-xl border border-gray-100 text-sm">
                    <div>
                        <span class="text-xs text-gray-500 block">Kategori (Level 1)</span>
                        <p class="font-semibold text-slate-800 mt-0.5">{{ $usulan->kategori_id ?? '-' }}</p>
                    </div>
                    <div>
                        <span class="text-xs text-gray-500 block">Detail Pengajuan (Level 4)</span>
                        <p class="font-semibold text-slate-800 mt-0.5">{{ $usulan->detail_pengajuan_id ?? '-' }}</p>
                    </div>
                </div>
            </div>

            {{-- 2. Informasi 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> 2. Rincian Komponen Barang & Rekening
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 bg-gray-50 p-4 rounded-xl border border-gray-100 text-sm">
                    <div>
                        <span class="text-xs text-gray-500 block">Kode Barang (Level 5)</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">Nama Kelompok Barang/Jasa</span>
                        <p class="font-semibold text-slate-800 mt-0.5">{{ $usulan->nama_kelompok ?? '-' }}</p>
                    </div>
                    <div>
                        <span class="text-xs text-gray-500 block">Kode Rekening Anggaran</span>
                        <p class="font-mono font-semibold text-blue-600 mt-0.5">{{ $usulan->kode_rekening ?? '-' }}</p>
                    </div>
                    <div>
                        <span class="text-xs text-gray-500 block">Uraian Barang / Jasa</span>
                        <p class="font-bold text-slate-900 mt-0.5">{{ $usulan->uraian_barang }}</p>
                    </div>
                    <div>
                        <span class="text-xs text-gray-500 block">Spesifikasi Detail</span>
                        <p class="font-medium text-slate-700 mt-0.5">{{ $usulan->spesifikasi ?? '-' }}</p>
                    </div>
                    <div>
                        <span class="text-xs text-gray-500 block">Satuan</span>
                        <p class="font-bold text-slate-800 mt-0.5">{{ $usulan->satuan ?? '-' }}</p>
                    </div>
                </div>
            </div>

            {{-- 3. Rincian Harga & TKDN --}}
            <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-money-bill-wave text-blue-600"></i> 3. Rincian Harga & TKDN
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-center text-sm">
                    <div class="p-3 bg-gray-50 rounded-xl border">
                        <span class="text-xs text-gray-500 block">Harga {{ $tahunBerjalan }}</span>
                        <p class="font-mono font-semibold text-slate-800 mt-1">Rp
                            {{ number_format($usulan->harga_2025 ?? 0, 0, ',', '.') }}</p>
                    </div>
                    <div class="p-3 bg-gray-50 rounded-xl border">
                        <span class="text-xs text-gray-500 block">TKDN</span>
                        <p class="font-semibold text-slate-800 mt-1">{{ $usulan->tkdn ?? '0' }}%</p>
                    </div>
                    <div class="p-3 bg-blue-50 rounded-xl border border-blue-200">
                        <span class="text-xs font-bold text-blue-800 block">Usulan Harga {{ $tahunUsulan }}</span>
                        <p class="font-mono font-bold text-blue-700 mt-1 text-base">Rp
                            {{ number_format($usulan->usulan_harga_2026 ?? ($usulan->harga_usulan ?? 0), 0, ',', '.') }}
                        </p>
                    </div>
                </div>
            </div>

            {{-- 4. Dokumen Lampiran --}}
            <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-file-arrow-up text-blue-600"></i> 4. Dokumen Lampiran Referensi
                </h3>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 text-sm">
                    @for ($i = 1; $i <= 3; $i++)
                        @php $field = 'lampiran_' . $i; @endphp
                        <div class="p-3 bg-slate-50 border rounded-lg text-center">
                            <p class="text-xs font-bold text-gray-600 mb-2">Lampiran {{ $i }}</p>
                            @if ($usulan->$field)
                                <a href="{{ asset('storage/' . $usulan->$field) }}" target="_blank"
                                    class="px-3 py-1.5 bg-blue-600 text-white rounded text-xs font-semibold inline-flex items-center gap-1 shadow hover:bg-blue-700 transition-all">
                                    <i class="fa-solid fa-download"></i> Buka File
                                </a>
                            @else
                                <span class="text-xs text-gray-400 italic">Tidak Ada File</span>
                            @endif
                        </div>
                    @endfor
                </div>
            </div>

            {{-- 5. Keterangan & Catatan Penolakan --}}
            <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-sliders text-blue-600"></i> 5. Pengaturan & Catatan Pengusulan
                </h3>

                @if ($usulan->is_khusus_skpd)
                    <div
                        class="p-3 bg-amber-50 border border-amber-200 rounded-lg text-xs text-amber-900 flex items-center gap-2">
                        <i class="fa-solid fa-circle-exclamation text-amber-600"></i>
                        <span><strong>Status Khusus:</strong> Usulan ini khusus diperuntukkan bagi internal
                            SKPD/UKPD/Sudin.</span>
                    </div>
                @endif

                <div>
                    <p class="text-xs font-bold text-slate-700 uppercase mb-1">Keterangan / Alasan Pengusul:</p>
                    <p class="p-3 bg-slate-50 rounded-lg border text-sm text-slate-600 italic">
                        {{ $usulan->keterangan ?? 'Tidak ada catatan keterangan.' }}
                    </p>
                </div>

                {{-- Tampilan Catatan Penolakan Berdasarkan Audit Trail --}}
                @if ($alasanPenolakan)
                    <div class="p-4 bg-rose-50 border border-rose-200 rounded-xl space-y-1 mt-3">
                        <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
            </div>

            {{-- Action Buttons --}}
            <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 Saat Ini</span>
                    <span class="text-xs font-bold uppercase tracking-wider text-slate-800">
                        {{ $st['label'] }}
                    </span>
                </div>

                {{-- Jika masih pending verifikasi dan BPAD BELUM verifikasi --}}
                @if ($isPendingVerifikasi && !$bpadSudahVerif)
                    <div class="flex items-center gap-3">
                        <button type="button" @click="openTolakModal = true"
                            class="px-4 py-2 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">
                            <i class="fa-solid fa-xmark"></i> Tolak Usulan
                        </button>

                        <form action="{{ route('bpad.staf.usulan.verifikasi', $usulan->id) }}" method="POST"
                            onsubmit="return confirm('Apakah Anda yakin ingin menyetujui dan memverifikasi usulan ini?')">
                            @csrf
                            <button type="submit"
                                class="px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-white text-xs font-bold rounded-xl transition-all shadow flex items-center gap-2">
                                <i class="fa-solid fa-check"></i> Setujui & Verifikasi
                            </button>
                        </form>
                    </div>
                    {{-- Jika BPAD SUDAH verifikasi, tetapi BPKD BELUM verifikasi --}}
                @elseif ($isPendingVerifikasi && $bpadSudahVerif)
                    <div
                        class="text-xs text-blue-800 bg-blue-50 px-4 py-2 rounded-xl border border-blue-200 flex items-center gap-2 font-medium">
                        <i class="fa-solid fa-circle-check text-emerald-600"></i>
                        <span>Persetujuan BPAD tersimpan! Menunggu verifikasi dari Staff BPKD.</span>
                    </div>
                @else
                    <div class="text-xs text-gray-500 italic bg-gray-100 px-3 py-1.5 rounded-lg border">
                        Usulan telah diproses ({{ $st['label'] }}).
                    </div>
                @endif
            </div>
        </div>

        {{-- Modal Tolak --}}
        <div x-show="openTolakModal"
            class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 backdrop-blur-sm" x-cloak>
            <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 space-y-4">
                <div class="flex justify-between items-center border-b pb-3">
                    <h3 class="text-base font-bold text-slate-800">Alasan Penolakan Verifikasi</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('bpad.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 / Alasan Penolakan <span
                                class="text-rose-500">*</span></label>
                        <textarea name="catatan_penolakan" rows="4" required
                            placeholder="Contoh: Spesifikasi kurang jelas / Harga melebihi batas wajar standar pasar."
                            class="w-full border border-gray-300 rounded-lg 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-lg text-xs font-semibold hover:bg-gray-200">
                            Batal
                        </button>
                        <button type="submit"
                            class="px-4 py-2 bg-rose-600 text-white rounded-lg text-xs font-semibold hover:bg-rose-700 shadow">
                            Kirim Penolakan
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
@endsection