@extends('website.index')
@section('title', 'StreamFlix')

@section('body')
    <!-- Category Header -->
    <section class="category-header">
        <div class="container-fluid px-4">
            <div class="row">
                <div class="col-12">
                    <h1 class="category-title" id="categoryTitle">Action Movies</h1>
                    <p class="category-subtitle text-muted">Discover thrilling action-packed movies</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="main-content">
        <div class="container-fluid px-4">
            <div class="row">
                <!-- Sidebar (Desktop) -->
                <div class="col-lg-3 d-none d-lg-block">
                    <div class="sidebar">
                        <!-- Filters -->
                        <div class="filter-section mb-4">
                            <h5 class="filter-title">Sort By</h5>
                            <div class="filter-options">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="sortBy" id="sortLatest"
                                        value="latest" checked>
                                    <label class="form-check-label" for="sortLatest">Latest</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="sortBy" id="sortPopular"
                                        value="popular">
                                    <label class="form-check-label" for="sortPopular">Most Popular</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="sortBy" id="sortRated"
                                        value="rated">
                                    <label class="form-check-label" for="sortRated">Top Rated</label>
                                </div>
                            </div>
                        </div>

                        <!-- Year Filter -->
                        <div class="filter-section mb-4">
                            <h5 class="filter-title">Release Year</h5>
                            <select class="form-select custom-select" id="yearFilter">
                                <option value="">All Years</option>
                                <option value="2024">2024</option>
                                <option value="2023">2023</option>
                                <option value="2022">2022</option>
                                <option value="2021">2021</option>
                                <option value="2020">2020</option>
                            </select>
                        </div>

                        <!-- Featured Movie -->
                        <div class="featured-movie-card">
                            <div class="featured-poster">
                                <img src="https://images.unsplash.com/photo-1489599735734-79b4169c4388?w=300&h=450&fit=crop"
                                    alt="Featured Movie" loading="lazy">
                                <div class="featured-overlay">
                                    <button class="btn btn-accent btn-sm" onclick="playMovie('featured')">
                                        <i class="bi bi-play-fill"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="featured-info">
                                <h6 class="featured-title">Editor's Pick</h6>
                                <p class="featured-description">The most acclaimed action movie of the year.</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Main Content Area -->
                <div class="col-lg-9">
                    <!-- Mobile Filters -->
                    <div class="d-lg-none mb-4">
                        <div class="mobile-filters">
                            <div class="row g-2">
                                <div class="col-6">
                                    <select class="form-select custom-select" id="mobileSortBy">
                                        <option value="latest">Latest</option>
                                        <option value="popular">Most Popular</option>
                                        <option value="rated">Top Rated</option>
                                    </select>
                                </div>
                                <div class="col-6">
                                    <select class="form-select custom-select" id="mobileYearFilter">
                                        <option value="">All Years</option>
                                        <option value="2024">2024</option>
                                        <option value="2023">2023</option>
                                        <option value="2022">2022</option>
                                        <option value="2021">2021</option>
                                        <option value="2020">2020</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Movies Grid -->
                    <div class="movies-grid">
                        <div class="row g-3" id="categoryMoviesGrid">
                            <!-- Movies will be populated by JavaScript -->
                        </div>
                    </div>

                    <!-- Load More Button -->
                    <div class="text-center mt-5">
                        <button class="btn btn-outline-light btn-lg" id="loadMoreBtn" onclick="loadMoreMovies()">
                            <i class="bi bi-arrow-down-circle me-2"></i>Load More
                        </button>
                    </div>

                    <!-- Google Ad Banner -->
                    <div class="google-ad-slot" id="ad-banner-1">
                        <!-- Google Ad Manager banner script will be inserted here -->
                        <span>Advertisement</span>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection