{{-- trsqsl/_partials/package_preview_script.blade.php
    JS for package preview card.
    Used by: trsqsl/add.blade.php, trsqsl/edit.blade.php
    Props:
      $initOnLoad (bool, optional) — if true, calls updatePreview() on document.ready (for edit page)
--}}
<script>
    (function() {
        const trsqslPackageUI = {
            updatePreview() {
                const $option = $('#select-package').find(':selected');
                const $preview = $('#package-preview-content');

                if ($('#select-package').val()) {
                    const title = $option.text();
                    const desc = $option.data('desc');
                    const total = $option.data('total');
                    const mc = $option.data('mc');
                    const essay = $option.data('essay');

                    $preview.hide().fadeIn().html(`
                        <div class="mb-4">
                            <span class="badge bg-primary mb-2">Package Detail</span>
                            <h5 class="text-dark font-weight-bolder mb-1">${title}</h5>
                            <p class="text-xs text-secondary mb-0">${desc}</p>
                        </div>

                        <div class="row g-2 mb-4">
                            <div class="col-6">
                                <div class="p-3 bg-gray-100 border-radius-lg text-center h-100 border">
                                    <h4 class="mb-0 text-dark font-weight-bolder">${total}</h4>
                                    <p class="text-xxs text-secondary font-weight-bold mb-0">ALL QUESTIONS</p>
                                </div>
                            </div>
                            <div class="col-6">
                                <div class="p-3 bg-gray-100 border-radius-lg text-center h-100 border">
                                    <h4 class="mb-0 text-dark font-weight-bolder">${mc + essay}</h4>
                                    <p class="text-xxs text-secondary font-weight-bold mb-0">WEIGHT SCORE</p>
                                </div>
                            </div>
                        </div>

                        <ul class="list-group">
                            <li class="list-group-item border-0 d-flex align-items-center px-0 py-2">
                                <div class="bg-primary text-white text-center border-radius-sm me-3" style="width:24px;height:24px;line-height:24px">
                                    <i class="fas fa-check text-xxs"></i>
                                </div>
                                <div class="d-flex flex-column">
                                    <h6 class="mb-0 text-dark text-xs">Multiple Choice (MC)</h6>
                                </div>
                                <span class="ms-auto text-dark text-xs font-weight-bold">${mc} Item</span>
                            </li>
                            <li class="list-group-item border-0 d-flex align-items-center px-0 py-2">
                                <div class="bg-primary text-white text-center border-radius-sm me-3" style="width:24px;height:24px;line-height:24px">
                                    <i class="fas fa-pen text-xxs"></i>
                                </div>
                                <div class="d-flex flex-column">
                                    <h6 class="mb-0 text-dark text-xs">Essay / Uraian</h6>
                                </div>
                                <span class="ms-auto text-dark text-xs font-weight-bold">${essay} Item</span>
                            </li>
                        </ul>
                    `);
                } else {
                    $preview.html(`
                        <div class="text-center py-5">
                            <div class="bg-gray-100 border-radius-circle d-inline-block p-4 mb-3">
                                <i class="fas fa-file-invoice text-lighter fa-3x"></i>
                            </div>
                            <h6 class="text-secondary text-sm">No Bank Question Selected</h6>
                            <p class="text-xs text-secondary px-4">Select one <b>Bank Question</b> on the side to view question details.</p>
                        </div>
                    `);
                }
            },
            initSelect2() {
                $('#select-training').select2({
                    placeholder: '-- Select Training --',
                    allowClear: true,
                    width: '100%',
                });

                $('#select-package').select2({
                    placeholder: '-- Select Bank Question --',
                    allowClear: true,
                    width: '100%',
                });
            },
            bindEvents() {
                $('#select-package').off('change.trsqsl').on('change.trsqsl', () => this.updatePreview());
            },
            init() {
                this.initSelect2();
                this.bindEvents();
                @if (!empty($initOnLoad))
                    this.updatePreview();
                @endif
            }
        };

        window.trsqslPackageUI = trsqslPackageUI;
        // Backward compatibility.
        window.updatePreview = function() {
            return trsqslPackageUI.updatePreview();
        };
        trsqslPackageUI.init();
    })();
</script>