@extends('layouts.site')

@section('content')
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
                                             <style>   .custom-radios div {
  display: inline-block;
}
.custom-radios input[type="radio"] {
  display: none;
}
.custom-radios input[type="radio"] + label {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 14px;
}
.custom-radios input[type="radio"] + label span {
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  cursor: pointer;
 /* border-radius: 50% comment if u want square */;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  line-height: 40px;
}
.custom-radios input[type="radio"] + label span img {
  opacity: 0;
  transition: all 0.3s ease;
}
/*.custom-radios input[type="radio"]#color-3 + label span {
  background-color: #f1c40f;
}
.custom-radios input[type="radio"]#color-4 + label span {
   background-color: #e74c3c;
}*/
.custom-radios input[type="radio"]:checked + label span img {
  opacity: 1;
} </style> 
<!--exampple of custom radio button square and circle -->
      <!--<div class="custom-radios">
      
  <div>
    <input type="radio" id="color-3"   name="color" value="color-3">
    <label for="color-3"  >
      <span style="background-color: #f1e431;">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/check-icn.svg" alt="Checked Icon" />
      </span>
    </label>
  </div>
 <div>
    <input type="radio" id="color-5"   name="color" value="color-3">
    <label for="color-5"  >
      <span style="background-color: #67e431;">
        <img src="{{asset('images/button/check-icn.svg')}}" alt="Checked Icon" />
      </span>
    </label>
  </div>
  <div>
    <input type="radio" id="color-4" name="color" value="color-4">
    <label for="color-4">
      <span  style="background-color: #f1c40f;">
        <img src="{{asset('images/button/check-icn.svg')}}" alt="Checked Icon" />
      </span>
    </label>
  </div>
</div>  -->

  <meta name="csrf-token" content="{{ csrf_token() }}" /> 
 
    <div id="wrapper-site">

        <nav data-depth="3" class="breadcrumb-bg">
            <div class="container no-index">
                <div class="breadcrumb">

                    <ol itemscope="" itemtype="http://schema.org/BreadcrumbList">
                        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                            <a itemprop="item" href="{{route('home')}}">
                                <span itemprop="name">Home</span>
                            </a>
                            <meta itemprop="position" content="1">
                        </li>

                        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                       
                           <a itemprop="item" href="">
                                <span itemprop="name">{{$product -> name_ar}}</span>
                                 
                            </a> 
                            <meta itemprop="position" content="3">
                        </li>
                    </ol>

                </div>
            </div>
        </nav>

 @include('front.includes.alerts.success')
                            @include('front.includes.alerts.errors')

        <div class="no-index">
            <div id="content-wrapper">

                <section id="main" itemscope="" itemtype="https://schema.org/Product">
                    <div class="product-detail-top">
                        <div class="container">
                        
                          
                         
                         
                            <div class="row main-productdetail" data-product_layout_thumb="list_thumb"
                                 style="position: relative;">
                                <div class="col-lg-5 col-md-4 col-xs-12 box-image">
                                    <section class="page-content" id="content">
                                        <div class="images-container list_thumb">
                                            <div class="product-cover">
                                                <img class="js-qv-product-cover img-fluid"
                                                     src="{{  $product->img    ?? ''}}{{--$product -> images[0] -> img ?? ''--}}"
                                                     alt="" title="" style="width:100%;" itemprop="image">
                                                <div class="layer hidden-sm-down" data-toggle="modal"
                                                     data-target="#product-modal">
                                                    <i class="fa fa-expand"></i>
                                                </div>
                                            </div>
                                            <div class="js-qv-mask mask only-product">
                                                <div class="row">
                                                    @isset($product -> images)
                                                        @foreach($product -> images as $image)
                                                            <div class="item thumb-container col-md-6 col-xs-12 pt-30">
    <img class="img-fluid thumb js-thumb  selected "  data-image-medium-src=" {{  $image->img    ?? ''}}"
  data-image-large-src="{{$image->img    ?? ''}} " src="{{  $image->img    ?? ''}} " alt="" title="" itemprop="image">
                                                       
 </div> 
                                                        @endforeach
                                                    @endisset
                                                </div>
                                            </div>
                                        </div>
                                    </section>
                                </div>

                        
                                <div class="col-lg-7 col-md-8 col-xs-12 mt-sm-20">
                                    <div class="product-information">
                                    <!--begin count down -->
                                                      @php $expire_date= $product -> end_date @endphp                           
 <div id="count_down"   class="product-information" data-expire_date="{{$product ->end_date}}" ></div>                           
  <!--end count down -->
                                        <div class="product-actions">  

     <form   action="{{ route('site.cart.add',$product -> id ) }}" method="POST">
                                        
                                           <!-- <form action="{{-- route('product.addToCart.store') --}}"
                                                  method="post" id="add-to-cart-or-refresh" class="row">-->
                                                @csrf
                                              {{--route('products.reviews.store',$product -> id )--}}  <input type="hidden" name="id_product" value="{{$product -> id }}"
                                                       id="product_page_product_id">

                                                <div class="productdetail-right col-12 col-lg-6 col-md-6">
                                                    <div class="product-reviews">
                                                        <div id="product_comments_block_extra">
                                                            <div class="comments_note">
                                                                <span>Review: </span>
                                                                <div class="star_content clearfix">
                                                                    <div class="star star_on"></div>
                                                                    <div class="star star_on"></div>
                                                                    <div class="star star_on"></div>
                                                                    <div class="star star_on"></div>
                                                                    <div class="star star_on"></div>
                                                                </div>
                                                            </div>

                                                            <div class="comments_advices">
                                                                <a href="#" class="comments_advices_tab"><i
                                                                        class="fa fa-comments"></i>Read reviews (1)</a>
                                                                <a class="open-comment-form" data-toggle="modal"
                                                                   data-target="#new_comment_form" href="#"><i
                                                                        class="fa fa-edit"></i>Write your review</a>
                                                            </div>
                                                        </div>
                                                        <!--  /Module NovProductComments -->
                                                    </div>

                                                    <h1 class="detail-product-name"
                                                        itemprop="name">{{$product -> name_ar}}</h1>
                                                    <div
                                                        class="group-price d-flex justify-content-start align-items-center">
                                                        <div class="product-prices">
                                                            <div class="product-price " itemprop="offers" itemscope=""
                                                                 itemtype="https://schema.org/Offer">
                                                                <div class="current-price">
                                                                    <span itemprop="price"
                                                                          class="price">
        {{ $price_now=($product->discount_price ?? $product -> price )}}
        {{--$product -> discount_price ?? $product -> price --}}</span>
                                                                    @if($product -> discount_price)
                                                                        <span
                                                                            class="regular-price"> <del>  {{$product -> price}}</del></span>
                                                                    @endif
                                                                <input type="hidden"  name="price_now"  value="{{$price_now}}" > </div>
                                                            </div>
                                                            <div class="tax-shipping-delivery-label">
                                                                Tax included
                                                            </div>
                                                        </div>

                                                    </div>


                                                    <div class="in_border end">

                                                        <div class="sku">
                                                            <label class="control-label">Sku:</label>
                                                            <span itemprop="sku"
                                                                  content="demo_1">{{$product -> code ?? '--'}}</span>
                                                        </div>
                                                        <div class="pro-cate">
                                                            <label class="control-label">Categories:</label>

                                                            @isset($product -> categories)
                                                                <div>
                                                                    @foreach($product -> categories as $category )
                                                                        <span><a
                                                                                href="{{route('category',$category -> slug_ar )}}"
                                                                                title="Computer &amp; Networking">{{$category -> name_ar}}</a></span>
                                                                    @endforeach
                                                                </div>
                                                            @endisset
                                                        </div>
                                                        <!--<div class="pro-tag">
                                                            <label class="control-label">Tags:</label>
                                                            @isset($product -> tags)
                                                                <div>
                                                                    @foreach($product -> tags as $tag )
                                                                        <span><a href="">{{$tag -> name}}</a></span>
                                                                    @endforeach
                                                                </div>
                                                            @endisset
                                                        </div>-->
                                                    </div>


                                                    <div id="_desktop_productcart_detail">
                                                        <div class="product-add-to-cart in_border">
                                                            <div class="add">
          <!-- <input type="submit"  class="btn btn-primary add-to-cart" data-button-action="add-to-cart" >--> <button class="btn btn-primary add-to-cart"   type="submit"  >
                                                                       
                                                                    <div class="icon-cart">
                                                                        <i class="shopping-cart"></i>
                                                                    </div>
                                                                    <span>Add to cart</span>
                                                                </button>
                                                            </div>
 <a class="addToWishlist  wishlistProd_22" href="#"
                                                               data-product-id="{{$product -> id}}"
                                                            >
   
                                                                <i class="fa fa-heart"></i>
                                                                <span>Add to Wishlist</span>
                                                            </a>

 
                                                            <div class="clearfix"></div>
