@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => 'Parameter Mesin'])
    
    <div class="container-fluid py-2">
        <div class="row">
<div class="col-12 mb-2">
                    <div class="card shadow border-0">
                        <div class="card-body p-3">
                            <div class="row g-2 align-items-end">
                                <div class="col-12" id="container-parameter-profile">
                                    <label for="parameter_profile_id" class="form-label fw-semibold">Profil Parameter</label>
                                    <select class="form-select" id="parameter_profile_id" name="parameter_profile_id">
                                        <option value="">-- Pilih Profil Parameter --</option>
                                        @foreach ($parameter_profiles as $profile)
                                            <option value="{{ $profile->id }}"
                                                data-parameter-set-id="{{ $profile->parameter_set_id }}">
                                                {{ $profile->nama_gedung }} /
                                                {{ $profile->nama_line ?: 'Seluruh Line' }} /
                                                Item {{ $profile->item_group }} —
                                                {{ $profile->nama_parameter_set }}
                                            </option>
                                        @endforeach
                                    </select>
                                    <input type="hidden" id="parameter_set_id" name="parameter_set_id">
                                    @if ($parameter_profiles->isEmpty())
                                        <small class="text-danger">Belum ada Profil Parameter aktif yang memiliki komponen.</small>
                                    @endif
                                </div>
                                <div class="col-12" id="container-mesin">
                                    <label for="mesin_id" class="form-label fw-semibold">Resources</label>
                                    <select class="form-select" id="mesin_id" name="mesin_id" disabled>
                                        <option value="">-- Pilih Profil Parameter terlebih dahulu --</option>
                                    </select>
                                </div>
                                <div class="col-12" id="container-tanggal">
                                    <label for="Tanggal" class="form-label fw-semibold">Tanggal</label>
                                    <input type="date" class="form-control" id="Tanggal" name="Tanggal" value="{{ date('Y-m-d') }}">
                                </div>
                                <div class="col-6 mb-2">
                                    <button type="button" class="btn btn-secondary w-100" onclick="history.back()">
                                        <i class="fas fa-circle-left me-1"></i><span class="font-weight-bold">Kembali</span>
                                    </button>
                                </div>
                                <div class="col-6 mb-2">
                                    <button type="button" class="btn btn-primary w-100" onclick="validateAndSimpan()" id="btn-simpan-mobile" style="display:none;">
                                        <i class="fas fa-save me-1"></i><span class="font-weight-bold">Simpan</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div id="dynamic-header-container" class="mt-2 card rounded top rounded-4" style="display:none;">
                        <div class="d-flex align-items-center mb-3 bg-primary rounded">
                            <hr class="flex-grow-1 horizontal dark my-0">
                            <span class="mx-3 px-4 py-2 text-white text-uppercase fw-bold fs-5">
                                Header Information
                            </span>
                            <hr class="flex-grow-1 horizontal dark my-0">
                        </div>
                        <div id="dynamic-header-row" class="row g-2 m-2">
                            <!-- Dynamic headers will be rendered here by JS -->
                        </div>
                    </div>
                </div>

                <div class="col-12">
                    <div id="generate-btn-container" class="mt-2" style="display:none;">
                        <button type="button" id="btn-generate" class="btn btn-info text-white w-100">
                            Generate Parameter
                        </button>
                    </div>
                </div>

                <div class="col-12" id="parameter-container">
                    <div class="text-center py-4 text-muted">
                        <p>Tidak ada parameter untuk mesin ini.</p>
                    </div>
                </div>
        </div>
    </div>
@endsection

