@extends('website.layouts.master')

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

@section('content')

    <!-- Breadcrumb Section Start -->
    <section class="breadscrumb-section pt-0">
        <div class="container-fluid-lg">
            <div class="row">
                <div class="col-12">
                    <div class="breadscrumb-contain">
                        <h2>{{$reference->name}}</h2>
                        <nav>
                            <ol class="breadcrumb mb-0">
                                <li class="breadcrumb-item">
                                    <a href="{{route('web.index')}}">
                                        <i class="fa-solid fa-house"></i>
                                    </a>
                                </li>

                                <li class="breadcrumb-item active">{{$reference->name}}</li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Breadcrumb Section End -->

    <!-- Product Left Sidebar Start -->
    <section class="product-section">
        <div class="container-fluid-lg">
            <div class="row">
                <div class="col-xxl-9 col-xl-8 col-lg-7 wow fadeInUp">
                    <div class="row g-4">
                        <div class="col-xl-6 wow fadeInUp">
                            <div class="product-left-box">
                                <div class="row g-sm-4 g-2">
                                    <div class="col-12">
                                        <div class="product-main no-arrow">
                                            @foreach($reference->images as $image)
                                                <a href="{{$image->url}}" class="image-link">
                                                <img src="{{$image->url}}"
                                                     data-zoom-image="{{$image->url}}" class="
                                                        img-fluid image_zoom_cls-{{$loop->index}} blur-up lazyload" alt="{{$image->name}}">
                                                </a>

                                            @endforeach
                                        </div>
                                    </div>

                                    <div class="col-12">
                                        <div class="left-slider-image left-slider no-arrow slick-top">
                                            @foreach($reference->images as $image)
                                                <div>
                                                    <div class="sidebar-image">
                                                        <img src="{{$image->url}}"
                                                             class="img-fluid blur-up lazyload" alt="{{$image->name}}">
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-xl-6 wow fadeInUp">
                            <div class="right-box-contain">
                                @if( $reference->is_best==1)<h6 class="offer-top">SPECIAL OFFER</h6>@endif
                                <h2 class="name">{{$reference->name}}</h2>
                                <div class="price-rating">
                                    <h3 class="theme-color price">{{\App\Helpers\AppHelper::priceFormat($reference->detail)}} TND{{--<del class="text-content">$58.46</del>--}} {{--<span
                                                class="offer theme-color">(8% off)</span>--}}</h3>
                                    <div class="product-rating custom-rate">
                                        <ul class="rating">
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                        </ul>

                                    </div>
                                </div>

                                <div class="procuct-contain">
                                    <p>{!! $reference->metadescription !!}
                                    </p>
                                </div>
                                @if($reference->variations->count()>1)
                                <div class="product-packege">
                                    <div class="product-title">
                                        <h4>Variation</h4>
                                    </div>
                                    <ul class="select-packege">
                                        @foreach($reference->variations as $var)
                                        <li>
                                            <label for="taste{{$var->id}}"><a href="javascript:void(0)" class="">{{$var->taste_name}}
                                                    <input type="radio" name="taste_id" value="{{$var->id}}" id="taste{{$var->id}}"></a></label>

                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif





                                <div class="note-box product-packege">


                                    <button onclick="location.href = 'cart.html';"
                                            class="btn btn-md bg-dark cart-button text-white ">AJOUTER AU PANIER</button>
                                </div>

{{--                                <div class="buy-box">--}}
{{--                                    <a href="wishlist.html">--}}
{{--                                        <i data-feather="heart"></i>--}}
{{--                                        <span>Add To Wishlist</span>--}}
{{--                                    </a>--}}

