@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => $title_menu])

    @php
        $userRoles = $users_rules ?? [];
        $isHead = in_array('head', $userRoles);
        $isPpic = in_array('ppic', $userRoles);
        $isSpv = in_array('spv', $userRoles);
        $isAdmins = in_array('admins', $userRoles);
        $focusedDetailId = (int) ($focused_detail_id ?? request()->query('detail_id', 0));
        $headFocusMode = $isHead && $focusedDetailId > 0;
        $ppicFocusMode = false; // Mode fokus PPIC diganti dengan edit bulk

        // HEAD: dapat edit hanya lampiran
        // PPIC: dapat edit detail barang + lampiran
        // SPV & ADMINS: dapat edit semua

    @endphp

    <div class="card shadow-lg mx-4 mt-3">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">

        <form action="{{ url($url_menu . '/' . $header->id) }}" method="POST" id="formPrapr" enctype="multipart/form-data">
            @csrf
            @method('PUT') {{-- PENTING: Method PUT untuk Update --}}
            @if ($headFocusMode || $ppicFocusMode)
                <input type="hidden" name="focused_detail_id" value="{{ $focusedDetailId }}">
            @endif

            <div class="row">
                <div class="col-12">
                    {{-- Alert Error --}}
                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show text-white" role="alert">
                            <span class="alert-icon"><i class="fas fa-exclamation-triangle"></i></span>
                            <span class="alert-text"><strong>Error!</strong> {{ session('error') }}</span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="alert alert-danger text-white mb-4">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    {{-- MAIN CARD --}}
                    <div class="card shadow-lg border-0">
                        {{-- Card Header --}}
                        <div class="card-header bg-white pb-0 pt-4 border-bottom">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div>
                                    <h5 class="font-weight-bolder mb-0 text-dark">Edit Permintaan #{{ $header->no_prapr }}
                                    </h5>
                                    <p class="text-sm text-secondary mb-0">Perbarui data permintaan barang di bawah ini.</p>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            {{-- SECTION 1: HEADER INFO --}}
                            <div class="bg-gray-100 border-radius-lg p-4 mb-4">
                                <h6 class="text-uppercase text-secondary text-xs font-weight-bolder mb-3">Informasi Dasar
                                </h6>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">No PRA PR <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="fas fa-hashtag"></i></span>
                                            <input type="text" name="no_prapr"
                                                class="form-control fw-bold text-dark px-2" value="{{ $header->no_prapr }}"
                                                readonly>
                                        </div>
                                        {{-- Tambahkan keterangan di bawah input --}}
                                        <small class="text-muted fst-italic mt-1 d-block" style="font-size: 11px;">
                                            <i class="fas fa-info-circle me-1"></i> Nomor di-generate secara otomatis
                                        </small>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Departemen Peminta <span
                                                class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="fas fa-building"></i></span>
                                            {{-- Asumsi relasi departemen sudah diload --}}
                                            <input type="text" class="form-control px-2" name="nama_departemen"
                                                value="{{ $header->departemen->nama_departemen ?? 'Departemen User' }}"
                                                readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Tanggal Pengajuan <span
                                                class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                            <input type="date" name="tanggal_pengajuan" class="form-control px-2"
                                                value="{{ old('tanggal_pengajuan', $header->tanggal_pengajuan) }}"
                                                {{ $isHead || $isPpic ? 'readonly' : '' }} required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- SECTION 2: DETAIL ITEMS --}}
                            <div class="mb-4">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="text-uppercase text-secondary text-xs font-weight-bolder mb-0">Rincian Barang
                                        & Material</h6>
                                    @if (!$isHead && !$isPpic)
                                        <button type="button" id="add-item"
                                            class="btn btn-icon btn-3 btn-primary btn-sm mb-0">
                                            <span class="btn-inner--icon"><i class="fas fa-plus"></i></span>
                                            <span class="btn-inner--text">Tambah Item</span>
                                        </button>
                                    @endif
                                </div>

                                <div id="items-container">
                                    {{-- LOOP ITEM YANG SUDAH ADA --}}
                                    @foreach ($details as $index => $detail)
                                        @php
                                            $hasFocusMode = $headFocusMode || $ppicFocusMode;
                                            $isFocusedItem = !$hasFocusMode || (int) $detail->id === $focusedDetailId;

                                            // Item dianggap "sudah diposting" untuk SPV jika statusnya bukan draft/entry/-/kosong
                                            $statusNormalized = strtolower(trim($detail->status ?? ''));
                                            $isDraftLike = in_array($statusNormalized, ['', '-', 'draft', 'entry']);
                                            $isItemPostedForSpv = !$isDraftLike;
                                            $isHeadRejectedForRevision =
                                                $statusNormalized === 'reject' &&
                                                !empty($detail->appr_head_by) &&
                                                empty($detail->appr_ppic_by);
                                            $lockForSpv = $isSpv && $isItemPostedForSpv && !$isHeadRejectedForRevision;
                                            $lockForPpic =
                                                $isPpic && !in_array($statusNormalized, ['pending ppic', 'parsial']);
                                        @endphp
                                        <div id="item-row-{{ $detail->id }}"
                                            class="item-row card border shadow-xs mb-3 {{ $hasFocusMode && !$isFocusedItem ? 'opacity-50' : '' }} {{ $hasFocusMode && $isFocusedItem ? 'border-primary' : '' }} {{ $lockForPpic ? 'opacity-50 bg-light' : '' }}">
                                            <div class="card-body p-3">
                                                {{-- Hidden ID untuk Update --}}
                                                <input type="hidden" name="items[{{ $index }}][id]"
                                                    value="{{ $detail->id }}">

                                                <div class="row g-3 align-items-start">
                                                    {{-- Kolom Kiri: Input Utama --}}
                                                    <div class="col-lg-11">
                                                        <div class="row g-3">
                                                            <div class="col-md-2">
                                                                <label
                                                                    class="form-label text-xs font-weight-bold mb-1">Jenis
                                                                    Referensi <span class="text-danger">*</span></label>
                                                                <select name="items[{{ $index }}][jenis_referensi]"
                                                                    class="form-control form-select jenis-referensi-select"
                                                                    {{ $isHead || $lockForSpv || ($headFocusMode && !$isFocusedItem) || $lockForPpic ? 'disabled' : '' }}>
                                                                    <option value="order"
                                                                        {{ ($detail->jenis_referensi ?? 'order') === 'order' ? 'selected' : '' }}>
                                                                        Order</option>
                                                                    <option value="aset"
                                                                        {{ ($detail->jenis_referensi ?? '') === 'aset' ? 'selected' : '' }}>
                                                                        Aset</option>
                                                                </select>
                                                                @if ($isHead || $lockForSpv || ($headFocusMode && !$isFocusedItem) || $lockForPpic)
                                                                    <input type="hidden" name="items[{{ $index }}][jenis_referensi]"
                                                                        value="{{ $detail->jenis_referensi ?? 'order' }}">
                                                                @endif
                                                            </div>
                                                            <div class="col-md-3 ref-no-order"
                                                                style="{{ ($detail->jenis_referensi ?? 'order') === 'aset' ? 'display:none;' : '' }}">
                                                                <label class="form-label text-xs font-weight-bold mb-1">No
                                                                    Order</label>
                                                                <input type="text"
                                                                    name="items[{{ $index }}][no_order]"
                                                                    class="form-control input-no-order"
                                                                    value="{{ $detail->no_order }}"
                                                                    {{ $isHead || $lockForSpv || ($headFocusMode && !$isFocusedItem) || $lockForPpic ? 'readonly' : '' }}>
                                                            </div>
                                                            <div class="col-md-3 ref-no-aset"
                                                                style="{{ ($detail->jenis_referensi ?? 'order') !== 'aset' ? 'display:none;' : '' }}">
                                                                <label class="form-label text-xs font-weight-bold mb-1">No
                                                                    Aset</label>
                                                                <input type="text"
                                                                    name="items[{{ $index }}][no_aset]"
                                                                    class="form-control" value="{{ $detail->no_aset }}"
                                                                    {{ $isHead || $lockForSpv || ($headFocusMode && !$isFocusedItem) || $lockForPpic ? 'readonly' : '' }}>
                                                            </div>
                                                            <div class="col-md-7">
                                                                <label
                                                                    class="form-label text-xs font-weight-bold mb-1">Deskripsi
                                                                </label>
                                                                <input type="text"
                                                                    name="items[{{ $index }}][deskripsi]"
                                                                    class="form-control input-deskripsi"
                                                                    value="{{ $detail->deskripsi }}"
                                                                    placeholder="Warna, Ukuran, Merk, dll (Opsional)"
                                                                    {{ $isHead || $lockForSpv || ($headFocusMode && !$isFocusedItem) || $lockForPpic ? 'readonly' : '' }}>
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label
                                                                    class="form-label text-xs font-weight-bold mb-1">Nama
                                                                    Barang <span class="text-danger">*</span></label>
                                                                <input type="text"
                                                                    name="items[{{ $index }}][nama_barang]"
                                                                    class="form-control"
                                                                    value="{{ $detail->nama_barang }}"
                                                                    placeholder="Contoh: Laptop Dell Latitude"
                                                                    {{ $isHead || $lockForSpv || ($headFocusMode && !$isFocusedItem) || $lockForPpic ? 'readonly' : '' }}
                                                                    required>
                                                            </div>
                                                            <div class="col-md-2 col-6">
                                                                <label class="form-label text-xs font-weight-bold mb-1">Qty
                                                                    <span class="text-danger">*</span></label>
                                                                <input type="number"
                                                                    name="items[{{ $index }}][qty]"
                                                                    class="form-control" value="{{ $detail->qty }}"
                                                                    min="1"
                                                                    {{ $isHead || $lockForSpv || ($headFocusMode && !$isFocusedItem) || $lockForPpic ? 'readonly' : '' }}
                                                                    required>
                                                            </div>
                                                            <div class="col-md-2 col-6">
                                                                <label
                                                                    class="form-label text-xs font-weight-bold mb-1">Satuan
                                                                    <span class="text-danger">*</span></label>
                                                                <select name="items[{{ $index }}][id_satuan]"
                                                                    class="form-control form-select"
                                                                    {{ $isHead || $lockForSpv || ($headFocusMode && !$isFocusedItem) || $lockForPpic ? 'disabled' : '' }}
                                                                    required>
                                                                    <option value="" disabled>Pilih Satuan</option>
                                                                    @foreach ($satuans as $satuan)
                                                                        <option value="{{ $satuan->id }}"
                                                                            {{ $detail->id_satuan == $satuan->id ? 'selected' : '' }}>
                                                                            {{ $satuan->nama }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                                @if ($isHead || $lockForSpv || ($headFocusMode && !$isFocusedItem) || $lockForPpic)
                                                                    <input type="hidden"
                                                                        name="items[{{ $index }}][id_satuan]"
                                                                        value="{{ $detail->id_satuan }}">
                                                                @endif
                                                            </div>
                                                            <div class="col-md-4">
                                                                <label class="form-label text-xs font-weight-bold mb-1">Tgl
                                                                    Dibutuhkan <span class="text-danger">*</span></label>
                                                                <input type="date"
                                                                    name="items[{{ $index }}][tanggal_dibutuhkan]"
                                                                    class="form-control"
                                                                    value="{{ $detail->tanggal_dibutuhkan }}"
                                                                    {{ $isHead || $lockForSpv || ($headFocusMode && !$isFocusedItem) || $lockForPpic ? 'readonly' : '' }}
                                                                    required>
                                                            </div>

                                                            {{-- Baris Kedua --}}
                                                            <div class="col-md-12">
                                                                <label
                                                                    class="form-label text-xs font-weight-bold mb-1">Lampiran
                                                                    File <span
                                                                        class="text-muted text-xxs fw-normal">(Opsional,
                                                                        Maks 3 MB. Format: JPG, PNG, PDF, DOC/X,
                                                                        XLS/X)</span></label>
                                                                <input type="file"
                                                                    name="items[{{ $index }}][lampiran][]"
                                                                    class="form-control mb-1" multiple
                                                                    {{ $lockForSpv || ($headFocusMode && !$isFocusedItem) || $lockForPpic ? 'disabled' : '' }}
                                                                    accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.xls,.xlsx">

                                                                {{-- Tampilkan Lampiran Lama --}}
                                                                @php
                                                                    $files = DB::table('trs_pr_lampiran')
                                                                        ->where('id_pr_detail', $detail->id)
                                                                        ->where('isactive', '1')
                                                                        ->get();
                                                                @endphp
                                                                @if ($files->count() > 0)
                                                                    <div class="d-flex flex-wrap gap-2 mt-2">
                                                                        @foreach ($files as $f)
                                                                            <div
                                                                                class="badge bg-gray-100 text-dark border d-flex align-items-center">
                                                                                <i
                                                                                    class="fas fa-paperclip me-1 text-secondary"></i>
                                                                                <a href="{{ url($f->path) }}"
                                                                                    target="_blank"
                                                                                    class="text-dark me-2">{{ Str::limit($f->nama_file, 15) }}</a>
                                                                                @if (!$isHead && !($hasFocusMode && !$isFocusedItem) && !$lockForSpv)
                                                                                    {{-- Checkbox Hapus File --}}
                                                                                    <div
                                                                                        class="form-check form-check-inline m-0 p-0 ms-1">
                                                                                        <input
                                                                                            class="form-check-input d-none"
                                                                                            type="checkbox"
                                                                                            name="delete_files[]"
                                                                                            value="{{ $f->id }}"
                                                                                            id="delFile{{ $f->id }}">
                                                                                        <label
                                                                                            class="form-check-label cursor-pointer text-danger mb-0 delete-file-trigger"
                                                                                            for="delFile{{ $f->id }}">
                                                                                            <i class="fas fa-times"></i>
                                                                                        </label>
                                                                                    </div>
                                                                                @endif
                                                                            </div>
                                                                        @endforeach
                                                                    </div>
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>

                                                    {{-- Kolom Kanan: Tombol Hapus Baris --}}
                                                    @if (!$isHead && !$isPpic && !$lockForSpv)
                                                        <div class="col-lg-1 text-end d-flex flex-column align-items-center justify-content-center h-100 pt-md-4 gap-2">
                                                            <button type="button"
                                                                class="btn btn-link text-primary text-gradient px-3 mb-0 duplicate-ref-item"
                                                                title="Duplikasi Referensi (No Order & Deskripsi Saja)">
                                                                <i class="fas fa-copy fa-lg"></i>
                                                            </button>
                                                            {{-- Input hidden untuk menandai item yg dihapus --}}
                                                            <input type="hidden"
                                                                name="items[{{ $index }}][is_deleted]"
                                                                class="is-deleted-input" value="0">

                                                            <button type="button"
                                                                class="btn btn-link text-danger text-gradient px-3 mb-0 remove-item-existing"
                                                                title="Hapus Baris Ini">
                                                                <i class="far fa-trash-alt fa-lg"></i>
                                                            </button>
                                                        </div>
                                                    @else
                                                        <input type="hidden"
                                                            name="items[{{ $index }}][is_deleted]"
                                                            class="is-deleted-input" value="0">
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>


                            </div>

                            <hr class="horizontal dark my-4">

                            {{-- SECTION 3: ACTION BUTTONS --}}
                            <div class="d-flex justify-content-end align-items-center gap-2">
                                <button type="submit" name="submit_type" value="draft"
                                    class="btn btn-outline-warning mb-0" id="btn-simpan-draft">
                                    <i class="fas fa-save me-1"></i> Simpan Perubahan
                                </button>
                                @if (!$isHead && !$isPpic)
                                    <button type="submit" class="btn bg-gradient-primary mb-0" id="btn-posting-now">
                                        <i class="fas fa-paper-plane me-1"></i> Posting Sekarang
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('js')
    <!-- SweetAlert2 -->
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script>
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: "{{ session('success') }}",
                timer: 3000,
                showConfirmButton: false
            });
        @endif

        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: "{{ session('error') }}",
                confirmButtonColor: '#dc3545'
            });
        @endif

        // Set index awal berdasarkan jumlah item yg sudah ada
        let itemIndex = {{ count($details) }};

        @if ($headFocusMode || $ppicFocusMode)
            document.addEventListener('DOMContentLoaded', function() {
                const focusedRow = document.getElementById('item-row-{{ $focusedDetailId }}');
                if (focusedRow) {
                    focusedRow.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                }
            });
        @endif

        $(document).ready(function() {
            // Toggle tampilan No Order / No Aset berdasarkan Jenis Referensi
            function toggleReferensiFields(selectEl) {
                const row = $(selectEl).closest('.item-row');
                const val = $(selectEl).val();
                if (val === 'aset') {
                    row.find('.ref-no-order').hide().find('input').val('');
                    row.find('.ref-no-aset').show();
                } else {
                    row.find('.ref-no-aset').hide().find('input').val('');
                    row.find('.ref-no-order').show();
                }
            }

            // Delegated event untuk semua select jenis referensi (termasuk item dinamis)
            $(document).on('change', '.jenis-referensi-select', function() {
                toggleReferensiFields(this);
            });

            // Pemicu: Aktif ketika user selesai mengetik di kolom No Order dan berpindah kolom (event 'change')
            $(document).on('change', '.input-no-order', function() {
                let inputField = $(this);
                let noOrder = inputField.val().trim();

                // Cari kolom deskripsi yang berada SEJAJAR (di dalam satu blok row) dengan input no_order ini
                let deskripsiField = inputField.closest('.row').find('.input-deskripsi');

                if (noOrder !== '') {
                    // Tampilkan pesan loading visual untuk UX
                    deskripsiField.val('Mencari data ke SAP...');

                    $.ajax({
                        url: '{{ route('ajax.sap.order') }}',
                        type: 'GET',
                        data: {
                            no_order: noOrder
                        },
                        success: function(response) {
                            if (response.status === 'success' && response.data) {
                                let deskripsiText = "";

                                if (response.data.ET_ZVNOORDER && Array.isArray(response.data
                                        .ET_ZVNOORDER) && response.data.ET_ZVNOORDER.length >
                                    0) {
                                    deskripsiText = response.data.ET_ZVNOORDER[0]
                                        .KTEXT; // Struktur spesifik SAP
                                } else if (Array.isArray(response.data) && response.data
                                    .length > 0) {
                                    deskripsiText = response.data[0]
                                        .KTEXT; // Jika bentuknya Array
                                } else if (response.data.KTEXT) {
                                    deskripsiText = response.data
                                        .KTEXT; // Jika bentuknya Object langsung
                                }

                                // Masukkan data ke kolom
                                if (deskripsiText) {
                                    deskripsiField.val(deskripsiText);
                                } else {
                                    deskripsiField.val(
                                        '');
                                }
                            } else {
                                deskripsiField.val('Format data SAP tidak sesuai');
                            }
                        },
                        error: function(xhr) {
                            console.error("AJAX Error:", xhr);
                            deskripsiField.val('Error: Gagal terhubung ke server');
                        }
                    });
                } else {
                    // Jika No Order dihapus sampai kosong, kosongkan juga deskripsinya
                    deskripsiField.val('');
                }
            });
        });

        // Fungsi Tambah Item Baru (Sama seperti Create)
        $('#add-item').click(function() {
            const newItem = `
            <div class="item-row card border shadow-xs mb-3 slide-in-right new-item">
                <div class="card-body p-3">
                    <div class="row g-3 align-items-start">
                        <div class="col-lg-11">
                            <div class="row g-3">
                                <div class="col-md-2">
                                    <label class="form-label text-xs font-weight-bold mb-1">Jenis Referensi <span class="text-danger">*</span></label>
                                    <select name="items[${itemIndex}][jenis_referensi]" class="form-control form-select jenis-referensi-select" required>
                                        <option value="order" selected>Order</option>
                                        <option value="aset">Aset</option>
                                    </select>
                                </div>
                                <div class="col-md-3 ref-no-order">
                                    <label class="form-label text-xs font-weight-bold mb-1">No Order</label>
                                    <input type="text" name="items[${itemIndex}][no_order]" class="form-control input-no-order" placeholder="Contoh: ORD-001">
                                </div>
                                <div class="col-md-3 ref-no-aset" style="display:none;">
                                    <label class="form-label text-xs font-weight-bold mb-1">No Aset</label>
                                    <input type="text" name="items[${itemIndex}][no_aset]" class="form-control" placeholder="Contoh: AST-099">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label text-xs font-weight-bold mb-1">Deskripsi</label>
                                    <input type="text" name="items[${itemIndex}][deskripsi]" class="form-control input-deskripsi" placeholder="deskripsi tambahan (Opsional)">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label text-xs font-weight-bold mb-1">Nama Barang <span class="text-danger">*</span></label>
                                    <input type="text" name="items[${itemIndex}][nama_barang]" class="form-control" placeholder="Contoh: Barang X" required>
                                </div>
                                <div class="col-md-2 col-6">
                                    <label class="form-label text-xs font-weight-bold mb-1">Qty <span class="text-danger">*</span></label>
                                    <input type="number" name="items[${itemIndex}][qty]" class="form-control" min="1" placeholder="0" required>
                                </div>
                                <div class="col-md-2 col-6">
                                    <label class="form-label text-xs font-weight-bold mb-1">Satuan <span class="text-danger">*</span></label>
                                    <select name="items[${itemIndex}][id_satuan]" class="form-control form-select" required>
                                        <option value="" disabled selected>Pilih Satuan</option>
                                        @foreach ($satuans as $satuan)
                                            <option value="{{ $satuan->id }}">{{ $satuan->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label text-xs font-weight-bold mb-1">Tgl Dibutuhkan <span class="text-danger">*</span></label>
                                    <input type="date" name="items[${itemIndex}][tanggal_dibutuhkan]" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label text-xs font-weight-bold mb-1">Lampiran File <span class="text-muted text-xxs fw-normal">(Opsional, Maks 3 MB. Format: JPG, PNG, PDF, DOC/X, XLS/X)</span></label>
                                    <input type="file" name="items[${itemIndex}][lampiran][]" class="form-control" multiple accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.xls,.xlsx">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-1 text-end d-flex flex-column align-items-center justify-content-center h-100 pt-md-4 gap-2">
                            <button type="button" class="btn btn-link text-primary text-gradient px-3 mb-0 duplicate-ref-item" title="Duplikasi Referensi (No Order & Deskripsi Saja)">
                                <i class="fas fa-copy fa-lg"></i>
                            </button>
                            <button type="button" class="btn btn-link text-danger text-gradient px-3 mb-0 remove-item-new" title="Hapus Baris Ini">
                                <i class="far fa-trash-alt fa-lg"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>`;

            $('#items-container').append(newItem);
            itemIndex++;
        });

        // Fungsi Duplikasi Referensi Item (No Order & Deskripsi Saja)
        $(document).on('click', '.duplicate-ref-item', function() {
            const currentRow = $(this).closest('.item-row');

            // Ambil nilai dari baris saat ini
            const jenisRef = currentRow.find('.jenis-referensi-select').val();
            const noOrder = currentRow.find('.input-no-order').val();
            const noAset = currentRow.find('input[name$="[no_aset]"]').val();
            const deskripsi = currentRow.find('.input-deskripsi').val();

            // Tambahkan baris kosong baru
            $('#add-item').click();

            // Pilih baris yang baru saja ditambahkan (baris terakhir)
            const newRow = $('.item-row').last();

            // Isi nilai-nilai ke baris baru
            newRow.find('.jenis-referensi-select').val(jenisRef).trigger('change');
            if (jenisRef === 'order') {
                newRow.find('.input-no-order').val(noOrder);
            } else {
                newRow.find('input[name$="[no_aset]"]').val(noAset);
            }
            newRow.find('.input-deskripsi').val(deskripsi);

            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: 'Referensi (No Order & Deskripsi) diduplikasi',
                showConfirmButton: false,
                timer: 1500
            });
        });

        // Hapus Item BARU (Belum masuk database) - Langsung hapus elemen
        $(document).on('click', '.remove-item-new', function() {
            const row = $(this).closest('.item-row');
            Swal.fire({
                title: 'Hapus item ini?',
                text: 'Item baru akan dihapus dari formulir.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d'
            }).then((result) => {
                if (result.isConfirmed) {
                    row.fadeOut(300, function() {
                        $(this).remove();
                    });
                }
            });
        });

        // Hapus Item EKSISTING (Sudah di database) - Sembunyikan & Set Flag Delete
        $(document).on('click', '.remove-item-existing', function() {
            let row = $(this).closest('.item-row');
            Swal.fire({
                title: 'Hapus item ini?',
                text: 'Item akan ditandai hapus saat disimpan.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d'
            }).then((result) => {
                if (result.isConfirmed) {
                    row.find('.is-deleted-input').val(1);
                    row.fadeOut(300);
                }
            });
        });

        // Hapus Lampiran File via label trigger
        $(document).on('click', '.delete-file-trigger', function(e) {
            e.preventDefault();
            const checkboxId = $(this).attr('for');
            const $badge = $(this).closest('.badge');
            Swal.fire({
                title: 'Hapus file lampiran?',
                text: 'File akan dihapus saat disimpan.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Hapus',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#dc3545',
                cancelButtonColor: '#6c757d'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#' + checkboxId).prop('checked', true);
                    $badge.hide();
                }
            });
        });

        // Konfirmasi SweetAlert untuk tombol Simpan Draft
        $('#btn-simpan-draft').on('click', function(e) {
            e.preventDefault();

            const form = $('#formPrapr');

            if (typeof Swal === 'undefined') {
                const ok = confirm('Simpan perubahan sebagai draft?');
                if (!ok) return;
                form.append('<input type="hidden" name="submit_type" value="draft">');
                form.submit();
                return;
            }

            Swal.fire({
                title: 'Simpan Perubahan?',
                text: 'Data akan disimpan tanpa diajukan.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Simpan',
                cancelButtonText: 'Batal',
                reverseButtons: true,
            }).then((result) => {
                if (!result.isConfirmed) return;

                Swal.fire({
                    title: 'Menyimpan...',
                    text: 'Mohon tunggu sebentar',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                form.append('<input type="hidden" name="submit_type" value="draft">');
                form.submit();
            });
        });

        // Confirm on Posting
        $(document).on('click', '#btn-posting-now', function(e) {
            e.preventDefault();
            const form = $('#formPrapr');
            Swal.fire({
                title: 'Posting permintaan ini?',
                text: 'Data tidak dapat diubah setelah diposting.',
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Ya, Posting',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#198754',
                cancelButtonColor: '#6c757d'
            }).then((result) => {
                if (result.isConfirmed) {
                    form.find('input[name="submit_type"]').remove();
                    form.append('<input type="hidden" name="submit_type" value="post">');
                    form.trigger('submit');
                }
            });
        });
    </script>

    <style>
        .slide-in-right {
            animation: slideIn 0.3s ease-out forwards;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-control {
            border: 1px solid #e2e5e8;
            padding: 0.5rem 0.75rem;
        }

        .form-control:focus {
            border-color: #5e72e4;
            box-shadow: 0 0 0 2px rgba(94, 114, 228, 0.1);
        }

        .input-group-text {
            border: 1px solid #e2e5e8;
            background-color: #f8f9fa;
        }
    </style>
@endpush