@extends('layouts.app')
@section('title','Ma trận đề')
@section('content')

<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h3 class="fw-bold mb-1">Ma trận và cấu trúc đề</h3>
        <div class="text-muted">{{ $quiz->title }}</div>
    </div>
    <a href="{{ route('quizzes.questions.index',$quiz->id) }}" class="btn btn-outline-secondary">Quay lại</a>
</div>

@if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
@if($errors->any())
<div class="alert alert-danger">
    <ul class="mb-0">@foreach($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
</div>
@endif

<div class="alert alert-info">
    Tạo ma trận theo <strong>chủ đề + mức độ + số câu + điểm mỗi câu</strong>,
    sau đó hệ thống sẽ chọn ngẫu nhiên câu hỏi từ ngân hàng.
</div>

<div class="card shadow-sm mb-4">
<div class="card-body">
<form action="{{ route('quizzes.blueprints.store',$quiz->id) }}" method="POST">
@csrf
<div class="row g-3">
    <div class="col-md-4">
        <label class="form-label">Chủ đề</label>
        <select name="question_topic_id" class="form-select" required>
            <option value="">-- Chọn chủ đề --</option>
            @foreach($topics as $topic)
                <option value="{{ $topic->id }}">{{ $topic->code }} - {{ $topic->name }}</option>
            @endforeach
        </select>
    </div>
    <div class="col-md-2">
        <label class="form-label">Mức độ</label>
        <select name="difficulty" class="form-select">
            <option>Dễ</option><option selected>Trung bình</option><option>Khó</option>
        </select>
    </div>
    <div class="col-md-2">
        <label class="form-label">Số câu</label>
        <input type="number" name="question_count" class="form-control" min="1" value="5">
    </div>
    <div class="col-md-2">
        <label class="form-label">Điểm/câu</label>
        <input type="number" step="0.01" name="score_per_question" class="form-control" min="0.01" value="1">
    </div>
    <div class="col-md-2 d-flex align-items-end">
        <button class="btn btn-primary w-100">Thêm cấu trúc</button>
    </div>
</div>
</form>
</div>
</div>

<div class="card shadow-sm mb-4">
<div class="card-body">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr><th>STT</th><th>Chủ đề</th><th>Mức độ</th><th>Số câu</th><th>Điểm/câu</th><th>Tổng điểm</th><th></th></tr>
</thead>
<tbody>
@php $sumQuestions=0; $sumScore=0; @endphp
@forelse($quiz->blueprints as $index=>$bp)
@php
$rowScore=$bp->question_count*$bp->score_per_question;
$sumQuestions += $bp->question_count;
$sumScore += $rowScore;
@endphp
<tr>
<td>{{ $index+1 }}</td>
<td>{{ $bp->topic->name ?? '' }}</td>
<td><span class="badge bg-info text-dark">{{ $bp->difficulty }}</span></td>
<td>{{ $bp->question_count }}</td>
<td>{{ $bp->score_per_question }}</td>
<td><strong>{{ $rowScore }}</strong></td>
<td class="text-end">
<form action="{{ route('quizzes.blueprints.destroy',[$quiz->id,$bp->id]) }}" method="POST" onsubmit="return confirm('Xóa dòng này?');">
@csrf @method('DELETE')
<button class="btn btn-sm btn-outline-danger">Xóa</button>
</form>
</td>
</tr>
@empty
<tr><td colspan="7" class="text-center text-muted py-4">Chưa có cấu trúc đề.</td></tr>
@endforelse
</tbody>
@if($quiz->blueprints->isNotEmpty())
<tfoot class="table-light"><tr><th colspan="3">Tổng</th><th>{{ $sumQuestions }} câu</th><th></th><th>{{ $sumScore }} điểm</th><th></th></tr></tfoot>
@endif
</table>
</div>
</div>

<div class="card shadow-sm">
<div class="card-body">
<form action="{{ route('quizzes.blueprints.generate',$quiz->id) }}" method="POST" onsubmit="return confirm('Sinh đề ngẫu nhiên theo ma trận?');">
@csrf
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" name="replace_existing" value="1" id="replace" checked>
<label class="form-check-label" for="replace">Xóa câu hỏi hiện có và sinh lại toàn bộ đề</label>
</div>
<button class="btn btn-success" {{ $quiz->blueprints->isEmpty() ? 'disabled' : '' }}>
<i class="bi bi-shuffle me-1"></i> Sinh đề ngẫu nhiên
</button>
</form>
</div>
</div>
@endsection
