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

    // 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');
    $routeStore = $isUkpd ? route('ukpd.staf.usulan.store') : route('skpd.staf.usulan-shs.store');
@endphp

@extends('layouts.app')

@section('title', 'Tambah Usulan SHS Baru')

@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">Input Usulan SHS Baru</h1>
                <p class="text-sm text-gray-500">Isi formulir usulan standar harga satuan untuk tahun {{ $tahunUsulan }}.
                </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> Kembali
            </a>
        </div>

        <form action="{{ $routeStore }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            {{-- 1. Klasifikasi & Pengelompokan --}}
            <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-blue-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') == $valKat ? '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') == $valDp ? 'selected' : '' }}>
                                    {{ $valDp }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            {{-- 2. Informasi Barang & Rekening --}}
            <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-blue-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">
                            <option value="">-- Ketik Nama atau Kode Barang --</option>
                        </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') }}"
                            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">
                            <option value="">-- Ketik Nama atau Kode Rekening --</option>
                        </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') }}" 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') }}"
                            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') == $itemSatuan ? 'selected' : '' }}>
                                    {{ $itemSatuan }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            {{-- 3. Rincian Harga & TKDN --}}
            <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-blue-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') }}" 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') }}" 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') }}"
                            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>

            {{-- 4. Dokumen Lampiran --}}
            <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-blue-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-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    </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-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    </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-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                    </div>
                </div>
            </div>

            {{-- 5. Pengaturan & Catatan --}}
            <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-blue-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') ? 'checked' : '' }}
                                class="mt-0.5 h-4 w-4 rounded border-amber-300 text-blue-600 focus:ring-blue-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') }}</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-blue-600 hover:bg-blue-700 text-white font-semibold text-sm rounded-lg shadow-md transition-all flex items-center gap-2">
                    <i class="fa-solid fa-paper-plane"></i> Simpan Usulan Baru
                </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: "{{ route('master.search-kelompoks') }}",
                    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: "{{ route('master.search-rekenings') }}",
                    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