@extends('layouts.welcome')
@section('content')

      <section class="page-hero"
        style="
        position: relative;
        overflow: hidden;
        background:
            linear-gradient(to right, rgba(0, 0, 0, .45), rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, .35)),
            linear-gradient(to bottom, rgba(0, 0, 0, .10), rgba(0, 0, 0, .42)),
            url('{{ asset('assets/images/bag.png') }}') center center / cover no-repeat;
    ">        
        <div class="page-hero-content">
                <div class="page-hero-inner">
                    <div class="page-kicker">Luxury Bags Collection</div>
                    <h1 class="page-title">Elegant Bags For Every Look</h1>
                    <p class="page-subtitle">
                        Discover beautifully curated handbags, statement pieces, and stylish everyday essentials
                        designed to complete your look with confidence, class, and luxury.
                    </p>
                </div>
            </div>
        </section>

<section class="section-block">
    <div class="container">
        <div class="d-lg-none mb-4">
            <button class="sidebar-btn w-auto px-4"
                type="button"
                data-bs-toggle="offcanvas"
                data-bs-target="#shopFilterCanvas">

                <i class="bi bi-sliders me-2"></i>
                Filter Products
            </button>
        </div>

        <div class="row g-3 align-items-start">
            <div class="col-lg-3 d-none d-lg-block">
<aside class="sidebar-card">
    <div class="filter-group">
        <div class="filter-title">Search Bags</div>

        <div class="filter-search">
            <input type="text"
                class="form-control"
                placeholder="Search bags or collections...">
        </div>
    </div>
    <div class="filter-group">
        <div class="filter-title">Categories</div>

        <div class="filter-list">

            <label class="custom-check">
                <input type="checkbox" checked>
                <span>Luxury Handbags</span>
            </label>

            <label class="custom-check">
                <input type="checkbox">
                <span>Crossbody Bags</span>
            </label>

            <label class="custom-check">
                <input type="checkbox">
                <span>Shoulder Bags</span>
            </label>

            <label class="custom-check">
                <input type="checkbox">
                <span>Tote Bags</span>
            </label>

            <label class="custom-check">
                <input type="checkbox">
                <span>Mini Statement Bags</span>
            </label>

        </div>
    </div>

    <div class="filter-group">
        <div class="filter-title">Price Range</div>
        <select class="form-select">
            <option selected>All Prices</option>
            <option>₦50,000 - ₦100,000</option>
            <option>₦100,000 - ₦200,000</option>
            <option>₦200,000 - ₦350,000</option>
            <option>₦350,000 and Above</option>
        </select>
    </div>

    <div class="filter-group">
        <div class="filter-title">Style</div>
        <div class="filter-list">
            <label class="custom-check">
                <input type="checkbox" checked>
                <span>Classic</span>
            </label>

            <label class="custom-check">
                <input type="checkbox">
                <span>Modern</span>
            </label>

            <label class="custom-check">
                <input type="checkbox">
                <span>Minimal</span>
            </label>

            <label class="custom-check">
                <input type="checkbox">
                <span>Statement</span>
            </label>

        </div>
    </div>

    <div class="filter-group">
        <div class="filter-title">Color</div>
        <div class="filter-list">
            <label class="custom-check">
                <input type="checkbox" checked>
                <span>Black</span>
            </label>

            <label class="custom-check">
                <input type="checkbox">
                <span>Nude / Beige</span>
            </label>

            <label class="custom-check">
                <input type="checkbox">
                <span>White</span>
            </label>

            <label class="custom-check">
                <input type="checkbox">
                <span>Brown</span>
            </label>

        </div>
    </div>

    <div class="d-grid gap-3">
        <button class="sidebar-btn" type="button">
            Apply Filters
        </button>

        <button class="sidebar-btn-outline" type="button">
            Reset Filters
        </button>
    </div>
</aside>
            </div>

            <div class="col-12 col-lg-9">
                <div class="shop-main-card">
<div class="shop-topbar">
    <div class="shop-results">
        <h2>Featured Bags</h2>

        <p>
            Showing 6 elegant pieces curated for luxury, versatility, and everyday style.
        </p>
    </div>

    <div class="shop-sort">
        <span class="shop-sort-label">Sort By</span>

        <select class="form-select">
            <option selected>Most Popular</option>
            <option>Newest Arrivals</option>
            <option>Price: Low to High</option>
            <option>Price: High to Low</option>
        </select>
    </div>