@push('js')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>
    <script>
        const jenisParams = {!! json_encode($jenis_param) !!};
        let ratioRules = {};

        function getJenisLabel(value) {
            if (!value || value === 'Form' || value === 'Roll') return null;
            const found = jenisParams.find(p => p.value === value);
            return found ? found.name : value;
        }

        function getUnitLabel(unit) {
            if (!unit || unit === '-' || unit === '.' || unit === 'null') return '';
            return ` (${unit})`;
        }

        function validateFormatInput(input) {
            const formatRaw = input.getAttribute('data-format');
            if (!formatRaw || formatRaw === '') return true;
            const format = parseInt(formatRaw);
            if (isNaN(format)) return true;

            const val = input.value.trim();
            if (!val) {
                input.classList.remove('is-invalid');
                const feedback = input.parentNode.querySelector('.format-feedback');
                if (feedback) feedback.style.display = 'none';
                return true;
            }
            const parts = val.split('.');
            if (parts.length > 1 && parts[1].length > format) {
                input.classList.add('is-invalid');
                let feedback = input.parentNode.querySelector('.format-feedback');
                if (!feedback) {
                    feedback = document.createElement('div');
                    feedback.className = 'invalid-feedback format-feedback d-block';
                    input.parentNode.appendChild(feedback);
                }
                feedback.textContent = 'Maksimal ' + format + ' angka di belakang koma.';
                feedback.style.display = 'block';
                return false;
            } else {
                input.classList.remove('is-invalid');
                const feedback = input.parentNode.querySelector('.format-feedback');
                if (feedback) feedback.style.display = 'none';
                return true;
            }
        }

        function validateRatioInput(input) {
            const valRaw = input.value.trim();
            const val = parseFloat(valRaw);
            const min = parseFloat(input.dataset.ratioMin);
            const max = parseFloat(input.dataset.ratioMax);
            const feedback = input.nextElementSibling;

            if (valRaw === '' || isNaN(val) || val < min || val > max) {
                input.classList.add('is-invalid');
                if (feedback && feedback.classList.contains('ratio-feedback')) {
                    feedback.textContent = 'Batas: ' + min + ' – ' + max;
                    feedback.style.color = '#dc3545';
                }
                return false;
            } else {
                input.classList.remove('is-invalid');
                if (feedback && feedback.classList.contains('ratio-feedback')) {
                    feedback.textContent = '';
                }
                return true;
            }
        }

        if (window.jQuery && $.fn.select2 && $.fn.select2.amd) {
            try {
                $.fn.select2.amd.require(['select2/selection/search'], function(Search) {
                    var oldRemoveChoice = Search.prototype.searchRemoveChoice;
                    Search.prototype.searchRemoveChoice = function() {
                        oldRemoveChoice.apply(this, arguments);
                        if (this.$search) {
                            this.$search.val('');
                            this.handleSearch();
                        }
                    };
                });
            } catch (e) {
                console.warn('Select2 searchRemoveChoice override failed', e);
            }
        }

        // Prevent accidental wipe-out of all selections on multiple select2
        $(document).on('select2:clearing', '.dynamic-select2[multiple]', function(e) {
            e.preventDefault();
        });

        $(document).ready(function() {
            const mesinSelect = document.getElementById('mesin_id');
            const parameterProfileSelect = document.getElementById('parameter_profile_id');
            const parameterSetInput = document.getElementById('parameter_set_id');
            const dynamicHeaderRow = document.getElementById('dynamic-header-row');
            const generateBtnContainer = document.getElementById('generate-btn-container');

            function syncSelectedProfile() {
                const selectedOption = parameterProfileSelect.options[parameterProfileSelect.selectedIndex];
                parameterSetInput.value = selectedOption ? (selectedOption.dataset.parameterSetId || '') : '';
                return parameterProfileSelect.value;
            }

            async function loadMachines() {
                const parameterProfileId = syncSelectedProfile();
                const machineContainer = document.getElementById('container-mesin');
                mesinSelect.innerHTML = '<option value="">-- Pilih Resource --</option>';
                mesinSelect.disabled = true;
                machineContainer.style.display = '';
                if (!parameterProfileId) return;

                try {
                    const res = await $.get('{{ URL::to('/') }}/trsprm/get-machines', {
                        parameter_profile_id: parameterProfileId
                    });
                    (res.data || []).forEach(machine => {
                        const option = new Option(machine.resource_name, machine.id);
                        option.dataset.kategoriProc = machine.kategori_proc || '';
                        option.dataset.spekMesin = machine.spek_mesin || '';
                        option.dataset.kategoriMesinId = machine.kategori_mesin_id || '';
                        mesinSelect.add(option);
                    });
                    mesinSelect.disabled = !(res.data || []).length;
                    if (res.auto_select && (res.data || []).length) {
                        mesinSelect.value = String(res.data[0].id);
                        machineContainer.style.display = 'none';
                    }
                } catch (error) {
                    Swal.fire({ icon: 'error', title: 'Gagal', text: 'Daftar resource tidak dapat dimuat.' });
                }
            }
            function loadMachineHeaders() {
                const mesin_id = mesinSelect.value;
                const parameter_profile_id = parameterProfileSelect.value;
                const dynamicHeaderContainer = document.getElementById('dynamic-header-container');

                if (!mesin_id || !parameter_profile_id) {
                    if (dynamicHeaderContainer) dynamicHeaderContainer.style.display = 'none';
                    if (generateBtnContainer) generateBtnContainer.style.display = 'none';
                    $('#parameter-container').empty();
                    return;
                }

                if (dynamicHeaderContainer) dynamicHeaderContainer.style.display = 'none';
                if (generateBtnContainer) generateBtnContainer.style.display = 'none';
                $('#btn-generate').prop('disabled', true);
                $('#parameter-container').empty();

                Swal.fire({
                    title: 'Memuat Header...',
                    text: 'Mohon tunggu sebentar',
                    allowOutsideClick: false,
                    allowEscapeKey: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: '{{ URL::to('/') }}/trsprm/get-headers',
                    method: 'GET',
                    data: {
                        mesin_id: mesin_id,
                        parameter_profile_id: parameter_profile_id
                    },
                    success: function(res) {
                        Swal.close();
                        if (res.status === 'success') {
                            const headerContainer = $('#dynamic-header-row');
                            headerContainer.empty();

                            res.data.forEach(param => {
                                param.isRange = false;
                                param.rangeSource = null;
                                param.showWhenLine = null;

                                if (param.source_data) {
                                    const parts = param.source_data.split(';');
                                    parts.forEach(part => {
                                        const pTrim = part.trim();
                                        if (pTrim.toLowerCase().startsWith('range_source:')) {
                                            param.rangeSource = pTrim.substring('range_source:'.length).trim();
                                            param.isRange = true;
                                        } else if (
                                            pTrim.toLowerCase() === 'is_range' ||
                                            pTrim.toLowerCase() === 'is_range:1' ||
                                            pTrim.toLowerCase() === 'is_range:true'
                                        ) {
                                            param.isRange = true;
                                        } else if (pTrim.toLowerCase().startsWith('line:')) {
                                            param.showWhenLine = pTrim.substring('line:'.length).trim();
                                        }
                                    });
                                }
                            });

                            const visibleHeaders = res.data.filter(param => !param.isRange);
                            const headerCount = visibleHeaders.length;

                            let colSize = 12;
                            if (headerCount === 2) colSize = 6;
                            else if (headerCount >= 3) colSize = 6;

                            res.data.forEach(param => {
                                if (param.isRange) {
                                    let inputHtml = '<input type="hidden" class="dynamic-param-input range-target-input" ' +
                                        'id="range_target_' + param.id + '" ' +
                                        'data-id="' + param.id + '" ' +
                                        'data-name="' + param.nama_parameter + '" ' +
                                        'data-is-header="1" ' +
                                        'data-range-source="' + (param.rangeSource || '') + '" ' +
                                        'data-prefix-format="' + (param.prefix_format || '') + '" ' +
                                        'data-source-data="' + (param.source_data || '') + '">';
                                    headerContainer.append(inputHtml);
                                    return;
                                }

                                let inputHtml = '';
                                const isMultiple = param.is_multiple || (param.source_data && param.source_data.includes(':multiple'));

                                if (param.options && param.options.length > 0) {
                                    let options = isMultiple ? '' : '<option value="">-- Pilih --</option>';
                                    param.options.forEach(opt => {
                                        let dataAttrs = '';
                                        Object.entries(opt).forEach(([key, val]) => {
                                            if (key !== 'id' && key !== 'text' && val !== undefined && val !== null && typeof val !== 'object') {
                                                const attrName = key.toLowerCase().replace(/_/g, '-');
                                                dataAttrs += ' data-' + attrName + '="' + String(val).replace(/"/g, '&quot;') + '"';
                                            }
                                        });
                                        options += '<option value="' + opt.id + '"' + dataAttrs + '>' + opt.text + '</option>';
                                    });

                                    const selectName = isMultiple ? 'parameter_' + param.id + '[]' : 'parameter_' + param.id;
                                    inputHtml = '<select class="form-select dynamic-select2 dynamic-param-input" name="' + selectName + '" id="parameter_' + param.id + '" data-name="' + param.nama_parameter + '" data-is-header="1" data-prefix-format="' + (param.prefix_format || '') + '" data-source-data="' + (param.source_data || '') + '"' + (isMultiple ? ' multiple' : '') + '>' + options + '</select>';
                                } else {
                                    const isNumber = param.tipe_input === 'Number';
                                    inputHtml = '<input type="text" class="form-control dynamic-param-input ' + (isNumber ? 'number-only-input' : '') + '" name="parameter_' + param.id + '" id="parameter_' + param.id + '" data-name="' + param.nama_parameter + '" data-is-header="1" data-prefix-format="' + (param.prefix_format || '') + '" data-source-data="' + (param.source_data || '') + '" placeholder="Isi ' + param.nama_parameter + '..." ' + (isNumber ? 'inputmode="decimal"' : '') + '>';
                                }

                                const lineCondition = param.showWhenLine || '';
                                headerContainer.append(
                                    '<div class="col-' + colSize + ' mb-2 ' + (lineCondition ? 'd-none' : '') + '" data-param-container-id="' + param.id + '" data-show-when-line="' + lineCondition + '">' +
                                        '<label class="form-label fw-semibold">' + param.nama_parameter + '</label>' +
                                        inputHtml +
                                    '</div>'
                                );
                            });

                            $('#dynamic-header-row .dynamic-select2').each(function() {
                                const isMultiple = $(this).prop('multiple');
                                const paramName = ($(this).data('name') || '').toLowerCase();
                                const isOperator = paramName.includes('operator') || paramName.includes('petugas');
                                $(this).select2({
                                    placeholder: '-- Pilih ' + $(this).data('name') + ' --',
                                    allowClear: !isMultiple,
                                    width: '100%',
                                    maximumSelectionLength: (isOperator && isMultiple) ? 3 : null,
                                    language: {
                                        maximumSelected: function(e) {
                                            return "Maksimal 3 operator dapat dipilih";
                                        }
                                    }
                                });
                            });

                            if (dynamicHeaderContainer) dynamicHeaderContainer.style.display = 'block';
                            if (generateBtnContainer) generateBtnContainer.style.display = 'block';

                            toggleLineDependentFields();
                            checkHeaderInputs();
                            toggleNoRoll();
                        }
                    },
                    error: function() {
                        Swal.close();
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Gagal mengambil data header!'
                        });
                    }
                });
            }

            function normalizeLineValue(value) {
                return String(value || '').trim().toLowerCase().replace(/\s+/g, '');
            }

            function getLineInput() {
                return $('#dynamic-header-row .dynamic-param-input').filter(function() {
                    const name = ($(this).data('name') || '').toLowerCase();
                    return name.includes('line');
                }).first();
            }

            function lineConditionMatches(condition, lineInput) {
                if (!condition) return true;

                const lineValue = lineInput.val() || '';
                const lineText = lineInput.find('option:selected').text().trim();
                const expected = normalizeLineValue(condition);
                const actual = normalizeLineValue(lineValue);
                const actualText = normalizeLineValue(lineText);

                return actual === expected || actualText === expected || actual.includes(expected) || actualText.includes(expected);
            }

            function toggleLineDependentFields() {
                if (toggleLineDependentFields.inProgress) {
                    return;
                }
                toggleLineDependentFields.inProgress = true;

                try {
                    const lineInput = getLineInput();
                    const lineValue = lineInput.val() || '';

                    $('#dynamic-header-row [data-param-container-id]').each(function() {
                        const condition = $(this).attr('data-show-when-line') || '';
                        const $container = $(this);
                        const $input = $container.find('.dynamic-param-input');

                        if (!condition) {
                            $container.removeClass('d-none');
                        } else {
                            const matches = lineConditionMatches(condition, lineInput);
                            $container.toggleClass('d-none', !matches);

                            if (!matches) {
                                const triggerChange = $input.data('select2');
                                $input.val(null);
                                if (triggerChange) {
                                    $input.triggerHandler('change');
                                }
                            }
                        }
                    });
                } finally {
                    toggleLineDependentFields.inProgress = false;
                }
            }

            function checkHeaderInputs() {
                let allFilled = true;
                const inputs = $('#dynamic-header-row input, #dynamic-header-row select').filter(function() {
                    return !$(this).closest('[data-param-container-id]').hasClass('d-none');
                });

                if (inputs.length === 0) {
                    $('#btn-generate').prop('disabled', false);
                    return;
                }

                inputs.each(function() {
                    const val = $(this).val();
                    if (val === null || val === '' || (Array.isArray(val) && val.length === 0)) {
                        allFilled = false;
                        return false;
                    }
                });
                $('#btn-generate').prop('disabled', !allFilled);
            }

            $(document).on('input change', '#dynamic-header-row input, #dynamic-header-row select', function() {
                const hName = ($(this).attr('data-name') || '').toLowerCase().replace(/[\s_\-]/g, '');
                const sData = ($(this).attr('data-source-data') || '').toLowerCase();
                if (hName === 'mesin' || hName === 'machine' || sData.includes('tbl_mst_mesin')) {
                    const mVal = $(this).val();
                    if (mVal && $('#mesin_id').length) {
                        $('#mesin_id').val(mVal);
                    }
                }
                toggleLineDependentFields();
                checkHeaderInputs();
            });

            $(document).on('input change', '.dynamic-param-input, #dynamic-header-row input, #dynamic-header-row select', function() {
                syncDetailNoRoll();
            });

            function generateNoRollJadi(tanggal, shift, grup, kategoriProc, SpekMesin) {
                const date = new Date(tanggal);
                const tahunIndex = (date.getFullYear() - 2025) % 26;
                const tahunKode = String.fromCharCode(65 + (tahunIndex < 0 ? tahunIndex + 26 : tahunIndex));
                const bulanKode = String.fromCharCode(65 + date.getMonth());
                const tanggalKode = String(date.getDate()).padStart(2, '0');
                const procKode = kategoriProc ? String(kategoriProc).toUpperCase() : '';
                const specKode = SpekMesin ? String(SpekMesin).toUpperCase() : '';
                return tahunKode + bulanKode + tanggalKode + procKode + specKode;
            }

            function resolvePrefixJS(template, tanggal, selectedMesin) {
                if (!tanggal || !template) return '';

                const date = new Date(tanggal);
                const year = date.getFullYear();
                const month = date.getMonth() + 1;
                const day = date.getDate();

                const tahunIndex = (year - 2025) % 26;
                const tahunKode = String.fromCharCode(65 + (tahunIndex < 0 ? tahunIndex + 26 : tahunIndex));
                const bulanKode = String.fromCharCode(65 + (month - 1));
                const tanggalKode = String(day).padStart(2, '0');

                const headerOptionAttrs = {};
                const headerValues = {};

                const extractAttrs = function(el, prefix) {
                    if (!el || !el.length) return;
                    const domEl = el[0];
                    if (!domEl || !domEl.attributes) return;

                    for (let i = 0; i < domEl.attributes.length; i++) {
                        const attr = domEl.attributes[i];
                        if (attr.name && attr.name.startsWith('data-')) {
                            const rawKey = attr.name.substring(5).toLowerCase();
                            const cleanKey = rawKey.replace(/[_\-]/g, '');
                            const val = String(attr.value || '').toUpperCase();
                            headerOptionAttrs[rawKey] = val;
                            headerOptionAttrs[rawKey.replace(/-/g, '_')] = val;
                            headerOptionAttrs[cleanKey] = val;
                            if (prefix) {
                                headerOptionAttrs[prefix + '_' + rawKey] = val;
                                headerOptionAttrs[prefix + '_' + rawKey.replace(/-/g, '_')] = val;
                                headerOptionAttrs[prefix + '_' + cleanKey] = val;
                            }
                        }
                    }
                };

                if (selectedMesin && selectedMesin.length) {
                    extractAttrs(selectedMesin, 'mesin');
                }

                $('#dynamic-header-row .dynamic-param-input').each(function() {
                    const $input = $(this);
                    const paramName = ($input.attr('data-name') || '').trim();
                    const cleanParamName = paramName.toLowerCase().replace(/[\s_\-]/g, '');
                    const inputVal = $input.val();

                    if (inputVal !== undefined && inputVal !== null && inputVal !== '') {
                        headerValues[cleanParamName] = inputVal;
                    }

                    if ($input.is('select')) {
                        const $selected = $input.find(':selected');
                        if ($selected.length) {
                            extractAttrs($selected, cleanParamName);
                        }
                    }
                });

                let kategoriProc = headerOptionAttrs['kategori_proc'] ||
                    headerOptionAttrs['proc'] ||
                    headerOptionAttrs['kategoriproc'] ||
                    headerOptionAttrs['hasil'] ||
                    (selectedMesin ? (selectedMesin.attr('data-kategori-proc') || selectedMesin.data('kategori-proc') || '') : '');

                let SpekMesin = headerOptionAttrs['spek_mesin'] ||
                    headerOptionAttrs['spek'] ||
                    headerOptionAttrs['spec'] ||
                    headerOptionAttrs['spekmesin'] ||
                    headerOptionAttrs['kodemesin'] ||
                    (selectedMesin ? (selectedMesin.attr('data-spek-mesin') || selectedMesin.data('spek-mesin') || '') : '');

                const procKode = kategoriProc ? String(kategoriProc).toUpperCase() : '';
                const specKode = SpekMesin ? String(SpekMesin).toUpperCase() : '';

                let shiftValue = headerValues['shift'] || headerValues['shif'] || headerValues['shft'] || '';
                if (!shiftValue) {
                    $('#dynamic-header-row .dynamic-param-input').each(function() {
                        const hName = ($(this).attr('data-name') || '').toLowerCase().replace(/[\s_\-]/g, '');
                        if (['shift', 'shif', 'shft'].includes(hName)) {
                            shiftValue = $(this).val() || '';
                            return false;
                        }
                    });
                }
                const shiftKode = String(shiftValue).toUpperCase().replace(/[^0-9a-zA-Z]/g, '');

                const fixedReplacements = {
                    'tahun': tahunKode,
                    'tahun_code': tahunKode,
                    'bulan': bulanKode,
                    'bulan_code': bulanKode,
                    'tanggal': tanggalKode,
                    'tanggal_code': tanggalKode,
                    'tgl': tanggalKode,
                    'tgl_code': tanggalKode,
                    'spek_mesin': specKode,
                    'spek': specKode,
                    'spec': specKode,
                    'kode_mesin': specKode,
                    'kategori_proc': procKode,
                    'proc': procKode,
                    'hasil': procKode,
                    'shift': shiftKode,
                    'shift_code': shiftKode,
                    'kode_shift': shiftKode
                };

                let resolved = template;
                const tokenRegex = /\{([a-zA-Z0-9_\-]+)\}/g;
                let match;
                const replacements = {};

                while ((match = tokenRegex.exec(template)) !== null) {
                    const token = match[1];
                    const tokenLower = token.toLowerCase();
                    const cleanToken = tokenLower.replace(/[_\-]/g, '');

                    if (fixedReplacements.hasOwnProperty(tokenLower)) {
                        replacements['{' + token + '}'] = fixedReplacements[tokenLower];
                    } else if (headerOptionAttrs.hasOwnProperty(tokenLower)) {
                        replacements['{' + token + '}'] = headerOptionAttrs[tokenLower];
                    } else if (headerOptionAttrs.hasOwnProperty(cleanToken)) {
                        replacements['{' + token + '}'] = headerOptionAttrs[cleanToken];
                    } else if (headerValues.hasOwnProperty(cleanToken)) {
                        replacements['{' + token + '}'] = String(headerValues[cleanToken]).toUpperCase().replace(/[^0-9a-zA-Z]/g, '');
                    } else {
                        let foundVal = '';
                        $('#dynamic-header-row .dynamic-param-input').each(function() {
                            const hName = ($(this).attr('data-name') || '').toLowerCase().replace(/[\s_\-]/g, '');
                            if (hName === cleanToken) {
                                foundVal = $(this).val() || '';
                                return false;
                            }
                        });
                        replacements['{' + token + '}'] = String(foundVal).toUpperCase().replace(/[^0-9a-zA-Z]/g, '');
                    }
                }

                for (const [placeholder, value] of Object.entries(replacements)) {
                    resolved = resolved.replace(new RegExp(placeholder.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'), value);
                }
                return resolved;
            }

            function syncDetailNoRoll() {
                $('.range-detail-input').each(function() {
                    const $target = $(this);
                    const targetId = $target.attr('data-id');
                    const targetName = $target.attr('data-name');
                    const sourceName = ($target.attr('data-range-source') || '').toLowerCase();
                    const prefixFormat = $target.attr('data-prefix-format');

                    let $sourceInput = null;
                    $('#dynamic-header-row .dynamic-param-input').each(function() {
                        const inputName = ($(this).attr('data-name') || '').toLowerCase();
                        if (sourceName && (inputName.includes(sourceName) || sourceName.includes(inputName))) {
                            $sourceInput = $(this);
                            return false;
                        }
                    });

                    if (!$sourceInput || $sourceInput.length === 0) return;

                    const qtyVal = parseInt($sourceInput.val()) || 0;
                    const nextCounter = parseInt($target.attr('data-next-counter')) || 1;

                    let prefix = '';
                    const tanggal = $('#Tanggal').val();
                    let selectedMesin = $('#mesin_id').find(':selected');
                    if (!selectedMesin || !selectedMesin.length || !selectedMesin.val()) {
                        $('#dynamic-header-row .dynamic-param-input').each(function() {
                            const hName = ($(this).attr('data-name') || '').toLowerCase().replace(/[\s_\-]/g, '');
                            const sData = ($(this).attr('data-source-data') || '').toLowerCase();
                            if (hName === 'mesin' || hName === 'machine' || sData.includes('tbl_mst_mesin')) {
                                selectedMesin = $(this).find(':selected');
                                return false;
                            }
                        });
                    }

                    if (prefixFormat) {
                        prefix = resolvePrefixJS(prefixFormat, tanggal, selectedMesin);
                    } else {
                        const shift = $('[name*="parameter_"][data-name*="Shift"]').val();
                        const grup = $('[name*="parameter_"][data-name*="Grup"]').val();
                        const kategoriProc = selectedMesin ? (selectedMesin.attr('data-kategori-proc') || selectedMesin.data('kategori-proc')) : '';
                        const SpekMesin = selectedMesin ? (selectedMesin.attr('data-spek-mesin') || selectedMesin.data('spek-mesin')) : '';
                        if (tanggal && kategoriProc) {
                            prefix = generateNoRollJadi(tanggal, shift, grup, kategoriProc, SpekMesin);
                        }
                    }

                    if (qtyVal > 0) {
                        const startNum = nextCounter;
                        const endNum = nextCounter + qtyVal - 1;
                        const startPad = startNum.toString().padStart(3, '0');
                        const endPad = endNum.toString().padStart(3, '0');
                        const rangeStr = (qtyVal === 1) ? startPad : startPad + '-' + endPad;
                        const fullVal = prefix + rangeStr;
                        $target.val(fullVal);
                    } else {
                        $target.val('');
                    }
                });
            }

            window.syncDetailNoRoll = syncDetailNoRoll;

            function toggleNoRoll() {
                const mesin_id = mesinSelect.value;
                const selectedOption = mesinSelect.options[mesinSelect.selectedIndex];
                const kategoriMesinId = selectedOption ? parseInt(selectedOption.dataset.kategoriMesinId, 10) : null;
                const cortecKategoriIds = @json($mesinCortecKategoriIds);

                const isCortec = kategoriMesinId && cortecKategoriIds.includes(kategoriMesinId);

                if (!mesin_id) {
                    return;
                }

                if (isCortec) {
                    // Logic for Cortec machines
                }
            }

            // Generate Parameter Click Handler
            $('#btn-generate').on('click', function() {
            let mesin_id = $('[name="mesin_id"]').val();
            if (!mesin_id) {
                $('#dynamic-header-row .dynamic-param-input').each(function() {
                    const nm = ($(this).attr('data-name') || '').toLowerCase();
                    const sData = ($(this).attr('data-source-data') || '').toLowerCase();
                    if (nm.includes('mesin') || nm.includes('machine') || sData.includes('tbl_mst_mesin')) {
                        mesin_id = $(this).val();
                        return false;
                    }
                });
            }
            const Tanggal = $('[name="Tanggal"]').val();
            if (!Tanggal) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Tanggal harus diisi!'
                });
                return;
            }
            if (!mesin_id) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Pilih Mesin terlebih dahulu!'
                });
                return;
            }

            Swal.fire({
                title: 'Memuat Data...',
                text: 'Mohon tunggu sebentar',
                allowOutsideClick: false,
                allowEscapeKey: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });

            // Kumpulkan data dari dynamic header
            let headerData = {};
            let noRollVal = '';
            let Shift = '',
                Grup = '',
                Operator = '';

            $('#dynamic-header-row .dynamic-param-input').each(function() {
                const name = $(this).attr('name');
                const val = $(this).val();
                const nm = ($(this).attr('data-name') || '').toLowerCase();

                headerData[name] = val;

                if (nm.includes('roll asal')) noRollVal = val;
                if (nm.includes('shift')) Shift = val;
                if (nm.includes('grup') || nm.includes('group')) Grup = val;
                if (nm.includes('operator')) Operator = val;
                if (nm.includes('mesin') || nm.includes('machine')) {
                    if (!mesin_id) mesin_id = val;
                }
            });

            $.ajax({
                url: '{{ URL::to('/') }}/trsprm/generate',
                method: 'GET',
                data: $.extend({
                    _token: '{{ csrf_token() }}',
                    mesin_id: mesin_id,
                    parameter_profile_id: document.getElementById('parameter_profile_id').value,
                    Tanggal: Tanggal,
                    Shift: Shift,
                    Grup: Grup,
                    Operator: Operator,
                    no_roll: noRollVal,
                }, headerData),
                success: function(res) {
                    if (res.status === 'success') {
                        const parameterData = Array.isArray(res.data)
                            ? res.data
                            : Object.values(res.data || {});

                        if (parameterData.length === 0) {
                            $('#parameter-container').empty().show();
                            Swal.fire({
                                icon: 'info',
                                title: 'Tidak ada parameter',
                                text: 'Profil Parameter yang dipilih belum mempunyai komponen parameter aktif.'
                            });
                            return;
                        }
                        if (res.no_roll_asal) {
                            // Find header field for No Roll Asal and update it
                            $('#dynamic-header-row [data-name*="roll_asal"]').val(res.no_roll_asal);
                        }
                        ratioRules = res.ratio_rules ?? {};

                        const kategoriNama = res.kategori_nama ? res.kategori_nama.toLowerCase() : '';

                        if (/corte[cq]/i.test(kategoriNama)) {
                            $('#card-cooler').show();
                        } else {
                            $('#card-cooler').hide();
                        }

                        const hasRollParams = parameterData.some(p => (p.jenis_parameter || '').toLowerCase() === 'roll');

                        if (hasRollParams) {
                            loadDataRollForm(parameterData, Tanggal, mesin_id, Shift, Grup);
                        } else {
                            loadDataSimpleForm(parameterData, Tanggal, mesin_id, Shift, Grup, res.cooler_data ??
                                null, res.cooler_param_ids ?? [], res.item_data ?? null, res
                                .is_cortec ?? false);
                        }

                        $('#parameter-container').stop(true, true).show();

                        // Run range sync immediately after generating
                        window.syncDetailNoRoll();

                        Swal.close();
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Gagal',
                            text: 'Tidak ada parameter untuk mesin ini.'
                        });
                        $('#parameter-container').html(
                            '<p class="text-muted text-center py-5">Tidak ada parameter untuk mesin ini.</p>'
                        );
                    }
                },
                error: function() {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Gagal mengambil data!'
                    });
                }

            });
        });

