@extends('layouts.app')
@section('title', 'Products | Hallmark')

@section('content')

<main class="pb-4 bg-light" id="mainContent">
  <section class="container">
    <!-- Tabs for main product categories -->
    <ul class="nav nav-tabs mb-4 productstabs" id="productsTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="cards-tab" data-bs-toggle="tab" data-bs-target="#cards" type="button" role="tab" aria-controls="cards" aria-selected="true">
          <img src="{{ asset('assets/img/products5.svg') }}"> Cards
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="ornaments-tab" data-bs-toggle="tab" data-bs-target="#ornaments" type="button" role="tab" aria-controls="ornaments" aria-selected="false">
          <img src="{{ asset('assets/img/products1.svg') }}"> Ornaments
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="gifts-tab" data-bs-toggle="tab" data-bs-target="#gifts" type="button" role="tab" aria-controls="gifts" aria-selected="false">
          <img src="{{ asset('assets/img/products2.svg') }}"> Gifts
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="wrapbags-tab" data-bs-toggle="tab" data-bs-target="#wrapbags" type="button" role="tab" aria-controls="wrapbags" aria-selected="false">
          <img src="{{ asset('assets/img/products3.svg') }}"> Wrap & Bags
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="featured-tab" data-bs-toggle="tab" data-bs-target="#featured" type="button" role="tab" aria-controls="featured" aria-selected="false">
          <img src="{{ asset('assets/img/products4.svg') }}"> Featured Collections
        </button>
      </li>
    </ul>

    <!-- Filter/Sort Bar (applies to all tabs) -->
      <div class="d-flex flex-wrap align-items-center w-100 pro-filter-select mb-4">
        <div></div>
        <div class="d-flex gap-2 align-items-center justify-content-between w-100 mt-2 mt-md-0">
          <div class="filter-wrapper">
            <select class="form-select filter-select3" id="sortSelect1">
              <option value="" disabled selected hidden>Filter</option>
              <option value="birthday1">Birthday 1</option>
              <option value="birthday2">Birthday 2</option>
              <option value="birthday3">Birthday 3</option>
              <option value="birthday4">Birthday 4</option>
            </select>
          </div>

          <div class="filter-wrappers">
            <label for="sortSelect" class="form-label me-1 mb-0">Sort by:</label>
            <div class="filter-wrappers-inner">
              <select class="form-select filter-select3 wide" id="sortSelect2">
                <option value="" disabled selected hidden>Birthday</option>
                <option value="birthday1">Birthday 1</option>
                <option value="birthday2">Birthday 2</option>
                <option value="birthday3">Birthday 3</option>
              </select>
            </div>
          </div>

        </div>
      </div>

    <!-- Product Tabs -->
    <div class="tab-content" id="productsTabsContent">

      {{-- Example repeated tab content — Cards --}}
      <div class="tab-pane fade show active" id="cards" role="tabpanel" aria-labelledby="cards-tab">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
          @foreach (range(1,8) as $i)
            <div class="col">
              <div class="tab-options">
                <div class="category-options">
                  <img src="{{ asset('assets/img/handpick2.svg') }}" alt="Product {{ $i }}">
                  <span class="love-icon"><a href="#"><i class="fa-solid fa-heart"></i></a></span>
                </div>
                <div class="category-options-content">
                  <span>Best Seller</span>
                  <h4>Disney The Muppets Kermit's Rainbow Connection Musical Ornament</h4>
                  <span>$25.99</span>
                  <a href="#">Add to Cart</a>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>

      {{-- Duplicate this tab structure for Ornaments, Gifts, etc. --}}
      @foreach (['ornaments','gifts','wrapbags','featured'] as $tab)
      <div class="tab-pane fade" id="{{ $tab }}" role="tabpanel" aria-labelledby="{{ $tab }}-tab">
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
          @foreach (range(1,8) as $i)
            <div class="col">
              <div class="tab-options">
                <div class="category-options">
                  <img src="{{ asset('assets/img/handpick2.svg') }}" alt="Product {{ $i }}">
                  <span class="love-icon"><a href="#"><i class="fa-solid fa-heart"></i></a></span>
                </div>
                <div class="category-options-content">
                  <span>Best Seller</span>
                  <h4>Sample Product {{ $i }}</h4>
                  <span>$25.99</span>
                  <a href="#">Add to Cart</a>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>
      @endforeach

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

{{-- Newsletter --}}
<section class="subscribe-section newsletter-subscribe d-flex justify-content-evenly align-items-center">
  <span class="newsletter">
    <p>Join Our Newsletter</p>
  </span>
  <form class="subscribe-form newsletter-subscribe-inner d-flex align-items-center p-2">
    <span class="icon px-2">
      <i class="fa-solid fa-envelope"></i>
    </span>
    <input type="email" class="form-control border-0 shadow-none" placeholder="Enter your email address" required>
    <button type="submit" class="btn btn-subscribe ms-2 violet-button">SUBSCRIBE</button>
  </form>
</section>

@endsection