</div>

<div class="row g-3">
    
    <div class="col-12 col-md-6 col-xl-4">

   <a href="#" class="product-card d-block text-decoration-none">
                <div class="product-media">
                    <img src="{{ asset('assets/images/bag.webp') }}" alt="">
                </div>

                <div class="product-body">

                    <div class="product-category">
                        Luxury Handbag
                    </div>

                    <h3 class="product-title">
                        Signature Leather Tote Bag
                    </h3>

                    <div class="product-tags">
                        <span>Classic</span>
                        <span>Black</span>
                    </div>

                    <div class="product-price-row">
                        <div>
                            <div class="product-price">₦180,000</div>
                            <div class="product-old-price">₦220,000</div>
                        </div>
                    </div>

                    <div class="product-actions">
                        <span class="btn-shop-primary">View Product</span>
                    </div>

                </div>

        </a>
    </div>


    <div class="col-12 col-md-6 col-xl-4">
       <a href="#" class="product-card d-block text-decoration-none">
                <div class="product-media">
                    <img src="{{ asset('assets/images/bag2.webp') }}" alt="">
                </div>

                <div class="product-body">

                    <div class="product-category">
                        Crossbody Bag
                    </div>

                    <h3 class="product-title">
                        Elegant Nude Crossbody Bag
                    </h3>

                    <div class="product-tags">
                        <span>Modern</span>
                        <span>Nude</span>
                    </div>

                    <div class="product-price-row">
                        <div>
                            <div class="product-price">₦220,000</div>
                            <div class="product-old-price">₦260,000</div>
                        </div>
                    </div>

                    <div class="product-actions">
                        <span class="btn-shop-primary">View Product</span>
                    </div>

                </div>
        </a>
    </div>


    <div class="col-12 col-md-6 col-xl-4">
           <a href="#" class="product-card d-block text-decoration-none">
                <div class="product-media">
                    <img src="{{ asset('assets/images/bag3.webp') }}" alt="">
                </div>

                <div class="product-body">

                    <div class="product-category">
                        Mini Statement Bag
                    </div>

                    <h3 class="product-title">
                        Luxury Mini Gold Chain Bag
                    </h3>

                    <div class="product-tags">
                        <span>Statement</span>
                        <span>White</span>
                    </div>

                    <div class="product-price-row">
                        <div>
                            <div class="product-price">₦165,000</div>
                            <div class="product-old-price">₦200,000</div>
                        </div>
                    </div>

                    <div class="product-actions">
                        <span class="btn-shop-primary">View Product</span>
                    </div>

                </div>
        </a>
    </div>

</div>
                </div>

            </div>

        </div>
    </div>
</section>

<div class="offcanvas offcanvas-start"
    tabindex="-1"
    id="shopFilterCanvas">

    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Filter Products</h5>

        <button type="button"
            class="btn-close"
            data-bs-dismiss="offcanvas"></button>
    </div>

    <div class="offcanvas-body">

        <aside>

            <div class="filter-group">
                <div class="filter-title">Search Product</div>

                <div class="filter-search">
                    <input type="text"
                        class="form-control"
                        placeholder="Search wigs or hair...">
                </div>
            </div>

            <div class="filter-group">
                <div class="filter-title">Categories</div>

                <div class="filter-list">
                    <label class="custom-check">
                        <input type="checkbox" checked>
                        <span>Ready-to-Wear Wigs</span>
                    </label>

                    <label class="custom-check">
                        <input type="checkbox">
                        <span>Raw Human Hair</span>
                    </label>

                    <label class="custom-check">
                        <input type="checkbox">
                        <span>Closures & Frontals</span>
                    </label>

                    <label class="custom-check">
                        <input type="checkbox">
                        <span>Bundles</span>
                    </label>
                </div>
            </div>

            <div class="d-grid gap-3 mt-4">
                <button class="sidebar-btn" type="button">
                    Apply Filters
                </button>

                <button class="sidebar-btn-outline" type="button">
                    Reset Filters
                </button>
            </div>

        </aside>

    </div>
</div>
@endsection