function loadDataRollForm(data, Tanggal, mesin_id, Shift, Grup) {

            function buildCommonCard(params) {
                if (params.length === 0) return '';
                let card = '<div class="card shadow-none border mb-3"><div class="card-header py-2" style="background-color: #e9ecef;"><h6 class="mb-0 text-xs fw-bold text-primary"><i class="fas fa-cog me-1"></i> Parameter Umum</h6><span class="badge bg-success text-white">Common</span></div><div class="card-body p-3"><div class="row g-3">';
                params.forEach(p => {
                    card += buildSingleParam(p);
                });
                card += '</div></div></div>';
                return card;
            }

            const nonRollItems = data.filter(d => {
                const jenis = (d.jenis_parameter || '').toLowerCase();
                return jenis !== 'roll' && jenis !== 'common';
            });
            const dataRoll = data.filter(d => (d.jenis_parameter || '').toLowerCase() === 'roll');
            const commonItems = data.filter(d => (d.jenis_parameter || '').toLowerCase() === 'common').sort((a, b) => {
                const urutA = parseInt(a.urut) || 0;
                const urutB = parseInt(b.urut) || 0;
                return urutA - urutB;
            });

            const commonsCard = buildCommonCard(commonItems);

            const groupedBySubHeader = {};
            const normalItems = [];
            nonRollItems.forEach(item => {
                if (!item || !item.nama_parameter) return;
                const subHeader = (item.sub_header || '').trim();
                if (subHeader) {
                    if (!groupedBySubHeader[subHeader]) groupedBySubHeader[subHeader] = [];
                    groupedBySubHeader[subHeader].push(item);
                } else {
                    normalItems.push(item);
                }
            });

            function buildSingleParam(paramItem) {
                const namaParam = paramItem.nama_parameter.trim();
                const namaUnit = getUnitLabel(paramItem.unit);
                const isNumberOnly = paramItem.tipe_input === 'Number';
                const isDropdown = paramItem.tipe_input === 'Dropdown' || (paramItem.options && paramItem.options
                    .length > 0);
                const isRangeParam = paramItem.is_range === true || paramItem.isRange === true || (paramItem
                    .source_data && paramItem.source_data.includes('is_range'));

                let inputHtml = '';
                if (isDropdown) {
                    let options = '<option value="">-- Pilih --</option>';
                    if (paramItem.options && paramItem.options.length > 0) {
                        paramItem.options.forEach(opt => {
                            options += `<option value="${opt.id}">${opt.text}</option>`;
                        });
                    } 
                    const isCommon = (paramItem.jenis_parameter || '').toLowerCase() === 'common';
                    const commonReadonly = (isCommon && paramItem.value_parameter) ? 'disabled' : '';
                    inputHtml = `<select class="form-select form-select-sm dynamic-select2 ${commonReadonly ? 'bg-light' : ''}" 
                                 name="parameter_${paramItem.id}" 
                                 data-name="${namaParam}" ${commonReadonly}>${options}</select>`;
                } else {
                    let defaultVal = paramItem.value_parameter ?? '';
                    if (!defaultVal && paramItem.prefix) {
                        defaultVal = paramItem.prefix;
                    }

                    const isNoRoll = namaParam === 'No Roll Asal';
                    const fieldNoRolljadi = namaParam === 'No Roll Jadi';
                    const NoUrutJadi = namaParam === 'No Urut Roll Jadi';
                    const isCommon = (paramItem.jenis_parameter || '').toLowerCase() === 'common';
                    const commonReadonly = (isCommon && defaultVal) ? 'readonly' : '';

                    const validationAttrs = [
                        paramItem.tipe_input ? `data-tipe="${paramItem.tipe_input}"` : '',
                        paramItem.format != null && paramItem.format !== '' ? `data-format="${paramItem.format}"` :
                        '',
                        paramItem.min != null ? `data-min="${paramItem.min}"` : '',
                        paramItem.max != null ? `data-max="${paramItem.max}"` : '',
                        paramItem.max_length != null ? `data-max-length="${paramItem.max_length}"` : '',
                        paramItem.allow_negative === false ? `data-allow-negative="false"` : '',
                        paramItem.allow_decimal === false ? `data-allow-decimal="false"` : '',
                    ].filter(Boolean).join(' ');

                    inputHtml = `<input type="text"
                class="form-control form-control-sm ${isNumberOnly ? 'number-only-input' : ''} ${isRangeParam ? 'range-detail-input' : ''} ${(isCommon && defaultVal) ? 'bg-light' : ''}"
                name="parameter_${paramItem.id}"
                value="${defaultVal}"
                placeholder="${isNumberOnly ? 'Angka saja...' : 'Isi nilai...'}"
                ${isNoRoll ? 'id="input-no-roll-asal"' : ''}
                ${fieldNoRolljadi ? 'id="input-no-roll-jadi"' : ''}
                ${NoUrutJadi ? 'id="input-no-urut-jadi"' : ''}
                ${isRangeParam ? `readonly data-id="${paramItem.id}" data-name="${namaParam}" data-next-counter="${paramItem.next_counter || 1}" data-range-source="${paramItem.range_source || ''}" data-prefix-format="${paramItem.prefix_format || ''}"` : ''}
                ${commonReadonly}
                ${isNumberOnly ? 'inputmode="decimal"' : ''}
                ${validationAttrs}>`;
                }

                return `
                    <div class="col-md-4">
                        <label class="form-label text-xs fw-bold mb-1">${namaParam}${namaUnit}</label>
                        ${inputHtml}
                    </div>`;
            }

            function flushNormalBuffer() {
                if (normalBuffer.length === 0) return;
                groupedHtml += '<div class="row mb-2">';
                normalBuffer.forEach(p => {
                    groupedHtml += buildSingleParam(p);
                });
                groupedHtml += '</div>';
                normalBuffer.length = 0;
            }

            function closeCard() {
                if (cardOpen && groupParams.length > 0) {
                    currentGroupHtml += '</div>';
                    groupedHtml += `
                        <div class="card shadow-none border mb-4" style="border-left: 4px solid #028284 !important; background-color: #f8f9fa;">
                            <div class="card-header py-2 d-flex justify-content-between align-items-center" style="background-color: #e9ecef;">
                                <h6 class="mb-0 text-sm font-weight-bold text-primary">
                                    <i class="fas fa-layer-group me-1"></i> ${currentSubHeader}
                                </h6>
                                <span class="badge bg-primary-soft text-primary border border-primary text-xs">${currentSubHeader}</span>
                            </div>
                            <div class="card-body p-3">`;
                    groupedHtml += currentGroupHtml;
                    groupedHtml += '</div></div>';
                }
                cardOpen = false;
                currentSubHeader = null;
                currentGroupHtml = '';
                groupParams = [];
            }

            const allNonRoll = Object.entries(groupedBySubHeader).flatMap(([sub, items]) =>
                items.map(it => ({ ...it, _subHeader: sub }))
            ).concat(normalItems);

            allNonRoll.sort((a, b) => (parseInt(a.urut) || 0) - (parseInt(b.urut) || 0));

            let groupedHtml = '';
            let currentSubHeader = null;
            let cardOpen = false;
            let currentGroupHtml = '';
            let groupParams = [];
            let lastWasNormal = false;
            const normalBuffer = [];

            allNonRoll.forEach(paramItem => {
                const subHeader = paramItem._subHeader || '';

                if (subHeader) {
                    if (lastWasNormal) {
                        flushNormalBuffer();
                        groupedHtml += '<div class="mb-3"></div>';
                        lastWasNormal = false;
                    }
                    if (currentSubHeader !== subHeader) {
                        closeCard();
                        currentSubHeader = subHeader;
                        cardOpen = true;
                        groupParams = [];
                        currentGroupHtml = '<div class="row g-3">';
                    }
                    groupParams.push(paramItem);
                    currentGroupHtml += buildSingleParam(paramItem);
                } else {
                    if (cardOpen) {
                        closeCard();
                        groupedHtml += '<div class="mb-3"></div>';
                    }
                    normalBuffer.push(paramItem);
                    lastWasNormal = true;
                }
            });

            flushNormalBuffer();
            closeCard();

            const rows = commonsCard + groupedHtml;

            let initialJumlahRoll = 1;
            $('#dynamic-header-row .dynamic-param-input').each(function() {
                const hName = ($(this).attr('data-name') || '').toLowerCase().replace(/[\s_\-]/g, '');
                if (hName === 'jumlahroll' || hName === 'jmlroll' || hName === 'qtyroll') {
                    const parsed = parseInt($(this).val());
                    if (!isNaN(parsed) && parsed > 0) {
                        initialJumlahRoll = parsed;
                    }
                }
            });

            $('#parameter-container').html(`
        <form method="POST" action="/trsprm/submit" id="form-slitter">
            <input type="hidden" name="_token" value="${$('meta[name="csrf-token"]').attr('content')}">
            <input type="hidden" name="Tanggal"  value="${Tanggal}">
            <input type="hidden" name="mesin_id" value="${mesin_id}">
            <input type="hidden" name="Shift"    value="${Shift}">
            <input type="hidden" name="Grup"     value="${Grup}">

            <div class="row">
                <div class="col-md-12">
                    <div class="card shadow-lg">
                        <div class="card-body">${rows}</div>
                    </div>
                </div>
            </div>

            <div class="row mt-4">
                <div class="col-md-12">
                    <div class="card shadow-sm">
                        <div class="card-header pb-0">
                            <h5 class="mb-0">Detail Parameter Roll</h5>
                        </div>
                        <hr class="horizontal dark mt-3 mb-0">
                        <div class="card-body">
                            <div class="row align-items-center mb-4">
                                <div class="col-auto">
                                    <label class="form-label fw-bold">Jumlah Roll yang Dihasilkan</label>
                                    <input type="number" id="jumlah-roll-slitter" class="form-control" min="1" value="${initialJumlahRoll}" placeholder="Contoh: 5">
                                </div>
                                <div class="col-md-2 col-sm-3">
                                    <label class="form-label d-block">&nbsp;</label>
                                    <button type="button" class="btn btn-primary" id="btn-generate-slitter">
                                        <i class="fas fa-cogs"></i> Generate Card
                                    </button>
                                </div>
                            </div>
                            <div id="slitter-cards-container" class="row"></div>
                            <div class="mt-4 text-end" id="slitter-submit-container" style="display:none;">
                                <button type="button" class="btn btn-success px-4" onclick="validateAndSimpan()">Simpan</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    `);

            attachValidationListeners();
            checkAllFilled();

            $('#btn-generate-slitter').on('click', function() {
                const jumlah = parseInt($('#jumlah-roll-slitter').val()) || 1;

                let selectedMesin = $('#mesin_id').find(':selected');
                if (!selectedMesin || !selectedMesin.length || !selectedMesin.val()) {
                    $('#dynamic-header-row .dynamic-param-input').each(function() {
                        const hName = ($(this).attr('data-name') || '').toLowerCase().replace(/[\s_\-]/g, '');
                        const sData = ($(this).attr('data-source-data') || '').toLowerCase();
                        if (hName === 'mesin' || hName === 'machine' || sData.includes('tbl_mst_mesin')) {
                            selectedMesin = $(this).find(':selected');
                            return false;
                        }
                    });
                }

                let rollCards = '';
                for (let r = 1; r <= jumlah; r++) {
                    let paramsHtml = '<div class="row">';
                    let filledCount = 0;
                    for (let j = 0; j < dataRoll.length; j++) {
                        const namaParam = dataRoll[j].nama_parameter.trim();
                        const namaUnit = getUnitLabel(dataRoll[j].unit);

                        const isNumberOnly = dataRoll[j].tipe_input === 'Number';
                        const isDropdown = dataRoll[j].tipe_input === 'Dropdown' || (dataRoll[j].options &&
                            dataRoll[j].options.length > 0);
                        const isRangeParam = dataRoll[j].is_range === true || dataRoll[j].isRange === true || (dataRoll[j].source_data && dataRoll[j].source_data.includes('is_range'));

                        let inputHtml = '';
                        if (isDropdown) {
                            let options = '<option value="">-- Pilih --</option>';
                            if (dataRoll[j].options && dataRoll[j].options.length > 0) {
                                dataRoll[j].options.forEach(opt => {
                                    options += `<option value="${opt.id}">${opt.text}</option>`;
                                });
                            }
                            inputHtml = `<select class="form-select form-select-sm dynamic-select2" 
                                         name="roll[${r}][parameter][${j}][nilai]" 
                                         data-name="${namaParam}">${options}</select>`;
                        } else if (isRangeParam) {
                            let prefix = dataRoll[j].prefix || '';
                            if (!prefix && dataRoll[j].prefix_format) {
                                prefix = resolvePrefixJS(dataRoll[j].prefix_format, Tanggal, selectedMesin);
                            }
                            const baseCounter = parseInt(dataRoll[j].next_counter) || 1;
                            const currentCounter = baseCounter + (r - 1);
                            const padCounter = currentCounter.toString().padStart(3, '0');
                            const rollVal = (prefix || '') + padCounter;
                            filledCount++;

                            inputHtml = `<input type="text"
                                        class="form-control form-control-sm bg-light fw-bold text-dark range-detail-input"
                                        name="roll[${r}][parameter][${j}][nilai]"
                                        value="${rollVal}"
                                        readonly
                                        data-roll="${r}"
                                        data-id="${dataRoll[j].id}"
                                        data-name="${namaParam}">`;
                        } else {
                            let defaultVal = dataRoll[j].value_parameter ?? '';
                            if (defaultVal) filledCount++;

                            inputHtml = `<input type="text"
                                        class="form-control form-control-sm${isNumberOnly ? ' number-only-input' : ''}"
                                        name="roll[${r}][parameter][${j}][nilai]"
                                        value="${defaultVal}"
                                        placeholder="${isNumberOnly ? 'Angka saja...' : 'Isi nilai...'}"
                                        ${isNumberOnly ? 'inputmode="decimal"' : ''}>`;
                        }

                        paramsHtml += `
                <div class="col-md-4 mb-3">
                    <label class="form-label fw-semibold" style="font-size:13px;">
                        ${namaParam}${namaUnit}
                    </label>
                    <input type="hidden" name="roll[${r}][parameter][${j}][id]" value="${dataRoll[j].id}">
                    ${inputHtml}
                    ${isNumberOnly ? `<div class="invalid-feedback">Hanya boleh angka.</div>` : ''}
                </div>`;
                    }
                    paramsHtml += '</div>';

                    const isAllFilledInitial = filledCount === dataRoll.length;
                    rollCards += `
                    <div class="card mb-3 shadow-sm border-0 border-start ${isAllFilledInitial ? 'border-success' : 'border-info'} border-3" id="card-roll-${r}">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center py-2"
                            style="cursor:pointer;" data-roll="${r}">
                            <strong style="font-size:14px;">
                                <span class="me-2 ${isAllFilledInitial ? 'text-success' : 'text-info'}"><i class="fas fa-scroll"></i></span> Roll ${r}
                            </strong>
                            <div class="d-flex align-items-center gap-2">
                                <small class="text-muted" id="progress-roll-${r}">${filledCount}/${dataRoll.length} terisi</small>
                                <span class="text-secondary" style="font-size:12px;"><i class="fas fa-chevron-down"></i></span>
                            </div>
                        </div>
                        <div class="collapse ${r === 1 ? 'show' : ''}" id="collapse-roll-${r}">
                            <div class="card-body pt-3">
                                <input type="hidden" name="roll[${r}][no_urut]" value="${r}">
                                ${paramsHtml}
                            </div>
                        </div>
                    </div>`;
                }

                $('#slitter-cards-container').html(`
                    <div class="card shadow-sm border-0 border-top border-info border-3 mb-3">
                        <div class="card-header bg-white d-flex justify-content-between align-items-center py-2">
                            <strong style="font-size:14px;">Detail parameter roll</strong>
                            <span class="badge bg-secondary">${jumlah} roll</span>
                        </div>
                    </div>
                    ${rollCards}
                `);

                // Initialize Select2 for dynamic measurement dropdowns
                $('#parameter-container .dynamic-select2, #slitter-cards-container .dynamic-select2').each(function() {
                    if (!$(this).data('select2')) {
                        $(this).select2({
                            placeholder: '-- Pilih --',
                            allowClear: !$(this).prop('multiple'),
                            width: '100%'
                        });
                    }
                });

                attachValidationListeners();
                checkAllFilled();
            });

            $(document).off('click', '.card-header[data-roll]').on('click', '.card-header[data-roll]', function() {
                const r = parseInt($(this).data('roll'));
                const targetCollapse = $(`#collapse-roll-${r}`);

                if (targetCollapse.hasClass('show')) {
                    targetCollapse.collapse('hide');
                    return;
                }

                for (let prev = 1; prev < r; prev++) {
                    const prevCollapse = $(`#collapse-roll-${prev}`);
                    const inputs = prevCollapse.find('input[type="text"]');
                    const allFilled = inputs.toArray().every(input => $(input).val().trim() !== '');

                    if (!allFilled) {
                        Swal.fire({
                            icon: 'warning',
                            title: 'Peringatan',
                            text: `Roll ${prev} belum diisi lengkap! Harap isi semua field Roll ${prev} terlebih dahulu.`
                        });

                        if (!prevCollapse.hasClass('show')) {
                            prevCollapse.collapse('show');
                        }
                        return;
                    }
                }

                targetCollapse.collapse('show');
            });

            $(document).off('input', '.card input[type="text"]').on('input', '.card input[type="text"]', function() {
                const cardBody = $(this).closest('.collapse');
                if (!cardBody.length) return;
                const rollId = cardBody.attr('id').replace('collapse-roll-', '');
                const total = cardBody.find('input[type="text"]').length;
                const filled = cardBody.find('input[type="text"]').filter(function() {
                    return $(this).val().trim() !== '';
                }).length;

                const $progress = $(`#progress-roll-${rollId}`);
                $progress.html(`
                    <span class="text-success"><i class="fas fa-circle text-xs"></i></span> ${filled} selesai &nbsp;
                    <span class="text-secondary"><i class="far fa-circle text-xs"></i></span> ${total - filled} belum diisi
                `);

                const $card = cardBody.closest('.card');
                if (filled === total) {
                    $card.removeClass('border-info').addClass('border-success');
                    $card.find('.card-header strong .me-2').removeClass('text-info').addClass('text-success');
                } else {
                    $card.removeClass('border-success').addClass('border-info');
                    $card.find('.card-header strong .me-2').removeClass('text-success').addClass('text-info');
                }
                checkAllFilled();
            });

            // Trigger card generation automatically on initial load
            $('#btn-generate-slitter').trigger('click');

            syncDetailNoRoll();
        }

