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

    $statusMap = [
        'menunggu_validasi' => [
            'label' => 'Menunggu Validasi',
            'class' => 'bg-indigo-100 text-indigo-800 border-indigo-200',
        ],
        'diverifikasi_staf' => [
            'label' => 'Menunggu Validasi',
            'class' => 'bg-indigo-100 text-indigo-800 border-indigo-200',
        ],
        'validasi_success' => [
            'label' => 'Validasi Disetujui',
            'class' => 'bg-emerald-100 text-emerald-800 border-emerald-200',
        ],
        'disetujui' => [
            'label' => 'Validasi Disetujui',
            'class' => 'bg-emerald-100 text-emerald-800 border-emerald-200',
        ],
        'validasi_tertolak' => ['label' => 'Validasi Ditolak', 'class' => 'bg-rose-100 text-rose-800 border-rose-200'],
    ];

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

    $isPendingValidasi = in_array(strtolower($usulan->status ?? ''), ['menunggu_validasi', 'diverifikasi_staf']);
    $bpadSudahVerif = (bool) $usulan->is_verifikasi_bpad;
    $bpkdSudahVerif = (bool) $usulan->is_verifikasi_bpkd;

    $alasanPenolakan = $usulan->catatan_penolakan ?? null;
    $penolakName = $usulan->rejectedByUser->name ?? null;
@endphp

@extends('layouts.app')

@section('title', 'Detail Validasi Usulan SHS')

@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 Validasi Usulan SHS</h1>
                <p class="text-sm text-gray-500">Penetapan persetujuan validasi oleh Kepala SKPD.</p>
            </div>
            <a href="{{ route('skpd.ka.validasi.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>

        {{-- Card Detail Usulan --}}
        <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</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 Validasi</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>

            {{-- Ringkasan Status Verifikasi 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-shield-halved text-blue-600 mr-1"></i> Rekam Verifikasi Teknis
                </span>
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    <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>
                                <p class="text-[10px] text-gray-400">Oleh:
                                    {{ $usulan->verifikatorBpad->name ?? 'Staff BPAD' }}</p>
                            </div>
                        </div>
                        <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>
                    </div>

                    <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>
                                <p class="text-[10px] text-gray-400">Oleh:
                                    {{ $usulan->verifikatorBpkd->name ?? 'Staff BPKD' }}</p>
                            </div>
                        </div>
                        <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>
                    </div>
                </div>
            </div>

            {{-- Rincian Komponen Barang & Harga --}}
            <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
                </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</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">Kode Rekening</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">Usulan Harga {{ $tahunUsulan }}</span>
                        <p class="font-mono font-bold text-blue-700 mt-0.5 text-base">Rp
                            {{ number_format($usulan->usulan_harga_2026 ?? 0, 0, ',', '.') }}</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>

            {{-- Audit Trail Penolakan Validasi --}}
            @if ($usulan->status === 'validasi_tertolak' && $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 Validasi:
                    </span>
                    <p class="text-xs text-rose-700 font-semibold">
                        Ditolak Oleh: {{ $penolakName ?? 'Kepala SKPD' }}
                    </p>
                    <p class="text-sm text-rose-900 italic">"{{ $alasanPenolakan }}"</p>
                </div>
            @endif

            {{-- Action Buttons --}}
            <div class="pt-6 border-t border-gray-100 flex 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>

                @if ($isPendingValidasi)
                    <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 Validasi
                        </button>

                        <form action="{{ route('skpd.ka.validasi.setujui', $usulan->id) }}" method="POST"
                            onsubmit="return confirm('Apakah Anda yakin ingin memvalidasi dan menyetujui 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> Sahkan & Validasi
                            </button>
                        </form>
                    </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 Validasi --}}
        <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 Validasi</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('skpd.ka.validasi.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="Tuliskan catatan perbaikan untuk dikembalikan ke staf..."
                            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