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

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- button back --}}
                        <button class="btn btn-secondary mb-0" onclick="window.location.href='{{ URL::to('/trsurvey') }}'"><i class="fas fa-circle-left me-1">
                            </i><span class="font-weight-bold">Kembali</button>
                        {{-- check authorize edit --}}
                        @if ($authorize->edit == '1')
                            {{-- button save --}}
                            <button class="btn btn-primary mb-0" id="trsurvey-update">
                                <i class="fas fa-floppy-disk me-1"> </i>
                                <span class="font-weight-bold">Update
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <form role="form" id="trsurvey-form" method="POST">
        <div class="container-fluid py-4">

            @csrf
            @method('PUT')
            <div class="row">
                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="mb-3">Edit Survey</h5>
                            <p class="text-muted mb-3">Edit detail survey:</p>
                            <input type="hidden" name="id_survei" value="{{ $id }}">
                            <input type="hidden" name="dept" id="dept" value="{{ $dept }}">
                            <input type="hidden" id="check_repetisi" name="check_repetisi" value="{{$survey->jenis}}">

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">Salin Pertanyaan Dari:</label>
                                    <input type="text" class="form-control"
                                        value="{{ $survey->form_id }} - {{ $survey->judul_form }}" disabled>
                                    <input type="hidden" name="salin_pertanyaan" value="{{ $survey->form_id }}">
                                </div>
                            </div>

                            <div class="row g-3" >
                                <!-- Salin Pertanyaan - Order 1 di semua device -->
                                <div class="col-md-12 mb-3" style="order: 1;">
                                    <label class="form-label">Salin Pertanyaan Dari:</label>
                                    <input type="text" class="form-control"
                                        value="{{ $survey->form_id }} - {{ $survey->judul_form }}" disabled>
                                    <input type="hidden" name="salin_pertanyaan" value="{{ $survey->form_id }}">
                                </div>

                                <div class="col-12 col-md-7 mb-3" style="order: 2;">
                                    <label class="form-label">Judul Survey:</label>
                                    <input required type="text" class="form-control" name="judul_form" id="judul_form"
                                        maxlength="150" style="flex: 1;" value="{{ $survey->judul_form }}">

                                    <div class="form-text text-end" id="judul-counter">{{ strlen($survey->judul_form) }} / 150</div>
                                
                                </div>

                                <div class="col-12 col-md-5 mb-3" style="order: 3;">
                                    <label class="form-label">Subjudul Survey:</label>
                                    <input required type="text" class="form-control" name="subjudul_survei" id="subjudul_survei"
                                        maxlength="150" style="flex: 1;" value="{{ $survey->subjudul }}">

                                    <div class="form-text text-end" id="subjudul-counter">{{ strlen($survey->subjudul) }} / 150</div>

                                </div>

                                <div class="col-12 col-md-7 mb-3" style="order: 4;">
                                    <label class="form-label">Tanggal Mulai:</label>
                                    <input required type="date" class="form-control" name="tanggal_mulai" id="tanggal_mulai"
                                        value="{{ $survey->tanggal_mulai }}" min="{{ date('Y-m-d') }}">
                                </div>

                                <div class="col-12 col-md-5 mb-3" id="tanggal-selesai-container" style="order: 5;">
                                    <label class="form-label">Tanggal Selesai:</label>
                                    <input required type="date" class="form-control" name="tanggal_selesai"
                                        id="tanggal_selesai" value="{{ $survey->tanggal_selesai }}">
                                </div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Deskripsi:</label>
                                <textarea class="summernote-survey-deskripsi form-control" rows="3"
                                    name="deskripsi">{{ $survey->deskripsi }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="card mb-4">
                        <div class="card-body">
                            <h5 class="mb-3">Penerima Survey:</h5>
                            <div class="mb-4">
                                <select class="form-select question-type-select" name="penerima-filter"
                                    id="penerima-filter">
                                    <option value="semua">Semua</option>
                                    <option value="magang">Magang</option>
                                    <option value="karyawan">Karyawan</option>
                                </select>
                            </div>

                            <div class="position-relative">
                                <button onclick="LoadRecipientData();" id="buttonCariPenerima" type="button"
                                    class="btn btn-success mb-0" readonly style="cursor: pointer;">
                                    {{ count($recipients) }} Penerima Dipilih
                                </button>
                            </div>

                            <div class="row px-3 py-2" style="height: auto; max-height: fit-content;">
                                <div id="list_penerima_filter" class="mb-3">
                                <div class="table-responsive" style="max-height: 446px; overflow-y: auto; display: flex; flex-direction: column;">
                                    <table class="table display" id="list_penerima">
                                        <thead class="thead-light" style="background-color: #00b7bd4f;">
                                            <tr>
                                                <th scope="col" style="width: 50px;">Aksi</th>
                                                <th scope="col">ID</th>
                                                <th scope="col">Nama</th>
                                                <th scope="col">Departemen</th>
                                                <th scope="col">Email</th>
                                                <th scope="col">Jabatan</th>
                                            </tr>
                                        </thead>
                                        <tbody id="penerima-table-body">
                                            @foreach($recipients as $recipient)
                                                <tr>
                                                    <td>
                                                        <button type="button" 
                                                                class="btn btn-sm btn-danger remove-recipient-btn" 
                                                                data-id="{{ $recipient->id }}" 
                                                                title="Hapus"
                                                                style="padding: 0.25rem 0.5rem;">
                                                            <i class="fas fa-times"></i>
                                                        </button>
                                                    </td>
                                                    <td>{{ $recipient->id }}</td>
                                                    <td>{{ $recipient->nama }}</td>
                                                    <td>{{ $recipient->nama_departemen }}</td>
                                                    <td>{{ $recipient->email }}</td>
                                                    <td>{{ $recipient->jabatan }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12" id="questions-container">
                    <!-- Pertanyaan will be populated by JavaScript -->
                </div>

                <div class="col-md-12">
                    <div class="text-center">
                        <button type="button" class="btn btn-success" id="add-question-btn">
                            <i class="fas fa-plus me-2"></i>Tambah Pertanyaan
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Modal Penerima Survey -->
        <div class="modal fade" id="penerimaModal" tabindex="-1" aria-labelledby="penerimaModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="penerimaModalLabel">Pilih Penerima Survey</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div style="max-height: 500px; overflow-y: auto;">
                            <table class="table display" id="list_cari_penerima" style="width: 100%;">
                                <thead class="thead-light" style="background-color: #00b7bd4f;">
                                    <tr>
                                        <th style="text-align: center;">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" id="checkboxesMain">
                                            </div>
                                        </th>
                                        <th tabindex="0" aria-controls="list_cari_penerima" class="sorting" scope="col">ID</th>
                                        <th tabindex="0" aria-controls="list_cari_penerima" class="sorting" scope="col">Nama</th>
                                        <th tabindex="0" aria-controls="list_cari_penerima" class="sorting" scope="col">Departemen</th>
                                        <th tabindex="0" aria-controls="list_cari_penerima" class="sorting" scope="col">Email</th>
                                        <th tabindex="0" aria-controls="list_cari_penerima" class="sorting" scope="col">Jabatan</th>
                                    </tr>
                                </thead>
                                <tbody id="cari-penerima-body">
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                        <button type="button" class="btn btn-primary">Pilih</button>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Master Label Modal -->
    <div class="modal fade" id="masterLabelModal" tabindex="-1" aria-labelledby="masterLabelModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <!-- Loading Overlay -->
                <div id="labelModalLoading" style="display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.9); z-index: 9999; border-radius: 0.3rem;">
                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
                        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div class="mt-3">
                            <strong>Menyimpan data...</strong>
                        </div>
                    </div>
                </div>
                
                <div class="modal-header">
                    <h5 class="modal-title" id="masterLabelModalLabel">⚙️ Kelola Master Linear Label</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!-- Form Add/Edit Label -->
                    <div class="card mb-4">
                        <div class="card-body">
                            <h6 class="mb-3">Form Label Baru</h6>
                            <form id="labelForm">
                                <input type="hidden" id="labelId" value="">
                                <div class="row">
                                    <div class="col-md-4">
                                        <label class="form-label">Nama Label</label>
                                        <input type="text" class="form-control" id="namaLabel" placeholder="Contoh: Kualitas" maxlength="100" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Kata Positif</label>
                                        <input type="text" class="form-control" id="kataPositif" placeholder="Contoh: Bagus" maxlength="50" required>
                                    </div>
                                    <div class="col-md-3">
                                        <label class="form-label">Kata Negatif</label>
                                        <input type="text" class="form-control" id="kataNegatif" placeholder="Contoh: Buruk" maxlength="50" required>
                                    </div>
                                    <div class="col-md-2 d-flex align-items-end">
                                        <button type="submit" class="btn btn-primary w-100" id="btnSaveLabel">
                                            <i class="fas fa-save me-1"></i>Simpan
                                        </button>
                                    </div>
                                </div>
                                <div class="row mt-3">
                                    <div class="col-md-12">
                                        <div class="alert alert-info py-2">
                                            <strong>Preview Skala:</strong>
                                            <span id="previewLabel">
                                                1: Sangat <span class="text-danger">-</span> | 
                                                2: <span class="text-danger">-</span> | 
                                                3: Sedang | 
                                                4: <span class="text-success">-</span> | 
                                                5: Sangat <span class="text-success">-</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- Table Master Label -->
                    <div class="card">
                        <div class="card-body">
                            <h6 class="mb-3">Daftar Master Label</h6>
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover" id="tableMasterLabel">
                                    <thead class="thead-light">
                                        <tr>
                                            <th width="5%">No</th>
                                            <th width="10%">Aksi</th>
                                            <th width="25%">Nama Label</th>
                                            <th width="15%">Kata Positif</th>
                                            <th width="15%">Kata Negatif</th>
                                            <th width="30%">Preview Skala</th>
                                        </tr>
                                    </thead>
                                    <tbody id="labelTableBody">
                                        <!-- Data akan dimuat via AJAX -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>

    <script>
         var globalSelectedRecipients = [];
        var existingSurveyData = @json($pertanyaan);
        var existingRecipients = @json($recipients);
        var surveyData = @json($survey);

        console.log('Existing Survey Data:', existingSurveyData);

        var originalSurveyData = null;
        var currentSurveyData = null;
        var activeDropdownForLabel = null;

        var isLimitedEdit = (surveyData.jenis === 'R' && surveyData.repetisi_ke > 1);

        $(document).ready(function () {
            // function adjustFieldOrder() {
            //     const isDesktop = window.innerWidth >= 768;
                
            //     if (isDesktop) {
            //         $('[style*="order: 1"]').css('order', '1');
            //         $('[style*="order: 2"]').css('order', '3');
            //         $('[style*="order: 3"]').css('order', '5');
            //         $('[style*="order: 4"]').css('order', '2');
            //         $('[style*="order: 5"]').css('order', '4');
            //     } else {
            //         $('[style*="order: 1"]').css('order', '1');
            //         $('[style*="order: 2"]').css('order', '2');
            //         $('[style*="order: 3"]').css('order', '3');
            //         $('[style*="order: 4"]').css('order', '4');
            //         $('[style*="order: 5"]').css('order', '5');
            //     }
            // }

            // adjustFieldOrder();
            // window.addEventListener('resize', adjustFieldOrder);

            $('#judul_form').on('input', function() {
                const length = $(this).val().length;
                const maxLength = 150;
                $('#judul-counter').text(length + ' / ' + maxLength);
                $('#judul-counter').css('color', length > maxLength * 0.9 ? '#dc3545' : '#6c757d');
            });

            $(document).on('click', '.remove-recipient-btn', function() {
                const recipientId = $(this).data('id').toString();
                const recipientName = $(this).closest('tr').find('td').eq(2).text();
                const penerimaTable = $('#list_penerima').DataTable();

                globalSelectedRecipients = globalSelectedRecipients.filter(r => r.id.toString() !== recipientId);

                window.selectedRecipients = globalSelectedRecipients;

                const row = $(this).closest('tr');
                penerimaTable.row(row).remove().draw();

                const selectedCount = globalSelectedRecipients.length;
                if (selectedCount > 0) {
                    $('#buttonCariPenerima').text(`${selectedCount} Penerima Dipilih`);
                    $('#buttonCariPenerima').removeClass('btn-primary').addClass('btn-success');
                } else {
                    $('#buttonCariPenerima').text('Cari Penerima');
                    $('#buttonCariPenerima').removeClass('btn-success').addClass('btn-primary');
                }

                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 2000,
                    timerProgressBar: true,
                });
                
                Toast.fire({
                    icon: 'success',
                    title: `${recipientName} dihapus dari daftar penerima`
                });
            });
            // Character counter untuk Subjudul Survey
            $('#subjudul_survei').on('input', function() {
                const length = $(this).val().length;
                const maxLength = 150;
                $('#subjudul-counter').text(length + ' / ' + maxLength);
                $('#subjudul-counter').css('color', length > maxLength * 0.9 ? '#dc3545' : '#6c757d');
            });

            if (isLimitedEdit) {
                $('#check_repetisi').prop('disabled', true);
                $('input[name="salin_pertanyaan"]').prop('disabled', true);
                $('input[name="judul_form"]').prop('disabled', true).css('background-color', '#e9ecef');

                $('.question-card').find('textarea, select, input').prop('disabled', true);

                $('.question-card').each(function () {
                    const questionId = $(this).attr('id').split('-')[1];
                    $(`.summernote-question-${questionId}`).summernote('disable');
                });

                $('.delete-question-btn').prop('disabled', true).removeClass('btn-danger').addClass('btn-secondary');

                $('#add-question-btn').prop('disabled', true).css('opacity', '0.5');
            }

            $('.summernote-survey-deskripsi').summernote({
                placeholder: "Masukkan deskripsi...",
                toolbar: [
                    ['style', ['bold', 'italic', 'underline']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['color', ['backcolor']],
                ],
                callbacks: {
                    onInit: function() {
                        var $editor = $('.summernote-survey-deskripsi').next('.note-editor');
                        var $statusbar = $editor.find('.note-statusbar');
                        $statusbar.prepend('<div class="char-counter-deskripsi" style="float: left; padding: 5px 10px; color: #6c757d;">0 / 1000 karakter</div>');
                        
                        var self = this;
                        setTimeout(function() {
                            var $editable = $(self).next('.note-editor').find('.note-editable');
                            var text = $editable.text();
                            var length = text.length;
                            var $counter = $editor.find('.char-counter-deskripsi');
                            $counter.text(length + ' / 1000 karakter');
                            $counter.css('color', length > 900 ? '#dc3545' : '#6c757d');
                        }, 100);
                    },
                    onKeydown: function(e) {
                        var $editable = $(this).next('.note-editor').find('.note-editable');
                        var text = $editable.text();
                        var length = text.length;
                        var maxLength = 1000;

                        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
                            (e.keyCode === 65 && e.ctrlKey === true) ||
                            (e.keyCode === 67 && e.ctrlKey === true) ||
                            (e.keyCode === 86 && e.ctrlKey === true) ||
                            (e.keyCode === 88 && e.ctrlKey === true) ||
                            (e.keyCode >= 35 && e.keyCode <= 39)) {
                            return;
                        }

                        if (length >= maxLength) {
                            e.preventDefault();
                            return false;
                        }
                    },
                    onKeyup: function(e) {
                        var $editable = $(this).next('.note-editor').find('.note-editable');
                        var text = $editable.text();
                        var length = text.length;
                        var maxLength = 1000;
                        
                        if (length > maxLength) {
                            var trimmedText = text.substring(0, maxLength);
                            $(this).summernote('code', trimmedText);
                            length = maxLength;
                        }
                        
                        var $editor = $(this).next('.note-editor');
                        var $statusbar = $editor.find('.note-statusbar');
                        var $counter = $statusbar.find('.char-counter-deskripsi');
                        
                        $counter.text(length + ' / ' + maxLength + ' karakter');
                        $counter.css('color', length > maxLength * 0.9 ? '#dc3545' : '#6c757d');
                    },
                    onPaste: function(e) {
                        var self = this;
                        setTimeout(function() {
                            var $editable = $(self).next('.note-editor').find('.note-editable');
                            var text = $editable.text();
                            var maxLength = 1000;
                            
                            if (text.length > maxLength) {
                                var trimmedText = text.substring(0, maxLength);
                                $(self).summernote('code', trimmedText);
                            }
                            $(self).next('.note-editor').find('.note-editable').trigger('keyup');
                        }, 10);
                    }
                }
            });

            $('#tanggal-selesai-container').show();

            globalSelectedRecipients = existingRecipients.map(function (recipient) {
                return {
                    id: recipient.id,
                    nama: recipient.nama,
                    departemen: recipient.nama_departemen || recipient.departemen,
                    email: recipient.email,
                    jabatan: recipient.jabatan,
                };
            });
            window.selectedRecipients = [...globalSelectedRecipients];

            $('#list_cari_penerima').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)",
                    "paginate": {
                        "first": "Pertama",
                        "last": "Terakhir",
                        "next": "Selanjutnya",
                        "previous": "Sebelumnya"
                    }
                },
                "destroy": true,
                "ordering": true,
                "searching": true,
                "paging": true,
                "pageLength": 10,
                "scrollY": true,
                "scrollX": true,
                "scrollCollapse": false,
                "autoWidth": false,
                "columnDefs": [
                    {
                        "orderable": false,
                        "targets": 0
                    },
                    {
                        "searchable": false,
                        "targets": 0
                    }
                ],
                "order": [[1, 'asc']]
            });

            $('#penerimaModal').on('shown.bs.modal', function () {
                $('#list_cari_penerima').DataTable().columns.adjust();
            });

            $('#list_penerima').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)",
                    "paginate": {
                        "first": "Pertama",
                        "last": "Terakhir",
                        "next": "Selanjutnya",
                        "previous": "Sebelumnya"
                    }
                },
                "destroy": true,
                "ordering": true,
                "searching": true,
                "paging": false,
                "info": false,
                "autoWidth": false,
                "order": [[1, 'asc']],
                "columnDefs": [{
                    "orderable": false,
                    "targets": 0 
                }]
            });


            if (existingSurveyData && existingSurveyData.length > 0) {
                existingSurveyData.forEach(function (question) {
                    addQuestionFromData(question);
                });
                
                // Update all question counters after loading
                setTimeout(function() {
                    $('[class*="summernote-question-"]').each(function() {
                        var text = $(this).summernote('code').replace(/<[^>]*>/g, '').trim();
                        var length = text.length;
                        var $editor = $(this).next('.note-editor');
                        var $counter = $editor.find('[class*="char-counter-question-"]');
                        if ($counter.length) {
                            $counter.text(length + ' / 255 karakter');
                            $counter.css('color', length > 229 ? '#dc3545' : '#6c757d');
                        }
                    });
                }, 500);
            } else {
                addQuestion();
            }

            // Date validation
            $('#tanggal_mulai').on('change', function () {
                const tanggalMulai = $(this).val();

                if (tanggalMulai) {
                    $('#tanggal_selesai').attr('min', tanggalMulai);

                    const currentSelesai = $('#tanggal_selesai').val();
                    if (currentSelesai && currentSelesai <= tanggalMulai) {
                        $('#tanggal_selesai').val('');
                    }

                    $('#tanggal-selesai-container').show();
                } else {
                    $('#tanggal-selesai-container').hide();
                    $('#tanggal_selesai').val('').removeAttr('min');
                }
            });

            $('input[name="tanggal_selesai"]').on('change', function () {
                const tanggalMulai = $('input[name="tanggal_mulai"]').val();
                const tanggalSelesai = $(this).val();

                if (tanggalSelesai && tanggalMulai && tanggalSelesai <= tanggalMulai) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Tanggal Tidak Valid',
                        text: 'Tanggal selesai harus lebih besar dari tanggal mulai!',
                    });
                    $(this).val('');
                }
            });

            $('#checkboxesMain').on('click', function (e) {
                const isChecked = $(this).prop('checked');
                $("#cari-penerima-body .checkbox-penerima:not(:disabled)").prop('checked', isChecked);
            });

            // Event handler ketika checkbox individual dicentang/uncentang
            $(document).on('change', '#cari-penerima-body .checkbox-penerima:not(:disabled)', function () {
                const checkbox = $(this);
                const recipientId = checkbox.data('id').toString();
                const row = checkbox.closest('tr');
                const cells = row.find('td');
                
                if (checkbox.is(':checked')) {
                    const existingIndex = globalSelectedRecipients.findIndex(r => r.id.toString() === recipientId);
                    
                    if (existingIndex === -1) {
                        globalSelectedRecipients.push({
                            id: recipientId,
                            nama: cells.eq(2).text(),
                            departemen: cells.eq(3).text(),
                            email: cells.eq(4).text(),
                            jabatan: cells.eq(5).text()
                        });
                    }
                } else {
                    globalSelectedRecipients = globalSelectedRecipients.filter(r => r.id.toString() !== recipientId);
                }
                
                console.log('Updated selected recipients:', globalSelectedRecipients);
                
                // Update checkboxesMain
                const totalCheckboxes = $("#cari-penerima-body .checkbox-penerima:not(:disabled)").length;
                const checkedCheckboxes = $("#cari-penerima-body .checkbox-penerima:not(:disabled):checked").length;
                $('#checkboxesMain').prop('checked', totalCheckboxes > 0 && totalCheckboxes === checkedCheckboxes);
            });

            $(document).on('change', '#cari-penerima-body .checkbox-penerima', function () {
                const totalCheckboxes = $("#cari-penerima-body .checkbox-penerima:not(:disabled)").length;
                const checkedCheckboxes = $("#cari-penerima-body .checkbox-penerima:not(:disabled):checked").length;
                $('#checkboxesMain').prop('checked', totalCheckboxes > 0 && totalCheckboxes === checkedCheckboxes);
            });

            $('#trsurvey-update').click(function () {
                if (!validateForm()) {
                    return;
                }

                var currentFormData = getCurrentFormData();

                if (currentFormData.list_penerima.length === 0) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Peringatan',
                        text: 'Pilih minimal satu penerima survey!',
                    });
                    return;
                }

                Swal.fire({
                    title: 'Konfirmasi Update',
                    text: 'Apakah Anda yakin ingin mengupdate survey ini?',
                    icon: 'question',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Update!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        performUpdate(currentFormData);
                    }
                });
            });
        });

        function performUpdate(currentFormData) {
            var dept = $('input[name="dept"]').val();
            var id = $('input[name="id_survei"]').val();
            var jenis = $('#check_repetisi').val();

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

            $.ajax({
                url: "{{ URL::to('/') }}/trsurvey/update",
                type: 'PUT',
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    frm: currentFormData,
                    departemen: dept,
                    jenis: jenis,
                    id: id
                },
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Berhasil!',
                        text: response.message || 'Survey berhasil diupdate!',
                        confirmButtonText: 'OK',
                    }).then((result) => {
                        if (result.isConfirmed) {
                            window.location.href = "{{ URL::to('/trsurvey/show') }}/" + id;
                        }
                    });
                },
                error: function (xhr, status, error) {
                    console.error('Update error:', xhr.responseText);
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal!',
                        text: xhr.responseJSON?.message || 'Terjadi kesalahan saat mengupdate survey!',
                    });
                }
            });
        }

        var tableDataPenerima = [];
        let questionCounter = 0;

        document.getElementById('add-question-btn').addEventListener('click', function () {
            if (!isLimitedEdit) {
                addQuestion();
            }
        })

        function LoadRecipientData() {
            const selectedFilter = $('#penerima-filter').val();
            const table = $('#list_cari_penerima').DataTable();

            console.log('Loading recipient data via AJAX:', selectedFilter);
            
            // SIMPAN semua yang sudah dicentang saat ini ke global array
            $('.checkbox-penerima:checked:not(:disabled)').each(function() {
                const recipientId = $(this).data('id').toString();
                const row = $(this).closest('tr');
                const cells = row.find('td');
                
                // Cek apakah sudah ada di globalSelectedRecipients
                const existingIndex = globalSelectedRecipients.findIndex(r => r.id.toString() === recipientId);
                
                if (existingIndex === -1) {
                    // Belum ada, tambahkan
                    globalSelectedRecipients.push({
                        id: recipientId,
                        nama: cells.eq(2).text(),
                        departemen: cells.eq(3).text(),
                        email: cells.eq(4).text(),
                        jabatan: cells.eq(5).text()
                    });
                }
            });
            
            console.log('Currently selected recipients:', globalSelectedRecipients);
            
            $('#checkboxesMain').prop('checked', false);
            table.clear();
            table.row.add([
                '',
                '',
                '<div class="spinner-border spinner-border-sm" role="status"><span class="visually-hidden">Loading...</span></div>',
                'Loading...',
                '',
                '',
                ''
            ]).draw();

            $.ajax({
                type: 'POST',
                url: "{{ URL::to('/') }}/trsurvey/listuser",
                dataType: "JSON",
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: {
                    filter: selectedFilter,
                },
                success: function (data) {
                    var penerima_list = data["penerima_data"];
                    console.log("Data received:", penerima_list);

                    table.clear();

                    penerima_list.forEach(function (penerima, index) {
                        const isInactive = penerima.isactive === '0';
                        const recipientId = penerima.id.toString();
                        
                        // CEK apakah ID ini ada di globalSelectedRecipients
                        const isSelected = globalSelectedRecipients.some(r => r.id.toString() === recipientId);

                        let checkboxHtml = '';
                        if (isInactive) {
                            checkboxHtml = `<div class="form-check">
                                <input class="checkbox-penerima form-check-input" type="checkbox" data-id="${penerima.id}" disabled>
                            </div>`;
                        } else {
                            // PENTING: Set checked berdasarkan globalSelectedRecipients
                            checkboxHtml = `<div class="form-check">
                                <input class="checkbox-penerima form-check-input" type="checkbox" data-id="${penerima.id}" ${isSelected ? 'checked' : ''}>
                            </div>`;
                        }

                        const departemenDisplay = penerima.nama_departemen || penerima.departemen || 'N/A';

                        const rowData = [
                            checkboxHtml,
                            penerima.id || 'N/A',
                            penerima.nama || 'N/A',
                            departemenDisplay,
                            penerima.email || 'N/A',
                            penerima.jabatan || 'N/A',
                        ];

                        const row = table.row.add(rowData);

                        if (isInactive) {
                            $(row.node()).addClass('not').css('background-color', '#ffe9ed');
                        }
                    });

                    table.draw();

                    setTimeout(() => {
                        const totalCheckboxes = $("#cari-penerima-body .checkbox-penerima:not(:disabled)").length;
                        const checkedCheckboxes = $("#cari-penerima-body .checkbox-penerima:not(:disabled):checked").length;
                        $('#checkboxesMain').prop('checked', totalCheckboxes > 0 && totalCheckboxes === checkedCheckboxes);
                    }, 100);

                    console.log('Data loading completed. Rows in table:', table.rows().count());
                    console.log('Checkboxes that should be checked:', globalSelectedRecipients.length);
                    
                    $('#penerimaModal').modal('show');
                },
                error: function (xhr, status, error) {
                    console.error('AJAX Error:', error);
                    table.clear();
                    table.row.add([
                        '',
                        '',
                        'Error',
                        `Error loading data: ${error}`,
                        '',
                        '',
                        ''
                    ]).draw();
                    $('#penerimaModal').modal('show');
                }
            });
        }

        $(document).on('click', '.modal-footer .btn-primary', function () {
            const penerimaTable = $('#list_penerima').DataTable();
            
            // SIMPAN lagi semua yang tercentang saat ini (untuk memastikan)
            $('.checkbox-penerima:checked:not(:disabled)').each(function() {
                const recipientId = $(this).data('id').toString();
                const row = $(this).closest('tr');
                const cells = row.find('td');
                
                const existingIndex = globalSelectedRecipients.findIndex(r => r.id.toString() === recipientId);
                
                if (existingIndex === -1) {
                    globalSelectedRecipients.push({
                        id: recipientId,
                        nama: cells.eq(2).text(),
                        departemen: cells.eq(3).text(),
                        email: cells.eq(4).text(),
                        jabatan: cells.eq(5).text()
                    });
                }
            });
            
            // Gunakan globalSelectedRecipients untuk update tabel
            window.selectedRecipients = [...globalSelectedRecipients];
            
            penerimaTable.clear();

            globalSelectedRecipients.forEach(function(recipient) {
                const recipientData = [
                    `<button type="button" 
                            class="btn btn-sm btn-danger remove-recipient-btn" 
                            data-id="${recipient.id}" 
                            title="Hapus"
                            style="padding: 0.25rem 0.5rem;">
                        <i class="fas fa-times"></i>
                    </button>`,
                    recipient.id,
                    recipient.nama,
                    recipient.departemen,
                    recipient.email,
                    recipient.jabatan,
                ];

                penerimaTable.row.add(recipientData);
            });

            penerimaTable.draw();

            const selectedCount = globalSelectedRecipients.length;
            if (selectedCount > 0) {
                $('#buttonCariPenerima').text(`${selectedCount} Penerima Dipilih`);
                $('#buttonCariPenerima').removeClass('btn-primary').addClass('btn-success');
            } else {
                $('#buttonCariPenerima').text('Cari Penerima');
                $('#buttonCariPenerima').removeClass('btn-success').addClass('btn-primary');
            }

            console.log('Final selected recipients:', globalSelectedRecipients);
            $('#penerimaModal').modal('hide');
        });

        function populateFormWithSurveyData(data) {
            if (data.judul_form) {
                $('input[name="judul_form"]').val(data.judul_form);
            }

            if (data.deskripsi) {
                $('.summernote-survey-deskripsi').summernote('code', data.deskripsi);
                
                // Update counter after loading data
                setTimeout(function() {
                    var text = $('.summernote-survey-deskripsi').summernote('code').replace(/<[^>]*>/g, '').trim();
                    var length = text.length;
                    var $editor = $('.summernote-survey-deskripsi').next('.note-editor');
                    var $counter = $editor.find('.char-counter-deskripsi');
                    if ($counter.length) {
                        $counter.text(length + ' / 1000 karakter');
                        $counter.css('color', length > 900 ? '#dc3545' : '#6c757d');
                    }
                }, 200);
            }

            if (data.list_penerima && data.list_penerima.length > 0) {
                window.selectedRecipients = data.list_penerima;

                const penerimaTable = $('#list_penerima').DataTable();
                penerimaTable.clear();

                data.list_penerima.forEach(function (recipient) {
                    const recipientData = [
                        recipient.id,
                        recipient.nama,
                        recipient.departemen,
                        recipient.email,
                        recipient.jabatan,
                    ];
                    penerimaTable.row.add(recipientData);
                });

                penerimaTable.draw();

                $('#buttonCariPenerima').text(`${data.list_penerima.length} Penerima Dipilih`);
                $('#buttonCariPenerima').removeClass('btn-primary').addClass('btn-success');
            }

            $('.question-card').remove();
            questionCounter = 0;

            if (data.pertanyaan && data.pertanyaan.length > 0) {
                data.pertanyaan.forEach(function (question) {
                    addQuestionFromData(question);
                });
            } else {
                addQuestion();
            }

            updateDeleteButtons();
        }

        function addQuestionFromData(questionData) {
            questionCounter++;
            const container = document.getElementById('questions-container');

            const questionCard = document.createElement('div');
            questionCard.className = 'col-md-12 mb-4 question-card';
            questionCard.id = `question-${questionCounter}`;

            // Conditionally include summernote container based on question type
            const summernoteHtml = questionData.jenis !== 'group_linear_scale' 
                ? `<div class="mb-4 summernote-container-${questionCounter}">
                       <textarea class="summernote-question-${questionCounter} form-control mb-3" rows="2" name="pertanyaan_soal[]">${questionData.soal}</textarea>
                   </div>`
                : '';

            questionCard.innerHTML = `
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start mb-3">
                                                <h5 class="mb-0">Pertanyaan ${questionCounter}</h5>
                                                <button type="button" class="btn btn-danger btn-sm delete-question-btn" data-question-id="${questionCounter}">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                            <hr class="horizontal dark mt-0 mb-3">
                                            <div class="row">
                                                <div class="col-md-8">
                                                    ${summernoteHtml}
                                                    <div id="question-options-${questionCounter}">
                                                         <!-- Options will be populated -->
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <div class="d-flex align-items-center mb-2">
                                                        <div class="d-flex align-items-center mb-2">
                                                        <label class="form-label mb-0 me-2 mb-0 me-2">Tipe Pertanyaan:</label>
                                                        <i class="fas fa-question-circle text-info" style="cursor: pointer; font-size: 16px;" 
                                                           data-bs-toggle="modal" data-bs-target="#surveyTypeInfoModal">
                                                        </i>
                                                    </div>

                                                    </div>
                                                    <select class="form-select question-type-select" data-question-id="${questionCounter}" name="pertanyaan_jenis[]">
                                                        <option value="pilihan_text" ${questionData.jenis === 'pilihan_text' ? 'selected' : ''}>Pilihan + Text</option>
                                                        <option value="checkbox" ${questionData.jenis === 'checkbox' ? 'selected' : ''}>Checkbox</option>
                                                        <option value="text" ${questionData.jenis === 'text' ? 'selected' : ''}>Text</option>
                                                        <option value="linear_scale" ${questionData.jenis === 'linear_scale' ? 'selected' : ''}>Linear Scale</option>
                                                        <option value="group_linear_scale" ${questionData.jenis === 'group_linear_scale' ? 'selected' : ''}>Group Linear Scale</option>
                                                    </select>
                                                    <div class="form-check mt-2">
                                                        <input class="form-check-input" type="checkbox" id="required-${questionCounter}" name="pertanyaan_required[]" ${questionData.required ? 'checked' : ''}>
                                                        <label class="form-check-label" for="required-${questionCounter}">
                                                            Wajib dijawab
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>`;

            container.appendChild(questionCard);

            // Only initialize summernote if not group_linear_scale
            if (questionData.jenis !== 'group_linear_scale') {
                var currentCounter = questionCounter; // Capture current counter value
                $(`.summernote-question-${questionCounter}`).summernote({
                minHeight: null,
                maxHeight: null,
                placeholder: "Masukkan pertanyaan Anda...",
                toolbar: [
                    ['style', ['bold', 'italic', 'underline']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['color', ['backcolor']],
                ],
                callbacks: {
                    onInit: function() {
                        var $editor = $(this).next('.note-editor');
                        var $statusbar = $editor.find('.note-statusbar');
                        $statusbar.prepend('<div class="char-counter-question-' + currentCounter + '" style="float: left; padding: 5px 10px; color: #6c757d;">0 / 255 karakter</div>');
                        
                        var self = this;
                        setTimeout(function() {
                            var $editable = $(self).next('.note-editor').find('.note-editable');
                            var text = $editable.text();
                            var length = text.length;
                            var $counter = $editor.find('.char-counter-question-' + currentCounter);
                            $counter.text(length + ' / 255 karakter');
                            $counter.css('color', length > 229 ? '#dc3545' : '#6c757d');
                        }, 100);
                    },
                    onKeydown: function(e) {
                        var $editable = $(this).next('.note-editor').find('.note-editable');
                        var text = $editable.text();
                        var length = text.length;
                        var maxLength = 255;

                        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
                            (e.keyCode === 65 && e.ctrlKey === true) ||
                            (e.keyCode === 67 && e.ctrlKey === true) ||
                            (e.keyCode === 86 && e.ctrlKey === true) ||
                            (e.keyCode === 88 && e.ctrlKey === true) ||
                            (e.keyCode >= 35 && e.keyCode <= 39)) {
                            return;
                        }

                        if (length >= maxLength) {
                            e.preventDefault();
                            return false;
                        }
                    },
                    onKeyup: function(e) {
                        var $editable = $(this).next('.note-editor').find('.note-editable');
                        var text = $editable.text();
                        var length = text.length;
                        var maxLength = 255;
                        
                        if (length > maxLength) {
                            var trimmedText = text.substring(0, maxLength);
                            $(this).summernote('code', trimmedText);
                            length = maxLength;
                        }
                        
                        var $editor = $(this).next('.note-editor');
                        var $statusbar = $editor.find('.note-statusbar');
                        var $counter = $statusbar.find('.char-counter-question-' + currentCounter);
                        
                        $counter.text(length + ' / ' + maxLength + ' karakter');
                        $counter.css('color', length > maxLength * 0.9 ? '#dc3545' : '#6c757d');
                    },
                    onPaste: function(e) {
                        var self = this;
                        setTimeout(function() {
                            var $editable = $(self).next('.note-editor').find('.note-editable');
                            var text = $editable.text();
                            var maxLength = 255;
                            
                            if (text.length > maxLength) {
                                var trimmedText = text.substring(0, maxLength);
                                $(self).summernote('code', trimmedText);
                            }
                            $(self).next('.note-editor').find('.note-editable').trigger('keyup');
                        }, 10);
                    }
                }
                });
            }

            updateQuestionTypeWithData(questionCard.querySelector('.question-type-select'), questionData);

            questionCard.querySelector('.question-type-select').addEventListener('change', function () {
                updateQuestionType(this);
            });

            questionCard.querySelector('.delete-question-btn').addEventListener('click', function () {
                deleteQuestion(this);
            });

            if (isLimitedEdit) {
                $(questionCard).find('textarea, select, input').prop('disabled', true);
                if (questionData.jenis !== 'group_linear_scale') {
                    $(`.summernote-question-${questionCounter}`).summernote('disable');
                }
                $(questionCard).find('.delete-question-btn').prop('disabled', true).removeClass('btn-danger').addClass('btn-secondary');
                $(questionCard).find('.card').css('background-color', '#f8f9fa');
                $(questionCard).find('.master-label-dropdown').prop('disabled', false);
                $(questionCard).find('button[onclick*="masterLabelModal"]').prop('disabled', false);
            }
        }

        function updateQuestionTypeWithData(selectElement, questionData) {
            const questionCard = selectElement.closest('.question-card');
            const questionId = selectElement.getAttribute('data-question-id');
            const type = questionData.jenis;
            const optionsContainer = questionCard.querySelector(`#question-options-${questionId}`);
            
            switch (type) {
                case 'pilihan_text':
                    let pilihanOptionsHtml = '';
                    if (questionData.opsi && questionData.opsi.length > 0) {
                        questionData.opsi.forEach(function (opsi, index) {
                            const uniqueId = `option-${questionId}-existing-${index}`;
                            const length = opsi.length;
                            pilihanOptionsHtml += `
                                <div class="d-flex align-items-center mb-3">
                                    <input type="radio" class="form-check-input me-2" disabled>
                                    <input type="text" class="form-control option-input" id="${uniqueId}" value="${opsi}" name="pilihan_text[${questionId}][opsi][]" maxlength="100" style="flex: 1;">
                                    <small class="option-counter text-muted ms-2" style="min-width: 60px; text-align: right; font-size: 0.75rem;">${length} / 100</small>
                                    <button type="button" class="btn btn-outline-danger btn-sm ms-2" onclick="removeOption(this)">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>`;
                        });
                    }

                    optionsContainer.innerHTML = `
                        <div class="mb-2" id="pilihan-options-${questionId}">
                            ${pilihanOptionsHtml}
                            <button type="button" class="btn btn-outline-primary btn-sm mb-3" onclick="addOption(${questionId}, 'pilihan_text')">
                                <i class="fas fa-plus me-1"></i>Tambah Opsi
                            </button>
                            <div class="border-top pt-3">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="reason-required-${questionId}" value="1" name="pilihan_text[${questionId}][required]" ${questionData.alasan_required ? 'checked' : ''}>
                                    <label class="form-check-label" for="reason-required-${questionId}">
                                        Text wajib diisi
                                    </label>
                                </div>
                                <textarea class="form-control" placeholder="Text" rows="2" disabled style="background-color: #e9ecef;"></textarea>
                            </div>
                        </div>`;
                    setTimeout(function() {
                        questionData.opsi.forEach(function (opsi, index) {
                            const uniqueId = `option-${questionId}-existing-${index}`;
                            const inputElement = document.getElementById(uniqueId);
                            if (inputElement) {
                                const counterElement = inputElement.parentElement.querySelector('.option-counter');
                                inputElement.addEventListener('input', function() {
                                    const length = this.value.length;
                                    const maxLength = 100;
                                    counterElement.textContent = length + ' / ' + maxLength;
                                    counterElement.style.color = length > maxLength * 0.9 ? '#dc3545' : '#6c757d';
                                });
                            }
                        });
                    }, 100);
                    break;

                case 'checkbox':
                    let checkboxOptionsHtml = '';
                    if (questionData.opsi && questionData.opsi.length > 0) {
                        questionData.opsi.forEach(function (opsi, index) {
                            const uniqueId = `option-${questionId}-cb-existing-${index}`;
                            const length = opsi.length;
                            checkboxOptionsHtml += `
                                <div class="d-flex align-items-center mb-3">
                                    <input type="checkbox" class="form-check-input me-2" disabled>
                                    <input type="text" class="form-control option-input" id="${uniqueId}" value="${opsi}" name="checkbox[${questionId}][opsi][]" maxlength="100" style="flex: 1;">
                                    <small class="option-counter text-muted ms-2" style="min-width: 60px; text-align: right; font-size: 0.75rem;">${length} / 100</small>
                                    <button type="button" class="btn btn-outline-danger btn-sm ms-2" onclick="removeOption(this)">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>`;
                        });
                    }

                    optionsContainer.innerHTML = `
                        <div class="mb-2" id="checkbox-options-${questionId}">
                            ${checkboxOptionsHtml}
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addOption(${questionId}, 'checkbox')">
                                <i class="fas fa-plus me-1"></i>Tambah Opsi
                            </button>
                        </div>`;
                    
                    // Add event listeners to existing options
                    setTimeout(function() {
                        questionData.opsi.forEach(function (opsi, index) {
                            const uniqueId = `option-${questionId}-cb-existing-${index}`;
                            const inputElement = document.getElementById(uniqueId);
                            if (inputElement) {
                                const counterElement = inputElement.parentElement.querySelector('.option-counter');
                                inputElement.addEventListener('input', function() {
                                    const length = this.value.length;
                                    const maxLength = 100;
                                    counterElement.textContent = length + ' / ' + maxLength;
                                    counterElement.style.color = length > maxLength * 0.9 ? '#dc3545' : '#6c757d';
                                });
                            }
                        });
                    }, 100);
                    break;

                case 'text':
                    optionsContainer.innerHTML = `
                        <div class="mb-2">
                            <input type="text" class="form-control" name="text[]" placeholder="Jawaban Teks" disabled>
                        </div>`;
                    break;

                case 'linear_scale':
                    optionsContainer.innerHTML = `
                        <div class="mb-2">
                            <div class="d-flex align-items-center mb-2">
                                <label class="mb-0 text-muted small me-2">Label Scale:</label>
                                <button type="button" class="btn btn-sm btn-primary select-label-btn" 
                                        data-question-id="${questionId}" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#masterLabelModal">
                                    <i class="fas fa-plus-circle me-1"></i>Pilih Label Scale
                                </button>
                                <input type="hidden" id="master-label-${questionId}" 
                                       name="linear_scale[${questionId}][master_label_id]" 
                                       data-question-id="${questionId}" 
                                       value="">
                            </div>
                            <div class="ms-0">
                                <div class="border rounded p-2 mb-2 bg-light" id="preview-${questionId}">
                                    <small><strong>Preview:</strong> Pilih label untuk melihat skala</small>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="questions[${questionId}][scale_min]" value="1">
                        <input type="hidden" name="questions[${questionId}][scale_max]" value="5">
                        <input type="hidden" id="kata-positif-${questionId}" name="linear_scale[${questionId}][kata_positif]" value="${questionData.kata_positif || ''}">
                        <input type="hidden" id="kata-negatif-${questionId}" name="linear_scale[${questionId}][kata_negatif]" value="${questionData.kata_negatif || ''}">`;

                    // Update button dan preview jika ada data
                    setTimeout(function () {
                        const button = document.querySelector(`[data-question-id="${questionId}"].select-label-btn`);
                        const hiddenInput = document.getElementById(`master-label-${questionId}`);
                        const previewDiv = document.getElementById(`preview-${questionId}`);

                        console.log('Linear Scale - Loading existing data:', {
                            questionId: questionId,
                            master_label_id: questionData.master_label_id,
                            button: button,
                            hiddenInput: hiddenInput,
                            previewDiv: previewDiv
                        });

                        if (questionData.master_label_id) {
                            // Set hidden input value
                            hiddenInput.value = questionData.master_label_id;

                            // Get label name from API
                            $.ajax({
                                url: "{{ URL::to('/api/master-labels/get') }}/" + questionData.master_label_id,
                                type: 'GET',
                                dataType: 'JSON',
                                success: function(response) {
                                    console.log('API Response for label:', response);
                                    if (response.success && response.data) {
                                        const label = response.data;
                                        // Update button
                                        button.innerHTML = `<i class="fas fa-check-circle me-1"></i>${label.nama_label}`;
                                        button.classList.remove('btn-primary');
                                        button.classList.add('btn-success');
                                        
                                        // Update preview
                                        const scale = generateLabelPreview(label.kata_positif, label.kata_negatif);
                                        previewDiv.innerHTML = `<small><strong>Preview:</strong> ${scale}</small>`;
                                    }
                                },
                                error: function(xhr, status, error) {
                                    console.error('Error loading label:', error);
                                }
                            });
                        }
                    }, 300);
                break;

                case 'group_linear_scale':
                const groupNameHtml = `
                    <div class="mb-4 summernote-group-container-${questionId}">
                        <label class="form-label fw-bold">Nama Group:</label>
                        <textarea class="summernote-group-linear-${questionId} form-control mb-3" rows="2" name="group_name[]"></textarea>
                    </div>
                `;
                    let vendorsHtml = '';
                    if (questionData.vendors && questionData.vendors.length > 0) {
                        questionData.vendors.forEach(function (vendor, index) {
                            vendorsHtml += `
                                <div class="d-flex align-items-center mb-3 vendor-item">
                                    <span class="me-2 text-muted" style="min-width: 30px;">${index + 1}.</span>
                                    <input type="text" class="form-control" 
                                           name="group_vendors[${questionId}][]" 
                                           value="${vendor.label}"
                                           placeholder="Contoh: PT. Vendor A" 
                                           maxlength="100"
                                           style="flex: 1;">
                                    <button type="button" class="btn btn-sm btn-outline-danger ms-2 remove-vendor-btn" style="white-space: nowrap;">
                                        <i class="fas fa-times me-1"></i>Hapus
                                    </button>
                                </div>`;
                        });
                    }
                    
                    let questionsHtml = '';
                    if (questionData.questions && questionData.questions.length > 0) {
                        questionData.questions.forEach(function (q, index) {
                            const itemNum = index + 1;
                            questionsHtml += `
                                <div class="mb-3 group-question-item position-relative" data-item-num="${itemNum}" style="border: 1px solid #dee2e6; border-radius: 8px; padding: 15px; padding-top: 45px;">
                                    <button type="button" class="btn btn-danger remove-group-question-btn" style="position: absolute; top: 10px; right: 10px; padding: 6px; font-size: 12px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;">
                                        <i class="fas fa-times" style="font-size: 10px;"></i>
                                    </button>
                                    <div class="d-flex align-items-center mb-2">
                                        <span class="me-2 text-muted" style="min-width: 30px;">${itemNum}.</span>
                                        <input type="text" class="form-control" 
                                               name="group_questions[${questionId}][]" 
                                               value="${q.label}"
                                               placeholder="Contoh: Kualitas produk" 
                                               maxlength="255"
                                               style="flex: 1;">
                                    </div>
                                    <div class="d-flex align-items-center ms-4 ps-2 mb-2">
                                        <label class="mb-0 text-muted small me-2\">Label Scale:</label>
                                        <button type="button" class="btn btn-sm btn-primary select-label-btn" 
                                                data-question-id="${questionId}"
                                                data-item-num="${itemNum}"
                                                data-bs-toggle="modal" 
                                                data-bs-target="#masterLabelModal">
                                            <i class="fas fa-plus-circle me-1"></i>Pilih Label Scale
                                        </button>
                                        <input type="hidden" class="group-label-select-${questionId}-${itemNum}" 
                                               name="group_labels[${questionId}][]"
                                               data-question-id="${questionId}"
                                               data-item-num="${itemNum}"
                                               value="${q.master_label_id || ''}">
                                    </div>
                                    <div class="ms-4 ps-2">
                                        <div class="border rounded p-2 mb-2 bg-light label-preview-alert-${questionId}-${itemNum}">
                                            <small><strong>Preview:</strong> ${q.kata_positif && q.kata_negatif ? generateLabelPreview(q.kata_positif, q.kata_negatif) : 'Pilih label untuk melihat skala'}</small>
                                        </div>
                                    </div>
                                </div>`;
                        });
                    }
                    
                    optionsContainer.innerHTML = `
                        <div class="mb-2">
                            <!-- Vendor Section -->
                            <div class="mb-3">
                                <label class="form-label fw-bold text-primary">
                                    Vendor/Object:
                                </label>
                                <div class="vendor-list-${questionId}">
                                    ${vendorsHtml}
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-primary add-vendor-btn" data-question-id="${questionId}">
                                    <i class="fas fa-plus me-1"></i>Tambah Vendor
                                </button>
                            </div>

                            <!-- Pertanyaan & Label Section -->
                            <div class="mb-3">
                                <label class="form-label fw-bold text-success">
                                    Pertanyaan & Label:
                                </label>
                                <div class="questions-list-${questionId}">
                                    ${questionsHtml}
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-success add-group-question-btn" data-question-id="${questionId}">
                                    <i class="fas fa-plus me-1"></i>Tambah Pertanyaan
                                </button>
                            </div>
                        </div>`;
                    const rowDiv = questionCard.querySelector('.row');
                const colMd8 = rowDiv.querySelector('.col-md-8');
                colMd8.insertAdjacentHTML('afterbegin', groupNameHtml);
                    // Load master labels to dropdowns and update button states
                    setTimeout(function() {
                        initGroupLinearScaleSummernote(questionId);
                        if (questionData.group_name) {
                            $(`.summernote-group-linear-${questionId}`).summernote('code', questionData.group_name);
                            setTimeout(function () {
                                $(`.summernote-group-linear-${questionId}`).next('.note-editor')
                                    .find('.note-editable').trigger('keyup');
                            }, 100);
                        }
                        if (questionData.questions && questionData.questions.length > 0) {
                            questionData.questions.forEach(function (q, index) {
                                const itemNum = index + 1;
                                const button = questionCard.querySelector(`[data-item-num="${itemNum}"].select-label-btn`);
                                const hiddenInput = questionCard.querySelector(`.group-label-select-${questionId}-${itemNum}`);
                                const labelNameInput = questionCard.querySelector(`.group-label-name-${questionId}-${itemNum}`);
                                const kataPositifInput = questionCard.querySelector(`.group-kata-positif-${questionId}-${itemNum}`);
                                const kataNegatifInput = questionCard.querySelector(`.group-kata-negatif-${questionId}-${itemNum}`);
                                const previewDiv = questionCard.querySelector(`.label-preview-alert-${questionId}-${itemNum}`);
                                
                                if (q.master_label_id && button && hiddenInput) {
                                    // Set hidden input value
                                    hiddenInput.value = q.master_label_id;
                                    
                                    // Get label name from API
                                    $.ajax({
                                        url: "{{ URL::to('/api/master-labels/get') }}/" + q.master_label_id,
                                        type: 'GET',
                                        dataType: 'JSON',
                                        success: function(response) {
                                            if (response.success && response.data) {
                                                const label = response.data;
                                                
                                                // Update hidden inputs
                                                if (labelNameInput) labelNameInput.value = label.nama_label;
                                                if (kataPositifInput) kataPositifInput.value = label.kata_positif;
                                                if (kataNegatifInput) kataNegatifInput.value = label.kata_negatif;
                                                
                                                // Update button
                                                button.innerHTML = `<i class="fas fa-check-circle me-1"></i>${label.nama_label}`;
                                                button.classList.remove('btn-primary');
                                                button.classList.add('btn-success');
                                                
                                                // Update preview
                                                if (previewDiv) {
                                                    const scale = generateLabelPreview(label.kata_positif, label.kata_negatif);
                                                    previewDiv.innerHTML = `<small><strong>Preview:</strong> ${scale}</small>`;
                                                }
                                            }
                                        }
                                    });
                                }
                            });
                        }

                        const vendorList = $(`.vendor-list-${questionId}`);
                        const questionsList = $(`.questions-list-${questionId}`);
                        updateVendorButtons(vendorList);
                        updateQuestionButtons(questionsList);
                    }, 200);
                    break;
            }
            if (isLimitedEdit) {
                $(optionsContainer).find('.btn-outline-danger').prop('disabled', true).css('opacity', '0.5');
                $(optionsContainer).find('.btn-outline-primary').prop('disabled', true).css('opacity', '0.5');
                $(optionsContainer).find('.select-label-btn').prop('disabled', false);
                $(optionsContainer).find('button[onclick*="masterLabelModal"]').prop('disabled', false);
            }
        }

        function validateForm() {
            // Validasi judul
            const judulForm = $('input[name="judul_form"]').val().trim();
            if (!judulForm) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Form Tidak Lengkap',
                    text: 'Judul Survey tidak boleh kosong!',
                });
                return false;
            }

            // Validasi subjudul
            const subjudulSurvei = $('input[name="subjudul_survei"]').val().trim();
            if (!subjudulSurvei) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Form Tidak Lengkap',
                    text: 'Subjudul Survey tidak boleh kosong!',
                });
                return false;
            }

            // Validasi deskripsi
            const deskripsi = $('.summernote-survey-deskripsi').summernote('code').replace(/<[^>]*>/g, '').trim();
            if (!deskripsi || deskripsi === '<br>') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Form Tidak Lengkap',
                    text: 'Deskripsi Survey tidak boleh kosong!',
                });
                return false;
            }

            // Validasi tanggal mulai
            const tanggalMulai = $('input[name="tanggal_mulai"]').val();
            if (!tanggalMulai) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Form Tidak Lengkap',
                    text: 'Tanggal Mulai tidak boleh kosong!',
                });
                return false;
            }

            // Validasi tanggal selesai
            const tanggalSelesai = $('input[name="tanggal_selesai"]').val();
            if (!tanggalSelesai || $('#tanggal-selesai-container').is(':hidden')) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Form Tidak Lengkap',
                    text: 'Tanggal Selesai tidak boleh kosong!',
                });
                return false;
            }

            // Validasi pertanyaan
            let isValid = true;
            let errorMessage = '';

            $('.question-card').each(function (index) {
                const questionNum = index + 1;
                const questionId = $(this).attr('id').split('-')[1];
                const jenis = $(this).find('select[name="pertanyaan_jenis[]"]').val();

                // Skip validasi soal untuk group_linear_scale karena tidak menggunakan summernote
                if (jenis !== 'group_linear_scale') {
                    const soal = $(this).find('.summernote-question-' + questionId).summernote('code').replace(/<[^>]*>/g, '').trim();
                    
                    // Validasi soal tidak kosong
                    if (!soal || soal === '<br>') {
                        errorMessage = `Soal pertanyaan ${questionNum} tidak boleh kosong!`;
                        isValid = false;
                        return false;
                    }
                }

                // Validasi opsi untuk pilihan_text dan checkbox
                if (jenis === 'pilihan_text') {
                    const opsiInputs = $(this).find('input[name="pilihan_text[' + questionId + '][opsi][]"]');
                    let hasEmptyOpsi = false;
                    let hasValidOpsi = false;

                    opsiInputs.each(function () {
                        const opsiValue = $(this).val().trim();
                        if (opsiValue === '') {
                            hasEmptyOpsi = true;
                        } else {
                            hasValidOpsi = true;
                        }
                    });

                    if (hasEmptyOpsi) {
                        errorMessage = `Opsi pada pertanyaan ${questionNum} tidak boleh ada yang kosong!`;
                        isValid = false;
                        return false;
                    }

                    if (!hasValidOpsi) {
                        errorMessage = `Pertanyaan ${questionNum} harus memiliki minimal satu opsi!`;
                        isValid = false;
                        return false;
                    }
                }

                if (jenis === 'checkbox') {
                    const opsiInputs = $(this).find('input[name="checkbox[' + questionId + '][opsi][]"]');
                    let hasEmptyOpsi = false;
                    let hasValidOpsi = false;

                    opsiInputs.each(function () {
                        const opsiValue = $(this).val().trim();
                        if (opsiValue === '') {
                            hasEmptyOpsi = true;
                        } else {
                            hasValidOpsi = true;
                        }
                    });

                    if (hasEmptyOpsi) {
                        errorMessage = `Opsi pada pertanyaan ${questionNum} tidak boleh ada yang kosong!`;
                        isValid = false;
                        return false;
                    }

                    if (!hasValidOpsi) {
                        errorMessage = `Pertanyaan ${questionNum} harus memiliki minimal satu opsi!`;
                        isValid = false;
                        return false;
                    }
                }
                
                if (jenis === 'group_linear_scale') {
                    const namaGroup = $(this).find('.summernote-group-linear-' + questionId).summernote('code').replace(/<[^>]*>/g, '').trim();

                    if (!namaGroup || namaGroup === '<br>') {
                        errorMessage = `Nama group pada pertanyaan ${questionNum} tidak boleh kosong!`;
                        isValid = false;
                        return false;
                    }
                    // Validasi vendors
                    const vendorInputs = $(this).find('input[name="group_vendors[' + questionId + '][]"]');
                    let hasEmptyVendor = false;
                    let hasValidVendor = false;

                    vendorInputs.each(function () {
                        const vendorValue = $(this).val().trim();
                        if (vendorValue === '') {
                            hasEmptyVendor = true;
                        } else {
                            hasValidVendor = true;
                        }
                    });

                    if (hasEmptyVendor) {
                        errorMessage = `Vendor pada pertanyaan ${questionNum} tidak boleh ada yang kosong!`;
                        isValid = false;
                        return false;
                    }

                    if (!hasValidVendor) {
                        errorMessage = `Pertanyaan ${questionNum} harus memiliki minimal satu vendor!`;
                        isValid = false;
                        return false;
                    }
                    
                    // Validasi questions
                    const questionInputs = $(this).find('input[name="group_questions[' + questionId + '][]"]');
                    let hasEmptyQuestion = false;
                    let hasValidQuestion = false;

                    questionInputs.each(function () {
                        const questionValue = $(this).val().trim();
                        if (questionValue === '') {
                            hasEmptyQuestion = true;
                        } else {
                            hasValidQuestion = true;
                        }
                    });

                    if (hasEmptyQuestion) {
                        errorMessage = `Pertanyaan group pada pertanyaan ${questionNum} tidak boleh ada yang kosong!`;
                        isValid = false;
                        return false;
                    }

                    if (!hasValidQuestion) {
                        errorMessage = `Pertanyaan ${questionNum} harus memiliki minimal satu pertanyaan group!`;
                        isValid = false;
                        return false;
                    }
                    
                    // Validasi labels
                    const labelSelects = $(this).find('select[name="group_labels[' + questionId + '][]"]');
                    let hasEmptyLabel = false;

                    labelSelects.each(function () {
                        if (!$(this).val()) {
                            hasEmptyLabel = true;
                        }
                    });

                    if (hasEmptyLabel) {
                        errorMessage = `Semua pertanyaan group pada pertanyaan ${questionNum} harus memilih label!`;
                        isValid = false;
                        return false;
                    }
                }
            });

            if (!isValid) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Form Tidak Lengkap',
                    text: errorMessage,
                });
                return false;
            }

            return true;
        }

        function getCurrentFormData() {
            var check_repetisi = $('#check_repetisi').val();
            var salin_pertanyaan = $('select[name="salin_pertanyaan"]').val();
            var tanggal_mulai = $('input[name="tanggal_mulai"]').val();
            var judul_form = $('input[name="judul_form"]').val();
            var tanggal_selesai = $('input[name="tanggal_selesai"]').val();
            var subjudul_survei = $('input[name="subjudul_survei"]').val();
            var deskripsi = $('.summernote-survey-deskripsi').summernote('code');

            var recipientIds = window.selectedRecipients ? window.selectedRecipients.map(function (recipient) {
                return recipient.id;
            }) : [];

            var pertanyaan = [];
            if (!isLimitedEdit) {
                $('.question-card').each(function (index) {
                    var questionId = $(this).attr('id').split('-')[1];
                    var jenis = $(this).find('select[name="pertanyaan_jenis[]"]').val();
                    var required = $(this).find('input[name="pertanyaan_required[]"]').is(':checked') ? 1 : 0;

                    var soal = '';
                    if (jenis === 'group_linear_scale') {
                        soal = judul_form;
                    } else {
                        soal = $(this).find('.summernote-question-' + questionId).summernote('code');
                    }

                    var questionData = {
                        soal: soal,
                        jenis: jenis,
                        required: required
                    };

                    if (jenis === 'pilihan_text') {
                        var opsi = [];
                        $(this).find('input[name="pilihan_text[' + questionId + '][opsi][]"]').each(function () {
                            if ($(this).val().trim() !== '') {
                                opsi.push($(this).val());
                            }
                        });
                        var alasan_required = $(this).find('input[name="pilihan_text[' + questionId + '][required]"]').is(':checked') ? 1 : 0;

                        questionData.opsi = opsi;
                        questionData.alasan_required = alasan_required;

                    } else if (jenis === 'checkbox') {
                        var opsi = [];
                        $(this).find('input[name="checkbox[' + questionId + '][opsi][]"]').each(function () {
                            if ($(this).val().trim() !== '') {
                                opsi.push($(this).val());
                            }
                        });
                        questionData.opsi = opsi;

                    } else if (jenis === 'linear_scale') {
                        const masterLabelId = $(this).find('input[name="linear_scale[' + questionId + '][master_label_id]"]').val();
                        questionData.master_label_id = masterLabelId || null;
                        questionData.kata_positif = $(this).find('input[name="linear_scale[' + questionId + '][kata_positif]"]').val();
                        questionData.kata_negatif = $(this).find('input[name="linear_scale[' + questionId + '][kata_negatif]"]').val();
                        questionData.scale_min = 1;
                        questionData.scale_max = 5;
                    } else if (jenis === 'group_linear_scale') {
                        soal = $(this).find('.summernote-group-linear-' + questionId).summernote('code');
                        questionData.soal = soal;
                        
                        var vendors = [];
                        $(this).find('input[name="group_vendors[' + questionId + '][]"]').each(function () {
                            if ($(this).val().trim() !== '') {
                                vendors.push($(this).val().trim());
                            }
                        });
                        
                        var questions = [];
                        var labels = [];
                        var labelNames = [];
                        var kataPositifs = [];
                        var kataNegatifs = [];
                        
                        $(this).find('.group-question-item').each(function (index) {
                            var questionText = $(this).find('input[name="group_questions[' + questionId + '][]"]').val().trim();
                            if (questionText !== '') {
                                var labelId = $(this).find('input[name="group_labels[' + questionId + '][]"]').val();
                                var labelName = $(this).find('input[name="group_label_names[' + questionId + '][]"]').val();
                                var kataPositif = $(this).find('input[name="group_kata_positif[' + questionId + '][]"]').val();
                                var kataNegatif = $(this).find('input[name="group_kata_negatif[' + questionId + '][]"]').val();
                                
                                questions.push(questionText);
                                labels.push(labelId || null);
                                labelNames.push(labelName || '');
                                kataPositifs.push(kataPositif || '');
                                kataNegatifs.push(kataNegatif || '');
                            }
                        });

                        questionData.vendors = vendors;
                        questionData.questions = questions;
                        questionData.labels = labels;
                        questionData.label_names = labelNames;
                        questionData.kata_positifs = kataPositifs;
                        questionData.kata_negatifs = kataNegatifs;
                    }
                    pertanyaan.push(questionData);
                });
            }

            return {
                'check_repetisi': check_repetisi,
                'salin_pertanyaan': salin_pertanyaan,
                'tanggal_mulai': tanggal_mulai,
                'judul_form': judul_form,
                'tanggal_selesai': tanggal_selesai,
                'subjudul_survei': subjudul_survei,
                'deskripsi': deskripsi,
                'list_penerima': recipientIds,
                'pertanyaan': pertanyaan
            };
        }

        function compareDataForChanges(originalData, currentData) {
            if (originalData.judul_form !== currentData.judul_form) {
                console.log('Title changed');
                return true;
            }

            if (originalData.pertanyaan.length !== currentData.pertanyaan.length) {
                console.log('Questions count changed');
                return true;
            }

            for (let i = 0; i < originalData.pertanyaan.length; i++) {
                if (compareQuestions(originalData.pertanyaan[i], currentData.pertanyaan[i])) {
                    console.log('Question changed at index:', i);
                    return true;
                }
            }

            return false;
        }

        function initGroupLinearScaleSummernote(questionId) {
            $(`.summernote-group-linear-${questionId}`).summernote({
                minHeight: null,
                maxHeight: null,
                placeholder: "Masukkan nama group... (Contoh: Penilaian Supplier Catering)",
                toolbar: [
                    ['style', ['bold', 'italic', 'underline']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['color', ['backcolor']],
                ],
                callbacks: {
                    onInit: function () {
                        var $editor = $(this).next('.note-editor');
                        var $statusbar = $editor.find('.note-statusbar');
                        $statusbar.prepend('<div class="char-counter-group-' + questionId +
                            '" style="float: left; padding: 5px 10px; color: #6c757d;">0 / 35 karakter</div>'
                        );
                    },
                    onKeydown: function (e) {
                        var $editable = $(this).next('.note-editor').find('.note-editable');
                        var text = $editable.text();
                        var length = text.length;
                        var maxLength = 35;

                        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
                            (e.keyCode === 65 && e.ctrlKey === true) ||
                            (e.keyCode === 67 && e.ctrlKey === true) ||
                            (e.keyCode === 86 && e.ctrlKey === true) ||
                            (e.keyCode === 88 && e.ctrlKey === true) ||
                            (e.keyCode >= 35 && e.keyCode <= 39)) {
                            return;
                        }

                        if (length >= maxLength) {
                            e.preventDefault();
                            return false;
                        }
                    },
                    onKeyup: function (e) {
                        var $editable = $(this).next('.note-editor').find('.note-editable');
                        var text = $editable.text();
                        var length = text.length;
                        var maxLength = 35;

                        if (length > maxLength) {
                            var trimmedText = text.substring(0, maxLength);
                            $(this).summernote('code', trimmedText);
                            length = maxLength;
                        }

                        var $editor = $(this).next('.note-editor');
                        var $statusbar = $editor.find('.note-statusbar');
                        var $counter = $statusbar.find('.char-counter-group-' + questionId);

                        $counter.text(length + ' / ' + maxLength + ' karakter');
                        $counter.css('color', length > maxLength * 0.9 ? '#dc3545' : '#6c757d');
                    },
                    onPaste: function (e) {
                        var self = this;
                        setTimeout(function () {
                            var $editable = $(self).next('.note-editor').find('.note-editable');
                            var text = $editable.text();
                            var maxLength = 35;

                            if (text.length > maxLength) {
                                var trimmedText = text.substring(0, maxLength);
                                $(self).summernote('code', trimmedText);
                            }
                            $(self).next('.note-editor').find('.note-editable').trigger('keyup');
                        }, 10);
                    }
                }
            });
        }

        function compareQuestions(originalQ, currentQ) {
            if (originalQ.soal !== currentQ.soal ||
                originalQ.jenis !== currentQ.jenis ||
                originalQ.required !== currentQ.required) {
                return true;
            }

            switch (originalQ.jenis) {
                case 'pilihan_text':
                    if (originalQ.alasan_required !== currentQ.alasan_required) return true;
                    if (!arraysEqual(originalQ.opsi, currentQ.opsi)) return true;
                    break;
                case 'checkbox':
                    if (!arraysEqual(originalQ.opsi, currentQ.opsi)) return true;
                    break;
                case 'linear_scale':
                    if (originalQ.master_label_id !== currentQ.master_label_id) return true;
                    break;
                case 'group_linear_scale':
                    if (!arraysEqual(originalQ.vendors, currentQ.vendors)) return true;
                    if (!arraysEqual(originalQ.questions, currentQ.questions)) return true;
                    if (!arraysEqual(originalQ.labels, currentQ.labels)) return true;
                    break;
            }

            return false;
        }

        function arraysEqual(arr1, arr2) {
            if (!arr1 || !arr2) return arr1 === arr2;
            if (arr1.length !== arr2.length) return false;
            for (let i = 0; i < arr1.length; i++) {
                if (arr1[i] !== arr2[i]) return false;
            }
            return true;
        }

        function initQuestionSummernote(questionId) {
            $(`.summernote-question-${questionId}`).summernote({
                minHeight: null,
                maxHeight: null,
                placeholder: "Masukkan pertanyaan Anda...",
                toolbar: [
                    ['style', ['bold', 'italic', 'underline']],
                    ['font', ['strikethrough', 'superscript', 'subscript']],
                    ['color', ['backcolor']],
                ],
                callbacks: {
                    onInit: function () {
                        var qCounter = questionCounter;
                        var $editor = $(this).next('.note-editor');
                        var $statusbar = $editor.find('.note-statusbar');
                        $statusbar.prepend('<div class="char-counter-question-' + qCounter +
                            '" style="float: left; padding: 5px 10px; color: #6c757d;">0 / 255 karakter</div>'
                        );
                    },
                    onKeydown: function (e) {
                        var $editable = $(this).next('.note-editor').find('.note-editable');
                        var text = $editable.text();
                        var length = text.length;
                        var maxLength = 255;

                        if ($.inArray(e.keyCode, [46, 8, 9, 27, 13]) !== -1 ||
                            (e.keyCode === 65 && e.ctrlKey === true) ||
                            (e.keyCode === 67 && e.ctrlKey === true) ||
                            (e.keyCode === 86 && e.ctrlKey === true) ||
                            (e.keyCode === 88 && e.ctrlKey === true) ||
                            (e.keyCode >= 35 && e.keyCode <= 39)) {
                            return;
                        }

                        if (length >= maxLength) {
                            e.preventDefault();
                            return false;
                        }
                    },
                    onKeyup: function (e) {
                        var $editable = $(this).next('.note-editor').find('.note-editable');
                        var text = $editable.text();
                        var length = text.length;
                        var maxLength = 255;

                        if (length > maxLength) {
                            var trimmedText = text.substring(0, maxLength);
                            $(this).summernote('code', trimmedText);
                            length = maxLength;
                        }

                        var $editor = $(this).next('.note-editor');
                        var $statusbar = $editor.find('.note-statusbar');
                        var $counter = $statusbar.find('[class^="char-counter-question-"]');

                        $counter.text(length + ' / ' + maxLength + ' karakter');
                        $counter.css('color', length > maxLength * 0.9 ? '#dc3545' : '#6c757d');
                    },
                    onPaste: function (e) {
                        var self = this;
                        setTimeout(function () {
                            var $editable = $(self).next('.note-editor').find('.note-editable');
                            var text = $editable.text();
                            var maxLength = 255;

                            if (text.length > maxLength) {
                                var trimmedText = text.substring(0, maxLength);
                                $(self).summernote('code', trimmedText);
                            }
                            $(self).next('.note-editor').find('.note-editable').trigger('keyup');
                        }, 10);
                    }
                }
            });
        }

        function clearSurveyForm() {
            $('input[name="judul_form"]').val('');
            $('input[name="subjudul_survei"]').val('');

            $('.summernote-survey-deskripsi').summernote('code', '');
            $('#check_repetisi').prop('checked', false);

            window.selectedRecipients = [];
            const penerimaTable = $('#list_penerima').DataTable();
            penerimaTable.clear().draw();
            $('#buttonCariPenerima').text('Cari Penerima');
            $('#buttonCariPenerima').removeClass('btn-success').addClass('btn-primary');

            $('.question-card').remove();
            questionCounter = 0;
            addQuestion();
        }

        function addQuestion() {
            questionCounter++;
            const container = document.getElementById('questions-container');

            const questionCard = document.createElement('div');
            questionCard.className = 'col-md-12 mb-4 question-card';
            questionCard.id = `question-${questionCounter}`;

            questionCard.innerHTML = `
                <div class="card">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <h5 class="mb-0">Pertanyaan ${questionCounter}</h5>
                            <button type="button" class="btn btn-danger btn-sm delete-question-btn" data-question-id="${questionCounter}">
                                <i class="fas fa-times"></i>
                            </button>
                        </div>
                        <hr class="horizontal dark mt-0 mb-3">

                        <div class="row">
                            <div class="col-md-8">
                                <div class="mb-4 summernote-container-${questionCounter}">
                                    <textarea class="summernote-question-${questionCounter} form-control mb-3" rows="2" name="pertanyaan_soal[]"></textarea>
                                </div>
                                <div id="question-options-${questionCounter}">
                                    <!-- Opsi-opsi -->
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="d-flex align-items-center mb-2">
                                    <div class="d-flex align-items-center mb-2">
                                        <label class="form-label mb-0 me-2 mb-0 me-2">Tipe Pertanyaan:</label>
                                        <i class="fas fa-question-circle text-info" style="cursor: pointer; font-size: 16px;" 
                                        data-bs-toggle="modal" data-bs-target="#surveyTypeInfoModal">
                                        </i>
                                    </div>
                                </div>
                                <select class="form-select question-type-select" data-question-id="${questionCounter}" name="pertanyaan_jenis[]">
                                    <option value="pilihan_text">Pilihan + Text</option>
                                    <option value="checkbox">Checkbox</option>
                                    <option value="text">Text</option>
                                    <option value="linear_scale">Linear Scale</option>
                                    <option value="group_linear_scale">Group Linear Scale</option>
                                </select>
                                <div class="form-check mt-2">
                                    <input class="form-check-input" type="checkbox" id="required-${questionCounter}" name="pertanyaan_required[]">
                                    <label class="form-check-label" for="required-${questionCounter}">
                                        Wajib dijawab
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`;

            container.appendChild(questionCard);

            var currentCounter = questionCounter;
            setTimeout(function() {
                initQuestionSummernote(currentCounter);
                const selectElement = questionCard.querySelector('.question-type-select');
                const optionsContainer = questionCard.querySelector(`#question-options-${currentCounter}`);

                optionsContainer.innerHTML = `
                    <div class="mb-2" id="pilihan-options-${currentCounter}">
                        <div class="d-flex align-items-center mb-3">
                            <input type="radio" class="form-check-input me-2" disabled>
                            <input type="text" class="form-control option-input" id="option-${currentCounter}-default-1" placeholder="Option 1" name="pilihan_text[${currentCounter}][opsi][]" maxlength="100" style="flex: 1;">
                            <small class="option-counter text-muted ms-2" style="min-width: 60px; text-align: right; font-size: 0.75rem;">0 / 100</small>
                        </div>
                        <div class="d-flex align-items-center mb-3">
                            <input type="radio" class="form-check-input me-2" disabled>
                            <input type="text" class="form-control option-input" id="option-${currentCounter}-default-2" placeholder="Option 2" name="pilihan_text[${currentCounter}][opsi][]" maxlength="100" style="flex: 1;">
                            <small class="option-counter text-muted ms-2" style="min-width: 60px; text-align: right; font-size: 0.75rem;">0 / 100</small>
                        </div>
                        <button type="button" class="btn btn-outline-primary btn-sm mb-3" onclick="addOption(${currentCounter}, 'pilihan_text')">
                            <i class="fas fa-plus me-1"></i>Tambah Opsi
                        </button>
                        <div class="border-top pt-3">
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="checkbox" id="reason-required-${currentCounter}" value="1" name="pilihan_text[${currentCounter}][required]">
                                <label class="form-check-label" for="reason-required-${currentCounter}">
                                    Text wajib diisi
                                </label>
                            </div>
                            <textarea class="form-control" placeholder="Text" rows="2" disabled style="background-color: #e9ecef;"></textarea>
                        </div>
                    </div>`;

                [1, 2].forEach(function(num) {
                    const inputElement = document.getElementById(`option-${currentCounter}-default-${num}`);
                    if (inputElement) {
                        const counterElement = inputElement.parentElement.querySelector('.option-counter');
                        inputElement.addEventListener('input', function() {
                            const length = this.value.length;
                            const maxLength = 100;
                            counterElement.textContent = length + ' / ' + maxLength;
                            counterElement.style.color = length > maxLength * 0.9 ? '#dc3545' : '#6c757d';
                        });
                    }
                });
            }, 100);

            questionCard.querySelector('.question-type-select').addEventListener('change', function () {
                updateQuestionType(this);
            });

            questionCard.querySelector('.delete-question-btn').addEventListener('click', function () {
                deleteQuestion(this);
            });

            updateDeleteButtons();
        }

        function updateQuestionType(selectElement) {
            const questionCard = selectElement.closest('.question-card');
            const questionId = selectElement.getAttribute('data-question-id');
            const type = selectElement.value;
            const optionsContainer = questionCard.querySelector(`#question-options-${questionId}`);

            const summernoteContainer = questionCard.querySelector('.summernote-container-' + questionId);
            const summernoteGroupContainer = questionCard.querySelector('.summernote-group-container-' + questionId);

            if (type !== 'group_linear_scale' && summernoteGroupContainer) {
                const summernoteGroupElement = summernoteGroupContainer.querySelector('.summernote-group-linear-' + questionId);
                if (summernoteGroupElement) {
                    $(summernoteGroupElement).summernote('destroy');
                }
                summernoteGroupContainer.remove();
            }
            
            if (type === 'group_linear_scale') {
                if (summernoteContainer) {
                    const summernoteElement = summernoteContainer.querySelector('.summernote-question-' + questionId);
                    if (summernoteElement) {
                        $(summernoteElement).summernote('destroy');
                    }
                    summernoteContainer.remove();
                }
            } else {
                // Restore question summernote if switching away from group_linear_scale
                if (!summernoteContainer) {
                    const col8 = questionCard.querySelector('.col-md-8');
                    const newSummernoteContainer = document.createElement('div');
                    newSummernoteContainer.className = `mb-4 summernote-container-${questionId}`;
                    newSummernoteContainer.innerHTML = `<textarea class="summernote-question-${questionId} form-control mb-3" rows="2" name="pertanyaan_soal[]"></textarea>`;
                    col8.insertBefore(newSummernoteContainer, optionsContainer);
                
                // Initialize summernote dengan delay
                setTimeout(function() {
                    initQuestionSummernote(questionId);
                }, 100);
            }
        }

            switch (type) {
                case 'pilihan_text':
                    optionsContainer.innerHTML = `
                        <div class="mb-2" id="pilihan-options-${questionId}">
                            <div class="d-flex align-items-center mb-3">
                                <input type="radio" class="form-check-input me-2" disabled>
                                <input type="text" class="form-control option-input" id="option-${questionId}-default-1" placeholder="Option 1" name="pilihan_text[${questionId}][opsi][]" maxlength="100" style="flex: 1;">
                                <small class="option-counter text-muted ms-2" style="min-width: 60px; text-align: right; font-size: 0.75rem;">0 / 100</small>
                            </div>
                            <div class="d-flex align-items-center mb-3">
                                <input type="radio" class="form-check-input me-2" disabled>
                                <input type="text" class="form-control option-input" id="option-${questionId}-default-2" placeholder="Option 2" name="pilihan_text[${questionId}][opsi][]" maxlength="100" style="flex: 1;">
                                <small class="option-counter text-muted ms-2" style="min-width: 60px; text-align: right; font-size: 0.75rem;">0 / 100</small>
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm mb-3" onclick="addOption(${questionId}, 'pilihan_text')">
                                <i class="fas fa-plus me-1"></i>Tambah Opsi
                            </button>
                            <div class="border-top pt-3">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="checkbox" id="reason-required-${questionId}" value="1" name="pilihan_text[${questionId}][required]">
                                    <label class="form-check-label" for="reason-required-${questionId}">
                                        Text wajib diisi
                                    </label>
                                </div>
                                <textarea class="form-control" placeholder="Text" rows="2" disabled style="background-color: #e9ecef;"></textarea>
                            </div>
                        </div>`;
                    
                    // Add event listeners to default options
                    setTimeout(function() {
                        [1, 2].forEach(function(num) {
                            const inputElement = document.getElementById(`option-${questionId}-default-${num}`);
                            if (inputElement) {
                                const counterElement = inputElement.parentElement.querySelector('.option-counter');
                                inputElement.addEventListener('input', function() {
                                    const length = this.value.length;
                                    const maxLength = 100;
                                    counterElement.textContent = length + ' / ' + maxLength;
                                    counterElement.style.color = length > maxLength * 0.9 ? '#dc3545' : '#6c757d';
                                });
                            }
                        });
                    }, 100);
                    break;

                case 'checkbox':
                    optionsContainer.innerHTML = `
                        <div class="mb-2" id="checkbox-options-${questionId}">
                            <div class="d-flex align-items-center mb-3">
                                <input type="checkbox" class="form-check-input me-2" disabled>
                                <input type="text" class="form-control option-input" id="option-${questionId}-cb-default-1" placeholder="Option 1" name="checkbox[${questionId}][opsi][]" maxlength="100" style="flex: 1;">
                                <small class="option-counter text-muted ms-2" style="min-width: 60px; text-align: right; font-size: 0.75rem;">0 / 100</small>
                            </div>
                            <div class="d-flex align-items-center mb-3">
                                <input type="checkbox" class="form-check-input me-2" disabled>
                                <input type="text" class="form-control option-input" id="option-${questionId}-cb-default-2" placeholder="Option 2" name="checkbox[${questionId}][opsi][]" maxlength="100" style="flex: 1;">
                                <small class="option-counter text-muted ms-2" style="min-width: 60px; text-align: right; font-size: 0.75rem;">0 / 100</small>
                            </div>
                            <button type="button" class="btn btn-outline-primary btn-sm" onclick="addOption(${questionId}, 'checkbox')">
                                <i class="fas fa-plus me-1"></i>Tambah Opsi
                            </button>
                        </div>`;

                    setTimeout(function() {
                        [1, 2].forEach(function(num) {
                            const inputElement = document.getElementById(`option-${questionId}-cb-default-${num}`);
                            if (inputElement) {
                                const counterElement = inputElement.parentElement.querySelector('.option-counter');
                                inputElement.addEventListener('input', function() {
                                    const length = this.value.length;
                                    const maxLength = 100;
                                    counterElement.textContent = length + ' / ' + maxLength;
                                    counterElement.style.color = length > maxLength * 0.9 ? '#dc3545' : '#6c757d';
                                });
                            }
                        });
                    }, 100);
                    break;

                case 'text':
                    optionsContainer.innerHTML = `
                        <div class="mb-2">
                            <input type="text" class="form-control" name="text[]" placeholder="Jawaban Teks" disabled>
                        </div>`;
                    break;

                case 'linear_scale':
                    optionsContainer.innerHTML = `
                        <div class="mb-2">
                            <div class="d-flex align-items-center mb-2">
                                <label class="mb-0 text-muted small me-2">Label Scale:</label>
                                <button type="button" class="btn btn-sm btn-primary select-label-btn" 
                                        data-question-id="${questionId}" 
                                        data-bs-toggle="modal" 
                                        data-bs-target="#masterLabelModal">
                                    <i class="fas fa-plus-circle me-1"></i>Pilih Label Scale
                                </button>
                                <input type="hidden" id="master-label-new-${questionId}" 
                                       name="linear_scale[${questionId}][master_label_id]" 
                                       data-question-id="${questionId}" 
                                       value="">
                            </div>
                            <div class="ms-0">
                                <div class="border rounded p-2 mb-2 bg-light" id="label-preview-new-${questionId}">
                                    <small><strong>Preview:</strong> Pilih label untuk melihat skala</small>
                                </div>
                            </div>
                        </div>
                        <input type="hidden" name="questions[${questionId}][scale_min]" value="1">
                        <input type="hidden" name="questions[${questionId}][scale_max]" value="5">
                        <input type="hidden" id="kata-positif-new-${questionId}" name="linear_scale[${questionId}][kata_positif]" value="">
                        <input type="hidden" id="kata-negatif-new-${questionId}" name="linear_scale[${questionId}][kata_negatif]" value="">
                    </div>`;
                    
                    // Check if there's an existing master_label_id and load it
                    setTimeout(function() {
                        const hiddenInput = document.getElementById(`master-label-new-${questionId}`);
                        const existingLabelId = hiddenInput ? hiddenInput.value : '';
                        
                        if (existingLabelId) {
                            const button = document.querySelector(`.select-label-btn[data-question-id="${questionId}"]`);
                            const previewDiv = document.getElementById(`label-preview-new-${questionId}`);
                            
                            // Fetch label data via AJAX
                            $.ajax({
                                url: `/api/master-labels/${existingLabelId}`,
                                type: 'GET',
                                dataType: 'JSON',
                                success: function(response) {
                                    if (response.success && response.data) {
                                        const label = response.data;
                                        
                                        // Update button
                                        if (button) {
                                            button.classList.remove('btn-primary');
                                            button.classList.add('btn-success');
                                            button.innerHTML = `<i class="fas fa-check-circle me-1"></i>${label.nama_label}`;
                                        }
                                        
                                        // Update preview
                                        if (previewDiv) {
                                            const skalaArr = [];
                                            for (let i = 1; i <= 5; i++) {
                                                skalaArr.push(`<span class="badge bg-secondary me-1">${i}</span>`);
                                            }
                                            previewDiv.innerHTML = `
                                                <div class="d-flex align-items-center justify-content-between">
                                                    <span class="badge bg-success">${label.kata_positif}</span>
                                                    <div class="flex-grow-1 mx-2 text-center">${skalaArr.join(' ')}</div>
                                                    <span class="badge bg-danger">${label.kata_negatif}</span>
                                                </div>
                                            `;
                                        }
                                        
                                        // Update hidden fields
                                        const kataPositifInput = document.getElementById(`kata-positif-new-${questionId}`);
                                        const kataNegatifInput = document.getElementById(`kata-negatif-new-${questionId}`);
                                        if (kataPositifInput) kataPositifInput.value = label.kata_positif;
                                        if (kataNegatifInput) kataNegatifInput.value = label.kata_negatif;
                                    }
                                }
                            });
                        }
                    }, 100);
                    break;

                case 'group_linear_scale':
                    const summernoteContainer = questionCard.querySelector('.summernote-container-' + questionId);
                    if (summernoteContainer) {
                        const summernoteElement = summernoteContainer.querySelector('.summernote-question-' + questionId);
                        if (summernoteElement) {
                            $(summernoteElement).summernote('destroy');
                        }
                        summernoteContainer.remove();
                    }

                    const groupNameHtml = `
                        <div class="mb-4 summernote-group-container-${questionId}">
                            <label class="form-label fw-bold">Nama Group:</label>
                            <textarea class="summernote-group-linear-${questionId} form-control mb-3" rows="2" name="group_name[]"></textarea>
                        </div>
                    `;

                    optionsContainer.innerHTML = `
                        <div class="mb-2">
                            <!-- Vendor Section -->
                            <div class="mb-3">
                                <label class="form-label fw-bold text-primary">
                                    Vendor/Object:
                                </label>
                                <div class="vendor-list-${questionId}"></div>
                                <button type="button" class="btn btn-sm btn-outline-primary add-vendor-btn" data-question-id="${questionId}">
                                    <i class="fas fa-plus me-1"></i>Tambah Vendor
                                </button>
                            </div>

                            <!-- Pertanyaan & Label Section -->
                            <div class="mb-3">
                                <label class="form-label fw-bold text-success">
                                    Pertanyaan & Label:
                                </label>
                                <div class="questions-list-${questionId}"></div>
                                <button type="button" class="btn btn-sm btn-outline-success add-group-question-btn" data-question-id="${questionId}">
                                    <i class="fas fa-plus me-1"></i>Tambah Pertanyaan
                                </button>
                            </div>
                        </div>`;

                         const rowDiv = questionCard.querySelector('.row');
            const colMd8 = rowDiv.querySelector('.col-md-8');
            colMd8.insertAdjacentHTML('afterbegin', groupNameHtml);

                    setTimeout(function() {
                        initGroupLinearScaleSummernote(questionId);
                        addGroupVendor(questionId);
                        addGroupVendor(questionId);
                        addGroupQuestion(questionId);

                        const vendorList = $(`.vendor-list-${questionId}`);
                        const questionsList = $(`.questions-list-${questionId}`);
                        updateVendorButtons(vendorList);
                        updateQuestionButtons(questionsList);
                    }, 100);
                    break;
            }
        }

        function addOption(questionId, type) {
            const optionsContainer = document.getElementById(
                `${type === 'pilihan_text' ? 'pilihan' : 'checkbox'}-options-${questionId}`);
            const addButton = optionsContainer.querySelector('.btn-outline-primary');

            const existingOptions = optionsContainer.querySelectorAll('.d-flex.align-items-center').length;
            const optionNumber = existingOptions + 1;

            const newOption = document.createElement('div');
            newOption.className = 'd-flex align-items-center mb-3';

            const inputType = type === 'pilihan_text' ? 'radio' : 'checkbox';
            const nameAttribute = type === 'pilihan_text' ? `pilihan_text[${questionId}][opsi][]` :
                `checkbox[${questionId}][opsi][]`;
            
            const uniqueId = `option-${questionId}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

            newOption.innerHTML = `
                <input type="${inputType}" class="form-check-input me-2" disabled>
                <input type="text" class="form-control option-input" id="${uniqueId}" placeholder="Option ${optionNumber}" name="${nameAttribute}" maxlength="100" style="flex: 1;">
                <small class="option-counter text-muted ms-2" style="min-width: 60px; text-align: right; font-size: 0.75rem;">0 / 100</small>
                <button type="button" class="btn btn-outline-danger btn-sm ms-2" onclick="removeOption(this)">
                    <i class="fas fa-trash"></i>
                </button>`;

            addButton.parentNode.insertBefore(newOption, addButton);

            const inputElement = newOption.querySelector(`#${uniqueId}`);
            const counterElement = newOption.querySelector('.option-counter');
            
            inputElement.addEventListener('input', function() {
                const length = this.value.length;
                const maxLength = 100;
                
                counterElement.textContent = length + ' / ' + maxLength;
                
                if (length > maxLength * 0.9) {
                    counterElement.style.color = '#dc3545';
                } else {
                    counterElement.style.color = '#6c757d';
                }
            });
        }

        function removeOption(button) {
            button.parentElement.remove();
        }

        function deleteQuestion(buttonElement) {
            const questionCard = buttonElement.closest('.question-card');
            if (questionCard) {
                questionCard.remove();
                updateDeleteButtons();
                updateQuestionNumbers();
                questionCounter--;
            }
        }

        function updateQuestionNumbers() {
            const questionCards = document.querySelectorAll('.question-card');
            questionCards.forEach((card, index) => {
                const titleElement = card.querySelector('h5');
                titleElement.textContent = `Pertanyaan ${index + 1}`;
            });
        }

        function updateDeleteButtons() {
            const questionCards = document.querySelectorAll('.question-card');
            const deleteButtons = document.querySelectorAll('.delete-question-btn');

            deleteButtons.forEach(button => {
                if (questionCards.length === 1) {
                    button.disabled = true;
                    button.classList.remove('btn-danger');
                    button.classList.add('btn-secondary');
                } else {
                    button.disabled = false;
                    button.classList.remove('btn-secondary');
                    button.classList.add('btn-danger');
                }
            });
        }

        function loadMasterLabels() {
            $.ajax({
                url: "{{ URL::to('/api/master-labels/list') }}",
                type: 'GET',
                dataType: 'JSON',
                success: function (response) {
                    if (response.success) {
                        renderLabelTable(response.data);
                    }
                },
                error: function (xhr) {
                    console.error('Error loading labels:', xhr);
                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: 'Gagal memuat data master label!'
                    });
                }
            });
        }

        function renderLabelTable(labels) {
            // Destroy existing DataTable if it exists
            if ($.fn.DataTable.isDataTable('#tableMasterLabel')) {
                $('#tableMasterLabel').DataTable().destroy();
            }

            const tbody = $('#labelTableBody');
            tbody.empty();

            if (labels.length === 0) {
                tbody.append('<tr><td colspan="6" class="text-center">Tidak ada data</td></tr>');
                return;
            }

            labels.forEach(function (label, index) {
                const preview = `1: Sangat ${label.kata_negatif} | 2: ${label.kata_negatif} | 3: Sedang | 4: ${label.kata_positif} | 5: Sangat ${label.kata_positif}`;
                tbody.append(`
                    <tr data-label-id="${label.id}" data-positif="${label.kata_positif}" data-negatif="${label.kata_negatif}" data-label-name="${label.nama_label}" style="cursor: pointer;">
                        <td>${index + 1}</td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-primary select-this-label-btn me-1" 
                                    data-label-id="${label.id}" 
                                    data-label-name="${label.nama_label}"
                                    data-positif="${label.kata_positif}" 
                                    data-negatif="${label.kata_negatif}"
                                    title="Pilih">
                                <i class="fas fa-check-circle"></i> Pilih
                            </button>
                            <!--<button class="btn btn-sm btn-warning edit-label-btn me-1" data-label-id="${label.id}" title="Edit">
                                <i class="fas fa-edit"></i> Edit
                            </button>
                            <button class="btn btn-sm btn-danger delete-label-btn" data-label-id="${label.id}" title="Hapus">
                                <i class="fas fa-trash"></i> Hapus
                            </button>-->
                        </td>
                        <td>${label.nama_label}</td>
                        <td><span class="badge bg-success">${label.kata_positif}</span></td>
                        <td><span class="badge bg-danger">${label.kata_negatif}</span></td>
                        <td><small>${preview}</small></td>
                    </tr>
                `);
            });

            $('#tableMasterLabel').DataTable({
                "pageLength": 5,
                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "Semua"]],
                "language": {
                    "lengthMenu": "Tampilkan _MENU_ data per halaman",
                    "zeroRecords": "Data tidak ditemukan",
                    "info": "Menampilkan halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data yang tersedia",
                    "infoFiltered": "(difilter dari _MAX_ total data)",
                    "search": "Cari:",
                    "paginate": {
                        "first": "Pertama",
                        "last": "Terakhir",
                        "next": "Selanjutnya",
                        "previous": "Sebelumnya"
                    }
                },
                "order": [[2, 'asc']],
                "columnDefs": [
                    {
                        "orderable": false,
                        "targets": [0, 1]
                    }
                ]
            });
        }

        function editLabel(id) {
            $.ajax({
                url: "{{ URL::to('/api/master-labels/get') }}/" + id,
                type: 'GET',
                dataType: 'JSON',
                success: function (response) {
                    if (response.success) {
                        const label = response.data;
                        $('#labelId').val(label.id);
                        $('#namaLabel').val(label.nama_label);
                        $('#kataPositif').val(label.kata_positif);
                        $('#kataNegatif').val(label.kata_negatif);
                        $('#kataPositif').trigger('input');
                        $('#btnSaveLabel').html('<i class="fas fa-save me-1"></i>Update');

                        $('#labelForm').get(0).scrollIntoView({
                            behavior: 'smooth'
                        });
                    }
                },
                error: function(xhr, status, error) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: 'Gagal memuat data label'
                    });
                }
            });
        }

        function deleteLabel(id) {
            Swal.fire({
                title: 'Konfirmasi Hapus',
                text: 'Apakah Anda yakin ingin menghapus label ini?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    $('#labelModalLoading').fadeIn(200);
                    
                    $.ajax({
                        url: "{{ URL::to('/api/master-labels/delete') }}/" + id,
                        type: 'DELETE',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        success: function (response) {
                            if (response.success) {
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Terhapus!',
                                    text: response.message,
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                                loadMasterLabels();
                                
                                // Reset semua button dan preview yang menggunakan label yang dihapus
                                const deletedLabelId = id.toString();
                                
                                // Reset linear scale yang menggunakan label ini
                                $('input[name^="linear_scale"][name$="[master_label_id]"]').each(function() {
                                    const currentLabelId = $(this).val();
                                    if (currentLabelId == deletedLabelId) {
                                        const questionId = $(this).data('question-id');
                                        
                                        // Reset hidden input
                                        $(this).val('');
                                        
                                        // Reset button
                                        const button = $(`.select-label-btn[data-question-id="${questionId}"]`);
                                        if (button.length > 0) {
                                            button.removeClass('btn-success').addClass('btn-primary');
                                            button.html('<i class="fas fa-plus-circle me-1"></i>Pilih Label Scale');
                                        }
                                        
                                        // Reset preview
                                        let previewDiv = $(`#label-preview-${questionId}`);
                                        if (previewDiv.length === 0) {
                                            previewDiv = $(`#label-preview-new-${questionId}`);
                                        }
                                        if (previewDiv.length > 0) {
                                            previewDiv.html('<small><strong>Preview:</strong> Pilih label untuk melihat skala</small>');
                                        }
                                        
                                        // Reset hidden inputs
                                        $(`#kata-positif-${questionId}`).val('');
                                        $(`#kata-negatif-${questionId}`).val('');
                                        $(`#kata-positif-new-${questionId}`).val('');
                                        $(`#kata-negatif-new-${questionId}`).val('');
                                    }
                                });
                                
                                // Reset group linear scale yang menggunakan label ini
                                $('input[name^="group_labels"]').each(function() {
                                    const currentLabelId = $(this).val();
                                    if (currentLabelId == deletedLabelId) {
                                        const questionId = $(this).data('question-id');
                                        const itemNum = $(this).data('item-num');
                                        
                                        // Reset hidden input
                                        $(this).val('');
                                        
                                        // Reset button
                                        const button = $(`.select-label-btn[data-question-id="${questionId}"][data-item-num="${itemNum}"]`);
                                        if (button.length > 0) {
                                            button.removeClass('btn-success').addClass('btn-primary');
                                            button.html('<i class="fas fa-plus-circle me-1"></i>Pilih Label Scale');
                                        }
                                        
                                        // Reset preview
                                        const previewDiv = $(`.label-preview-alert-${questionId}-${itemNum}`);
                                        if (previewDiv.length > 0) {
                                            previewDiv.html('<small><strong>Preview:</strong> Pilih label untuk melihat skala</small>');
                                        }
                                    }
                                });
                                
                                $('#labelModalLoading').fadeOut(200);
                            }
                        },
                        error: function (xhr) {
                            $('#labelModalLoading').fadeOut(200);
                            Swal.fire({
                                icon: 'error',
                                title: 'Gagal',
                                text: xhr.responseJSON?.message || 'Gagal menghapus data!'
                            });
                        }
                    });
                }
            });
        }


        function resetLabelForm() {
            const form = document.getElementById('labelForm');
            if (form) {
                form.reset();
            }
            $('#labelId').val('');
            $('#btnSaveLabel').html('<i class="fas fa-save me-1"></i>Simpan');
            $('#previewLabel').html(`
                    1: Sangat <span class="text-danger">-</span> | 
                    2: <span class="text-danger">-</span> | 
                    3: Sedang | 
                    4: <span class="text-success">-</span> | 
                    5: Sangat <span class="text-success">-</span>
                `);
        }

        function generateModalLabelPreview() {
            const positif = $('#kataPositif').val() || '-';
            const negatif = $('#kataNegatif').val() || '-';
            
            const preview = `1: Sangat <span class="text-danger">${negatif}</span> | 
                           2: <span class="text-danger">${negatif}</span> | 
                           3: Sedang | 
                           4: <span class="text-success">${positif}</span> | 
                           5: Sangat <span class="text-success">${positif}</span>`;
            
            $('#previewLabel').html(preview);
        }

        function generateLabelPreview(positif, negatif) {
            return `1: Sangat ${negatif} | 2: ${negatif} | 3: Sedang | 4: ${positif} | 5: Sangat ${positif}`;
        }

        function updateLabelPreview(questionId, kataPositif, kataNegatif) {
            const preview = `<small><strong>Preview:</strong> 1: Sangat ${kataNegatif} | 2: ${kataNegatif} | 3: Sedang | 4: ${kataPositif} | 5: Sangat ${kataPositif}</small>`;
            const previewElement = $(`#label-preview-${questionId}`);
            
            if (previewElement.length > 0) {
                previewElement.html(preview);
            } else {
                console.warn(`Preview element #label-preview-${questionId} not found`);
            }
        }

        // Modal Events - Capture dropdown yang membuka modal
        $(document).on('click', '[data-bs-target="#masterLabelModal"]', function() {
            const questionItem = $(this).closest('.group-question-item, #question-options-1, [id^="question-options-"]');
            if (questionItem.length > 0) {
                activeDropdownForLabel = questionItem.find('.master-label-dropdown').first();
            }
        });
        
        let activeButtonForLabel = null;

        $('#masterLabelModal').on('show.bs.modal', function() {
            loadMasterLabels();
            resetLabelForm();
        });
        
        $('#masterLabelModal').on('hidden.bs.modal', function () {
            activeButtonForLabel = null;
        });

        // Handler untuk tombol Edit di tabel master label
        $(document).on('click', '.edit-label-btn', function(e) {
            e.stopPropagation();
            const labelId = $(this).data('label-id');
            editLabel(labelId);
        });

        // Handler untuk tombol Delete di tabel master label
        $(document).on('click', '.delete-label-btn', function(e) {
            e.stopPropagation();
            const labelId = $(this).data('label-id');
            deleteLabel(labelId);
        });

        // Event handler untuk button pilih label scale
        $(document).on('click', '.select-label-btn', function(e) {
            e.preventDefault();
            activeButtonForLabel = $(this);
            $('#masterLabelModal').modal('show');
        });

        // Event handler untuk button Pilih di tabel
        $(document).on('click', '.select-this-label-btn', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            const row = $(this).closest('tr');
            selectLabelFromRow(row);
        });

        // Event handler untuk klik row tabel
        $(document).on('click', '#tableMasterLabel tbody tr', function(e) {
            // Jangan trigger jika klik button edit/delete
            if ($(e.target).closest('button.btn-warning, button.btn-danger').length > 0) {
                return;
            }
            
            selectLabelFromRow($(this));
        });

        function selectLabelFromRow(row) {
            if (!activeButtonForLabel) {
                return;
            }

            const labelId = row.data('label-id');
            const labelName = row.data('label-name');
            const positif = row.data('positif');
            const negatif = row.data('negatif');
            
            // Get question ID and item num from button
            const questionId = activeButtonForLabel.data('question-id');
            const itemNum = activeButtonForLabel.data('item-num');
            
            // For group linear scale items
            if (itemNum) {
                // Update hidden inputs for group question
                $(`.group-label-select-${questionId}-${itemNum}`).val(labelId);
                $(`.group-label-name-${questionId}-${itemNum}`).val(labelName);
                $(`.group-kata-positif-${questionId}-${itemNum}`).val(positif);
                $(`.group-kata-negatif-${questionId}-${itemNum}`).val(negatif);
                
                // Update button
                activeButtonForLabel
                    .removeClass('btn-primary')
                    .addClass('btn-success')
                    .html(`<i class="fas fa-check-circle me-1"></i>${labelName}`);
                
                // Update preview
                const scale = `1: Sangat ${negatif} | 2: ${negatif} | 3: Sedang | 4: ${positif} | 5: Sangat ${positif}`;
                $(`.label-preview-alert-${questionId}-${itemNum}`).html(`<small><strong>Preview:</strong> ${scale}</small>`);
            } else {
                // For regular linear scale
                // Support both regular and "new-" prefixed IDs
                let hiddenInput = $(`#master-label-${questionId}`);
                let previewDiv = $(`#preview-${questionId}`);
                
                if (hiddenInput.length === 0) {
                    hiddenInput = $(`#master-label-new-${questionId}`);
                    previewDiv = $(`#preview-new-${questionId}`);
                }
                
                // Update hidden input value
                hiddenInput.val(labelId);
                
                // Update button appearance
                activeButtonForLabel
                    .removeClass('btn-primary')
                    .addClass('btn-success')
                    .html(`<i class="fas fa-check-circle me-1"></i>${labelName}`);
                
                // Update preview
                const skalaArr = [];
                for (let i = 1; i <= 5; i++) {
                    skalaArr.push(`<span class="badge bg-secondary me-1">${i}</span>`);
                }
                const previewHtml = `
                    <div class="d-flex align-items-center justify-content-between">
                        <span class="badge bg-success">${positif}</span>
                        <div class="flex-grow-1 mx-2 text-center">${skalaArr.join(' ')}</div>
                        <span class="badge bg-danger">${negatif}</span>
                    </div>
                `;
                previewDiv.html(previewHtml);
            }
            
            // Close modal
            $('#masterLabelModal').modal('hide');
        }

        $('#labelForm').on('submit', function(e) {
            e.preventDefault();
            
            const formData = {
                nama_label: $('#namaLabel').val().trim(),
                kata_positif: $('#kataPositif').val().trim(),
                kata_negatif: $('#kataNegatif').val().trim()
            };
            
            if (!formData.nama_label || !formData.kata_positif || !formData.kata_negatif) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Form Tidak Lengkap',
                    text: 'Semua field harus diisi!'
                });
                return;
            }

            const labelId = $('#labelId').val();

            $.ajax({
                url: '/api/master-labels/list',
                type: 'GET',
                dataType: 'JSON',
                success: function(response) {
                    if (response.success) {
                        const existingLabels = response.data;
                        const isDuplicate = existingLabels.some(function(label) {
                            if (labelId && label.id == labelId) {
                                return false;
                            }
                            return label.kata_positif.toLowerCase() === formData.kata_positif.toLowerCase() && 
                                   label.kata_negatif.toLowerCase() === formData.kata_negatif.toLowerCase();
                        });
                        
                        if (isDuplicate) {
                            Swal.fire({
                                icon: 'warning',
                                title: 'Data Duplikat',
                                text: 'Kombinasi Kata Positif dan Kata Negatif sudah ada!'
                            });
                            return;
                        }

                        saveMasterLabel(labelId, formData);
                    }
                },
                error: function() {
                    saveMasterLabel(labelId, formData);
                }
            });
        });

        function saveMasterLabel(labelId, data) {
            const url = labelId ?
                "{{ URL::to('/api/master-labels/update') }}/" + labelId :
                "{{ URL::to('/api/master-labels/store') }}";

            $('#labelModalLoading').fadeIn(200);

            $.ajax({
                url: url,
                type: 'POST',
                dataType: 'JSON',
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: data,
                success: function (response) {
                    if (response.success) {
                        const isNewLabel = !labelId;
                        const savedLabelId = response.data ? response.data.id : (labelId || null);
                        
                        const labelFromForm = {
                            id: savedLabelId,
                            nama_label: data.nama_label,
                            kata_positif: data.kata_positif,
                            kata_negatif: data.kata_negatif
                        };
                        
                        Swal.fire({
                            icon: 'success',
                            title: 'Berhasil!',
                            text: response.message,
                            timer: 1500,
                            showConfirmButton: false
                        });
                        
                        resetLabelForm();
                        loadMasterLabels();

                        // Jika ada button aktif, update button dan preview (untuk create dan update)
                        if (savedLabelId && labelFromForm && activeButtonForLabel) {
                            const questionId = activeButtonForLabel.data('question-id');
                            const itemNum = activeButtonForLabel.data('item-num');
                            
                            // Update hidden input
                            let hiddenInput;
                            if (itemNum) {
                                hiddenInput = $(`.group-label-select-${questionId}-${itemNum}`);
                            } else {
                                hiddenInput = $(`#master-label-${questionId}`);
                                if (hiddenInput.length === 0) {
                                    hiddenInput = $(`#master-label-new-${questionId}`);
                                }
                            }
                            
                            // Cek apakah label yang di-save/update sedang dipilih di button aktif
                            const currentLabelId = hiddenInput.val();
                            const shouldUpdate = isNewLabel || (currentLabelId && currentLabelId == savedLabelId);
                            
                            // UNTUK EDIT: selalu pilih label yang baru diedit (sama seperti create)
                            if (hiddenInput.length > 0) {
                                // Set hidden input value (untuk create baru ATAU edit)
                                hiddenInput.val(savedLabelId);
                                
                                // Update button appearance
                                const labelName = labelFromForm.nama_label || 'Label';
                                
                                activeButtonForLabel
                                    .removeClass('btn-primary')
                                    .addClass('btn-success')
                                    .html(`<i class="fas fa-check-circle me-1"></i>${labelName}`);
                                
                                // Update preview
                                let previewDiv;
                                if (itemNum) {
                                    previewDiv = $(`.label-preview-alert-${questionId}-${itemNum}`);
                                } else {
                                    previewDiv = $(`#label-preview-${questionId}`);
                                    if (previewDiv.length === 0) {
                                        previewDiv = $(`#label-preview-new-${questionId}`);
                                    }
                                }
                                
                                if (previewDiv.length > 0) {
                                    const kataPositif = labelFromForm.kata_positif || '';
                                    const kataNegatif = labelFromForm.kata_negatif || '';
                                    
                                    const scale = generateLabelPreview(kataPositif, kataNegatif);
                                    
                                    previewDiv.html(`<small><strong>Preview:</strong> ${scale}</small>`);
                                }
                                
                                // Update kata positif dan negatif hidden inputs
                                $(`#kata-positif-${questionId}`).val(labelFromForm.kata_positif || '');
                                $(`#kata-negatif-${questionId}`).val(labelFromForm.kata_negatif || '');
                                $(`#kata-positif-new-${questionId}`).val(labelFromForm.kata_positif || '');
                                $(`#kata-negatif-new-${questionId}`).val(labelFromForm.kata_negatif || '');
                            }
                        }
                        
                        // Jika update label (bukan create baru), update semua button/preview yang menggunakan label ini
                        if (!isNewLabel && savedLabelId) {
                            // Update semua linear scale yang menggunakan label ini
                            $('input[name^="linear_scale"][name$="[master_label_id]"]').each(function() {
                                const currentLabelId = $(this).val();
                                if (currentLabelId == savedLabelId) {
                                    const questionId = $(this).data('question-id');
                                    
                                    // Update button
                                    const button = $(`.select-label-btn[data-question-id="${questionId}"]`);
                                    if (button.length > 0) {
                                        button.removeClass('btn-primary').addClass('btn-success');
                                        button.html(`<i class="fas fa-check-circle me-1"></i>${labelFromForm.nama_label}`);
                                    }
                                    
                                    // Update preview
                                    let previewDiv = $(`#label-preview-${questionId}`);
                                    if (previewDiv.length === 0) {
                                        previewDiv = $(`#label-preview-new-${questionId}`);
                                    }
                                    if (previewDiv.length > 0) {
                                        const scale = generateLabelPreview(labelFromForm.kata_positif, labelFromForm.kata_negatif);
                                        previewDiv.html(`<small><strong>Preview:</strong> ${scale}</small>`);
                                    }
                                    
                                    // Update hidden inputs
                                    $(`#kata-positif-${questionId}`).val(labelFromForm.kata_positif || '');
                                    $(`#kata-negatif-${questionId}`).val(labelFromForm.kata_negatif || '');
                                    $(`#kata-positif-new-${questionId}`).val(labelFromForm.kata_positif || '');
                                    $(`#kata-negatif-new-${questionId}`).val(labelFromForm.kata_negatif || '');
                                }
                            });
                            
                            // Update semua group linear scale yang menggunakan label ini
                            $('input[name^="group_labels"]').each(function() {
                                const currentLabelId = $(this).val();
                                if (currentLabelId == savedLabelId) {
                                    const questionId = $(this).data('question-id');
                                    const itemNum = $(this).data('item-num');
                                    
                                    // Update button
                                    const button = $(`.select-label-btn[data-question-id="${questionId}"][data-item-num="${itemNum}"]`);
                                    if (button.length > 0) {
                                        button.removeClass('btn-primary').addClass('btn-success');
                                        button.html(`<i class="fas fa-check-circle me-1"></i>${labelFromForm.nama_label}`);
                                    }
                                    
                                    // Update preview
                                    const previewDiv = $(`.label-preview-alert-${questionId}-${itemNum}`);
                                    if (previewDiv.length > 0) {
                                        const scale = generateLabelPreview(labelFromForm.kata_positif, labelFromForm.kata_negatif);
                                        previewDiv.html(`<small><strong>Preview:</strong> ${scale}</small>`);
                                    }
                                }
                            });
                        }

                        $.ajax({
                            url: "{{ URL::to('/api/master-labels/list') }}",
                            type: 'GET',
                            dataType: 'JSON',
                            success: function (labelsResponse) {
                                if (labelsResponse.success) {
                                    const labels = labelsResponse.data;

                                    $('.master-label-dropdown').each(function() {
                                        const dropdown = $(this);
                                        const currentValue = dropdown.val(); // Simpan pilihan saat ini
                                        const firstOption = dropdown.find('option:first').clone();
                                        const isActiveDropdown = activeDropdownForLabel && dropdown.is(activeDropdownForLabel);
                                        
                                        dropdown.empty().append(firstOption);
                                        
                                        labels.forEach(function (label) {
                                            dropdown.append(
                                                `<option value="${label.id}" data-positif="${label.kata_positif}" data-negatif="${label.kata_negatif}">${label.nama_label}</option>`
                                            );
                                        });
                                        
                                        if (isNewLabel && savedLabelId && isActiveDropdown && (!currentValue || currentValue === '')) {
                                            dropdown.val(savedLabelId);
                                            
                                            // Manual update preview untuk dropdown aktif
                                            const selectedOption = dropdown.find('option:selected');
                                            const kataPositif = selectedOption.data('positif') || '';
                                            const kataNegatif = selectedOption.data('negatif') || '';
                                            
                                            if (kataPositif && kataNegatif) {
                                                const scale = `1: Sangat ${kataNegatif} | 2: ${kataNegatif} | 3: Sedang | 4: ${kataPositif} | 5: Sangat ${kataPositif}`;
                                                const previewHTML = `<small><strong>Preview:</strong> ${scale}</small>`;
                                                
                                                // Cari preview element - bisa ID atau class
                                                const questionItem = dropdown.closest('.group-question-item, [id^="question-options-"]');
                                                
                                                // Coba cari berdasarkan ID dulu (untuk single linear scale)
                                                let previewElement = questionItem.find('[id^="label-preview"]');
                                                
                                                // Jika tidak ada, cari berdasarkan class (untuk group linear scale)
                                                if (previewElement.length === 0) {
                                                    previewElement = questionItem.find('[class*="label-preview-alert"]');
                                                }
                                                
                                                if (previewElement.length > 0) {
                                                    previewElement.html(previewHTML);
                                                    console.log('Preview updated:', previewElement.attr('id') || previewElement.attr('class'));
                                                } else {
                                                    console.log('Preview element not found for dropdown:', dropdown.attr('id'));
                                                }
                                                
                                                // Update hidden inputs jika ada
                                                const dropdownId = dropdown.attr('id');
                                                if (dropdownId) {
                                                    const questionId = dropdownId.replace('master-label-', '').replace('group-label-', '').replace('master-label-new-', '');
                                                    $(`#kata-positif-${questionId}`).val(kataPositif);
                                                    $(`#kata-negatif-${questionId}`).val(kataNegatif);
                                                    $(`#kata-positif-new-${questionId}`).val(kataPositif);
                                                    $(`#kata-negatif-new-${questionId}`).val(kataNegatif);
                                                }
                                            }
                                            
                                            // Trigger change untuk compatibility
                                            setTimeout(function() {
                                                dropdown.trigger('change');
                                            }, 10);
                                        } else if (currentValue) {
                                            // Pertahankan pilihan yang sudah ada untuk semua dropdown lainnya
                                            dropdown.val(currentValue);
                                            dropdown.trigger('change');
                                        }
                                    });
                                    
                                    $('#masterLabelModal').modal('hide');
                                    $('#labelModalLoading').fadeOut(200);
                                }
                            }
                        });
                    }
                },
                error: function (xhr) {
                    console.error('AJAX Error:', xhr);
                    let errorMessage = 'Gagal menyimpan data!';

                    if (xhr.responseJSON) {
                        if (xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        if (xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            const errorsList = Object.values(errors).flat().join('\n');
                            errorMessage = 'Validasi gagal:\n' + errorsList;
                        }
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Gagal',
                        text: errorMessage
                    });
                    
                    $('#labelModalLoading').fadeOut(200);
                }
            });
        }

        $('#kataPositif, #kataNegatif').on('input', generateModalLabelPreview);
        generateModalLabelPreview();

        function addGroupVendor(questionId) {
            const vendorList = document.querySelector(`.vendor-list-${questionId}`);
            const currentCount = vendorList.querySelectorAll('.vendor-item').length;
            const vendorNum = currentCount + 1;
            
            const vendorItem = document.createElement('div');
            vendorItem.className = 'd-flex align-items-center mb-3 vendor-item';
            vendorItem.innerHTML = `
                <span class="me-2 text-muted" style="min-width: 30px;">${vendorNum}.</span>
                <input type="text" class="form-control" 
                       name="group_vendors[${questionId}][]" 
                       placeholder="Contoh: PT. Vendor A" 
                       maxlength="100"
                       style="flex: 1;">
                <button type="button" class="btn btn-sm btn-outline-danger ms-2 remove-vendor-btn" style="white-space: nowrap;">
                    <i class="fas fa-times me-1"></i>Hapus
                </button>
            `;
            
            vendorList.appendChild(vendorItem);
            updateVendorButtons($(vendorList));
        }

        function addGroupQuestion(questionId) {
            const questionsList = document.querySelector(`.questions-list-${questionId}`);
            const currentCount = questionsList.querySelectorAll('.group-question-item').length;
            const questionNum = currentCount + 1;
            
            const questionItem = document.createElement('div');
            questionItem.className = 'mb-3 group-question-item position-relative';
            questionItem.setAttribute('data-item-num', questionNum);
            questionItem.style.cssText = 'border: 1px solid #dee2e6; border-radius: 8px; padding: 15px; padding-top: 45px;';
            questionItem.innerHTML = `
                    <button type="button" class="btn btn-danger remove-group-question-btn" style="position: absolute; top: 10px; right: 10px; padding: 6px; font-size: 12px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;">
                        <i class="fas fa-times" style="font-size: 10px;"></i>
                    </button>
                    <div class="d-flex align-items-center mb-2">
                        <span class="me-2 text-muted" style="min-width: 30px;">${questionNum}.</span>
                        <input type="text" class="form-control" 
                               name="group_questions[${questionId}][]" 
                               placeholder="Contoh: Kualitas produk" 
                               maxlength="255"
                               style="flex: 1;">
                    </div>
                    <div class="d-flex align-items-center ms-4 ps-2 mb-2">
                        <label class="mb-0 text-muted small me-2">Label Scale:</label>
                        <button type="button" class="btn btn-sm btn-primary select-label-btn" 
                                data-question-id="${questionId}"
                                data-item-num="${questionNum}"
                                data-bs-toggle="modal" 
                                data-bs-target="#masterLabelModal">
                            <i class="fas fa-plus-circle me-1"></i>Pilih Label Scale
                        </button>
                        <input type="hidden" class="group-label-select-${questionId}-${questionNum}" 
                               name="group_labels[${questionId}][]"
                               data-question-id="${questionId}"
                               data-item-num="${questionNum}"
                               value="">
                        <input type="hidden" class="group-label-name-${questionId}-${questionNum}" 
                               name="group_label_names[${questionId}][]" value="">
                        <input type="hidden" class="group-kata-positif-${questionId}-${questionNum}" 
                               name="group_kata_positif[${questionId}][]" value="">
                        <input type="hidden" class="group-kata-negatif-${questionId}-${questionNum}" 
                               name="group_kata_negatif[${questionId}][]" value="">
                    </div>
                    <div class="ms-4 ps-2">
                        <div class="border rounded p-2 mb-2 bg-light label-preview-alert-${questionId}-${questionNum}">
                            <small><strong>Preview:</strong> Pilih label untuk melihat skala</small>
                        </div>
                    </div>
            `;
            
            questionsList.appendChild(questionItem);
        }

        // Event delegation untuk tombol tambah vendor
        $(document).on('click', '.add-vendor-btn', function() {
            const questionId = $(this).data('question-id');
            addGroupVendor(questionId);
        });

        // Event delegation untuk tombol tambah pertanyaan group
        $(document).on('click', '.add-group-question-btn', function() {
            const questionId = $(this).data('question-id');
            addGroupQuestion(questionId);
        });

        // Event delegation untuk hapus vendor
        $(document).on('click', '.remove-vendor-btn', function() {
            const vendorList = $(this).closest('[class*="vendor-list-"]');
            $(this).closest('.d-flex').remove();
            // Reindex numbering
            reindexVendors(vendorList);
        });

        // Event delegation untuk hapus pertanyaan group
        $(document).on('click', '.remove-group-question-btn', function() {
            const questionsList = $(this).closest('[class*="questions-list-"]');
            $(this).closest('.group-question-item').remove();
            // Reindex numbering
            reindexGroupQuestions(questionsList);
        });

        function reindexVendors(vendorList) {
            vendorList.find('.vendor-item').each(function(index) {
                $(this).find('span').first().text((index + 1) + '.');
            });
            updateVendorButtons(vendorList);
        }
        
        // Fungsi untuk update status button vendor (minimum 2)
        function updateVendorButtons(vendorList) {
            const removeButtons = vendorList.find('.remove-vendor-btn');
            const vendorCount = vendorList.find('.vendor-item').length;
            
            if (vendorCount <= 2) {
                removeButtons.prop('disabled', true)
                    .removeClass('btn-outline-danger')
                    .addClass('btn-secondary disabled');
            } else {
                removeButtons.prop('disabled', false)
                    .removeClass('btn-secondary disabled')
                    .addClass('btn-outline-danger');
            }
        }

        function reindexGroupQuestions(questionsList) {
            const questionId = questionsList.attr('class').match(/questions-list-(\d+)/)[1];
            
            questionsList.find('.group-question-item').each(function(index) {
                const newNum = index + 1;
                const oldNum = $(this).attr('data-item-num');

                $(this).find('span').first().text(newNum + '.');

                $(this).attr('data-item-num', newNum);

                const oldDropdown = $(this).find(`select.group-label-select-${questionId}-${oldNum}`);
                const selectedValue = oldDropdown.val();
                const selectedOption = oldDropdown.find('option:selected');
                const kataPositif = selectedOption.data('positif') || '';
                const kataNegatif = selectedOption.data('negatif') || '';

                oldDropdown.removeClass(`group-label-select-${questionId}-${oldNum}`);
                oldDropdown.addClass(`group-label-select-${questionId}-${newNum}`);
                oldDropdown.attr('data-item-num', newNum);

                const oldPreviewAlert = $(this).find(`.label-preview-alert-${questionId}-${oldNum}`);
                oldPreviewAlert.removeClass(`label-preview-alert-${questionId}-${oldNum}`);
                oldPreviewAlert.addClass(`label-preview-alert-${questionId}-${newNum}`);

                if (selectedValue) {
                    oldDropdown.val(selectedValue);
                    if (kataPositif && kataNegatif) {
                        const scale = generateLabelPreview(kataPositif, kataNegatif);
                        oldPreviewAlert.html(`<small><strong>Preview:</strong> ${scale}</small>`);
                    }
                }

            // Update button data-question-id attributes
            const buttons = item.querySelectorAll('.select-label-btn');
            buttons.forEach(btn => {
                btn.setAttribute('data-question-id', `${questionId}-${newNum}`);
            });
            
            // Update preview ID
            const previewDiv = item.querySelector('[id^="preview-"]');
            if (previewDiv) {
                previewDiv.id = `preview-${questionId}-${newNum}`;
            }
            });
            updateQuestionButtons(questionsList);
        }
        
        // Fungsi untuk update status button pertanyaan (minimum 1)
        function updateQuestionButtons(questionsList) {
            const removeButtons = questionsList.find('.remove-group-question-btn');
            const questionCount = questionsList.find('.group-question-item').length;
            
            if (questionCount <= 1) {
                removeButtons.prop('disabled', true)
                    .removeClass('btn-outline-danger')
                    .addClass('btn-secondary disabled');
            } else {
                removeButtons.prop('disabled', false)
                    .removeClass('btn-secondary disabled')
                    .addClass('btn-outline-danger');
            }
        }
    </script>

    <!-- Modal Info Tipe Pertanyaan -->
    <div class="modal fade" id="surveyTypeInfoModal" tabindex="-1" aria-labelledby="surveyTypeInfoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="surveyTypeInfoModalLabel"><i class="fas fa-info-circle text-info me-2"></i>Penjelasan Tipe Pertanyaan Survey</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="card mb-3 border-primary">
                                <div class="card-body">
                                    <h6 class="card-title text-primary"><i class="fas fa-check-circle me-2"></i>Pilihan + Text</h6>
                                    <p class="card-text mb-0">Responden memilih satu opsi dari beberapa pilihan yang tersedia, dan dapat menambahkan keterangan tambahan dalam bentuk teks.</p>
                                    <small class="text-muted">Contoh: Pilih tingkat kepuasan + berikan alasan</small>
                                </div>
                            </div>

                            <div class="card mb-3 border-success">
                                <div class="card-body">
                                    <h6 class="card-title text-success"><i class="fas fa-check-square me-2"></i>Checkbox</h6>
                                    <p class="card-text mb-0">Responden dapat memilih satu atau lebih opsi dari beberapa pilihan yang tersedia.</p>
                                    <small class="text-muted">Contoh: Pilih semua fasilitas yang pernah digunakan</small>
                                </div>
                            </div>

                            <div class="card mb-3 border-info">
                                <div class="card-body">
                                    <h6 class="card-title text-info"><i class="fas fa-font me-2"></i>Text</h6>
                                    <p class="card-text mb-0">Responden mengisi jawaban berupa teks bebas sesuai dengan pertanyaan yang diberikan.</p>
                                    <small class="text-muted">Contoh: Berikan saran dan masukan Anda</small>
                                </div>
                            </div>

                            <div class="card mb-3 border-warning">
                                <div class="card-body">
                                    <h6 class="card-title text-warning"><i class="fas fa-star me-2"></i>Linear Scale</h6>
                                    <p class="card-text mb-0">Responden memberikan penilaian dengan skala 1-5, biasanya dari nilai terendah hingga tertinggi.</p>
                                    <small class="text-muted">Contoh: Skala 1 (Sangat Buruk) - 5 (Sangat Baik)</small>
                                </div>
                            </div>

                            <div class="card mb-0 border-danger">
                                <div class="card-body">
                                    <h6 class="card-title text-danger"><i class="fas fa-th me-2"></i>Group Linear Scale</h6>
                                    <p class="card-text mb-0">Penilaian dengan skala 1-5 untuk beberapa vendor/objek dengan beberapa aspek pertanyaan dalam bentuk tabel matriks.</p>
                                    <small class="text-muted">Contoh: Nilai beberapa vendor dari segi kualitas, harga, dan pelayanan</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Info Tipe Pertanyaan -->
    <div class="modal fade" id="surveyTypeInfoModal" tabindex="-1" aria-labelledby="surveyTypeInfoModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="surveyTypeInfoModalLabel"><i class="fas fa-info-circle text-info me-2"></i>Penjelasan Tipe Pertanyaan Survey</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">
                            <div class="card mb-3 border-primary">
                                <div class="card-body">
                                    <h6 class="card-title text-primary"><i class="fas fa-check-circle me-2"></i>Pilihan + Text</h6>
                                    <p class="card-text mb-0">Responden memilih satu opsi dari beberapa pilihan yang tersedia, dan dapat menambahkan keterangan tambahan dalam bentuk teks.</p>
                                    <small class="text-muted">Contoh: Pilih tingkat kepuasan + berikan alasan</small>
                                </div>
                            </div>

                            <div class="card mb-3 border-success">
                                <div class="card-body">
                                    <h6 class="card-title text-success"><i class="fas fa-check-square me-2"></i>Checkbox</h6>
                                    <p class="card-text mb-0">Responden dapat memilih satu atau lebih opsi dari beberapa pilihan yang tersedia.</p>
                                    <small class="text-muted">Contoh: Pilih semua fasilitas yang pernah digunakan</small>
                                </div>
                            </div>

                            <div class="card mb-3 border-info">
                                <div class="card-body">
                                    <h6 class="card-title text-info"><i class="fas fa-font me-2"></i>Text</h6>
                                    <p class="card-text mb-0">Responden mengisi jawaban berupa teks bebas sesuai dengan pertanyaan yang diberikan.</p>
                                    <small class="text-muted">Contoh: Berikan saran dan masukan Anda</small>
                                </div>
                            </div>

                            <div class="card mb-3 border-warning">
                                <div class="card-body">
                                    <h6 class="card-title text-warning"><i class="fas fa-star me-2"></i>Linear Scale</h6>
                                    <p class="card-text mb-0">Responden memberikan penilaian dengan skala 1-5, biasanya dari nilai terendah hingga tertinggi.</p>
                                    <small class="text-muted">Contoh: Skala 1 (Sangat Buruk) - 5 (Sangat Baik)</small>
                                </div>
                            </div>

                            <div class="card mb-0 border-danger">
                                <div class="card-body">
                                    <h6 class="card-title text-danger"><i class="fas fa-th me-2"></i>Group Linear Scale</h6>
                                    <p class="card-text mb-0">Penilaian dengan skala 1-5 untuk beberapa vendor/objek dengan beberapa aspek pertanyaan dalam bentuk tabel matriks.</p>
                                    <small class="text-muted">Contoh: Nilai beberapa vendor dari segi kualitas, harga, dan pelayanan</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection