@extends('Layouts.frontLayout',['classBody'=>"page-template-default page container-max-width show-bottom-nav compare-page"])
@section('title')
   {{__('Compare')}}
@endsection
@section('content')
@php $date = \Morilog\Jalali\Jalalian::now()->getTimestamp(); @endphp
    <main id="main">
      <div class="container container-single-post">
        <nav class="breadcrumb">
          <nav class="page-wrapper-breadcrumb breadcrumb">
            <a href="/">{{__('Home')}}</a>&nbsp;&#47;&nbsp;{{__('Compare')}}
          </nav>
        </nav>
		@php $countProduct=0; @endphp
		  @if(count($data['product'])== 4)
			  @php $countProduct=count($data['product']); @endphp
		  @else
			 @php $countProduct=count($data['product'])+1; @endphp
		  @endif
        <div class="row">
          <div class="col-12  post-main-content">
            <article class="post-single post-42 page type-page status-publish hentry">
              <header class="post-header">
                <h1 class="post-title"> {{__('Compare')}}</h1>
                </h1>
              </header>
              <div class="post-content">
                <div class="compare-list">
                  <div class="product-row" style="grid-template-columns: repeat({{$countProduct}}, minmax(0,1fr));">
                   @foreach($data['product'] as $product)
                    <div class="product-data">
                      <span class="remove-compare"  onclick="remove_campare('{{$product->id}}')" >
                        <svg viewBox="0 0 24 24" class="svg" style="display: none;">
                          <path fill-rule="evenodd" d="M18.364 7.05L16.95 5.636 12 10.586l-4.95-4.95L5.636 7.05l4.95 4.95-4.95 4.95 1.414 1.414 4.95-4.95 4.95 4.95 1.414-1.414-4.95-4.95 4.95-4.95z" clip-rule="evenodd"></path>
                        </svg>
                      </span>
                      <a href="{{route('Front.products.index',$product->slug)}}" target="_blank">
                        <img width="150" height="150" src="/File/product/150_150/{{$product->image}}" class="attachment-page-wrapper_thumbnail size-page-wrapper_thumbnail" alt="{{$product->title}}" decoding="async" loading="lazy" srcset="/File/product/150_150/{{$product->image}} 150w, /File/product/300_300/{{$product->image}} 300w, /File/product/768_768/{{$product->image}} 768w, /File/product/600_600/{{$product->image}} 600w, /File/product/64_64/{{$product->image}} 64w, /File/product/{{$product->image}} 800w" sizes="(max-width: 150px) 100vw, 150px" />
                      </a>
                      <h4 class="product-title">{{$product->title}}</h4>
 
                      <div class="price">
                        <span class="page-wrapper-Price-amount amount">
                          <bdi>    @if(sizeof($product->prices) >0)
							   @if($product->prices[0]->discount_percent>0 and $product->prices[0]->time_discount==1 and $date < $product->prices[0]->end_date)
                                               {{fnumber_format(PriceCalculation($product->prices[0]->price,$product->prices[0]->discount_percent))}}
                                           @else
                                               {{fnumber_format($product->prices[0]->price)}}  
                                           @endif
                                                @endif
							   <span class="page-wrapper-Price-currencySymbol">{{$prefix}}</span>
                          </bdi>
                        </span>
                      </div>
                      <div>
                        <a href="{{route('Front.products.index',$product->slug)}}" class="button button-small add2cart" target="_blank">
                          <svg viewBox="0 0 24 24" class="svg" style="display: none;">
                            <path fill-rule="evenodd" d="M20 4h2V2h-3a1 1 0 00-1 1v1H3a1 1 0 00-.995 1.1l1 10A1 1 0 004 16h15a1 1 0 001-1V4zm-2 17a2 2 0 110-4 2 2 0 010 4zM5 21a2 2 0 110-4 2 2 0 010 4zm13-7V6H4.105l.8 8H18z" clip-rule="evenodd"></path>
                          </svg> {{__('Add To Cart')}}</a>
                      </div>
                    </div>
					@endforeach
					 
                 @if(  count($data['product']) <  4 )
                    <div class="product-data">
                      <button class="modal-toggle button button-primary button-outline" data-modal="compare-search">{{__('Product Selection')}}</button>
                    </div>
					@endif
                  </div>
				  @foreach($data['categoryAttribute'] as $categoryAttribute)
                  <div class="attributes-title">{{$categoryAttribute->title}}</div>
				  
                  <div class="attributes">
                @foreach($categoryAttribute->attributeAll as $attribute)
 
                    <div class="attribute-title">{{$attribute->title}}</div>
                    <div class="attributes-row" style="grid-template-columns: repeat({{count($data['product'])+1}}, minmax(0,1fr));">
					 @for($i=0;$i<$data['count'];$i++)
                     @php  $AttributeValue=\App\Models\AttributeValue::getProductAttributeValue($attribute->id,$data['product'][$i]->id); @endphp
                      <div class="attributes-data">
					    @if(sizeof($AttributeValue)>0)
                             @if($AttributeValue[0]->attribute_value_id!=0)
								 	{{implode(',',$AttributeValue->pluck('value')->toArray())}}
                             @else
							  {{$AttributeValue[0]->text}}
						   @endif
                        @endif
					  </div>
					  @endfor
                    </div>
                  @endforeach

                  </div>
				  
				  @endforeach
                </div>
                <div class="modal" id="compare-search">
                  <div class="modal-dialog">
                    <header class="modal-header">
                      <strong class="modal-title">{{__('Select A Product To Compare')}}</strong>
                      <svg viewBox="0 0 24 24" class="close svg" style="display: none;">
                        <path fill-rule="evenodd" d="M18.364 7.05L16.95 5.636 12 10.586l-4.95-4.95L5.636 7.05l4.95 4.95-4.95 4.95 1.414 1.414 4.95-4.95 4.95 4.95 1.414-1.414-4.95-4.95 4.95-4.95z" clip-rule="evenodd"></path>
                      </svg>
                    </header>
                    <div class="modal-content">
                      <form class="compare-search-form" onsubmit="return false;" id="compare-search-form">
                        <svg viewBox="0 0 24 24" class="search-icon svg" style="display: none;">
                          <path fill-rule="evenodd" d="M10.5 18a7.5 7.5 0 115.973-2.963l4.369 4.246-1.394 1.434-4.387-4.263A7.467 7.467 0 0110.5 18zm5.5-7.5a5.5 5.5 0 11-11 0 5.5 5.5 0 0111 0z" clip-rule="evenodd"></path>
                        </svg>
                        <input type="search"  id="searchProductCompare"   name="searchProductCompare"  autocomplete="off" placeholder="{{__('Search For Store Products')}}">
                         <input id="productsAll" value="{{$data['ids']}}" type="hidden" />
                         <input id="categoryAll" value="{{$data['category']}}"  type="hidden" />
                      </form>
                       
                     <div class="compare-search-results"  >
					 
					
                       <div class="products" id="searchCompares">
                      @foreach($data['categoryProduct'] as $categoryProduct)
                         @php  $href=$data['ids'].','.$categoryProduct->id; @endphp
                         <div class="product add-compare" data-id="{{$categoryProduct->id}}" data-href="{{$href}}">
                          <img width="150" height="150" src="/File/product/150_150/{{$categoryProduct->image}}" class="attachment-page-wrapper_thumbnail size-page-wrapper_thumbnail" alt="{{$categoryProduct->title}}" decoding="async" loading="lazy" srcset="/File/product/150_150/{{$categoryProduct->image}} 150w, /File/product/300_300/{{$product->image}} 300w, /File/product/768_768/{{$categoryProduct->image}} 768w, /File/product/600_600/{{$categoryProduct->image}} 600w, /File/product/64_64/{{$product->image}} 64w, /File/product/{{$categoryProduct->image}} 800w" sizes="(max-width: 150px) 100vw, 150px" />
                           <div class="product-title"> {{$categoryProduct->title}}</div>
                         </div>
                     	 @endforeach
                     	 
                      
                       </div>
                     </div>
					 
                    </div>
                  </div>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </main>
	
