@extends('layouts.storefront')

@section('title', 'الرئيسية')

@section('content')
  <section class="hero py-5">
    <div class="container-xl">
      <div class="row g-3">
        <div class="col-12 col-lg-8">
          <div class="card-dark p-4 h-100">
            <div class="d-flex align-items-center justify-content-between mb-3">
              <div class="d-flex align-items-center gap-3">
                <div class="rounded-circle d-flex align-items-center justify-content-center"
                     style="width:44px;height:44px;background:#182033;">
                  <i class="fas fa-bolt" style="color:var(--primary)"></i>
                </div>
                <h2 class="h5 m-0">مرحباً 👋</h2>
              </div>
              <a href="{{ sroute('cart.index') }}" class="btn btn-primary btn-sm">
                <i class="fas fa-cart-shopping"></i> اذهب للسلة
              </a>
            </div>
            <p class="text-muted mb-0">تصفّح أحدث المنتجات والعروض — تصميم داكن ومتجاوب 100%.</p>
          </div>
        </div>

        <div class="col-12 col-lg-4">
          <div class="card-dark p-4 h-100">
            <h3 class="h6 mb-3">نشرة المتجر</h3>
            <form action="{{ sroute('newsletter.subscribe') }}" method="post">
              @csrf
              <div class="d-flex gap-2">
                <input type="email" name="email" class="form-control" placeholder="أدخل بريدك">
                <button class="btn btn-primary">اشترك</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </section>

  {{-- فئات رئيسية — سكرول أفقي --}}
  <section class="py-4">
    <div class="container-xl">
      <div class="d-flex align-items-center justify-content-between mb-2">
        <h3 class="h5 m-0">الفئات</h3>
        <a href="{{ sroute('storefront.catalogs') }}" class="text-muted small">عرض الكل</a>
      </div>

      <div class="h-scroll">
        @forelse($catalogs as $cat)
          <a class="catalog-pill d-flex" href="{{ sroute('storefront.catalog', $cat->slug ?? $cat->id) }}">
            <div style="width:96px; height:96px; background:#182033; flex:0 0 auto;">
              <img src="{{ $cat->image ? asset('storage/'.$cat->image) : 'https://ui-avatars.com/api/?name='.urlencode($cat->name) }}"
                   alt="{{ $cat->name }}" style="width:100%;height:100%;object-fit:cover;">
            </div>
            <div class="p-3 d-flex flex-column justify-content-center">
              <div class="fw-bold">{{ $cat->name }}</div>
              <div class="small text-muted">{{ $cat->products_count ?? ($cat->products->count() ?? 0) }} منتج</div>
            </div>
          </a>
        @empty
          <div class="text-muted">لا توجد فئات بعد.</div>
        @endforelse
      </div>
    </div>
  </section>

  {{-- أقسام المنتجات لكل كاتالوج --}}
  @foreach($catalogs as $cat)
    @php
      $items = $cat->products->take(12) ?? collect();
    @endphp
    @if($items->count())
    <section class="py-4">
      <div class="container-xl">
        <div class="d-flex align-items-center justify-content-between mb-2">
          <h3 class="h6 m-0">{{ $cat->name }}</h3>
          <a class="small text-muted" href="{{ sroute('storefront.catalog', $cat->slug ?? $cat->id) }}">عرض المزيد</a>
        </div>

        <div class="h-scroll">
          @foreach($items as $p)
            <div class="product-card">
              <a href="{{ sroute('storefront.product', $p->slug ?? $p->id) }}">
                <div style="height:150px;background:#182033;">
                  <img src="{{ $p->image ? asset('storage/'.$p->image) : 'https://ui-avatars.com/api/?name='.urlencode($p->name) }}"
                       alt="{{ $p->name }}" style="width:100%;height:100%;object-fit:cover;">
                </div>
              </a>
              <div class="p-3">
                <div class="small text-muted mb-1">{{ $cat->name }}</div>
                <a class="fw-bold d-block mb-1" href="{{ sroute('storefront.product', $p->slug ?? $p->id) }}">{{ $p->name }}</a>
                @if(!empty($p->price))
                  <div class="d-flex align-items-center gap-2">
                    <span class="fw-bold">{{ number_format($p->price, 2) }}</span>
                    @if(!empty($p->sale_price) && $p->sale_price < $p->price)
                      <span class="text-muted text-decoration-line-through small">{{ number_format($p->price, 2) }}</span>
                      <span class="badge bg-success">تخفيض</span>
                    @endif
                  </div>
                @endif
                <div class="mt-3 d-grid">
                  <form action="{{ sroute('cart.add', $p->id) }}" method="post">
                    @csrf
                    <button class="btn btn-primary btn-sm w-100"><i class="fas fa-cart-plus ms-1"></i> أضف للسلة</button>
                  </form>
                </div>
              </div>
            </div>
          @endforeach
        </div>
      </div>
    </section>
    @endif
  @endforeach
@endsection