@extends('layout.layout')
@section('meta')
    @include('layout.partials.seo', [
        'title' =>  $product->meta_title ?? $product->heading,
        'description' => $product->meta_description,
        'keywords' => $product->keywords,
        'image' => $product->getFirstMediaUrlOrDefault(\App\Helpers\Constants\MediaHelper::PRODUCT_MEDIA_PATH, 'webp')['url'],
        'schema' => $product->schema
    ])
@endsection
@section('content')
<main class="main">
    <nav aria-label="breadcrumb" class="breadcrumb-nav border-0 mb-0">
        <div class="container">
            <ol class="breadcrumb">
             <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ __('general.home') }}</a></li>
                <li class="breadcrumb-item"><a href="{{ route('allcategory') }}">
                        @isset($settings['category_title'])
                            {{ json_decode($settings['category_title'])->{app()->getLocale()} }}
                        @endisset
                    </a></li>
                <li class="breadcrumb-item"><a href="{{ route('subCategory',['subCategory_slug'=>$product->SubCategory->slug]) }}">{{$product->SubCategory->name}}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{$product->name}}</li>
            </ol>
        </div>
    </nav>
    <div class="mb-2"></div>

    <div class="page-content">
        <div class="container">
            <div class="product-details-top mb-2">
                <div class="row">
                    <div class="col-md-6">
                        <div class="product-gallery product-gallery-vertical">
                            <div class="row">
                                <figure class="product-main-image">
                                    @foreach($product->getMedia(\App\Helpers\Constants\MediaHelper::PRODUCT_GALLERY_MEDIA_PATH)->take(1) as $media)
                                    <img id="product-zoom" src="{{ $media->getUrl('webp') }}" data-zoom-image="{{ $media->getUrl('webp') }}" alt="{{ $media->img_alt }}">
                                    <a  href="{{ $media->getUrl() }}" title="{{ $media->img_title }}" id="btn-product-gallery" class="btn-product-gallery active">
                                        <i class="icon-arrows"></i>
                                    </a>
                                    @endforeach
                                </figure><!-- End .product-main-image -->

                                <div id="product-zoom-gallery" class="product-image-gallery">
                                    @foreach($product->getMedia(\App\Helpers\Constants\MediaHelper::PRODUCT_GALLERY_MEDIA_PATH)->take(6) as $media)
                                    <a class="product-gallery-item" href="{{ $media->getUrl() }}" title="{{ $media->img_title }}" data-image="{{ $media->getUrl('webp') }}" data-zoom-image="{{ $media->getUrl('webp') }}">
                                        <img src="{{ $media->getUrl('webp') }}" alt="{{ $media->img_alt }}" title="{{ $media->img_title }}">
                                    </a>
                                    @endforeach
                                </div><!-- End .product-image-gallery -->
                            </div><!-- End .row -->
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="product-details">
                            @if($product->price > 0 && $product->price != null)
                            <h1 class="product-title">{{$product->heading}}</h1>
                            <div class="product-price">
                                {{$product->price}} {{nova_get_setting_translate('default_currency') ?? 'EGP'}}
                            </div><!-- End .product-price -->
                            @endif
                            <div class="product-content">
                                <p>{{$product->short_description}}</p>
                            </div><!-- End .product-content -->

                            <div class="details-filter-row details-row-size">

{{--                                <p class="mr-3 style_quantity" for="qty">{{ __('product.qty') }}:{{$product->quantity}}</p>--}}
{{--                                <form action="{{ route('checkout', Crypt::encrypt($product->id)) }}" method="POST" class="d-flex">--}}
{{--                                    @csrf--}}
{{--                                <div class="product-details-quantity">--}}
{{--                                    <input type="number" id="qty" class="form-control" name="quantity" value="1" min="1" max="{{$product->quantity}}" step="1" data-decimals="0" required>--}}

{{--                                </div>--}}
                                <!-- End .product-details-quantity -->
{{--                                <a href="#" class="size-guide mx-3"><i class="icon-th-list"></i>{{ __('product.kg') }}</a>--}}

{{--                                <button type="submit" class="btn btn-outline-primary-2 btn-minwidth-sm mr-2">--}}
{{--                                        <span>{{__('product.pay_now')}}</span>--}}
{{--                                        <i class="icon-long-arrow-right"></i>--}}
{{--                                    </button>--}}
{{--                                </form>--}}

                                <a href="http://wa.me/{{ $settings['site_whatsapp'] ?? $settings['site_phone'] }}?text=Name:{{ $product->name }} %0ALink: {{ route('product', ['subCategory_slug' => $product->subCategory->slug, 'slug' => $product->slug]) }}" rel="noopener" target="_blank" class="btn btn-outline-primary-2 btn-minwidth-sm mr-2" data-toggle="tooltip" data-placement="right" title="WhatsApp">
                                    <span>{{__('product.pay_now')}}</span>
                                    <i class="icon-long-arrow-right"></i>
                                </a>
                            </div>
                             <!-- End .details-filter-row -->


                            <div class="product-details-footer">


                                <div class="social-icons social-icons-sm">
                                    <span class="social-label">{{ __('product.share') }}:</span>
                                    {!! Share::page(url(env('APP_URL').'/' .$product->subCategory->slug .'/'.$product->slug ,["target"=>"_blank"]))->facebook()->twitter()->whatsapp() !!}
                                </div>
                            </div><!-- End .product-details-footer -->
                        </div><!-- End .product-details -->
                    </div>
                    <div class="col-md-12">
                        <div class="product-details-tab">
                            <ul class="nav nav-pills justify-content-center" role="tablist">
                                <li class="nav-item">
                                    <a class="nav-link active">{{ __('product.description') }}</a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div class="tab-pane fade active show">
                                    <div class="product-desc-content">
                                        <p>
                                        {!!$product->description!!}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @if ($related_products->count() > 0)
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="heading text-center mb-3">
                        <div class="heading-left">
                            <h2 class="title mb-2">
                                @isset($settings['related_product_title'])
                                    {{json_decode($settings['related_product_title'])->{app()->getLocale()} }}
                                @endisset
                            </h2>
                            <p>
                                @isset($settings['related_product_description'])
                                    {!! json_decode($settings['related_product_description'])->{app()->getLocale()} !!}
                                @endisset
                            </p>
                        </div>
                    </div>
                </div>
                @foreach ($related_products as $product)
                <div class="col-md-3 col-lg-3 col-6">
                @include('layout.partials.product-box',['product' => $product,'style' => 'product'])
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>

</main>
@include('layout.partials.faq')
@include('layout.partials.news_letter')
@endsection