@extends('app')
@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<link rel="stylesheet" href="{{ asset('assets/css/single.css')}}">
<style>
    .rating-component .stars-box .star.selected {
        color: #ff5a49;
    }
    
    .rating-component .stars-box .star.hover {
        color: #ff5a49;
    }
    .feedback-tags .tags-container {
        display: none;
    }
    .submited-box .loader {
        border: 5px solid transparent;
        border-top: 5px solid #4dc7b7;
        border-bottom: 5px solid #ff5a49;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        -webkit-animation: spin 0.8s linear infinite;
        animation: spin 0.8s linear infinite;
    }
    
    .submited-box .loader, .submited-box .success-message {
        display: none;
    }
    .submited-box .loader, .submited-box .success-message {
        display: none;
    }
    a.axil-btn, button.axil-btn {
        border-radius: 6px;
        font-size: var(--font-size-b1);
        line-height: var(--line-height-b1);
        font-weight: 700;
        display: inline-block;
        padding: 10px 38px;
        position: relative;
        transition: all .3s ease-in-out;
        z-index: 1;
    }
    .comment-inner {
        margin-left: 15px;
        margin-top: 6px;
    }
    .single-comment{
        display: flex;
    }
    ul.comment-list {
        margin: 0;
        padding: 0;
    }
    
    li.comment {
        list-style: none;
        margin-bottom: 15px;
    }
    .comment-text {
        margin-bottom: 10px;
    }

    .pro-desc-commnet-area .comment-list .comment .commenter .hover-flip-item-wrapper a i:not(.empty-rating), .pro-desc-commnet-area .comment-list .comment .commenter .commenter-rating a i:not(.empty-rating) {
        color: #ffca0f;
    }
    p.noticText {
        background: #b2eeb8;
        padding: 5px 14px;
        width: 67%;
        margin-top: 12px;
        border-radius: 5px;
    }
    @media only screen and (max-width: 1199px) {
        p.noticText {
            background: #b2eeb8;
            padding: 5px 17px;
            width: 100%;
        }
    }
</style>
@php
//use App\Models\EcommerceSetting;
use App\Models\HomeFooter;
//$ecom_setting = EcommerceSetting::first();


// Retrieve the cached item
$item = Cache::get('site_status');

// Decode the cached data
$ecom_setting = $item ? json_decode($item) : null;

$termCondition=HomeFooter::select('page_three_text')->first();
@endphp

@php
    $home_footers = DB::table('home_footers')->first();
    $generalSetting = DB::table('general_settings')->first();
@endphp

