@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 edit --}}
                        @if ($authorize->edit == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" id="btn-simpan"><i class="fas fa-floppy-disk me-1"></i><span class="font-weight-bold">Simpan</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card header-ukuran mb-3">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Header</p>
                        {{-- Input hidden untuk ID yang akan diupdate --}}
                        <input type="hidden" name="header_id" id="header-id" value="{{ $list->encrypted_id }}">
                        <hr class="horizontal dark mt-0">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <form role="form" method="POST" id="form-filter" enctype="multipart/form-data"
                                    action="{{ URL::to($url_menu) }}">
                                    @csrf
                                    <div class="row">
                                        <div class="col-md-12 mb-3">
                                            <div class="d-flex align-items-center">
                                                <label for="vendor" class="form-label me-2"
                                                    style="min-width: 150px;">Vendor<code>*</code></label>
                                                <select name="vendor" id="vendor" class="form-select">
                                                    @foreach ($vendor as $v)
                                                        <option value="{{ $v->id }}" {{ $list->vendor_id == $v->id ? 'selected' : '' }}>
                                                            {{ $v->id }} - {{ $v->nama_vendor }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12 mb-3">
                                        <div class="d-flex align-items-center">
                                            <label for="ukuran-seragam" class="form-label me-2"
                                                style="min-width: 150px;">Nama Ukuran <code>*</code></label>
                                            <input type="text" class="form-control upper" id="nama-ukuran-seragam"
                                                name="nama_ukuran_seragam" value="{{ $list->nama_ukuran }}">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12 mb-3">
                                        <div class="d-flex align-items-center">
                                            <label for="jenis-seragam" class="form-label me-2"
                                                style="min-width: 150px;">Jenis Seragam<code>*</code></label>
                                            <select name="jenis_seragam" id="jenis-seragam" class="form-select">
                                                <option value=""></option>
                                                @foreach ($jenis_seragam as $js)
                                                    {{-- TAMBAHKAN ATRIBUT data-kelompok --}}
                                                    <option value="{{ $js->id }}" data-kelompok="{{ $js->kelompok_seragam }}"
                                                        {{ $list->jenis_seragam_id == $js->id ? 'selected' : '' }}>
                                                        {{ $js->id }} - {{ $js->nama_jenis_seragam }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    {{-- Input hidden untuk menyimpan kelompok awal saat halaman dimuat --}}
                                    <input type="hidden" id="initial-kelompok" value="{{ $list->kelompok_seragam }}">
                                </div>

                                <!-- Jenis Kelamin -->
                                <div class="row">
                                    <div class="col-md-12 mb-3">
                                        <div class="d-flex align-items-center">
                                            <label for="jenis-kelamin" class="form-label me-2"
                                                style="min-width: 150px;">Jenis Kelamin <code>*</code></label>
                                            <div class="form-check form-check-inline me-3">
                                                <input name="jenis_kelamin" class="form-check-input" id="customRadio1"
                                                    type="radio" value="L" {{ $list->jenis_kelamin == 'L' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="customRadio1">Laki-laki</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input name="jenis_kelamin" class="form-check-input" id="customRadio2"
                                                    type="radio" value="P" {{ $list->jenis_kelamin == 'P' ? 'checked' : '' }}>
                                                <label class="form-check-label" for="customRadio2">Perempuan</label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="row">
                                    <div class="col-md-12 mb-3">
                                        <div class="d-flex align-items-center">
                                            <label for="formFileSizeChart" class="form-label me-2"
                                                style="min-width: 150px;">Size Chart</label>
                                            <input class="form-control form-control-md" id="formFileSizeChart"
                                                type="file" name="size_chart" accept="image/*">
                                            {{-- Input hidden untuk path size chart lama --}}
                                            <input type="hidden" name="old_size_chart" id="old-size-chart"
                                                value="{{ $list->path_size_chart }}">
                                        </div>
                                        <div class="mt-2" style="margin-left: 160px;">
                                            <img id="size_chart_preview"
                                                src="{{ $list->path_size_chart ? asset('storage/' . $list->path_size_chart) : asset('assets/img/no-image-placeholder.png') }}"
                                                alt="Preview Size Chart"
                                                style="max-width: 200px; max-height: 200px; border: 1px solid #ddd; border-radius: 5px; cursor: pointer;">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                    </div>
                </div>

                <div class="card komponen-standart mb-3">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Komponen Yang Digunakan</p>
                        <hr class="horizontal dark mt-0">
                        <div class="table-responsive">
                            <table class="table table-hover" id="tbl-komponen-standart">
                                <thead style="background-color: #bcf4f5; text-align: left;">
                                    <tr id="table-header-dynamic">
                                        <th scope="col" class="text-center">Act</th>
                                        <th scope="col">Nama Komponen Standart</th>
                                        <th scope="col">Satuan</th>
                                        <th scope="col">Range?</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-komponen-standart">
                                    {{-- Data komponen akan diisi oleh JavaScript saat halaman dimuat atau saat jenis seragam diubah --}}
                                </tbody>
                            </table>
                        </div>
                        <hr class="horizontal dark mt-0">
                    </div>
                </div>

                <div class="card detail-ukuran">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Detail</p>
                        <hr class="horizontal dark mt-0">
                        <div class="table-responsive">
                            <table class="table table-hover" id="tbl-detail-ukuran">
                                <thead style="background-color: #bcf4f5; text-align: left;">
                                    <tr id="table-header-dynamic">
                                        <th scope="col">Act</th>
                                        <th scope="col">Ukuran</th>
                                    </tr>
                                </thead>
                                <tbody id="tbody-detail-tbl-data">
                                    {{-- Data detail akan diisi oleh JavaScript --}}
                                </tbody>
                            </table>
                        </div>
                        <button type="button" class="btn btn-primary" id="btn-add-item">
                            Add Item <i class="bi bi-file-earmark-plus"></i>
                        </button>
                        <hr class="horizontal dark mt-0">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- MODAL PREVIEW GAMBAR -->
    <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-labelledby="imagePreviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imagePreviewModalLabel">Preview Size Chart</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body text-center">
                    <img id="modalImage" src="" class="img-fluid" alt="Size Chart Preview">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                @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>
    // --- VARIABEL GLOBAL ---
    let selectedKomponen = [];
    let detail_ukuran_data = [];
    let komponen_terpakai_data = [];
    let komponen_standart_data = []; // Untuk menyimpan master data komponen

    $(document).ready(function() {
        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });

        // --- 1. INISIALISASI DATA DARI CONTROLLER ---
        komponen_terpakai_data = @json($komponen_terpakai ?? []);
        detail_ukuran_data = @json($detail_ukuran ?? []);
        komponen_standart_data = @json($komponen_standart ?? []);

        // --- 2. LOGIKA UTAMA SAAT PAGE LOAD ---

        // A. Bangun Tabel Komponen Standar
        buildKomponenTable(komponen_standart_data);

        // B. Mapping Komponen Terpakai
        selectedKomponen = komponen_terpakai_data.map(k => ({
            id: k.komponen_id,
            nama_ukuran: k.nama_ukuran_standart,
            satuan: k.satuan,
            isRange: (k.nilai_min !== null && k.nilai_max !== null)
        }));

        // C. Centang Checkbox di UI
        selectedKomponen.forEach(comp => {
            const $tr = $(`#tbl-komponen-standart tbody tr[data-id="${comp.id}"]`);
            if ($tr.length) {
                $tr.find('.comp-check').prop('checked', true);
                if (comp.isRange) {
                    $tr.find('.comp-range').prop('checked', true);
                }
            }
        });

        // D. Bangun Header Tabel Detail & Isi Datanya
        buildTableDetailHeader();
        loadDataDetailUkuran(detail_ukuran_data);

        // E. Atur Tampilan Awal (PENTING UNTUK TOPI/HIJAB SAAT LOAD)
        toggleFormSections();


        // --- EVENT HANDLERS ---

        // Handle Preview Image
        $('#formFileSizeChart').on('change', function() {
            const f = this.files?.[0];
            if (f) {
                const url = URL.createObjectURL(f);
                $('#size_chart_preview').attr('src', url).show();
            }
        });

        $('#size_chart_preview').on('click', function() {
            $('#modalImage').attr('src', $(this).attr('src'));
            new bootstrap.Modal(document.getElementById('imagePreviewModal')).show();
        });

        // Handle Change Jenis Seragam
        $('#jenis-seragam').on('change', function() {
            toggleFormSections();
            let jenis_seragam_id = $(this).val();
            let kelompok = $('#jenis-seragam option:selected').data('kelompok');

            if (kelompok === 'aksesoris' || !jenis_seragam_id) {
                // Jika ganti ke aksesoris, reset tabel komponen dan detail
                selectedKomponen = [];
                detail_ukuran_data = [];
                buildTableDetailHeader();
                loadDataDetailUkuran([]);
                // Uncheck semua komponen
                $('.comp-check, .comp-range').prop('checked', false);
                return;
            }

            // Ambil data komponen standar baru dari server jika bukan aksesoris
            $.ajax({
                url: '{{ URL::to('/') }}/mstukr/getKomponenStandart',
                data: { 'jenis_seragam_id': jenis_seragam_id },
                method: "POST",
                success: function(response) {
                    if (response.status == 'success') {
                        selectedKomponen = [];
                        detail_ukuran_data = [];
                        buildKomponenTable(response.data);
                        buildTableDetailHeader();
                        loadDataDetailUkuran([]);
                    } else {
                        Swal.fire({ icon: 'warning', title: 'Warning!', text: 'Data Komponen Ukuran Tidak ada...' });
                    }
                }
            });
        });

        // Handle Checkbox Komponen / Range berubah
        $(document).on('change', '.comp-check, .comp-range', function() {
            const isAksesoris = ($('#jenis-seragam option:selected').data('kelompok') === 'aksesoris');
            if(isAksesoris) return; // Aksesoris tidak boleh pilih komponen

            updateSelectedKomponenFromUI();
            buildTableDetailHeader();
            // Saat struktur berubah saat edit, kita load ulang data detail asli agar tidak hilang.
            // Inputan baru yang belum disave akan tereset.
            loadDataDetailUkuran(detail_ukuran_data);
        });

        // Tombol Add Item
        $('#btn-add-item').click(function() {
            const isAksesoris = ($('#jenis-seragam option:selected').data('kelompok') === 'aksesoris');
            if(isAksesoris) {
                 Swal.fire({ title: "Info", text: "Item aksesoris (Topi/Hijab) otomatis menggunakan ukuran ALLSIZE.", icon: "info" });
                 return;
            }

            let jenis_seragam = $('select[name="jenis_seragam"]').val();
            if (!jenis_seragam) {
                Swal.fire({ title: "Warning", text: "Pilih Jenis Seragam dulu!", icon: "warning" });
                return;
            }
            if (selectedKomponen.length === 0) {
                Swal.fire({ title: "Warning", text: "Pilih minimal 1 Komponen!", icon: "warning" });
                return;
            }
            addNewRowDetail();
        });

        // Tombol Hapus Baris (Soft Delete)
        $(document).on('click', '.removeRow', function() {
            const $tr = $(this).closest('tr');
            const status = $tr.data('status');
            if (status === 'update') {
                $tr.data('status', 'delete').hide();
            } else {
                $tr.remove();
            }
        });

        // Tombol Simpan
        $('#btn-simpan').click(function(e) {
            e.preventDefault();
            handleSave($(this));
        });

        // Input Uppercase
        $(document).on('input', '.upper, .ukuran-uppercase', function() {
            this.value = this.value.toUpperCase();
        });
    });

    // --- FUNGSI HELPER ---

    function toggleFormSections() {
        let kelompok = $('#jenis-seragam option:selected').data('kelompok');
        const isAksesoris = (kelompok === 'aksesoris');
        const sizeChartSection = $('#formFileSizeChart').closest('.row');
        const komponenCard = $('.komponen-standart');
        const detailCard = $('.detail-ukuran');

        if (isAksesoris) {
            // JIKA TOPI/HIJAB: Sembunyikan upload gambar, disable tabel komponen & detail
            sizeChartSection.fadeOut();
            komponenCard.css('opacity', '0.5').find('*').prop('disabled', true);
            detailCard.css('opacity', '0.5').find('*').prop('disabled', true);
        } else {
            // JIKA SERAGAM BIASA: Tampilkan semua
            sizeChartSection.fadeIn();
            komponenCard.css('opacity', '1').find('*').prop('disabled', false);
            detailCard.css('opacity', '1').find('*').prop('disabled', false);
        }
    }

    function buildKomponenTable(data) {
        let tbody = $('#tbl-komponen-standart tbody');
        tbody.empty();
        if (data && data.length > 0) {
            let html = '';
            data.forEach(item => {
                html += `
                  <tr data-id="${item.id}" data-nama-ukuran="${item.nama_ukuran_standart}" data-satuan="${item.satuan}">
                    <td class="text-center"><input type="checkbox" class="comp-check" /></td>
                    <td>${item.nama_ukuran_standart}</td>
                    <td>${item.satuan || '-'}</td>
                    <td class="text-center"><input type="checkbox" class="comp-range" /></td>
                  </tr>`;
            });
            tbody.html(html);
        } else {
            tbody.html(`<tr><td colspan="4" class="text-center">Tidak Ada Data</td></tr>`);
        }
    }

    function updateSelectedKomponenFromUI() {
        selectedKomponen = [];
        $('#tbl-komponen-standart tbody tr').each(function() {
            const $tr = $(this);
            if ($tr.find('.comp-check').is(':checked')) {
                selectedKomponen.push({
                    id: +$tr.data('id'),
                    nama_ukuran: $tr.data('nama-ukuran'),
                    satuan: $tr.data('satuan'),
                    isRange: $tr.find('.comp-range').is(':checked')
                });
            }
        });
    }

    function buildTableDetailHeader() {
        const $thead = $('#tbl-detail-ukuran thead tr');
        $thead.empty();

        if(selectedKomponen.length === 0) {
            $thead.html('<th>Act</th><th>Ukuran</th>');
            return;
        }

        let ths = `<th class="text-center" style="width:50px">Act</th><th style="width:100px">Ukuran</th>`;
        selectedKomponen.forEach(c => {
            const label = c.nama_ukuran + (c.satuan ? ` (${c.satuan})` : '');
            if (c.isRange) {
                ths += `<th class="text-center">${label} (Min)</th><th class="text-center">${label} (Max)</th>`;
            } else {
                ths += `<th class="text-center">${label}</th>`;
            }
        });
        $thead.html(ths);
    }

    function loadDataDetailUkuran(dataList) {
        const $tbody = $('#tbody-detail-tbl-data');
        $tbody.empty();

        // Jika data kosong dan bukan aksesoris, jangan tampilkan apa-apa
        let kelompok = $('#jenis-seragam option:selected').data('kelompok');
        if ((!dataList || dataList.length === 0) && kelompok !== 'aksesoris') return;

        // Jika Aksesoris dan datanya ada (ALLSIZE), tampilkan row disabled
        if (kelompok === 'aksesoris' && dataList.length > 0) {
             dataList.forEach(d => {
                 $tbody.append(`
                    <tr data-status="update">
                        <td class="text-center"><span class="badge bg-secondary">X</span></td>
                        <td><input type="text" class="form-control" value="${d.kode_ukuran}" disabled></td>
                    </tr>
                 `);
             });
             return;
        }

        // Load data normal
        dataList.forEach(d => {
            let rowHtml = `
                <tr data-status="update">
                    <td class="text-center"><span class="badge bg-danger cursor-pointer removeRow">X</span></td>
                    <td><input type="text" class="form-control ukuran-uppercase" name="ukuran[]" value="${d.kode_ukuran}"></td>
            `;

            selectedKomponen.forEach(col => {
                const valObj = d.values ? d.values.find(v => v.komponen_id == col.id) : null;

                if (col.isRange) {
                    const min = valObj ? (valObj.nilai_min ?? '') : '';
                    const max = valObj ? (valObj.nilai_max ?? '') : '';
                    rowHtml += `
                        <td><input class="form-control" type="number" step="0.01" data-id-komponen="${col.id}" data-field="min" value="${min}"></td>
                        <td><input class="form-control" type="number" step="0.01" data-id-komponen="${col.id}" data-field="max" value="${max}"></td>
                    `;
                } else {
                    const val = valObj ? (valObj.nilai ?? '') : '';
                    rowHtml += `
                        <td><input class="form-control" type="number" step="0.01" data-id-komponen="${col.id}" data-field="value" value="${val}"></td>
                    `;
                }
            });
            rowHtml += `</tr>`;
            $tbody.append(rowHtml);
        });
    }

    function addNewRowDetail() {
        let rowHtml = `
            <tr data-status="insert">
                <td class="text-center"><span class="badge bg-danger cursor-pointer removeRow">X</span></td>
                <td><input type="text" class="form-control ukuran-uppercase" name="ukuran[]" placeholder="S/M/L"></td>
        `;
        selectedKomponen.forEach(col => {
            if (col.isRange) {
                rowHtml += `
                    <td><input class="form-control" type="number" step="0.01" data-id-komponen="${col.id}" data-field="min" placeholder="0"></td>
                    <td><input class="form-control" type="number" step="0.01" data-id-komponen="${col.id}" data-field="max" placeholder="0"></td>
                `;
            } else {
                rowHtml += `
                    <td><input class="form-control" type="number" step="0.01" data-id-komponen="${col.id}" data-field="value" placeholder="0"></td>
                `;
            }
        });
        rowHtml += `</tr>`;
        $('#tbody-detail-tbl-data').append(rowHtml);
    }

    // --- FUNGSI SIMPAN (PERBAIKAN UTAMA DISINI) ---
    function handleSave($btn) {
        $btn.append(' <span class="spinner-border spinner-border-sm icon-load" role="status"></span>');
        $btn.prop('disabled', true);

        // Ambil Data Header
        let vendor = $('#vendor').val();
        let jenis_seragam = $('#jenis-seragam').val();
        let nama_ukuran = $('#nama-ukuran-seragam').val();
        let jenis_kelamin = $('input[name="jenis_kelamin"]:checked').val();
        let header_id = $('#header-id').val();

        // Cek apakah ini aksesoris (Topi/Hijab)
        let kelompok = $('#jenis-seragam option:selected').data('kelompok');
        const isAksesoris = (kelompok === 'aksesoris');

        // Validasi Basic Header
        if (!vendor || !nama_ukuran || !jenis_seragam || !jenis_kelamin) {
             Swal.fire("Warning", "Data Header (Vendor, Ukuran, Seragam, Kelamin) Wajib Diisi", "warning");
             stopLoading($btn);
             return;
        }

        let detailData = [];

        // --- LOGIKA PEMISAH ANTARA SERAGAM BIASA DAN AKSESORIS ---
        if (!isAksesoris) {
            // === JIKA SERAGAM BIASA (Baju/Celana) ===
            // Ambil data dari tabel detail ukuran seperti biasa
            const $rows = $('#tbl-detail-ukuran tbody').children('tr');
            const activeRows = $rows.filter(function() { return $(this).data('status') !== 'delete'; }).length;

            if (activeRows === 0) {
                Swal.fire("Warning", "Minimal harus ada 1 detail ukuran aktif!", "warning");
                stopLoading($btn);
                return;
            }

            $rows.each(function() {
                const $tr = $(this);
                const status = $tr.data('status');
                const namaUkuran = $tr.find('input[name="ukuran[]"]').val();

                // Validasi nama ukuran tidak boleh kosong jika aktif
                if (status !== 'delete' && !namaUkuran) {
                     Swal.fire("Warning", "Nama ukuran tidak boleh kosong!", "warning");
                     stopLoading($btn);
                     throw new Error("Validation Error"); // Hentikan loop
                }

                let rowObj = {
                    ukuran: namaUkuran,
                    status: status,
                    values: []
                };

                const byComp = {};
                $tr.find('input[data-id-komponen]').each(function() {
                    const cid = $(this).data('id-komponen');
                    const field = $(this).data('field');
                    let val = $(this).val();

                    if (!byComp[cid]) { byComp[cid] = { komponen_id: cid, nilai: null, nilai_min: null, nilai_max: null }; }
                    if(val !== '') val = parseFloat(val); else val = null;

                    if (field === 'value') byComp[cid].nilai = val;
                    if (field === 'min') byComp[cid].nilai_min = val;
                    if (field === 'max') byComp[cid].nilai_max = val;
                });

                rowObj.values = Object.values(byComp);
                detailData.push(rowObj);
            });

        } else {
            // === JIKA AKSESORIS (Topi/Hijab) ===
            // Kita BUKAN membaca tabel, tapi kita MEMAKSA data menjadi ALLSIZE.
            // Kita gunakan status 'update' karena kita sedang dalam mode Edit Header.
            // Backend harus paham bahwa jika 'update' dan ukuran 'ALLSIZE', ia akan menyesuaikan data yang ada.
            detailData.push({
                ukuran: 'ALLSIZE',
                status: 'update',
                values: [] // Array kosong karena tidak ada nilai komponen
            });
             // Hapus file size chart jika ada, karena aksesoris tidak pakai
             $('#formFileSizeChart').val('');
        }

        // Siapkan FormData
        let formData = new FormData();
        formData.append('_method', 'PUT');
        formData.append('header_id', header_id);
        formData.append('jenis_seragam_id', jenis_seragam);
        formData.append('vendor_id', vendor);
        formData.append('nama_ukuran', nama_ukuran);
        formData.append('jenis_kelamin', jenis_kelamin);
        // Kirim detailData yang sudah disesuaikan (baik itu array kosong/berisi, atau array ALLSIZE)
        formData.append('detail_ukuran', JSON.stringify(detailData));

        const fileInput = document.getElementById('formFileSizeChart');
        // Hanya kirim file jika BUKAN aksesoris dan ada file dipilih
        if (!isAksesoris && fileInput.files.length > 0) {
            formData.append('size_chart', fileInput.files[0]);
        }
        // Kirim path lama (controller yang akan memutuskan untuk menghapusnya jika jenisnya berubah jadi aksesoris)
        formData.append('old_size_chart', $('#old-size-chart').val());

        // AJAX POST
        $.ajax({
            url: '{{ URL::to('/') }}/mstukr/update',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                if (response.status === 'success') {
                    Swal.fire({ title: "Sukses!", text: response.message, icon: "success" })
                    .then(() => {
                        window.location.href = '{{ URL::to('/') }}/mstukr';
                    });
                } else {
                    Swal.fire({ title: "Gagal!", text: response.message, icon: "error" });
                }
            },
            error: function(xhr) {
                console.error(xhr);
                Swal.fire({ title: "Error", text: "Terjadi kesalahan server.", icon: "error" });
            },
            complete: function() {
                stopLoading($btn);
            }
        });
    }

    function stopLoading($btn) {
        $btn.prop('disabled', false);
        $btn.find('.icon-load').remove();
    }
</script>
@endpush