@extends('frontend.layouts.app')

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

@section(
    'meta_description',
    'Explore high-quality study materials, quizzes, and video courses absolutely free on Hi-Tech Pathshala.'
)

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

@section('content')
<main class="notes-page">

    <!-- HERO SECTION -->
    <section class="notes-hero">
        <div class="notes-hero-container">
            <div class="notes-hero-grid">
                
                <!-- Left Hero Content -->
                <div class="notes-hero-content">
                    <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">Notes</li>
                        </ol>
                    </nav>

                    <h1 class="notes-hero-title">Notes</h1>
                    <p class="notes-hero-desc">
                        Chapter-wise notes prepared by experts to help you understand concepts better and build a strong foundation.
                    </p>

                    <!-- Hero Stats Bar -->
                    <div class="notes-stats-bar">
                        <div class="stat-item">
                            <div class="stat-icon purple"><i class="fa-solid fa-file-lines"></i></div>
                            <div class="stat-info">
                                <strong>10,000+</strong>
                                <span>Notes</span>
                            </div>
                        </div>

                        <div class="stat-item">
                            <div class="stat-icon blue"><i class="fa-solid fa-layer-group"></i></div>
                            <div class="stat-info">
                                <strong>All Subjects</strong>
                                <span>Covered</span>
                            </div>
                        </div>

                        <div class="stat-item">
                            <div class="stat-icon green"><i class="fa-solid fa-user-check"></i></div>
                            <div class="stat-info">
                                <strong>Expert</strong>
                                <span>Verified</span>
                            </div>
                        </div>

                        <div class="stat-item">
                            <div class="stat-icon yellow"><i class="fa-solid fa-lock-open"></i></div>
                            <div class="stat-info">
                                <strong>100%</strong>
                                <span>Free Access</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Hero Image with Purple Bubble and Half Yellow Dots -->
                <div class="notes-hero-illustration">
                    <div class="purple-bg-bubble"></div>
                    <div class="yellow-dots-accent"></div>
                    <img src="{{ asset('assets/images/notes/hero.png') }}" alt="Notes Illustration" class="notes-3d-img">
                </div>

            </div>
        </div>

        <!-- Hero Wavy Bottom Border -->
        <div class="hero-wavy-bottom">
            <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
                <path d="M0 0C240 70 480 110 720 90C960 70 1200 10 1440 50V120H0V0Z" fill="#F4F6FB"/>
            </svg>
        </div>
    </section>

    <!-- MAIN BODY SECTION -->
    <div class="notes-main-wrapper">
        <div class="notes-container">

            <!-- OVERLAYING TOP FILTER BAR (FIXED/STICKY) -->
            <div class="notes-filter-card sticky-top-filter">
                <div class="filter-group">
                    <label>Select Exam</label>
                    <select class="form-select">
                        <option selected>All Exams</option>
                        <option>CA Foundation</option>
                        <option>CA Intermediate</option>
                        <option>CS Executive</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label>Select Subject</label>
                    <select class="form-select">
                        <option selected>All Subjects</option>
                        <option>Accountancy</option>
                        <option>Business Law</option>
                        <option>Economics</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label>Select Level</label>
                    <select class="form-select">
                        <option selected>All Levels</option>
                        <option>Beginner</option>
                        <option>Intermediate</option>
                        <option>Advanced</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label>Sort By</label>
                    <select class="form-select">
                        <option selected>Latest</option>
                        <option>Popular</option>
                        <option>Oldest</option>
                    </select>
                </div>

                <button type="button" class="btn-filter-action">
                    <i class="fa-solid fa-sliders"></i> Filters
                </button>
            </div>

            <!-- LAYOUT GRID: SIDEBAR + CARDS -->
            <div class="notes-layout-grid">

                <!-- LEFT SIDEBAR (STICKY ON SCROLL) -->
                <aside class="notes-sidebar sticky-sidebar">
                    <div class="sidebar-box">
                        <div class="sidebar-title">
                            <i class="fa-solid fa-book-open"></i> Subjects
                        </div>
                        <ul class="subject-list">
                            <li class="active"><a href="#"><span class="subject-name"><i class="fa-regular fa-copy"></i> All Subjects</span> <span class="badge">1,245</span></a></li>
                            <li><a href="#"><span class="subject-name"><i class="fa-regular fa-file-lines"></i> Accountancy</span> <span class="badge">245</span></a></li>
                            <li><a href="#"><span class="subject-name"><i class="fa-regular fa-user"></i> Business Law</span> <span class="badge">189</span></a></li>
                            <li><a href="#"><span class="subject-name"><i class="fa-solid fa-chart-line"></i> Economics</span> <span class="badge">186</span></a></li>
                            <li><a href="#"><span class="subject-name"><i class="fa-solid fa-shapes"></i> Mathematics</span> <span class="badge">165</span></a></li>
                            <li><a href="#"><span class="subject-name"><i class="fa-solid fa-receipt"></i> Taxation</span> <span class="badge">142</span></a></li>
                            <li><a href="#"><span class="subject-name"><i class="fa-solid fa-chart-simple"></i> Statistics</span> <span class="badge">96</span></a></li>
                            <li><a href="#"><span class="subject-name"><i class="fa-regular fa-folder-open"></i> Cost Accounting</span> <span class="badge">78</span></a></li>
                            <li><a href="#"><span class="subject-name"><i class="fa-solid fa-sitemap"></i> Management</span> <span class="badge">65</span></a></li>
                            <li><a href="#"><span class="subject-name"><i class="fa-regular fa-bookmark"></i> Other Subjects</span> <span class="badge">79</span></a></li>
                        </ul>
                    </div>

                    <!-- CTA PROMPT BOX -->
                    <div class="sidebar-promo-card">
                        <div class="promo-crown-icon"><i class="fa-solid fa-crown"></i></div>
                        <h4>Save Your Favorites</h4>
                        <p>Login to bookmark your important notes and access them anytime.</p>
                        <a href="/login" class="btn-sidebar-login">Login / Sign Up</a>
                    </div>
                </aside>

                <!-- RIGHT SCROLLABLE CONTENT AREA -->
                <main class="notes-content-area">
                    <div class="content-header">
                        <h2>All Notes</h2>
                        <span class="total-count">1,245 Notes Found</span>
                    </div>

                    <!-- CARDS GRID -->
                    <div class="notes-cards-grid">

                        <!-- Card 1 -->
                        <div class="note-card">
                            <button class="btn-bookmark" aria-label="Bookmark"><i class="fa-regular fa-bookmark"></i></button>
                            <span class="exam-tag tag-orange">CA Foundation</span>
                            <div class="note-card-icon bg-light-orange">
                                <img src="{{ asset('assets/images/icons/calculator.svg') }}" alt="Accountancy">
                            </div>
                            <h3 class="note-card-title">Accountancy Notes</h3>
                            <p class="note-card-desc">Complete chapter-wise notes for all topics in Accountancy.</p>
                            <div class="note-card-meta">
                                <span><i class="fa-regular fa-file-lines"></i> 25 Chapters</span>
                                <span><i class="fa-regular fa-file-pdf"></i> PDF</span>
                            </div>
                            <a href="/notes/show" class="btn-read-notes orange">Read Notes <i class="fa-solid fa-arrow-right"></i></a>
                        </div>

                        <!-- Card 2 -->
                        <div class="note-card">
                            <button class="btn-bookmark" aria-label="Bookmark"><i class="fa-regular fa-bookmark"></i></button>
                            <span class="exam-tag tag-green">CA Foundation</span>
                            <div class="note-card-icon bg-light-green">
                                <img src="{{ asset('assets/images/icons/gavel.svg') }}" alt="Business Law">
                            </div>
                            <h3 class="note-card-title">Business Law Notes</h3>
                            <p class="note-card-desc">Detailed notes covering all chapters with examples.</p>
                            <div class="note-card-meta">
                                <span><i class="fa-regular fa-file-lines"></i> 20 Chapters</span>
                                <span><i class="fa-regular fa-file-pdf"></i> PDF</span>
                            </div>
                            <a href="/notes/show" class="btn-read-notes green">Read Notes <i class="fa-solid fa-arrow-right"></i></a>
                        </div>

                        <!-- Card 3 -->
                        <div class="note-card">
                            <button class="btn-bookmark" aria-label="Bookmark"><i class="fa-regular fa-bookmark"></i></button>
                            <span class="exam-tag tag-purple">CA Foundation</span>
                            <div class="note-card-icon bg-light-purple">
                                <img src="{{ asset('assets/images/icons/trend-up.svg') }}" alt="Economics">
                            </div>
                            <h3 class="note-card-title">Economics Notes</h3>
                            <p class="note-card-desc">Micro & Macro Economics chapter-wise notes.</p>
                            <div class="note-card-meta">
                                <span><i class="fa-regular fa-file-lines"></i> 18 Chapters</span>
                                <span><i class="fa-regular fa-file-pdf"></i> PDF</span>
                            </div>
                            <a href="/notes/show" class="btn-read-notes purple">Read Notes <i class="fa-solid fa-arrow-right"></i></a>
                        </div>

                        <!-- Card 4 -->
                        <div class="note-card">
                            <button class="btn-bookmark" aria-label="Bookmark"><i class="fa-regular fa-bookmark"></i></button>
                            <span class="exam-tag tag-red">CA Foundation</span>
                            <div class="note-card-icon bg-light-red">
                                <img src="{{ asset('assets/images/icons/percent.svg') }}" alt="Mathematics">
                            </div>
                            <h3 class="note-card-title">Business Mathematics Notes</h3>
                            <p class="note-card-desc">Important formulas and concepts with solved examples.</p>
                            <div class="note-card-meta">
                                <span><i class="fa-regular fa-file-lines"></i> 22 Chapters</span>
                                <span><i class="fa-regular fa-file-pdf"></i> PDF</span>
                            </div>
                            <a href="/notes/show" class="btn-read-notes red">Read Notes <i class="fa-solid fa-arrow-right"></i></a>
                        </div>

                        <!-- Card 5 -->
                        <div class="note-card">
                            <button class="btn-bookmark" aria-label="Bookmark"><i class="fa-regular fa-bookmark"></i></button>
                            <span class="exam-tag tag-blue">CA Inter</span>
                            <div class="note-card-icon bg-light-blue">
                                <img src="{{ asset('assets/images/icons/tax-doc.svg') }}" alt="Taxation">
                            </div>
                            <h3 class="note-card-title">Taxation Notes</h3>
                            <p class="note-card-desc">Direct & Indirect Tax complete study material.</p>
                            <div class="note-card-meta">
                                <span><i class="fa-regular fa-file-lines"></i> 30 Chapters</span>
                                <span><i class="fa-regular fa-file-pdf"></i> PDF</span>
                            </div>
                            <a href="/notes/show" class="btn-read-notes blue">Read Notes <i class="fa-solid fa-arrow-right"></i></a>
                        </div>

                        <!-- Card 6 -->
                        <div class="note-card">
                            <button class="btn-bookmark" aria-label="Bookmark"><i class="fa-regular fa-bookmark"></i></button>
                            <span class="exam-tag tag-yellow">CA Inter</span>
                            <div class="note-card-icon bg-light-yellow">
                                <img src="{{ asset('assets/images/icons/chart-pie.svg') }}" alt="Cost Accounting">
                            </div>
                            <h3 class="note-card-title">Cost Accounting Notes</h3>
                            <p class="note-card-desc">Comprehensive notes with illustrations and practical examples.</p>
                            <div class="note-card-meta">
                                <span><i class="fa-regular fa-file-lines"></i> 28 Chapters</span>
                                <span><i class="fa-regular fa-file-pdf"></i> PDF</span>
                            </div>
                            <a href="/notes/show" class="btn-read-notes orange">Read Notes <i class="fa-solid fa-arrow-right"></i></a>
                        </div>

                    </div>

                    <!-- PAGINATION -->
                    <nav class="notes-pagination">
                        <a href="#" class="page-link page-prev"><i class="fa-solid fa-chevron-left"></i></a>
                        <a href="#" class="page-link active">1</a>
                        <a href="#" class="page-link">2</a>
                        <a href="#" class="page-link">3</a>
                        <a href="#" class="page-link">4</a>
                        <a href="#" class="page-link">5</a>
                        <span class="page-dots">...</span>
                        <a href="#" class="page-link">21</a>
                        <a href="#" class="page-link page-next"><i class="fa-solid fa-chevron-right"></i></a>
                    </nav>

                </main>
            </div>

            <!-- REQUEST NOTE BANNER -->
            <section class="notes-request-banner">
                <div class="request-left">
                    <div class="request-icon">
                        <i class="fa-solid fa-file-invoice"></i>
                    </div>
                    <div class="request-text">
                        <h3>Can't find what you're looking for?</h3>
                        <p>Request a note and we will notify you when it's available.</p>
                    </div>
                </div>
                <a href="#" class="btn-request-note">Request Note</a>
            </section>

        </div>
    </div>

    <!-- BOTTOM FEATURES FOOTER STRIP -->
    <section class="notes-features-bar">
        <div class="notes-container">
            <div class="features-grid">
                <div class="feature-item">
                    <div class="feature-icon"><i class="fa-solid fa-user-graduate"></i></div>
                    <div class="feature-info">
                        <h4>Expert Prepared</h4>
                        <p>Notes prepared by subject matter experts</p>
                    </div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon"><i class="fa-regular fa-comment-dots"></i></div>
                    <div class="feature-info">
                        <h4>Easy to Understand</h4>
                        <p>Well structured and easy to follow</p>
                    </div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon"><i class="fa-solid fa-bullseye"></i></div>
                    <div class="feature-info">
                        <h4>Exam Focused</h4>
                        <p>Designed as per latest exam pattern</p>
                    </div>
                </div>
                <div class="feature-item">
                    <div class="feature-icon"><i class="fa-solid fa-gift"></i></div>
                    <div class="feature-info">
                        <h4>Always Free</h4>
                        <p>100% free access for every student</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

</main>
@endsection