@extends('frontend.layouts.app')

@section('title', 'Quizzes | Hi-Tech Pathshala')

@section(
    'meta_description',
    'Practice chapter-wise and topic-wise quizzes to test your knowledge and improve your score.'
)

@push('styles')
    <link rel="stylesheet" href="{{ asset('assets/css/quiz.css') }}">
@endpush
@section('content')
<div class="quiz-page">
    <!-- ==========================================
         HERO SECTION
         ========================================== -->
    <section class="quiz-hero">
        <!-- Floating Accent Elements -->
        <div class="dot-grid-left"></div>
        <div class="hero-bubble"></div>
        <div class="floating-qmark qmark-1">?</div>
        <div class="floating-qmark qmark-2">?</div>
        <div class="floating-qmark qmark-3">?</div>
        <div class="floating-qmark qmark-4">?</div>

        <div class="quiz-hero-container">

        <nav aria-label="breadcrumb">
                        <ol class="notes-breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Home</a></li>
                            <li class="breadcrumb-item"><a href="#">Free Resources</a></li>
                            <li class="breadcrumb-item active" aria-current="page">Quizzes</li>
                        </ol>
                    </nav>
            <div class="quiz-hero-grid">
                <!-- Left Content -->
                <div class="hero-text-content">
                    <div class="hero-title-row">
                        <div class="title-q-icon">?</div>
                        <h1 class="hero-title">Quizzes</h1>
                    </div>
                    <p class="hero-subtitle">
                        Practice chapter-wise and topic-wise quizzes to test your knowledge and improve your score.
                    </p>

                    <!-- Stats Bar -->
                    <div class="hero-stats-bar">
                        <div class="stat-card">
                            <div class="stat-icon purple"><i class="fas fa-file-alt"></i></div>
                            <div class="stat-info">
                                <strong>25,000+</strong>
                                <span>Quizzes Available</span>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon green"><i class="fas fa-trophy"></i></div>
                            <div class="stat-info">
                                <strong>50+</strong>
                                <span>Exam Categories</span>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon blue"><i class="fas fa-chart-line"></i></div>
                            <div class="stat-info">
                                <strong>2M+</strong>
                                <span>Quizzes Attempted</span>
                            </div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-icon orange"><i class="fas fa-thumbs-up"></i></div>
                            <div class="stat-info">
                                <strong>95%</strong>
                                <span>Students Recommend</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Side Asset Image -->
                <div class="hero-illustration-wrapper">
                    <img src="{{ asset('assets/images/quiz/hero.png') }}" alt="Quiz Hero" class="quiz-hero-img">
                </div>
            </div>
        </div>

        <!-- Bottom Wave -->
        <div class="hero-wavy-bottom">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0,32L120,42.7C240,53,480,75,720,74.7C960,75,1200,53,1320,42.7L1440,32L1440,120L1320,120C1200,120,960,120,720,120C480,120,240,120,120,120L0,120Z" fill="#F4F6FB"></path>
            </svg>
        </div>
    </section>

    <!-- ==========================================
         MAIN CONTENT AREA
         ========================================== -->
    <main class="quiz-main-container">
        <!-- Floating Sticky Top Filter Card -->
        <div class="top-filter-bar sticky-topbar">
            <div class="filter-col">
                <label>Select Exam</label>
                <select>
                    <option>All Exams</option>
                </select>
            </div>
            <div class="filter-col">
                <label>Select Subject</label>
                <select>
                    <option>All Subjects</option>
                </select>
            </div>
            <div class="filter-col">
                <label>Select Level</label>
                <select>
                    <option>All Levels</option>
                </select>
            </div>
            <div class="filter-col">
                <label>Difficulty Level</label>
                <select>
                    <option>All</option>
                </select>
            </div>
            <div class="filter-actions">
                <button class="btn-apply-filters"><i class="fas fa-filter"></i> Apply Filters</button>
                <a href="#" class="btn-clear-filters">Clear All</a>
            </div>
        </div>

        <!-- Layout Grid -->
        <div class="quiz-layout-grid">
            <!-- Fixed Left Sidebar (Scrollable along page, no inner scrollbar) -->
            <aside class="sticky-sidebar">
                <div class="sidebar-box">
                    <div class="sidebar-header">
                        <i class="fas fa-list"></i> Categories
                    </div>
                    <ul class="category-list">
                        <li class="active">
                            <a href="#"><span class="cat-name"><i class="fas fa-th-large"></i> All Categories</span> <span class="badge">25488</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="cat-name"><i class="fas fa-user-graduate"></i> CA Foundation</span> <span class="badge">3421</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="cat-name"><i class="fas fa-user-graduate"></i> CA Intermediate</span> <span class="badge">4210</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="cat-name"><i class="fas fa-graduation-cap"></i> CA Final</span> <span class="badge">3186</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="cat-name"><i class="fas fa-briefcase"></i> CS Executive</span> <span class="badge">2154</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="cat-name"><i class="fas fa-calculator"></i> CMA Foundation</span> <span class="badge">1987</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="cat-name"><i class="fas fa-calculator"></i> CMA Intermediate</span> <span class="badge">1743</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="cat-name"><i class="fas fa-atom"></i> JEE Main</span> <span class="badge">2654</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="cat-name"><i class="fas fa-stethoscope"></i> NEET</span> <span class="badge">2412</span></a>
                        </li>
                        <li>
                            <a href="#"><span class="cat-name"><i class="fas fa-building"></i> SSC</span> <span class="badge">1721</span></a>
                        </li>
                    </ul>
                    <a href="#" class="sidebar-view-more">View More <i class="fas fa-chevron-down"></i></a>
                </div>
            </aside>

            <!-- Cards Area (Scrolls Naturally) -->
            <section class="cards-section">
                <div class="cards-header-row">
                    <h2>All Quizzes</h2>
                    <div class="header-right-meta">
                        <span class="showing-txt">Showing 1-12 of 25488</span>
                        <div class="sort-wrapper">
                            <label>Sort By:</label>
                            <select>
                                <option>Latest</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- 4 Column Cards Grid -->
                <div class="quiz-cards-grid">
                    <!-- Card 1 -->
                    <div class="quiz-card">
                        <button class="btn-bookmark"><i class="far fa-bookmark"></i></button>
                        <span class="badge-tag tag-purple">CA FOUNDATION</span>
                        <div class="card-body-row">
                            <div class="card-text">
                                <h3 class="quiz-card-title">Business Mathematics Basic Concepts</h3>
                                <div class="quiz-specs">20 Questions • 15 Min</div>
                                <div class="quiz-difficulty diff-easy"><i class="fas fa-chart-bar"></i> Easy</div>
                            </div>
                            <div class="card-icon-box bg-purple-light">
                                <i class="fas fa-calculator icon-purple"></i>
                            </div>
                        </div>
                        <a href="/quiz/start" class="btn-quiz-action bg-purple-btn">Start Quiz <i class="fas fa-chevron-right"></i></a>
                    </div>

                    <!-- Card 2 -->
                    <div class="quiz-card">
                        <button class="btn-bookmark"><i class="far fa-bookmark"></i></button>
                        <span class="badge-tag tag-blue">CA INTERMEDIATE</span>
                        <div class="card-body-row">
                            <div class="card-text">
                                <h3 class="quiz-card-title">Accounting Process MCQs</h3>
                                <div class="quiz-specs">25 Questions • 20 Min</div>
                                <div class="quiz-difficulty diff-medium"><i class="fas fa-chart-bar"></i> Medium</div>
                            </div>
                            <div class="card-icon-box bg-blue-light">
                                <i class="fas fa-file-invoice-dollar icon-blue"></i>
                            </div>
                        </div>
                        <a href="/quiz/start" class="btn-quiz-action bg-blue-btn">Start Quiz <i class="fas fa-chevron-right"></i></a>
                    </div>

                    <!-- Card 3 -->
                    <div class="quiz-card">
                        <button class="btn-bookmark"><i class="far fa-bookmark"></i></button>
                        <span class="badge-tag tag-green">CA FINAL</span>
                        <div class="card-body-row">
                            <div class="card-text">
                                <h3 class="quiz-card-title">Financial Reporting Case Based</h3>
                                <div class="quiz-specs">15 Questions • 25 Min</div>
                                <div class="quiz-difficulty diff-hard"><i class="fas fa-chart-bar"></i> Hard</div>
                            </div>
                            <div class="card-icon-box bg-green-light">
                                <i class="fas fa-chart-line icon-green"></i>
                            </div>
                        </div>
                        <a href="/quiz/start" class="btn-quiz-action bg-green-btn">Start Quiz <i class="fas fa-chevron-right"></i></a>
                    </div>

                    <!-- Card 4 -->
                    <div class="quiz-card">
                        <button class="btn-bookmark"><i class="far fa-bookmark"></i></button>
                        <span class="badge-tag tag-orange">CS EXECUTIVE</span>
                        <div class="card-body-row">
                            <div class="card-text">
                                <h3 class="quiz-card-title">Company Law Chapter Quiz</h3>
                                <div class="quiz-specs">20 Questions • 15 Min</div>
                                <div class="quiz-difficulty diff-easy"><i class="fas fa-chart-bar"></i> Easy</div>
                            </div>
                            <div class="card-icon-box bg-orange-light">
                                <i class="fas fa-gavel icon-orange"></i>
                            </div>
                        </div>
                        <a href="/quiz/start" class="btn-quiz-action bg-orange-btn">Start Quiz <i class="fas fa-chevron-right"></i></a>
                    </div>

                    <!-- Card 5 -->
                    <div class="quiz-card">
                        <button class="btn-bookmark"><i class="far fa-bookmark"></i></button>
                        <span class="badge-tag tag-teal">CMA FOUNDATION</span>
                        <div class="card-body-row">
                            <div class="card-text">
                                <h3 class="quiz-card-title">Fundamentals of Economics</h3>
                                <div class="quiz-specs">20 Questions • 15 Min</div>
                                <div class="quiz-difficulty diff-easy"><i class="fas fa-chart-bar"></i> Easy</div>
                            </div>
                            <div class="card-icon-box bg-teal-light">
                                <i class="fas fa-chart-pie icon-teal"></i>
                            </div>
                        </div>
                        <a href="/quiz/start" class="btn-quiz-action bg-teal-btn">Start Quiz <i class="fas fa-chevron-right"></i></a>
                    </div>

                    <!-- Card 6 -->
                    <div class="quiz-card">
                        <button class="btn-bookmark"><i class="far fa-bookmark"></i></button>
                        <span class="badge-tag tag-pink">JEE MAIN</span>
                        <div class="card-body-row">
                            <div class="card-text">
                                <h3 class="quiz-card-title">Physics - Laws of Motion</h3>
                                <div class="quiz-specs">30 Questions • 30 Min</div>
                                <div class="quiz-difficulty diff-medium"><i class="fas fa-chart-bar"></i> Medium</div>
                            </div>
                            <div class="card-icon-box bg-pink-light">
                                <i class="fas fa-atom icon-pink"></i>
                            </div>
                        </div>
                        <a href="/quiz/start" class="btn-quiz-action bg-pink-btn">Start Quiz <i class="fas fa-chevron-right"></i></a>
                    </div>

                    <!-- Card 7 -->
                    <div class="quiz-card">
                        <button class="btn-bookmark"><i class="far fa-bookmark"></i></button>
                        <span class="badge-tag tag-navy">NEET</span>
                        <div class="card-body-row">
                            <div class="card-text">
                                <h3 class="quiz-card-title">Human Physiology Quiz</h3>
                                <div class="quiz-specs">25 Questions • 20 Min</div>
                                <div class="quiz-difficulty diff-medium"><i class="fas fa-chart-bar"></i> Medium</div>
                            </div>
                            <div class="card-icon-box bg-navy-light">
                                <i class="fas fa-heartbeat icon-navy"></i>
                            </div>
                        </div>
                        <a href="/quiz/start" class="btn-quiz-action bg-navy-btn">Start Quiz <i class="fas fa-chevron-right"></i></a>
                    </div>

                    <!-- Card 8 -->
                    <div class="quiz-card">
                        <button class="btn-bookmark"><i class="far fa-bookmark"></i></button>
                        <span class="badge-tag tag-purple">SSC</span>
                        <div class="card-body-row">
                            <div class="card-text">
                                <h3 class="quiz-card-title">General Awareness Quiz</h3>
                                <div class="quiz-specs">20 Questions • 15 Min</div>
                                <div class="quiz-difficulty diff-easy"><i class="fas fa-chart-bar"></i> Easy</div>
                            </div>
                            <div class="card-icon-box bg-purple-light">
                                <i class="fas fa-globe icon-purple"></i>
                            </div>
                        </div>
                        <a href="/quiz/start" class="btn-quiz-action bg-purple-btn">Start Quiz <i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </section>
        </div>

        <!-- Bottom Challenge Banner Card -->
        <div class="quiz-challenge-banner">
            <div class="banner-left">
                <div class="banner-target-icon"><i class="fas fa-bullseye"></i></div>
                <div class="banner-text">
                    <h3>Challenge Yourself Daily!</h3>
                    <p>Attempt daily quizzes and track your progress to stay ahead of the competition.</p>
                </div>
            </div>
            <a href="/quiz/start" class="btn-daily-challenge">Daily Quiz Challenge <i class="fas fa-chevron-right"></i></a>
        </div>
    </main>
</div>
@endsection