@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    @include('assesm._partials.nav_header', [
        'backAction'   => 'onclick="history.back()"',
        'actionLabel'  => 'Save',
        'actionIcon'   => 'fas fa-floppy-disk',
        'actionAttr'   => 'id="btn-simpan-trsqsl" onclick="event.preventDefault(); document.getElementById(\'trsqsl-form\').submit();"',
        'authorizeKey' => 'add',
    ])
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="trsqsl-form"
                    enctype="multipart/form-data">
                    @csrf
                    <div class="row">
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-body p-4">
                                    <p class="text-uppercase text-sm">Insert {{ $title_menu }}</p>
                                    <hr class="horizontal dark mt-0 mb-4">
                                    <div class="row">
                                        @include('assesm.trsqsl._partials.form_fields')
                                    </div>
                                    {{-- Info: training sudah punya salah satu test --}}
                                    <div id="partial-test-info" class="d-none mt-3 p-3 border-radius-lg" style="background:#e0f2fe;border:2px solid #0ea5e9;">
                                        <div class="d-flex align-items-start gap-3">
                                            <div class="text-center" style="min-width:40px;">
                                                <i class="fas fa-info-circle text-info" style="font-size:1.8rem;"></i>
                                            </div>
                                            <div>
                                                <p class="text-sm font-weight-bolder text-dark mb-1">Partial Test Configured</p>
                                                <p class="text-xs text-dark mb-0 info-text"></p>
                                                <p class="text-xxs text-secondary mt-1 mb-0">The Test Type has been automatically set to the remaining type.</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div id="duplicate-warning" class="d-none mt-3 p-3 border-radius-lg" style="background:#fff3cd;border:2px solid #f59e0b;">
                                        <div class="d-flex align-items-start gap-3">
                                            <div class="text-center" style="min-width:40px;">
                                                <i class="fas fa-exclamation-triangle text-warning" style="font-size:1.8rem;"></i>
                                            </div>
                                            <div>
                                                <p class="text-sm font-weight-bolder text-dark mb-1">Combination Already Exists!</p>
                                                <p class="text-xs text-dark mb-0" id="duplicate-warning-text"></p>
                                                <p class="text-xxs text-secondary mt-1 mb-0">Remove the existing setting first before adding a new one.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- Certificate Upload (optional, saat tambah) --}}
                            <div class="card mt-3">
                                <div class="card-header bg-white border-bottom d-flex align-items-center gap-2 py-3 px-4">
                                    <i class="fas fa-certificate text-warning"></i>
                                    <h6 class="mb-0 font-weight-bolder">Sertificate Template</h6>
                                    <span class="badge bg-secondary badge-sm ms-auto">Optional</span>
                                </div>
                                <div class="card-body p-4">
                                    <p class="text-xs text-secondary mb-3">
                                        <i class="fas fa-info-circle me-1"></i>
                                        UUpload an image file (JPG/PNG) or PDF as the background for the participant's certificate. This can be uploaded later via the details page.
                                    </p>
                                    <div class="d-flex align-items-end gap-3 flex-wrap">
                                        <div class="flex-grow-1">
                                            <label class="text-xxs font-weight-bolder text-uppercase text-secondary mb-1 d-block">
                                                Upload Template
                                            </label>
                                            <input type="file" name="certificate_file" class="form-control form-control-sm"
                                                accept=".pdf,.jpg,.jpeg,.png">
                                            <p class="text-xxs text-secondary mt-1 mb-0">Format: JPG, PNG, PDF. Maks. 5 MB.</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @include('assesm.trsqsl._partials.package_preview_card')
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('js')
    @include('assesm.trsqsl._partials.package_preview_script')
    <script>
        const existingLinks = @json($existingLinks);

        (function () {
            const $trainingSel  = $('#select-training');
            const $testTypeSel  = $('select[name="test_type"]');
            const $warn         = $('#duplicate-warning');
            const $btn          = $('#btn-simpan-trsqsl');
            const $partialInfo  = $('#partial-test-info');

            /* ─── Kunci / buka opsi test_type berdasarkan flag training ─── */
            function syncTestTypeOptions() {
                const $opt    = $trainingSel.find('option:selected');
                const hasPre  = $opt.data('has-pre')  == 1;
                const hasPost = $opt.data('has-post') == 1;

                const $preOpt  = $testTypeSel.find('option[value="pre_test"]');
                const $postOpt = $testTypeSel.find('option[value="post_test"]');

                // Reset semua terlebih dahulu
                $preOpt.prop('disabled', false).show();
                $postOpt.prop('disabled', false).show();
                $partialInfo && $partialInfo.addClass('d-none');

                if (hasPre && !hasPost) {
                    // Hanya bisa tambah post_test
                    $preOpt.prop('disabled', true);
                    $testTypeSel.val('post_test');
                    showPartialInfo('Pre Test is already configured for this training. Only <strong>Post Test</strong> can be added.');
                } else if (!hasPre && hasPost) {
                    // Hanya bisa tambah pre_test
                    $postOpt.prop('disabled', true);
                    $testTypeSel.val('pre_test');
                    showPartialInfo('Post Test is already configured for this training. Only <strong>Pre Test</strong> can be added.');
                }
                // else: training belum punya keduanya — biarkan bebas pilih
            }

            function showPartialInfo(html) {
                if ($partialInfo.length) {
                    $partialInfo.find('.info-text').html(html);
                    $partialInfo.removeClass('d-none');
                }
            }

            /* ─── Duplicate warning (sama seperti sebelumnya) ─── */
            function checkDuplicateWarning() {
                const trainingId = $trainingSel.val();
                const testType   = $testTypeSel.val();

                if (!trainingId || !testType) {
                    $warn.addClass('d-none');
                    $btn.prop('disabled', false).css('opacity', '');
                    return;
                }

                const key = trainingId + '|' + testType;
                if (existingLinks.includes(key)) {
                    const label       = testType === 'pre_test' ? 'Pre Test' : 'Post Test';
                    const trainingName = $trainingSel.find('option:selected').text().trim();
                    $('#duplicate-warning-text').html(
                        `Training <strong>${trainingName}</strong> already has <strong>${label}</strong> configured.`
                    );
                    $warn.removeClass('d-none');
                    $btn.prop('disabled', true).css('opacity', '0.45');
                } else {
                    $warn.addClass('d-none');
                    $btn.prop('disabled', false).css('opacity', '');
                }
            }

            /* ─── Bind events ─── */
            $trainingSel.on('change', function () {
                syncTestTypeOptions();
                checkDuplicateWarning();
            });
            $testTypeSel.on('change', checkDuplicateWarning);

            document.getElementById('trsqsl-form').addEventListener('submit', function (e) {
                const trainingId = $trainingSel.val();
                const testType   = $testTypeSel.val();
                const key        = trainingId + '|' + testType;
                if (existingLinks.includes(key)) {
                    e.preventDefault();
                    $warn.removeClass('d-none');
                }
            });

            /* ─── Init ─── */
            syncTestTypeOptions();
            checkDuplicateWarning();
        })();
    </script>
@endpush