@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-6">
                <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">Insert {{ $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="{{ $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>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @foreach ($plottingSeragam as $item)
                                                            <tr>
                                                                <td><input type="text" name="nama_jenis_seragam[]"
                                                                        class="form-control"
                                                                        value="{{ $item->jenis_seragam }}" readonly>
                                                                    <input type="text" name="jenis_seragam_id[]"
                                                                        class="form-control"
                                                                        value="{{ $item->jenis_seragam_id }}" readonly
                                                                        hidden>
                                                                </td>
                                                                <td><input type="text" name="nama_tipe_seragam[]"
                                                                        class="form-control"
                                                                        value="{{ $item->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_vendor[]"
                                                                        class="form-control" value="{{ $item->vendor_id }}"
                                                                        readonly hidden>
                                                                    <input type="text" name="kode_kategori[]"
                                                                        class="form-control"
                                                                        value="{{ $item->kode_kategori }}" 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
                                                                        {{-- TAMBAHAN: Hidden Input Manual agar terbaca JS --}}
                                                                        <div class="seragam-card" style="display:none;">
                                                                            {{-- Opsi 1: Jika ingin nilai NULL di DB (pastikan field nullable), kosongkan value --}}
                                                                            <input type="hidden" name="all_size[]" value="" data-ukuran="all-size" class="ukuran-detail">
                                                                        </div>
                                                                    </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 }}">
                                                                            <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()
                                                                                    ->replace(' ', '-');
                                                                            @endphp
                                                                            <div class="seragam-card">
                                                                                <input type="hidden"
                                                                                    name="{{ $fieldName }}[]"
                                                                                    data-ukuran="{{ $dataName }}"
                                                                                    class="ukuran-detail">
                                                                            </div>
                                                                        @endforeach
                                                                    </td>
                                                                @endif
                                                                <td><input type="text" name="notes_seragam[]"
                                                                        class="form-control"">
                                                                    <input type="hidden" name="item_number_seragam[]">
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                    </tbody>
                                                </table>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">History {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        <div class="table-responsive">
                            <table class="table display" id="list_history">

                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th>Action</th>
                                        <th>Item</th>
                                        <th>Tipe</th>
                                        <th>Qty</th>
                                        <th>Ukuran</th>
                                        <th>Notes</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($seragamTahunLalu as $typeId => $items)
                                        @foreach ($items as $dt)
                                            <tr>
                                                <td>
                                                    <span class="btn badge bg-primary badge-lg"
                                                        onclick="copyData(
                                                            '{{ $dt->nik_karyawan }}',
                                                            '{{ $dt->nama_tipe_seragam }}',
                                                            '{{ $dt->nama_jenis_seragam }}',
                                                            '{{ $dt->kode_ukuran }}',
                                                            '{{ $dt->catatan }}'
                                                        )">
                                                        <i class="bi bi-check-circle me-1"></i> Copy
                                                    </span>
                                                </td>
                                                <td>{{ $dt->nama_jenis_seragam }}</td>
                                                <td>{{ $dt->nama_tipe_seragam }}</td>
                                                <td class="text-end">{{ $dt->jumlah }}</td>
                                                <td class="text-center">{{ $dt->kode_ukuran }}</td>
                                                <td>{{ $dt->catatan }}</td>
                                            </tr>
                                        @endforeach
                                    @endforeach
                                </tbody>

                            </table>
                        </div>
                    </div>
                </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 text-muted" data-bs-dismiss="modal"
                        aria-label="Tutup">X</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">
                    <p class="text-muted">Silakan isi detail ukuran custom Anda di bawah ini:</p>
                    <div id="customFormFields"></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
                    </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 data_seragam = [];
        $(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

                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() {
                    select.html('<option value="">Gagal load ukuran</option>');
                });
            });

            // GET DATA UKURAN SERAGAM TAHUN LALU
            //getDataSeragamTahunSebelumnya();

        });

        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 {

                        const imgPath = `${baseUrl}/storage/noimage.png`;
                        const content =
                            `<img src="${imgPath}" alt="Size Chart" style="max-width:100%; height:auto;">`;

                        document.getElementById('modalContent').innerHTML = content;
                        $('#sizeChartModal').modal('show');
                    }
                },
                error: function() {
                    alert('Terjadi kesalahan saat mengambil data size chart.');
                }
            });
        }

        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 => {
                if (!grouped[size.kode_ukuran]) grouped[size.kode_ukuran] = [];
                grouped[size.kode_ukuran].push(size);
            });

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

            Object.keys(grouped).forEach(kode => {
                const selected = kode == selectedSize ? '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 && 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 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" ${customAttrs}>CUSTOM (Ukuran Khusus)</option>`;
            }

            return optionsUkuran;
        }



        $(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');

                showCustomSizeModal(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() {
            Swal.fire({
                title: "Apakah Anda Yakin?",
                text: "Apakah Anda yakin ingin menyimpan data ini?",
                icon: "warning",
                showCancelButton: true,
                confirmButtonColor: "#3085d6",
                cancelButtonColor: "#d33",
                confirmButtonText: "Ya",
                cancelButtonText: "Tidak"
            }).then((result) => {
                if (!result.isConfirmed) return;
                $(this).append(
                    ' <span class="spinner-border spinner-border-sm icon-load" role="status" aria-hidden="true"></span>'
                );
                $(this).attr('disabled', '');
                // 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();
                let vendor_id = $('input[name="vendor_id"]').val();
                if (!karyawan || !karyawan_nama) {
                    Swal.fire({
                        title: 'Warning!',
                        text: 'Nama Karyawan Harus Diisi!',
                        icon: 'warning',
                        confirmButtonText: 'OK'
                    });
                    return;
                }

                let jenis_seragam = $('input[name="jenis_seragam_id[]"]');
                let nama_jenis_seragam = $('input[name="nama_jenis_seragam[]"]');
                let tipe_seragam = $('input[name="tipe_seragam_id[]"]');
                let nama_tipe_seragam = $('input[name="nama_tipe_seragam[]"]');
                let kelompok_seragam = $('input[name="kelompok_seragam[]"]');
                let qty_seragam = $('input[name="qty_seragam[]"]');
                let kode_kategori = $('input[name="kode_kategori[]"]');
                let kode_vendor = $('input[name="kode_vendor[]"]');
                let dataUkuran = $('select[name="ukuran[]"]');
                let notes = $('input[name="notes_seragam[]"]');

                let data_seragam = [];
                for (let i = 0; i < jenis_seragam.length; i++) {

                    const row = $(jenis_seragam[i]).closest('tr');

                    const kelompok = row.find('input[name="kelompok_seragam[]"]').val()?.toLowerCase() ||
                        '';
                    const ukuranSelect = row.find('select[name="ukuran[]"]');
                    const ukuranValue = ukuranSelect.val() || 'ALLSIZE';

                    // validasi ukuran
                    if (kelompok !== 'aksesoris' && !ukuranSelect.val()) {
                        Swal.fire({
                            title: 'Warning!',
                            text: 'Pilih Ukuran Terlebih Dahulu',
                            icon: 'warning',
                            confirmButtonText: 'OK'
                        });
                        return;
                    }

                    let obj = {
                        jenis_seragam: row.find('input[name="jenis_seragam_id[]"]').val(),
                        nama_jenis_seragam: row.find('input[name="nama_jenis_seragam[]"]').val(),
                        tipe_seragam: row.find('input[name="tipe_seragam_id[]"]').val(),
                        nama_tipe_seragam: row.find('input[name="nama_tipe_seragam[]"]').val(),
                        kelompok_seragam: kelompok,
                        qty_seragam: row.find('input[name="qty_seragam[]"]').val(),
                        kode_kategori: row.find('input[name="kode_kategori[]"]').val(),
                        kode_vendor: row.find('input[name="kode_vendor[]"]').val(),
                        ukuran_seragam: ukuranValue,
                        notes_seragam: row.find('input[name="notes_seragam[]"]').val(),
                        periode: periode,
                        ukuran_detail: {}
                    };

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

                    data_seragam.push(obj);
                }

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

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

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

                        if (response.status == 'success') {
                            Swal.fire({
                                icon: 'success',
                                title: 'Berhasil',
                                text: response.message,
                                confirmButtonText: 'OK',
                            }).then(() => window.location.href =
                                "{{ URL::to('/') }}/trs_uni");
                        } else if (response.status == 'duplicate') {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Warning',
                                html: response.message,
                                confirmButtonText: 'OK',
                            }).then(() => $('#btn-simpan').prop('disabled', false));

                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: 'Gagal Menyimpan Data',
                                confirmButtonText: 'OK',
                            }).then(() => $('#btn-simpan').prop('disabled', false));
                        }
                    },
                    error: function() {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Terjadi kesalahan server',
                            confirmButtonText: 'OK'
                        });
                    }
                });
            });
        });


        $('#list_history').DataTable({
            "language": {
                "search": "Cari :",
                "lengthMenu": "Tampilkan _MENU_ baris",
                "zeroRecords": "Maaf - Data tidak ada",
                "info": "Data _START_ - _END_ dari _TOTAL_",
                "infoEmpty": "Tidak ada data",
                "infoFiltered": "(pencarian dari _MAX_ data)"
            },
            "pageLength": 5,
            responsive: true,
            dom: 'frtip'
        });


        // Variabel global untuk menyimpan context modal custom
        let currentCustomRow = null;

        // Fungsi untuk menampilkan modal custom size
        function showCustomSizeModal(rowElement, jenisSeragamId, namaJenis, tipeSeragamId, namaTipe) {
            currentCustomRow = rowElement;
            $('#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 = '';

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

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

            $('#customFormFields').html(formFields);
            $('#customSizeModal').modal('show');
        }

        // Handler untuk simpan custom size
        $('#btnSaveCustomSize').click(function() {
            if (!currentCustomRow) return;

            let allFilled = true;
            $('.custom-size-input').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');

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

        function copyData(employeeId, tipeSeragam, jenisSeragam, ukuran, catatan = '') {
            const allowedPlotting = @json($allowedPlottingKeys);
            // console.log(catatan);

            const key = tipeSeragam + '|' + jenisSeragam;

            if (!allowedPlotting.includes(key)) {
                Swal.fire({
                    icon: 'error',
                    title: 'Tidak Bisa Copy',
                    text: `Jenis & tipe seragam ini tidak tersedia di plotting.`,
                    confirmButtonColor: '#028284'
                });
                return;
            }

            let copied = false;

            // Loop form kiri (detail seragam) dan cari row dengan tipe & jenis cocok
            $('#insert-table tbody tr').each(function() {
                const row = $(this);
                const item = row.find('input[name="nama_jenis_seragam[]"]').val();
                const tipe = row.find('input[name="nama_tipe_seragam[]"]').val();
                if (tipe === tipeSeragam && item === jenisSeragam) {
                    row.find('select[name="ukuran[]"]').val(ukuran).trigger('change');
                    // console.log("Copy ke row:", item, tipe, "set ukuran:", ukuran);

                    if (catatan) {
                        row.find('input[name="notes_seragam[]"]').val(catatan);
                    }
                    row.css('background-color', '#d4edda');
                    copied = true;
                }
            });

            if (copied) {
                Swal.fire({
                    position: "top-end",
                    icon: "success",
                    title: "Data Berhasil di Copy",
                    showConfirmButton: false,
                    timer: 500,
                    width: "400px"
                });
            } else {
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak ditemukan',
                    text: 'Tidak ada baris yang cocok di form kiri.'
                });
            }
        }
    </script>
@endpush