@extends('layouts.cbt')
@section('page-title', $bank->title)
@section('sidebar')@include('components.guru-sidebar')@endsection
@section('content')
<div class="page-actions mb-6">
    @if($bank->created_by === auth()->id())
    <a href="{{ route('guru.questions.create', $bank) }}" class="btn-sdn-primary">+ Tambah Soal</a>
    <a href="{{ route('guru.banks.import', $bank) }}" class="btn-sdn-secondary">Import Word</a>
    <a href="{{ route('guru.banks.edit', $bank) }}" class="btn-sdn-secondary">Edit Bank</a>
    <form method="POST" action="{{ route('guru.banks.destroy', $bank) }}" class="inline"
        onsubmit="return confirm('Hapus bank soal &quot;{{ $bank->title }}&quot; beserta {{ $bank->questions->count() }} soal?')">
        @csrf @method('DELETE')
        <button type="submit" class="btn-sdn-danger">Hapus Bank</button>
    </form>
    @endif
</div>
<div class="space-y-4">
    @foreach($bank->questions as $i => $q)
    <div class="card-sdn">
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-3">
            <div class="flex-1 min-w-0">
                <span class="text-xs font-bold text-sdn-orange">{{ $q->type->label() }} &bull; {{ $q->points }} poin</span>
                <p class="mt-2 font-semibold">{!! $q->content !!}</p>
                @if($q->image_path)
                <img src="{{ $q->imageUrl() }}" alt="Gambar soal" class="mt-3 w-full max-w-xs rounded-xl border border-gray-200">
                @endif
                @if($q->options->count())
                <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 gap-2">
                    @foreach($q->options as $opt)
                    <div class="text-sm p-2 rounded-lg {{ $opt->is_correct ? 'bg-green-50 border border-green-200' : 'bg-gray-50' }}">
                        <strong>{{ $opt->label }}.</strong> {{ $opt->content }}
                    </div>
                    @endforeach
                </div>
                @endif
            </div>
            @if($bank->created_by === auth()->id())
            <div class="flex gap-2 sm:ml-4 shrink-0">
                <a href="{{ route('guru.questions.edit', $q) }}" class="text-blue-600 text-sm font-semibold">Edit</a>
                <form method="POST" action="{{ route('guru.questions.destroy', $q) }}" onsubmit="return confirm('Hapus?')">@csrf @method('DELETE')<button class="text-red-500 text-sm">Hapus</button></form>
            </div>
            @endif
        </div>
    </div>
    @endforeach
</div>
@endsection