@extends('layouts.app')

@section('content')

{{-- ================= HERO ================= --}}
<section class="container hero">

  {{-- Category sidebar --}}
  <aside class="cat-sidebar">
    <ul>
      @foreach ($categories as $c)
        <li><a href="{{ route('shop.category', $c) }}"><span class="ci">{{ $c->icon }}</span>{{ $c->name }}</a></li>
      @endforeach
    </ul>
  </aside>

  {{-- Slider + category carousel --}}
  <div class="hero-main">
    <div class="slider" data-slider>
      <div class="slides">
        @foreach ($sliders as $s)
          <div class="slide" style="background:{{ $s->bg ?: 'var(--primary)' }}">
            <div class="slide-content">
              @if ($s->tag)<span class="slide-tag">{{ $s->tag }}</span>@endif
              <h2>{!! strip_tags($s->title, '<br>') !!}</h2>
              @if ($s->subtitle)<p>{{ $s->subtitle }}</p>@endif
              <a href="{{ url($s->link) }}" class="btn btn-white">{{ $s->button_text }}</a>
            </div>
            @if ($s->image)
              <img class="slide-emoji" src="{{ asset('storage/'.$s->image) }}" alt="" style="max-width:38%;max-height:80%">
            @else
              <div class="slide-emoji">{{ $s->icon }}</div>
            @endif
          </div>
        @endforeach
      </div>
      <button type="button" class="slider-arrow prev" aria-label="Previous">‹</button>
      <button type="button" class="slider-arrow next" aria-label="Next">›</button>
      <div class="dots"></div>
    </div>

    <div class="cat-carousel-wrap">
      <div class="cat-carousel" id="catCarousel">
        @foreach ($carouselCats as $c)
          <a href="{{ route('shop.category', $c) }}" class="cat-card"><div class="thumb">{{ $c->icon }}</div><span>{{ $c->name }}</span></a>
        @endforeach
      </div>
      <button type="button" class="carousel-next" data-scroll-next="#catCarousel" aria-label="Scroll">›</button>
    </div>
  </div>

</section>

{{-- ================= PROMO BANNERS (Admin › Settings) ================= --}}
@php
  $st = \App\Models\Setting::map();
  $promos = collect([1, 2])->filter(fn ($i) => filled($st["promo{$i}_title"] ?? null));
@endphp
@if ($promos->isNotEmpty())
<section class="container section promo-grid" @if ($promos->count() === 1) style="grid-template-columns:1fr" @endif>
  @foreach ($promos as $i)
  <a href="{{ $st["promo{$i}_link"] ?? '' ?: '#' }}" class="promo promo-{{ $i }}">
    @if (filled($st["promo{$i}_label"] ?? null))<small>{{ $st["promo{$i}_label"] }}</small>@endif
    <h3>{{ $st["promo{$i}_title"] }}</h3>
    @if (filled($st["promo{$i}_button"] ?? null))<span class="btn btn-primary">{{ $st["promo{$i}_button"] }}</span>@endif
    @if (filled($st["promo{$i}_emoji"] ?? null))<span class="big-emoji">{{ $st["promo{$i}_emoji"] }}</span>@endif
  </a>
  @endforeach
</section>
@endif

{{-- ================= FLASH SALE ================= --}}
@if ($flash->isNotEmpty())
<section class="container section">
  <div class="flash">
    <div class="sec-head">
      <h2>⚡ Flash Sale</h2>
      <div class="countdown" data-countdown="{{ $flashEndsAt->getTimestampMs() }}">শেষ হবে:
        <span data-u="d">00</span>d <span data-u="h">00</span>:<span data-u="m">00</span>:<span data-u="s">00</span>
      </div>
      <a href="{{ route('campaigns.index') }}" class="view-all">View All →</a>
    </div>
    <div class="product-grid" id="flashGrid">
      @foreach ($flash as $p)
        @include('partials.product-card', ['p' => $p, 'flash' => true])
      @endforeach
    </div>
  </div>
