@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 add --}}
                        @if ($authorize->add == '1')
                            {{-- Ganti tombol Simpan yang lama dengan ini --}}
                            <button class="btn btn-primary mb-0" onclick="submitFormWithLoading(event)">
                                <i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">

                {{-- Form Wrapper --}}
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                    enctype="multipart/form-data">
                    @csrf

                    {{-- BAGIAN 1: HEADER (DATA REQUEST INQUIRY) --}}
                    <div class="card mb-4">
                        <div class="card-header pb-0">
                            <div class="d-flex align-items-center">
                                <p class="mb-0 text-uppercase text-sm font-weight-bold">1. Data Request Inquiry</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                {{-- Pilih Request No --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="form-control-label">Request No <span
                                                class="text-danger">*</span></label>

                                        <div class="input-group">
                                            {{-- Input ini hanya menampilkan Nomor Request yang dipilih --}}
                                            <input type="text" class="form-control bg-white" id="display_request_no"
                                                placeholder="-- Klik tombol cari --" readonly style="cursor: pointer;"
                                                onclick="$('#modalRequest').modal('show')">

                                            {{-- Tombol untuk membuka Modal --}}
                                            <button class="btn btn-primary mb-0" type="button" data-bs-toggle="modal"
                                                data-bs-target="#modalRequest">
                                                <i class="fas fa-search"></i> Cari
                                            </button>
                                        </div>

                                        {{-- Input Hidden untuk menyimpan value sebenarnya yang dikirim ke form --}}
                                        <input type="hidden" name="request_no" id="hidden_request_no" required>

                                        {{-- Input Hidden opsional untuk data JSON detail --}}
                                        <input type="hidden" id="hidden_request_json">
                                    </div>
                                </div>
                                {{-- Field Readonly (Auto Fill) --}}
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="form-control-label">Customer Name</label>
                                        <input type="text" class="form-control" id="cust_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" id="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" id="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" id="product" readonly>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- BAGIAN 2: DETAIL (SUPPLIER & MATCHING SAMPLES) --}}
                    <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. Input Hasil Matching (Supplier)</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">
                            {{-- Area ini akan diisi oleh Javascript (Card Supplier) --}}
                            <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>
                                Belum ada External Memo dipilih.<br>
                                Klik tombol <b>"Tambah Ext. Memo"</b> di kanan atas untuk memulai input data.
                            </div>
                        </div>
                    </div>

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

    {{-- Overlay Loading Screen (Hidden by default) --}}
    <div id="loading-overlay"
        style="display:none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.8); z-index: 9999; justify-content: center; align-items: center;">
        <div class="d-flex flex-column 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-2 text-primary font-weight-bold">Menyimpan Data...</h6>
        </div>
    </div>
    {{-- ================================================================= --}}
    {{-- MODAL 1: PILIH EXT MEMO & 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">
                    <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="">-- Pilih External Memo --</option>
                            {{-- Option akan diisi via Javascript saat Request No dipilih --}}
                        </select>
                    </div>
                    <hr class="my-3">
                    <div class="form-group">
                        <label class="form-control-label">Perusahaan / Supplier</label>

                        {{-- Input Visible: Buat nampilin Nama PT biar user seneng --}}
                        <input type="text" class="form-control bg-light" id="temp_supplier_name" readonly
                            placeholder="Otomatis terisi...">

                        {{-- Input Hidden: Buat nyimpen ID Supplier (PENTING BUAT LOGIC) --}}
                        <input type="hidden" id="temp_supplier_id">
                    </div>

                    <div class="form-group">
                        <label class="form-control-label">Tanggal Kirim</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>

    <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>
    <div id="used_memo_requests_data" style="display:none;">
        {{ json_encode($used_memo_requests ?? []) }}
    </div>

    {{-- ================================================================= --}}
    {{-- MODAL 2: INPUT SAMPLE MATCHING (POPUP UTAMA) --}}
    {{-- ================================================================= --}}
    <div class="modal fade" id="modalInputSample" tabindex="-1" role="dialog" aria-hidden="true">
        {{-- Tambahkan modal-dialog-scrollable agar bisa discroll di layar kecil --}}
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" 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">
                    <input type="hidden" id="current_supp_key">
                    <input type="hidden" id="editing_row_id">
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            <div class="form-group mb-0">
                                <label class="form-control-label small">Code (Material/Sample)
                                    <span class="text-danger">*</span>
                                </label>
                                <input type="text" class="form-control" id="modal_code" placeholder="Contoh: RED-001"
                                    oninput="this.value = this.value.toUpperCase()">
                            </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-12 col-md-4">
                            <div class="form-group mb-0">
                                <label class="form-control-label small">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-6 col-md-4">
                            <div class="form-group mb-0">
                                <label class="form-control-label small">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-6 col-md-4">
                            <div class="form-group mb-0">
                                <label class="form-control-label small">Price
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    {{-- Dropdown Currency --}}
                                    <select class="form-select" id="modal_currency"
                                        style="max-width: 80px; 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"
                                        placeholder="0.00" value="0" oninput="calcPrice()">
                                    <span class="input-group-text bg-light text-secondary small">/ kg</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <div class="form-group mb-0">
                                <label class="form-control-label small">Dosing Price (Auto)
                                    <span class="text-danger">*</span>
                                </label>
                                <div class="input-group">
                                    {{-- Menampilkan currency otomatis di sini juga --}}
                                    <span class="input-group-text bg-light text-primary fw-bold"
                                        id="display_currency">USD</span>
                                    <input type="number" class="form-control bg-light fw-bold text-primary"
                                        id="modal_dosing_price" readonly>
                                    <span class="input-group-text bg-light text-secondary small">/ kg</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="form-group mb-0">
                                <label class="form-control-label small">Remark</label>
                                <textarea class="form-control" id="modal_remark" rows="2"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-link text-secondary m-0" data-bs-dismiss="modal">Batal</button>
                    <button type="button" class="btn btn-primary m-0" onclick="saveSampleToCard()">
                        <i class="fas fa-save me-1"></i> Simpan Sample
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Input Request No --}}
    <div class="modal fade" id="modalRequest" tabindex="-1" role="dialog" aria-labelledby="modalRequestLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalRequestLabel">
                        List Request Inquiry
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body table-responsive">
                    <table class="table display" id="tableRequestLookup">
                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                            <tr>
                                <th width="20px">Action</th>
                                <th>Request No</th>
                                <th>Status</th>
                                <th>Customer</th>
                                <th>Color</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if (isset($list_requests))
                                @foreach ($list_requests as $req)
                                    @php
                                        $status = strtolower($req->status1 ?? '');
                                        $displayText = strtoupper($status);
                                        $badgeClass = 'bg-gradient-secondary';
                                        $icon = 'fa-info-circle';
                                        $countReceive = DB::table('match_result')
                                            ->where('request_no', $req->request_no)
                                            ->count();
                                        if ($status == 'progress') {
                                            $displayText = $countReceive . ' ' . ($countReceive <= 1 ? 'sample' : 'samples') . ' (PROGRESS)';
                                            $badgeClass = 'bg-secondary';
                                            $icon = 'fa-spinner fa-spin';
                                        } elseif (in_array($status, ['underreview', 'completed'])) {
                                            $displayText =
                                                $countReceive .
                                                ' ' .
                                                ($countReceive == 1 ? 'sample' : 'samples') .
                                                ' receive';
                                            $badgeClass = 'bg-success';
                                            $icon = 'fa-box-open';
                                        } else {
                                            $badgeClass = match ($status) {
                                                'completed' => 'bg-success',
                                                'underreview' => 'bg-danger',
                                                default => 'bg-warning',
                                            };
                                            $icon = match ($status) {
                                                'completed' => 'fa-check-circle',
                                                'rejected' => 'fa-times-circle',
                                                default => 'fa-info-circle',
                                            };
                                        }
                                    @endphp
                                    <tr>
                                        <td width="20px">
                                            {{-- Tombol Select dengan gaya Badge Primary --}}
                                            <span class="btn badge bg-primary badge-lg btn-select-request"
                                                style="cursor: pointer;" data-no="{{ $req->request_no }}"
                                                data-json="{{ json_encode($req) }}">
                                                <i class="fas fa-check-circle me-1"></i> Select
                                            </span>
                                        </td>
                                        <td class="font-weight-bold">{{ $req->request_no }}</td>
                                        <td>
                                            <span class="badge {{ $badgeClass }} rounded-pill d-inline-flex align-items-center px-2"
                                                style="height: 20px; font-size: 0.65rem; letter-spacing: 0.5px;">
                                                <i class="fas {{ $icon }} me-1"></i>
                                                {{ $displayText }}
                                            </span>
                                        </td>
                                        <td>{{ $req->customer_name }}</td>
                                        <td>{{ $req->customer_color_code }}</td>
                                        <td>{{ $req->date }}</td>
                                    </tr>
                                @endforeach
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    {{-- SCRIPT JAVASCRIPT --}}
    <script>
        let allMemos = [];
        let allSuppliers = [];

        $(document).ready(function() {
            // --- 1. Load Data ---
            let usedMemoRequests = [];
            try {
                const rawData = document.getElementById('all_memos_data').textContent;
                allMemos = JSON.parse(rawData);

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

                const rawUsed = document.getElementById('used_memo_requests_data');
                if (rawUsed && rawUsed.textContent.trim()) usedMemoRequests = JSON.parse(rawUsed.textContent);
            } catch (e) {
                console.error("Gagal parsing data:", e);
            }

            // --- 1b. Refresh dropdown memo sesuai request no (dari external_memo_details)
            function refreshMemoDropdownByRequest(reqNo) {
                let memoSelectModal = $('#select_memo_modal');
                memoSelectModal.empty().append('<option value="">-- Pilih Ext. Memo --</option>');

                let currentReq = (reqNo !== undefined && reqNo !== null) ? String(reqNo).trim() : ($('#hidden_request_no').val() || '').trim();
                if (!currentReq) {
                    memoSelectModal.append('<option value="" disabled>Pilih Request No terlebih dahulu</option>');
                    memoSelectModal.prop('disabled', true);
                    return;
                }

                // Hanya tampilkan memo yang punya request_no ini di external_memo_details
                // dan belum dipakai di match_result
                let filteredMemos = (allMemos || []).filter(m => {
                    let mReq = (m.request_no || '').trim();
                    if (mReq !== currentReq) return false;
                    let key = currentReq + '|' + (m.memo_no || '').trim();
                    return !usedMemoRequests.includes(key);
                });

                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>`
                        );
                    });
                    memoSelectModal.prop('disabled', false);
                } else {
                    let allForReq = (allMemos || []).filter(m => (m.request_no || '').trim() === currentReq);
                    let msg = allForReq.length > 0
                        ? 'Semua external memo untuk request ini sudah ditambahkan di Result.'
                        : 'Tidak ada external memo yang memiliki Request No ini.';
                    memoSelectModal.append(`<option value="" disabled>${msg}</option>`);
                }
            }

            // --- 2. Inisialisasi DataTable untuk Modal Request ---
            var tableRequest = $('#tableRequestLookup').DataTable({
                "pageLength": 5,
                "lengthMenu": [
                    [5, 10, 25, -1],
                    [5, 10, 25, "All"]
                ],
                "language": {
                    "search": "Cari Request:",
                    "zeroRecords": "Tidak ada data request ditemukan"
                }
            });

            // Fix header width saat modal dibuka
            $('#modalRequest').on('shown.bs.modal', function() {
                tableRequest.columns.adjust().draw();
            });

            // Refresh dropdown memo sesuai request no saat modal Tambah Ext. Memo dibuka
            $('#modalAddSupplier').on('shown.bs.modal', function() {
                refreshMemoDropdownByRequest();
            });

            // --- 3. LOGIC SAAT TOMBOL 'SELECT' DI MODAL DIKLIK (AUTO FILL) ---
            $('#tableRequestLookup tbody').on('click', '.btn-select-request', function() {
                // A. Ambil Data
                var reqNo = $(this).data('no');
                var reqJson = $(this).data('json');
                var prevReqNo = $('#hidden_request_no').val();

                // B. Isi Input Utama
                $('#display_request_no').val(reqNo);
                $('#hidden_request_no').val(reqNo);
                $('#hidden_request_json').val(JSON.stringify(reqJson));

                // B1. Reset list supplier/memo saat ganti request - external memo bisa punya 2+ request no,
                //     jadi request 2 harus bisa pilih & add memo yang sama
                if (prevReqNo && String(prevReqNo).trim() !== String(reqNo).trim()) {
                    $('#suppliers_container').children().filter(function() {
                        return this.id && this.id.startsWith('supp-card-');
                    }).remove();
                    $('#empty_state').show();
                }

                // C. AUTO FILL DETAIL (Customer, Product, dll)
                if (reqJson) {
                    $('#cust_name').val(reqJson.customer_name || '');
                    $('#color_code').val(reqJson.customer_color_code || '');
                    $('#type').val(reqJson.type || '');
                    $('#product').val(reqJson.product || '');
                } else {
                    $('#cust_name, #color_code, #type, #product').val('');
                }

                // D. LOAD MEMO BERDASARKAN REQUEST NO (hanya memo yang punya request_no ini)
                refreshMemoDropdownByRequest(reqNo);

                // E. Tutup Modal
                $('#modalRequest').modal('hide');
            });

            // Update tampilan currency saat dropdown berubah
            $('#modal_currency').change(function() {
                $('#display_currency').text($(this).val());
            });

            // --- 4. Logic Saat Memo Dipilih (Auto Fill Supplier) ---
            $('#select_memo_modal').change(function() {
                let selectedOption = $(this).find(':selected');
                let memoNo = $(this).val();

                if (memoNo) {
                    let suppId = selectedOption.attr('data-supplier');
                    let sendDate = selectedOption.attr('data-date');

                    let supplierObj = allSuppliers.find(s => s.id == suppId);
                    let supplierName = supplierObj ? (supplierObj.to) : '- Nama Tidak Ditemukan -';

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

                    if (sendDate) {

                        $('#temp_sending_date').val(sendDate).prop('readonly', true);
                        $('#modal_receive_date').attr('min', sendDate); // Validasi min date
                    }
                } else {
                    // Reset jika pilih manual/kosong
                    $('#temp_supplier_id').val('');
                    $('#temp_supplier_name').val('');
                    $('#temp_sending_date').val('').prop('readonly', false);
                    $('#modal_receive_date').removeAttr('min');
                }
            });
        });

        // --- 5. 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 yang valid.");
                return;
            }

            // suppKey = suppId + memoNo agar block hanya jika memo yang SAMA, bukan supplier yang sama
            // (external memo bisa punya 2+ request no, jadi request 2 tetap bisa add memo yang sama)
            let suppKey = suppId + '_' + String(memoNo).replace(/[^a-zA-Z0-9]/g, '_');
            if ($(`#supp-card-${suppKey}`).length > 0) {
                Swal.fire('Gagal', 'External Memo ini sudah ada di list!', 'error');
                return;
            }

            let displayDate = rawDate ? new Date(rawDate).toLocaleDateString('id-ID', {
                day: '2-digit',
                month: 'short',
                year: 'numeric'
            }) : '-';

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

            let html = `
        <div class="card border mb-3 shadow-none bg-gray-100" id="supp-card-${suppKey}" data-supp-id="${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.replace(/'/g, "\\'")}', '${suppKey}')">
                            <i class="fas fa-plus"></i> Sample
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger mb-0" onclick="confirmDelete('#supp-card-${suppKey}', 'Yakin ingin menghapus 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-${suppKey}"></div>
            </div>
        </div>`;

            $('#suppliers_container').append(html);
            $('#select_memo_modal').val('').trigger('change');
        }

        // --- 6. Modal Functions (Add & Edit) ---
        function openSampleModal(suppId, suppName, sendDate, memoNo, suppKey) {
            if (!suppKey) suppKey = suppId + '_' + String(memoNo || '').replace(/[^a-zA-Z0-9]/g, '_');
            $('#current_supplier_target').val(suppId);
            $('#current_supp_key').val(suppKey);
            $('#modalSampleTitle').text(`Input Sample - ${suppName}`);

            $('#modal_code').val('');
            $('#modal_category').val('');
            // Tanggal terima default hari ini, format dd-mm-yyyy (seperti external memo), readonly
            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').trigger('change');
            $('#modal_dosing_price').val('0');
            $('#modal_remark').val('');
            $('#editing_row_id').val(''); // Reset flag edit

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

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

        function editSample(rowId, suppId) {
            let container = $(`#${rowId}`);
            let listEl = container.closest('[id^="sample-list-"]');
            let suppKey = listEl.length ? listEl.attr('id').replace('sample-list-', '') : (suppId + '_');
            $('#current_supp_key').val(suppKey);

            // Ambil data dari hidden inputs
            let code = container.find("input[name$='[code]']").val();
            let category = container.find("input[name$='[category]']").val();
            let receive_date = container.find("input[name$='[receive_date]']").val();
            let dosage = container.find("input[name$='[dosage]']").val();
            let price = container.find("input[name$='[price]']").val();
            let dosing_price = container.find("input[name$='[dosing_price]']").val();
            let currency = container.find("input[name$='[currency]']").val();
            let remark = container.find("input[name$='[remark]']").val();
            let sendDate = container.find("input[name$='[sending_date]']").val();
            let memoNo = container.find("input[name$='[ext_memo]']").val();

            // Isi form modal
            $('#current_supplier_target').val(suppId);
            $('#modalSampleTitle').text(`Edit Sample`);
            $('#modal_code').val(code);
            $('#modal_category').val(category);
            $('#modal_receive_date').val(receive_date);
            $('#modal_receive_date_display').val(formatReceiveDateDisplay(receive_date));
            $('#modal_dosage').val(dosage);
            $('#modal_price').val(price);
            $('#modal_currency').val(currency || 'USD').trigger('change');
            $('#modal_dosing_price').val(dosing_price);
            $('#modal_remark').val(remark);

            $('#editing_row_id').val(rowId);

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

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

        function copySample(rowId, suppId) {
            let container = $(`#${rowId}`);
            let listEl = container.closest('[id^="sample-list-"]');
            let suppKey = listEl.length ? listEl.attr('id').replace('sample-list-', '') : (suppId + '_');

            let code = container.find("input[name$='[code]']").val();
            let category = container.find("input[name$='[category]']").val();
            let receive_date = container.find("input[name$='[receive_date]']").val();
            let dosage = container.find("input[name$='[dosage]']").val();
            let price = container.find("input[name$='[price]']").val();
            let currency = container.find("input[name$='[currency]']").val();
            let dosing_price = container.find("input[name$='[dosing_price]']").val();
            let remark = container.find("input[name$='[remark]']").val();
            let sendDate = container.find("input[name$='[sending_date]']").val();
            let memoNo = container.find("input[name$='[ext_memo]']").val();

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

            $('#modal_code').val(code || '').focus();
            $('#modal_category').val(category || '');
            $('#modal_receive_date').val(receive_date || '');
            $('#modal_receive_date_display').val(formatReceiveDateDisplay(receive_date));
            $('#modal_dosage').val(dosage || '');
            $('#modal_price').val(price || '0');
            $('#modal_currency').val(currency || 'USD').trigger('change');
            $('#modal_dosing_price').val(dosing_price || '0');
            $('#modal_remark').val(remark || '');
            $('#editing_row_id').val('');

            $('#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];
        }

        // --- 7. Save Sample Logic (Fixed) ---
        function saveSampleToCard() {
            let suppId = $('#current_supplier_target').val();
            let suppKey = $('#current_supp_key').val() || suppId;
            let editRowId = $('#editing_row_id').val();
            let sendDate = $('#modalInputSample').attr('data-send-date');
            let memoNo = $('#modalInputSample').attr('data-memo-no');

            console.log("Memo No saat Save:", 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();
            let currency = $('#modal_currency').val();
            let dosingPrice = $('#modal_dosing_price').val();
            let remark = $('#modal_remark').val();
            let status = 'entry';

            if (code == '' || dose == '' || price == '' || category == '') {
                Swal.fire('Perhatian', 'Harap lengkapi Code, Category, Dosage, dan Price!', 'warning');
                return;
            }

            if (sendDate && rcvDate) {
                let dSend = new Date(sendDate);
                let dRcv = new Date(rcvDate);
                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;
                }
            }

            // --- Formatting Angka ---
            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
            });

            // Hapus baris lama jika mode edit
            if (editRowId) {
                $(`#${editRowId}`).remove();
            }

            const index = Date.now();
            const rowId = `sample-row-${index}`;
            let badgeClass = 'bg-secondary';

            // Render HTML Card Sample
            let sampleHtml = `
            <div class="col-md-4 mb-3" id="${rowId}">
                <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">
                            <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">${dose}%</span>
                            </div>
                            <div class="d-flex justify-content-between text-xs">
                                <span>Price/Kg:</span> 
                                <span class="font-weight-bold text-dark">${currency} ${fmtPrice}</span>
                            </div>
                            <div class="d-flex justify-content-between text-xs mt-1">
                                <span class="text-primary font-weight-bold">Dosing Price:</span> 
                                <span class="text-primary font-weight-bold">${currency} ${fmtDosing}</span>
                            </div>
                            <p class="text-xs pt-2 text-muted">Remark: ${remark}</p>
                        </div>

                        {{-- Hidden Inputs --}}
                        <input type="hidden" name="items[${suppId}][${index}][id_supplier]" value="${suppId}">
                        <input type="hidden" name="items[${suppId}][${index}][sending_date]" value="${sendDate}">
                        <input type="hidden" name="items[${suppId}][${index}][ext_memo]" value="${memoNo || ''}">
                        <input type="hidden" name="items[${suppId}][${index}][category]" value="${category}">
                        <input type="hidden" name="items[${suppId}][${index}][code]" value="${code}">
                        <input type="hidden" name="items[${suppId}][${index}][receive_date]" value="${rcvDate}">
                        <input type="hidden" name="items[${suppId}][${index}][dosage]" value="${dose}">
                        <input type="hidden" name="items[${suppId}][${index}][price]" value="${price}">
                        <input type="hidden" name="items[${suppId}][${index}][currency]" value="${currency}">
                        <input type="hidden" name="items[${suppId}][${index}][dosing_price]" value="${dosingPrice}">
                        <input type="hidden" name="items[${suppId}][${index}][remark]" value="${remark}">
                        <input type="hidden" name="items[${suppId}][${index}][status]" value="${status}">
                    </div>
                    <div class="card-footer p-1 text-center bg-transparent border-top-0">
                        <button type="button" class="btn btn-link text-info text-xs mb-0" 
                            onclick="copySample('${rowId}', '${suppId}')" 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" 
                            onclick="editSample('${rowId}', '${suppId}')">
                            <i class="fas fa-edit me-1"></i> Edit
                        </button>
                        <button type="button" class="btn btn-link text-danger text-xs mb-0" 
                            onclick="confirmDelete('#${rowId}', 'Hapus sample ini?')">
                            <i class="fas fa-trash-alt me-1"></i> Hapus
                        </button>
                    </div>
                </div>
            </div>
        `;

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

        // --- 8. Helper Functions ---
        function confirmDelete(elementId, message) {
            Swal.fire({
                title: 'Konfirmasi Hapus',
                text: message || "Yakin ingin menghapus data ini?",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    if (typeof isFormDirty !== 'undefined') isFormDirty = true;
                    $(elementId).fadeOut(300, function() {
                        $(this).remove();
                    });
                    Swal.fire('Terhapus!', 'Data 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) {
            e.preventDefault();
            if ($('input[name^="items["]').length === 0) {
                Swal.fire('Gagal', 'Harap masukkan minimal satu supplier dan sample!', 'warning');
                return;
            }
            $('#loading-overlay').css('display', 'flex');
            $(e.target).prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i> Menyimpan...');
            setTimeout(function() {
                document.getElementById('{{ $dmenu }}-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