@extends('layout.user')

@section('title', 'অনলাইন শপ')
@section('meta_description', 'বাংলাদেশের অনলাইন শপে ক্যাটাগরি অনুযায়ী প্রোডাক্ট খুঁজুন, রিসেল করুন এবং অর্ডার করুন।')
@section('meta_keywords', 'অনলাইন শপ, ecommerce, reseller shop, product, Bangladesh')
@section('meta_robots', 'index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1')

@section('content')
@php
  $shopBanner = !empty($settings?->shop_banner_url)
    ? $settings->shop_banner_url
    : null;
@endphp

<style>
  .blue-border{
    border:1.5px solid #2563eb !important;
  }
  .shop-category-strip{
    display:flex;
    gap:.75rem;
    overflow-x:auto;
    overflow-y:hidden;
    padding:.15rem 0 .45rem;
    scroll-snap-type:x proximity;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:#94a3b8 transparent;
    overscroll-behavior-x:contain;
  }
  .shop-category-strip::-webkit-scrollbar{
    height:6px;
  }
  .shop-category-strip::-webkit-scrollbar-track{
    background:transparent;
  }
  .shop-category-strip::-webkit-scrollbar-thumb{
    background:#94a3b8;
    border-radius:999px;
  }
  .shop-category-card{
    flex:0 0 96px;
    scroll-snap-align:start;
  }
  @media (min-width:640px){
    .shop-category-card{
      flex-basis:112px;
    }
  }
</style>

<div class="mx-auto max-w-6xl px-2 sm:px-3 md:px-4 mt-2">

  @include('shop._reselling_policy_banner')

  <div class="rounded-2xl bg-gradient-to-br from-indigo-50 via-purple-50 to-rose-50 blue-border p-2 sm:p-3 mb-3">

    @if(!empty($shopBanner))
      <div class="rounded-xl overflow-hidden blue-border shadow-sm">
        <img src="{{ $shopBanner }}" class="w-full h-auto block" onerror="this.onerror=null;this.closest('div').style.display='none';">
      </div>
    @endif

    <form action="{{ route('shop.search') }}" method="GET" class="mt-3">
      <div class="relative">
        <i class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-gray-400"></i>
        <input type="text" name="q" value="{{ request('q') }}"
          placeholder="প্রোডাক্ট/ক্যাটাগরি সার্চ করুন…"
          class="w-full rounded-full bg-white pl-10 pr-28 py-3 text-[15px] shadow-sm outline-none blue-border focus:ring-2 focus:ring-indigo-400/40">
        <button
          class="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-full px-4 py-2 text-sm font-medium bg-indigo-600 text-white">
          Search
        </button>
      </div>
    </form>

    <a href="/policy/reselling"
       class="mt-2 block rounded-xl bg-gradient-to-r from-amber-400 via-orange-400 to-orange-500 text-black blue-border shadow-sm">
      <div class="flex items-center justify-between px-4 py-3">
        <div class="flex items-center gap-2 font-semibold">
          <i class="fa-solid fa-book-open"></i>
          <span>রিসেলিং নীতিমালা ও শর্তাবলী</span>
        </div>
        <i class="fa-solid fa-arrow-right"></i>
      </div>
    </a>
  </div>

  <div class="mb-4 grid grid-cols-4 gap-2">
    @php
      $quick = [
        ['icon'=>'fa-table-cells-large','text'=>'আমার ড্যাশবোর্ড','href'=>route('reseller.dashboard')],
        ['icon'=>'fa-list','text'=>'আমার অর্ডার','href'=>'/pd-orders'],
        ['icon'=>'fa-heart','text'=>'ফেভারিট প্রোডাক্ট','href'=>'/favorites'],
                ['icon'=>'fa-store','text'=>'Vendor Search','href'=>route('shop.vendors.index')],
      ];
    @endphp

    @foreach($quick as $q)
      <a href="{{ $q['href'] }}"
         class="flex flex-col items-center gap-1.5 rounded-lg bg-white p-3 blue-border">
        <span class="inline-flex h-14 w-14 items-center justify-center rounded-full bg-indigo-50 ring-2 ring-indigo-300">
          <i class="fa-solid {{ $q['icon'] }} text-indigo-600 text-xl"></i>
        </span>
        <span class="text-[12px] text-center font-medium text-gray-800">{{ $q['text'] }}</span>
      </a>
    @endforeach
  </div>

  <div class="rounded-2xl bg-white/80 blue-border p-2.5 sm:p-3">
    <div class="mb-2 flex items-center justify-between gap-2">
      <h2 class="text-base font-semibold text-gray-800">ক্যাটাগরি</h2>
      <a href="{{ route('shop.categories.all') }}"
         class="shrink-0 rounded-full bg-indigo-50 px-3 py-1 text-[11px] font-semibold text-indigo-700 blue-border">
        সব দেখুন
      </a>
    </div>

    <div class="shop-category-strip" data-horizontal-wheel>
      @foreach($categories as $cat)
        <a href="{{ route('shop.category', $cat->slug) }}"
           class="shop-category-card rounded-xl bg-white blue-border p-1.5 shadow-sm">
          <div class="aspect-square flex items-center justify-center rounded-lg bg-slate-50 p-1">
            <img src="{{ $cat->photo_url ?? asset('images/default-banner.jpg') }}"
                 alt="{{ $cat->name }}"
                 class="h-[94%] w-[94%] object-contain">
          </div>
          <div class="px-1 pb-1 pt-2 text-center text-[11px] font-medium text-gray-800 leading-4 line-clamp-2 min-h-[2rem]">
            {{ $cat->name }}
          </div>
        </a>
      @endforeach
    </div>
  </div>

  <h2 class="text-base font-semibold text-gray-800 mt-4 mb-2">সকল প্রোডাক্ট</h2>

  <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
    @foreach($products as $p)
      @php
        $thumb = $p->banner_photo_url ?? asset('images/default-banner.jpg');
      @endphp
      <div class="rounded-xl bg-white blue-border overflow-hidden">
        <a href="{{ route('shop.product', $p->slug) }}">
          <div class="aspect-[4/3] bg-gray-50 flex items-center justify-center">
            @if($thumb)
              <img src="{{ $thumb }}" class="h-[92%] w-[92%] object-contain">
            @else
              <span class="text-gray-400 text-sm">No Image</span>
            @endif
          </div>
        </a>

        <div class="p-2">
          <div class="text-[13px] font-medium text-gray-900 line-clamp-2 min-h-[36px]">
            {{ $p->title }}
          </div>

          <div class="mt-1 text-[14px] font-bold text-indigo-600">
            ৳{{ number_format($p->admin_price,2) }}
          </div>

          <a href="{{ route('order.create',$p->slug) }}"
             class="mt-2 block text-center rounded-lg bg-indigo-600 text-white text-[12px] py-1.5">
            অর্ডার
          </a>
        </div>
      </div>
    @endforeach
  </div>