</section>
@endif

{{-- ================= FEATURED PRODUCTS ================= --}}
<section class="container section">
  <div class="sec-head">
    <h2>Featured Products</h2>
    <div class="tabs" id="featTabs">
      <button type="button" class="active" data-root="">All</button>
      @foreach ($featuredTabs as $t)
        <button type="button" data-root="{{ $t->slug }}">{{ $t->name }}</button>
      @endforeach
    </div>
  </div>
  <div class="product-grid" id="featuredGrid">
    @foreach ($featured as $p)
      <div data-root="{{ $p->root_slug }}" style="display:contents">@include('partials.product-card', ['p' => $p])</div>
    @endforeach
  </div>
</section>

{{-- ================= COUPON BANNER (Admin › Settings) ================= --}}
@if (filled($st['coupon_banner_title'] ?? null))
<section class="container section">
  <div class="wide-banner">
    <div>
      <h3>{{ $st['coupon_banner_title'] }}</h3>
      @if (filled($st['coupon_banner_text'] ?? null))<p>{{ $st['coupon_banner_text'] }}</p>@endif
    </div>
    @if (filled($st['coupon_banner_code'] ?? null))<div class="code">{{ $st['coupon_banner_code'] }}</div>@endif
    @if (filled($st['coupon_banner_button'] ?? null))
      <a href="{{ $st['coupon_banner_link'] ?? '' ?: route('categories.index') }}" class="btn btn-white">{{ $st['coupon_banner_button'] }}</a>
    @endif
  </div>
</section>
@endif

{{-- ================= BEST SELLING ================= --}}
<section class="container section">
  <div class="sec-head">
    <h2>Best Selling</h2>
    <a href="{{ route('shop.search', ['sort' => 'popular']) }}" class="view-all">View All →</a>
  </div>
  <div class="product-grid">
    @foreach ($bestSelling as $p)
      @include('partials.product-card', ['p' => $p])
    @endforeach
  </div>
</section>

{{-- ================= BRANDS ================= --}}
<section class="container section">
  <div class="sec-head">
    <h2>Top Brands</h2>
    <a href="{{ route('brands.index') }}" class="view-all">All Brands →</a>
  </div>
  <div class="brands">
    @foreach ($brands as $b)
      <a href="{{ route('shop.brand', $b) }}" class="brand">
        @if ($b->logo)<img src="{{ asset('storage/'.$b->logo) }}" alt="{{ $b->name }}" style="max-height:50px">@else{{ $b->name }}@endif
      </a>
    @endforeach
  </div>
</section>

{{-- ================= FEATURES ================= --}}
<section class="container section features">
  <div class="feature"><span class="fi">🚚</span><div><b>দ্রুত ডেলিভারি</b><small>সারা দেশে ২-৫ দিনে</small></div></div>
  <div class="feature"><span class="fi">💵</span><div><b>ক্যাশ অন ডেলিভারি</b><small>পণ্য হাতে পেয়ে পেমেন্ট</small></div></div>
  <div class="feature"><span class="fi">↩️</span><div><b>সহজ রিটার্ন</b><small>৭ দিনের রিটার্ন পলিসি</small></div></div>
  <div class="feature"><span class="fi">🎧</span><div><b>২৪/৭ সাপোর্ট</b><small>যেকোনো সময় কল করুন</small></div></div>
</section>
@endsection

@push('scripts')
<script>
  // featured tabs: root category filter (client side)
  $("#featTabs")?.addEventListener("click", e => {
    const b = e.target.closest("button");
    if (!b) return;
    $$("#featTabs button").forEach(x => x.classList.toggle("active", x === b));
    $$("#featuredGrid > [data-root]").forEach(el => (el.style.display = !b.dataset.root || el.dataset.root === b.dataset.root ? "contents" : "none"));
  });
</script>
@endpush