@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize edi --}}
                        @if ($authorize->edit == '1')
                            <button class="btn btn-primary mb-0" onclick="submitFormWithLoading(event)">
                                <i class="fas fa-save me-1"></i><span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <form action="{{ route('mstrst.update') }}" method="POST" id="edit-form" enctype="multipart/form-data">
            @csrf

            {{-- Hidden ID Request No untuk update --}}
            <input type="hidden" name="request_no" value="{{ $request_info->request_no }}">

            <div class="row">
                <div class="col-md-12">

                    {{-- 1. HEADER REQUEST (READ ONLY) --}}
                    <div class="card mb-4 border-0 shadow-sm">
                        <div class="card-header pb-0">
                            <h6 class="mb-0 text-uppercase text-sm font-weight-bold">1. Data Request Inquiry (Read Only)
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                {{-- Request No --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Request No</label>
                                        <input type="text" class="form-control bg-gray-100"
                                            value="{{ $request_info->request_no }}" readonly>
                                    </div>
                                </div>

                                {{-- Detail Customer --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Customer Name</label>
                                        <input type="text" class="form-control bg-gray-100"
                                            value="{{ $request_info->customer_name }}" readonly>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Customer Color Code</label>
                                        <input type="text" class="form-control bg-gray-100"
                                            value="{{ $request_info->customer_color_code }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Type</label>
                                        <input type="text" class="form-control bg-gray-100"
                                            value = "{{ $request_info->type }}" readonly>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Product</label>
                                        <input type="text" class="form-control bg-gray-100" id="product"
                                            value = "{{ $request_info->product }}" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- 2. EDIT DATA SAMPLE (GROUP BY SUPPLIER) --}}
                    <div class="card mb-4">
                        <div class="card-header pb-0 d-flex justify-content-between align-items-center">
                            <p class="mb-0 text-uppercase text-sm font-weight-bold">2. Edit Matching Result</p>
                            <button type="button" class="btn btn-sm btn-success mb-0" data-bs-toggle="modal"
                                data-bs-target="#modalAddSupplier">
                                <i class="fas fa-plus me-1"></i> Tambah Ext. Memo
                            </button>
                        </div>
                        <hr class="horizontal dark mt-2">
                        <div class="card-body pt-0" id="suppliers_container">

                            {{-- CEK APAKAH ADA DATA LAMA --}}
                            @if ($samples->isNotEmpty())
                                @php
                                    $groupedSamples = $samples->groupBy('id_supplier');
                                @endphp

                                @foreach ($groupedSamples as $suppId => $listSamples)
                                    @php
                                        $first = $listSamples->first();
                                        $suppName = $first->supplier_to ?? 'Unknown Supplier';
                                        $sendDate = $first->send_date;
                                        $extMemo = $first->ext_memo ?? 'No Ext Memo';
                                        $displayDate = $sendDate ? date('d M Y', strtotime($sendDate)) : '-';
                                    @endphp

                                    {{-- CARD SUPPLIER --}}
                                    <div class="card border mb-3 shadow-none bg-gray-100"
                                        id="supp-card-{{ $suppId }}">
                                        <div class="card-header p-3 pb-2" style="background-color: #e9ecef;">
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div>
                                                    <h6 class="mb-0 text-dark"><i
                                                            class="fas fa-truck me-2"></i>{{ $suppName }}</h6>
                                                    <small class="text-xs text-muted">Sending Date:
                                                        <b>{{ $displayDate }}</b></small>
                                                    <br>
                                                    <span id="ext_memo" class="badge bg-primary mt-1"
                                                        style="font-size:0.7rem;">Ext Memo:
                                                        {{ $extMemo }}</span>
                                                </div>
                                                <div>
                                                    <button type="button" class="btn btn-sm btn-outline-dark mb-0 me-1"
                                                        onclick="openSampleModal('{{ $suppId }}', '{{ $suppName }}', '{{ $sendDate }}','{{ $extMemo }}')">
                                                        <i class="fas fa-plus"></i> Sample
                                                    </button>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="card-body p-3">
                                            <div class="row" id="sample-list-{{ $suppId }}">
                                                @foreach ($listSamples as $row)
                                                    {{-- PENTING: Gunakan timestamp/index unik untuk ID elemen --}}
                                                    @php
                                                        $index = $row->id; // Gunakan ID database sebagai index unik
                                                        $badgeClass = match ($row->status) {
                                                            'accepted' => 'bg-success',
                                                            'rejected' => 'bg-danger',
                                                            'revised' => 'bg-warning text-dark',
                                                            default => 'bg-secondary',
                                                        };
                                                    @endphp

                                                    {{-- CARD SAMPLE PREVIEW (Mirip halaman Add) --}}
                                                    <div class="col-md-4 mb-3" id="card-sample-{{ $index }}">
                                                        <div class="card bg-white border h-100 shadow-sm">
                                                            <div class="card-body p-3">
                                                                <div
                                                                    class="d-flex justify-content-between align-items-start mb-2">

                                                                    {{-- BAGIAN KIRI: Code & Receive Date --}}
                                                                    <div>
                                                                        <h6 class="mb-0 text-sm font-weight-bold txt-code">
                                                                            {{ $row->code }}
                                                                        </h6>
                                                                        <p class="text-xs mb-0 text-muted txt-receive">
                                                                            Received: {{ $row->receive_date ?? '-' }}
                                                                        </p>
                                                                    </div>

                                                                    {{-- BAGIAN KANAN: Badge Kategori --}}
                                                                    <div class="ms-2">
                                                                        <span class="badge bg-gradient-info txt-category"
                                                                            style="font-size: 0.65rem;">
                                                                            {{ $row->category ?? '-' }}
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <div class="border-top pt-2">
                                                                    <div class="d-flex justify-content-between text-xs">
                                                                        <span>Dosage:</span> <span
                                                                            class="font-weight-bold text-dark txt-dosage">{{ $row->dosage }}%</span>
                                                                    </div>
                                                                    <div class="d-flex justify-content-between text-xs">
                                                                        <span>Price:</span> <span
                                                                            class="font-weight-bold text-dark txt-price">
                                                                            {{ $row->currency }}
                                                                            {{ number_format($row->price, 2) }}
                                                                            <span
                                                                                class="text-secondary font-weight-normal">/
                                                                                Kg</span>
                                                                        </span>

                                                                    </div>
                                                                    <div
                                                                        class="d-flex justify-content-between text-xs mt-1 mb-2">
                                                                        <span class="text-primary font-weight-bold">Dosing
                                                                            Price:</span>
                                                                        <span
                                                                            class="text-primary font-weight-bold txt-dosing-price">
                                                                            {{ $row->currency }}
                                                                            {{ number_format($row->dosing_price, 2) }}
                                                                            <span
                                                                                class="text-secondary font-weight-normal">/
                                                                                Kg</span>
                                                                        </span>
                                                                    </div>
                                                                </div>
                                                                <p
                                                                    class="border-top pt-2 text-xs mb-2 text-muted txt-remark">
                                                                    Remark: {{ $row->remark ?? '-' }}</p>

                                                                {{-- HIDDEN INPUTS (Untuk dikirim ke Controller) --}}
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][id]"
                                                                    value="{{ $row->id }}">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][ext_memo]"
                                                                    value="{{ $extMemo }}">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][id_supplier]"
                                                                    value="{{ $row->id_supplier }}">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][category]"
                                                                    value="{{ $row->category }}" class="val-category">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][sending_date]"
                                                                    value="{{ $row->send_date }}">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][code]"
                                                                    value="{{ $row->code }}" class="val-code">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][receive_date]"
                                                                    value="{{ $row->receive_date }}" class="val-receive">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][dosage]"
                                                                    value="{{ $row->dosage }}" class="val-dosage">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][price]"
                                                                    value="{{ $row->price }}" class="val-price">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][currency]"
                                                                    value="{{ $row->currency }}" class="val-currency">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][dosing_price]"
                                                                    value="{{ $row->dosing_price }}">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][status]"
                                                                    value="{{ $row->status }}" class="val-status">
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][remark]"
                                                                    value="{{ $row->remark }}" class="val-remark">

                                                                {{-- Input Delete (Default: 0) --}}
                                                                <input type="hidden"
                                                                    name="items[{{ $index }}][delete]"
                                                                    id="del_val_{{ $index }}" value="0">
                                                            </div>

                                                            {{-- FOOTER BUTTONS --}}
                                                            <div
                                                                class="card-footer p-1 text-center bg-transparent border-top-0 d-flex justify-content-between px-3 flex-wrap gap-1">
                                                                <button type="button"
                                                                    class="btn btn-link text-info text-xs mb-0 px-0"
                                                                    onclick="copySampleModal('{{ $index }}', '{{ addslashes($suppName) }}', '{{ $row->send_date }}')"
                                                                    title="Copy data untuk sample baru">
                                                                    <i class="fas fa-copy me-1"></i> Copy
                                                                </button>
                                                                <button type="button"
                                                                    class="btn btn-link text-warning text-xs mb-0 px-0"
                                                                    onclick="editSampleModal('{{ $index }}', '{{ addslashes($suppName) }}', '{{ $row->send_date }}')">
                                                                    <i class="fas fa-pencil-alt me-1"></i> Edit
                                                                </button>
                                                                <button type="button"
                                                                    class="btn btn-link text-danger text-xs mb-0 px-0"
                                                                    onclick="markAsDeleted('{{ $index }}')">
                                                                    <i class="fas fa-trash-alt me-1"></i> Hapus
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            @else
                                {{-- EMPTY STATE --}}
                                <div class="text-center text-muted fst-italic p-5 border-dashed border-radius-lg"
                                    id="empty_state">
                                    <i class="fas fa-flask fa-3x mb-3 text-secondary"></i><br>
                                    Data Kosong.<br>
                                    Klik tombol <b>"Tambah Supplier"</b> di kanan atas untuk input data.
                                </div>
                            @endif

                        </div>
                    </div>

                </div>
            </div>
        </form>
    </div>

    {{-- LOADING OVERLAY & SCRIPT --}}
    <div id="loading-overlay"
        style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.7); z-index: 9999; flex-direction: column; justify-content: center; align-items: center;">
        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
            <span class="visually-hidden">Loading...</span>
        </div>
        <h6 class="mt-3 text-primary font-weight-bold">Menyimpan Data...</h6>
    </div>

    {{-- DATASET UNTUK JAVASCRIPT --}}
    <div id="all_memos_data" style="display:none;">
        {{ json_encode($list_memos ?? []) }}
    </div>
    <div id="all_suppliers_data" style="display:none;">
        {{ json_encode($list_suppliers ?? []) }}
    </div>
    {{-- Simpan Request No yang sedang diedit agar bisa difilter --}}
    <input type="hidden" id="current_request_no" value="{{ $request_info->request_no }}">

    {{-- ================================================================= --}}
    {{-- MODAL 1: PILIH SUPPLIER & TANGGAL KIRIM --}}
    {{-- ================================================================= --}}
    <div class="modal fade" id="modalAddSupplier" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">Pilih Supplier</h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {{-- 1. PILIH EXTERNAL MEMO --}}
                    <div class="form-group mb-3">
                        <label class="form-control-label font-weight-bold text-primary">Pilih External Memo
                            <span class="text-danger">*</span>
                        </label>
                        <select class="form-select" id="select_memo_modal">
                            <option value="">-- Manual (Tanpa Memo) --</option>
                            {{-- Option akan diisi via Javascript --}}
                        </select>
                    </div>

                    <hr class="my-3">

                    {{-- 2. NAMA SUPPLIER (AUTO FILL) --}}
                    <div class="form-group">
                        <label class="form-control-label">Perusahaan / Supplier</label>
                        {{-- Input Visible --}}
                        <input type="text" class="form-control bg-light" id="temp_supplier_name" readonly
                            placeholder="Otomatis terisi...">
                        {{-- Input Hidden (ID) --}}
                        <input type="hidden" id="temp_supplier_id">
                    </div>

                    {{-- 3. TANGGAL KIRIM (AUTO FILL) --}}
                    <div class="form-group">
                        <label class="form-control-label">Tanggal Kirim (Sesuai Memo)</label>
                        <input type="date" class="form-control bg-light" id="temp_sending_date" readonly>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" onclick="addSupplierSection()">Tambah ke List</button>
                </div>
            </div>
        </div>
    </div>

    {{-- ================================================================= --}}
    {{-- MODAL 2: INPUT SAMPLE MATCHING (POPUP UTAMA) --}}
    {{-- ================================================================= --}}
    <div class="modal fade" id="modalInputSample" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header bg-gradient-primary">
                    <h6 class="modal-title text-white" id="modalSampleTitle">Input Sample Data</h6>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="current_supplier_target">

                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label">Code (Material/Sample)
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" id="modal_code"
                                    placeholder="Contoh: VIOLET 6142.01 MB">
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-group mb-0">
                                <label class="form-control-label small">Category <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="modal_category">
                                    <option value="">- Pilih -</option>
                                    <option value="Spunbond">Spunbond</option>
                                    <option value="Meltblown">Meltblown</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label">Tanggal Terima (Receive Date)</label>
                                <input type="text" class="form-control" id="modal_receive_date_display"
                                    placeholder="dd-mm-yyyy" readonly style="background-color: #e9ecef;">
                                <input type="hidden" id="modal_receive_date">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label">Dosage (%)
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="number" step="0.01" class="form-control" id="modal_dosage"
                                    oninput="calcPrice()">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label">Price
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    <select class="form-select" id="modal_currency"
                                        style="max-width: 85px; background-color: #f8f9fa;">
                                        <option value="USD">USD</option>
                                        <option value="IDR">IDR</option>
                                    </select>
                                    <input type="number" step="0.01" class="form-control" id="modal_price"
                                        oninput="calcPrice()" placeholder="0" value="0">
                                    <span class="input-group-text bg-light text-secondary small">/ kg</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label class="form-control-label">Dosing Price (Auto)
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="number" class="form-control bg-light" id="modal_dosing_price" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="form-control-label">Remark</label>
                                <textarea class="form-control" id="modal_remark" rows="1"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-link text-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary" onclick="saveSampleToCard()">Simpan Sample</button>
                </div>
            </div>
        </div>
    </div>

    {{-- SCRIPT JAVASCRIPT --}}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        let allMemos = [];
        let allSuppliers = [];
        let editingItemIndex = null; // Untuk mode edit sample
        let isFormDirty = false;

        $(document).ready(function() {
            // --- 1. LOAD DATA DARI BLADE ---
            try {
                const rawMemo = document.getElementById('all_memos_data').textContent;
                if (rawMemo.trim()) allMemos = JSON.parse(rawMemo);

                const rawSupp = document.getElementById('all_suppliers_data').textContent;
                if (rawSupp.trim()) allSuppliers = JSON.parse(rawSupp);

                console.log("Data Loaded via Edit Page.", allMemos.length, allSuppliers.length);
            } catch (e) {
                console.error("Gagal parsing data:", e);
            }

            // --- 2. INISIALISASI DROPDOWN MEMO (FILTER BY CURRENT REQUEST NO) ---
            let currentReqNo = $('#current_request_no').val().trim();
            let memoSelectModal = $('#select_memo_modal');

            // Filter memo yang sesuai dengan Request No saat ini
            let filteredMemos = allMemos.filter(m => m.request_no.trim() === currentReqNo);

            if (filteredMemos.length > 0) {
                filteredMemos.forEach(memo => {
                    memoSelectModal.append(
                        `<option value="${memo.memo_no}" 
                                data-supplier="${memo.id_supplier}" 
                                data-date="${memo.date}">
                            ${memo.memo_no}
                        </option>`
                    );
                });
            } else {
                memoSelectModal.append('<option value="" disabled>Tidak ada memo untuk request ini</option>');
            }

            // --- 3. LOGIC SAAT MEMO DIPILIH (AUTO FILL) ---
            $('#select_memo_modal').change(function() {
                let selectedOption = $(this).find('option:selected');
                let memoNo = $(this).val();

                if (memoNo) {
                    let suppId = selectedOption.attr('data-supplier');
                    console.log("Selected Supplier ID:", suppId);
                    let sendDate = selectedOption.attr('data-date');

                    // Cari Nama Supplier
                    let supplierObj = allSuppliers.find(s => s.id == suppId);
                    console.log("Selected Supplier Object:", supplierObj);
                    let supplierName = '- Nama Tidak Ditemukan -';

                    if (supplierObj) {
                        supplierName = supplierObj.to;
                    }

                    // Isi Input
                    $('#temp_supplier_id').val(suppId);
                    $('#temp_supplier_name').val(supplierName);

                    if (sendDate) {
                        $('#temp_sending_date').val(sendDate).prop('readonly', true);
                    }
                } else {
                    // Reset form manual
                    $('#temp_supplier_id').val('');
                    $('#temp_supplier_name').val('');
                    $('#temp_sending_date').val('').prop('readonly', false);
                }
            });
        });

        // --- 4. ADD SUPPLIER SECTION (CARD) ---
        function addSupplierSection() {
            let suppId = $('#temp_supplier_id').val();
            let suppName = $('#temp_supplier_name').val();
            let rawDate = $('#temp_sending_date').val();
            let memoNo = $('#select_memo_modal').val();

            if (!suppId) {
                alert("Data Supplier belum terisi. Silakan pilih Memo atau Supplier!");
                return;
            }

            // Cek Duplikasi di halaman Edit
            if ($(`#supp-card-${suppId}`).length > 0) {
                Swal.fire({
                    icon: 'error',
                    title: 'Gagal Menambahkan',
                    text: 'Supplier ini sudah ada di list!',
                    confirmButtonColor: '#3085d6',
                    confirmButtonText: 'Oke'
                });
                return;
            }

            // Format Tanggal
            let displayDate = '-';
            if (rawDate) {
                const d = new Date(rawDate);
                if (!isNaN(d.getTime())) {
                    displayDate = d.toLocaleDateString('id-ID', {
                        day: '2-digit',
                        month: 'short',
                        year: 'numeric'
                    });
                }
            }

            $('#empty_state').hide();
            $('#modalAddSupplier').modal('hide');

            // Render HTML Card (Sama persis dengan halaman Add)
            let html = `
            <div class="card border mb-3 shadow-none bg-gray-100" id="supp-card-${suppId}">
                <div class="card-header p-3 pb-2" style="background-color: #e9ecef;">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0 text-dark"><i class="fas fa-truck me-2"></i>${suppName}</h6>
                            <small class="text-xs text-muted">Sending Date: <b>${displayDate}</b></small>
                            ${memoNo ? `<br><span class="badge bg-primary mt-1" style="font-size:0.7rem;">Ext Memo: ${memoNo}</span>` : ''}
                        </div>
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-dark mb-0 me-1" 
                                onclick="openSampleModal('${suppId}', '${suppName}', '${rawDate}', '${memoNo}')">
                                <i class="fas fa-plus"></i> Sample
                            </button>
                            <button type="button" class="btn btn-sm btn-outline-danger mb-0" onclick="confirmDelete('#supp-card-${suppId}', 'Hapus seluruh data supplier ini?')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body p-3">
                    <div class="row" id="sample-list-${suppId}"></div>
                </div>
            </div>`;

            $('#suppliers_container').append(html);

            // Reset Modal
            $('#select_memo_modal').val('').trigger('change');
        }

        // --- 5. FUNGSI EDIT & ADD SAMPLE ---

        // Buka Modal Add Baru
        function openSampleModal(suppId, suppName, sendDate, memoNo) {
            editingItemIndex = null; // Reset mode
            $('#current_supplier_target').val(suppId);
            $('#modalSampleTitle').text(`Input Sample Baru - ${suppName}`);
            $('#modalInputSample').attr('data-memo-no', memoNo);

            // Reset Form (default currency USD, price 0; tanggal terima default hari ini, format dd-mm-yyyy, readonly)
            $('#modal_code').val('');
            $('#modal_category').val('');
            const today = new Date();
            const y = today.getFullYear();
            const m = String(today.getMonth() + 1).padStart(2, '0');
            const d = String(today.getDate()).padStart(2, '0');
            const todayYmd = y + '-' + m + '-' + d;
            const todayDmy = d + '-' + m + '-' + y;
            $('#modal_receive_date').val(todayYmd);
            $('#modal_receive_date_display').val(todayDmy);
            $('#modal_dosage').val('');
            $('#modal_price').val('0');
            $('#modal_currency').val('USD');
            $('#modal_dosing_price').val('0');
            $('#modal_remark').val('');

            $('#modalInputSample').attr('data-supp-name', suppName);
            $('#modalInputSample').attr('data-send-date', sendDate);
            $('#modalInputSample').attr('data-memo-no', memoNo);

            $('#modalInputSample').modal('show');
        }

        // Buka Modal Edit Existing
        function editSampleModal(index, suppName, sendDate) {
            editingItemIndex = index; // Set ID yang sedang diedit
            let card = $(`#card-sample-${index}`);

            // Ambil data dari hidden input yang ada
            let code = card.find('.val-code').val();
            let category = card.find('.val-category').val();
            let receive = card.find('.val-receive').val();
            let dosage = card.find('.val-dosage').val();
            let price = card.find('.val-price').val();
            let currency = card.find('.val-currency').val();
            let remark = card.find('.val-remark').val();
            let idSupplier = card.find('input[name*="[id_supplier]"]').val();
            let memoNo = card.find('input[name*="[ext_memo]"]').val();

            $('#current_supplier_target').val(idSupplier);
            $('#modalSampleTitle').text(`Edit Sample - ${suppName}`);


            $('#modal_code').val(code);
            $('#modal_category').val(category);
            $('#modal_receive_date').val(receive);
            $('#modal_receive_date_display').val(formatReceiveDateDisplay(receive));
            $('#modal_dosage').val(dosage);
            $('#modal_price').val(price);
            $('#modal_currency').val(currency);
            $('#modal_remark').val(remark);

            calcPrice(); // Hitung ulang harga

            $('#modalInputSample').attr('data-supp-name', suppName);
            $('#modalInputSample').attr('data-send-date', sendDate);
            $('#modalInputSample').attr('data-memo-no', memoNo);


            $('#modalInputSample').modal('show');
        }

        function copySampleModal(index, suppName, sendDate) {
            editingItemIndex = null;
            let card = $(`#card-sample-${index}`);
            let category = card.find('.val-category').val();
            let receive = card.find('.val-receive').val();
            let dosage = card.find('.val-dosage').val();
            let price = card.find('.val-price').val();
            let currency = card.find('.val-currency').val();
            let dosingPrice = card.find('.val-dosing-price').val();
            let remark = card.find('.val-remark').val();
            let idSupplier = card.find('input[name*="[id_supplier]"]').val();
            let memoNo = card.find('input[name*="[ext_memo]"]').val();

            $('#current_supplier_target').val(idSupplier);
            $('#modalSampleTitle').text('Input Sample (Copy) - ubah Code sesuai kebutuhan');

            let code = card.find('.val-code').val();
            $('#modal_code').val(code || '').focus();
            $('#modal_category').val(category || '');
            $('#modal_receive_date').val(receive || '');
            $('#modal_receive_date_display').val(formatReceiveDateDisplay(receive));
            $('#modal_dosage').val(dosage || '');
            $('#modal_price').val(price || '0');
            $('#modal_currency').val(currency || 'USD');
            $('#modal_dosing_price').val(dosingPrice || '0');
            $('#modal_remark').val(remark || '');

            $('#modalInputSample').attr('data-supp-name', suppName);
            $('#modalInputSample').attr('data-send-date', sendDate);
            $('#modalInputSample').attr('data-memo-no', memoNo);

            $('#modalInputSample').modal('show');
        }

        // Format Y-m-d ke dd-mm-yyyy (seperti external memo)
        function formatReceiveDateDisplay(ymd) {
            if (!ymd) return '';
            const parts = ymd.split('-');
            if (parts.length !== 3) return ymd;
            return parts[2].padStart(2, '0') + '-' + parts[1].padStart(2, '0') + '-' + parts[0];
        }

        // --- 6. SIMPAN DATA (ADD / UPDATE) KE CARD ---
        function saveSampleToCard() {
            // 1. Ambil Data
            let suppId = $('#current_supplier_target').val();
            let sendDate = $('#modalInputSample').attr('data-send-date');
            let memoNo = $('#modalInputSample').attr('data-memo-no');
            let suppName = $('#modalInputSample').attr('data-supp-name');

            console.log("Memo No yang akan disimpan:", memoNo);

            let code = $('#modal_code').val();
            let category = $('#modal_category').val();
            let rcvDate = $('#modal_receive_date').val();
            let dose = $('#modal_dosage').val();
            let price = $('#modal_price').val();

            // AMBIL CURRENCY (PENTING!)
            let currency = $('#modal_currency').val();

            let dosingPrice = $('#modal_dosing_price').val();
            let remark = $('#modal_remark').val();
            let status = 'entry';

            if (!code || !dose || !price) {
                alert('Harap lengkapi Code, Dosage, dan Price!');
                return;
            }

            if (sendDate && rcvDate) {
                // Konversi string tanggal ke object Date untuk perbandingan
                let dSend = new Date(sendDate);
                let dRcv = new Date(rcvDate);

                // Set jam ke 00:00:00 agar perbandingan murni tanggal
                dSend.setHours(0, 0, 0, 0);
                dRcv.setHours(0, 0, 0, 0);

                if (dRcv < dSend) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Tanggal Tidak Valid',
                        text: 'Tanggal Terima (Receive Date) tidak boleh lebih awal dari Tanggal Kirim (' +
                            sendDate + ')!',
                    });
                    return; // Stop proses, jangan simpan
                }
            }

            isFormDirty = true;

            // 2. Format Angka (Locale)
            let locale = currency === 'IDR' ? 'id-ID' : 'en-US';
            let fmtPrice = parseFloat(price).toLocaleString(locale, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });
            let fmtDosing = parseFloat(dosingPrice).toLocaleString(locale, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            });

            // ============================
            // SKENARIO 1: UPDATE (EDITING)
            // ============================
            if (editingItemIndex !== null) {
                let card = $(`#card-sample-${editingItemIndex}`);

                // A. Update Visual (Pakai class selector 'txt-...' biar akurat)
                card.find('.txt-code').text(code);
                card.find('.txt-category').text(category);
                card.find('.txt-receive').text(`Received: ${rcvDate || '-'}`);
                card.find('.txt-remark').text(remark || '-');
                card.find('.txt-dosage').text(dose + '%');

                let locale = currency === 'IDR' ? 'id-ID' : 'en-US';
                let fmtPrice = parseFloat(price).toLocaleString(locale, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
                let fmtDosing = parseFloat(dosingPrice).toLocaleString(locale, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });

                // UPDATE PRICE (Pakai HTML agar span '/ Kg' dan Currency masuk)
                card.find('.txt-price').html(
                    `${currency} ${fmtPrice} <span class="text-secondary font-weight-normal">/ Kg</span>`
                );

                // UPDATE DOSING PRICE
                card.find('.txt-dosing-price').html(
                    `${currency} ${fmtDosing} <span class="text-secondary font-weight-normal">/ Kg</span>`);

                // B. Update Hidden Inputs
                card.find('.val-code').val(code);
                card.find('.val-category').val(category);
                card.find('.val-receive').val(rcvDate);
                card.find('.val-dosage').val(dose);
                card.find('.val-price').val(price);
                card.find('.val-currency').val(currency); // Update value hidden
                card.find('.val-dosing-price').val(dosingPrice);
                card.find('.val-remark').val(remark);

                // Selesai Edit
                editingItemIndex = null;
                $('#modalInputSample').modal('hide');
                return;
            }

            // ============================
            // SKENARIO 2: INSERT BARU
            // ============================
            const index = 'new_' + Date.now();
            let badgeClass = 'bg-secondary';

            // HTML Structure (Disamakan dengan PHP Blade: col-md-6, Badge di Header, dll)
            let sampleHtml = `
            <div class="col-md-4 mb-3" id="card-sample-${index}">
                <div class="card bg-white border h-100 shadow-sm">
                    <div class="card-body p-3"> {{-- PEMBUKA CARD BODY --}}
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <div>
                                <h6 class="mb-0 text-sm font-weight-bold txt-code">
                                    ${code}
                                </h6>
                                <p class="text-xs mb-0 text-muted txt-receive">
                                    Received: ${rcvDate || '-'}
                                </p>
                            </div>
                            <div class="ms-2">
                                <span class="badge bg-gradient-info txt-category" style="font-size: 0.65rem;">
                                    ${category}
                                </span>
                            </div>
                        </div>
                        
                        <div class="border-top pt-2">
                            <div class="d-flex justify-content-between text-xs">
                                <span>Dosage:</span> <span
                                class="font-weight-bold text-dark txt-dosage">${dose}%</span>
                                </div>
                            <div class="d-flex justify-content-between text-xs">
                                <span>Price:</span> <span
                                class="font-weight-bold text-dark txt-price">
                                ${currency} ${fmtPrice} 
                                <span class="text-secondary font-weight-normal">/ Kg</span>
                                </span>
                            </div>
                            <div class="d-flex justify-content-between text-xs mt-1 mb-2">
                                <span class="text-primary font-weight-bold">Dosing
                                    Price:</span>
                                <span class="text-primary font-weight-bold txt-dosing-price">
                                ${currency} ${fmtDosing} 
                                <span class="text-secondary font-weight-normal">/ Kg</span>
                                </span>
                            </div>
                        </div>
                        <p class="border-top pt-2 text-xs mb-2 text-muted txt-remark">Remark: ${remark || '-'}</p>

                        {{-- 4. TOMBOL AKSI --}}
                        <div class="d-flex justify-content-between align-items-center border-top pt-2 flex-wrap gap-1">
                            <button type="button" class="btn btn-link text-info text-xs mb-0 px-0" 
                                onclick="copySampleModal('${index}', '${suppName.replace(/'/g, "\\'")}', '${sendDate}')" title="Copy data untuk sample baru">
                                <i class="fas fa-copy me-1"></i> Copy
                            </button>
                            <button type="button" class="btn btn-link text-warning text-xs mb-0 px-0" 
                                onclick="editSampleModal('${index}', '${suppName}', '${sendDate}')">
                                <i class="fas fa-edit-alt me-1"></i> Edit
                            </button>
                            <button type="button" class="btn btn-link text-danger text-xs mb-0 px-0" 
                                onclick="markAsDeleted('${index}')">
                                <i class="fas fa-trash-alt me-1"></i> Hapus
                            </button>
                        </div>

                        {{-- 5. HIDDEN INPUTS (Tetap di dalam card-body agar rapi) --}}
                        <input type="hidden" name="items[${index}][id]" value="">
                        <input type="hidden" name="items[${index}][id_supplier]" value="${suppId}">
                        <input type="hidden" name="items[${index}][sending_date]" value="${sendDate}">
                        <input type="hidden" name="items[${index}][ext_memo]" value="${memoNo || ''}">
                        <input type="hidden" name="items[${index}][category]" value="${category}" class="val-category">
                        <input type="hidden" name="items[${index}][code]" value="${code}" class="val-code">
                        <input type="hidden" name="items[${index}][receive_date]" value="${rcvDate}" class="val-receive">
                        <input type="hidden" name="items[${index}][dosage]" value="${dose}" class="val-dosage">
                        <input type="hidden" name="items[${index}][price]" value="${price}" class="val-price">
                        <input type="hidden" name="items[${index}][currency]" value="${currency}" class="val-currency">
                        <input type="hidden" name="items[${index}][dosing_price]" value="${dosingPrice}" class="val-dosing-price">
                        <input type="hidden" name="items[${index}][remark]" value="${remark}" class="val-remark">
                        <input type="hidden" name="items[${index}][status]" value="${status}" class="val-status">
                        <input type="hidden" name="items[${index}][delete]" id="del_val_${index}" value="0">

                    </div> 
                </div>
            </div>`;

            $(`#sample-list-${suppId}`).append(sampleHtml);
            $('#modalInputSample').modal('hide');
        }

        // --- FUNGSI PENDUKUNG LAINNYA ---
        function confirmDelete(elementId, message) {
            Swal.fire({
                title: 'Konfirmasi Hapus',
                text: message || "Yakin ingin menghapus seluruh data supplier ini?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus Semua!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    isFormDirty = true;

                    // Hapus elemen supplier dari DOM
                    $(elementId).fadeOut(300, function() {
                        $(this).remove();
                    });

                    Swal.fire(
                        'Terhapus!',
                        'Data supplier berhasil dihapus.',
                        'success'
                    )
                }
            });
        }

        function markAsDeleted(index) {
            Swal.fire({
                title: 'Yakin hapus sample ini?',
                text: "Data yang dihapus tidak bisa dikembalikan!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    isFormDirty = true;
                    // Set value delete jadi 1
                    $(`#del_val_${index}`).val('1');

                    // Sembunyikan visual dengan animasi
                    $(`#card-sample-${index}`).fadeOut(300, function() {
                        // Opsional: Tampilkan notifikasi sukses kecil
                        // Swal.fire('Terhapus!', 'Sample berhasil dihapus.', 'success');
                    });
                }
            });
        }

        function calcPrice() {
            let dose = parseFloat($('#modal_dosage').val()) || 0;
            let price = parseFloat($('#modal_price').val()) || 0;
            let result = price * (dose / 100);
            $('#modal_dosing_price').val(result.toFixed(2));
        }

        function submitFormWithLoading(e) {
            isFormDirty = true;
            e.preventDefault();
            $('#loading-overlay').css('display', 'flex');
            setTimeout(function() {
                document.getElementById('edit-form').submit();
            }, 500);
        }
    </script>

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        $(document).ready(function() {});
    </script>
@endpush