@extends('layouts.cbt')
@section('page-title', 'Buat Ujian')
@section('sidebar')@include('components.guru-sidebar')@endsection
@section('content')
<div class="card-sdn max-w-5xl" x-data="examCreateForm()">
    <form method="POST" action="{{ route('guru.exams.store') }}" class="space-y-4">
        @csrf
        <div class="grid md:grid-cols-2 gap-4">
            <div><label class="form-label">Judul Ujian</label><input name="title" class="form-input" value="{{ old('title') }}" required></div>
            <div><label class="form-label">Token (opsional)</label><input name="token" class="form-input" placeholder="SDN08" value="{{ old('token') }}"></div>
            <div><label class="form-label">Mata Pelajaran</label><select name="subject_id" class="form-input">@foreach($subjects as $s)<option value="{{ $s->id }}" @selected(old('subject_id')==$s->id)>{{ $s->name }}</option>@endforeach</select></div>
            <div><label class="form-label">Kelas</label><select name="class_id" class="form-input">@foreach($classes as $c)<option value="{{ $c->id }}" @selected(old('class_id')==$c->id)>{{ $c->name }}</option>@endforeach</select></div>
            <div><label class="form-label">Durasi (menit)</label><input name="duration_minutes" type="number" class="form-input" value="{{ old('duration_minutes', 60) }}" required></div>
            <div><label class="form-label">KKM</label><input name="passing_score" type="number" class="form-input" value="{{ old('passing_score', 70) }}" required></div>
            <div><label class="form-label">Maks. Percobaan</label><input name="max_attempts" type="number" class="form-input" value="{{ old('max_attempts', 1) }}" min="1" max="10" required>
                <p class="text-xs text-gray-500 mt-1">Berapa kali siswa boleh mengerjakan ujian ini</p>
            </div>
            <div><label class="form-label">Mulai</label><input name="start_at" type="datetime-local" class="form-input" value="{{ old('start_at') }}" required></div>
            <div><label class="form-label">Selesai</label><input name="end_at" type="datetime-local" class="form-input" value="{{ old('end_at') }}" required></div>
        </div>
        <div><label class="form-label">Instruksi</label><textarea name="instructions" class="form-input" rows="2">{{ old('instructions') }}</textarea></div>
        <div class="flex flex-wrap gap-4">
            <label class="flex gap-2"><input type="checkbox" name="shuffle_questions" value="1" checked> Acak Soal</label>
            <label class="flex gap-2"><input type="checkbox" name="shuffle_options" value="1" checked> Acak Opsi</label>
            <label class="flex gap-2"><input type="checkbox" name="show_score" value="1" checked> Tampilkan Nilai</label>
            <label class="flex gap-2"><input type="checkbox" name="show_explanation" value="1"> Tampilkan Pembahasan</label>
        </div>

        <div class="border-2 border-red-100 rounded-xl p-4 bg-red-50/30">
            <h4 class="font-extrabold text-gray-800 mb-2">Keamanan Ujian</h4>
            <p class="text-xs text-gray-500 mb-3">Kunci browser, watermark, dan pencatatan pelanggaran untuk guru. Tidak mengganggu siswa saat ujian.</p>
            <div class="flex flex-wrap gap-6 items-end">
                <label class="flex gap-2 items-center"><input type="checkbox" name="security_strict_mode" value="1" checked> Mode keamanan aktif</label>
                <div>
                    <label class="form-label">Ambang peringatan tab switch</label>
                    <input name="tab_switch_flag_threshold" type="number" class="form-input w-24" value="{{ old('tab_switch_flag_threshold', 3) }}" min="1" max="50">
                    <p class="text-xs text-gray-500 mt-1">Badge kuning di monitor guru</p>
                </div>
            </div>
        </div>

        <div class="border-2 border-orange-200 rounded-xl p-4 bg-orange-50/20">
            <div class="flex flex-wrap justify-between items-center gap-3 mb-4">
                <div>
                    <label class="form-label mb-0 text-lg font-extrabold">Pilih Soal Ujian</label>
                    <p class="text-sm text-gray-500">Centang bank soal untuk memilih semua soal sekaligus, atau pilih soal individual</p>
                </div>
                <div class="flex gap-2 text-sm">
                    <button type="button" @click="selectAllBanks()" class="btn-sdn-secondary text-sm py-2">Pilih Semua Bank</button>
                    <button type="button" @click="clearAll()" class="text-red-500 font-semibold text-sm">Bersihkan</button>
                </div>
            </div>

            <p class="text-sm font-bold text-sdn-orange mb-3">
                Terpilih: <span x-text="selectedCount"></span> soal
            </p>

            @error('question_ids')<p class="text-red-500 text-sm mb-3">{{ $message }}</p>@enderror

            <div class="space-y-4 max-h-[28rem] overflow-y-auto pr-2">
                @forelse($banks as $bank)
                <div class="card-sdn !p-4" x-data="{ expanded: false }">
                    <div class="flex items-start gap-3">
                        <input type="checkbox"
                            name="bank_ids[]"
                            value="{{ $bank->id }}"
                            class="mt-1 w-5 h-5"
                            @change="toggleBank({{ $bank->id }}, $event.target.checked, @js($bank->questions->pluck('id')))"
                            :checked="isBankSelected({{ $bank->id }}, @js($bank->questions->pluck('id')))">
                        <div class="flex-1">
                            <div class="flex justify-between items-start">
                                <div>
                                    <p class="font-extrabold text-gray-800">{{ $bank->title }}</p>
                                    <p class="text-sm text-gray-500">{{ $bank->subject->name }} &bull; Kelas {{ $bank->grade }} &bull; {{ $bank->questions_count }} soal @if($bank->is_shared)<span class="text-green-600">(Shared)</span>@endif</p>
                                </div>
                                <button type="button" @click="expanded = !expanded" class="text-sm text-blue-600 font-semibold whitespace-nowrap" x-text="expanded ? 'Tutup' : 'Lihat Soal'"></button>
                            </div>

                            <div x-show="expanded" class="mt-3 space-y-2 border-t pt-3">
                                @foreach($bank->questions as $q)
                                <label class="flex gap-2 items-start text-sm p-2 hover:bg-gray-50 rounded-lg cursor-pointer">
                                    <input type="checkbox"
                                        name="question_ids[]"
                                        value="{{ $q->id }}"
                                        class="mt-0.5"
                                        data-bank="{{ $bank->id }}"
                                        @change="toggleQuestion({{ $q->id }}, {{ $bank->id }}, @js($bank->questions->pluck('id')), $event.target.checked)"
                                        :checked="selectedQuestions.includes({{ $q->id }})">
                                    <span>
                                        <span class="text-xs font-bold text-gray-400">{{ $q->type->label() }} &bull; {{ $q->points }}p</span><br>
                                        {{ \Illuminate\Support\Str::limit(strip_tags($q->content), 100) }}
                                    </span>
                                </label>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                <p class="text-gray-500 text-center py-6">Belum ada bank soal. <a href="{{ route('guru.banks.create') }}" class="text-blue-600 font-semibold">Buat bank soal</a> terlebih dahulu.</p>
                @endforelse
            </div>
        </div>

        <button type="submit" class="btn-sdn-primary" :disabled="selectedCount === 0">Buat Ujian (<span x-text="selectedCount"></span> soal)</button>
    </form>
