@extends('layouts.app')

@section('title', $product->name)
@section('meta_description', \Illuminate\Support\Str::limit(strip_tags($product->short_description ?: $product->description ?: $product->name), 155))

@php
  $price = $campaign ? (float) $campaign->pivot->campaign_price : (float) $product->price;
  $regular = $campaign ? (float) ($product->old_price ?: $product->price) : ($product->old_price ? (float) $product->old_price : null);
  $off = $regular ? (int) round((1 - $price / $regular) * 100) : 0;
  $stars = (int) round($product->rating);
@endphp

@section('content')
<section class="container" style="padding-top:20px">
  <nav class="shop-bc">
    <a href="{{ route('home') }}">Home</a>
    @foreach ($trail as $t)
      <span>/</span><a href="{{ route('shop.category', $t) }}">{{ $t->name }}</a>
    @endforeach
    <span>/</span><b>{{ $product->name }}</b>
  </nav>

  <div class="pd">
    {{-- gallery --}}
    <div class="pd-gallery">
      <div class="pd-main">
        @if ($product->image_url)
          <img src="{{ $product->image_url }}" alt="{{ $product->name }}">
        @else
          <span class="pd-emo">{{ $product->icon ?: '📦' }}</span>
        @endif
        @if ($off)<span class="p-badge">-{{ $off }}%</span>@endif
        <button type="button" class="pd-wish" data-wish="{{ $product->id }}" aria-label="Wishlist"><svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 17s-7-4.4-7-9a4 4 0 0 1 7-2.6A4 4 0 0 1 17 8c0 4.6-7 9-7 9z"/></svg></button>
      </div>
    </div>

    {{-- info --}}
    <div class="pd-info">
      @if ($product->brand)
        <a href="{{ route('shop.brand', $product->brand) }}" class="pd-brand">{{ $product->brand->name }}</a>
      @endif
      <h1>{{ $product->name }}</h1>
      <div class="pd-meta">
        <span class="rating">{{ str_repeat('★', $stars) }}{{ str_repeat('☆', 5 - $stars) }}</span>
        <span>{{ $product->rating }} ({{ $product->reviews_count }} রিভিউ)</span>
        @if ($product->sku)<span>·</span><span>SKU: {{ $product->sku }}</span>@endif
      </div>

      @if ($campaign)
        <a href="{{ route('campaigns.show', $campaign) }}" class="pd-camp" style="background:{{ $campaign->bg }}">
          <span>{{ $campaign->icon ?: '🔥' }} {{ $campaign->title }}</span>
          <span>শেষ হবে <b data-timer="{{ $campaign->end_at->getTimestampMs() }}"></b></span>
        </a>
      @endif

      <div class="pd-price">
        <b>৳{{ number_format($price) }}</b>
        @if ($regular)<s>৳{{ number_format($regular) }}</s><span class="pd-save">৳{{ number_format($regular - $price) }} সাশ্রয়</span>@endif
      </div>

      <div class="pd-stock {{ $product->in_stock ? 'ok' : 'out' }}">
        {{ $product->in_stock ? ($product->stock < 10 ? "⚠️ মাত্র {$product->stock}টি বাকি" : '✓ স্টকে আছে') : '✕ স্টক শেষ' }}
      </div>

      @if ($product->short_description)<p class="pd-short">{{ $product->short_description }}</p>@endif

      <dl class="pd-attrs">
        @if ($product->weight)<dt>ওজন</dt><dd>{{ $product->weight }}</dd>@endif
        @if ($product->fabric)<dt>কাপড়</dt><dd>{{ $product->fabric }}</dd>@endif
        @if ($product->category)<dt>ক্যাটাগরি</dt><dd><a href="{{ route('shop.category', $product->category) }}">{{ $product->category->name }}</a></dd>@endif
      </dl>

      @if ($product->sizes)
        <div class="pd-opt"><span>Size:</span>
          <div class="size-opts">
            @foreach ($product->sizes as $i => $s)
              <label><input type="radio" name="size" value="{{ $s }}" @checked($i === 0)><span>{{ $s }}</span></label>
            @endforeach
          </div>
        </div>
      @endif
      @if ($product->colors)
        <div class="pd-opt"><span>Color:</span>
          <div class="color-opts">
            @foreach ($product->colors as $i => $c)
              <label title="{{ $c }}"><input type="radio" name="color" value="{{ $c }}" @checked($i === 0)><span style="background:{{ $product->colorHex($c) }}"></span></label>
            @endforeach
          </div>
        </div>
      @endif

      @if ($product->in_stock)
        <div class="pd-buy">
          <div class="qty pd-qty">
            <button type="button" data-step="-1" aria-label="Decrease">−</button>
            <input type="number" id="pdQty" value="1" min="1" max="{{ min(10, $product->stock) }}" aria-label="Quantity">
            <button type="button" data-step="1" aria-label="Increase">+</button>
          </div>
          <button type="button" class="btn btn-outline pd-add" data-add-cart="{{ $product->id }}" @if ($campaign) data-campaign="{{ $campaign->id }}" @endif data-qty-from="#pdQty" data-variants>🛒 Add to cart</button>
          <button type="button" class="btn btn-primary pd-now" data-add-cart="{{ $product->id }}" @if ($campaign) data-campaign="{{ $campaign->id }}" @endif data-qty-from="#pdQty" data-variants data-buy-now="{{ route('checkout') }}">⚡ এখনই কিনুন</button>
        </div>
      @else
        <button type="button" class="btn p-btn oos" disabled style="width:100%;justify-content:center;padding:14px">স্টক শেষ</button>
      @endif

      @php $wa = \App\Models\Setting::get('whatsapp'); @endphp
      @if ($wa)
        <a href="https://wa.me/88{{ preg_replace('/\D/', '', $wa) }}?text={{ rawurlencode("আমি এই পণ্যটি অর্ডার করতে চাই:\n{$product->name} — ৳".number_format($price)."\n".route('product.show', $product)) }}"
           class="btn pd-wa" target="_blank" rel="noopener">
          <svg width="20" height="20" viewBox="0 0 18 18" fill="currentColor"><path d="M9 1.5a7.4 7.4 0 0 0-6.4 11.1L1.5 16.5l4-1A7.4 7.4 0 1 0 9 1.5zm0 13.5a6 6 0 0 1-3.1-.9l-.2-.1-2.4.6.6-2.3-.2-.2A6.1 6.1 0 1 1 9 15zm3.4-4.6c-.2-.1-1.1-.5-1.2-.6-.2-.1-.3-.1-.4.1l-.6.7c-.1.1-.2.1-.4 0a5 5 0 0 1-2.5-2.2c-.2-.3.2-.3.5-1 .1-.1 0-.2 0-.3l-.5-1.3c-.2-.4-.3-.3-.4-.3h-.4a.7.7 0 0 0-.5.2 2.1 2.1 0 0 0-.7 1.6 3.7 3.7 0 0 0 .8 2 8.4 8.4 0 0 0 3.2 2.8c1.2.5 1.7.6 2.3.5a2 2 0 0 0 1.3-.9 1.6 1.6 0 0 0 .1-.9c0-.1-.2-.2-.4-.3z"/></svg>
          WhatsApp-এ অর্ডার করুন
        </a>
      @endif

      <div class="pd-perks">
        <div><span>🚚</span><b>ঢাকায় ১-২ দিন, বাইরে ৩-৫ দিন</b></div>
        <div><span>💵</span><b>ক্যাশ অন ডেলিভারি</b></div>
        <div><span>↩️</span><b>৭ দিনের সহজ রিটার্ন</b></div>
        <div><span>✅</span><b>১০০% অরিজিনাল পণ্য</b></div>
      </div>
      <button type="button" class="pd-share" data-copy-link>🔗 লিংক কপি করুন</button>
    </div>
  </div>

  {{-- description --}}
  <div class="pd-tabs">
    <h2>পণ্যের বিবরণ</h2>
    <div class="b-content">
      @if ($product->description)
        {!! nl2br(e($product->description)) !!}
      @else
        <p>{{ $product->name }} — {{ \App\Models\Setting::siteName() }} থেকে নিশ্চিন্তে কিনুন। মানসম্মত পণ্য, সঠিক দামে, আপনার দোরগোড়ায়।</p>
      @endif
    </div>
  </div>
</section>

@if ($related->isNotEmpty())
<section class="container section">
  <div class="sec-head"><h2>একই রকম পণ্য</h2>
    @if ($product->category)<a href="{{ route('shop.category', $product->category) }}" class="view-all">View All →</a>@endif
  </div>
  <div class="shop-grid pd-related">
    @foreach ($related as $p)
      @include('partials.product-card', ['p' => $p, 'variant' => 'shop'])
    @endforeach
  </div>
</section>
@endif
@endsection

@push('scripts')
<script>
  $$(".pd-qty [data-step]").forEach(b => b.addEventListener("click", () => {
    const i = $("#pdQty");
    i.value = Math.max(1, Math.min(+i.max, +i.value + +b.dataset.step));
  }));
</script>
@endpush