@extends('layouts.app')

@section('title', 'All Brands')

@php
  // hex color na hole default navy (inline style-e "{color}1a" alpha use hoy)
  $color = fn ($b) => preg_match('/^#[0-9a-fA-F]{6}$/', (string) $b->color) ? $b->color : '#0b2d6b';
@endphp

@section('content')
  @include('partials.page-head', [
    'title' => 'All Brands',
    'subtitle' => 'বিশ্বস্ত সব ব্র্যান্ড, এক জায়গায় — <b>' . $brands->count() . '</b> টি ব্র্যান্ড',
    'crumbs' => ['All Brands' => null],
  ])

  {{-- ================= TOP BRANDS ================= --}}
  @if ($top->isNotEmpty())
    <section class="container section">
      <div class="sec-head"><h2>⭐ Top Brands</h2></div>
      <div class="top-brands" id="topBrands">
        @foreach ($top as $b)
          @php $c = $color($b); @endphp
          <a href="{{ route('shop.brand', $b) }}" class="tb-card" style="background:linear-gradient(135deg, {{ $c }}, {{ $c }}cc)">
            @if ($b->tagline)<span class="tb-off">{{ $b->tagline }}</span>@endif
            <span class="tb-logo" style="color:{{ $c }}">
              @if ($b->logo)<img src="{{ asset('storage/'.$b->logo) }}" alt="{{ $b->name }}">@else{{ $b->initials }}@endif
            </span>
            <div><h3>{{ $b->name }}</h3><small>{{ $b->products_count }} টি পণ্য →</small></div>
          </a>
        @endforeach
      </div>
    </section>
  @endif

  {{-- ================= ALL BRANDS ================= --}}
  <section class="container section">
    <div class="sec-head"><h2>সব ব্র্যান্ড</h2></div>

    <div class="brand-toolbar">
      <label class="brand-search">
        <svg width="18" height="18" fill="none" stroke="#9ca3af" stroke-width="2.2"><circle cx="8" cy="8" r="6"/><path d="m16 16-3.5-3.5"/></svg>
        <input type="text" id="brandSearch" placeholder="ব্র্যান্ড খুঁজুন..." aria-label="Search brands">
      </label>
      <div class="view-toggle" id="viewToggle">
        <button type="button" class="active" data-v="grid" aria-label="Grid view">
          <svg width="16" height="16" fill="currentColor"><rect width="7" height="7" rx="1.5"/><rect x="9" width="7" height="7" rx="1.5"/><rect y="9" width="7" height="7" rx="1.5"/><rect x="9" y="9" width="7" height="7" rx="1.5"/></svg>
        </button>
        <button type="button" data-v="list" aria-label="List view">
          <svg width="16" height="16" fill="currentColor"><rect width="16" height="4" rx="1.5"/><rect y="6" width="16" height="4" rx="1.5"/><rect y="12" width="16" height="4" rx="1.5"/></svg>
        </button>
      </div>
    </div>

    <div class="az-bar" id="azBar">
      <button type="button" data-l="All" class="active">All</button>
      @foreach (range('A', 'Z') as $l)
        <button type="button" data-l="{{ $l }}" @disabled(! in_array($l, $letters, true))>{{ $l }}</button>
      @endforeach
    </div>

    <div class="brand-grid" id="brandGrid">
      @foreach ($brands as $b)
        @php $c = $color($b); @endphp
        <a href="{{ route('shop.brand', $b) }}" class="brand-card" data-name="{{ mb_strtolower($b->name) }}" data-letter="{{ mb_strtoupper(mb_substr($b->name, 0, 1)) }}">
          @if ($b->is_top)<span class="verified" title="Top Brand">✔</span>@endif
          @if ($b->logo)
            <div class="brand-logo"><img src="{{ asset('storage/'.$b->logo) }}" alt="{{ $b->name }}" loading="lazy"></div>
          @else
            <div class="brand-logo" style="background:{{ $c }}1a;color:{{ $c }}">{{ $b->initials }}</div>
          @endif
          <div>
            <h4>{{ $b->name }}</h4>
            <small>{{ $b->products_count }} টি পণ্য</small>
          </div>
          <span class="shop-link">Shop Now →</span>
        </a>
      @endforeach
      <div class="empty" id="brandEmpty" @if ($brands->isNotEmpty()) hidden @endif><div>🔍</div><span id="brandEmptyTxt">কোনো ব্র্যান্ড পাওয়া যায়নি</span></div>
    </div>
  </section>

  {{-- ================= SELLER CTA ================= --}}
  <section class="container section">
    <div class="seller-cta">
      <div>
        <h3>আপনার ব্র্যান্ড {{ \App\Models\Setting::siteName() }}-তে যুক্ত করুন</h3>
        <p>লাখো ক্রেতার কাছে পৌঁছান — আজই সেলার হিসেবে রেজিস্টার করুন</p>
      </div>
      <a href="{{ route('contact') }}" class="btn btn-primary">Become a Seller →</a>
    </div>
  </section>
@endsection

@push('head')
  <link rel="stylesheet" href="{{ asset('assets/css/pages.css') }}?v={{ filemtime(public_path('assets/css/pages.css')) }}">
@endpush

@push('scripts')
<script>
(() => {
  const cards = $$("#brandGrid .brand-card");
  let letter = "All", query = "";

  function render() {
    let shown = 0;
    cards.forEach(el => {
      const ok = (letter === "All" || el.dataset.letter === letter) && el.dataset.name.includes(query);
      el.hidden = !ok;
      shown += ok;
    });
    $("#brandEmpty").hidden = shown > 0;
    $("#brandEmptyTxt").textContent = query ? `"${query}" নামে কোনো ব্র্যান্ড পাওয়া যায়নি` : "কোনো ব্র্যান্ড পাওয়া যায়নি";
  }

  $("#azBar").addEventListener("click", e => {
    const b = e.target.closest("button");
    if (!b || b.disabled) return;
    $$("#azBar button").forEach(x => x.classList.toggle("active", x === b));
    letter = b.dataset.l;
    render();
  });

  $("#brandSearch").addEventListener("input", e => {
    query = e.target.value.trim().toLowerCase();
    render();
  });

  $("#viewToggle").addEventListener("click", e => {
    const b = e.target.closest("button");
    if (!b) return;
    $$("#viewToggle button").forEach(x => x.classList.toggle("active", x === b));
    $("#brandGrid").classList.toggle("list", b.dataset.v === "list");
  });
})();
</script>
@endpush