<!--clockdiv-->
                                            
      
    
                                                            <div id="product-availability" class="info-stock mt-20">
                                                                <label class="control-label">Availability:</label>
                                                                {{$product -> in_stock ? 'in stock' : 'out of stock'}}
                                                            </div>
                                                        </div>
                                                    </div>


                                                    <input class="product-refresh ps-hidden-by-js" name="refresh"
                                                           type="submit" value="Refresh">

                                                </div>
         <div class="productdetail-left col-12 col-lg-6 col-md-6">


                                                    <div class="product-quantity">
                                                        <span class="control-label">Quantity : </span>
                                       {{--old('qty')--}} <div class="qty">
   <input type="text" name="qty" id="quantity_wanted" value="1"   class="input-group" min="1">
                                                                  
                                                        </div>
                                                    </div>


                          <div class="product-variants in_border">
                                                       
           @if(isset($product_sizes) && count($product_sizes) > 0 )
                                 <div class="product-variants-item"> 
                                                                    
                         @if(count($product_sizes_count) > 0)                   
                                             <span class="control-label">size: </span>                        
  <select id="all_sizes"   name="all_sizes" required>  <option value="" title="Select"   disabled   > select size</option>
  @foreach($product_sizes as $product_size)
 
           @if(($product_size -> size_id)!="")  
       		
            <option value="{{$product_size ->id}} " title=""   >
    
      {{$product_size ->size_name}} </option>                                      
                         @endif                                                             
                                                  
                                              
                                                                            @endforeach
                                                                        </select>
                                                                        
        
                                                                  @endif      

                                                                </div>
                     <!--  display that div if the product have colors only and dont have size  -->                                     
  <div class="product-variants-item " id="display-product-colors"  style="display:none">  
                                
                                 
                                      
                                                  <!-- <select id="all_colors"   name="all_colors"  > 
                                      
                                                 </select> -->     
                                                           
                                                  </div>
                                                                
 {{--count($product_sizes_count)--}}
  @if(count($product_sizes_count) == 0 ) 
  @php $i=1;
  @endphp
     <div class="product-variants-item ">
        <div class="custom-radios"> 
                                            <span class="control-label">color: </span>                        
                                 @foreach($product_sizes as $product_size)
                                 @if(($product_size -> color_id)!="")  
                                                             
    {{--$product_size ->color_id--}}
     								  <input type="hidden" name="stock_id" value="{{$product_size ->id}}">
                                       @foreach($colors as $product_color)
                                      @if($product_color!="")