@endsection

 @section('script')
   	 
	   <script>
	   
	   
function remove_campare(product_id)
{
    var url  = window.location.href;
    var charproduct=','+product_id;
    var res = url.replace(charproduct, "");
    document.location.href=res;
}

 	  $(document).on('keyup', '#compare-search input', function () {
		  
        if ($(this).val().length > 2 && $(this).val() != "{!!__('Search For Store Products') !!}") {
            var query = $(this).val();
            var obj = $(this);
            setTimeout(function () {
                var search = obj.val();
                if (search == query) {
                    ProductCompare(query)
                }
            }, 500)
        }
    });
	
function addCompare(value)
{
	 var products= $('#productsAll').val();
	  var hrefs=products+','+value;
	 document.location.href=hrefs;
}
function ProductCompare(value)
{
	
	 var products= $('#productsAll').val();
	 var category_id= $('#categoryAll').val();
	 
    $.ajax({
        url: "/compares/searchCompare/" + category_id+'/'+products+'/'+value,
        method: 'GET',
        dataType: 'json',
        success: function (data) {
            if (data.length === 0) {
				$('#searchCompares').html('');
                $('#searchCompares').append('<div class="empty-cart-error setinco-box-shadow text-center dir-rtl">{!!__('No Product Found') !!}</div>');
            } else {
                if (data.length > 0) {
					$('#searchCompares').html('');
                    jQuery.each(data, function (key, value) {
                       var href=products+','+value.id;
                        jQuery('#searchCompares').append('<div class="product add-compare" onclick="addCompare('+value.id+')" data-id="'+value.id+'"  data-href="'+href+'" ><img width="150" height="150" src="/File/product/150_150/'+value.image+'" class="attachment-page-wrapper_thumbnail size-page-wrapper_thumbnail" alt="'+value.title+'" decoding="async" loading="lazy" srcset="/File/product/150_150/'+value.image+' 150w, /File/product/300_300/'+value.image+' 300w, /File/product/768_768/'+value.image+' 768w, /File/product/600_600/'+value.image+' 600w, /File/product/64_64/'+value.image+' 64w, /File/product/'+value.image+' 800w" sizes="(max-width: 150px) 100vw, 150px" /><div class="product-title">'+value.title+'</div> </div>');
                    });
                }


            }

        }
    })	 
}
 

	       $('.add-compare').click(function () {
			  let hrefs = $(this).data("href");
		   document.location.href=hrefs;
          });
		  
	       $('.modal-toggle').click(function () {
		
         let e = $(this).data("modal");
		  $("#" + e).addClass("show");
    });
	        
  </script>
 @endsection