<style>
    .quantity_box{
        display: inline-flex;
        vertical-align: top;
        white-space: nowrap;
        font-size: 0;
    }
    div.quantity_box button[type="button"] {
        padding: 0 5px;
        min-width: 25px;
        min-height: unset;
        height: 42px;
        border: 2px solid rgb(211, 211, 211);
        background: white;
        box-shadow: none;
        color: black;
        border-radius: 0;
    }
    div.quantity_box button[type="button"]:hover {
        color: #fff;
        background-color: orange;
        border-color: orange;
    }
    div.quantity_box input[type="text"] {
        width: 40px;
        color: black;
        border-radius: 0;
        border: 2px solid rgb(211, 211, 211);
        border-right: none;
        border-left: none;
    }
    div.quantity_box button[type="button"].minus {
        border-radius: 10px 0 0 10px;
    }
    div.quantity_box button[type="button"].plus {
        border-radius: 0 10px 10px 0;
    }
    
   .burmanRadio {
        margin-bottom: 10px;
      }
      .burmanRadio__input {
        display: none;
      }
      .burmanRadio__input:checked ~ .burmanRadio__label::after {
        opacity: 1;
        transform: scale(1);
      }
      .burmanRadio__label {
        cursor: pointer;
        line-height: 30px;
        position: relative;
        margin-left: 35px;
      }
      .burmanRadio__label::before, .burmanRadio__label::after {
        border-radius: 50%;
        position: absolute;
        top: 5px;
        left: -30px;
        transition: all 0.3s ease-out;
        z-index: 2;
      }
      .burmanRadio__label::before {
        content: "";
        border: 1.5px solid #9d9d9d;
        width: 20px;
        height: 20px;
      }
      .burmanRadio__label::after {
        font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f00c";
        background: #ffc107;
        border: 1.5px solid #ffc107;
        color: #FFF;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        width: 20px;
        height: 20px;
        transform: scale(0);
      }
      .burmanRadio__label:hover::before {
        border-color: #7BC4CA;
      }
     .main-wrapper{
         background: #f8f9fa;
     }
           
    .carousel-inner {
        position: relative;
        width: 100%;
        overflow: hidden;
        box-shadow: 0px 0px 7px 0px gray;
        border-radius: 10px;
    }     
    .nav_images{
        margin-top: 10px;
        display: block;
    }
    .nav_images [data-bs-target] {
        height: 70px;
        width: 70px;
        box-shadow: 0px 0px 3px 0px gray;
        padding: 5px;
    }
    
    .nav_images img {
        margin-bottom: 5px;
    }
    
    .nav_images .active {
        height: 70px;
        width: 70px;
    }
    .carousel-indicators [data-bs-target]{
        border: 0;
    }
    
    .wc-tab-inner iframe{
        width: 100%;
        height: 600px;
    }
    
    @media screen and (min-width: 320px) and (max-width: 390px) {
        #product_des li button {
            font-size: 11px;
        }
    }
    @media screen and (min-width: 391px) and (max-width: 500px) {
        #product_des li button {
            font-size: 14px;
        }
    }
    
   @media screen and (min-width: 320px) and (max-width: 767px) {
       .btn_submit {
           display: inline !important;
       }
   }
   
   .call_now button {
       width: 100%;
   }
   
   .call_now {
       margin-top: 10px;
   }
   
   @media (min-width: 992px) {
       .img_section {
            flex: 0 0 auto;
            width: 46.666667% !important;
        }
   }

    .ord_btn{
        font-size: 21px;
    }
    
    .add_to_cart {
        font-size: 19px;
    }
    .nav-tabs{
        border: 1px solid #000 !important;
        padding: 0px;
        border-radius: 5px; 
    }
    
    .nav-tabs .nav-link.active {
        background: #000;
        border-radius: 5px;
    }
    
</style>
            
@endpush
@section('content')

@php
    $pdata=getProductInfo($single_product);
    $currentDate = now();
    $startDate = $single_product['start_date'];
    $lastDate = $single_product['last_date'];
@endphp

