@php
$current = $mcq ?? null;
@endphp
<style>
    .lang-tab {
        border: 1px solid #d1d5db;
        padding: 8px 14px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: bold;
        transition: all 0.2s ease;
    }

    .lang-tab.active {
        background: #fff;
        color: #000;
        border-color: #fff;
    }

    .text-on-surface-variant,
    .text-surface,
    .text-on-surface {
        color: #fff !important;
    }

    /* Quill Dark Theme Fix */
    .ql-toolbar {
        background: #1c2026;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-bottom: none;
        border-radius: 10px 10px 0 0;
    }

    .ql-container {
        background: #10141a;
        color: #fff;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0 0 10px 10px;
        min-height: 220px;
    }

    .ql-editor {
        color: #fff;
    }

    .ql-editor.ql-blank::before {
        color: rgba(255, 255, 255, 0.3);
    }

    .ql-stroke {
        stroke: #fff;
    }

    .ql-fill {
        fill: #fff;
    }
</style>



<!-- LANGUAGE SWITCH -->
<div class="flex gap-2 mb-6">
    @foreach($languages as $lang)
    <button type="button"
        onclick="switchLang('{{ $lang->code }}')"
        class="lang-tab px-3 py-1 border text-xs font-bold"
        data-lang="{{ $lang->code }}">
        {{ strtoupper($lang->code) }}
    </button>
    @endforeach
</div>

<!-- QUESTION KEY -->


<div class="grid grid-cols-12 gap-8">

    <!-- QUESTION -->
    <div class="col-span-12 lg:col-span-7 space-y-6">

        @foreach($languages as $lang)
        <div class="lang-field" data-lang="{{ $lang->code }}">

            <label class="text-xs font-bold">
                Question ({{ strtoupper($lang->code) }})
            </label>

            <input type="text"
                name="question[{{ $lang->code }}]"
                value="{{ old('question.'.$lang->code, $current->question[$lang->code] ?? '') }}"
                class="w-full border p-3 rounded bg-surface-container-lowest">
        </div>
        @endforeach

    </div>

    <!-- OPTIONS -->
    <!-- OPTIONS -->
    <div class="col-span-12 lg:col-span-5 space-y-4">

        <label class="text-xs font-bold">
            Answers
        </label>

        @for($i = 1; $i <= 4; $i++)

            <div class="pb-2 space-y-4">

            @foreach($languages as $lang)

            <div
                class="option-lang-field"
                data-lang="{{ $lang->code }}">

                <label class="block text-xs font-bold mb-1">

                    Option {{ $i }}
                    ({{ strtoupper($lang->code) }})

                </label>

                <input
                    type="text"

                    name="options[option_{{ $i }}][label][{{ $lang->code }}]"
                    class="w-full border p-2 rounded bg-surface-container-lowest"
                    value="{{ old(
                            'options.option_'.$i.'.label.'.$lang->code,
                            $current->options[$i - 1]['label'][$lang->code] ?? ''
                        ) }}"

                    placeholder="Enter Answer"

                    class="w-full border p-2 rounded">

            </div>

            @endforeach

    </div>

    @endfor

</div>

</div>


<script>
    function switchLang(lang) {


        document.querySelectorAll('.lang-field')
            .forEach(el => {

                el.style.display =
                    el.dataset.lang === lang ?
                    'block' :
                    'none';
            });


        document.querySelectorAll('.option-lang-field')
            .forEach(el => {

                el.style.display =
                    el.dataset.lang === lang ?
                    'block' :
                    'none';
            });



        document.querySelectorAll('.lang-tab')
            .forEach(btn => {

                btn.classList.remove('active');

                if (
                    btn.dataset.lang === lang
                ) {
                    btn.classList.add('active');
                }
            });
    }

    document.addEventListener(
        'DOMContentLoaded',
        () => {

            switchLang('en');
        }
    );
</script>