@extends('layouts.main')

@section('style')
  <style>
    .hover-shadow:hover {
      box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15) !important;
      transform: translateY(-4px);
      transition: all 0.3s ease;
    }

    .card-img-wrapper {
      /* height: 180px; */
      background-color: #f8f9fa;
    }

    .card-img-top.visible-image {
      max-height: 100%;
      max-width: 100%;
      object-fit: contain;
      display: block;
    }

    .hover-highlight:hover {
      color: rgb(39, 39, 39) !important;
    }
  </style>
@endsection

@section('content')
  <section class="py-2 bg-light">
    <div class="d-flex justify-content-center bg-primary">
      <div class="d-flex align-items-center flex-nowrap position-relative px-4 py-2" id="link-container"
        style="max-width: 100%; z-index: 10;">

        <!-- Link List -->
        <ul class="d-flex list-unstyled mb-0 flex-nowrap" id="visible-links" style="gap: 1.25rem;">
          @foreach ($categories as $category)
            <li class="link-item">
              <a href="{{ route('woohoo.products', [$category['woohoo_id']]) }}"
                class="text-decoration-none  {{ $id == $category['woohoo_id'] ? 'text-dark' : 'text-light' }} fw-semibold small px-2 py-1 rounded hover-highlight">{{ $category['name'] }}</a>
            </li>
          @endforeach
        </ul>

        <!-- Dropdown for Hidden Links -->
        <div class="dropdown d-none" id="more-dropdown">
          <a href="#" class="text-decoration-none text-dark small fw-semibold px-2 py-1 rounded dropdown-toggle"
            data-bs-toggle="dropdown">
            More
          </a>
          <ul class="dropdown-menu dropdown-menu-end shadow-sm mt-2" id="hidden-links"></ul>
        </div>
      </div>
    </div>
  </section>






  <section id="home_top">
    <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-indicators">
        @foreach ($banners as $in => $banner)
          <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="{{ $in }}"
            class="{{ $in == 0 ? 'active' : '' }}" aria-current="true" aria-label="Slide 1"></button>
        @endforeach
      </div>
      <div class="carousel-inner">
        @foreach ($banners as $in => $banner)
          <div class="carousel-item {{ $in == 0 ? 'active' : '' }}" data-bs-interval="5000">
            <div class="position-relative">
              <img src="{{ $be ? route('image', ['woohoo_banners', $banner]) : asset('assets/images/' . $banner) }}"
                class="d-block w-100">
            </div>
          </div>
        @endforeach
      </div>
      <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators"
        data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
      </button>
      <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators"
        data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
      </button>
    </div>
  </section>





  <section class="py-5 bg-light">

    <div class="container">
      <div class="mb-4">
        <div class="card shadow-lg border-0 rounded-3">
          <div class="card-body">
            <form action="{{ route('woohoo.products', [$id]) }}" method="GET" class="w-100">
              <div class="position-relative d-flex align-items-center">

                {{-- Search Icon --}}
                <i class="fas fa-search text-muted position-absolute"
                  style="left: 1.25rem; font-size: 1.2rem; pointer-events: none;"></i>

                {{-- Search Input Field --}}
                <input type="search" name="q" id="woohoo-search-fa" value="{{ request('q') }}"
                  class="form-control form-control-lg border-0 rounded-pill pe-5 ps-5 bg-light"
                  placeholder="Search gift cards, brands or SKUs..." aria-label="Search" autocomplete="off"
                  style="padding-top: 0.8rem; padding-bottom: 0.8rem; box-shadow: none;">

                {{-- Clear Button (Conditional and absolutely positioned) --}}
                @if (request('q'))
                  <a href="{{ route('woohoo.products', [$id]) }}" class="btn btn-link text-danger position-absolute end-0"
                    style="right: 1.25rem; font-size: 1.2rem; text-decoration: none;" title="Clear search">
                    <i class="fas fa-times-circle"></i>
                  </a>
                @endif

              </div>
              <small class="text-muted d-block mt-2 text-center">
                Type to search. Results update automatically after a short pause.
              </small>

              {{-- Hidden submit button for accessibility/form behavior --}}
              <button type="submit" class="d-none">Submit Search</button>
            </form>
          </div>
        </div>

      </div>
      {{-- <h2 class="mb-4 fw-bold text-center text-primary">Featured Gift Cards</h2> --}}
      <div class="mt-4">
        {{ $woohoo_products->appends(request()->query())->links('pagination::bootstrap-5') }}
      </div>
      <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4">
        @foreach ($woohoo_products as $woohoo_product)
          @php
            $images = json_decode($woohoo_product['images'] ?? '{}', true);
            $price = json_decode($woohoo_product['price'] ?? '{}', true);
            $imageUrl = !empty($images['small'])
                ? $images['small']
                : (!empty($images['base'])
                    ? $images['base']
                    : (!empty($images['mobile'])
                        ? $images['mobile']
                        : (!empty($images['thumbnail'])
                            ? $images['thumbnail']
                            : asset('assets/images/giftcard_def.webp'))));
          @endphp

          <div class="col">
            <a href="{{ route('woohoo.product', [$woohoo_product['sku']]) }}"
              class="text-decoration-none text-dark d-block h-100">
              <div class="card h-100 border-0 shadow-sm hover-shadow transition rounded-4 overflow-hidden pt-2">
                <div class="card-img-wrapper bg-white d-flex align-items-center justify-content-center p-3">
                  <picture class="w-100">
                    <img src="{{ $imageUrl }}" alt="{{ $woohoo_product['name'] ?? 'Product' }}"
                      class="card-img-top visible-image">
                  </picture>
                </div>

                <div class="card-body">
                  <h5 class="card-title text-dark fw-semibold text-truncate"
                    title="{{ $woohoo_product['name'] ?? 'Product' }}">
                    {{ $woohoo_product['name'] ?? 'No Name' }}
                  </h5>
                  <p class="card-text text-muted small mb-0">
                    ₹{{ $price['min'] ?? '0' }} – ₹{{ $price['max'] ?? '0' }}
                  </p>
                </div>
              </div>
            </a>
          </div>
        @endforeach
      </div>

      <div class="my-3">
        {{ $woohoo_products->appends(request()->query())->links('pagination::bootstrap-5') }}
      </div>

    </div>
  </section>
@endsection