<div class="container-xl mt-5">
    <div class="row justify-content-between">
        <div class="col-lg-5 col-md-6 col-sm-8 col-12 img_section">
            <div id="product" class="carousel slide" data-bs-ride="false" >
                <div class="carousel-inner" role="listbox">
                    <div class="carousel-item active shadow-lg">
                        <div class="easyzoom easyzoom--overlay w-100">
                            <a href="{{ getImage('images/product/large', $single_product->main_image)}}" target="_blank" data-fancybox="gallery" class="fancybox">
                                <img
                                src="{{ getImage('images/product/large', $single_product->main_image)}}"
                                class="w-100"
                                alt="First slide"
                            />
                            </a>
                        </div>
                    </div>
                    
                    @foreach($single_product->images as $key=>$im)
                    <div class="carousel-item {{$im->color}} shadow-lg">
                        <div class="easyzoom easyzoom--overlay w-100">
                            <a href="{{ getImage('images/product/large', $im->image)}}" target="_blank" data-fancybox="gallery" class="fancybox">
                                <img
                                src="{{ getImage('images/product/large', $im->image)}}"
                                class="w-100"
                                alt="First slide"
                            />
                            </a>
                        </div>
                    </div>
                    @endforeach
                </div>
                
                @if(count($single_product->images)==='0')
                
                @else
                <button class="carousel-control-prev" type="button" data-bs-target="#product" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#product" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
                @endif
                
                
            </div>
            <div class="carousel-indicators nav_images position-relative" id="nav_images">
                
                
                <img src="{{ getImage('images/product/large', $single_product->main_image)}}" alt="" width="100" data-bs-target="#product" data-bs-slide-to="0" class="active" aria-current="true">
                @foreach($single_product->images as $key=>$im)
                
                <img src="{{ getImage('images/product/large', $im->image)}}" alt="" width="100" data-bs-target="#product" data-bs-slide-to="{{$key+1}}">
                @endforeach
            </div>
            
        </div>
        <div class="col-lg-6 col-md-6 col-sm-8 col-12">
            
            <h2 class="title light">{!! $single_product->name !!} </h2>
            
            @if($single_product['promotion_price'] != null && $currentDate >= $startDate && $currentDate <= $lastDate)    
                <div class="pro_price d-flex">
                <h4 class="pop bold">{{ $single_product['promotion_price']}} Tk</h4> <del> <h4 style="margin-left: 5px;">{{ $single_product['price']}} Tk</h4></del>
                </div>
            @else
            <h4 class="pop bold"><span id="pro_price">{{ $single_product['price']}}</span> Tk</h4>
            @endif
            
            <div class="size_chart mt-3 d-none">
                <img src="{{ asset('assets/image/size.png')}}" alt="" class="img-fluid">
            </div>
            
            
            <form method="POST" action="{{ route('carts.store')}}" id="order_submit">
                @csrf
            @if($single_product->is_variant)
            @foreach($options as $key=>$option)
            
            @php
                $vs=explode(",",$values[$key]);
                $op=str_replace('"','',$option);
            @endphp
            
            <div class="d-flex">
            <h4 class="pop medium">{{$op}}:</h4>
                
            <div class="sizes d-flex flex-wrap align-items-center">
                @foreach($vs as $i=>$v)
                @php
                    $value=str_replace('"','',$v);
                @endphp
                <div class="burmanRadio me-2">
                    <input type="radio" class="burmanRadio__input {{$op}}" id="size-{{$value}}" {{$i==0?'checked':''}} name="variant_{{$key+1}}" value="{{ $value }}">
                    <label for="size-{{$value}}" class="burmanRadio__label"> {{ $value }} </label>
                </div>
                @endforeach
            </div>
            </div>
            @endforeach
            @endif 
            
            @if(isset($single_product->size_chart))
            <div class="size_chart">
                <img src="{{ getImage('images/product/large', $single_product->size_chart)}}">
            </div>
            @endif
            <div class="align-items-center flex-wrap mt-4 col-lg-8">
                
                <input type="hidden" name="product_id" value="{{ $single_product->id}}">
        
                <div class="quantity_box mb-2" style="width: 100%;">
                    <button type="button" class="minus btn">-</button>
                    <input type="text" class="quantity_value placeholder_black form-control" name="quantity" value="1"  min="1" max="12" >
                    <button type="button" class="plus btn">+</button>
                </div>
                <div class="btn_submit">
                <button type="submit" class="btn btn-warning orange-bg mt-lg-0 mt-3 semi text-white text-cap col-lg-6 col-md-6 col-12 w-100 mb-2 ord_btn"> <i class="fa-solid fa-cart-plus text-white mx-2"></i> অর্ডার করুন</button>
                <button class="btn btn-warning orange-bg text-white mt-lg-0 mt-3 semi text-cap col-lg-6 col-md-6 col-12 add_to_cart w-100"> <i class="fa-solid fa-cart-plus text-white mx-2"></i>  কার্টে রাখুন</button>
                </div>
                <div class="call_now">
                    <a href="tel: {{ $ecom_setting->contact }}" class="btn btn-warning mt-lg-0 mt-3 semi text-cap col-lg-6 col-md-6 col-12 add_to_cart w-100" style="background: #00276C;color: #ffffff;border: none;"><i class="fas fa-phone" style="padding-right: 7px;"></i> {{ $ecom_setting->contact }}</a>
                </div>
                @if($ecom_setting->contact2)
                 <div class="call_now">
                    <a href="tel: {{ $ecom_setting->contact2 }}" class="btn btn-warning mt-lg-0 mt-3 semi text-cap col-lg-6 col-md-6 col-12 add_to_cart w-100" style="background: #00276C;color: #ffffff;border: none;"><i class="fas fa-phone" style="padding-right: 7px;"></i> {{ $ecom_setting->contact2 }}</a>
                </div>
                @endif
               @if($ecom_setting->whats_num)
                 <div class="call_now">
                    <a href="https://wa.me/+88{{$ecom_setting->whats_num}}" class="btn btn-warning mt-lg-0 mt-3 semi text-cap col-lg-6 col-md-6 col-12 add_to_cart w-100" style="background: #00276C;color: #ffffff;border: none;"><i class="fa-brands fa-whatsapp" style="padding-right: 7px;"></i>{{ $ecom_setting->whats_num }}</a>
                </div>
                @endif
            </div>
            </form>
            @if($generalSetting->description)
            <p class="noticText">{!! $generalSetting->description !!}</p>
            @endif
            
        </div>
    </div>



    </div>
    <div class="description_tab mt-4">
    <div class="container-xl">
        <!-- Nav tabs -->
    <ul class="nav nav-tabs justify-content-start border-0" id="product_des" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active border-0" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">
                Product Details
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link border-0" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">
                {{ $home_footers->page_three_title }}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link border-0" id="review-tab" data-bs-toggle="tab" data-bs-target="#review" type="button" role="tab" aria-controls="review" aria-selected="true">
                Reviews
            </button>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content my-5">
        <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">
            <div class="wc-tab-inner">
                {!! str_replace('@','"', $single_product->product_details) !!}
            </div>
        </div>
        <div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab">
             <div class="row">
                <div class="col-lg-6">
                    <p class="">
                        {!! $termCondition->page_three_text !!}
                    </p>
                </div>
             </div>
        </div>
        <div class="tab-pane" id="review" role="tabpanel" aria-labelledby="review-tab">
            
            <div class="wc-tab-inner">
                <div class="woocommerce-tabs wc-tabs-wrapper" style="background: #dbd3d39e;">
                    <div class="container">
                        <div class="reviews-wrapper pt-4">
                            <div class="row">
                                <div class="col-lg-6 mb--20">
                                    <div class="axil-comment-area pro-desc-commnet-area pt-3">
                                        <h5 class="title">(<span class="reviewCount">{{$single_product->productReviews->count()}}</span>) Relative Product</h5>
                                        <ul class="comment-list">
                                            @include("partials.reviewList")
                                        </ul>
                                    </div>
                                </div>
                                <!-- End .col -->
                                <div class="col-lg-6 mb--20">
                                    <div class="comment-respond pro-des-commend-respond mt--0">
                                        <h5 class="title mb--10">Add a Review</h5>
                                        <div class="rating-wrapper d-flex-center mb--10">
                                             <div class="wrapper">
                                                <div class="master">
                                                    <div class="rating-component">
                                                        <div class="status-msg">
                                                            <label>
                                                                <input class="rating_msg" type="hidden" name="rating_msg" value="" />
                                                            </label>
                                                        </div>
                                                        <div class="stars-box">
                                                            <i class="star fa fa-star" title="1 star" data-message="Poor" data-value="1"></i>
                                                            <i class="star fa fa-star" title="2 stars" data-message="Too bad" data-value="2"></i>
                                                            <i class="star fa fa-star" title="3 stars" data-message="Average quality" data-value="3"></i>
                                                            <i class="star fa fa-star" title="4 stars" data-message="Nice" data-value="4"></i>
                                                            <i class="star fa fa-star" title="5 stars" data-message="very good qality" data-value="5"></i>
                                                        </div>
                                                        <div class="starrate">
                                                            <label>
                                                                <input class="ratevalue" type="hidden" name="rate_value" value="" />
                                                            </label>
                                                        </div>
                                                    </div>
            
                                                    <div class="feedback-tags">
                                                        <div class="tags-container" data-tag-set="1">
                                                            <div class="question-tag">
                                                                Why was your experience so bad?
                                                            </div>
                                                        </div>
                                                        <div class="tags-container" data-tag-set="2">
                                                            <div class="question-tag">
                                                                Why was your experience so bad?
                                                            </div>
                                                        </div>
            
                                                        <div class="tags-container" data-tag-set="3">
                                                            <div class="question-tag">
                                                                Why was your average rating experience ?
                                                            </div>
                                                        </div>
                                                        <div class="tags-container" data-tag-set="4">
                                                            <div class="question-tag">
                                                                Why was your experience good?
                                                            </div>
                                                        </div>
            
                                                        <div class="tags-container" data-tag-set="5">
                                                            <div class="make-compliment">
                                                                <div class="compliment-container">
                                                                    Give a compliment
                                                                    <i class="far fa-smile-wink"></i>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        <div class="tags-box">
                                                            <form action="{{ route('reviewStore') }}" method="POST" id="ajax_form2">
                                                              	@csrf
                                                              	<input type="hidden" name="product_id" value="{{$single_product->id}}" />
                                                              	<input type="hidden" name="review" id="review" value="" />
                                                              	
                                                                <div class="row">
                                                                    <div class="col-12">
                                                                        <div class="form-group">
                                                                            <label>Review Notes (Mandatory)</label>
                                                                            <textarea name="message" placeholder="Your Comment" class="form-control"></textarea>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-6 col-md-6 col-12 m-0">
                                                                        <div class="form-group">
                                                                            <label>Name <span class="require">*</span></label>
                                                                            <input id="name" type="text" name="name" placeholder="Your Name" class="form-control"/>
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-6 col-md-6 col-12 m-0">
                                                                        <div class="form-group">
                                                                            <label>Image <span class="require">*</span></label>
                                                                            <input type="file" form="ajax_form2" class="form-control" name="image" style="padding-top: 12px;">
                                                                        </div>
                                                                    </div>
                                                                    <div class="col-lg-12 mt-2 pb-4">
                                                                        <div class="button-box form-submit">
                                                                            <button type="submit" class="axil-btn btn-bg-primary w-auto">Submit Review</button>
                                                                        </div>
                                                                      <div class="submited-box">
                                                                          <div class="loader"></div>
                                                                          <div class="success-message">
                                                                              Thank you!
                                                                          </div>
                                                                      </div>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
         								</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                                
                    </div>
                    
                    
                    <!--  second woocomerce -->
        
            </div>
            </div>
        </div>
    </div>
    </div>

    </div>
    <div class="container-xl">
        <h3>Related Products</h3>
        <div class="products mt-3">
            @foreach($products as $product)
            @include('partials.product')
            @endforeach
        </div>
    </div>
    <br><br>
    <div class="container-xl">
    <hr/>
    <div class="row service-support-box" style="margin-left:3%; margin-right:3%;padding-top:50px;">
        
                <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
                    <div class="support service-support-single d-flex align-items-center ps-4">
                        <!--<img width="40" height="40" src="https://img.icons8.com/ios/40/marker--v1.png" alt="marker--v1"/>-->
                        <img src="{{url('posadmin/home_footer', $home_footers->service_one_icon)}}" width="40" height="40">
                        <div class="" style="margin: 5px;padding: 0px;">
                        <h6 style="margin:0px"><strong>{{ $home_footers->service_one_header }}</strong></h6>
                            <p class="font-13 m-0">
                                {{ $home_footers->service_one_text }}
                            </p>
                        </div>
                   </div>
                </div>
                
                <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
                    <div class="support service-support-single d-flex align-items-center ps-4">
                        <!--<img width="30" height="30" src="https://img.icons8.com/ios/30/return.png" alt="return"/>-->
                        <img src="{{url('posadmin/home_footer', $home_footers->service_two_icon)}}" width="40" height="40">
                        <div class="" style="margin: 5px;padding: 0px;">
                            <h6 style="margin:0px"><strong>{{ $home_footers->service_two_header }}</strong></h6>
                            <p class="font-13 m-0">
                                {{ $home_footers->service_two_text }}
                            </p>
                        </div>
                    </div>
                </div>
                
               <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
                  <div class="support service-support-single d-flex align-items-center ps-4">
                     <!--<img width="50" height="50" src="https://img.icons8.com/ios/50/geography--v1.png" alt="geography--v1"/>-->
                     <img src="{{url('posadmin/home_footer', $home_footers->service_three_icon)}}" width="40" height="40">
                     <div class="" style="margin: 5px;padding: 0px;">
                        <h6 style="margin:0px"><strong>{{ $home_footers->service_three_header }}</strong></h6>
                        <p class="font-13 m-0">
                           {{ $home_footers->service_three_text }}
                        </p>
                     </div>
                  </div>
               </div>
               
               <div class="col-lg-3 col-md-6 col-12 mb-3">
                  <div class="support service-support-single d-flex align-items-center ps-4">
                     <!--<img width="50" height="50" src="https://img.icons8.com/ios/50/private2.png" alt="private2"/>-->
                     <img src="{{url('posadmin/home_footer', $home_footers->service_four_icon)}}" width="40" height="40">
                     <div class="" style="margin: 5px;padding: 0px;">
                        <h6 style="margin:0px"><strong>{{ $home_footers->service_four_header }}</strong></h6>
                        <p class="font-13 m-0">
                          {{ $home_footers->service_four_text }}
                        </p>
                     </div>
                  </div>
               </div>
               
            </div>
    <div class="row service-support-box" style="margin-left:3%; margin-right:3%;padding:50px 0px;">
               <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
                  <div class="support service-support-single d-flex align-items-center ps-4">
                     <!--<img width="50" height="50" src="https://img.icons8.com/ios/50/about.png" alt="about"/>-->
                     <img src="{{url('posadmin/home_footer', $home_footers->page_one_icon)}}" width="40" height="40">
                     <!-- <p><span>Free Shipping &amp; Returns</span> <br>For all order over 5 items</p>p -->
                     <div class="" style="margin: 5px;padding: 0px;">
                       <a href="{{ route('aboutSite') }}"><h6 style="margin:0px"><strong>{{ $home_footers->page_one_title }}</strong></h6></a>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
                  <div class="support service-support-single d-flex align-items-center ps-4">
                     <!--<img width="40" height="40" src="https://img.icons8.com/ios/40/marker--v1.png" alt="marker--v1"/>-->
                     <img src="{{url('posadmin/home_footer', $home_footers->page_two_icon)}}" width="40" height="40">
                     <!-- <p><span>Free Shipping &amp; Returns</span> <br>For all order over 5 items</p>p -->
                     <div class="" style="margin: 5px;padding: 0px;">
                        <a href="{{ route('deliveryPolicy') }}"><h6 style="margin:0px"><strong>{{ $home_footers->page_two_title }}</strong></h6></a>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-12 border-end mb-3">
                  <div class="support service-support-single d-flex align-items-center ps-4">
                     <!--<img width="40" height="40" src="https://img.icons8.com/dotty/40/term.png" alt="term"/>-->
                     <img src="{{url('posadmin/home_footer', $home_footers->page_three_icon)}}" width="40" height="40">
                     <!-- <p><span>Free Shipping &amp; Returns</span> <br>For all order over 5 items</p>p -->
                     <div class="" style="margin: 5px;padding: 0px;">
                         <a href="{{ route('termsCondition') }}"><h6 style="margin:0px"><strong>{{ $home_footers->page_three_title }}</strong></h6></a>
                     </div>
                  </div>
               </div>
               <div class="col-lg-3 col-md-6 col-12 mb-3">
                  <div class="support service-support-single d-flex align-items-center ps-4">
                    <!--<img width="30" height="30" src="https://img.icons8.com/ios/30/return.png" alt="return"/>-->
                    <img src="{{url('posadmin/home_footer', $home_footers->page_four_icon)}}" width="40" height="40">
                     <!-- <p><span>Free Shipping &amp; Returns</span> <br>For all order over 5 items</p>p -->
                     <div class="" style="margin: 5px;padding: 0px;">
                        <a href="{{ route('returnedPolicy') }}"><h6 style="margin:0px"><strong>{{ $home_footers->page_four_title }}</strong></h6></a>
                     </div>
                  </div>
               </div>
            </div>
    </div>
