@extends('layouts.admin')

@section('title', 'Kelola Soal Kuis Level 1-5')

@section('content')
<div class="card border-0 shadow-sm rounded-4 p-4 card-accent-red">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <h5 class="fw-bold mb-1 text-dark"><i class="fa-solid fa-circle-question text-danger me-2"></i> Bank Soal Kuis</h5>
            <small class="text-muted">Kelola soal kuis edukasi pengelolaan sampah untuk level 1 sampai 5</small>
        </div>
        <a href="{{ route('admin.quiz.create') }}" class="btn btn-danger rounded-pill fw-bold px-4 py-2 shadow-sm" style="background: linear-gradient(90deg, #ef4444 0%, #dc2626 100%); border: none;">
            <i class="fa-solid fa-plus me-1"></i> Tambah Soal Kuis
        </a>
    </div>

    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width: 100px;" class="text-center">Level</th>
                    <th>Pertanyaan</th>
                    <th>Pilihan Jawaban (A / B / C / D)</th>
                    <th style="width: 110px;" class="text-center">Kunci</th>
                    <th class="text-end" style="width: 200px;">Aksi</th>
                </tr>
            </thead>
            <tbody>
                @forelse($questions as $q)
                <tr>
                    <td class="text-center">
                        <span class="badge bg-danger px-3 py-2">Level {{ $q->level }}</span>
                    </td>
                    <td>
                        <strong class="text-dark d-block" style="font-size: 0.95rem;">{{ $q->question_text }}</strong>
                        <small class="text-muted">{{ Str::limit($q->explanation, 75) }}</small>
                    </td>
                    <td>
                        <div class="small text-secondary">
                            <span class="me-2"><strong>A:</strong> {{ $q->option_a }}</span>
                            <span class="me-2"><strong>B:</strong> {{ $q->option_b }}</span>
                        </div>
                        <div class="small text-secondary mt-1">
                            <span class="me-2"><strong>C:</strong> {{ $q->option_c }}</span>
                            <span class="me-2"><strong>D:</strong> {{ $q->option_d }}</span>
                        </div>
                    </td>
                    <td class="text-center">
                        <span class="badge bg-success font-heading fs-6 px-3 py-1">{{ $q->correct_option }}</span>
                    </td>
                    <td class="text-end">
                        <div class="d-inline-flex gap-2">
                            <a href="{{ route('admin.quiz.edit', $q->id) }}" class="btn btn-sm btn-outline-warning rounded-pill px-3">
                                <i class="fa-solid fa-pen me-1"></i> Edit
                            </a>
                            <form action="{{ route('admin.quiz.destroy', $q->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus soal ini?')">
                                @csrf @method('DELETE')
                                <button class="btn btn-sm btn-outline-danger rounded-pill px-3">
                                    <i class="fa-solid fa-trash me-1"></i> Hapus
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center text-muted py-5">
                        <i class="fa-solid fa-folder-open fs-2 mb-2 text-muted"></i>
                        <p class="mb-0">Belum ada soal kuis. Klik tombol di atas untuk menambah.</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-center mt-4">
        {{ $questions->links() }}
    </div>
</div>
@endsection