@extends('themes.default.layout.master')
@section("site_ayar_seo_title",$product->seo_title)
@section("site_ayar_seo_keywords",$product->seo_keywords)
@section("site_ayar_seo_description",$product->seo_description)
@section('content')

    <div class="page-content bg-white">
        <!-- inner page banner -->
        <div class="dlab-bnr-inr overlay-black-middle bg-pt"
             @if(!empty($uiThemeSettings["product_header_bg"]))
                 style="background-image:url({{$uiThemeSettings["product_header_bg"]}});"
             @else
                 style="height: 100px;background: black"
            @endif
        >
            <div class="container">
                <div class="dlab-bnr-inr-entry" style="height: 100px">
                    <div class="breadcrumb-row">
                        <ul class="list-inline">
                            <li><a href="{{route('theme.index',['locale'=>config('app.locale')])}}"
                                   title="{{\TransLibrary::languageTrans("breadcrumb_home_text")}}">
                                    {{\TransLibrary::languageTrans("breadcrumb_home_text")}}</a></li>
                            <li>

                                <a title="{{\TransLibrary::languageTrans("breadcrumb_product_title")}}"
                                   href="{{route('theme.product.index',['locale'=>config('app.locale')])}}">{{\TransLibrary::languageTrans("breadcrumb_product_title")}}</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-full content-inner bg-white">
            <!-- Product details -->
            <div class="container woo-entry">
                <div class="row m-b30">
                    <div class="col-md-5 col-lg-5 col-sm-12">
                        <div class="product-gallery on-show-slider lightgallery" id="lightgallery">
                            <div id="sync1" class="owl-carousel owl-theme owl-btn-center-lr m-b5 owl-btn-1 primary">
                                @foreach($productImageList as $productImage)
                                    @if($productImage["image_full"]!==null)
                                        <div class="item">
                                            <div class="mfp-gallery">
                                                <div class="dlab-box">
                                                    <div class="dlab-thum-bx">
                                                        <img src="{{$productImage["image_full"]}}"
                                                             alt="{{$productImage["title"]}}">
                                                        <div class="overlay-bx">
                                                            <div class="overlay-icon">
														<span
                                                            data-exthumbimage="{{$productImage["image_full"]}}"
                                                            data-src="{{$productImage["image_full"]}}"
                                                            class="check-km" title="{{$productImage["title"]}}">
															<i class="ti-fullscreen"></i>
														</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @endforeach

                            </div>
                            <div id="sync2" class="owl-carousel owl-theme owl-none">
                                @foreach($productImageList as $productImage)
                                    @if($productImage["image_full"]!==null)
                                        <div class="item">
                                            <div class="dlab-media">
                                                <img src="{{$productImage["image_full"]}}"
                                                     alt="{{$productImage["title"]}}">
                                            </div>
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </div>
                    <div class="col-md-7 col-lg-7 col-sm-12">
                        <form method="post" class="cart sticky-top">
                            <div class="dlab-post-title">
                                <h4 class="post-title"><a href="javascript:void(0);">{{$product->title}}</a></h4>
                                <p class="m-b10">
                                    {{$product->short_description}}
                                </p>
                            </div>

                            @if(count($productCategoriesList) > 0)
                                <div class="shop-item-tage" style="font-size: 12px">
                                    <span>{{\TransLibrary::languageTrans("product_detail_category_title")}} : </span>
                                    @foreach($productCategoriesList as $pkey=> $productCategories)
                                        <a href="{{$productCategories["slug"]}}"
                                           title="{{$productCategories["title"]}}">{{$productCategories["title"]}}</a>
                                        @if(($pkey+1)!==count($productCategoriesList))
                                            ,
                                        @endif
                                    @endforeach
                                </div>
                            @endif
                            @if($brandTitle!==null)
                                <div class="shop-item-tage" style="font-size: 12px">
                                    <span>{{\TransLibrary::languageTrans("product_detail_brand_title")}} : </span>
                                    <a href="javascript:void(0);">{{$brandTitle}}</a>
                                </div>
                            @endif

                            <div class="row mt-2 mb-2">
                                @if(!empty($uiThemeSettings["product_detail_whatsapp_phone"]))
                                    <div class="col-md-4">
                                        <a style="width: 100%" target="_blank" href="https://wa.me/{{$uiThemeSettings["product_detail_whatsapp_phone"]}}?text={{$product->title}}" class="btn btn-success btn-sm"
                                           title="{{\TransLibrary::languageTrans("product_detail_whatsapp_btn_title")}}">{{\TransLibrary::languageTrans("product_detail_whatsapp_btn_title")}}</a>
                                    </div>
                                @endif
                                @if(!empty($uiThemeSettings["product_detail_phone"]))
                                    <div class="col-md-4">
                                        <a style="width: 100%" target="_blank" href="tel:{{$uiThemeSettings["product_detail_phone"]}}" class="btn btn-dark btn-sm"
                                           title="{{\TransLibrary::languageTrans("product_detail_phone_btn_title")}}">{{\TransLibrary::languageTrans("product_detail_phone_btn_title")}}</a>
                                    </div>
                                @endif
                                @if(!empty($uiThemeSettings["product_detail_email"]))
                                    <div class="col-md-4">
                                        <a style="width: 100%"  href="mailto:{{$uiThemeSettings["product_detail_email"]}}" class="btn btn-info btn-sm"
                                           title="{{\TransLibrary::languageTrans("product_detail_email_btn_title")}}">{{\TransLibrary::languageTrans("product_detail_email_btn_title")}}</a>
                                    </div>
                                @endif
                            </div>

                            @if(count($productFeaturesList) > 0)
                                <div class="shop-item-tage" style="margin-top: 10px;">
                                    <table class="table table-bordered" style="font-size: 12px">
                                        <tbody>
                                        <tr>
                                            <td colspan="2"
                                                style="background-color: #efefef;padding: 7px 10px  ;width: 100%">
                                                <div>
                                                    {{\TransLibrary::languageTrans("product_detail_feature_title")}}
                                                </div>
                                            </td>
                                        </tr>
                                        @foreach($productFeaturesList as $productFeatures)
                                            <tr>
                                                <td>{{$productFeatures["title"]}}</td>
                                                <td>{{$productFeatures["product_feature_value"]}}</td>
                                            </tr>
                                        @endforeach

                                        </tbody>
                                    </table>
                                </div>
                            @endif

                        </form>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        {!! $product->description !!}
                    </div>
                </div>
                @if(count($fileList) > 0)
                    <div class="row">
                        <div class="col-lg-12">
                            <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th colspan="2"
                                        style="font-size: 14px;font-weight: normal"> {{\TransLibrary::languageTrans("product_detail_file_center_title")}}</th>
                                </tr>

                                </thead>
                                <tbody>
                                @foreach($fileList as $file)
                                    @if($file["file_url"]!==null)
                                        <tr style="font-size: 12px">
                                            <td>{{$file["title"]}}</td>
                                            <td>

                                                <a href="{{$file["file_url"]}}" target="_blank">
                                                    {{\TransLibrary::languageTrans("product_detail_file_center_preview_title")}}
                                                </a>
                                            </td>

                                        </tr>
                                    @endif
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                @endif

            </div>

        </div>
    </div>

