@extends('layouts.app')

@section('content')

<div class="container py-5">

  <div class="row g-4 align-items-start">

<!-- IMAGEM -->
    <!-- IMAGEM / ZOOM -->
    <div class="col-md-6">
      <div class="product-zoom-box" id="zoomBox">
        <img
          id="zoomImg"
          class="product-main-img"
          src="{{ $product->image_url }}"
          alt="{{ $product->name }}"
        >
      </div>

      <div class="d-flex gap-3 mt-3">
        <button type="button" class="product-thumb" data-src="{{ $product->image_url }}">
          <img src="{{ $product->image_url }}" alt="{{ $product->name }}">
        </button>
        <button type="button" class="product-thumb" data-src="{{ asset('images/default.png') }}" title="Placeholder">
          <img src="{{ asset('images/default.png') }}" alt="Placeholder">
        </button>
      </div>
    </div>

<!-- INFO -->
    <!-- INFO -->
    <div class="col-md-6">
      <div class="product-detail-card">
        <div class="d-flex align-items-center justify-content-between gap-3 flex-wrap">
          <h2 class="m-0">{{ $product->name }}</h2>
          <span class="wiliete-badge">Produto oficial</span>
        </div>

        <div class="product-price mt-3">
          Kz {{ number_format($product->price,2,',','.') }}
        </div>

        <p class="mt-3" style="color: rgba(255,255,255,.78)">
          {{ $product->description ?: 'Descrição não definida.' }}
        </p>

        <div class="d-grid gap-2 mt-4">
          <form action="{{ route('cart.add',$product->id) }}" method="POST">
            @csrf
            <button class="btn btn-wiliete w-100">
              🛒 Adicionar ao Carrinho
            </button>
          </form>

          <a href="{{ route('checkout.index') }}" class="btn btn-outline-wiliete w-100">
            ⚡ Comprar agora
          </a>
        </div>

        <div class="mt-4 p-3" style="border: 1px solid rgba(255,255,255,.08); border-radius: 16px; background: rgba(255,255,255,.04)">
          <div class="d-flex align-items-center justify-content-between">
            <span style="color: rgba(255,255,255,.75)">Pagamentos aceites</span>
            <div class="d-flex align-items-center gap-2">
              <img src="{{ asset('images/multicaixa.png') }}" alt="Multicaixa" style="height:22px">
              <img src="{{ asset('images/multicaixa-express.png') }}" alt="Multicaixa Express" style="height:22px">
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<script>
  (function(){
    const thumbs = document.querySelectorAll('.product-thumb');
    const img = document.getElementById('zoomImg');
    const box = document.getElementById('zoomBox');
    thumbs.forEach(t => {
      t.addEventListener('click', () => {
        const src = t.getAttribute('data-src');
        if(src) img.src = src;
      });
    });

    // Zoom simples: aumenta e segue o cursor
    if(box && img){
      box.addEventListener('mousemove', (e) => {
        const rect = box.getBoundingClientRect();
        const x = ((e.clientX - rect.left) / rect.width) * 100;
        const y = ((e.clientY - rect.top) / rect.height) * 100;
        img.style.transformOrigin = `${x}% ${y}%`;
        img.classList.add('is-zoom');
      });
      box.addEventListener('mouseleave', () => {
        img.classList.remove('is-zoom');
        img.style.transformOrigin = '50% 50%';
      });
    }
  })();
</script>

@endsection