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

@section('content')
    <style>
        .trsprm-action-bar {
            position: sticky;
            top: .75rem;
            z-index: 1020
        }

        .trsprm-form-card,
        .trsprm-parameter-card {
            border-radius: 1rem;
            overflow: visible
        }

        #dynamic-header-container {
            border: 1px solid #e9ecef;
            box-shadow: none
        }

        #dynamic-header-container>.bg-primary {
            border-radius: .75rem .75rem 0 0 !important
        }

        #parameter-container .card {
            border-radius: .85rem
        }

        .trsprm-mobile-actions {
            display: none
        }

        .bulk-entry-card {
            border: 1px solid #dee2e6;
            border-radius: 1rem;
            padding: 1rem;
            margin-bottom: 1rem;
            background: #fff
        }

        .bulk-entry-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem
        }

        .bulk-toolbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: .75rem;
            padding: 1rem;
            border: 1px dashed #00a8b0;
            border-radius: .85rem;
            background: rgba(0, 183, 189, .06);
            margin-bottom: 1rem
        }

        @media(max-width:767.98px) {
            body {
                padding-bottom: 5.5rem
            }

            .trsprm-action-bar {
                display: none
            }

            .trsprm-page {
                padding: .75rem !important
            }

            .trsprm-form-card .card-body{padding:1rem!important}.trsprm-parameter-card{min-height:18rem!important}#dynamic-header-row{margin:0!important;padding:.75rem}#dynamic-header-row>[class*="col-"] {
                width: 100%
            }

            #dynamic-header-container .fs-5 {
                font-size: .9rem !important;
                padding: .75rem .5rem !important;
                margin: 0 .5rem !important;
                white-space: nowrap
            }

            #generate-btn-container .col-md-12,
            #parameter-container .text-end,
            #parameter-container .justify-content-end {
                display: block !important
            }

            #btn-generate,
            #parameter-container button[onclick="validateAndSimpan()"],
            #parameter-container #btn-simpan-param {
                width: 100%;
                min-height: 48px
            }

            #parameter-container {
                padding-left: .75rem !important;
                padding-right: .75rem !important
            }

            #parameter-container .row>[class*="col-"] {
                width: 100%
            }

            .form-control,
            .form-select,
            .select2-container .select2-selection {
                min-height: 46px;
                font-size: 16px
            }

            .select2-container .select2-selection--single .select2-selection__rendered {
                line-height: 44px
            }

            .select2-container .select2-selection--single .select2-selection__arrow {
                height: 44px
            }

            .trsprm-mobile-actions {
                position: fixed;
                right: 0;
                bottom: 0;
                left: 0;
                z-index: 1040;
                display: grid;
                grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
                gap: .75rem;
                padding: .75rem max(.75rem, env(safe-area-inset-right)) calc(.75rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
                background: rgba(255, 255, 255, .96);
                border-top: 1px solid #dee2e6;
                box-shadow: 0 -.4rem 1rem rgba(0, 0, 0, .08);
                backdrop-filter: blur(8px)
            }

            .trsprm-mobile-actions .btn {
                min-height: 48px;
                margin: 0
            }

            .bulk-toolbar {
                display: block
            }

            #parameter-container .bulk-toolbar-actions {
                display: grid !important;
                grid-template-columns: 1fr;
                gap: .75rem !important;
                margin-top: .85rem
            }

            #parameter-container .bulk-toolbar-actions .btn {
                width: 100%;
                min-height: 46px;
                margin: 0 !important
            }

            #parameter-container .bulk-toolbar-actions .btn+.btn {
                margin-top: .75rem !important
            }
        }

        /* Perpanjang tinggi dropdown ke bawah Select2 agar lebih banyak item terlihat */
        .select2-container--default .select2-results>.select2-results__options {
            max-height: 380px !important;
            overflow-y: auto;
        }

        .select2-container--default .select2-results__option {
            padding: 8px 12px;
            font-size: 0.875rem;
            line-height: 1.4;
        }

        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
            color: #fff;
        }

        .select2-dropdown {
            border: 1px solid #d2d6da;
            border-radius: 0.5rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
            z-index: 1060;
        }
    </style>
    @include('layouts.navbars.auth.topnav', ['title' => 'Parameter Mesin'])
    <div class="card shadow-lg mx-4 trsprm-action-bar">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <button class="btn btn-secondary mb-0" onclick="history.back()"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        <button class="btn btn-primary mb-0" onclick="event.preventDefault(); validateAndSimpan();"><i
                                class="fas fa-floppy-disk me-1"> </i><span class="font-weight-bold">Simpan</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4 trsprm-page">
        <div class="row">
            <div class="col-md-12 mb-3">
                <div class="card shadow border-0 trsprm-form-card">
                    <form role="form" method="GET" action="/trsprm/generate" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body p-4">
                            <p class="text-uppercase text-sm fw-bold text-muted mb-1">{{ $title_menu }}</p>
                            <hr class="horizontal dark mt-1 mb-3">

                            <div class="row g-3 align-items-end">
                                <div class="col-12 col-md-3" 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-12 col-md-6" id="container-parameter-profile">
                                    <label for="select_profile_group" class="form-label fw-semibold">Profil
                                        Parameter</label>
                                    <select class="form-select custom-select" id="select_profile_group">
                                        <option value="">-- Cari / Pilih Profil Parameter --</option>
                                        @foreach ($grouped_profiles as $group)
                                            <option value="{{ $group->group_key }}"
                                                data-gedung-id="{{ $group->gedung_id }}">
                                                {{ $group->label }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @if ($grouped_profiles->isEmpty())
                                        <small class="text-danger">Belum ada Profil Parameter aktif yang memiliki
                                            komponen.</small>
                                    @endif
                                </div>
                                <div class="col-12 col-md-3" id="container-line">
                                    <label for="parameter_profile_id" class="form-label fw-semibold">Line</label>
                                    <select class="form-select custom-select" id="parameter_profile_id"
                                        name="parameter_profile_id" disabled>
                                        <option value="">-- Pilih Line --</option>
                                    </select>
                                    <input type="hidden" id="parameter_set_id" name="parameter_set_id">
                                </div>
                            </div>

                            <div id="dynamic-header-container" class="mt-4 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-3 m-3">
                                    <!-- Dynamic headers will be rendered here by JS -->
                                </div>
                            </div>

                            <div id="generate-btn-container" class="row mt-1" style="display:none;">
                                <div class="col-md-12 d-flex justify-content-end mt-2">
                                    <button type="button" id="btn-generate" class="btn btn-info text-white px-4 py-2">
                                        Generate Parameter
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="col-md-12">
                <div class="card trsprm-parameter-card" style="min-height: 650px;">
                    <div class="card-header">
                        <h5 class="mb-0">List {{ $title_menu }}</h5>
                    </div>
                    <hr class="horizontal dark mt-0">
                    <div class="row px-4 py-2" id="parameter-container">
                        @if (isset($parameters) && $parameters->count() > 0)
                            <form method="POST" action="/trsprm/submit">
                                @csrf
                                <input type="hidden" name="Tanggal" value="{{ Session::get('Tanggal') }}">
                                <input type="hidden" name="mesin_id" value="{{ Session::get('mesin_id') }}">


                                <table class="table table-bordered align-middle">
                                    <thead class="table-light">
                                        <tr>
                                            @foreach ($parameters as $param)
                                                <th>{{ $param->nama_parameter }}</th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            @foreach ($parameters as $i => $param)
                                                <td>
                                                    <input type="hidden" name="parameter[{{ $i }}][id]"
                                                        value="{{ $param->id }}">
                                                    <input type="text" class="form-control form-control-sm"
                                                        name="parameter[{{ $i }}][nilai]"
                                                        value="{{ $param->value_parameter ?? '' }}"
                                                        placeholder="Isi nilai...">
                                                </td>
                                            @endforeach
                                        </tr>
                                    </tbody>
                                </table>

                                <div class="d-flex justify-content-end mt-3 mb-2">
                                    <button type="button" id="btn-simpan-param"
                                        class="btn btn-success text-white px-4">Simpan</button>
                                </div>
                            </form>
                        @else
                            <div class="text-center py-5 text-muted">
                                <p>Tidak ada parameter untuk mesin ini.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="trsprm-mobile-actions d-none" aria-label="Aksi formulir">
        <button type="button" class="btn btn-outline-secondary" onclick="history.back()"><i
                class="fas fa-circle-left me-1" aria-hidden="true"></i>Kembali</button>
        <button type="button" class="btn btn-primary" onclick="validateAndSimpan()"><i class="fas fa-floppy-disk me-1"
                aria-hidden="true"></i>Simpan</button>
    </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 canBulkInput = @json((string) ($authorize->approval ?? '0') === '1');

        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 groupedProfiles = @json($grouped_profiles);
            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');

            // Inisialisasi Select2 untuk Profil Parameter (pencarian teks / bisa diketik sesuai standar MSJFramework)
            $('#select_profile_group').select2({
                placeholder: '-- Cari / Pilih Profil Parameter --',
                allowClear: true,
                width: '100%'
            });

            // Inisialisasi Select2 untuk Line produksi
            $('#parameter_profile_id').select2({
                placeholder: '-- Pilih Line --',
                allowClear: true,
                width: '100%'
            });

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

            // Handler saat Profil Parameter dipilih:
            // Tampilkan daftar Line terkait tanpa menduplikasi tampilan grup profil
            $('#select_profile_group').on('change', function() {
                const selectedKey = $(this).val();
                const lineSelect = $('#parameter_profile_id');

                lineSelect.empty().append(new Option('-- Pilih Line --', ''));

                if (!selectedKey) {
                    lineSelect.prop('disabled', true).trigger('change.select2');
                    parameterProfileSelect.value = '';
                    parameterSetInput.value = '';
                    loadMachineHeaders();
                    return;
                }

                const group = groupedProfiles.find(g => String(g.group_key) === String(selectedKey));
                if (group && group.lines && group.lines.length > 0) {
                    group.lines.forEach(function(l) {
                        const opt = document.createElement('option');
                        opt.value = l.profile_id;
                        opt.textContent = l.nama_line;
                        opt.dataset.parameterSetId = l.parameter_set_id;
                        // Simpan informasi id fisik line dan nama line pada dataset opsi untuk memudahkan sinkronisasi ke header
                        opt.dataset.lineId = l.line_id || '';
                        opt.dataset.namaLine = l.nama_line || '';
                        parameterProfileSelect.appendChild(opt);
                    });

                    lineSelect.prop('disabled', false).trigger('change.select2');

                    // Jika hanya memiliki 1 line produksi, pilih secara otomatis
                    if (group.lines.length === 1) {
                        lineSelect.val(group.lines[0].profile_id).trigger('change.select2');
                        syncSelectedProfile();
                        loadMachineHeaders();
                    } else {
                        lineSelect.val('').trigger('change.select2');
                        parameterProfileSelect.value = '';
                        parameterSetInput.value = '';
                        loadMachineHeaders();
                    }
                } else {
                    lineSelect.prop('disabled', true).trigger('change.select2');
                    parameterProfileSelect.value = '';
                    parameterSetInput.value = '';
                    loadMachineHeaders();
                }
            });

            // Load header parameters from the selected profile.
            function loadMachineHeaders() {
                syncSelectedProfile();
                const parameter_profile_id = parameterProfileSelect.value;
                const dynamicHeaderContainer = document.getElementById('dynamic-header-container');
                const dynamicHeaderRow = document.getElementById('dynamic-header-row');

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

                // Hide dynamic container and generate button before loading
                if (dynamicHeaderContainer) dynamicHeaderContainer.style.display = 'none';
                if (generateBtnContainer) generateBtnContainer.style.display = 'none';
                $('#btn-generate').prop('disabled', true); // Disable by default
                $('#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: {
                        parameter_profile_id: parameter_profile_id
                    },
                    success: function(res) {
                        const headerContainer = $('#dynamic-header-row');
                        Swal.close();
                        console.log("Status ", res.status)
                        if (res.status === 'success') {
                            headerContainer.empty();

                            // Pre-process parameters to detect ranges and sources
                            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();
                                        }
                                    });
                                }

                                // Fallback / default rule for legacy No Roll Jadi
                                const nmLower = param.nama_parameter.toLowerCase();
                                if (false) {
                                    param.isRange = true;
                                    if (!param.rangeSource) {
                                        param.rangeSource = 'jumlah roll';
                                    }
                                }
                            });

                            // Count visible header fields
                            const visibleHeaders = res.data.filter(param => !param.isRange);
                            const headerCount = visibleHeaders.length;

                            // Dynamic column sizing
                            let colSize = 4;
                            if (headerCount === 1) colSize = 12;
                            else if (headerCount === 2) colSize = 6;
                            else if (headerCount === 3) colSize = 4;
                            else if (headerCount >= 4) colSize = 3;

                            res.data.forEach(param => {
                                if (param.isRange) {
                                    // Helper hidden input (no name attribute so it is not submitted from the header)
                                    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-md-${colSize} mb-3 ${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>
                                `);

                            });



                            // Initialize Select2 for dynamic dropdowns
                            $('#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 = 'flex';

                            // Otomatis set nilai Line pada Header sesuai dengan Line yang telah dipilih di atas
                            setHeaderLineFromSelection(res.profile);

                            toggleLineDependentFields();
                            // check inputan untuk menyalakan button generate parameter
                            checkHeaderInputs();
                            // toggleNoRoll();
                        } else if (res.status == "nodata") {
                            Swal.fire({
                                icon: 'info',
                                title: 'Tidak ada data',
                                text: 'Tidak ditemukan header untuk parameter ini!'
                            });

                        } else {
                            Swal.fire({
                                icon: 'danger',
                                title: 'Error',
                                text: 'Gagal mengambil data header!'
                            });
                        }
                    },
                    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, '');
            }

            // Fungsi mencari elemen input/select Line pada container Header Information
            function getLineInput() {
                return $('#dynamic-header-row .dynamic-param-input').filter(function() {
                    const name = ($(this).data('name') || '').trim().toLowerCase();
                    const sData = ($(this).data('source-data') || '').toLowerCase();
                    return name === 'line' || name.startsWith('line ') || name.endsWith(' line') || sData.includes('tb_ms_lines');
                }).first();
            }

            // Fungsi untuk mengotomatiskan pengisian Line pada Header Information
            // langsung sesuai dengan pilihan Line pada dropdown Line di atas
            function setHeaderLineFromSelection(profile) {
                const selectedLineOpt = parameterProfileSelect && parameterProfileSelect.selectedIndex >= 0 ?
                    parameterProfileSelect.options[parameterProfileSelect.selectedIndex] :
                    null;
                const chosenLineId = (selectedLineOpt && selectedLineOpt.dataset.lineId) || (profile && profile.line_id);
                const chosenLineName = (selectedLineOpt && selectedLineOpt.dataset.namaLine) ||
                    (selectedLineOpt && selectedLineOpt.textContent ? selectedLineOpt.textContent.trim() : '') ||
                    (profile && profile.nama_line ? profile.nama_line.trim() : '');

                const lineHeaderInput = getLineInput();
                if (!lineHeaderInput || !lineHeaderInput.length) {
                    return;
                }

                if (lineHeaderInput.is('select')) {
                    let matchedVal = '';

                    // 1. Cocokkan berdasarkan ID fisik Line (line_id di tb_ms_lines)
                    if (chosenLineId && lineHeaderInput.find('option[value="' + chosenLineId + '"]').length > 0) {
                        matchedVal = String(chosenLineId);
                    }

                    // 2. Cocokkan berdasarkan Nama Line (misal "LINE 1", "LINE 2")
                    if (!matchedVal && chosenLineName) {
                        const normChosen = normalizeLineValue(chosenLineName);
                        lineHeaderInput.find('option').each(function() {
                            const optVal = $(this).val();
                            const optText = normalizeLineValue($(this).text());
                            if (optVal && (optText === normChosen || optText.includes(normChosen) || normChosen.includes(optText))) {
                                matchedVal = optVal;
                                return false;
                            }
                        });
                    }

                    // 3. Fallback: jika hanya ada 1 opsi pilihan line yang valid di dropdown header, pilih otomatis
                    if (!matchedVal) {
                        const validOpts = lineHeaderInput.find('option').filter(function() {
                            return $(this).val() !== '';
                        });
                        if (validOpts.length === 1) {
                            matchedVal = validOpts.val();
                        }
                    }

                    if (matchedVal) {
                        lineHeaderInput.val(matchedVal).trigger('change');
                    }
                } else {
                    // Jika field Line di header berupa input teks
                    if (chosenLineName) {
                        lineHeaderInput.val(chosenLineName).trigger('input').trigger('change');
                    }
                }
            }

            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() {
                // Prevent infinite loop when clearing hidden fields
                if (toggleLineDependentFields.inProgress) {
                    return;
                }
                toggleLineDependentFields.inProgress = true;

                try {
                    const lineInput = getLineInput();
                    const lineValue = lineInput.val() || '';
                    const lineText = lineInput.find('option:selected').text().trim();

                    $('#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) {
                                // Clear without triggering events that cause recursion
                                const triggerChange = $input.data('select2');
                                $input.val(null);
                                if (triggerChange) {
                                    // Use triggerHandler to avoid bubbling event listeners
                                    $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); // If no headers, don't block
                    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 && $('[name="mesin_id"]').length) {
                        $('[name="mesin_id"]').val(mVal);
                    }
                }
                toggleLineDependentFields();
                checkHeaderInputs();
            });

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

            function generateNoRollJadi(tanggal, 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; // 1-indexed
                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, 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;

            $('#parameter_profile_id').on('change', function() {
                loadMachineHeaders();
            });

            $('#Tanggal, #parameter_profile_id').on('change', function() {
                $('#parameter-container').empty();
                $('.trsprm-mobile-actions').addClass('d-none');
            });
        });



        $('.dt-button').addClass('btn btn-secondary');
        $('.dt-button').removeClass('dt-button');
        var id = "{{ Session::has('idtrans') ? encrypt(Session::get('idtrans')) : '' }}";
        var btnadd = $('.btn-add').parents('.btn-secondary');
        btnadd.removeClass('btn-secondary');
        btnadd.addClass('btn btn-primary');
        btnadd.attr('onclick', "window.location='{{ URL::to($url_menu . '/add/') }}" + "/" + id +
            "'");

        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1089</b><br />
<br />
<b>Warning</b>:  Attempt to read property "add" on null in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1089</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1090</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1090</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1091</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1091</b><br />
        <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1092</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1092</b><br />

        function detail(id, gmenu, dmenu) {
            $.ajax({
                url: "{{ url($url_menu) . '/ajax' }}",
                type: "GET",
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    id: id,
                    gmenu: gmenu,
                    dmenu: dmenu
                },
                success: function(data) {
                    // set title detail
                    $('#label_detail').text('List Detail -> ' + data['ajaxid']);
                    // reset datatables
                    $('#list_detail').DataTable().destroy();
                    $('#list_detail tbody').remove();
                    // retrieve data into tabel
                    $('#list_detail').append('<tbody></tbody>');
                    var i = 1;
                    var result = eval(data['table_detail_d_ajax']);
                    //looping data detail
                    for (var index in result) {
                        var result1 = eval(data['table_primary_d_ajax']);
                        var result2 = eval(data['table_header_d_ajax']);
                        var primary = '';
                        for (var index1 in result1) {
                            // initialized primary key
                            primary == '' ? (primary = result[index][result1[index1].field]) : (primary =
                                primary + ':' + result[index][result1[index1].field]);
                        }
                        // set variable columns
                        var vtd = `
                                    <td class="text-sm font-weight-normal">
                                        <button type="submit" class="btn btn-primary mb-0 py-1 px-2"
                                            title="View Data"
                                            onclick="window.location='{{ url($url_menu . '/show/') }}` + '/' + data[
                                'encrypt_primary'][
                                index
                            ] + `'">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        {{-- check authorize edit --}}
                                        @if ($authorize->edit == '1')
                                            {{-- button edit --}}
                                            <button type="button" class="btn btn-warning mb-0 py-1 px-2"
                                                title="Edit Data"
                                                onclick="window.location='{{ url($url_menu . '/edit/') }}` + '/' +
                            data[
                                'encrypt_primary'][
                                index
                            ] + `'">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                        @endif
                                        {{-- check authorize delete --}}
                                        @if ($authorize->delete == '1')
                                            <form onsubmit="return deleteData(event,'` + primary + `','Hapus')"
                                                action="{{ url($url_menu . '/') }}` + '/' + data['encrypt_primary'][
                                index
                            ] + `"
                                                method="POST" style="display: inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger mb-0 py-1 px-2"
                                                    title="Hapus Data">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        @endif
                                    </td>
                                    `;
                        for (var index2 in result2) {
                            var primary_color = result2[index2].primary == '1' ? 'bold text-dark' : 'normal';
                            var vtex = result[index][result2[index2].field];
                            if (result2[index2].type == 'enum') {
                                if (result2[index2].query != '') {
                                    var query = result2[index2].query;
                                    var v_enum = eval(data[result2[index2].field]);
                                    $.each(v_enum, function(index, q) {
                                        var sAsArray = $.map(q, function(value,
                                            key) {
                                            return value;
                                        });
                                        if (vtex == sAsArray[0]) {
                                            vtd +=
                                                `<td class="text-sm font-weight-` +
                                                primary_color + `">` + sAsArray[1] +
                                                `</td>`;
                                        }
                                        return vtd;
                                    });
                                } else {
                                    vtd +=
                                        `<td class="text-sm font-weight-` + primary_color + `">` +
                                        result[index][result2[index2].field] + `</td>`;
                                }
                            } else if (result2[index2].type == 'join') {
                                if (result2[index2].query != '') {
                                    var query = result2[index2].query + "'" + result2[index2].field + "'";
                                    var v_enum = eval(data['data_join'][index]);
                                    $.each(v_enum, function(index, q) {
                                        var sAsArray = $.map(q, function(value,
                                            key) {
                                            return value;
                                        });
                                        vtd +=
                                            `<td class="text-sm font-weight-` +
                                            primary_color + `">` + sAsArray[0] +
                                            `</td>`;
                                        return vtd;
                                    });
                                } else {
                                    vtd +=
                                        `<td class="text-sm font-weight-` + primary_color + `">` +
                                        result[index][result2[index2].field] + `</td>`;
                                }
                            } else if (result2[index2].type == 'currency') {
                                vtd +=
                                    `<td class="text-sm font-weight-` + primary_color +
                                    `">` + currencyFormat(result[index][result2[index2].field], result2[index2]
                                        .decimals, result2[index2].sub) + `</td>`;


                            } else {
                                vtd +=
                                    `<td class="text-sm font-weight-` + primary_color + `">` +
                                    result[index][result2[index2].field] + `</td>`;
                            }
                        }
                        i++;
                        // add rows into table
                        $('#list_detail tbody').append(`<tr>` + vtd + `</tr>`);
                    }
                    // initialized datatbles
                    let columnAbjad = '';
                    $(document).ready(function() {
                        let numColumns = $('#list_{{ $dmenu }}').DataTable().columns()
                            .count();
                        let columnNames = '';
                        // set color datatables
                        for (let index = 0; index < numColumns; index++) {
                            columnNames = $('#list_{{ $dmenu }}').DataTable().columns(index)
                                .header()[0].textContent;
                            if (columnNames == 'Status' || columnNames == 'status') {
                                columnAbjad = String.fromCharCode(65 + index);
                            }
                        }
                        // function set color row DataTable
                        $('.odd').click(function() {
                            $('.odd').css('background-color', '');
                            $('.even').css('background-color', '');
                            $('.not').css('background-color', '#ffe9ed');
                            $(this).css('background-color', '#f9f4ea');
                        });
                        $('.even').click(function() {
                            $('.odd').css('background-color', '');
                            $('.even').css('background-color', '');
                            $('.not').css('background-color', '#ffe9ed');
                            $(this).css('background-color', '#f9f4ea');
                        });
                        var table = $('#list_{{ @$dmenu }}').DataTable();
                        // Add the click event to all rows on all pages
                        table.on('draw', function() {
                            $('.odd').click(function() {
                                $('.odd').css('background-color', '');
                                $('.even').css('background-color', '');
                                $('.not').css('background-color', '#ffe9ed');
                                $(this).css('background-color', '#f9f4ea');
                            });
                            $('.even').click(function() {
                                $('.odd').css('background-color', '');
                                $('.even').css('background-color', '');
                                $('.not').css('background-color', '#ffe9ed');
                                $(this).css('background-color', '#f9f4ea');
                            });
                        });
                        // end function set color row DataTable
                    });
                    //set color button datatables
                    $('.dt-button').addClass('btn btn-secondary');
                    $('.dt-button').removeClass('dt-button');
                    //setting button add
                    var btnadd = $('.btn-add').parents('.btn-secondary');
                    btnadd.removeClass('btn-secondary');
                    btnadd.addClass('btn btn-primary');
                    btnadd.attr('onclick', "window.location='{{ URL::to($url_menu . '/add/') }}" + "/" +
                        id +
                        "'");
                    //check authorize button datatables
                    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1286</b><br />
<br />
<b>Warning</b>:  Attempt to read property "add" on null in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1286</b><br />
                    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1287</b><br />
<br />
<b>Warning</b>:  Attempt to read property "excel" on null in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1287</b><br />
                    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1288</b><br />
<br />
<b>Warning</b>:  Attempt to read property "pdf" on null in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1288</b><br />
                    <br />
<b>Warning</b>:  Undefined variable $authorize in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1289</b><br />
<br />
<b>Warning</b>:  Attempt to read property "print" on null in <b>/opt/lampp/htdocs/msjparametermsn/resources/views/pages/trsprm/add.blade.php</b> on line <b>1289</b><br />
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    Swal.fire({
                        title: 'Sorry!',
                        text: 'Error Get data!',
                        icon: 'error',
                        confirmButtonColor: '#3085d6'
                    });
                }
            });
        }

        function deleteData(event, name, msg) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: `Apakah Anda Yakin ${msg} Data ${name} ini?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: `Ya, ${msg}`,
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    event.target.closest('form').submit();
                }
            });
        }
        // function currency
        function currencyFormat(nominal, decimal = 0, prefix = 'Rp.') {
            return prefix + ' ' + parseFloat(nominal).toFixed(decimal).replace(/\d(?=(\d{3})+\.)/g, '$&,');
        }


        $(document).ready(function() {
            $('#Operator').select2({
                placeholder: '-- Pilih Operator --',
                allowClear: true,
                width: '100%',
                dropdownAutoWidth: false,
                dropdownPosition: 'below',
                maximumSelectionLength: 3,
                language: {
                    noResults: function() {
                        return "Operator tidak ditemukan";
                    },
                    searching: function() {
                        return "Mencari...";
                    },
                    maximumSelected: function(e) {
                        return "Maksimal 3 operator dapat dipilih";
                    }
                },
                tags: false,
                tokenSeparators: [',']
            });

            $('#Operator').on('select2:selecting', function(e) {
                var selected = $('#Operator').select2('data').length;
                if (selected >= 3) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Batas Maksimal',
                        text: 'Anda hanya dapat memilih maksimal 3 operator',
                        timer: 2000
                    });
                    e.preventDefault();
                }
            });
        });

        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(); // ← tambahkan ini

            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;
            }
        }

        function validateAllRatios() {
            let valid = true;
            const ratioInputs = document.querySelectorAll('input[data-ratio-type]');

            ratioInputs.forEach(input => {
                const isInputValid = validateRatioInput(input);
                if (!isInputValid) {
                    valid = false;
                }
            });

            return valid;
        }

        function renumberBulkCards() {
            const $cards = $('#bulk-entries .bulk-entry-card');
            $cards.each(function(index) {
                $(this).attr('data-entry-index', index + 1);
                $(this).find('.bulk-entry-head strong').text(`Card Input ${index + 1}`);
                $(this).find('.btn-remove-parameter-card').toggleClass('d-none', $cards.length === 1);
            });
        }

        $(document).on('click', '#btn-add-parameter-card', function() {
            const $source = $('#bulk-entries .bulk-entry-card').first();
            if (!$source.length || $('#bulk-entries .bulk-entry-card').length >= 50) return;
            const $clone = $source.clone(false, false);
            $clone.find('.select2-container').remove();
            $clone.find('select').removeClass('select2-hidden-accessible').removeAttr(
                'data-select2-id tabindex aria-hidden');
            $clone.find('option').removeAttr('data-select2-id');
            $clone.find('[id]').removeAttr('id');
            $clone.find('input:not([type="hidden"]):not([readonly]), textarea:not([readonly])').val('').removeClass(
                'is-invalid');
            $clone.find('select:not([disabled])').val('').removeClass('is-invalid');
            $clone.find('.invalid-feedback').remove();
            $('#bulk-entries').append($clone);
            $clone.find('.dynamic-select2').each(function() {
                $(this).select2({
                    placeholder: '-- Pilih --',
                    allowClear: true,
                    width: '100%'
                });
            });
            renumberBulkCards();
            $clone[0].scrollIntoView({
                behavior: 'smooth',
                block: 'start'
            });
        });

        $(document).on('click', '.btn-remove-parameter-card', function() {
            $(this).closest('.bulk-entry-card').remove();
            renumberBulkCards();
        });

        function collectBulkEntry($form) {
            const payload = {
                _token: $('meta[name="csrf-token"]').attr('content'),
                Tanggal: $('#Tanggal').val(),
                parameter_profile_id: $('#parameter_profile_id').val()
            };
            $('#dynamic-header-row .dynamic-param-input').each(function() {
                const name = ($(this).attr('name') || '').replace('[]', '');
                if (name) payload[name] = $(this).val();
            });
            $form.find('[name]').each(function() {
                const name = ($(this).attr('name') || '').replace('[]', '');
                if (name && name !== '_token') payload[name] = $(this).val();
            });
            return payload;
        }

        function validateAndSaveBulk() {
            const entries = [];
            let invalidCard = null;
            $('#bulk-entries .bulk-entry-form').each(function(index) {
                let valid = true;
                $(this).find('input:not([type="hidden"]):visible, textarea:visible, select').not(':disabled').each(
                    function() {
                        const value = $(this).val();
                        if (value === null || value === '' || (Array.isArray(value) && value.length === 0)) {
                            $(this).addClass('is-invalid');
                            valid = false;
                        } else {
                            $(this).removeClass('is-invalid');
                        }
                    });
                if (!valid && invalidCard === null) invalidCard = index + 1;
                entries.push(collectBulkEntry($(this)));
            });
            if (invalidCard !== null) {
                Swal.fire({
                    icon: 'warning',
                    title: `Card ${invalidCard} belum lengkap`,
                    text: 'Lengkapi field yang ditandai sebelum menyimpan.'
                });
                return false;
            }
            Swal.fire({
                title: 'Simpan semua card?',
                text: `${entries.length} transaksi akan disimpan.`,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Simpan Semua',
                cancelButtonText: 'Batal'
            }).then(result => {
                if (!result.isConfirmed) return;
                Swal.fire({
                    title: 'Menyimpan...',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });
                $.ajax({
                        url: '{{ URL::to('/') }}/trsprm/submit-bulk',
                        method: 'POST',
                        data: {
                            _token: $('meta[name="csrf-token"]').attr('content'),
                            entries
                        }
                    })
                    .done(res => Swal.fire({
                        icon: 'success',
                        title: 'Berhasil',
                        text: res.message
                    }).then(() => window.location.href = '{{ URL::to('/trsprm') }}'))
                    .fail(xhr => Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: xhr.responseJSON?.message || 'Input banyak gagal disimpan.'
                    }));
            });
            return false;
        }

        function validateAndSimpan() {
            if (canBulkInput && $('#bulk-entries .bulk-entry-form').length > 1) {
                return validateAndSaveBulk();
            }
            const tanggal = document.getElementById('Tanggal').value.trim();
            const parameterProfileId = document.getElementById('parameter_profile_id').value.trim();

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

            const ratioValid = validateAllRatios();
            if (!ratioValid) {
                const firstInvalid = document.querySelector('input.is-invalid[data-ratio-type]');
                if (firstInvalid) {
                    firstInvalid.scrollIntoView({
                        behavior: 'smooth',
                        block: 'center'
                    });
                    firstInvalid.focus();
                }
                Swal.fire({
                    icon: 'warning',
                    title: 'Validasi Gagal',
                    text: 'Nilai Ratio S/F atau Ratio F/R tidak sesuai batas yang diizinkan!',
                });
                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 (melebihi batas di belakang koma)!',
                });
                return false;
            }


            if (!tanggal) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Tanggal harus diisi!'
                });
                return false;
            }
            // Validasi header dinamis
            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]"], #parameter-container input[name^="parameter_"], #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,
                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] = Array.isArray(val) ? val : String(val);

                    // Map specific fields based on their names
                    if (nm.includes('operator')) sendData['Operator'] = Array.isArray(val) ? val : String(val);
                    if (nm.includes('shift')) sendData['Shift'] = Array.isArray(val) ? val : String(val);
                    if (nm.includes('grup') || nm.includes('group')) sendData['Grup'] = Array.isArray(val) ? val :
                        String(val);
                }
            });

            // Collect dynamic parameters
            $('#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!'
                            });
                        }
                    });
                }
            });
        }


        $('#btn-generate').on('click', function() {
            const Tanggal = $('[name="Tanggal"]').val();
            if (!Tanggal) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Peringatan',
                    text: 'Tanggal harus diisi!'
                });
                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 = '',
                Mesin = $('[name="mesin_id"]').val() || '';

            $('#dynamic-header-row .dynamic-param-input').each(function() {
                const name = $(this).attr('name');
                const val = $(this).val();
                const nm = ($(this).attr('data-name') || '').toLowerCase();
                const sData = ($(this).attr('data-source-data') || '').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') || sData.includes('tbl_mst_mesin'))
                    Mesin = val;
            });

            $.ajax({
                url: '{{ URL::to('/') }}/trsprm/generate',
                method: 'GET',
                data: $.extend({
                    _token: '{{ csrf_token() }}',
                    mesin_id: Mesin,
                    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;
                        }

                        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, Shift, Grup);
                        } else {
                            loadDataSimpleForm(parameterData, Tanggal, Mesin, 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 getUnitLabel(unit) {
            if (!unit || unit === '-' || unit === '.' || unit === 'null') return '';
            return ` (${unit})`;
        }

        function loadDataSimpleForm(data, Tanggal, mesin_id, Shift, Grup, coolerData = null, coolerParamIds = [], itemData =
            null, isCortec = true) {
            console.log("Load Data Simple Form");

            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'));
                const isCommon = (paramItem.jenis_parameter || '').toLowerCase() === 'common';
                const hasValue = paramItem.value_parameter;


                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 commonDisabled = isCommon && hasValue ? 'disabled' : '';
                    const selectClass =
                        `form-select form-select-sm dynamic-select2 ${isCommon && hasValue ? 'bg-light' : ''}`;
                    inputHtml = `<select class="${selectClass}"
                                 name="parameter_${paramItem.id}"
                                 data-name="${namaParam}" ${commonDisabled}>${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 commonReadonly = isCommon && defaultVal ? 'readonly' : '';
                    const inputClass =
                        `form-control form-control-sm ${isNumberOnly ? 'number-only-input' : ''} ${isRangeParam ? 'range-detail-input' : ''} ${isCommon && defaultVal ? 'bg-light' : ''}`;

                    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="${inputClass}"
                        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>`;
            }

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

            const validParams = data.filter(item => (item.jenis_parameter || '').toLowerCase() !== 'common' && item
                .nama_parameter).sort((a, b) => {
                const urutA = parseInt(a.urut) || 0;
                const urutB = parseInt(b.urut) || 0;
                return urutA - urutB;
            });

            let commonsCard = '';
            if (commonParams.length > 0) {
                let commonParamsHtml = '<div class="row g-3">';
                commonParams.forEach(paramItem => {
                    commonParamsHtml += buildSingleParam(paramItem);
                });
                commonParamsHtml += '</div>';
                commonsCard = `
                    <div class="card shadow-none border mb-4" style="border-left: 4px solid #00b7bd4f !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-cog me-1"></i> Parameter Umum
                            </h6>
                            <span class="badge bg-primary-soft text-primary border border-primary text-xs">Common</span>
                        </div>
                        <div class="card-body p-3">${commonParamsHtml}</div>
                    </div>`;
            }

            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(`
                <div id="bulk-entries">
                    <div class="bulk-entry-card" data-entry-index="1">
                        ${canBulkInput ? `<div class="bulk-entry-head"><strong>Card Input 1</strong><button type="button" class="btn btn-sm btn-outline-danger mb-0 btn-remove-parameter-card d-none"><i class="fas fa-trash"></i></button></div>` : ''}
                        <form method="POST" action="/trsprm/submit" class="bulk-entry-form">
                            <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}
                            ${!canBulkInput ? `<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>
                    </div>
                </div>
                ${canBulkInput ? `<div class="bulk-toolbar">
                        <div><strong>Input Banyak</strong><div class="text-xs text-muted">Satu card akan disimpan sebagai satu transaksi.</div></div>
                        <div class="d-flex flex-wrap gap-2 justify-content-end bulk-toolbar-actions">
                            <button type="button" class="btn btn-primary mb-0" id="btn-add-parameter-card"><i class="fas fa-plus me-1"></i> Tambah Card</button>
                            <button type="button" class="btn btn-success mb-0" onclick="validateAndSimpan()"><i class="fas fa-floppy-disk me-1"></i> Simpan Semua</button>
                        </div>
                    </div>` : ''}
            `);
            if (canBulkInput) {
                $('.trsprm-mobile-actions').addClass('d-none');
            } else {
                $('.trsprm-mobile-actions').removeClass('d-none');
            }
            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 attachValidationListeners() {
            $(document).off('input change', 'input, select').on('input change', 'input, 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');
            // ✅ Tambah ini
            const minVal = input.getAttribute('data-min');
            const maxVal = input.getAttribute('data-max');

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

                // ✅ FIX: Enforce min/max nilai
                if (val !== '' && val !== '-' && val !== '.') {
                    const num = parseFloat(val);
                    if (minVal !== null && !isNaN(parseFloat(minVal)) && num < parseFloat(minVal)) val = minVal;
                    if (maxVal !== null && !isNaN(parseFloat(maxVal)) && num > parseFloat(maxVal)) val = maxVal;
                }

            } else if (tipe === 'Text') {
                val = val.replace(/[^a-zA-Z\s]/g, '');
            } else if (tipe === 'Alphanumeric') {
                val = val.replace(/[^a-zA-Z0-9]/g, '');
            }

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

            input.value = val;
        }

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

            // 1. Check Header Inputs
            $('#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) {
                // 2. Check if Cards are generated
                const hasCards = $('.card[id^="card-roll-"]').length > 0 || $('#slitter-cards-container .card').length > 0;
                if (!hasCards) {
                    $('#slitter-submit-container').hide();
                    return;
                }

                // 3. Check Main Slitter Parameters
                $('#form-slitter > .row .card .card-body input[type="text"]').each(function() {
                    if ($(this).val().trim() === '') {
                        allFilled = false;
                        return false;
                    }
                });
                if (!allFilled) {
                    $('#slitter-submit-container').hide();
                    return;
                }

                // 4. Check all Roll Card Parameters
                $('.collapse input[type="text"]').each(function() {
                    if ($(this).val().trim() === '') {
                        allFilled = false;
                        return false;
                    }
                });
            } else {
                // Cortec logic
                $('#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 loadDataRollForm(data, Tanggal, mesin_id, Shift, Grup) {
            $('.trsprm-mobile-actions').removeClass('d-none');

            const commonParams = data.filter(d => (d.jenis_parameter || '').toLowerCase() === 'common' && d.nama_parameter);
            const nonRollItems = data.filter(d => (d.jenis_parameter || '').toLowerCase() !== 'roll' && (d
                .jenis_parameter || '').toLowerCase() !== 'common');
            const dataRoll = data.filter(d => (d.jenis_parameter || '').toLowerCase() === 'roll');

            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'));
                const isCommon = (paramItem.jenis_parameter || '').toLowerCase() === 'common';
                const hasValue = paramItem.value_parameter;

                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 commonDisabled = isCommon && hasValue ? 'disabled' : '';
                    const selectClass =
                        `form-select form-select-sm dynamic-select2 ${isCommon && hasValue ? 'bg-light' : ''}`;
                    inputHtml = `<select class="${selectClass}"
                                 name="parameter_${paramItem.id}"
                                 data-name="${namaParam}" ${commonDisabled}>${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 commonReadonly = isCommon && defaultVal ? 'readonly' : '';
                    const inputClass =
                        `form-control form-control-sm ${isNumberOnly ? 'number-only-input' : ''} ${isRangeParam ? 'range-detail-input' : ''} ${isCommon && defaultVal ? 'bg-light' : ''}`;

                    inputHtml = `<input type="text"
                    class="${inputClass}"
                    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"' : ''}>`;
                }

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

            let commonsCard = '';
            if (commonParams.length > 0) {
                let commonParamsHtml = '<div class="row g-3">';
                commonParams.forEach(paramItem => {
                    commonParamsHtml += buildSingleParam(paramItem);
                });
                commonParamsHtml += '</div>';
                commonsCard = `
                    <div class="card shadow-none border mb-4" style="border-left: 4px solid #198754 !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-success">
                                <i class="fas fa-cog me-1"></i> Parameter Umum
                            </h6>
                            <span class="badge bg-success-soft text-success border border-success text-xs">Common</span>
                        </div>
                        <div class="card-body p-3">${commonParamsHtml}</div>
                    </div>`;
            }

            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 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();
        }
    </script>
@endpush