@php
$categories=$data['category'];
$product_details=$data['product_details'];
$public_url= env('Public_Url');
$related_products=$data['related_products'];
$child_products=$data['child_products'];
$detailing= $data['detailing'];
$cart_quantity=1;
@endphp




@extends('layouts.user-inner')
@section('content')


@push('custom-styles')

<style>
.variant-active {
    border: 1px solid #ff5733;
    color: #ff5733;
}
</style>

@endpush


<!-- Ec breadcrumb start -->
<div class="sticky-header-next-sec  ec-breadcrumb ">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="row ec_breadcrumb_inner">
                    <div class="col-md-12 col-sm-12">
                        <!-- ec-breadcrumb-list start -->
                        <ul class="ec-breadcrumb-list">
                            <li class="ec-breadcrumb-item"><a href="/">Home</a></li>
                            <li class="ec-breadcrumb-item"><a
                                    href="{{$product_details->category_link}}">{{$product_details->category_name}}</a>
                            </li>
                            @if($product_details->product_subcategory!="")
                            @php
                            $subactidarr=\App\Models\subcategoryModel::where(['subcategory_id' =>
                            $product_details->product_subcategory])->first();
                            @endphp
                            <li class="ec-breadcrumb-item"><a
                                    href="{{ $subactidarr->subcategory_link }}">{{ $subactidarr->subcategory_name }}</a>
                            </li>
                            @endif
                            <li class="ec-breadcrumb-item active">{{$product_details->product_name_en}}</li>
                        </ul>
                        <!-- ec-breadcrumb-list end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Ec breadcrumb end -->



<!--  offer Section Start -->

<!-- <section class="section ec-offer-section" style="background-image: url(frontend/assets/images/banner/product-detail-page-banner.png);">
        <h2 class="d-none">Offer</h2>
        <div class="container">
            <div class="row justify-content-start">
                <div class="col-xl-6 col-lg-7 col-md-7 col-sm-7 align-self-center ec-offer-content">
                    <h2 class="ec-offer-title">PC COMBO New Arrivals</h2>
                    <h6 class="ec-offer-stitle" data-animation="slideInDown">Super Offer<br>
                        Acetate Frame Sunglasses<br>
                        QAR 40.00 Only </h6>
                        <a class="btn btn-banner" href="product-list.html" data-animation="zoomIn">Shop Now</a>
                </div>
            </div>
        </div>
    </section> -->

<!-- offer Section End -->