@endsection

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).on('submit', 'form#cart_submit', function(e) {
    e.preventDefault();

    window.dataLayer = window.dataLayer || [];

    dataLayer.push({ ecommerce: null });

    let product_id = $('input[name="product_id"]').val();
    let product_name = $('input[name="product_name"]').val();
    let category_id = $('input[name="category_id"]').val();
    let sell_price = parseFloat($('input[name="price"]').val());
    let quantity = parseFloat($('input[name="quantity"]').val());

    let url = $(this).attr('action');
    let method = $(this).attr('method');
    let data = $(this).serialize();

    $.ajax({
        url: url,
        method: method,
        data: data,
        success: function(res) {
            if (res.success) {
                toastr.success(res.msg);

                if (res.html || res.view) {
                    $(document).find('div#cart_section').html(res.html);
                    $(document).find('.fixed-cart-bottom').html(res.view);
                    
                    // Fire add_to_cart event on form submission
                    dataLayer.push({
                        event: "add_to_cart",
                        ecommerce: {
                            currency: "BDT",
                            value: sell_price,
                            items: [
                                {
                                    item_id: product_id,
                                    item_name: product_name,
                                    item_category: category_id,
                                    price: sell_price,
                                    quantity: quantity
                                }
                            ]
                        }
                    });
                }

                if (res.item) {
                    $(document).find('span.cart-count').text(res.item);
                }

                // Optionally reload or navigate
                // window.location.reload();
            } else {
                toastr.error(res.msg);
            }
        },
        error: function(response) {
            $.each(response.responseJSON.errors, function(field_name, error) {
                toastr.error(error);
            });
        }
    });
});
</script>

