@extends('layouts.app')
@section('head')
    <style>
        .img img {
            height: 390px;
            object-fit: cover;
            width: 605px;
            object-position: bottom;
        }

        .product-about .actions .vs-btn {
            flex: 0;
        }

        .discount {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            line-height: 1.5;
            padding: 7px;
        }

        .vs-btn {
            padding: 17px 15px;
            margin-left: 3px;
        }

        .discount a:hover {
            color: #fff;
        }
    </style>
@endsection
@section('content')
    <div class="breadcumb-wrapper" data-bg-src="{{ $category->has_cover ? $category->cover : asset('assets/img/breadcumb/breadcumb-bg-3.jpg')}}">
        <div class="container z-index-common">
            <div class="breadcumb-content"><h1 class="breadcumb-title">{{ $product->h1 ?? $product->title }} </h1>
                <div class="breadcumb-menu-wrap" aria-label="Breadcrumb">
                    <ul class="breadcumb-menu" itemscope itemtype="http://schema.org/BreadcrumbList">
                        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{route('index')}}" itemprop="item"><span itemprop="name"> @lang('Accueil') </span>
                                <meta itemprop="position" content="1"/>
                            </a></li>
                        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{route('search')}}" itemprop="item"><span itemprop="name"> @lang('Nos soins') </span>
                                <meta itemprop="position" content="2"/>
                            </a></li>
                        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a href="{{ $category->url }}" itemprop="item"><span itemprop="name"> {{ $category->name }} </span>
                                <meta itemprop="position" content="3"/>
                            </a></li>
                        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><span itemprop="name">{{ $product->h1 ?? $product->title }}</span>
                            <meta itemprop="position" content="4"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <section class="vs-product-wrapper product-details space-top space-extra-bottom">
        <div class="container">
            <div class="row gx-60">
                <div class="col-lg-6">
                    <div class="product-big-img vs-carousel" data-slide-show="1" data-fade="true" data-asnavfor=".product-thumb-slide">
                        <div class="img"><img src="{{ $product->cover }}" alt="{{ $product->title }}" title="{{ $product->title }}" width="603" height="390"></div> @foreach($product->images as $img)
                            <div class="img"><img src="{{ $img['big'] }}" alt="{{ $product->title }}" title="{{ $product->title }}"></div>
                        @endforeach </div>
                    <div class="product-thumb-slide row vs-carousel" data-slide-show="4" data-md-slide-show="4" data-sm-slide-show="3" data-xs-slide-show="3" data-asnavfor=".product-big-img">
                        <div class="col-3">
                            <div class="thumb"><img src="{{ $product->cover }}" alt="{{ $product->title }}" title="{{ $product->title }}" width="135" height="100"></div>
                        </div> @foreach($product->images as $img)
                            <div class="col-3">
                                <div class="thumb"><img src="{{ $img['big'] }}" alt="{{ $product->title }}" title="{{ $product->title }}" width="135" height="100"></div>
                            </div>
                        @endforeach </div>
                </div>
                <div class="col-lg-6 align-self-center">
                    <div id=product-app>

                        <div class="product-about"><span class="product-title">{{ $product->title }}</span>
                            <p class="product-text"> {{ $product->description_short }} </p>
                            @if($product->on_demand)
                                @if(!$product->consultation)
                                    <div class="actions align-items-baseline justify-content-between"><a href="tel:{{ $product->phone }}" class="vs-btn">@lang("Réserver")</a></div>
                                @endif
                            @else
                                @foreach($product->combinations as $combination)
                                    @if(!$combination->is_deal)
                                        <span> {{ $combination->title }} </span><br>
                                        <div class="actions align-items-baseline justify-content-between">
                                            <i class="fas fa-user-alt text-theme"></i> {{ $combination->persons }} <i class="far fa-clock text-theme"></i> {{ $combination->human_duration }} -
                                            @if($combination->promotion->value == \App\Enums\Promotion::promotion->value)
                                                <del>{{ number_format($combination->price,2) }}€</del> <span class="price-xl">{{ number_format($combination->price_promotion,2) }}€ </span>
                                                <div class="d-flex">
                                                    <div class="discount">
                                                        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" focusable="false" role="img" fill="#fff">
                                                            <path d="M14.25 29.96c-.51 0-1.02-.19-1.41-.58L2.63 19.16a2.01 2.01 0 0 1 0-2.83L16.38 2.59c.38-.38.88-.59 1.41-.59H28a2 2 0 0 1 2 2v10.21a2 2 0 0 1-.58 1.41L15.66 29.37a2 2 0 0 1-1.41.59zM17.79 4 4.04 17.75l10.21 10.2L28 14.21V4H17.79zm2.71 11a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3z"></path>
                                                        </svg>
                                                        <span> {{ $combination->getPromoReductionPourcentage() }}% @lang("de réduction") <br>@lang("Vous gagnez") {{round($combination->price - $combination->price_promotion )}} €</span>
                                                        @if(!$product->consultation)
                                                            <modal-booking
                                                                :product="{{ $product->load('category', 'combinations') }}"
                                                                :combination_id="{{ $combination->id }}"
                                                                :galleries="{{ $galleries }}"
                                                                :countries="{{ $countries }}"
                                                                :mobile=true
                                                                :extras="[]"
                                                                :calmspa="{{ $calmspa }}"
                                                                :routes="{{ $routes }}"
                                                                promo="{{ session()->get('promo') }}"
                                                                :key="{{ $combination->id }}"
                                                            >
                                                                <template #default="{ bookMobile }">
                                                                    @mobile
                                                                        <a href=# @click.prevent=bookMobile>@lang("Profitez")</a>
                                                                    @elsemobile
                                                                        <a href="{{ route("book", [$product->slug,$combination->id]) }}">@lang("Profitez")</a>
                                                                    @endmobile
                                                                </template>
                                                            </modal-booking>
                                                        @endif
                                                    </div>
                                                    @if(!$product->consultation)
                                                        <modal-booking
                                                            :product="{{ $product->load('category', 'combinations') }}"
                                                            :combination_id="{{ $combination->id }}"
                                                            :galleries="{{ $galleries }}"
                                                            :countries="{{ $countries }}"
                                                            :mobile=true
                                                            :extras="[]"
                                                            :calmspa="{{ $calmspa }}"
                                                            :routes="{{ $routes }}"
                                                            promo="{{ session()->get('promo') }}"
                                                            :key="{{ $combination->id }}"
                                                        >
                                                            <template #default="{ bookMobile }">
                                                                @mobile
                                                                    <a href=# @click.prevent=bookMobile class="vs-btn">@lang("Réserver")</a>
                                                                @elsemobile
                                                                    <a href="{{ route("book", [$product->slug,$combination->id]) }}" class="vs-btn">@lang("Réserver")</a>
                                                                @endmobile
                                                            </template>
                                                        </modal-booking>
                                                    @endif
                                                </div>
                                            @else
                                                <span class="price-xl">{{ number_format($combination->price,2) }}€ </span>
                                                @if(!$product->consultation)
                                                    <modal-booking
                                                        :product="{{ $product->load('category', 'combinations') }}"
                                                        :combination_id="{{ $combination->id }}"
                                                        :galleries="{{ $galleries }}"
                                                        :countries="{{ $countries }}"
                                                        :mobile=true
                                                        :extras="[]"
                                                        :calmspa="{{ $calmspa }}"
                                                        :routes="{{ $routes }}"
                                                        promo="{{ session()->get('promo') }}"
                                                        :key="{{ $combination->id }}"
                                                    >
                                                        <template #default="{ bookMobile }">
                                                            @mobile
                                                            <a href=# @click.prevent=bookMobile class="vs-btn">@lang("Réserver")</a>
                                                            @elsemobile
                                                            <a href="{{ route("book", [$product->slug,$combination->id]) }}" class="vs-btn">@lang("Réserver")</a>
                                                            @endmobile
                                                        </template>
                                                    </modal-booking>
                                                @endif
                                            @endif
                                        </div>
                                    @endif
                                @endforeach
                            @endif
                            @if($product->consultation)
                                <div class="elementor-widget-container">
                                    <p class="quote-text quote-text-2" style="max-width:initial;">
                                        @php
                                            $doctorNames = $product->consultation_doctors->pluck('name')->implode(', ');
                                        @endphp
                                        @lang('message.consultation_doctor_horn_prefix', ['doctors' => $doctorNames])<br>{{ number_format($product->consultation_price, 2) }} €
                                    </p>
                                </div>
                                <div class="actions_ align-items-baseline justify-content-between">
                                    <modal-booking
                                        :product="{{ $product->load('category', 'combinations') }}"
                                        :combination_id=null
                                        :galleries="{{ $galleries }}"
                                        :countries="{{ $countries }}"
                                        :mobile=true
                                        :extras="[]"
                                        :calmspa="{{ $calmspa }}"
                                        :routes="{{ $routes }}"
                                        promo="{{ session()->get('promo') }}"
                                        :key="{{ $product->slug }}"
                                    >
                                        <template #default="{ bookMobile }">
                                            @mobile
                                            <a href=# @click.prevent=bookMobile class="vs-btn">@lang("message.Réserver une consultation")</a>
                                            @elsemobile
                                            <a href="{{ route("book", [$product->slug]) }}" class="vs-btn">@lang("message.Réserver une consultation")</a>
                                            @endmobile
                                        </template>
                                    </modal-booking>
                                </div>
                            @endif
                            <div class="product-getway">
                                <span class="getway-title">@lang("Modes de paiement") :</span>
                                <img src="{{  asset('assets/img/payment.png') }}" alt="@lang("Modes de paiement")" width="284" height="43">
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <ul class="nav product-tab1" id="productTab" role="tablist">
                <li class="nav-item" role="presentation"><a class="nav-link active" id="description-tab" data-bs-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true"> @lang("Description") </a></li>
                <li class="nav-item" role="presentation"><a class="nav-link" id="politique-tab" data-bs-toggle="tab" href="#politique" role="tab" aria-controls="politique" aria-selected="false"> @lang("Politique d'annulation") </a></li>
            </ul>
            <div class="tab-content" id="productTabContent">
                <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                    <div class="inner-pane"> {!! $product->description !!} <br><br> @if($product->youtube)
                            <div class="pt-2">
                                <youtube-video url="{{ $product->youtube }}"></youtube-video>
                            </div>
                        @endif </div>
                </div>
                <div class="tab-pane fade" id="politique" role="tabpanel" aria-labelledby="politique-tab">
                    <div class="inner-pane">
                        <div class="woocommerce-Reviews"><p>{{ $product->condition }}</p></div>
                    </div>
                </div>
            </div>
            <h2 class="sec-subtitle3" v-show="0">@lang("Nos autres traitements")</h2>
            <div class="row vs-carousel" data-slide-show="4" data-lg-slide-show="3" data-md-slide-show="2" v-show="0"> @foreach($relateds as $related)
                    <div class="col-md-6 col-lg-3 col-xl-3">
                        <div class="vs-product product-style2 ps">
                            <div class="product-img"><a href="{{ $related->routes['url'] }}"><img src="{{ $related->cover }}" alt="{{ $related->title }}" title="{{ $related->title }}" class="w-100" width="295" height="249"></a>
                                <div class="actions"><a href="{{ $related->routes['url'] }}" class="icon-btn"><i class="far fa-eye"></i></a></div>
                            </div>
                            <div class="product-body">
                                <div class="product-content"><h3 class="product-title"><a class="text-inherit" href="{{ $related->routes['url'] }}">{{ $related->title }}</a></h3>
                                    <div class="product-category"><a href="{{ $related->routes['url'] }}">{{ $related->category->name }}</a></div>
                                </div>
                                <span class="product-price"><span class="currency">&euro;</span>{{ $related->price_from }}</span></div>
                        </div>
                    </div>
                @endforeach </div>
        </div>
    </section>
@endsection