@extends('layouts.app')

@php
    use Illuminate\Support\Str;

    $title = $product->meta_title ?: $product->name;
    $desc  = $product->meta_description ?: Str::limit(strip_tags($product->short_description ?? ''), 160);

    // generează keywords din nume + brand + categorii (fallback elegant dacă nu avem coloană)
    $kwParts = [];
    $kwParts[] = $product->name;
    if ($product->brand?->name) { $kwParts[] = $product->brand->name; }
    foreach ($product->categories as $cat) { $kwParts[] = $cat->name; }
    $kw = implode(', ', array_unique(array_filter($kwParts)));
@endphp

@section('title', $title)
@section('meta_description', $desc)
@section('meta_keywords', $kw)   {{-- merge cu layoutul pe care l-am pus mai devreme --}}
@section('meta_canonical', route('product.show', $product->slug))
@include('partials.ld-product', ['product'=>$product])

@section('content')
    <!-- Dettagli Prodotto -->
    <section class="shop-details-section section-padding fix shop-bg">
        <div class="container">
            <div class="shop-details-wrapper">
                <div class="row g-4">
                    <div class="col-lg-6">
                        @php
                            // Galleria: immagine principale + restanti in ordine
                            $gallery = collect();
                            if ($product->mainImage) { $gallery->push($product->mainImage); }
                            if ($product->images && $product->images->count()) {
                                $gallery = $gallery->merge($product->images->sortBy('pivot.position'));
                            }
                        @endphp

                        <div class="shop-details-image">
                            <div class="tab-content">
                                @forelse($gallery as $i => $img)
                                    @php
                                        $disk = $img->disk ?? 'public';
                                        $big  = Storage::disk($disk)->url($img->path);
                                    @endphp
                                    <div id="thumb{{ $i }}" class="tab-pane fade {{ $i === 0 ? 'show active' : '' }}">
                                        <div class="shop-thumb img-box">
                                            <img src="{{ $big }}" alt="{{ $img->alt ?? $product->name }}">
                                        </div>
                                    </div>
                                @empty
                                    <div id="thumb0" class="tab-pane fade show active">
                                        <div class="shop-thumb img-box">
                                            <img src="{{ asset('assets/img/product/placeholder.jpg') }}" alt="{{ $product->name }}">
                                        </div>
                                    </div>
                                @endforelse
                            </div>

                            <ul class="nav gallery-thumbs">
                                @foreach($gallery as $i => $img)
                                    @php
                                        $disk = $img->disk ?? 'public';
                                        $thumb = data_get($img->meta, 'thumb_312x340') ?: $img->path;
                                        $thumbUrl = Storage::disk($disk)->url($thumb);
                                    @endphp
                                    <li class="nav-item">
                                        <a href="#thumb{{ $i }}" data-bs-toggle="tab" class="nav-link {{ $i === 0 ? 'ps-0 active' : '' }}">
                                            <img src="{{ $thumbUrl }}" alt="{{ $img->alt ?? $product->name }}">
                                        </a>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-6">
                        <div class="product-details-content">
                            <h3 class="pb-3">{{ $product->name }}</h3>

                            @if($product->short_description)
                                <p class="mb-3">{!! nl2br(e($product->short_description)) !!}</p>
                            @endif

                            <div class="price-list mb-4">
                                <h3>
                                    {{ number_format((float)$product->price, 2, ',', '.') }} €
                                </h3>
                            </div>

                            {{-- Niente quantità, niente share: solo acquisto --}}
                            <div class="shop-btn">
                                <button type="button"
                                        class="theme-btn js-buy-now"
                                        data-url="{{ route('cart.add', $product) }}"
                                        data-goto="{{ route('cart.index') }}">
                                    <i class="fa-regular fa-bag-shopping"></i>
                                    <span>Acquista ora</span>
                                </button>
                            </div>


                            {{-- Categorie / Brand --}}
                            @if($product->categories->count())
                                <h6 class="details-info">
                                    <span>Categorie:</span>
                                    @foreach($product->categories as $cat)
                                        <a href="{{ route('category.show', $cat->slug) }}">{{ $cat->name }}</a>@if(!$loop->last), @endif
                                    @endforeach
                                </h6>
                            @endif
                            @if($product->brand)
                                <h6 class="details-info style-2"><span>Marca:</span> <a href="#">{{ $product->brand->name }}</a></h6>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Sezione Tab (Descrizione + Info aggiuntive) -->
    <section class="single-tab-section section-padding fix pt-0">
        <div class="container">
            <div class="single-tab">
                <ul class="nav mb-5">
                    <li class="nav-item">
                        <a href="#description" data-bs-toggle="tab" class="nav-link ps-0 active"><h6>Descrizione</h6></a>
                    </li>
                    <li class="nav-item">
                        <a href="#additional" data-bs-toggle="tab" class="nav-link"><h6>Informazioni aggiuntive</h6></a>
                    </li>
                </ul>

                <div class="tab-content">
                    <div id="description" class="tab-pane fade show active">
                        <div class="description-items">
                            <div class="row">
                                <div class="col-xl-12">
                                    <div class="description-content">
                                        <h3>Descrizione prodotto</h3>
                                        <div class="prose">
                                            {!! nl2br(e($product->long_description ?: $product->short_description ?: '')) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="additional" class="tab-pane fade">
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <tbody>
                                <tr>
                                    <td>Spedizione</td>
                                    <td>{{ $product->shipping_info ?: '—' }}</td>
                                </tr>
                                {{-- Campi interni rimossi su richiesta --}}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- Prodotti correlati --}}
    @if($related->count())
        <section class="product-collection-section-2 section-padding pt-1 fix">
            <div class="container">
                <div class="section-title style-2 text-center">
                    <h6 class="sub-title wow fadeInUp">Potrebbe interessarti</h6>
                    <h2 class="wow fadeInUp" data-wow-delay=".3s">Prodotti correlati</h2>
                </div>

                <div class="row">
                    @foreach($related as $rp)
                        @php
                            $rimg = $rp->mainImage;
                            $rdisk = $rimg->disk ?? 'public';
                            $rthumb = $rimg ? (data_get($rimg->meta, 'thumb_312x340') ?: $rimg->path) : null;
                            $rurl = $rimg ? Storage::disk($rdisk)->url($rthumb) : asset('assets/img/product/default.webp');
                        @endphp
                        <div class="col-xl-3 col-lg-4 col-md-6">
                            <div class="product-collection-item">
                                <div class="product-image">
                                    <a href="{{ route('product.show', $rp->slug) }}">
                                        <img src="{{ $rurl }}" alt="{{ $rp->name }}">
                                    </a>
                                    <div class="product-btn">
                                        <a href="{{ route('product.show', $rp->slug) }}" class="theme-btn-2 style-2">Vedi</a>
                                    </div>
                                </div>
                                <div class="product-content">
                                    @if($rp->brand)<p>{{ $rp->brand->name }}</p>@endif
                                    <h4><a href="{{ route('product.show', $rp->slug) }}">{{ $rp->name }}</a></h4>
                                    <ul class="doller">
                                        <li>{{ number_format((float)$rp->price, 2, ',', '.') }} €</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

            </div>
        </section>
    @endif