<script>
    $(document).on('click','.color', function(){
        let color_name=$(document).find('.color:checked').val();
        if(color_name){
            if($(document).find('.carousel-item').hasClass(color_name)){
                $(document).find('.carousel-item').removeClass('active');
                $(document).find('.'+color_name).addClass('active');
            }else{
                
            }
        }
        
    });
    
    $(document).ready(function(){
        let variant_1=$('input[name="variant_1"]').val();
        let variant_2=$('input[name="variant_2"]').val();
        getPrice(variant_1,variant_2);
    });
    
    $(document).on('click','input[name="variant_1"]',function(){
        let variant_1=$(this).val();
        let variant_2=$('input[name="variant_2"]:checked').val();
        getPrice(variant_1,variant_2);
    });
    
    $(document).on('click','input[name="variant_2"]',function(){
        let variant_2=$(this).val();
        let variant_1=$('input[name="variant_1"]:checked').val();
        getPrice(variant_1,variant_2);
    });
    
    function getPrice(variant_1,variant_2){
        let product_id=$('input[name="product_id"]').val();
        let url="{{route('variablePrice')}}";
        $.ajax({
            url:url,
            data:{variant_1,variant_2,product_id},
            success:function(res){
                $('span#pro_price').text(res.variantPrice);
            }
        });
    }
    
    $(document).on('submit','form#order_submit',function(e){
        e.preventDefault();
        
        let url=$(this).attr('action');
    	let method=$(this).attr('method');
    	let data= $(this).serialize();
        
        $.ajax({
            url: url,
            method: method,
            data: data,
            success: function(res) {
                if(res.success) {
                    toastr.success(res.msg);
                    window.location.href=res.url;
                    // window.location.reload();
                } else {
                    toastr.error(res.msg);
                }
            }
        });
    });
    
    $(document).on('click', 'button.add_to_cart', function(e) {
        e.preventDefault();
        
        window.dataLayer = window.dataLayer || [];
    
        dataLayer.push({ ecommerce: null });
    
        let product_id = $('input[name="product_id"]').val();
        let product_name = $('input[name="product_name"]').val();
        let category_id = $('input[name="category_id"]').val();
        let sell_price = parseFloat($('span#pro_price').text());
        let quantity = parseFloat($('input[name="quantity"]').val());
       
        var formData = $(this).closest('form').serialize();
        var url = "{{ route('cartstore')}}";
        
        var method = "POST";
        $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }});
        
        $.ajax({
            url: url,
            method: method,
            data: formData,
            success: function(res) {
                if(res.success) {
                    
                    dataLayer.push({
                        event: "add_to_cart",
                        ecommerce: {
                            currency: "BDT",
                            value: sell_price,
                            items: [
                                {
                                    item_id: product_id,
                                    item_name: product_name,
                                    item_category: category_id,
                                    price: sell_price,
                                    quantity: quantity
                                }
                            ]
                        }
                    });
                    
                    toastr.success(res.msg);
                    window.location.reload();
                } else {
                    toastr.error(res.msg);
                }
            }
        });
    });
    
    
    $(document).on('submit','form#ajax_form2', function(e) {   
        e.preventDefault();
        
        var url=$(this).attr('action');
         var method=$(this).attr('method');
         var formData = new FormData($(this)[0]);
    	
    	$.ajax({
    	     type: method,
             url: url,
             data: formData,
             async: false,
             processData: false,
             contentType: false,
            success: function (res) {
                if (res.status) {
                    toastr.success(res.msg);
                    if (res.view) {
                    	$('.comment-list').empty().append(res.view);
                    }
                    $('.reviewCount').text(res.reviewCount);
                    $('form#ajax_form2')[0].reset();
                    
                    if (res.item) {
                    	$(document).find('li.comment').text(res.item);
                    }
                  
                    if(res.url){
                    	document.location.href = res.url;
                    } else {
                        setTimeOut(function(){
                            window.location.reload();
                        }, 1000)
                    }
                    
                }else{
                    toastr.error(res.msg);
                }
            },
            error:function (response){
                $.each(response.responseJSON.errors,function(field_name,error){
                    toastr.error(error);
                })
            }
    	}); 
     
    }); 
    
    
    $(".rating-component .star").on("mouseover", function () {
        var onStar = parseInt($(this).data("value"), 10);
        $(this).parent().children("i.star")
            .each(function (e) {
                if (e < onStar) {
                    $(this).addClass("hover");
                } else {
                    $(this).removeClass("hover");
                }
            });
    }).on("mouseout", function () {
        $(this).parent().children("i.star")
            .each(function (e) {
                $(this).removeClass("hover");
            });
    });

    $(".rating-component .stars-box .star").on("click", function () {
        var onStar = parseInt($(this).data("value"), 10);
        var stars = $(this).parent().children("i.star");
        var ratingMessage = $(this).data("message");
    
        // Set the review input value
        $("input#review[name='review']").val(onStar);
    
        var msg = "";
        if (onStar > 1) {
            msg = onStar;
        } else {
            msg = onStar;
        }
    
        $(document).find("#review").val(onStar);
        $(".rating-component .starrate .ratevalue").val(msg);
    
        $(".fa-smile-wink").show();
    
        $(".button-box .done").show();
    
        if (onStar === 5) {
            $(".button-box .done").removeAttr("disabled");
        } else {
            $(".button-box .done").attr("disabled", "true");
        }
    
        for (i = 0; i < stars.length; i++) {
            $(stars[i]).removeClass("selected");
        }
    
        for (i = 0; i < onStar; i++) {
            $(stars[i]).addClass("selected");
        }
    
        $(".status-msg .rating_msg").val(ratingMessage);
        $(".status-msg").html(ratingMslick - slideressage);
        $("[data-tag-set]").hide();
        $("[data-tag-set=" + onStar + "]").show();
    });
    
    $(".feedback-tags  ").on("click", function () {
        var choosedTagsLength = $(this).parent("div.tags-box").find("input").length;
        choosedTagsLength = choosedTagsLength + 1;
    
        if ($(this).hasClass("choosed")) {
            $(this).removeClass("choosed");
            choosedTagsLength = choosedTagsLength - 2;
        } else {
            $(this).addClass("choosed");
            $(".button-box .done").removeAttr("disabled");
        }
    
        console.log(choosedTagsLength);
    
        if (choosedTagsLength <= 0) {
            $(".button-box .done").attr("enabled", "false");
        }
    });
    
    $(".compliment-container .fa-smile-wink").on("click", function () {
        $(this).fadeOut("slow", function () {
            $(".list-of-compliment").fadeIn();
        });
    });
    
    $(".done").on("click", function () {
        $(".rating-component").hide();
        $(".feedback-tags").hide();
        $(".button-box").hide();
        $(".submited-box").show();
        $(".submited-box .loader").show();
    
        setTimeout(function () {
            $(".submited-box .loader").hide();
            $(".submited-box .success-message").show();
        }, 1500);
    });

    
</script>
@endpush