@php
    $tahunBerjalan = date('Y');
    $tahunUsulan = date('Y') + 1;
    $alasanPenolakan = $usulan->catatan_bpad ?? ($usulan->alasan_penolakan ?? ($usulan->catatan_verifikasi ?? null));

    // Deteksi role user login
    $isUkpd = auth()->user()->role === 'staff_ukpd';

    // Route Dynamic Mapping
    $routeIndex = $isUkpd ? route('ukpd.staf.usulan.index') : route('skpd.staf.usulan-shs.index');
    $routeUpdate = $isUkpd
        ? route('ukpd.staf.usulan.update', $usulan->id)
        : route('skpd.staf.usulan-shs.update', $usulan->id);
    $searchKelompokRoute = $isUkpd
        ? route('ukpd.staf.usulan.search-kelompoks')
        : route('skpd.staf.usulan-shs.search-kelompoks');
    $searchRekeningRoute = $isUkpd
        ? route('ukpd.staf.usulan.search-rekenings')
        : route('skpd.staf.usulan-shs.search-rekenings');
@endphp

@extends('layouts.app')

@section('title', 'Edit Usulan SHS')

@section('content')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <style>
        .select2-container .select2-selection--single {
            height: 42px !important;
            border-radius: 0.5rem !important;
            border: 1px solid #cbd5e1 !important;
            padding: 0.35rem 0.75rem !important;
            background-color: #ffffff !important;
            display: flex !important;
            align-items: center !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            color: #334155 !important;
            padding-left: 0 !important;
            line-height: normal !important;
            font-size: 0.875rem !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 100% !important;
            top: 0 !important;
            right: 10px !important;
        }

        .select2-container--default.select2-container--focus .select2-selection--single,
        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: #3b82f6 !important;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2) !important;
        }

        .select2-dropdown {
            border-color: #cbd5e1 !important;
            border-radius: 0.5rem !important;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
            overflow: hidden !important;
            z-index: 9999 !important;
        }

        .select2-results__option {
            font-size: 0.875rem !important;
            padding: 8px 12px !important;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: #2563eb !important;
        }
    </style>

    <div class="max-w-3xl mx-auto space-y-6">

        <div class="flex items-center justify-between pb-2 border-b border-gray-200">
            <div>
                <h1 class="text-2xl font-bold text-slate-900">Edit Usulan SHS</h1>
                <p class="text-sm text-gray-500">Ubah data usulan: <strong
                        class="text-slate-800">{{ $usulan->uraian_barang }}</strong></p>
            </div>

            <a href="{{ $routeIndex }}"
                class="px-4 py-2 bg-slate-100 hover:bg-slate-200 text-slate-700 text-sm font-semibold rounded-lg flex items-center gap-2 transition-all border">
                <i class="fa-solid fa-arrow-left"></i> Batal & Kembali
            </a>
        </div>

        @if (in_array($usulan->status, ['verifikasi_tertolak', 'validasi_tertolak']) && $alasanPenolakan)
            <div class="p-4 bg-rose-50 border-l-4 border-rose-500 text-rose-800 rounded-r-xl shadow-sm space-y-1">
                <p class="text-xs font-bold uppercase tracking-wider flex items-center gap-1.5 text-rose-900">
                    <i class="fa-solid fa-circle-exclamation text-rose-600 text-sm"></i> Catatan Penolakan
                </p>
                <p class="text-sm text-rose-700 italic font-medium leading-relaxed">
                    "{{ $alasanPenolakan }}"
                </p>
            </div>
        @endif

        <form action="{{ $routeUpdate }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf
            @method('PUT')

            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
                <h3
                    class="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2 pb-3 border-b border-gray-100">
                    <i class="fa-solid fa-layer-group text-amber-600"></i> 1. Klasifikasi & Pengelompokan
                </h3>

                <div class="space-y-4">
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Kategori <span
                                class="text-rose-500">*</span></label>
                        <select name="kategori_id" id="kategori_id" required class="w-full">
                            <option value="">-- Pilih Kategori --</option>
                            @foreach ($kategoris as $kat)
                                @php $valKat = $kat->kode . ' - ' . $kat->uraian; @endphp
                                <option value="{{ $valKat }}"
                                    {{ old('kategori_id', $usulan->kategori_id) == $valKat || old('kategori_id', $usulan->kategori_id) == $kat->kode ? 'selected' : '' }}>
                                    {{ $valKat }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Detail Pengajuan <span
                                class="text-rose-500">*</span></label>
                        <select name="detail_pengajuan_id" id="detail_pengajuan_id" required class="w-full">
                            <option value="">-- Pilih Detail Pengajuan --</option>
                            @foreach ($detailPengajuans as $dp)
                                @php $valDp = $dp->kode . ' - ' . $dp->uraian; @endphp
                                <option value="{{ $valDp }}"
                                    {{ old('detail_pengajuan_id', $usulan->detail_pengajuan_id) == $valDp || old('detail_pengajuan_id', $usulan->detail_pengajuan_id) == $dp->kode ? 'selected' : '' }}>
                                    {{ $valDp }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
                <h3
                    class="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2 pb-3 border-b border-gray-100">
                    <i class="fa-solid fa-boxes-stacked text-amber-600"></i> 2. Informasi Barang & Rekening
                </h3>

                <div class="space-y-4">
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Kode Barang <span
                                class="text-rose-500">*</span></label>
                        <select name="kode_barang" id="select_kode_barang" required class="w-full font-mono">
                            @if (old('kode_barang', $usulan->kode_barang))
                                <option value="{{ old('kode_barang', $usulan->kode_barang) }}" selected>
                                    {{ old('kode_barang', $usulan->kode_barang) }}
                                </option>
                            @else
                                <option value="">-- Ketik Nama atau Kode Barang --</option>
                            @endif
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Nama Kelompok
                            Barang/Jasa</label>
                        <input type="text" name="nama_kelompok" id="nama_kelompok"
                            value="{{ old('nama_kelompok', $usulan->nama_kelompok) }}" readonly tabindex="-1"
                            class="w-full px-3.5 py-2.5 border border-slate-200 rounded-lg text-sm bg-slate-100 text-slate-700 font-medium cursor-not-allowed outline-none select-none focus:ring-0">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Kode Rekening Anggaran</label>
                        <select name="kode_rekening" id="select_kode_rekening" class="w-full font-mono">
                            @if (old('kode_rekening', $usulan->kode_rekening))
                                <option value="{{ old('kode_rekening', $usulan->kode_rekening) }}" selected>
                                    {{ old('kode_rekening', $usulan->kode_rekening) }}
                                </option>
                            @else
                                <option value="">-- Ketik Nama atau Kode Rekening --</option>
                            @endif
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Uraian Barang / Jasa <span
                                class="text-rose-500">*</span></label>
                        <input type="text" name="uraian_barang" id="uraian_barang" required
                            value="{{ old('uraian_barang', $usulan->uraian_barang) }}" readonly tabindex="-1"
                            class="w-full px-3.5 py-2.5 border border-slate-200 rounded-lg text-sm bg-slate-100 text-slate-700 font-medium cursor-not-allowed outline-none select-none focus:ring-0">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Spesifikasi Detail</label>
                        <input type="text" name="spesifikasi" value="{{ old('spesifikasi', $usulan->spesifikasi) }}"
                            placeholder="Contoh: Merk, tipe, ukuran, atau rincian spesifik"
                            class="w-full px-3.5 py-2.5 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Satuan <span
                                class="text-rose-500">*</span></label>
                        <select name="satuan" id="satuan" required
                            class="w-full px-3.5 py-2.5 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none bg-white">
                            <option value="">-- Pilih Satuan --</option>
                            @foreach (['Orang / Bulan', 'Orang / Hari', 'Orang / Jam', 'Buah', 'Unit', 'Set', 'Lusin', 'Rim', 'Paket', 'Meter', 'Kg', 'Box', 'Roll', 'Pasang', 'Lembar', 'Botol', 'Kegiatan'] as $itemSatuan)
                                <option value="{{ $itemSatuan }}"
                                    {{ old('satuan', $usulan->satuan) == $itemSatuan ? 'selected' : '' }}>
                                    {{ $itemSatuan }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
                <h3
                    class="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2 pb-3 border-b border-gray-100">
                    <i class="fa-solid fa-money-bill-wave text-amber-600"></i> 3. Rincian Harga & TKDN
                </h3>

                <div class="space-y-4">
                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Harga {{ $tahunBerjalan }}
                            (Rp)</label>
                        <input type="number" name="harga_2025" value="{{ old('harga_2025', $usulan->harga_2025) }}"
                            placeholder="0"
                            class="w-full px-3.5 py-2.5 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">TKDN (%)</label>
                        <input type="number" step="0.01" name="tkdn" value="{{ old('tkdn', $usulan->tkdn) }}"
                            placeholder="0.00"
                            class="w-full px-3.5 py-2.5 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none">
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Usulan Harga
                            {{ $tahunUsulan }} (Rp) <span class="text-rose-500">*</span></label>
                        <input type="number" name="usulan_harga_2026" required
                            value="{{ old('usulan_harga_2026', $usulan->usulan_harga_2026) }}" placeholder="0"
                            class="w-full px-3.5 py-2.5 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none font-bold text-blue-700 text-base">
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
                <h3
                    class="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2 pb-3 border-b border-gray-100">
                    <i class="fa-solid fa-file-arrow-up text-amber-600"></i> 4. Dokumen Lampiran Referensi (PDF / Word)
                </h3>

                <div class="space-y-4">
                    <div class="p-3.5 bg-slate-50 border rounded-lg space-y-1">
                        <label class="block text-xs font-bold text-slate-700 uppercase">Lampiran 1</label>
                        <input type="file" name="lampiran_1" accept=".pdf,.doc,.docx"
                            class="w-full text-xs text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-amber-50 file:text-amber-700 hover:file:bg-amber-100">
                        @if ($usulan->lampiran_1)
                            <a href="{{ asset('storage/' . $usulan->lampiran_1) }}" target="_blank"
                                class="text-xs text-blue-600 underline font-mono inline-block mt-1">
                                <i class="fa-solid fa-paperclip mr-1"></i> Lihat Dokumen 1 Ter-upload
                            </a>
                        @endif
                    </div>

                    <div class="p-3.5 bg-slate-50 border rounded-lg space-y-1">
                        <label class="block text-xs font-bold text-slate-700 uppercase">Lampiran 2</label>
                        <input type="file" name="lampiran_2" accept=".pdf,.doc,.docx"
                            class="w-full text-xs text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-amber-50 file:text-amber-700 hover:file:bg-amber-100">
                        @if ($usulan->lampiran_2)
                            <a href="{{ asset('storage/' . $usulan->lampiran_2) }}" target="_blank"
                                class="text-xs text-blue-600 underline font-mono inline-block mt-1">
                                <i class="fa-solid fa-paperclip mr-1"></i> Lihat Dokumen 2 Ter-upload
                            </a>
                        @endif
                    </div>

                    <div class="p-3.5 bg-slate-50 border rounded-lg space-y-1">
                        <label class="block text-xs font-bold text-slate-700 uppercase">Lampiran 3</label>
                        <input type="file" name="lampiran_3" accept=".pdf,.doc,.docx"
                            class="w-full text-xs text-slate-500 file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:font-semibold file:bg-amber-50 file:text-amber-700 hover:file:bg-amber-100">
                        @if ($usulan->lampiran_3)
                            <a href="{{ asset('storage/' . $usulan->lampiran_3) }}" target="_blank"
                                class="text-xs text-blue-600 underline font-mono inline-block mt-1">
                                <i class="fa-solid fa-paperclip mr-1"></i> Lihat Dokumen 3 Ter-upload
                            </a>
                        @endif
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
                <h3
                    class="text-sm font-bold text-slate-800 uppercase tracking-wider flex items-center gap-2 pb-3 border-b border-gray-100">
                    <i class="fa-solid fa-sliders text-amber-600"></i> 5. Pengaturan & Catatan Pengusulan
                </h3>

                <div class="space-y-4">
                    <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg">
                        <label class="flex items-start gap-3 cursor-pointer">
                            <input type="checkbox" name="is_khusus_skpd" value="1"
                                {{ old('is_khusus_skpd', $usulan->is_khusus_skpd) ? 'checked' : '' }}
                                class="mt-0.5 h-4 w-4 rounded border-amber-300 text-amber-600 focus:ring-amber-500">
                            <div>
                                <span class="text-xs font-bold text-amber-900 block">Penggunaan Khusus Intern
                                    {{ $isUkpd ? 'UKPD' : 'SKPD' }}</span>
                                <span class="text-[11px] text-amber-700 block mt-0.5">Centang opsi ini jika usulan standar
                                    harga satuan ini hanya diperuntukkan dan digunakan secara terbatas oleh internal
                                    {{ $isUkpd ? 'UKPD' : 'SKPD' }} Anda.</span>
                            </div>
                        </label>
                    </div>

                    <div>
                        <label class="block text-xs font-bold text-slate-700 uppercase mb-1">Keterangan / Alasan
                            Pengusulan</label>
                        <textarea name="keterangan" rows="3" placeholder="Alasan penyesuaian/kenaikan harga usulan..."
                            class="w-full px-3.5 py-2.5 border rounded-lg text-sm focus:ring-2 focus:ring-blue-500 outline-none">{{ old('keterangan', $usulan->keterangan) }}</textarea>
                    </div>
                </div>
            </div>

            <div class="flex justify-end items-center gap-3 pt-2">
                <a href="{{ $routeIndex }}"
                    class="px-5 py-2.5 text-sm font-semibold text-gray-600 hover:bg-gray-100 rounded-lg transition-all">Batal</a>
                <button type="submit"
                    class="px-7 py-2.5 bg-amber-600 hover:bg-amber-700 text-white font-semibold text-sm rounded-lg shadow-md transition-all flex items-center gap-2">
                    <i class="fa-solid fa-floppy-disk"></i> Simpan Perubahan
                </button>
            </div>
        </form>

    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script>
        $(document).ready(function() {
            $('#kategori_id').select2({
                placeholder: "-- Pilih Kategori --",
                allowClear: true,
                width: '100%'
            });

            $('#detail_pengajuan_id').select2({
                placeholder: "-- Pilih Detail Pengajuan --",
                allowClear: true,
                width: '100%'
            });

            $('#select_kode_barang').select2({
                placeholder: "-- Ketik Nama atau Kode Barang --",
                allowClear: true,
                width: '100%',
                ajax: {
                    url: "{{ $searchKelompokRoute }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term || ''
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    id: item.kode,
                                    text: item.kode + ' - ' + item.uraian,
                                    kode: item.kode,
                                    uraian: item.uraian,
                                    satuan: item.satuan
                                };
                            })
                        };
                    },
                    cache: true
                },
                templateResult: function(data) {
                    if (!data.id) return data.text;
                    return $('<span><b>' + data.kode + '</b> - ' + data.uraian + '</span>');
                },
                templateSelection: function(data) {
                    if (!data.id) return data.text;
                    return data.kode || data.id;
                }
            });

            $('#select_kode_rekening').select2({
                placeholder: "-- Ketik Nama atau Kode Rekening --",
                allowClear: true,
                width: '100%',
                ajax: {
                    url: "{{ $searchRekeningRoute }}",
                    dataType: 'json',
                    delay: 250,
                    data: function(params) {
                        return {
                            q: params.term || ''
                        };
                    },
                    processResults: function(data) {
                        return {
                            results: $.map(data, function(item) {
                                return {
                                    id: item.kode,
                                    text: item.kode + ' - ' + item.nama_rekening,
                                    kode: item.kode,
                                    nama_rekening: item.nama_rekening
                                };
                            })
                        };
                    },
                    cache: true
                },
                templateResult: function(data) {
                    if (!data.id) return data.text;
                    return $('<span><b>' + data.kode + '</b> - ' + data.nama_rekening + '</span>');
                },
                templateSelection: function(data) {
                    if (!data.id) return data.text;
                    return data.kode || data.id;
                }
            });

            $('#select_kode_barang').on('select2:select', function(e) {
                var data = e.params.data;

                if (data.uraian) {
                    $('#nama_kelompok').val(data.uraian);
                }
                if (data.satuan) {
                    $('#satuan option').each(function() {
                        if ($(this).val().toLowerCase() === data.satuan.toLowerCase()) {
                            $(this).prop('selected', true);
                        }
                    });
                }
            });

            $('#select_kode_rekening').on('select2:select', function(e) {
                var data = e.params.data;

                if (data.nama_rekening) {
                    $('#uraian_barang').val(data.nama_rekening);
                }
            });
        });
    </script>
@endsection