@extends('layout.layout')

@section('content')
    <div class="app-bg schedule-page">
        <div class="page-shell">
            @include('components.alert')
            @if($languageAssessmentPage ?? false)
                <div class="mode-switch" role="tablist" aria-label="Language assessment type">
                    <button type="button" class="mode-switch__item is-active" id="languageDemoTab" role="tab" aria-selected="true" aria-controls="languageDemoPanel">Demo</button>
                    <button type="button" class="mode-switch__item" id="languageAiTab" role="tab" aria-selected="false" aria-controls="languageAiPanel">AI Test</button>
                </div>
                <p class="schedule-subtitle">
                    {{ $canBookFreeAssessment ? 'Your first assessment is free after course payment. Choose either Demo or AI Test.' : 'Assessments are paid. A free assessment requires a paid course and no previous Demo or AI Test.' }}
                    Using the free assessment for either option makes the other option paid.
                </p>
                <input type="hidden" id="languageAssessmentType" value="demo">
            @endif
            <div id="languageDemoPanel" @if($languageAssessmentPage ?? false) role="tabpanel" aria-labelledby="languageDemoTab" @endif>
            @include('student.schedule.partials._content')
            </div>
        </div>
    </div>
@endsection

@push('styles')
    @include('student.schedule.partials._styles')
@endpush

@push('scripts')
    @include('student.schedule.partials._scripts')
    @if($languageAssessmentPage ?? false)
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const demoTab = document.getElementById('languageDemoTab');
                const aiTab = document.getElementById('languageAiTab');
                function selectAssessment(ai) {
                    document.getElementById('languageAssessmentType').value = ai ? 'ai' : 'demo';
                    syncLanguageAssessmentFields();
                    demoTab.classList.toggle('is-active', !ai);
                    aiTab.classList.toggle('is-active', ai);
                    demoTab.setAttribute('aria-selected', String(!ai));
                    aiTab.setAttribute('aria-selected', String(ai));
                }
                demoTab.addEventListener('click', () => selectAssessment(false));
                aiTab.addEventListener('click', () => selectAssessment(true));
                selectAssessment(new URLSearchParams(window.location.search).get('assessment') === 'ai');
            });
        </script>
    @endif
@endpush