{{--                                    <a href="compare.html">--}}
{{--                                        <i data-feather="shuffle"></i>--}}
{{--                                        <span>Add To Compare</span>--}}
{{--                                    </a>--}}
{{--                                </div>--}}

                                <div class="pickup-box">


                                    <div class="product-info">
                                        <ul class="product-info-list product-info-list-2">
                                            <li>Brand : <a href="/shop?brands[]={{$reference->brand_id}}">{{$reference->brand_name}}</a></li>
                                            <li>Type : <a href="/shop?categories[]={{$reference->category_id}}">{{$reference->category_name}}</a></li>
                                            <li>Details : <a href="javascript:void(0)">{{$reference->value}} - {{$reference->unity}}</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="paymnet-option">
                                    <div class="product-title">
                                        <h4>Guaranteed Safe Checkout</h4>
                                    </div>
                                    <ul>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <img src="../assets/images/product/payment/1.svg"
                                                     class="blur-up lazyload" alt="">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <img src="../assets/images/product/payment/2.svg"
                                                     class="blur-up lazyload" alt="">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <img src="../assets/images/product/payment/3.svg"
                                                     class="blur-up lazyload" alt="">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <img src="../assets/images/product/payment/4.svg"
                                                     class="blur-up lazyload" alt="">
                                            </a>
                                        </li>
                                        <li>
                                            <a href="javascript:void(0)">
                                                <img src="../assets/images/product/payment/5.svg"
                                                     class="blur-up lazyload" alt="">
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xxl-3 col-xl-4 col-lg-5 d-none d-lg-block wow fadeInUp">
                    <div class="right-sidebar-box">
                        <div class="vendor-box">
                            <div class="verndor-contain">
                                <div class="vendor-image">
                                    <a href="/shop?brands[]={{$reference->brand->id}}"><img src="{{$reference->brand->default_image_url}}" class="blur-up lazyload" alt=""></a>
                                </div>

                                <div class="vendor-name">
                                    <h5 class="fw-500">{{$reference->brand->name}}.</h5>

                                    <div class="product-rating mt-1">
                                        <ul class="rating">
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                            <li>
                                                <i data-feather="star" class="fill"></i>
                                            </li>
                                        </ul>

                                    </div>

                                </div>
                            </div>

                            <p class="vendor-detail">

                                Vous pouvez toujours nous contacter par  téléphone ou e-mail pour toute question relative à ce produit
                            </p>

                            <div class="vendor-list">
                                <ul>
                                    <li>
                                        <div class="address-contact">
                                            <i data-feather="map-pin"></i>
                                            <h5>Address: <span class="text-content">29 Rue Habib Bougatfa  </span>
                                                <br><span class="text-content">Bardo 2000 - Tunisie </span></h5>
                                        </div>
                                    </li>

                                    <li>
                                        <div class="address-contact">
                                            <i data-feather="headphones"></i>
                                            <h5>Contact Seller: <span class="text-content">+216 54 54 07 54</span></h5>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="pt-25">
                            <div class="hot-line-number">
                                <h5>Service de livraison:</h5>
                                <h6>Lun - Sam: 08:00  - 19:00</h6>
                                <h3>+216 54 54 07 54</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Product Left Sidebar End -->



    <!-- Nav Tab Section Start -->
    <section>
        <div class="container-fluid-lg">
            <div class="row">
                <div class="col-12">
                    <div class="product-section-box m-0">
                        <ul class="nav nav-tabs custom-nav" id="myTab" role="tablist">
                            <li class="nav-item" role="presentation">
                                <button class="nav-link active" id="description-tab" data-bs-toggle="tab"
                                        data-bs-target="#description" type="button" role="tab" aria-controls="description"
                                        aria-selected="true">Description</button>
                            </li>


                        </ul>

                        <div class="tab-content custom-tab" id="myTabContent">
                            <div class="tab-pane fade show active" id="description" role="tabpanel"
                                 aria-labelledby="description-tab">
                                <div class="product-description">

                                    <div class="nav-desh">
                                        {!! $reference->description !!}
                                    </div>




                                </div>
                            </div>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Nav Tab Section End -->

    <!-- Releted Product Section Start -->
    <section class="product-list-section section-b-space">
        <div class="container-fluid-lg">
            <div class="title">
                <h2>Related Products</h2>
                <span class="title-leaf">
                    <svg class="icon-width">
                        <use xlink:href="../assets/svg/leaf.svg#leaf"></use>
                    </svg>
                </span>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="slider-6_1 product-wrapper">

                        @foreach($products as $product)

                                @include('website.components.product-card', ['product' => $product])

                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Releted Product Section End -->

@endsection

@section('script')

    <script src="{{asset('assets/libs/magnific-popup/jquery.magnific-popup.min.js')}}"></script>
    <script>
        $('.nav-desh table').addClass('table ');
        $('.nav-desh img').css('max-height','250px');
        $('.nav-desh img').css('width','auto');
        $('.nav-desh img').css({"display":"block","margin-left":"auto","margin-right":"auto"});
        $('.image-link').magnificPopup({type:'image'});

    </script>
@endsection