@extends('layouts.app')
@section('title', $product->name . ' - AVIOBOOTS')

@section('content')
@php $primaryImage = asset($product->publicImagePath()); @endphp
<main class="container product-page" style="padding: 4rem 2rem; max-width:1200px;">
    <div class="product-detail-grid product-page-grid">
        <div class="product-left">
            <div class="main-gallery">
                <img id="main-image" class="product-main-image" src="{{ $primaryImage }}" alt="{{ $product->name }}" style="width:100%; height:500px; object-fit:cover; border-radius:16px;">
            </div>
            <div id="thumbnails" class="product-thumbnails" style="display:flex; gap:1rem; margin-top:1.5rem; overflow-x:auto; padding:1rem 0;">
                @foreach($gallery as $i => $img)
                    <img class="thumbnail {{ $i === 0 ? 'active' : '' }}" src="{{ asset($img) }}" data-img="{{ asset($img) }}" alt="">
                @endforeach
            </div>
        </div>

        <div class="product-right">
            <h1>{{ $product->name }}</h1>
            <div class="product-price-large product-price-display" style="font-size:2.5rem; font-weight:300; margin:1rem 0;">Rs {{ number_format($product->price, 0) }}</div>
            <p style="color:#777; text-transform:uppercase; letter-spacing:2px;">Category: {{ $product->category }}</p>

            <div class="product-spec-grid" style="display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:1rem; margin:2rem 0;">
                <div><strong>Material:</strong> Full-grain leather</div>
                <div><strong>Sole:</strong> Goodyear welt</div>
                <div><strong>Lining:</strong> Soft leather</div>
                <div><strong>Origin:</strong> Tuscany, Italy</div>
            </div>

            <form id="addForm">
                @csrf
                <input type="hidden" name="product_id" value="{{ $product->id }}">
                <div class="size-section">
                    <label>Size:</label>
                    <div class="size-buttons" style="display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0;">
                        @foreach(['US 9','US 10','US 11','EU 42','EU 43','EU 44'] as $i => $s)
                            <button type="button" class="size-btn {{ $i === 0 ? 'active' : '' }}" data-size="{{ $s }}">{{ $s }}</button>
                        @endforeach
                    </div>
                    <input type="hidden" name="size" id="sizeInput" value="US 9">
                </div>
                <button type="submit" class="btn" style="width:100%; padding:1.2rem; font-size:1.1rem; margin-bottom:1rem;">ADD TO CART</button>
            </form>
            <a href="{{ route('cart.index') }}" class="btn btn-secondary" style="width:100%; display:block; text-align:center; padding:1rem;">VIEW CART</a>

            <div class="description">
                <p style="margin-top:2rem; line-height:1.7; font-size:1.05rem;">Premium craftsmanship with full-grain leather upper and hand-stitched details. Designed for all-day comfort and long-lasting durability.</p>
            </div>
        </div>
    </div>

    <div class="tabs-section product-tabs-section" style="margin-top:4rem;">
        <div class="tab-buttons product-tab-buttons" style="display:flex; border-bottom:2px solid #eee; margin-bottom:2rem;">
            <button class="tab-btn active" data-tab="description">Description</button>
            <button class="tab-btn" data-tab="shipping">Shipping</button>
            <button class="tab-btn" data-tab="returns">Returns</button>
        </div>
        <div id="description" class="tab-content active"><p>Premium bespoke handmade leather shoes crafted with full-grain leather and hand-stitched details.</p></div>
        <div id="shipping" class="tab-content">
            <p><strong>Made to Order:</strong> Each pair is handcrafted specifically for you after your order is placed. Production time is 2-4 weeks.</p>
            <p style="margin-top:.75rem;"><strong>Delivery:</strong> Cash on delivery available across Pakistan.</p>
        </div>
        <div id="returns" class="tab-content">
            <p style="font-weight:600; color:#c00;">NO RETURN | NO REFUND</p>
            <p style="margin-top:.75rem;">Since every pair is made to order exclusively for you, we do not accept returns or issue refunds.</p>
            <p style="margin-top:.75rem;"><strong>SIZE EXCHANGE ONLY:</strong> Size exchange requests must be raised within 7 days of delivery.</p>
        </div>
    </div>

    @if($related->count())
    <section class="section fade-in" style="margin-top:4rem;">
        <h2 class="section-title">YOU MAY ALSO LIKE</h2>
        <div class="products-grid">
            @foreach($related as $p)
                @include('partials.product-card', ['product' => $p])
            @endforeach
        </div>
    </section>
    @endif
</main>
@endsection