@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'];
        $lens_powers = $data['lens_powers'];
        $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>
                        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>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');getcolorsfn({{ $product_details->product_id }},{{ $product_details->product_size_id }},0)" class="btn btn-product-details variant-active">{{ $product_details->variant_name }}</button>
                                                
                                                
                                                
                                                                                                @foreach($child_products as $childs)
                                                                                                @endforeach
                                                
                                                <div class="d-flex mt-3 mb-3" id="chage_disp_color">
                                                    
                                                    <div onclick="cngdetonvar({{ $product_details->product_id }},{{ $product_details->product_size_id }},{{ $product_details->product_color }})" style="background-color:{{ $product_details->colors->color_code }}" class="color-variant colo-active"></div>