</div>

@push('scripts')
<script>
function examCreateForm() {
    const oldBanks = @json(old('bank_ids', []));
    const oldQuestions = @json(old('question_ids', []));

    return {
        selectedBanks: oldBanks.map(Number),
        selectedQuestions: oldQuestions.map(Number),
        bankQuestions: @json($banks->mapWithKeys(fn($b) => [$b->id => $b->questions->pluck('id')])),

        get selectedCount() {
            const fromBanks = this.selectedBanks.flatMap(id => this.bankQuestions[id] || []);
            return [...new Set([...fromBanks.map(Number), ...this.selectedQuestions.map(Number)])].length;
        },

        isBankSelected(bankId, questionIds) {
            const ids = questionIds.map(Number);
            return ids.length > 0 && ids.every(id => this.selectedQuestions.includes(id) || this.selectedBanks.includes(bankId));
        },

        toggleBank(bankId, checked, questionIds) {
            const ids = questionIds.map(Number);
            if (checked) {
                if (!this.selectedBanks.includes(bankId)) this.selectedBanks.push(bankId);
                ids.forEach(id => {
                    if (!this.selectedQuestions.includes(id)) this.selectedQuestions.push(id);
                });
            } else {
                this.selectedBanks = this.selectedBanks.filter(id => id !== bankId);
                this.selectedQuestions = this.selectedQuestions.filter(id => !ids.includes(id));
            }
            this.syncCheckboxes();
        },

        toggleQuestion(qId, bankId, allIds, checked) {
            qId = Number(qId);
            const ids = allIds.map(Number);
            if (checked) {
                if (!this.selectedQuestions.includes(qId)) this.selectedQuestions.push(qId);
            } else {
                this.selectedQuestions = this.selectedQuestions.filter(id => id !== qId);
                this.selectedBanks = this.selectedBanks.filter(id => id !== bankId);
            }
            if (ids.every(id => this.selectedQuestions.includes(id))) {
                if (!this.selectedBanks.includes(bankId)) this.selectedBanks.push(bankId);
            }
            this.syncCheckboxes();
        },

        selectAllBanks() {
            @json($banks).forEach(bank => {
                const ids = (this.bankQuestions[bank.id] || []).map(Number);
                if (!this.selectedBanks.includes(bank.id)) this.selectedBanks.push(bank.id);
                ids.forEach(id => {
                    if (!this.selectedQuestions.includes(id)) this.selectedQuestions.push(id);
                });
            });
            this.syncCheckboxes();
        },

        clearAll() {
            this.selectedBanks = [];
            this.selectedQuestions = [];
            this.syncCheckboxes();
        },

        syncCheckboxes() {
            this.$nextTick(() => {
                document.querySelectorAll('input[name="bank_ids[]"]').forEach(el => {
                    const bankId = Number(el.value);
                    const qIds = (this.bankQuestions[bankId] || []).map(Number);
                    el.checked = qIds.length > 0 && qIds.every(id => this.selectedQuestions.includes(id));
                });
                document.querySelectorAll('input[name="question_ids[]"]').forEach(el => {
                    el.checked = this.selectedQuestions.includes(Number(el.value));
                });
            });
        },

        init() {
            if (this.selectedBanks.length || this.selectedQuestions.length) {
                this.syncCheckboxes();
            }
        }
    }
}
</script>
@endpush
@endsection