@extends('layouts.app')

@section('title', 'Wawancara SPMB')

@section('content')
<div class="pkbm-master-page mx-auto max-w-7xl space-y-5">
    <header class="pkbm-dashboard__heading">
        <div>
            <p class="pkbm-dashboard__breadcrumb"><span>Manajemen SPMB</span><i class="bi bi-chevron-right" aria-hidden="true"></i>Wawancara Siswa</p>
            <h1 class="pkbm-dashboard__title">Instrumen & Wawancara</h1>
            <p class="pkbm-dashboard__subtitle">Kelola pertanyaan seleksi, catat hasil wawancara calon peserta, dan tinjau jawaban.</p>
        </div>
    </header>
    @if (session('status'))
        <div role="status" class="settings-notice settings-notice--success"><i class="bi bi-check-circle-fill" aria-hidden="true"></i><span>{{ session('status') }}</span></div>
    @endif
    @if ($errors->any())
        <div role="alert" class="settings-notice settings-notice--error"><i class="bi bi-exclamation-circle-fill" aria-hidden="true"></i><div><p class="font-semibold">Permintaan belum dapat diproses.</p><ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul></div></div>
    @endif

    <nav class="sp-card flex flex-wrap gap-2 p-2" aria-label="Menu wawancara">
        @foreach (['pertanyaan' => ['bi-ui-checks', 'Kelola pertanyaan'], 'wawancara' => ['bi-clipboard2-check', 'Form wawancara'], 'hasil' => ['bi-chat-square-text', 'Hasil wawancara']] as $tabKey => [$icon, $label])
            <a href="{{ route('pkbm.spmb.interview', ['tab' => $tabKey] + ($tabKey === 'hasil' && $selectedApplicant ? ['applicant_id' => $selectedApplicant->id] : [])) }}"
               @class(['inline-flex items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-semibold transition', 'bg-blue-600 text-white shadow-sm' => $tab === $tabKey, 'text-slate-600 hover:bg-slate-50 hover:text-blue-700' => $tab !== $tabKey])>
                <i class="bi {{ $icon }}" aria-hidden="true"></i>{{ $label }}
            </a>
        @endforeach
    </nav>

    @if ($tab === 'pertanyaan')
        <div class="grid items-start gap-5 lg:grid-cols-[minmax(18rem,.75fr)_minmax(0,1.25fr)]">
            <section class="sp-card">
                <div class="sp-card-header"><h2 class="sp-section-title">Tambah pertanyaan</h2><p class="mt-1 text-xs text-slate-500">Tentukan tipe jawaban dan kategori calon peserta.</p></div>
                <form method="POST" action="{{ route('pkbm.spmb.interview.questions.store') }}" class="space-y-4 p-5">
                    @csrf
                    <div><label for="new-question" class="sp-form-label">Pertanyaan</label><textarea id="new-question" name="pertanyaan" rows="3" maxlength="5000" required class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Contoh: Apa motivasi Anda mengikuti pendidikan kesetaraan?">{{ old('pertanyaan') }}</textarea></div>
                    <div><label for="new-question-type" class="sp-form-label">Tipe jawaban</label><select id="new-question-type" name="tipe_input" class="sp-form-control w-full px-3 py-2.5 text-sm">@foreach ($types as $type)<option value="{{ $type }}" @selected(old('tipe_input', 'text') === $type)>{{ ['text' => 'Teks singkat', 'textarea' => 'Uraian', 'pilihan' => 'Pilihan'][$type] }}</option>@endforeach</select></div>
                    <div data-choice-options class="{{ old('tipe_input') === 'pilihan' ? '' : 'hidden' }}"><label for="new-options" class="sp-form-label">Pilihan jawaban</label><input id="new-options" name="opsi_pilihan" value="{{ old('opsi_pilihan') }}" class="sp-form-control w-full px-3 py-2.5 text-sm" placeholder="Pisahkan dengan koma"><p class="mt-1 text-xs text-slate-500">Misalnya: Sangat siap, Cukup siap, Belum siap</p></div>
                    <div><label for="new-target" class="sp-form-label">Ditujukan kepada</label><select id="new-target" name="target_siswa" class="sp-form-control w-full px-3 py-2.5 text-sm"><option value="keduanya">Semua calon siswa</option><option value="baru" @selected(old('target_siswa') === 'baru')>Siswa baru</option><option value="lama" @selected(old('target_siswa') === 'lama')>Siswa lama</option></select></div>
                    <button class="sp-btn-primary w-full justify-center" type="submit"><i class="bi bi-plus-lg" aria-hidden="true"></i>Simpan pertanyaan</button>
                </form>
            </section>
            <section class="sp-card overflow-hidden">
                <div class="sp-card-header"><h2 class="sp-section-title">Daftar pertanyaan</h2><p class="mt-1 text-xs text-slate-500">{{ $questions->count() }} pertanyaan</p></div>
                <div class="divide-y divide-slate-100">
                    @forelse ($questions as $question)
                        <details class="group p-4">
                            <summary class="flex cursor-pointer list-none items-start justify-between gap-3">
                                <span><span class="mr-2 text-xs font-semibold text-slate-400">{{ $loop->iteration }}.</span><span class="font-semibold text-slate-800">{{ $question->pertanyaan }}</span><span class="mt-1 block text-xs text-slate-500">{{ ['text' => 'Teks singkat', 'textarea' => 'Uraian', 'pilihan' => 'Pilihan'][$question->tipe_input] ?? $question->tipe_input }} · {{ ['baru' => 'Siswa baru', 'lama' => 'Siswa lama', 'keduanya' => 'Semua siswa'][$question->target_siswa] ?? 'Semua siswa' }}</span></span>
                                <i class="bi bi-chevron-down mt-1 text-slate-400 transition group-open:rotate-180" aria-hidden="true"></i>
                            </summary>
                            @if ($question->tipe_input === 'pilihan')<p class="mt-2 rounded-lg bg-slate-50 p-2 text-xs text-slate-600">Pilihan: {{ $question->opsi_pilihan }}</p>@endif
                            <form method="POST" action="{{ route('pkbm.spmb.interview.questions.update', $question->id) }}" class="mt-4 grid gap-3 rounded-xl bg-slate-50 p-4 sm:grid-cols-2">
                                @csrf @method('PUT')
                                <div class="sm:col-span-2"><label for="question-{{ $question->id }}" class="sp-form-label">Pertanyaan</label><textarea id="question-{{ $question->id }}" name="pertanyaan" rows="2" required class="sp-form-control w-full px-3 py-2 text-sm">{{ $question->pertanyaan }}</textarea></div>
                                <div><label for="type-{{ $question->id }}" class="sp-form-label">Tipe</label><select id="type-{{ $question->id }}" name="tipe_input" data-question-type class="sp-form-control w-full px-3 py-2 text-sm">@foreach ($types as $type)<option value="{{ $type }}" @selected($question->tipe_input === $type)>{{ ['text' => 'Teks singkat', 'textarea' => 'Uraian', 'pilihan' => 'Pilihan'][$type] }}</option>@endforeach</select></div>
                                <div><label class="sp-form-label">Target</label><select name="target_siswa" class="sp-form-control w-full px-3 py-2 text-sm">@foreach (['keduanya' => 'Semua siswa', 'baru' => 'Siswa baru', 'lama' => 'Siswa lama'] as $value => $label)<option value="{{ $value }}" @selected($question->target_siswa === $value)>{{ $label }}</option>@endforeach</select></div>
                                <div data-question-options class="sm:col-span-2 {{ $question->tipe_input === 'pilihan' ? '' : 'hidden' }}"><label for="options-{{ $question->id }}" class="sp-form-label">Pilihan jawaban (pisahkan koma)</label><input id="options-{{ $question->id }}" name="opsi_pilihan" value="{{ $question->opsi_pilihan }}" @required($question->tipe_input === 'pilihan') class="sp-form-control w-full px-3 py-2 text-sm"></div>
                                <div class="flex flex-wrap justify-end gap-2 sm:col-span-2"><button type="submit" class="sp-btn-secondary"><i class="bi bi-save" aria-hidden="true"></i>Simpan perubahan</button></div>
                            </form>
                            <form method="POST" action="{{ route('pkbm.spmb.interview.questions.destroy', $question->id) }}" class="mt-2 text-right" onsubmit="return confirm('Hapus pertanyaan ini beserta jawaban terkait?')">@csrf @method('DELETE')<button class="sp-btn-secondary text-rose-700"><i class="bi bi-trash" aria-hidden="true"></i>Hapus</button></form>
                        </details>
                    @empty
                        <div class="px-5 py-12 text-center"><i class="bi bi-ui-checks text-3xl text-slate-300" aria-hidden="true"></i><p class="mt-3 text-sm font-semibold text-slate-700">Belum ada pertanyaan</p><p class="mt-1 text-xs text-slate-500">Tambahkan instrumen wawancara di formulir ini.</p></div>
                    @endforelse
                </div>
            </section>
        </div>
    @elseif ($tab === 'wawancara')
        <section class="sp-card">
            <div class="sp-card-header"><h2 class="sp-section-title">Form wawancara calon peserta</h2><p class="mt-1 text-xs text-slate-500">Pilih pendaftar untuk memuat pertanyaan yang sesuai.</p></div>
            <form method="GET" action="{{ route('pkbm.spmb.interview') }}" class="grid gap-3 p-5 sm:grid-cols-[12rem_minmax(12rem,1fr)_auto]">
                <input type="hidden" name="tab" value="wawancara">
                <label for="candidate-query" class="sr-only">Cari nama calon siswa</label><input id="candidate-query" name="q" value="{{ $filters['q'] ?? '' }}" class="sp-form-control px-3 py-2 text-sm" placeholder="Cari nama calon">
                <label for="candidate-id" class="sr-only">Pilih calon peserta</label><select id="candidate-id" name="applicant_id" required class="sp-form-control px-3 py-2 text-sm"><option value="">Pilih calon peserta</option>@foreach ($applicants as $applicant)<option value="{{ $applicant->id }}" @selected($selectedApplicant && (int) $selectedApplicant->id === (int) $applicant->id)>{{ $applicant->nama_siswa }} · {{ $applicant->jenjang }}</option>@endforeach</select>
                <button class="sp-btn-secondary justify-center" type="submit"><i class="bi bi-person-check" aria-hidden="true"></i>Pilih peserta</button>
            </form>
            @if ($selectedApplicant)
                @php $candidateType = $selectedApplicant->status_siswa === 'Lama' ? 'lama' : 'baru'; @endphp
                <form method="POST" action="{{ route('pkbm.spmb.interview.answers.store') }}" class="border-t border-slate-100 p-5">
                    @csrf
                    <input type="hidden" name="applicant_id" value="{{ $selectedApplicant->id }}">
                    <div class="mb-5 rounded-xl border border-blue-100 bg-blue-50/70 p-4"><p class="font-semibold text-blue-900">{{ $selectedApplicant->nama_siswa }}</p><p class="mt-1 text-xs text-blue-800">{{ $selectedApplicant->jenjang }} · {{ $selectedApplicant->status_verifikasi }}</p></div>
                    <div class="space-y-4">
                        @forelse ($questions->filter(fn ($question) => in_array($question->target_siswa, ['keduanya', $candidateType], true)) as $question)
                            <div><label for="answer-{{ $question->id }}" class="sp-form-label">{{ $question->pertanyaan }}</label>
                                @if ($question->tipe_input === 'textarea')
                                    <textarea id="answer-{{ $question->id }}" name="answers[{{ $question->id }}]" rows="3" class="sp-form-control w-full px-3 py-2.5 text-sm">{{ old('answers.'.$question->id, $answers[$question->id] ?? '') }}</textarea>
                                @elseif ($question->tipe_input === 'pilihan')
                                    <select id="answer-{{ $question->id }}" name="answers[{{ $question->id }}]" class="sp-form-control w-full px-3 py-2.5 text-sm"><option value="">Pilih jawaban</option>@foreach (explode(',', (string) $question->opsi_pilihan) as $option) @php $option = trim($option); @endphp <option value="{{ $option }}" @selected(old('answers.'.$question->id, $answers[$question->id] ?? '') === $option)>{{ $option }}</option>@endforeach</select>
                                @else
                                    <input id="answer-{{ $question->id }}" name="answers[{{ $question->id }}]" value="{{ old('answers.'.$question->id, $answers[$question->id] ?? '') }}" class="sp-form-control w-full px-3 py-2.5 text-sm">
                                @endif
                            </div>
                        @empty
                            <p class="rounded-xl border border-amber-200 bg-amber-50 p-4 text-sm text-amber-900">Belum ada pertanyaan untuk kategori {{ $candidateType === 'lama' ? 'siswa lama' : 'siswa baru' }}. Tambahkan pertanyaan terlebih dahulu.</p>
                        @endforelse
                    </div>
                    @if ($questions->contains(fn ($question) => in_array($question->target_siswa, ['keduanya', $candidateType], true)))
                        <div class="mt-5 flex justify-end"><button class="sp-btn-primary" type="submit"><i class="bi bi-cloud-check" aria-hidden="true"></i>Simpan hasil wawancara</button></div>
                    @endif
                </form>
            @endif
        </section>
    @else
        <section class="sp-card overflow-hidden">
            <div class="sp-card-header"><h2 class="sp-section-title">Hasil wawancara</h2><p class="mt-1 text-xs text-slate-500">{{ $interviewResults->count() }} calon peserta telah memiliki jawaban.</p></div>
            <div class="overflow-x-auto">
                <table class="sp-table min-w-[42rem]">
                    <thead><tr><th scope="col" class="w-14 text-center">No.</th><th scope="col">Nama calon peserta</th><th scope="col">Jenjang</th><th scope="col" class="text-center">Pertanyaan terjawab</th><th scope="col" class="text-right">Aksi</th></tr></thead>
                    <tbody>
                        @forelse ($interviewResults as $result)
                            <tr>
                                <td class="text-center text-sm text-slate-500">{{ $loop->iteration }}</td>
                                <td class="font-semibold text-slate-800">
                                    {{ $result->nama_siswa }}
                                    <details class="mt-2 text-xs">
                                        <summary class="cursor-pointer font-semibold text-blue-700">Lihat jawaban</summary>
                                        <dl class="mt-2 space-y-2 rounded-lg bg-slate-50 p-3 text-left">
                                            @foreach ($resultAnswers->get($result->applicant_id, collect()) as $answer)
                                                <div><dt class="font-semibold text-slate-600">{{ $answer->pertanyaan }}</dt><dd class="mt-0.5 whitespace-pre-line text-slate-700">{{ $answer->jawaban ?: '—' }}</dd></div>
                                            @endforeach
                                        </dl>
                                    </details>
                                </td>
                                <td>{{ $result->jenjang }}</td>
                                <td class="text-center"><span class="rounded-full bg-blue-50 px-2.5 py-1 text-xs font-semibold text-blue-700">{{ $result->answered_count }} pertanyaan</span></td>
                                <td class="text-right"><div class="inline-flex gap-2"><a class="sp-btn-secondary" href="{{ route('pkbm.spmb.interview', ['tab' => 'wawancara', 'applicant_id' => $result->applicant_id]) }}"><i class="bi bi-pencil-square" aria-hidden="true"></i>Lihat/edit</a><form method="POST" action="{{ route('pkbm.spmb.interview.answers.destroy', $result->applicant_id) }}" onsubmit="return confirm('Hapus seluruh jawaban wawancara calon ini?')">@csrf @method('DELETE')<button class="settings-icon-action settings-icon-action--delete" aria-label="Hapus hasil wawancara {{ $result->nama_siswa }}"><i class="bi bi-trash" aria-hidden="true"></i></button></form></div></td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="px-4 py-12 text-center"><i class="bi bi-chat-square-text text-3xl text-slate-300" aria-hidden="true"></i><p class="mt-3 text-sm font-semibold text-slate-700">Belum ada hasil wawancara</p></td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    @endif
</div>
@push('scripts')
<script>
document.getElementById('new-question-type')?.addEventListener('change', (event) => {
    const options = document.querySelector('[data-choice-options]');
    const input = document.getElementById('new-options');
    const show = event.currentTarget.value === 'pilihan';
    options.classList.toggle('hidden', !show);
    input.required = show;
});
document.querySelectorAll('[data-question-type]').forEach((select) => {
    const form = select.closest('form');
    const options = form.querySelector('[data-question-options]');
    const input = options.querySelector('input');
    const updateOptions = () => {
        const show = select.value === 'pilihan';
        options.classList.toggle('hidden', !show);
        input.required = show;
    };
    select.addEventListener('change', updateOptions);
});
</script>
@endpush
@endsection