@endsection

@push('styles')
    <style>
        /* ===== Imagine mare produs – simplă și stabilă ===== */
        .shop-details-image .shop-thumb{
            min-height: 0 !important;
        }

        .shop-details-image .shop-thumb.img-box{
            width: 100%;
            background: #fff;
            border: 1px solid #eee;
            border-radius: .5rem;
            overflow: hidden;
            margin: 0 auto;
            padding: 0;
            display: block;
        }

        .shop-details-image .shop-thumb.img-box img{
            display: block;
            width: 100% !important;
            height: auto !important;
            max-width: 100% !important;
            max-height: none !important;
            object-fit: contain;
            margin: 0 auto;
            transform: none !important;
        }

        /* ===== Thumbnail-uri ===== */
        .shop-details-image .gallery-thumbs{
            display: flex;
            flex-wrap: wrap;
            gap: .5rem;
            margin-top: .75rem;
        }
        .shop-details-image .gallery-thumbs .nav-item{
            flex: 0 0 auto;
        }
        .shop-details-image .gallery-thumbs .nav-link{
            padding: 0;
            border: none;
        }
        .shop-details-image .gallery-thumbs img{
            display: block;
            width: 90px;
            height: auto;
            border-radius: .35rem;
            border: 1px solid #eee;
        }

        @media (max-width: 575.98px){
            .shop-details-image .gallery-thumbs img{
                width: 72px;
            }
        }

        /* ===== Patch special pentru iOS Safari (iPhone) ===== */
        @supports (-webkit-touch-callout: none) {
            @media (max-width: 768px){
                .shop-details-image .shop-thumb.img-box{
                    height: auto !important;
                    min-height: 0 !important;
                }
                .shop-details-image .shop-thumb.img-box img{
                    width: 100% !important;
                    height: auto !important;
                    max-height: none !important;
                    object-fit: contain !important;
                    transform: none !important;
                }
                .shop-details-image .gallery-thumbs img{
                    width: 72px !important;
                    height: auto !important;
                    object-fit: contain !important;
                }
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';

            // "Compra" = add + go to cart
            document.addEventListener('click', async (e)=>{
                const btn = e.target.closest('.js-buy-now');
                if(!btn) return;
                btn.disabled = true;

                try{
                    await fetch(btn.dataset.url, {
                        method:'POST',
                        headers:{
                            'X-Requested-With':'XMLHttpRequest',
                            'Accept':'application/json',
                            'X-CSRF-TOKEN': csrf,
                            'Content-Type':'application/x-www-form-urlencoded'
                        },
                        body:'_token=' + encodeURIComponent(csrf)
                    });
                }catch(_){/* nu stricăm experiența */ }

                window.location.href = btn.dataset.goto; // mergem în carrello
            });
        });
    </script>
@endpush