@extends('layouts.guru')

@section('title', 'Materi & Unit — ZAXARA Guru')

@php
    $existingSoal = $editingUnit?->tes->first()?->soal->first();
    $existingTes = $editingUnit?->tes->first();
@endphp

@section('content')
<h1 style="font-size:20px;margin:0 0 6px;">Materi &amp; Unit</h1>
<p style="font-size:13px;color:var(--ink-soft);margin-top:0;">
    Satu model untuk bacaan pelajaran umum maupun hafalan — bedanya hanya jenisnya (lihat PROJECT-SPEC.md §2).
</p>

@if (session('status'))
    <div class="status-banner">{{ session('status') }}</div>
@endif
@if ($errors->any())
    <div class="card" style="border-color:var(--red);margin-bottom:16px;">
        <div class="label" style="color:var(--red);margin-bottom:6px;">Periksa kembali isian:</div>
        <ul style="margin:0;padding-left:18px;font-size:13px;color:var(--red);">
            @foreach ($errors->all() as $e)
                <li>{{ $e }}</li>
            @endforeach
        </ul>
    </div>
@endif

<div style="display:flex;gap:16px;align-items:flex-start;">

    {{-- Panel kiri: daftar Materi --}}
    <div style="width:260px;flex-shrink:0;display:flex;flex-direction:column;gap:12px;">
        <details class="card" style="padding:14px;">
            <summary style="cursor:pointer;font-weight:700;font-size:13.5px;">+ Tambah Materi</summary>
            <form method="POST" action="{{ route('guru.materi.store') }}" style="display:flex;flex-direction:column;gap:10px;margin-top:12px;">
                @csrf
                <input class="input" name="judul" placeholder="Judul materi" required value="{{ old('judul') }}">
                <select class="input" name="jenis" required>
                    <option value="">Jenis&hellip;</option>
                    <option value="hafalan" @selected(old('jenis') === 'hafalan')>Hafalan</option>
                    <option value="bacaan" @selected(old('jenis') === 'bacaan')>Bacaan</option>
                </select>
                <button class="btn btn-primary btn-sm" type="submit">Simpan Materi</button>
            </form>
        </details>

        @forelse ($materiList as $m)
            <a href="{{ route('guru.materi.index', ['materi' => $m->id]) }}"
               style="text-decoration:none;color:inherit;">
                <div class="card" style="padding:14px; {{ $selectedMateri?->id === $m->id ? 'border-color:var(--accent);background:var(--accent-soft);' : '' }}">
                    <div style="display:flex;justify-content:space-between;">
                        <div class="h3" style="font-size:13.5px;font-weight:700;">{{ $m->judul }}</div>
                        <span class="chip {{ $m->jenis === 'hafalan' ? 'chip-blue' : 'chip-neutral' }}">{{ ucfirst($m->jenis) }}</span>
                    </div>
                    <div class="caption" style="margin-top:4px;">{{ $m->unit_count }} unit</div>
                </div>
            </a>
        @empty
            <p style="font-size:13px;color:var(--ink-faint);">Belum ada materi.</p>
        @endforelse
    </div>

    @if ($selectedMateri)
        {{-- Panel tengah: daftar Unit --}}
        <div style="width:260px;flex-shrink:0;">
            <div class="card" style="padding:6px 8px;">
                <div style="display:flex;align-items:center;justify-content:space-between;padding:10px 10px 6px;">
                    <div class="h3" style="font-size:13.5px;">Unit &middot; {{ $selectedMateri->judul }}</div>
                </div>
                @forelse ($selectedMateri->unit as $u)
                    <a href="{{ route('guru.materi.index', ['materi' => $selectedMateri->id, 'unit' => $u->id]) }}"
                       style="text-decoration:none;color:inherit;display:block;">
                        <div style="padding:10px;border-radius:10px;{{ $editingUnit?->id === $u->id ? 'background:var(--accent-soft);color:var(--accent);font-weight:700;' : '' }}">
                            {{ $u->urutan }}. {{ $u->judul }}
                        </div>
                    </a>
                @empty
                    <p style="font-size:12.5px;color:var(--ink-faint);padding:10px;">Belum ada unit.</p>
                @endforelse
                <a href="{{ route('guru.materi.index', ['materi' => $selectedMateri->id]) }}"
                   style="display:block;padding:10px;font-size:12.5px;color:var(--accent);font-weight:700;text-decoration:none;">
                    + Unit baru
                </a>
            </div>
        </div>

        {{-- Panel kanan: form Unit --}}
        <div class="card" style="flex:1;padding:22px;min-width:0;">
            <div class="h3" style="margin-bottom:14px;">
                {{ $editingUnit ? 'Edit Unit — '.$editingUnit->judul : 'Unit Baru' }}
            </div>

            <form method="POST"
                  action="{{ $editingUnit ? route('guru.unit.update', $editingUnit) : route('guru.unit.store', $selectedMateri) }}"
                  style="display:flex;flex-direction:column;gap:14px;">
                @csrf
                @if ($editingUnit) @method('PUT') @endif

                <div>
                    <div class="label">Judul Unit</div>
                    <input class="input" name="judul" required value="{{ old('judul', $editingUnit?->judul) }}">
                </div>

                <div>
                    <div class="label">Konten Teks</div>
                    <textarea class="input" name="konten_teks" rows="5" required>{{ old('konten_teks', $editingUnit?->konten_teks) }}</textarea>
                </div>

                <div style="display:flex;gap:16px;">
                    <div style="flex:1;">
                        <div class="label">Jenis Tes</div>
                        <select class="input" name="jenis_tes" required>
                            @php $curTes = old('jenis_tes', $existingTes?->jenis); @endphp
                            <option value="kuis_pemahaman" @selected($curTes === 'kuis_pemahaman')>Kuis Pemahaman</option>
                            <option value="sambung_ayat" @selected($curTes === 'sambung_ayat')>Sambung Ayat</option>
                            <option value="kata_hilang" @selected($curTes === 'kata_hilang')>Kata Hilang</option>
                            <option value="susun_potongan" @selected($curTes === 'susun_potongan')>Susun Potongan</option>
                            <option value="ayat_sekitar" @selected($curTes === 'ayat_sekitar')>Ayat Sekitar</option>
                        </select>
                    </div>
                    <div style="flex:1;">
                        <div class="label">Durasi Minimum Sesi (detik)</div>
                        <input class="input" type="number" name="durasi_minimum_detik" min="10" max="3600"
                               value="{{ old('durasi_minimum_detik', $editingUnit?->durasiMinimumDetik() ?? 60) }}">
                    </div>
                </div>

                <div class="card" style="background:var(--surface-alt);border-style:dashed;padding:14px;display:flex;flex-direction:column;gap:10px;">
                    <div class="label">Soal (Pilihan Ganda)</div>
                    <p class="caption" style="margin:0;">
                        Skeleton ini baru mendukung satu soal pilihan ganda per unit. Editor multi-soal & tipe
                        susun/lengkapi menyusul — lihat backend/README.md.
                    </p>
                    <input class="input" name="soal_teks" placeholder="Teks soal"
                           value="{{ old('soal_teks', $existingSoal->konten['teks'] ?? '') }}" required>

                    @php $curPilihan = old('pilihan', $existingSoal->konten['pilihan'] ?? ['', '', '', '']); @endphp
                    @php $curJawaban = old('jawaban_index', $existingSoal->konten['jawaban_index'] ?? null); @endphp
                    @foreach (range(0, 3) as $i)
                        <div style="display:flex;align-items:center;gap:8px;">
                            <input type="radio" name="jawaban_index" value="{{ $i }}" @checked((string) $curJawaban === (string) $i) required>
                            <input class="input" name="pilihan[]" placeholder="Pilihan {{ chr(65 + $i) }}"
                                   value="{{ $curPilihan[$i] ?? '' }}" required>
                        </div>
                    @endforeach
                    <div class="caption">Tandai bulatan di kiri sebagai jawaban benar.</div>
                </div>

                <div style="display:flex;gap:10px;justify-content:flex-end;">
                    <button type="submit" class="btn btn-primary">{{ $editingUnit ? 'Simpan Perubahan' : 'Simpan Unit' }}</button>
                </div>
            </form>
        </div>
    @else
        <div class="card" style="flex:1;padding:24px;text-align:center;color:var(--ink-faint);">
            Buat materi pertama lewat panel kiri untuk mulai menambah unit.
        </div>
    @endif
</div>
@endsection