@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')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" id="btn-submit"><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">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form"
                        enctype="multipart/form-data">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Edit {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                {{-- retrieve table header --}}
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Periode</label>
                                        <input class="form-control readonly" type="text" name="periode" maxlength="25"
                                            value="{{ $periode ?? now()->year }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">NIK Karyawan</label>
                                        <input class="form-control readonly" type="text" name="nik_karyawan"
                                            value="{{ $karyawan->nik }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Nama Karyawan</label>
                                        <input class="form-control readonly" type="text" name="nama_karyawan"
                                            value="{{ $karyawan->nama_karyawan }}">
                                    </div>
                                    <div class="form-group">
                                        <label for="example-text-input" class="form-control-label">Departemen</label>
                                        <input class="form-control readonly" type="text" name="departemen"
                                            value="{{ $karyawan->nama_departemen }}">
                                        <input class="form-control readonly" type="text" name="id_departemen"
                                            value="{{ $karyawan->id_departemen }}" hidden>
                                    </div>
                                    <hr>
                                    <h5>Detail Seragam</h5>
                                    <div class="detail-seragam">
                                        <div class="table-responsive">
                                            <form action="" id="form-seragam">
                                                <table class="table table-bordered table-sm" id="insert-table">
                                                    <thead>
                                                        <tr>
                                                            <th>Item</th>
                                                            <th>Tipe</th>
                                                            <th>Qty</th>
                                                            <th>Size Chart</th>
                                                            <th>Pilih Ukuran</th>
                                                            <th>Notes</th>
                                                            <th>Aksi</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($list as $item)
                                                            <tr>
                                                                <td><input type="text" name="nama_jenis_seragam[]"
                                                                        class="form-control"
                                                                        value="{{ $item->nama_jenis_seragam }}" readonly>
                                                                    <input type="text" name="jenis_seragam_id[]"
                                                                        class="form-control"
                                                                        value="{{ $item->jenis_seragam_id }}" readonly
                                                                        hidden>
                                                                    <input type="hidden" name="item_number_seragam[]"
                                                                        value="{{ $item->item_number }}">
                                                                </td>

                                                                <td><input type="text" name="nama_tipe_seragam[]"
                                                                        class="form-control"
                                                                        value="{{ $item->nama_tipe_seragam }}" readonly>
                                                                    <input type="text" name="tipe_seragam_id[]"
                                                                        class="form-control"
                                                                        value="{{ $item->tipe_seragam_id }}" readonly
                                                                        hidden>
                                                                    <input type="text" name="kelompok_seragam[]"
                                                                        class="form-control"
                                                                        value="{{ $item->kelompok_seragam }}" readonly
                                                                        hidden>
                                                                    <input type="text" name="kode_kategori[]"
                                                                        class="form-control"
                                                                        value="{{ $item->kode_kategori }}" readonly hidden>
                                                                    <input type="text" name="kode_vendor[]"
                                                                        class="form-control" value="{{ $item->vendor_id }}"
                                                                        readonly hidden>
                                                                </td>



                                                                <td><input type="text" name="qty_seragam[]"
                                                                        class="form-control" value="{{ $item->jumlah }}"
                                                                        readonly></td>

                                                                @if ($item->kelompok_seragam == 'aksesoris')
                                                                    <td class="text-center">ALL SIZE</td>
                                                                    <td class="text-center">ALL</td>
                                                                @else
                                                                    <td><a href="#"
                                                                            onclick="showSizeChart('{{ $item->jenis_seragam_id }}', '{{ $item->tipe_seragam_id }}'); return false;"><i
                                                                                class="fas fa-up-right-from-square"></i>
                                                                            Lihat
                                                                            Size Chart</a></td>
                                                                    <td>

                                                                        <select name="ukuran[]"
                                                                            class="form-control ukuranOptions"
                                                                            data-jenis-kelamin="{{ $item->id_gender }}"
                                                                            data-jenis-seragam="{{ $item->jenis_seragam_id }}"
                                                                            data-tipe="{{ $item->tipe_seragam_id }}"
                                                                            data-selected="{{ $item->kode_ukuran }}">
                                                                            <option value="">-- Pilih Ukuran --
                                                                            </option>
                                                                        </select>
                                                                        {{-- hidden input dinamis --}}
                                                                        @foreach ($komponenByJenis[$item->jenis_seragam_id] ?? [] as $komponen)
                                                                            @php
                                                                                $fieldName = Str::of(
                                                                                    $komponen->nama_ukuran_standart,
                                                                                )
                                                                                    ->lower() // jadi huruf kecil semua
                                                                                    ->replace(' ', '_'); // spasi jadi underscore
                                                                                $dataName = Str::of(
                                                                                    $komponen->nama_ukuran_standart,
                                                                                )
                                                                                    ->lower() // jadi huruf kecil semua
                                                                                    ->replace(' ', '-'); // spasi jadi underscore

                                                                                // --- TAMBAHAN LOGIKA UNTUK MENGAMBIL NILAI VALUE ---
                                                                                $existingVal = '';
                                                                                if(isset($item->details)) {
                                                                                    // Cari detail yang nama komponennya cocok dengan fieldName
                                                                                    // Pastikan format nama komponen di DB sesuai dengan $fieldName (snake_case)
                                                                                    $detailItem = $item->details->where('nama_komponen', $fieldName)->first();
                                                                                    $existingVal = $detailItem ? $detailItem->nilai : '';
                                                                                }
                                                                                // ----------------------------------------------------
                                                                            @endphp
                                                                            <div class="seragam-card">
                                                                                <input type="hidden"
                                                                                    name="{{ $fieldName }}[]"
                                                                                    data-ukuran="{{ $dataName }}"
                                                                                    class="ukuran-detail"
                                                                                    value="{{ $existingVal }}">
                                                                            </div>
                                                                        @endforeach
                                                                    </td>
                                                                @endif

                                                                <td><input type="text" name="notes_seragam[]"
                                                                        class="form-control"
                                                                        value="{{ $item->catatan }}">

                                                                </td>
                                                                <td>
                                                                    @if(strtoupper($item->kode_ukuran) == 'CUSTOM')
                                                                    <button type="button" class="btn btn-sm btn-info me-1"
                                                                            onclick="showCustomSizeDetail({{ $item->id }}, '{{ $item->nama_jenis_seragam }}', '{{ $item->nama_tipe_seragam }}')">
                                                                        <i class="fas fa-ruler"></i> Detail Ukuran
                                                                    </button>
                                                                    @endif
                                                                    <button type="button" class="btn btn-sm btn-danger"
                                                                            onclick="deleteSeragam({{ $item->id }}, this)">
                                                                        <i class="fas fa-trash"></i> Hapus
                                                                    </button>
                                                                    <input type="hidden" name="seragam_id[]" value="{{ $item->id }}">
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>

        <hr class="horizontal dark">
    </div>
    <!-- Modal Size Chart-->
    <div class="modal fade" id="sizeChartModal" tabindex="-1" aria-labelledby="sizeChartModalLabel"
        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="sizeChartModalLabel">Size Chart</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>

                <div class="modal-body" id="modalContent">

                </div>

            </div>
        </div>
    </div>
    {{-- End Modal Size Chart --}}

    <!-- Modal Detail Ukuran Custom -->
    <div class="modal fade" id="customSizeModal" tabindex="-1" aria-labelledby="customSizeModalLabel"
        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="customSizeModalLabel">Detail Ukuran Custom</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
                </div>
                <div class="modal-body" id="customSizeContent">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                    <button type="button" class="btn btn-primary" id="btnSaveCustomSize">
                        <i class="fas fa-save"></i> Simpan Perubahan
                    </button>
                </div>
            </div>
        </div>
    </div>
    {{-- End Modal Detail Ukuran Custom --}}

    {{-- 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>
        let jumlah_detail = 0;
        let data_seragam = [];
        let itemsToDelete = []; // Array untuk menyimpan ID item yang akan dihapus
        $(document).ready(function() {
            // INISIALISASI AJAX SETUP HEADER
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $('.ukuranOptions').each(function() {
                const select = $(this);
                const jenis_kelamin = select.data('jenis-kelamin');
                const jenis_seragam = select.data('jenis-seragam');
                const tipe = select.data('tipe');
                const selectedUkuran = select.data('selected'); // ukuran yang tersimpan

                // Konversi ke string untuk memastikan toUpperCase() bekerja
                const selectedUkuranStr = selectedUkuran ? String(selectedUkuran) : '';

                // Cek jika kelompok_seragam adalah aksesoris
                const parentRow = select.closest('tr');
                const kelompokSeragam = parentRow.find('input[name="kelompok_seragam[]"]').val();

                if(kelompokSeragam && kelompokSeragam.toLowerCase() === 'aksesoris') {
                    // Otomatis set nilai ke ALLSIZE untuk aksesoris
                    select.html('<option value="ALLSIZE" selected>ALLSIZE</option>');
                    select.prop('disabled', true);
                    return; // Skip AJAX call
                }

                // Cek jika ukuran adalah CUSTOM (gunakan string yang sudah dikonversi)
                if (selectedUkuranStr && selectedUkuranStr.toUpperCase() === 'CUSTOM') {
                    // Tetap load opsi ukuran normal, tapi set CUSTOM sebagai selected
                    getUkuran(jenis_kelamin, jenis_seragam, tipe).done(function(data) {
                        const options = buildUkuranOptions(data.data, 'CUSTOM');
                        select.html(options);
                        select.val('CUSTOM');
                    }).fail(function(xhr, status, error) {
                        console.error('AJAX Error:', {xhr, status, error});
                        select.html('<option value="CUSTOM" selected>CUSTOM</option>');
                    });
                    return;
                }

                // Lanjutkan AJAX call untuk ukuran non-CUSTOM
                getUkuran(jenis_kelamin, jenis_seragam, tipe).done(function(data) {
                    const options = buildUkuranOptions(data.data, selectedUkuran);
                    select.html(options);
                    if (selectedUkuran) {
                        select.val(selectedUkuran).trigger('change'); // langsung isi hidden input
                    }
                }).fail(function(xhr, status, error) {
                    console.error('AJAX Error:', {xhr, status, error});
                    select.html('<option value="">Gagal load ukuran</option>');
                });
            });
        });

        function getUkuran(jenis_kelamin, jenis_seragam, tipe_seragam) {
            return $.ajax({
                url: "{{ URL::to('/') }}/get-ukuran",
                type: 'GET',
                data: {
                    jenis_kelamin,
                    jenis_seragam,
                    tipe_seragam
                }
            });
        }

        function buildUkuranOptions(data, selectedSize = '') {
            // Kelompokkan berdasarkan kode_ukuran
            const grouped = {};
            data.forEach(size => {
                const kodeKey = String(size.kode_ukuran); // Konversi ke string
                if (!grouped[kodeKey]) grouped[kodeKey] = [];
                grouped[kodeKey].push(size);
            });

            // Konversi selectedSize ke string untuk perbandingan
            const selectedSizeStr = selectedSize ? String(selectedSize) : '';

            let optionsUkuran = '<option value="">-- Pilih Ukuran --</option>';

            Object.keys(grouped).forEach(kode => {
                // Perbandingan string dengan string
                const selected = kode === selectedSizeStr ? 'selected' : '';
                let dataAttrs = '';

                // 🔹 Gabungkan semua komponen dari ukuran yang sama
                grouped[kode].forEach(komp => {
                    const namaUkuran = komp.nama_ukuran_standart?.toLowerCase().replace(/\s+/g, '-');

                    if (komp.nilai && String(komp.nilai).trim() !== '') {
                        dataAttrs += ` data-${namaUkuran}="${komp.nilai}"`;
                    } else if (komp.nilai_min || komp.nilai_max) {
                        dataAttrs += ` data-${namaUkuran}-nilai-min="${komp.nilai_min || ''}"`;
                        dataAttrs += ` data-${namaUkuran}-nilai-max="${komp.nilai_max || ''}"`;
                    }
                });

                // Tambahkan atribut umum (bisa ambil dari entri pertama)
                const first = grouped[kode][0];
                dataAttrs += ` data-tipe-seragam-id="${first.tipe_seragam_id}"`;
                dataAttrs += ` data-nama-tipe-seragam="${first.nama_tipe_seragam}"`;
                dataAttrs += ` data-jenis-seragam-id="${first.jenis_seragam_id}"`;
                dataAttrs += ` data-nama-jenis-seragam="${first.nama_jenis_seragam}"`;

                optionsUkuran += `<option value="${kode}" ${selected}${dataAttrs}>${kode}</option>`;
            });

            // Tambahkan opsi CUSTOM di akhir
            if (data.length > 0) {
                const first = data[0];
                const customSelected = selectedSize === 'CUSTOM' ? 'selected' : '';
                const customAttrs = `data-tipe-seragam-id="${first.tipe_seragam_id}" data-nama-tipe-seragam="${first.nama_tipe_seragam}" data-jenis-seragam-id="${first.jenis_seragam_id}" data-nama-jenis-seragam="${first.nama_jenis_seragam}"`;
                optionsUkuran += `<option value="CUSTOM" ${customSelected} ${customAttrs}>CUSTOM (Ukuran Khusus)</option>`;
            }

            return optionsUkuran;
        }

        function deleteSeragam(id, button) {
            const $row = $(button).closest('tr');
            const $btn = $(button);

            // Cek apakah item sudah ditandai untuk dihapus
            if ($row.hasClass('marked-for-delete')) {
                // Jika sudah ditandai, batalkan penghapusan
                $row.removeClass('marked-for-delete').css('background-color', '');
                $btn.html('<i class="fas fa-trash"></i> Hapus').removeClass('btn-warning').addClass('btn-danger');

                // Hapus ID dari array itemsToDelete
                itemsToDelete = itemsToDelete.filter(item => item !== id);
            } else {
                // Jika belum ditandai, tandai untuk dihapus dengan background merah
                $row.addClass('marked-for-delete').css('background-color', '#ffcccc');
                $btn.html('<i class="fas fa-undo"></i> Batalkan Hapus').removeClass('btn-danger').addClass('btn-warning');

                // Simpan ID ke array itemsToDelete
                if (!itemsToDelete.includes(id)) {
                    itemsToDelete.push(id);
                }
            }
        }

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

            $.ajax({
                url: "{{ URL::to('/') }}/get-image-sizechart",
                type: 'GET',
                data: {
                    jenis_seragam: jenis_seragam,
                    tipe_seragam: tipe_seragam
                },
                success: function(response) {
                    let baseUrl = "{{ url('') }}"; // Ambil APP_URL dari Blade
                    if (response.status === 'success' && response.data.imgPath) {
                        const imgPath = `${baseUrl}/storage/${response.data.imgPath.path_size_chart}`;
                        const content =
                            `<img src="${imgPath}" alt="Size Chart" style="max-width:100%; height:auto;">`;

                        document.getElementById('modalContent').innerHTML = content;
                        $('#sizeChartModal').modal('show');
                    } else {
                        document.getElementById('modalContent').innerHTML =
                            `<p class="text-muted">Size chart tidak tersedia.</p>`;
                        $('#sizeChartModal').modal('show');
                    }
                },
                error: function() {
                    alert('Terjadi kesalahan saat mengambil data size chart.');
                }
            });
        }

        // Fungsi untuk menampilkan detail ukuran custom dari dropdown (untuk data baru)
        let currentCustomRow = null;
        function showCustomSizeModalFromDropdown(rowElement, jenisSeragamId, namaJenis, tipeSeragamId, namaTipe) {
            currentCustomRow = rowElement;
            currentSeragamId = null; // Reset karena ini bukan edit existing data

            $('#customSizeModalLabel').text(`Detail Ukuran Custom - ${namaJenis} (${namaTipe})`);

            // Ambil komponen ukuran dari hidden input di row
            const hiddenInputs = rowElement.find('.seragam-card input[type="hidden"]');
            let formFields = '<div class="row">';

            hiddenInputs.each(function() {
                const fieldName = $(this).attr('name').replace('[]', '');
                const displayName = fieldName.replace(/_/g, ' ').toUpperCase();
                const currentValue = $(this).val() || '';

                formFields += `
                    <div class="col-md-6 mb-3">
                        <label class="form-label">${displayName}</label>
                        <input type="text" class="form-control custom-size-input-new"
                               data-field="${fieldName}"
                               value="${currentValue}"
                               placeholder="Masukkan ${displayName}">
                    </div>
                `;
            });

            formFields += '</div>';
            $('#customSizeContent').html(formFields);
            $('#customSizeModal').modal('show');
        }

        // Fungsi untuk menampilkan detail ukuran custom dari database (untuk data existing)
        let currentSeragamId = null;
        function showCustomSizeDetail(seragamId, namaJenis, namaTipe) {
            currentSeragamId = seragamId;
            $('#customSizeModalLabel').text(`Detail Ukuran Custom - ${namaJenis} (${namaTipe})`);
            $('#customSizeContent').html(`
                <div class="text-center">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                </div>
            `);
            $('#customSizeModal').modal('show');

            $.ajax({
                url: "{{ URL::to('/') }}/trs_uni/getCustomSizeDetail",
                type: 'GET',
                data: { seragam_id: seragamId },
                success: function(response) {
                    if (response.status === 'success') {
                        let html = '<div class="row">';

                        if (response.data.length === 0) {
                            html += '<div class="col-12"><p class="text-muted text-center">Tidak ada data ukuran custom.</p></div>';
                        } else {
                            response.data.forEach(function(item) {
                                html += `
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label text-capitalize">${item.nama_komponen.replace(/_/g, ' ')}</label>
                                        <input type="number" class="form-control custom-size-input"
                                               data-id="${item.id}"
                                               data-komponen="${item.nama_komponen}"
                                               value="${item.nilai || ''}"
                                               placeholder="Masukkan nilai">
                                    </div>
                                `;
                            });
                        }

                        html += '</div>';
                        $('#customSizeContent').html(html);
                    } else {
                        $('#customSizeContent').html('<p class="text-danger">Gagal memuat data.</p>');
                    }
                },
                error: function() {
                    $('#customSizeContent').html('<p class="text-danger">Terjadi kesalahan saat memuat data.</p>');
                }
            });
        }

        // Fungsi untuk menyimpan perubahan ukuran custom
        $('#btnSaveCustomSize').click(function() {
            const $btn = $(this);
            $btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Menyimpan...');

            // Cek apakah ini dari dropdown (data baru) atau dari button detail (data existing)
            const isNewCustom = $('.custom-size-input-new').length > 0;

            if (isNewCustom) {
                // Handle data baru dari dropdown
                if (!currentCustomRow) {
                    $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Simpan Perubahan');
                    return;
                }

                let allFilled = true;
                $('.custom-size-input-new').each(function() {
                    const fieldName = $(this).data('field');
                    const value = $(this).val().trim();

                    // Set nilai ke hidden input di row
                    currentCustomRow.find(`input[name="${fieldName}[]"]`).val(value);

                    if (!value) allFilled = false;
                });

                $('#customSizeModal').modal('hide');
                $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Simpan Perubahan');

                Swal.fire({
                    position: "top-end",
                    icon: "success",
                    title: "Ukuran custom berhasil disimpan",
                    showConfirmButton: false,
                    timer: 1500,
                    width: "400px"
                });

                currentCustomRow = null;
                return;
            }

            // Handle data existing dari database
            let ukuranData = [];
            $('.custom-size-input').each(function() {
                ukuranData.push({
                    id: $(this).data('id'),
                    nama_komponen: $(this).data('komponen'),
                    nilai: $(this).val() || null
                });
            });

            $.ajax({
                url: "{{ URL::to('/') }}/trs_uni/updateCustomSizeDetail",
                type: 'POST',
                data: {
                    seragam_id: currentSeragamId,
                    ukuran_data: ukuranData
                },
                success: function(response) {
                    $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Simpan Perubahan');

                    if (response.status === 'success') {
                        // --- TAMBAHAN LOGIKA SYNC ---
                        // Kita perlu mencari baris (TR) di tabel utama yang memiliki seragam_id yang sedang diedit
                        // Pastikan input hidden seragam_id[] memiliki value = currentSeragamId

                        let rowInput = $('input[name="seragam_id[]"][value="' + currentSeragamId + '"]');

                        if(rowInput.length > 0) {
                            let parentRow = rowInput.closest('tr');

                            // Loop data yang baru saja disimpan dari modal
                            // Variable 'ukuranData' diambil dari scope luar (yang dikirim ke ajax)
                            ukuranData.forEach(function(uData) {
                                // Cari hidden input di tabel utama yang namanya sesuai komponen
                                // format nama input di blade adalah nama_komponen[] (misal: panjang_badan[])
                                // Kita cari berdasarkan atribut name yang mengandung nama komponen

                                // Mencari input dengan name="nama_komponen[]" di dalam row tersebut
                                let targetInput = parentRow.find('input[name="' + uData.nama_komponen + '[]"]');

                                if(targetInput.length > 0) {
                                    targetInput.val(uData.nilai); // Update nilai di form utama
                                }
                            });
                        }
                        // -----------------------------

                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: response.message,
                            confirmButtonText: 'OK'
                        }).then(() => {
                            $('#customSizeModal').modal('hide');
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: response.message || 'Gagal menyimpan data',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function() {
                    $btn.prop('disabled', false).html('<i class="fas fa-save"></i> Simpan Perubahan');
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Terjadi kesalahan saat menyimpan data.',
                        confirmButtonText: 'OK'
                    });
                }
            });
        })


        $(document).on('change', 'select[name="ukuran[]"]', function() {
            const selectedOption = $(this).find('option:selected')[0];
            const selectedValue = $(this).val();
            const parent = $(this).closest('tr');
            const ukuranDataRaw = {};

            // Cek jika memilih CUSTOM
            if (selectedValue === 'CUSTOM') {
                const jenisSeragam = $(selectedOption).data('jenis-seragam-id');
                const namaJenis = $(selectedOption).data('nama-jenis-seragam');
                const tipeSeragam = $(selectedOption).data('tipe-seragam-id');
                const namaTipe = $(selectedOption).data('nama-tipe-seragam');

                showCustomSizeModalFromDropdown(parent, jenisSeragam, namaJenis, tipeSeragam, namaTipe);
                return;
            }

            // Ambil semua atribut data-*
            $.each(selectedOption.attributes, function() {
                if (this.name.startsWith("data-")) {
                    const key = this.name.replace("data-", ""); // misal panjang-badan-min
                    ukuranDataRaw[key] = this.value;
                }
            });

            // Loop semua input yang punya data-ukuran
            parent.find('input[data-ukuran]').each(function() {
                const ukuranKey = $(this).data('ukuran');
                const minKey = `${ukuranKey}-min`;
                const maxKey = `${ukuranKey}-max`;
                const minVal = ukuranDataRaw[minKey];
                const maxVal = ukuranDataRaw[maxKey];
                const val = ukuranDataRaw[ukuranKey];

                // logika pengisian
                if (val && !minVal && !maxVal) {
                    // nilai tunggal
                    $(this).val(val);
                } else if (minVal || maxVal) {
                    // range min–max
                    $(this).val(`${minVal || ''}-${maxVal || ''}`);
                } else {
                    // kosong
                    $(this).val('');
                }
            });
        });


        $('#btn-submit').click(function() {
            jumlah_detail = @json($list).length;

            Swal.fire({
                title: "Apakah Anda Yakin?",
                text: "Apakah Anda yakin ingin menyimpan data ini?" + (itemsToDelete.length > 0 ? "\n\n⚠️ " + itemsToDelete.length + " item akan dihapus." : ""),
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Ya",
                cancelButtonText: "Tidak"
            }).then((result) => {
                if (result.isConfirmed) {
                    const $btn = $(this);
                    $btn.append(
                        ' <span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
                    ).attr('disabled', true);

                    // Jika ada item yang akan dihapus, hapus terlebih dahulu
                    if (itemsToDelete.length > 0) {
                        deleteMarkedItems().then(() => {
                            // Setelah semua item berhasil dihapus, lanjut simpan data
                            submitFormData($btn);
                        }).catch((error) => {
                            $('.icon-load').remove();
                            $btn.removeAttr('disabled');
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Gagal menghapus item: ' + error,
                                confirmButtonText: 'OK'
                            });
                        });
                    } else {
                        // Jika tidak ada item yang akan dihapus, langsung simpan
                        submitFormData($btn);
                    }
                }
            });
        });

        // Fungsi untuk menghapus semua item yang ditandai
        function deleteMarkedItems() {
            return new Promise((resolve, reject) => {
                let deletedCount = 0;
                const totalDelete = itemsToDelete.length;

                if (totalDelete === 0) {
                    resolve();
                    return;
                }

                itemsToDelete.forEach((id) => {
                    $.ajax({
                        url: "{{ URL::to('/') }}/trs_uni/deleteSeragam",
                        type: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        data: { id: id },
                        success: function(response) {
                            deletedCount++;
                            if (deletedCount === totalDelete) {
                                resolve();
                            }
                        },
                        error: function(xhr) {
                            reject('ID: ' + id);
                        }
                    });
                });
            });
        }

        // Fungsi untuk submit form data seragam
        function submitFormData($btn) {
            // ambil data header
            let karyawan = $('input[name="nik_karyawan"]').val();
            let karyawan_nama = $('input[name="nama_karyawan"]').val();
            let departemen = $('input[name="id_departemen"]').val();
            let periode = $('input[name="periode"]').val();

            // ambil semua field (hanya yang tidak ditandai untuk dihapus)
            let jenis_seragam = $('input[name="jenis_seragam_id[]"]').not($('.marked-for-delete').find('input[name="jenis_seragam_id[]"]'));
            let nama_jenis_seragam = $('input[name="nama_jenis_seragam[]"]').not($('.marked-for-delete').find('input[name="nama_jenis_seragam[]"]'));
            let tipe_seragam = $('input[name="tipe_seragam_id[]"]').not($('.marked-for-delete').find('input[name="tipe_seragam_id[]"]'));
            let nama_tipe_seragam = $('input[name="nama_tipe_seragam[]"]').not($('.marked-for-delete').find('input[name="nama_tipe_seragam[]"]'));
            let kelompok_seragam = $('input[name="kelompok_seragam[]"]').not($('.marked-for-delete').find('input[name="kelompok_seragam[]"]'));
            let qty_seragam = $('input[name="qty_seragam[]"]').not($('.marked-for-delete').find('input[name="qty_seragam[]"]'));
            let kode_kategori = $('input[name="kode_kategori[]"]').not($('.marked-for-delete').find('input[name="kode_kategori[]"]'));
            let kode_vendor = $('input[name="kode_vendor[]"]').not($('.marked-for-delete').find('input[name="kode_vendor[]"]'));
            let notes = $('input[name="notes_seragam[]"]').not($('.marked-for-delete').find('input[name="notes_seragam[]"]'));
            let item_number = $('input[name="item_number_seragam[]"]').not($('.marked-for-delete').find('input[name="item_number_seragam[]"]'));

            let data_seragam = [];

            for (let i = 0; i < jenis_seragam.length; i++) {
                // cari parent row / card seragam
                const parentRow = $(jenis_seragam[i]).closest('tr');
                const ukuranSelect = parentRow.find('select[name="ukuran[]"]').val() || '';

                let obj = {
                    jenis_seragam: jenis_seragam[i].value,
                    nama_jenis_seragam: nama_jenis_seragam[i].value,
                    tipe_seragam: tipe_seragam[i].value,
                    nama_tipe_seragam: nama_tipe_seragam[i].value,
                    kelompok_seragam: kelompok_seragam[i].value,
                    qty_seragam: qty_seragam[i].value,
                    kode_kategori: kode_kategori[i].value,
                    kode_vendor: kode_vendor[i].value,
                    ukuran_seragam: ukuranSelect,
                    periode: periode,
                    notes_seragam: notes[i].value,
                    item_number: item_number[i]
                    .value, // dikirim tapi tetap bisa dipakai di header
                    ukuran_detail: {}
                };

                // validasi ukuran (kecuali aksesoris/topi/CUSTOM)
                const isAksesoris = kelompok_seragam[i].value.toLowerCase() === 'aksesoris';
                const isTopi = nama_jenis_seragam[i].value.toLowerCase().includes('topi');
                const isCustom = ukuranSelect.toUpperCase() === 'CUSTOM' || ukuranSelect === 'CUSTOM';

                // Jika bukan aksesoris/topi dan bukan CUSTOM, maka harus ada ukuran
                if (!isAksesoris && !isTopi && !isCustom && !ukuranSelect) {
                    Swal.fire({
                        title: 'Warning!',
                        text: 'Pilih Ukuran Terlebih Dahulu',
                        icon: 'warning',
                        confirmButtonText: 'OK'
                    });
                    $('.icon-load').remove();
                    $btn.removeAttr('disabled');
                    return; // hentikan looping
                }

                // Untuk CUSTOM, gunakan string "CUSTOM" sebagai nilai ukuran
                if (isCustom) {
                    obj.ukuran_seragam = 'CUSTOM';
                }

                // Untuk ALLSIZE (aksesoris), gunakan string "ALLSIZE" sebagai nilai ukuran
                if (isAksesoris) {
                    obj.ukuran_seragam = 'ALLSIZE';
                }

                // ambil hidden input dalam .seragam-card (ukuran_detail)
                parentRow.find('.seragam-card input[type="hidden"]').each(function() {
                    let key = $(this).attr('name').replace('[]', '');
                    let val = $(this).val() || '';
                    obj.ukuran_detail[key] = val;
                });

                data_seragam.push(obj);
            }

            let req = {
                karyawan_nik: karyawan,
                karyawan_dept: departemen,
                periode: periode,
                detail_seragam: data_seragam
            };

            $.ajax({
                url: '{{ URL::to('/') }}/trs_uni/updatePendataan',
                data: req,
                method: "POST",
                success: function(response) {
                    $('.icon-load').remove();
                    $btn.removeAttr('disabled');

                    if (response.status == 'success') {
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil',
                            text: response.message,
                            confirmButtonText: 'OK',
                        }).then(() => window.location.reload());
                    } else if (response.status == 'duplicate') {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Warning',
                            html: response.message,
                            confirmButtonText: 'OK',
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: 'Gagal Menyimpan Data',
                            confirmButtonText: 'OK',
                        });
                    }
                },
                error: function(xhr) {
                    $('.icon-load').remove();
                    $btn.removeAttr('disabled');
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'Terjadi kesalahan saat mengirim data.',
                        confirmButtonText: 'OK',
                    });
                    console.error(xhr.responseText);
                }
            });
        }
    </script>
@endpush