</div>
@endsection

@section('scripts')
<script>
  (() => {
    const strips = document.querySelectorAll('[data-horizontal-wheel]');
    const clamp = (value, min, max) => Math.min(max, Math.max(min, value));

    strips.forEach((strip) => {
      let targetScrollLeft = strip.scrollLeft;
      let frameId = null;

      const syncBounds = () => {
        const maxScrollLeft = Math.max(0, strip.scrollWidth - strip.clientWidth);
        targetScrollLeft = clamp(targetScrollLeft, 0, maxScrollLeft);
      };

      const animateScroll = () => {
        const distance = targetScrollLeft - strip.scrollLeft;

        if (Math.abs(distance) < 0.6) {
          strip.scrollLeft = targetScrollLeft;
          frameId = null;
          return;
        }

        strip.scrollLeft += distance * 0.18;
        frameId = requestAnimationFrame(animateScroll);
      };

      const queueScroll = (delta) => {
        syncBounds();
        const maxScrollLeft = Math.max(0, strip.scrollWidth - strip.clientWidth);
        targetScrollLeft = clamp(targetScrollLeft + delta, 0, maxScrollLeft);

        if (!frameId) {
          frameId = requestAnimationFrame(animateScroll);
        }
      };

      strip.addEventListener('wheel', (event) => {
        if (strip.scrollWidth <= strip.clientWidth) {
          return;
        }

        const dominantDelta = Math.abs(event.deltaY) >= Math.abs(event.deltaX)
          ? event.deltaY
          : event.deltaX;

        if (!dominantDelta) {
          return;
        }

        const unitMultiplier = event.deltaMode === 1
          ? 18
          : (event.deltaMode === 2 ? strip.clientWidth : 1);
        const delta = dominantDelta * unitMultiplier;
        const maxScrollLeft = strip.scrollWidth - strip.clientWidth;
        const canMoveLeft = delta < 0 && targetScrollLeft > 0;
        const canMoveRight = delta > 0 && targetScrollLeft < maxScrollLeft;

        if (canMoveLeft || canMoveRight) {
          event.preventDefault();
          queueScroll(delta * 1.15);
        }
      }, { passive: false });

      strip.addEventListener('scroll', () => {
        if (!frameId) {
          targetScrollLeft = strip.scrollLeft;
        }
      }, { passive: true });

      window.addEventListener('resize', syncBounds);
    });
  })();
</script>
@endsection


