@extends('storefront.layouts.app')
@section('title', ($product->meta_title ?: $product->title).' — '.config('shop.name'))
@section('meta_description', $product->meta_description ?: \Illuminate\Support\Str::limit(strip_tags($product->localized('short_description')), 150))

@section('content')
<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb small">
            <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('Home') }}</a></li>
            @if($product->category)<li class="breadcrumb-item"><a href="{{ route('category', $product->category->slug) }}">{{ $product->category->title }}</a></li>@endif
            <li class="breadcrumb-item active">{{ $product->title }}</li>
        </ol>
    </nav>

    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <div class="row g-4">
                {{-- Gallery --}}
                <div class="col-md-5">
                    <img id="mainImage" src="{{ $product->thumbnail_url }}" class="img-fluid rounded-3 w-100" style="aspect-ratio:1;object-fit:cover;background:#f3f3f3" alt="{{ $product->title }}">
                    @if($product->images->isNotEmpty())
                        <div class="d-flex gap-2 mt-2 flex-wrap">
                            <img src="{{ $product->thumbnail_url }}" class="rounded border thumb-pick" style="width:64px;height:64px;object-fit:cover;cursor:pointer" onclick="document.getElementById('mainImage').src=this.src">
                            @foreach($product->images as $img)
                                <img src="{{ $img->url }}" class="rounded border thumb-pick" style="width:64px;height:64px;object-fit:cover;cursor:pointer" onclick="document.getElementById('mainImage').src=this.src">
                            @endforeach
                        </div>
                    @endif
                </div>

                {{-- Info --}}
                <div class="col-md-7">
                    <h1 class="h4 fw-bold">{{ $product->title }}</h1>
                    @if($product->sku)<div class="small text-muted mb-2">SKU: {{ $product->sku }}</div>@endif

                    <div class="d-flex align-items-baseline gap-2 my-3">
                        <span class="price-now fs-3" id="priceDisplay">{{ money($product->current_price) }}</span>
                        @if($product->on_sale)
                            <span class="price-old fs-6">{{ money($product->price) }}</span>
                            <span class="badge bg-primary">-{{ $product->discount_percent }}%</span>
                        @endif
                    </div>

                    @if($product->in_stock)
                        <div class="mb-3"><span class="badge bg-success-subtle text-success"><i class="bi bi-check-circle me-1"></i>{{ __('In Stock') }}</span>
                            @if($product->is_low_stock)<span class="badge bg-warning-subtle text-warning ms-1">{{ __('Low Stock') }} ({{ $product->stock_qty }})</span>@endif
                        </div>
                    @else
                        <div class="mb-3"><span class="badge bg-danger-subtle text-danger">{{ __('Out of Stock') }}</span></div>
                    @endif

                    @if($product->localized('short_description'))
                        <p class="text-muted">{{ $product->localized('short_description') }}</p>
                    @endif

                    <form action="{{ route('cart.add') }}" method="POST" class="mt-3" id="addForm">
                        @csrf
                        <input type="hidden" name="product_id" value="{{ $product->id }}">

                        @if($product->has_variations && $product->variations->isNotEmpty())
                            <div class="mb-3" style="max-width:320px">
                                <label class="form-label fw-semibold">{{ __('Quantity') }} / Option</label>
                                <select name="variation_id" id="variationSelect" class="form-select" required>
                                    @foreach($product->variations as $v)
                                        <option value="{{ $v->id }}"
                                            data-price="{{ money($v->effectivePrice()) }}"
                                            @disabled($v->stock_qty < 1)>
                                            {{ $v->label }} — {{ money($v->effectivePrice()) }} {{ $v->stock_qty < 1 ? '('.__('Out of Stock').')' : '' }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        @endif

                        <div class="d-flex gap-2 align-items-stretch" style="max-width:420px">
                            <input type="number" name="quantity" value="1" min="1" max="{{ $product->manage_stock ? $product->stock_qty : 99 }}" class="form-control" style="width:90px" @disabled(!$product->in_stock)>
                            <button type="submit" class="btn btn-primary flex-grow-1" @disabled(!$product->in_stock)>
                                <i class="bi bi-cart-plus me-1"></i>{{ __('Add to Cart') }}
                            </button>
                            <button type="submit" name="buy_now" value="1" class="btn btn-outline-primary" @disabled(!$product->in_stock)>{{ __('Buy Now') }}</button>
                        </div>
                    </form>

                    @auth
                        <form action="{{ route('account.wishlist.toggle') }}" method="POST" class="mt-2">
                            @csrf<input type="hidden" name="product_id" value="{{ $product->id }}">
                            <button class="btn btn-sm btn-link text-decoration-none px-0"><i class="bi bi-heart me-1"></i>{{ __('Wishlist') }}</button>
                        </form>
                    @endauth

                    <div class="mt-3 small text-muted">
                        <i class="bi bi-telephone me-1"></i>{{ __('Call to Order') }}: <a href="tel:{{ settings('contact_phone') }}">{{ settings('contact_phone') }}</a>
                    </div>
                </div>
            </div>

            {{-- Description tabs --}}
            <hr class="my-4">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#desc">{{ __('Description') }}</button></li>
            </ul>
            <div class="tab-content pt-3">
                <div class="tab-pane fade show active" id="desc">
                    {!! nl2br(e($product->localized('description'))) !!}
                </div>
            </div>
        </div>
    </div>

    {{-- Related --}}
    @if($related->isNotEmpty())
        <h2 class="section-title h5 mt-5">{{ __('Related Products') }}</h2>
        <div class="row g-3">
            @foreach($related as $product)
                <div class="col-6 col-md-3">@include('storefront.partials.product-card')</div>
            @endforeach
        </div>
    @endif
</div>
@endsection

@push('scripts')
<script>
    const sel = document.getElementById('variationSelect');
    if (sel) {
        const price = document.getElementById('priceDisplay');
        const sync = () => { const o = sel.options[sel.selectedIndex]; if (o && o.dataset.price) price.textContent = o.dataset.price; };
        sel.addEventListener('change', sync); sync();
    }
</script>
@endpush