<!-- Sart Single product -->
<section class="ec-page-content section-space-p">
    <div class="container">
        <div class="row">
            <div class="ec-pro-rightside ec-common-rightside col-lg-12 col-md-12">

                <!-- Single product content Start -->
                <div class="single-pro-block">
                    <div class="single-pro-inner">
                        <div class="row">
                            <div class="single-pro-img single-pro-img-no-sidebar">
                                <div class="single-product-scroll">
                                    <div class="single-product-cover">
                                        @if ($product_details->product_title_img)
                                        <div class="single-slide zoom-image-hover">
                                            <img class="img-responsive"
                                                src="/uploads/product_img_1160x1600/{{$product_details->product_title_img}}"
                                                alt="">
                                        </div>
                                        @endif
                                        @if ($product_details->product_img_1)
                                        <div class="single-slide zoom-image-hover">
                                            <img class="img-responsive"
                                                src="/uploads/product_img_1160x1600/{{$product_details->product_img_1}}"
                                                alt="">
                                        </div>
                                        @endif
                                        @if ($product_details->product_img_2)
                                        <div class="single-slide zoom-image-hover">
                                            <img class="img-responsive"
                                                src="/uploads/product_img_1160x1600/{{$product_details->product_img_2}}"
                                                alt="">
                                        </div>
                                        @endif
                                        @if ($product_details->product_img_3)
                                        <div class="single-slide zoom-image-hover">
                                            <img class="img-responsive"
                                                src="/uploads/product_img_1160x1600/{{$product_details->product_img_3}}"
                                                alt="">
                                        </div>
                                        @endif
                                        @if ($product_details->product_img_4)
                                        <div class="single-slide zoom-image-hover">
                                            <img class="img-responsive"
                                                src="/uploads/product_img_1160x1600/{{$product_details->product_img_4}}"
                                                alt="">
                                        </div>
                                        @endif
                                    </div>
                                    <div class="single-nav-thumb">
                                        @if ($product_details->product_title_img)
                                        <div class="single-slide">
                                            <img class="img-responsive"
                                                src="/uploads/product_img_1160x1600/{{$product_details->product_title_img}}"
                                                alt="">
                                        </div>
                                        @endif
                                        @if ($product_details->product_img_1)
                                        <div class="single-slide">
                                            <img class="img-responsive"
                                                src="/uploads/product_img_1160x1600/{{$product_details->product_img_1}}"
                                                alt="">
                                        </div>
                                        @endif
                                        @if ($product_details->product_img_2)
                                        <div class="single-slide">
                                            <img class="img-responsive"
                                                src="/uploads/product_img_1160x1600/{{$product_details->product_img_2}}"
                                                alt="">
                                        </div>
                                        @endif
                                        @if ($product_details->product_img_3)
                                        <div class="single-slide">
                                            <img class="img-responsive"
                                                src="/uploads/product_img_1160x1600/{{$product_details->product_img_3}}"
                                                alt="">
                                        </div>
                                        @endif
                                        @if ($product_details->product_img_4)
                                        <div class="single-slide">
                                            <img class="img-responsive"
                                                src="/uploads/product_img_1160x1600/{{$product_details->product_img_4}}"
                                                alt="">
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                            <div class="single-pro-desc single-pro-desc-no-sidebar" id="rplcdivnwdtls">
                                <div class="single-pro-content">
                                    <h5 class="ec-single-title">{{$product_details->product_name_en}}</h5>
                                    <div class="sub-main">
                                        <h6>Brand : {{ $product_details->brands->brand_name }} </h6>
                                        
                                        <h6>Availability : @if($product_details->product_stock==0) {{ 'Out Of Stock' }}
                                            @elseif($product_details->product_stock<=$product_details->reorder_point)
                                                {{ 'Only a few In Stock' }}@else {{ 'In Stock' }} @endif</h6>
                                    </div>
                                    <div class="ec-single-desc">
                                        <ul>
                                            @foreach ($detailing as $detail)
                                            <li>{{ $detail->spec_description }}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                    <div class="buttons">
                                        <button
                                            onclick="$('.btn-product-details').removeClass('variant-active');$(this).addClass('variant-active');cngdetonvar({{ $product_details->product_id }},{{ $product_details->product_size_id }})"
                                            class="btn btn-product-details variant-active">{{ $product_details->variant_name }}</button>
                                        @foreach($child_products as $childs)
                                        <button
                                            onclick="$('.btn-product-details').removeClass('variant-active');$(this).addClass('variant-active');cngdetonvar({{ $childs->product_id }},{{ $childs->product_size_id }})"
                                            class="btn btn-product-details">{{ $childs->variant_name }}</button>
                                        @endforeach
                                    </div>

                                    <div class="price">
                                        <h6>QAR(incl. of all taxes):</h6>

                                        <h3>QAR
                                            @if($product_details->offer_datas)
                                            @php
                                            $offer_details=$product_details->offer_datas;
                                            $offer_price=$offer_details['product_offer_amount'];
                                            $offer_percentage=$offer_details['product_offer_percentage'];

                                            @endphp

                                            <s>{{sprintf("%.2f",$product_details->product_price)}}</s>
                                            {{sprintf("%.2f",$offer_price)}}
                                            @else
                                            {{sprintf("%.2f",$product_details->product_price)}}
                                            @endif
                                        </h3>
                                    </div>
                                    <div class="ec-single-qty">
                                        <div class="qty-plus-minus">
                                            <input class="qty-input" type="text" name="ec_qtybtn" value="1" />
                                        </div>
                                        <div class="ec-single-cart ">
                                            <a onclick="add_to_cart($('.qty-input').val(),{{$product_details->product_id}},3)"
                                                href="javascript:void(0);" class="btn btn-product-detail">Add To
                                                Cart</a>
                                        </div>
                                        <div class="ec-single-cart ">
                                            @if($product_details->wish_list == 'true')
                                            <a href="javascript:void(0);"
                                                onclick="add_wishlist_fn({{$product_details->product_id}});setTimeout(function(){ location.reload(); }, 2000)"
                                                style="background-color:#ff5733;color:#fff;"
                                                class="btn btn-product-detail">In Wishlist</a>
                                            @else
                                            <a href="javascript:void(0);"
                                                onclick="add_wishlist_fn({{$product_details->product_id}});setTimeout(function(){ location.reload(); }, 2000)"
                                                class="btn btn-product-detail">Add To Wishlist</a>
                                            @endif
                                        </div>

                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--Single product content End -->
                <!-- Single product tab start -->
                <div class="ec-single-pro-tab" id="rplcspecdet">
                    <div class="ec-single-pro-tab-wrapper">
                        <div class="ec-single-pro-tab-nav">
                            <ul class="nav nav-tabs">
                                <li class="nav-item">
                                    <a class="nav-link active" data-bs-toggle="tab" data-bs-target="#ec-spt-nav-details"
                                        role="tablist">Description</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" data-bs-toggle="tab" data-bs-target="#ec-spt-nav-info"
                                        role="tablist">Specification</a>
                                </li>
                            </ul>
                        </div>
                        <div class="tab-content  ec-single-pro-tab-content">
                            <div id="ec-spt-nav-details" class="tab-pane fade show active">
                                <div class="ec-single-pro-tab-desc">
                                    <p>{{ $product_details->product_desc_en }}</p>

                                </div>
                            </div>
                            <div id="ec-spt-nav-info" class="tab-pane fade">
                                <div class="ec-single-pro-tab-moreinfo">
                                    <ul>
                                        @foreach ($detailing as $detail)
                                        <li>{{ $detail->spec_description }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            </div>


                        </div>
                    </div>
                </div>
                <!-- product details description area end -->
            </div>

        </div>
    </div>
</section>
<!-- End Single product -->


@if (count($related_products)>0)
<!-- Related Product Start -->
<section class="section ec-releted-product section-space-p">
    <div class="container">
        <div class="row">
            <div class="col-md-12 text-center">
                <div class="section-title">
                    <h2 class="ec-title">Related products</h2>

                </div>
            </div>
        </div>
        <div class="row margin-minus-b-30">
            <!-- Related Product Content -->
            <div class="owl-slider">
                <div id="carousel" class="owl-carousel">
                    @foreach ($related_products as $product)
                    <div class="item">
                        <div class=" mb-6 pro-gl-content">
                            <div class="ec-product-inner">
                                <div class="ec-pro-image-outer">
                                    <a href="#">
                                        <div class="wish-box wishlist wishlist-cont{{$product->product_id}}"
                                            style="cursor:pointer;" onclick="add_wishlist_fn({{$product->product_id}})">
                                            <i
                                                class="fa @if($product->wish_list == 'true') fa-heart @else fa-heart-o @endif"></i>
                                        </div>
                                    </a>
                                    <a href="{{$product->product_permalink}}" class="image">
                                        <div class="ec-pro-image">
                                            <img class="main-image"
                                                src="/uploads/product_img_1160x1600/{{$product->product_title_img}}"
                                                alt="Product" />

                                        </div>
                                    </a>
                                </div>
                                <div class="ec-pro-content">
                                    <div class="ec-pro-list-desc">{{ $product->brands->brand_name }}</div>
                                    <h5 class="ec-pro-title"><a
                                            href="{{$product->product_permalink}}">{{$product->product_name_en}}</a>
                                    </h5>

                                    <div class="ec-pro-list-desc"></div>


                                    <span class="ec-price">

                                        <span class="new-price">QAR
                                            @if($product->offer_datas)
                                            @php
                                            $offer_details=$product->offer_datas;
                                            $offer_price=$offer_details['product_offer_amount'];
                                            $offer_percentage=$offer_details['product_offer_percentage'];

                                            @endphp

                                            <s>{{$product->product_price}}</s>
                                            {{number_format($offer_price, 2, '.', '');}}
                                            @else
                                            {{$product->product_price}}
                                            @endif
                                        </span>
                                    </span>

                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>

        </div>
    </div>
</section>
<!-- Related Product end -->
@endif

@push('custom-scripts')
<script>
jQuery("#carousel").owlCarousel({
    autoplay: true,
    rewind: true,
    /* use rewind if you don't want loop */
    margin: 20,
    responsiveClass: true,
    autoHeight: true,
    autoplayTimeout: 7000,
    smartSpeed: 800,
    nav: true,
    responsive: {
        0: {
            items: 1
        },

        600: {
            items: 3
        },

        1024: {
            items: 4
        },

        1366: {
            items: 5
        }
    }
});
</script>

<script>
function cngdetonvar(prd_id, prd_var_id) {
    $.ajax({
        type: "POST",
        url: "/get_new_details",
        data: {
            _token: token,
            prd_id: prd_id,
            prd_var_id: prd_var_id,
        },
        success: function(data) {
            var divsplit = data.split('|||@|||');
            $("#rplcdivnwdtls").html(divsplit[0]);
            $("#rplcspecdet").html(divsplit[1]);
        },
    });
}
</script>

@endpush


@endsection