@extends('frontend.layouts.app')

@section('title', 'Arithmetic - Practice Quiz 01 | Hi-Tech Pathshala')

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/quiz.css') }}">
@endpush

@section('content')
<div class="quiz-container">
    {{-- Header Banner --}}
    <header class="quiz-header">
        <div class="header-left">
            <div class="quiz-icon">
                <i class="bi bi-calculator"></i>
            </div>
            <div class="quiz-info">
                <span class="category-tag">CA Foundation – Business Mathematics</span>
                <h1 class="quiz-title">Arithmetic – Practice Quiz 01</h1>
                <div class="quiz-badges">
                    <span class="badge badge-easy"><i class="bi bi-bar-chart"></i> Easy</span>
                    <span class="badge-text">20 Questions</span>
                    <span class="badge-text"><i class="bi bi-star"></i> 15 Marks</span>
                </div>
            </div>
        </div>
        <div class="header-right">
            <div class="timer-wrapper">
                <div class="timer-info">
                    <span class="timer-label">Time Left</span>
                    <span class="timer-clock">14:32</span>
                </div>
                <div class="timer-progress">
                    <svg viewBox="0 0 36 36" class="circular-chart">
                        <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                        <path class="circle" stroke-dasharray="75, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" />
                    </svg>
                </div>
            </div>
            <button type="button" class="btn btn-outline-danger btn-end-quiz">End Quiz</button>
        </div>
    </header>

    {{-- Main Content Grid --}}
    <div class="quiz-layout">
        
        {{-- Left Sidebar: Question Navigation --}}
        <aside class="quiz-sidebar-left">
            <div class="card nav-card">
                <h3 class="card-title">Questions</h3>
                
                <div class="nav-legend-top">
                    <span class="dot-legend answered">Answered</span>
                    <span class="dot-legend current">Current</span>
                    <span class="dot-legend not-answered">Not Answered</span>
                    <span class="dot-legend marked">Marked</span>
                </div>

                <div class="question-grid-container">
                    <span class="grid-label">All (20)</span>
                    <div class="question-grid">
                        <button class="q-btn btn-answered">1</button>
                        <button class="q-btn btn-current">2</button>
                        <button class="q-btn">3</button>
                        <button class="q-btn">4</button>
                        <button class="q-btn">5</button>
                        <button class="q-btn">6</button>
                        <button class="q-btn">7</button>
                        <button class="q-btn">8</button>
                        <button class="q-btn">9</button>
                        <button class="q-btn btn-marked">10</button>
                        <button class="q-btn">11</button>
                        <button class="q-btn">12</button>
                        <button class="q-btn">13</button>
                        <button class="q-btn">14</button>
                        <button class="q-btn">15</button>
                        <button class="q-btn">16</button>
                        <button class="q-btn">17</button>
                        <button class="q-btn">18</button>
                        <button class="q-btn">19</button>
                        <button class="q-btn">20</button>
                    </div>
                </div>

                <div class="review-section">
                    <span class="grid-label"><i class="bi bi-bookmark"></i> Review Later (2)</span>
                    <div class="review-grid">
                        <button class="q-btn btn-marked">10</button>
                        <button class="q-btn btn-marked">17</button>
                    </div>
                </div>
            </div>
        </aside>

        {{-- Main Area: Question View --}}
        <main class="quiz-main">
            <div class="card question-card">
                <div class="question-header">
                    <span class="question-counter">Question 2 / 20</span>
                    <button type="button" class="btn-mark-review">
                        <i class="bi bi-bookmark"></i> Mark for Review
                    </button>
                </div>

                <div class="question-body">
                    <p class="question-text">
                        The average of 5 consecutive even numbers is 34.<br>
                        What is the smallest of these numbers?
                    </p>

                    <div class="options-list">
                        <label class="option-item">
                            <input type="radio" name="question_2" value="28">
                            <span class="option-badge">A</span>
                            <span class="option-text">28</span>
                        </label>

                        <label class="option-item">
                            <input type="radio" name="question_2" value="30">
                            <span class="option-badge">B</span>
                            <span class="option-text">30</span>
                        </label>

                        <label class="option-item active">
                            <input type="radio" name="question_2" value="32" checked>
                            <span class="option-badge">C</span>
                            <span class="option-text">32</span>
                        </label>

                        <label class="option-item">
                            <input type="radio" name="question_2" value="34">
                            <span class="option-badge">D</span>
                            <span class="option-text">34</span>
                        </label>
                    </div>
                </div>

                <div class="question-footer">
                    <button class="btn btn-outline-secondary btn-nav-prev"><i class="bi bi-arrow-left"></i> Previous</button>
                    <button class="btn btn-primary btn-nav-next">Next <i class="bi bi-arrow-right"></i></button>
                </div>
            </div>
        </main>

        {{-- Right Sidebar: Summary --}}
        <aside class="quiz-sidebar-right">
            <div class="card summary-card">
                <h3 class="card-title">Quiz Summary</h3>
                <ul class="summary-list">
                    <li>
                        <span><i class="bi bi-pencil-square"></i> Attempted</span>
                        <strong>1</strong>
                    </li>
                    <li>
                        <span><i class="bi bi-dash-square"></i> Not Attempted</span>
                        <strong>18</strong>
                    </li>
                    <li>
                        <span><i class="bi bi-bookmark"></i> Marked for Review</span>
                        <strong>2</strong>
                    </li>
                    <li>
                        <span><i class="bi bi-question-circle"></i> Total Questions</span>
                        <strong>20</strong>
                    </li>
                    <li>
                        <span><i class="bi bi-star"></i> Total Marks</span>
                        <strong>15</strong>
                    </li>
                </ul>
            </div>

            <div class="card legend-card">
                <h3 class="card-title">Legend</h3>
                <ul class="legend-list">
                    <li><span class="legend-dot answered"></span> Answered</li>
                    <li><span class="legend-dot current"></span> Current Question</li>
                    <li><span class="legend-dot not-answered"></span> Not Answered</li>
                    <li><span class="legend-dot marked"></span> Marked for Review</li>
                </ul>
            </div>
        </aside>

    </div>

    {{-- Footer Instructions Bar --}}
    <footer class="quiz-instructions-bar">
        <div class="instruction-icon">
            <i class="bi bi-lightbulb"></i>
        </div>
        <div class="instruction-content">
            <h4>Important Instructions</h4>
            <ul class="instruction-list">
                <li>• Do not refresh the page</li>
                <li>• Timer is running</li>
                <li>• Your answers are auto-saved</li>
                <li>• Submit before time runs out</li>
            </ul>
        </div>
    </footer>
</div>
@endsection