@extends('layouts.webLayoutMaster')

@section('meta')
<meta name="description" content="{{ $product->name }} , Savor Tuscany's finest: regional food, wine tasting in Florence, wine stores, wine&bar, bar and wine, and exclusive wine tours. Taste the essence of Italy!">
<meta name="keywords" content="{{ $product->name }} , Vino Nobile di Montepulciano D.O.C.G 2018, Italian wine, Tuscan wine, Vino Tasting, buy wine online, D.O.C.G wine, 2018 wine vintage, Italian red wine, Montepulciano wine, fine wine">
@endsection

@section('canonical')
<link rel="canonical" href="https://www.vino-tasting.com/product/{{ $product->slug }}" />
@endsection

@section('title')
- {{ $product->name }}
@endsection

@section('css')
{{-- <style>
    .custom-image-slider {
        width: 305px;
        height: 920px;
        object-fit: cover;
    }

    .custom-image-gallery {
        width: 165px;
        height: 320px;
        object-fit: cover;
    }

    .custom-line-height {
        line-height: 0.3 !important;
    }
</style> --}}
@endsection

@section('content')
<!-- banner of the page -->
{{-- <section class="">
    <div class="container">
        <div class="row">
            <div class="col-xs-12 text-center py-5">
                <h1 class="heading text-uppercase">{{ $product->name }}</h1>
                <ul class="list-unstyled breadcrumbs text-dark">
                    <li><a class="text-dark" href="{{ route('home') }}">Home</a></li>
                    <li>/</li>
                    <li><a class="text-dark" href="{{ route('shop') }}">Shop</a></li>
                    <li>/</li>
                    <li>{{ $product->name }}</li>
                </ul>
            </div>
        </div>
    </div>
</section> --}}

<!-- shop detail of the page -->
<section class="section product-detail-section">
    <div class="container">
        
        <!-- Top Breadcrumb/Back link -->
        <div class="product-breadcrumb">
            <a href="{{ route('shop') }}">&larr; Back to Shop</a>
        </div>

        <!-- Main Product Grid Container -->
        <div class="product-detail">

            <!-- Left Column: Gallery -->
            <div class="gallery-column">
                <div class="gallery-main">
                    <div class="product-slider">
                        @foreach ($product->limitedImages as $image)
                        <div class="slide">
                            <img src="{{ asset('upload/product/' . $product->id . '/' . $image->name) }}"
                                alt="{{ $product->name }}" class="img-responsive">
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>

            <!-- Right Column: Product Details -->
            <div class="info-column">
                @if($product->region)
                    <p class="eyebrow">{{ $product->region }}</p>
                @endif

                <h1 class="product-title">{{ $product->name }}</h1>

                <div class="rating">{{ str_repeat('★', 5) }} 4.8</div>

                <div class="price-tag">€{{ number_format($product->price, 2) }}</div>

                <ul class="spec-list">
                    <li><span>Category:</span> {{ $product->category->name ?? '-n/a-' }}</li>
                    <li><span>Type:</span> {{ $product->type ?? '-n/a-' }}</li>
                    <li><span>Vintage:</span> {{ $product->vintage ?? '-n/a-' }}</li>
                    <li><span>Flavor:</span> {{ $product->flavor ?? '-n/a-' }}</li>
                    <li><span>Alcohol:</span> {{ $product->alcohol ?? '-n/a-' }}</li>
                    <li><span>Format:</span> {{ $product->format ?? '-n/a-' }}</li>
                    <li><span>Serving Temperature:</span> {{ $product->serving_temperature ?? '-n/a-' }}</li>
                    <li><span>Region:</span> {{ $product->region ?? '-n/a-' }}</li>
                    <li><span>Availability:</span> {{ $product->quantity ?? '0' }} in stock</li>
                </ul>

                <!-- Add to Cart Form -->
                <form action="{{ route('add-to-member-cart') }}" class="cart-form" method="POST">
                    @csrf
                    <input type="hidden" name="product_id" value="{{ $product->id }}">
                    <input class="qty-input" type="number" name="quantity" value="1" min="1"
                        max="{{ $product->quantity }}" placeholder="1">
                    <button type="submit" class="btn">Add to Cart</button>
                </form>

                <!-- Product Accordions -->
                <div class="product-accordions">
                    <details class="accordion-item" open>
                        <summary class="accordion-header">
                            Product Description
                            <span class="icon">+</span>
                        </summary>
                        <div class="accordion-content">
                            <p>{{ $product->description }}</p>
                        </div>
                    </details>

                    <details class="accordion-item">
                        <summary class="accordion-header">
                            History
                            <span class="icon">+</span>
                        </summary>
                        <div class="accordion-content">
                            <p>{{ $product->history }}</p>
                        </div>
                    </details>

                    <details class="accordion-item">
                        <summary class="accordion-header">
                            Area of Production
                            <span class="icon">+</span>
                        </summary>
                        <div class="accordion-content">
                            <p>{{ $product->area_of_production }}</p>
                        </div>
                    </details>
                </div>

            </div>
        </div>
    </div>
</section>
<!-- feature sec of the page -->
@endsection

@section('js')
@endsection