@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 #da0006;
                color: #da0006;
            }
        </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>
                            INR 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>Color : {{ $product_details->colors->color_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:#da0006;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