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

@section('content')
<style>
    :root { --navy:#0d1b2a; --gold:#b8962e; --gold-2:#d4af4f; --gold-light:#f7f0dc; --cream:#faf8f4; --cream-2:#f3efe6; --border:#e5e0d5; --muted:#6b6560; }
    .badge { font-size:10px; font-weight:600; padding:3px 9px; border-radius:20px; display:inline-block; }
    .badge-blue { background:#eff6ff; color:#1d4ed8; }
    .badge-gray { background:#f3f0eb; color:var(--muted); }
    .alert-success { background:#d1fae5; border:1px solid #a7f3d0; border-radius:12px; padding:12px 16px; font-size:13px; color:#065f46; margin-bottom:20px; }
    .filter-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
    .filter-group { display:flex; gap:8px; }
    .el-input { border:1px solid var(--border); border-radius:10px; padding:9px 14px; font-size:13px; background:#fff; color:var(--navy); outline:none; font-family:'Inter',sans-serif; transition:border-color .15s; }
    .el-input:focus { border-color:var(--gold-2); }
    .btn-filter { background:var(--cream-2); border:1px solid var(--border); border-radius:10px; padding:9px 16px; font-size:12px; font-weight:500; color:var(--navy); cursor:pointer; font-family:'Inter',sans-serif; }
    .btn-primary { display:inline-flex; align-items:center; gap:7px; background:var(--navy); color:#fff; font-size:12px; font-weight:500; padding:9px 18px; border-radius:10px; text-decoration:none; border:none; cursor:pointer; font-family:'Inter',sans-serif; }
    .btn-primary:hover { opacity:.87; }
    .panel { background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; }
    .el-table { width:100%; border-collapse:collapse; }
    .el-table th { font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; padding:11px 20px; text-align:left; background:var(--cream); border-bottom:1px solid var(--border); }
    .el-table th.center { text-align:center; }
    .el-table td { padding:13px 20px; font-size:13px; border-bottom:1px solid #f5f2ec; vertical-align:middle; }
    .el-table tr:last-child td { border-bottom:none; }
    .el-table tr:hover td { background:#faf8f4; }
    .action-group { display:flex; align-items:center; justify-content:flex-end; gap:2px; }
    .act-btn { font-size:11px; font-weight:500; padding:5px 10px; border-radius:7px; text-decoration:none; cursor:pointer; font-family:'Inter',sans-serif; border:none; background:transparent; transition:background .12s; display:inline-block; color:var(--navy); }
    .act-btn:hover { background:var(--cream-2); }
    .act-btn.blue { color:#3b82f6; }
    .act-btn.blue:hover { background:#eff6ff; }
    .act-btn.red { color:#dc2626; }
    .act-btn.red:hover { background:#fef2f2; }
    .form-inline { display:inline; }
</style>

@if(session('success'))
<div class="alert-success"><i class="fa fa-check-circle" style="margin-right:6px;"></i>{{ session('success') }}</div>
@endif

<div class="filter-bar">
    <form method="GET" class="filter-group">
        <input name="search" value="{{ request('search') }}" placeholder="Cari judul quiz..." class="el-input" style="width:240px;">
        <button type="submit" class="btn-filter"><i class="fa fa-magnifying-glass" style="font-size:11px; margin-right:5px;"></i>Cari</button>
    </form>
    <a href="{{ route('admin.quiz.create') }}" class="btn-primary">
        <i class="fa fa-plus" style="font-size:10px;"></i> Tambah Quiz
    </a>
</div>

<div class="panel">
    <table class="el-table">
        <thead><tr>
            <th>Quiz</th>
            <th>Kursus</th>
            <th class="center">Durasi</th>
            <th class="center">Nilai Lulus</th>
            <th class="center">Soal</th>
            <th style="text-align:right; padding-right:20px;">Aksi</th>
        </tr></thead>
        <tbody>
            @forelse($quizzes as $quiz)
            <tr>
                <td>
                    <div style="font-weight:500; color:var(--navy); margin-bottom:2px;">{{ $quiz->title }}</div>
                    <div style="font-size:11px; color:var(--muted);">Maks {{ $quiz->max_attempts }}× percobaan</div>
                </td>
                <td>
                    <div style="color:var(--navy); font-size:13px;">{{ $quiz->course->title }}</div>
                    <div style="font-size:11px; color:var(--muted);">{{ $quiz->course->teacher->name }}</div>
                </td>
                <td style="text-align:center; color:var(--muted); font-size:12px;">
                    {{ $quiz->duration_minutes ? $quiz->duration_minutes . ' mnt' : '—' }}
                </td>
                <td style="text-align:center;">
                    <span class="badge badge-blue">{{ $quiz->passing_score }}</span>
                </td>
                <td style="text-align:center; font-weight:500; color:var(--navy);">{{ $quiz->questions_count }}</td>
                <td>
                    <div class="action-group">
                        <a href="{{ route('admin.quiz.show', $quiz) }}" class="act-btn blue">Detail</a>
                        <a href="{{ route('admin.quiz.edit', $quiz) }}" class="act-btn">Edit</a>
                        <form class="form-inline" method="POST" action="{{ route('admin.quiz.destroy', $quiz) }}"
                              onsubmit="return confirm('Hapus quiz ini?')">
                            @csrf @method('DELETE')
                            <button type="submit" class="act-btn red">Hapus</button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="6" style="text-align:center; padding:48px; color:var(--muted); font-size:13px;">
                    <i class="fa fa-circle-question" style="font-size:24px; display:block; margin-bottom:8px; opacity:.3;"></i>
                    Belum ada quiz.
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
</div>
<div style="margin-top:16px;">{{ $quizzes->links() }}</div>

@endsection