function loadDataSimpleForm(data, Tanggal, mesin_id, Shift, Grup, coolerData = null, coolerParamIds = [], itemData =
            null, isCortec = true) {

            let rows = '';

            function buildSingleParam(paramItem) {
                const namaParam = paramItem.nama_parameter.trim();
                const namaUnit = getUnitLabel(paramItem.unit);
                const isNumberOnly = paramItem.tipe_input === 'Number';
                const isDropdown = paramItem.tipe_input === 'Dropdown' || (paramItem.options && paramItem.options
                    .length > 0);
                const isRangeParam = paramItem.is_range === true || paramItem.isRange === true || (paramItem
                    .source_data && paramItem.source_data.includes('is_range'));

                let inputHtml = '';
                if (isDropdown) {
                    let options = '<option value="">-- Pilih --</option>';
                    if (paramItem.options && paramItem.options.length > 0) {
                        paramItem.options.forEach(opt => {
                            options += `<option value="${opt.id}">${opt.text}</option>`;
                        });
                    }
                    const isCommon = (paramItem.jenis_parameter || '').toLowerCase() === 'common';
                    const commonReadonly = (isCommon && paramItem.value_parameter) ? 'disabled' : '';
                    inputHtml = `<select class="form-select form-select-sm dynamic-select2 ${commonReadonly ? 'bg-light' : ''}" 
                                 name="parameter_${paramItem.id}" 
                                 data-name="${namaParam}" ${commonReadonly}>${options}</select>`;
                } else {
                    let defaultVal = paramItem.value_parameter ?? '';
                    if (!defaultVal && paramItem.prefix) {
                        defaultVal = paramItem.prefix;
                    }

                    const isNoRoll = namaParam === 'No Roll Asal';
                    const fieldNoRolljadi = namaParam === 'No Roll Jadi';
                    const NoUrutJadi = namaParam === 'No Urut Roll Jadi';
                    const isCommon = (paramItem.jenis_parameter || '').toLowerCase() === 'common';
                    const commonReadonly = (isCommon && defaultVal) ? 'readonly' : '';

                    const validationAttrs = [
                        paramItem.tipe_input ? `data-tipe="${paramItem.tipe_input}"` : '',
                        paramItem.format != null && paramItem.format !== '' ? `data-format="${paramItem.format}"` :
                        '',
                        paramItem.min != null ? `data-min="${paramItem.min}"` : '',
                        paramItem.max != null ? `data-max="${paramItem.max}"` : '',
                        paramItem.max_length != null ? `data-max-length="${paramItem.max_length}"` : '',
                        paramItem.allow_negative === false ? `data-allow-negative="false"` : '',
                        paramItem.allow_decimal === false ? `data-allow-decimal="false"` : '',
                    ].filter(Boolean).join(' ');

                    inputHtml = `<input type="text"
                class="form-control form-control-sm ${isNumberOnly ? 'number-only-input' : ''} ${isRangeParam ? 'range-detail-input' : ''} ${(isCommon && defaultVal) ? 'bg-light' : ''}"
                name="parameter_${paramItem.id}"
                value="${defaultVal}"
                placeholder="${isNumberOnly ? 'Angka saja...' : 'Isi nilai...'}"
                ${isNoRoll ? 'id="input-no-roll-asal"' : ''}
                ${fieldNoRolljadi ? 'id="input-no-roll-jadi"' : ''}
                ${NoUrutJadi ? 'id="input-no-urut-jadi"' : ''}
                ${isRangeParam ? `readonly data-id="${paramItem.id}" data-name="${namaParam}" data-next-counter="${paramItem.next_counter || 1}" data-range-source="${paramItem.range_source || ''}" data-prefix-format="${paramItem.prefix_format || ''}"` : ''}
                ${commonReadonly}
                ${isNumberOnly ? 'inputmode="decimal"' : ''}
                ${validationAttrs}>`;
                }

                return `
                    <div class="col-md-4">
                        <label class="form-label text-xs fw-bold mb-1">${namaParam}${namaUnit}</label>
                        ${inputHtml}
                    </div>`;
            }

            function buildCommonCard(params) {
                if (params.length === 0) return '';
                let card = '<div class="card shadow-none border mb-3"><div class="card-header py-2" style="background-color: #e9ecef;"><h6 class="mb-0 text-xs fw-bold text-primary"><i class="fas fa-cog me-1"></i> Parameter Umum</h6><span class="badge bg-success text-white">Common</span></div><div class="card-body p-3"><div class="row g-3">';
                params.forEach(p => {
                    card += buildSingleParam(p);
                });
                card += '</div></div></div>';
                return card;
            }

            const allFiltered = data.filter(item => item && item.nama_parameter).sort((a, b) => {
                const urutA = parseInt(a.urut) || 0;
                const urutB = parseInt(b.urut) || 0;
                return urutA - urutB;
            });

            const commonParams = [];
            const otherParams = [];
            allFiltered.forEach(item => {
                if ((item.jenis_parameter || '').toLowerCase() === 'common') {
                    commonParams.push(item);
                } else {
                    otherParams.push(item);
                }
            });

            const commonsCard = buildCommonCard(commonParams);
            const validParams = otherParams;

            let groupedHtml = '';
            let currentSubHeader = null;
            let cardOpen = false;
            let currentGroupHtml = '';
            let groupParams = [];
            let lastWasNormal = false;
            const normalBuffer = [];

            function flushNormalBuffer() {
                if (normalBuffer.length === 0) return;
                groupedHtml += '<div class="row mb-2">';
                normalBuffer.forEach(p => {
                    groupedHtml += buildSingleParam(p);
                });
                groupedHtml += '</div>';
                normalBuffer.length = 0;
            }

            function closeCard() {
                if (cardOpen && groupParams.length > 0) {
                    currentGroupHtml += '</div>';
                    groupedHtml += `
                        <div class="card shadow-none border mb-4" style="border-left: 4px solid #028284 !important; background-color: #f8f9fa;">
                            <div class="card-header py-2 d-flex justify-content-between align-items-center" style="background-color: #e9ecef;">
                                <h6 class="mb-0 text-sm font-weight-bold text-primary">
                                    <i class="fas fa-layer-group me-1"></i> ${currentSubHeader}
                                </h6>
                                <span class="badge bg-primary-soft text-primary border border-primary text-xs">${currentSubHeader}</span>
                            </div>
                            <div class="card-body p-3">`;
                    groupedHtml += currentGroupHtml;
                    groupedHtml += '</div></div>';
                }
                cardOpen = false;
                currentSubHeader = null;
                currentGroupHtml = '';
                groupParams = [];
            }

            validParams.forEach(paramItem => {
                const subHeader = (paramItem.sub_header || '').trim();

                if (subHeader) {
                    if (lastWasNormal) {
                        flushNormalBuffer();
                        groupedHtml += '<div class="mb-3"></div>';
                        lastWasNormal = false;
                    }
                    if (currentSubHeader !== subHeader) {
                        closeCard();
                        currentSubHeader = subHeader;
                        cardOpen = true;
                        groupParams = [];
                        currentGroupHtml = '<div class="row g-3">';
                    }
                    groupParams.push(paramItem);
                    currentGroupHtml += buildSingleParam(paramItem);
                } else {
                    if (cardOpen) {
                        closeCard();
                        groupedHtml += '<div class="mb-3"></div>';
                    }
                    normalBuffer.push(paramItem);
                    lastWasNormal = true;
                }
            });

            flushNormalBuffer();
            closeCard();

            rows = commonsCard + groupedHtml;

            if (rows) {
                rows = '<div class="parameter-section">' + rows + '</div>';
            }

            $('#parameter-container').html(`
    <form method="POST" action="/trsprm/submit">
        <input type="hidden" name="_token" value="${$('meta[name="csrf-token"]').attr('content')}">
        <input type="hidden" name="Tanggal" value="${Tanggal}">
        <input type="hidden" name="mesin_id" value="${mesin_id}">
        <input type="hidden" name="Shift" value="${Shift}">
        <input type="hidden" name="Grup" value="${Grup}">
        ${rows}
        <div class="mt-4 text-end" id="slitter-submit-container" style="display:none;">
            <button type="button" class="btn btn-success px-5" onclick="validateAndSimpan()">Simpan</button>
        </div>
    </form>
`);
            attachValidationListeners();
            checkAllFilled();


            $(document).off('input', '.number-only-input').on('input', '.number-only-input', function() {
                if ($(this).attr('data-tipe')) return; // ← tambahan
                let val = $(this).val();
                const hasMinus = val.startsWith('-');
                val = val.replace(/[^0-9.]/g, '');
                const parts = val.split('.');
                if (parts.length > 2) {
                    val = parts[0] + '.' + parts.slice(1).join('');
                }
                if (hasMinus) val = '-' + val;
                $(this).val(val);
            });

            $(document).off('keydown', '.number-only-input').on('keydown', '.number-only-input', function(e) {
                if ($(this).attr('data-tipe')) return; // ← tambahan
                const allowed = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End', '.'];
                if (allowed.includes(e.key)) return;
                if (e.ctrlKey || e.metaKey) return;
                if (e.key === '-') {
                    const cursorPos = this.selectionStart;
                    const val = $(this).val();
                    if (cursorPos === 0 && !val.startsWith('-')) return;
                    else {
                        e.preventDefault();
                        return;
                    }
                }
                if (!/^\d$/.test(e.key)) e.preventDefault();
            });
            // Initialize Select2 for dynamic measurement dropdowns
            $('#parameter-container .dynamic-select2').each(function() {
                if (!$(this).data('select2')) {
                    $(this).select2({
                        placeholder: '-- Pilih --',
                        allowClear: !$(this).prop('multiple'),
                        width: '100%'
                    });
                }
            });

            // Isi nilai parameter di list (Item, No Roll Asal, dsb)
            data.forEach(paramItem => {
                const $input = $(`input[name="parameter_${paramItem.id}"]`);
                if (!$input.length) return;

                const nm = (paramItem.nama_parameter || '').trim().toLowerCase();
                const sourceData = (paramItem.source_data || '').toLowerCase();
                let valToFill = '';
                
                let fromApiMatch = sourceData.match(/from_api:([a-z0-9_]+)/);
                let isFromApi = fromApiMatch !== null;
                let apiName = isFromApi ? fromApiMatch[1] : null;

                if (isFromApi && apiName === 'zfmaterialroll') {
                    if (itemData) {
                        valToFill = itemData;
                    }
                } else if (nm === 'item' || nm.includes('item')) {
                    if (itemData) {
                        valToFill = itemData;
                    }
                } else if (nm.includes('no roll asal') || nm.includes('no_roll_asal') || sourceData.includes('resource_api:zfmaterialroll')) {
                    // Cari dari header
                    $('#dynamic-header-row .dynamic-param-input').each(function() {
                        const hName = ($(this).attr('data-name') || '').toLowerCase();
                        const hSource = ($(this).attr('data-source-data') || '').toLowerCase();
                        if (hName.includes('no roll asal') || hName.includes('no_roll_asal') || hSource.includes('resource_api:zfmaterialroll')) {
                            valToFill = $(this).val();
                        }
                    });
                } else if (nm.includes('no roll jadi') || nm.includes('no. roll jadi')) {
                    // Cari dari header
                    $('#dynamic-header-row .dynamic-param-input').each(function() {
                        const hName = ($(this).attr('data-name') || '').toLowerCase();
                        if (hName.includes('no roll jadi') || hName.includes('no. roll jadi')) {
                            valToFill = $(this).val();
                        }
                    });
                }

                if (valToFill) {
                    if (paramItem.prefix && !valToFill.startsWith(paramItem.prefix)) {
                        valToFill = paramItem.prefix + valToFill;
                    }
                    $input.val(valToFill).prop('readonly', true);
                }
            });

            Swal.close();
        }

            function checkAllFilled() {
                const isRollForm = $('#form-slitter').length > 0 || $('#form-roll').length > 0;
                let allFilled = true;

                $('#dynamic-header-row input, #dynamic-header-row select').filter(function() {
                    return !$(this).closest('[data-param-container-id]').hasClass('d-none');
                }).each(function() {
                    const val = $(this).val();
                    if (val === null || val === '' || (Array.isArray(val) && val.length === 0)) {
                        allFilled = false;
                        return false;
                    }
                });
                if (!allFilled) {
                    $('#slitter-submit-container').hide();
                    return;
                }

                if (isRollForm) {
                    const hasCards = $('#slitter-cards-container .card').length > 0;
                    if (!hasCards) {
                        $('#slitter-submit-container').hide();
                        return;
                    }
                    $('#form-slitter .card-body input[type="text"], #form-roll .card-body input[type="text"]').each(function() {
                        if ($(this).val().trim() === '') {
                            allFilled = false;
                            return false;
                        }
                    });
                } else {
                    $('#parameter-container input[type="text"]').each(function() {
                        if ($(this).val().trim() === '') {
                            allFilled = false;
                            return false;
                        }
                    });
                }

                if (allFilled) {
                    $('#slitter-submit-container').fadeIn(200);
                } else {
                    $('#slitter-submit-container').hide();
                }
            }

            function attachValidationListeners() {
                $(document).off('input change', '#parameter-container input, #parameter-container select').on('input change', '#parameter-container input, #parameter-container select', function() {
                    checkAllFilled();
                });
                $(document).off('input', 'input[data-tipe]').on('input', 'input[data-tipe]', function() {
                    applyDynamicValidation(this);
                });
            }

            function applyDynamicValidation(input) {
                const tipe = input.getAttribute('data-tipe') || '';
                const format = input.getAttribute('data-format');
                const allowDecimal = input.getAttribute('data-allow-decimal') !== 'false';
                const allowNegative = input.getAttribute('data-allow-negative') !== 'false';
                const maxLength = input.getAttribute('data-max-length');

                let val = input.value;

                if (tipe === 'Number') {
                    let cleaned = '';
                    for (let i = 0; i < val.length; i++) {
                        const c = val[i];
                        if (/[0-9]/.test(c)) cleaned += c;
                        else if (c === '.' && allowDecimal && !cleaned.includes('.')) cleaned += c;
                        else if (c === '-' && allowNegative && i === 0 && cleaned === '') cleaned += c;
                    }
                    val = cleaned;

                    if (format !== null && format !== '') {
                        const fmt = parseInt(format);
                        const parts = val.split('.');
                        if (parts.length > 1 && parts[1].length > fmt) {
                            val = parts[0] + (fmt > 0 ? '.' + parts[1].substring(0, fmt) : '');
                        }
                        if (maxLength) {
                            const maxInt = parseInt(maxLength) - (fmt > 0 ? fmt + 1 : 0);
                            const partsNow = val.split('.');
                            const sign = partsNow[0].startsWith('-') ? '-' : '';
                            const digits = partsNow[0].replace('-', '');
                            if (digits.length > maxInt) {
                                partsNow[0] = sign + digits.substring(0, maxInt);
                                val = partsNow.join('.');
                            }
                        }
                    }
                } else if (tipe === 'Text') {
                    val = val.replace(/[^a-zA-Z\s]/g, '');
                } else if (tipe === 'Alphanumeric') {
                    val = val.replace(/[^a-zA-Z0-9]/g, '');
                }

                if (maxLength !== null && val.length > parseInt(maxLength)) {
                    val = val.substring(0, parseInt(maxLength));
                }

                input.value = val;
            }

            parameterProfileSelect.addEventListener('change', async function() {
                await loadMachines();
                loadMachineHeaders();
            });
            mesinSelect.addEventListener('change', loadMachineHeaders);

            $('#Tanggal, #mesin_id, #parameter_profile_id').on('change', function() {
                $('#parameter-container').empty();
                $('#btn-simpan-mobile').hide();
            });
        });

        function validateAndSimpan() {
            const tanggal = document.getElementById('Tanggal').value.trim();
            let mesin = document.getElementById('mesin_id') ? document.getElementById('mesin_id').value.trim() : '';
            if (!mesin) {
                $('#dynamic-header-row .dynamic-param-input').each(function() {
                    const nm = ($(this).attr('data-name') || '').toLowerCase();
                    const sData = ($(this).attr('data-source-data') || '').toLowerCase();
                    if (nm.includes('mesin') || nm.includes('machine') || sData.includes('tbl_mst_mesin')) {
                        mesin = ($(this).val() || '').trim();
                        return false;
                    }
                });
            }
            const parameterProfileId = document.getElementById('parameter_profile_id').value.trim();

            if (!parameterProfileId) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Profil Parameter harus dipilih!'
                });
                return false;
            }

            if (!tanggal) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Tanggal harus diisi!'
                });
                return false;
            }
            if (!mesin) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Mesin harus dipilih!'
                });
                return false;
            }

            const formatInputs = document.querySelectorAll('input[data-format]');
            let formatValid = true;
            formatInputs.forEach(input => {
                if (!validateFormatInput(input)) formatValid = false;
            });

            if (!formatValid) {
                const firstInvalidFormat = document.querySelector('input[data-format].is-invalid');
                if (firstInvalidFormat) {
                    firstInvalidFormat.scrollIntoView({ behavior: 'smooth', block: 'center' });
                    firstInvalidFormat.focus();
                }
                Swal.fire({
                    icon: 'warning',
                    title: 'Validasi Gagal',
                    text: 'Ada input yang format desimalnya tidak sesuai!'
                });
                return false;
            }

            let headerComplete = true;
            $('#dynamic-header-row input, #dynamic-header-row select').filter(function() {
                return !$(this).closest('[data-param-container-id]').hasClass('d-none');
            }).each(function() {
                const val = $(this).val();
                if (val === null || val === '' || (Array.isArray(val) && val.length === 0)) {
                    const name = $(this).attr('data-name') || 'Field Header';
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: name + ' harus diisi!'
                    });
                    $(this).focus();
                    headerComplete = false;
                    return false;
                }
            });
            if (!headerComplete) return false;

            const nilaiInputs = document.querySelectorAll('#parameter-container input[name*="[nilai]"]:not([readonly]), #parameter-container select[name*="[nilai]"], #parameter-container input[name^="parameter_"]:not([readonly]), #parameter-container select[name^="parameter_"]');
            if (nilaiInputs.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Generate parameter terlebih dahulu!'
                });
                return false;
            }

            for (let input of nilaiInputs) {
                if (input.value.trim() === '') {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Semua nilai parameter harus diisi!'
                    });
                    input.focus();
                    input.classList.add('is-invalid');
                    return false;
                }
            }

            const numberOnlyInputs = document.querySelectorAll('.number-only-input');
            for (let input of numberOnlyInputs) {
                const val = input.value.trim();
                if (val === '' || isNaN(val)) {
                    input.classList.add('is-invalid');
                    input.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                    input.focus();
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Field angka harus diisi dengan nilai numerik yang valid!'
                    });
                    return false;
                } else {
                    input.classList.remove('is-invalid');
                }
            }

            let sendData = {
                _token: $('meta[name="csrf-token"]').attr('content'),
                Tanggal: tanggal,
                mesin_id: mesin,
                parameter_profile_id: parameterProfileId,
            };

            $('#dynamic-header-row input, #dynamic-header-row select').filter(function() {
                return !$(this).closest('[data-param-container-id]').hasClass('d-none');
            }).each(function() {
                let name = $(this).attr('name');
                const val = $(this).val();
                const nm = ($(this).attr('data-name') || '').toLowerCase();

                if (name && val !== null && val !== '') {
                    const cleanName = name.replace('[]', '');
                    sendData[cleanName] = val;

                    if (nm.includes('operator')) sendData['Operator'] = val;
                    if (nm.includes('shift')) sendData['Shift'] = val;
                    if (nm.includes('grup') || nm.includes('group')) sendData['Grup'] = val;
                }
            });

            $('#parameter-container input[name^="parameter_"], #parameter-container select[name^="parameter_"]').each(
                function() {
                    sendData[$(this).attr('name')] = $(this).val();
                });

            document.querySelectorAll('input[name*="[id]"]').forEach(function(idInput) {
                const matchParam = idInput.name.match(/^parameter\[(\d+)\]\[id\]$/);
                if (matchParam) {
                    const idx = matchParam[1];
                    const nilaiInput = document.querySelector(`input[name="parameter[${idx}][nilai]"]`);
                    if (idInput.value && nilaiInput) {
                        sendData[`parameter_${idInput.value}`] = nilaiInput.value;
                    }
                }
                const matchRoll = idInput.name.match(/^roll\[(\d+)\]\[parameter\]\[(\d+)\]\[id\]$/);
                if (matchRoll) {
                    const r = matchRoll[1];
                    const j = matchRoll[2];
                    const nilaiInput = document.querySelector(`input[name="roll[${r}][parameter][${j}][nilai]"]`);
                    if (idInput.value && nilaiInput) {
                        if (!sendData.roll) sendData.roll = {};
                        if (!sendData.roll[r]) sendData.roll[r] = {
                            parameter: {}
                        };
                        sendData.roll[r].parameter[j] = {
                            id: idInput.value,
                            nilai: nilaiInput.value
                        };
                    }
                }
            });

            document.querySelectorAll('input[name*="[no_urut]"]').forEach(function(input) {
                const match = input.name.match(/^roll\[(\d+)\]\[no_urut\]$/);
                if (match) {
                    sendData[`roll_${match[1]}_no_urut`] = input.value;
                }
            });

            Swal.fire({
                title: 'Konfirmasi',
                text: 'Apakah data sudah benar?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Ya, Simpan!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {

                    Swal.fire({
                        title: 'Menyimpan...',
                        allowOutsideClick: false,
                        allowEscapeKey: false,
                        didOpen: () => Swal.showLoading()
                    });

                    $.ajax({
                        url: '{{ URL::to('/') }}/trsprm/submit',
                        method: 'POST',
                        data: sendData,
                        success: function(res) {
                            if (res.status === 'success') {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Berhasil!',
                                    text: res.message,
                                    confirmButtonText: 'OK'
                                }).then(() => {
                                    window.location.href = '{{ URL::to('/trsprm') }}';
                                });
                            } else if (res.status === 'error') {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Batas Maksimal Tercapai',
                                    text: res.message
                                });
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Gagal',
                                    text: res.message
                                });
                            }
                        },
                        error: function() {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: 'Terjadi kesalahan saat menyimpan data!'
                            });
                        }
                    });
                }
            });
        }
    </script>
@endpush