@extends('layouts.student')
@section('title', 'Manajemen Quiz')
@section('header', 'Manajemen Quiz')

@section('content')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');
    .edu-font-display { font-family: 'Playfair Display', serif; }
    .edu-font-body    { font-family: 'DM Sans', sans-serif; }
    :root {
        --navy:#0f1e38; --navy-mid:#1a3259; --gold:#c9a84c; --gold-light:#f5e9cc;
        --cream:#faf8f4; --text-muted:#6b7280; --border:#e8e4dc;
    }
    .section-label { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted); font-weight:500; }
    .card { background:white; border:1px solid var(--border); border-radius:20px; padding:1.5rem; box-shadow:0 1px 12px rgba(0,0,0,.04); }
    .tbl-wrap { border:1px solid var(--border); border-radius:16px; overflow:hidden; }
    .tbl-head th { background:var(--cream); padding:.75rem 1.25rem; font-size:10px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--text-muted); text-align:left; border-bottom:1px solid var(--border); }
    .tbl-row { border-bottom:1px solid var(--border); transition:background .12s; }
    .tbl-row:last-child { border-bottom:none; }
    .tbl-row:hover { background:var(--cream); }
    .tbl-row td { padding:.875rem 1.25rem; font-size:13px; vertical-align:middle; }
    .badge { font-size:11px; font-weight:600; padding:.25rem .75rem; border-radius:100px; }
    .badge-blue   { background:#dbeafe; color:#1e40af; }
    .badge-gray   { background:#f3f4f6; color:#6b7280; }
    .btn-primary { display:inline-flex; align-items:center; gap:6px; background:var(--navy); color:white; font-size:13px; font-weight:600; padding:.625rem 1.25rem; border-radius:14px; text-decoration:none; transition:opacity .2s; border:none; cursor:pointer; }
    .btn-primary:hover { opacity:.87; }
    .btn-outline { display:inline-flex; align-items:center; gap:6px; background:white; color:var(--navy); font-size:13px; font-weight:500; padding:.55rem 1rem; border-radius:12px; border:1.5px solid var(--border); text-decoration:none; transition:background .15s; }
    .btn-outline:hover { background:var(--cream); }
    .search-field { border:1.5px solid var(--border); border-radius:12px; padding:.55rem 1rem; font-size:13px; color:#374151; background:white; outline:none; transition:border-color .15s; font-family:'DM Sans',sans-serif; }
    .search-field:focus { border-color:#c9a84c; }
    .action-link { font-size:12px; font-weight:600; padding:.35rem .75rem; border-radius:9px; text-decoration:none; transition:all .15s; }
    .action-link.view  { color:#1d4ed8; } .action-link.view:hover  { background:#eff6ff; }
    .action-link.edit  { color:var(--text-muted); } .action-link.edit:hover  { background:#f3f4f6; color:#111827; }
    .action-link.del   { color:#dc2626; } .action-link.del:hover   { background:#fff1f2; }
    .empty-state { text-align:center; padding:4rem 0; color:var(--text-muted); }
    .passing-pill { display:inline-flex; align-items:center; justify-content:center; min-width:38px; height:26px; border-radius:100px; font-size:11px; font-weight:700; background:var(--gold-light); color:#92742a; }
</style>

<div class="edu-font-body space-y-5">

    {{-- Header --}}
    <div class="card" style="padding:1.25rem 1.5rem;">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
            <div>
                <span class="section-label">Konten</span>
                <h2 class="edu-font-display text-2xl font-bold mt-0.5" style="color:var(--navy);">Manajemen Quiz</h2>
            </div>
            <a href="{{ route('admin.quiz.create') }}" class="btn-primary">
                <i class="fa fa-plus" style="font-size:11px"></i> Tambah Quiz
            </a>
        </div>
    </div>

    @if(session('success'))
    <div style="background:#f0fdf4;border:1px solid #bbf7d0;color:#166534;border-radius:14px;padding:.875rem 1.25rem;font-size:13px;display:flex;align-items:center;gap:10px;">
        <i class="fa fa-check-circle"></i> {{ session('success') }}
    </div>
    @endif

    {{-- Filter Bar --}}
    <div style="display:flex;align-items:center;gap:.75rem;">
        <form method="GET" style="display:flex;gap:.5rem;flex:1;">
            <div style="position:relative;flex:1;max-width:280px;">
                <i class="fa fa-search" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--text-muted);"></i>
                <input name="search" value="{{ request('search') }}" placeholder="Cari judul quiz..."
                       class="search-field" style="padding-left:2.25rem;width:100%;box-sizing:border-box;">
            </div>
            <button type="submit" class="btn-outline">
                <i class="fa fa-filter" style="font-size:11px"></i> Filter
            </button>
        </form>
    </div>

    {{-- Table --}}
    <div class="tbl-wrap">
        <table class="w-full">
            <thead class="tbl-head">
                <tr>
                    <th>Quiz</th>
                    <th>Kursus</th>
                    <th style="text-align:center;">Durasi</th>
                    <th style="text-align:center;">Passing</th>
                    <th style="text-align:center;">Soal</th>
                    <th style="text-align:right;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($quizzes as $quiz)
                <tr class="tbl-row">
                    <td>
                        <p class="font-semibold" style="color:var(--navy);">{{ $quiz->title }}</p>
                        <p class="text-xs mt-0.5" style="color:var(--text-muted);">Maks {{ $quiz->max_attempts }}× percobaan</p>
                    </td>
                    <td>
                        <p style="color:#374151;">{{ $quiz->course->title }}</p>
                        <p class="text-xs mt-0.5" style="color:var(--text-muted);">{{ $quiz->course->teacher->name }}</p>
                    </td>
                    <td style="text-align:center;color:var(--text-muted);">
                        {{ $quiz->duration_minutes ? $quiz->duration_minutes . ' mnt' : '–' }}
                    </td>
                    <td style="text-align:center;">
                        <span class="passing-pill">{{ $quiz->passing_score }}</span>
                    </td>
                    <td style="text-align:center;">
                        <span class="badge badge-gray">{{ $quiz->questions_count }}</span>
                    </td>
                    <td style="text-align:right;">
                        <div style="display:flex;align-items:center;justify-content:flex-end;gap:4px;">
                            <a href="{{ route('admin.quiz.show', $quiz) }}" class="action-link view">Detail</a>
                            <a href="{{ route('admin.quiz.edit', $quiz) }}" class="action-link edit">Edit</a>
                            <form method="POST" action="{{ route('admin.quiz.destroy', $quiz) }}"
                                  onsubmit="return confirm('Hapus quiz ini?')" style="display:inline;">
                                @csrf @method('DELETE')
                                <button type="submit" class="action-link del" style="background:none;border:none;cursor:pointer;font-family:inherit;">Hapus</button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6">
                        <div class="empty-state">
                            <div style="width:52px;height:52px;background:var(--cream);border-radius:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;">
                                <i class="fa fa-question-circle" style="font-size:22px;color:var(--border);"></i>
                            </div>
                            <p style="font-size:14px;">Belum ada quiz.</p>
                            <a href="{{ route('admin.quiz.create') }}" style="font-size:12px;color:var(--gold);text-decoration:none;font-weight:600;margin-top:.5rem;display:inline-block;">+ Tambah Quiz Pertama</a>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div>{{ $quizzes->links() }}</div>
</div>
@endsection