@extends('layouts.app')

@section('title', env('APP_NAME') . ' - ' . $product->name)

@push('hreflangs')
    @foreach($hreflangs as $item)
        <link rel="alternate" hreflang="{{ $item['locale'] }}" href="{{ $item['url'] }}">
    @endforeach
@endpush


@section('content')
<div class="ht__bradcaump__area" style="background: rgba(0, 0, 0, 0) url({{ asset('assets/images/bg/2.jpg') }}) no-repeat scroll center center / cover ;">
    <div class="ht__bradcaump__wrap_small">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bradcaump__inner text-center">
                        <h1 class="bradcaump-title">{{ $product->name }}</h1>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<section class="htc__product__details product-details-style2 pt--120 pb--100 bg__white">
    <div class="container productbox">
        <div class="row">
            <!-- Images produit -->
            <div class="col-md-7 ">
                <div class="product__details__container">
                    <div class="product__big__images">
                        <div class="portfolio-full-image tab-content">
                            @foreach($product->images as $index => $image)
                            <div class="tab-pane fade {{ $index === 0 ? 'show active' : '' }}" id="img-tab-{{ $index }}">
                                <img src="{{ asset('storage/images/products/' . $product->id . '/' . $image->image) }}" alt="Product image">
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <!-- Thumbnails -->
                    @if($product->images && count($product->images) > 1)
                    <ul class="product__small__images nav" role="tablist">
                        @foreach($product->images as $index => $image)
                        <li role="presentation" class="pot-small-img">
                            <a class="{{ $index === 0 ? 'active' : '' }}" href="#img-tab-{{ $index }}" role="tab" data-bs-toggle="tab">
                                <img src="{{ asset('storage/images/products/' . $product->id . '/thumb/' . $image->image) }}" alt="Thumb image">
                            </a>
                        </li>
                        @endforeach
                    </ul>
                    @endif
                </div>
            </div>

            <!-- Infos produit -->
            <div class="col-md-5 ">
                <div class="htc__product__details__inner">
                    <div class="pro__detl__title1">
                        <h2 class="fs-5 d-none d-md-block d-lg-block d-xl-block">{{ $product->name }}</h2>
                        <p class="text-muted">Ref: {{ $product->reference }}</p>
                    </div>

                    <div class="pro__details ">
                        {{ Str::limit($product->description, 300) }}
                        <p><a href="#productdescription" class="readmore text-primary">{{ __('shop.readmore') }}</a></p>
                    </div>

                    <ul class="pro__dtl__prize">
                        @if($product->discount)
                        <li class="old__prize">{{ number_format($product->price, 2) }} €</li>
                        <li>
                            {{ number_format($product->discount_type === 'percentage' ? $product->price * (1 - $product->discount / 100) : $product->price - $product->discount, 2) }} €
                        </li>
                        @else
                        <li>{{ number_format($product->price, 2) }} €</li>
                        @endif
                    </ul>


                    <div class="product-action-wrap">
                        <div class="prodict-statas mb-2">
                            <span>{{ __('shop.cart_quantity') }} :</span>
                        </div>
                        <div class="col-md-2 col-4 text-center mt-2 mt-md-0">
                            <div class="input-group input-group-sm quantity-control product-quantity-box" style="width: 110px;">
                                <button class="btn btn-outline-secondary quantity-btn minus rounded-circle me-2" type="button"
                                    data-id="{{ $product->id }}" data-action="decrease">
                                    <i class="bi bi-dash-lg"></i>
                                </button>
                                <span class="input-group-text bg-white border-secondary px-2 border-0 quantity_product">1</span>
                                <button class="btn btn-outline-secondary quantity-btn plus rounded-circle ms-2" type="button" data-action="increase">
                                    <i class="bi bi-plus-lg"></i>
                                </button>
                            </div>
                        </div>
                    </div>


                    <ul class="pro__dtl__btn">
                        <li class="buy__now__btn"><a href="#" class="add-product-to-cart" data-quantity="1" data-url="{{ route('cart.add', ['id' => $product->id, 'locale' => app()->getLocale()]) }}">{{ __('shop.addtocart') }}</a></li>
                    </ul>

                    <!-- <div class="pro__social__share">
                        <h2>{{ __('Share') }} :</h2>
                        <ul class="pro__soaial__link">
                            <li><a href="#"><i class="zmdi zmdi-twitter"></i></a></li>
                            <li><a href="#"><i class="zmdi zmdi-instagram"></i></a></li>
                            <li><a href="#"><i class="zmdi zmdi-facebook"></i></a></li>
                            <li><a href="#"><i class="zmdi zmdi-google-plus"></i></a></li>
                        </ul>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</section>
<section class="htc__product__details__tab bg__white pb--120">
    <div class="container">
        <div class="row">
            <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12">
                <ul class="product__deatils__tab mb--60" role="tablist">
                    <li role="presentation">
                        <a class="active" href="#description" role="tab" data-bs-toggle="tab">{{ __('shop.description') }}</a>
                    </li>
                    <li role="presentation">
                        <a href="#features" role="tab" data-bs-toggle="tab">{{ __('shop.features') }}</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="product__details__tab__content">
                    <!-- Start Single Content -->
                    <div role="tabpanel" id="description" class="product__tab__content fade show active">
                        <div class="product__description__wrap">
                            <div class="product__desc" id="productdescription">
                                {!! nl2br($product->description) !!}
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" id="features" class="product__tab__content fade">
                        <div class="pro__feature">
                            <ul class="feature__list">
                                @if($product->brand)
                                <li><i class="zmdi zmdi-play-circle"></i> {{ __('shop.brand') }} : {{ $product->brand }}</li>
                                @endif
                                @if($product->size)
                                <li><i class="zmdi zmdi-play-circle"></i> {{ __('shop.size') }} : {{ $product->size }}</li>
                                @endif
                                @if($product->diameter && $product->diameter != 'N/A')
                                <li><i class="zmdi zmdi-play-circle"></i> {{ __('shop.diameter') }} : {{ $product->diameter }}</li>
                                @endif
                                @if($product->tension && $product->tension != 'N/A')
                                <li><i class="zmdi zmdi-play-circle"></i> {{ __('shop.tension') }} : {{ $product->tension }}</li>
                                @endif
                                @if($product->material && $product->material != 'N/A')
                                <li><i class="zmdi zmdi-play-circle"></i> {{ __('shop.material') }} : {{ $product->material }}</li>
                                @endif
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
</section>

<!-- Cart Toast -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 9999">
    <div id="cartToast" class="toast align-items-center text-bg-success border-0" role="alert">
        <div class="d-flex">
            <div class="toast-body" id="cart-toast-message">
                {{ __('shop.product_added') }} 132
            </div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('assets/js/product.js') }}"></script>
@endsection