@endsection

@section('ui.javascript')
    <script>
        $(document).ready(function () {

            var sync1 = $("#sync1");
            var sync2 = $("#sync2");
            var slidesPerPage = 4; //globaly define number of elements per page
            var syncedSecondary = true;

            sync1.owlCarousel({
                items: 1,
                slideSpeed: 2000,
                nav: true,
                autoplay: false,
                dots: false,
                loop: true,
                responsiveRefreshRate: 200,
                navText: ['<i class="fas fa-chevron-left"></i>', '<i class="fas fa-chevron-right"></i>'],
            }).on('changed.owl.carousel', syncPosition);

            sync2.on('initialized.owl.carousel', function () {
                sync2.find(".owl-item").eq(0).addClass("current");
            }).owlCarousel({
                items: slidesPerPage,
                dots: false,
                nav: false,
                margin: 5,
                smartSpeed: 200,
                slideSpeed: 500,
                slideBy: slidesPerPage, //alternatively you can slide by 1, this way the active slide will stick to the first item in the second carousel
                responsiveRefreshRate: 100
            }).on('changed.owl.carousel', syncPosition2);

            function syncPosition(el) {
                //if you set loop to false, you have to restore this next line
                //var current = el.item.index;

                //if you disable loop you have to comment this block
                var count = el.item.count - 1;
                var current = Math.round(el.item.index - (el.item.count / 2) - .5);

                if (current < 0) {
                    current = count;
                }
                if (current > count) {
                    current = 0;
                }

                //end block

                sync2
                    .find(".owl-item")
                    .removeClass("current")
                    .eq(current)
                    .addClass("current");
                var onscreen = sync2.find('.owl-item.active').length - 1;
                var start = sync2.find('.owl-item.active').first().index();
                var end = sync2.find('.owl-item.active').last().index();

                if (current > end) {
                    sync2.data('owl.carousel').to(current, 100, true);
                }
                if (current < start) {
                    sync2.data('owl.carousel').to(current - onscreen, 100, true);
                }
            }

            function syncPosition2(el) {
                if (syncedSecondary) {
                    var number = el.item.index;
                    sync1.data('owl.carousel').to(number, 100, true);
                }
            }

            sync2.on("click", ".owl-item", function (e) {
                e.preventDefault();
                var number = $(this).index();
                //sync1.data('owl.carousel').to(number, 300, true);

                sync1.data('owl.carousel').to(number, 300, true);

            });
        });

    </script>
@endsection