@extends('layouts.app')

@section('title', 'Search')

@section('content')
<section class="pt-2 pb-2 bg-white">
  <div class="container mt-5">
    <div class="row d-flex justify-content-center mb-5">
      <div class="col-lg-12 col-12">
        <div class="card">
          <div class="row">
            <div class="col-lg-6 col-12 border">
              <div class="images p-3">
                <div class="text-center p-4  ">
                  <div class="img-zoom-container"> 
                    <img class="demo-trigger" id="main-image" src="{{ asset('storage/'.$item->image) }}" width="350" data-zoom="{{ asset('storage/'.$item->image) }}"  />  
                  </div>
                </div>
                <div class="thumbnail text-center">
                  @if(!empty($item->image))
                      <img onclick="change_image(this)" src="{{ asset('storage/'.$item->image) }}" width="100" > 
                   @endif
                   @if(!empty($item->image1))
                      <img onclick="change_image(this)" src="{{ asset('storage/'.$item->image1) }}" width="100" > 
                   @endif
                   @if(!empty($item->image2))
                   <img onclick="change_image(this)" src="{{ asset('storage/'.$item->image2) }}" width="100" > 
                   @endif
                   @if(!empty($item->image3))
                   <img onclick="change_image(this)" src="{{ asset('storage/'.$item->image3) }}" width="100" > 
                   @endif
                </div>
                
              </div>

            </div>

            <div class="col-md-6 brands">
              <div class="product p-4 ">                
                <div class="mt-4 mb-3">
                <span class="text-uppercase text-muted  small">{{ $brand->name }}</span>
                  <h2 class="item-name-view">{{ $item->name }}</h2>

                  <span class="text-uppercase text-muted  mt-3 mb-3">Model:  {{ $item->model }} <span class="fw-bold m-3"> | </span> <span class="text-uppercase text-muted brand" id="sku">SKU:  @if($variants->count() > 0){{ $variants[0]->sku }} @endif</span> </span>
                  <div class="ssw-stars ssw-stars-large ">  
                    <i class="fas fa-star fassas-yellow"></i><i class="fas fa-star fassas-yellow"></i><i class="fas fa-star fassas-yellow"></i><i class="fas fa-star fassas-yellow"></i><i class="fas fa-star fassas-yellow"></i>
                    <!-- <span class="ssw-review-counts" >5 Star </span> -->
                  </div>
<hr>
                  <div class="price align-items-center mt-3">
                    @if($variants->count() > 0)
                        @php
                             $save_price = $item->price - $variants[0]->price;
                        @endphp
                        <div>
                          <span class="mrp-cut home-bc"><i class="fas fa-rupee-sign"></i> {{ $item->price }}</span> <i class="fas fa-rupee-sign px-2" ></i><span class="act-price mb-0" id="price" style=" line-height: 1; font-size: 1.8rem; font-weight: 500; color: var(--txt-body); margin-right: 8px; ">{{ $variants[0]->price }}</span> <span class="home-bc h6">You Save:  </span><i class="fas discount-percentage fa-rupee-sign"></i><span class="discount-percentage" id="save_price">{{ $save_price }}</span>               
                        </div>
                        <div>
                          
                        </div>
                    @else
                         @php
                             $save_price = $item->price - $item->sale_price;
                        @endphp
                         <div>
                          <span class="mrp-cut"><i class="fas fa-rupee-sign"></i> {{ $item->price }}</span><i class="fas fa-rupee-sign px-2" ></i><span class="act-price mb-0" id="price" style=" line-height: 1; font-size: 1.8rem; font-weight: 500; color: var(--txt-body); margin-right: 8px; ">{{ $item->sale_price }}</span>                
                        </div>
                        <div>
                          <span class="home-bc h6">You Save:  </span><span class="home-bc h5"><i class="fas fa-rupee-sign"></i> {{ $save_price }}</span>
                        </div>
                     @endif
                    
                      <p class="mt-2 delivery-date"> <span class="h6">Inclusive of all taxes</span> </p>
                  </div>
                  
                </div>
                <div class="d-flex mt-3">

                  @if($size_variants->count() > 0)
                      <div class="col-lg-4 product-quantity">
                      <p class="fw-bold">Size </p>
                      <select class="selectpicker form-control1" id="product_size" name="product_size" onchange="change_size(this,{{ $item->price }})">
                                      <option value="">Select</option>
                                            @foreach($size_variants as $size)
                                                   
                                              {{-- <span class="size-button" id="variant_size">{{ $size->type }}</span> --}}
                                                        <option value="{{ $size->type }}" @if(!empty($size_variants[0]->type)) @if($size_variants[0]->type == $size->type) selected @endif  @endif>{{ $size->type }}</option>
                                            @endforeach
                          </select>

                      </div>
                 @endif

                  <div class="col-lg-4 product-quantity">
                  <p class="fw-bold">Quantity </p>
                    <div class="quantity quantity-2 YK-quantity">                   
                        <span class="decrease" onclick="decreaseQty(this, '75|3|83|')">
                        <i class="fas fasu fa-minus"></i></span>
                        <input class="qty-input no-focus YK-qty" data-page="product-view" title="Available Quantity" type="text" id="quantity" value="1" readonly="">
                        <span class="increase" onclick="increaseQty(this, '75|3|83|')"> <i class="fas fasu fa-plus"></i></span>
                    </div>
                  </div>

                  @if($color_variants->count() > 0)
                <input type="hidden" id="variant_id" value="{{ $color_variants[0]->id }}"/>
                
                              {{-- <div class="col-4 text-left">
                              <p class="fw-bold">Variant</p>
                            
                              <div class=" " id="color_div">
                                    @foreach($color_variants as $color)
                                       <span class="color-box" id="color_span{{ $color->id }}" style="background: {{ $color->variant_name }}" onclick="color_save({{ $color->id }},this)"></span>
                                     @endforeach
                            </div></div> --}}
                
          @endif



                </div>
          


                
	<!-- <div class="mt-3">
  <a class="product-share fassas" href="">
			<span class="product-share__icon">
      <i class="fas fa-share-alt"></i>
			</span>
			<span class="product-share__lbl">Share</span>
		</a>
	</div> -->


                



                
                <div class="cart mt-4 align-items-center">
                  @if(auth()->check())
                    @if(!\Cart::session(auth()->user()->id)->get($item->id))
                    
                      <button id="add" class="shop-button text-uppercase mr-2 px-4" onclick="add_cart({{ $item->id }},1)">Add to Cart</button>

                      <button id="added" type="button" disabled class="shop-button text-uppercase mr-2 px-4 d-none" disabled>Added to Cart</button>

                    @else
                      <button type="button" disabled class="shop-button text-uppercase mr-2 px-4" disabled>Added to Cart</button>
                    @endif
                  @else
                    <a href="{{ route('login') }}" class="shop-button text-uppercase mr-2 px-4">Login to add</a>
                  @endif
                  
                  
                </div>
                <p class="about mt-3">{{ $item->description }}</p> 

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!-- <section class="bg-light p-3 mb-3">
    <div class="container  text-justify mt-3">
      <p class="h5 titllee text-center fw-bold ">PRODUCTS Description</p>                 
      <p class="about">{{ $item->description }}</p>
    </div>
</section> -->ss

    <div class="row mb-5">
    <div class="section-header mt-5 ">
            <h3>Best Seller</h3>
            <h1>SIMILAR PRODUCTS</h1>
          </div>
      
              @foreach($similar_items as $s)
              <div class="col-lg-3 col-md-6">
                  <figure class="card card-product-grid shadow">
                    <a href="{{ route('item.show', $s) }}" class="img-wrap"> 
                      <span class="topbar"> <b class="badge"> 35% OFF </b> </span>
                      <img src="{{ asset('storage/'.$s->image) }}" style="width: 100%;"> 
                    </a>
                    <figcaption class="info-wrap border-top">
                      <span  class="float-end icon-product-div">
                {{-- <a href="{{ route('item.show', $item['items']) }}" class="mb-1 d-block icon-product">
                <i class="fa fa-cart-arrow-down" aria-hidden="true"></i> 
                </a> --}}

                @if(auth()->check())
                                  <span class="mb-1 d-block product-like-div" id="favorite_icon-{{ $s->id }}" onclick="add_favorite({{ $s->id }})"><i class="fa fa-heart"></i></span>
                                 <span class="mb-1 d-block product-like-div favorite-active d-none product-like-div" id="favorite_icon1-{{ $s->id }}"><i class="fa fa-heart"></i></span>
               @else
                                  <span class="mb-1 d-block product-like-div" id="favorite_icon-{{ $s->id }}" onclick="add_favorite({{ $s->id }})"><a href="{{ route('login') }}"><i class="fa fa-heart"></i></a></span>

                @endif
                

                <a href="{{ route('item.show', $s) }}" class="mb-1 d-block product-rating-div">
                <i class="fa fa-star" aria-hidden="true"></i>
                <p class="mb-0">5.0</p>
                </a>
                </span>
                      <small class="text-muted ">Himalaya</small>
                      <p class="text-desk mb-1">
                <a href="{{ route('item.show', $s) }}">{{ $s->name }}</a>
                </p>

                      <div class="price-wrap">
                        <span class="price">Rs {{ $s->sale_price }}</span> <del class="price-old"> RS{{ $s->price }}</del> <span class="discount-percentage">(32% off)</span>
                
                        <p class="mb-0 delivery-date">FREE delivery by <b>Sat, 16 Apr</b></p>
                      </div> <!-- price-wrap.// -->
                    </figcaption>
                  </figure>
                </div>
              @endforeach
           



    </div>
  </div>
</section>
<!-- ----------------------------------------------------------------- -->



<section class=" p-4 bg-light ">
  

<div class="d-lg-flex justify-content-center">
    <div class="col-lg-4 col-md-4 col-sm-12 text-center p-2 m-2 ">
    <div class="">
        <div class="h3 titllee text-center fw-bold">Customer Reviews</div>
</div>
        <div class="ratings"> <span class="product-rating" style="font-size: 33px;">4.6</span><span style="font-size: 25px;">/5</span>
            <div class="align-items-center product"> <span class="fas fassas-yellow fa-star"></span> <span class="fas fassas-yellow fa-star"></span> <span class="fas fassas-yellow fa-star"></span> <span class="fas fassas-yellow fa-star"></span> <span class="far fa-star"></span> </div>                       
            <div class="rating-text"> <span>0 ratings & {{ $reviews->count() }} reviews</span> </div>
        </div>

        <div class="text-center mt-3">
                 @if(auth()->check())
                   <button class="btn-pink" onclick="review_click()"> Write A Review</button>  
                  @else
                  <a href="{{ route('login') }}" class="btn-pink"> Write A Review</a>
                @endif            
        </div>


    </div>



    <div class="col-lg-8 col-md-8 col-sm-12 bg-white p-2 m-2" id="review_view">
        
              @if($reviews->count() > 0)
                 @foreach($reviews as $review)
                    <div>
                        <div class="review">
                            <div class="row ">
                                
                                    <h5 class="">{{ $review->user->name }}<span onclick="edit_review({{ $review->id }})"><i class="fas fasu fa-pen p-1"></i></span></h5>
                                    <p class="grey-text">1 min ago</p>
                                </div>
                            </div>
                            <div class="row pb-3">  
                            <div class="d-flex align-items-center product"> <span class="fas fassas-yellow fa-star"></span> <span class="fas fassas-yellow fa-star"></span> <span class="fas fassas-yellow fa-star"></span> <span class="fas fassas-yellow fa-star"></span> <span class="far fa-star"></span> </div>                       
                                    {{-- <p class="mb-0 pl-3" style=" color: #b00755 ">Excellent</p>                         --}}
                            </div>
                            <div class="row pb-3">
                                <p>{{ $review->description }}.</p>
                            </div>   
                             <div class="row mt-2">
                                     <div class="col-md-12 col-lg-12 form-outline mb-2">
                                        @if(!empty($review->image))
                                          <div class="position-relative d-inline p-1">
                                              <img src="{{ !empty($review->image) ? asset('storage/'.$review->image) : '#' }}" alt="your image" width="80" height="80"/>
                                          </div>
                                        @endif
                                        @if(!empty($review->image1))
                                          <div class="position-relative d-inline p-1">
                                              <img src="{{ !empty($review->image1) ? asset('storage/'.$review->image1) : '#' }}" alt="your image" width="80" height="80"/>
                                          </div>
                                        @endif
                                        @if(!empty($review->image2))
                                          <div class="position-relative d-inline p-1">
                                              <img src="{{ !empty($review->image2) ? asset('storage/'.$review->image2) : '#' }}" alt="your image" width="80" height="80"/>
                                          </div>
                                        @endif
                                        @if(!empty($review->image3))
                                          <div class="position-relative d-inline p-1">
                                              <img src="{{ !empty($review->image3) ? asset('storage/'.$review->image3) : '#' }}" alt="your image" width="80" height="80"/>
                                          </div>
                                        @endif
                                          
                                    </div>
                             </div>

                      </div>
                      <hr/>
                  @endforeach
              @else

                        <div class="text-center mt-5">
                            <h3>No Reviews Found</h3>
                        </div>

              @endif

     </div>                   
     <div class="col-lg-8 col-md-8 col-sm-12 bg-white p-2 m-2 d-none" id="review_form">
        
      <form method="POST" action="{{ route('save_review') }}" enctype="multipart/form-data">
        @csrf
           <div class="text-center mb-5">
               <h3>Write a Review</h3>
           </div>
           <input type="hidden" name="item_id" value="{{ $item->id }}"/>
           <input type="hidden" name="review_id" id="review_id" value=""/>

                <div class="ssw-stars ssw-stars-large brand">  
                    <i class="fas fa-star fassas-yellow"></i><i class="fas fa-star fassas-yellow"></i><i class="fas fa-star fassas-yellow"></i><i class="fas fa-star fassas-yellow"></i><i class="fas fa-star fassas-yellow"></i>
                    <!-- <span class="ssw-review-counts" >5 Star </span> -->
                  </div>

                <div class="row mt-5">
                     <textarea id="description" name="review" class="form-control2" placeholder="Share details of your own experience at this place" spellcheck="false"></textarea>
                </div>
                <div class="row mt-3">
                     <div class="col-lg-4">
                        <input type="file" name="review_image[]" id="imgInp" accept="image/*" class="file-box" onchange="image_upload()" multiple/>
                      </div>
                </div>

                <div class="row mt-3">
                 <div class="col-md-12 col-lg-12 form-outline mb-2">
                     <div class="position-relative d-inline p-1">
                      <img class="d-none" id="blah0" src="#" alt="your image" width="20%" height="100%"/><i id="icon0" class="far fa-times-circle cross-icon d-none"></i>
                    </div>
                     <div class="position-relative d-inline p-1">
                       <img class="d-none" id="blah1" src="#" alt="your image" width="20%" height="100%"/><i id="icon1" class="far fa-times-circle cross-icon d-none"></i>
                     </div>
                     <div class="position-relative d-inline p-1">
                       <img class="d-none" id="blah2" src="#" alt="your image" width="20%" height="100%"/><i id="icon2" class="far fa-times-circle cross-icon d-none"></i>
                      </div>
                      <div class="position-relative d-inline p-1">
                       <img class="d-none" id="blah3" src="#" alt="your image" width="20%" height="100%"/><i id="icon3" class="far fa-times-circle cross-icon d-none"></i>
                      </div>
                  </div>
            </div>

                <div class="row mt-5">
                  <div class="col-4">
                  </div>
                  <div class="col-8">
                    <button class="btn-pink text-end" onclick="review_cancel()" style="background: #a9788e;">Cancel</button>
                       <button class="btn-pink">Submit</button>
                  </div>
                </div>
       </form>

     </div>

                



    </div>

    <!-- ----------------------------------------------------- -->
</div>

</section> 



<!-- ------------------------------------------------------ -->
                
@endsection
<script src="https://rawgit.com/imgix/drift/master/dist/Drift.min.js"></script>

<script src="https://rawgit.com/imgix/drift/master/dist/Drift.min.js"></script>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

@section('extras')
<script>
var demoTrigger = document.querySelector('.demo-trigger');
var paneContainer = document.querySelector('.detail');

new Drift(demoTrigger, {
  paneContainer: paneContainer,
  inlinePane: false,
  hoverBoundingBox: true
});
  </script>
<script>
/* Initiate Magnify Function
with the id of the image, and the strength of the magnifier glass:
magnify("main-image", 3);*/
</script>

  <script>

    function color_save(id,element){
      
        document.getElementById('variant_id').value = id;
        $(".color-box").not($(this)).removeClass("color-box-active");
        element.classList.add('color-box-active');

           $.ajax({
                    type: "Get",
                    url: '{{route('get_variant')}}',
                    datatype: 'json',
                    data: {
                      "_token": "{{ csrf_token() }}",
                        'id' : id,
                    },
                    success: function (data) {
                        const obj = JSON.parse(data);
                           console.log(obj);
                             document.getElementById('sku').textContent = 'SKU: ' + obj.new.variant.sku;
                            //  document.getElementById('price').textContent = 'INR ' + obj.new.variant.price;
                         
                      },
                    complete: function () {
                    },
                    error: function () {
                    }
                });

    }

    function add_favorite(id){
       
            $.ajax({
                    type: "Get",
                    url: '{{route('add_favorite')}}',
                    datatype: 'json',
                    data: {
                        'item_id' : id,
                    },
                    success: function (data) {
                        const obj = JSON.parse(data);
                         
                           document.getElementById('favorite_icon-'+id).classList.add('d-none');
                           document.getElementById('favorite_icon1-'+id).classList.remove('d-none');

                      },
                    complete: function () {
                    },
                    error: function () {
                    }
                });

    }

    function change_size(element,price){
         var variant_id = element.value;

           $.ajax({
                    type: "Get",
                    url: '{{route('get_variant')}}',
                    datatype: 'json',
                    data: {
                      "_token": "{{ csrf_token() }}",
                        'variant_id' : variant_id,
                    },
                    success: function (data) {
                        const obj = JSON.parse(data);
                           console.log(obj);
                             document.getElementById('sku').textContent = 'SKU: ' + obj.new.variant.sku;
                             document.getElementById('price').textContent = obj.new.variant.price;
                             document.getElementById('save_price').textContent = price - obj.new.variant.price;
                            //  $('#color_div').append('<i class="fas fa-rupee-sign">' + obj.new.variant.price);
                         
                              //   var item = $('#color_div');
                              //   item.empty();
                              // if(obj.new.colorvariant.length == 0){
                              //         item.empty();
                              // }
                              // else{
                              //     $.each(obj.new.colorvariant, function(key,value) {
                              //         item.append('<span class="color-box" id="color_span" style="background: ' + value.variant_name + '" onclick="color_save(' + value.id + ',this)"></span>');
                              //     });
                              // }

                      },
                    complete: function () {
                    },
                    error: function () {
                    }
                });
         
    }

    function edit_review(id){
        
             $.ajax({
                    type: "Post",
                    url: '{{route('edit_review')}}',
                    datatype: 'json',
                    data: {
                      "_token": "{{ csrf_token() }}",
                        'id' : id,
                    },
                    success: function (data) {
                        const obj = JSON.parse(data);

                             document.getElementById('description').value = obj.new.description;
                             document.getElementById('review_id').value = id;
                         
                             document.getElementById('review_view').classList.add('d-none');
                             document.getElementById('review_form').classList.remove('d-none');

                      },
                    complete: function () {
                    },
                    error: function () {
                    }
                });

    }

    function add_favorite(id){
       
            $.ajax({
                    type: "Get",
                    url: '{{route('add_favorite')}}',
                    datatype: 'json',
                    data: {
                        'item_id' : id,
                    },
                    success: function (data) {
                        const obj = JSON.parse(data);
                         
                           document.getElementById('favorite_icon-'+id).classList.add('d-none');
                           document.getElementById('favorite_icon1-'+id).classList.remove('d-none');

                      },
                    complete: function () {
                    },
                    error: function () {
                    }
                });

    }

    function image_upload(){
      const fileInput = document.getElementById('imgInp');
      var files = [...fileInput.files];
      var i = 0;
      for (const f of files) { 
        document.getElementById('blah'+i).classList.remove('d-none');
        document.getElementById('icon'+i).classList.remove('d-none');
         document.getElementById('blah'+i).src = URL.createObjectURL(f);

         i++;
      }
      
}

    function review_click(){
        document.getElementById('review_view').classList.add('d-none');
        document.getElementById('review_form').classList.remove('d-none');
    }

    function review_cancel(){
        document.getElementById('review_view').classList.remove('d-none');
        document.getElementById('review_form').classList.add('d-none');
    }

    function change_image(image){
      var container = document.getElementById("main-image");
      container.src = image.src;
      $("#main-image").attr('data-zoom', image.src);

    }
    document.addEventListener("DOMContentLoaded", function(event) {
    });

    function increaseQty(){
       var quantity = document.getElementById('quantity').value;
       
       document.getElementById('quantity').value = parseInt(quantity) + 1;

    }

    function decreaseQty(){
       var quantity = document.getElementById('quantity').value;

       if(quantity > 1){
          document.getElementById('quantity').value = parseInt(quantity) - 1;
       }
    }

    function add_cart(id,$type){

     var cart_no = document.getElementById('cart_no').textContent;
     if($('#variant_id').length){
       var variant_id = document.getElementById('variant_id').value;
     }
    //  var colorvariant_id = document.getElementById('variant_id').value;


     if($type == 1){
         var quantity = document.getElementById('quantity').value;
     }
     else{
        var quantity = 1;
     }
            $.ajax({
                    type: "Post",
                    url: '{{route('add.to.cart')}}',
                    datatype: 'json',
                    data: {
                      "_token": "{{ csrf_token() }}",
                        'item_id' : id,
                        'quantity' : quantity,
                        'variant_id' : variant_id,
                    },
                    success: function (data) {
                        const obj = JSON.parse(data);
                         
                        if($type == 1){
                             document.getElementById('add').classList.add('d-none');
                           document.getElementById('added').classList.remove('d-none');
                           document.getElementById('cart_no').textContent = parseInt(cart_no) + 1;
                        }
                        else{
                            document.getElementById('add-'+id).classList.add('d-none');
                           document.getElementById('added-'+id).classList.remove('d-none');
                           document.getElementById('cart_no').textContent = parseInt(cart_no) + 1;
                        }
                           

                      },
                    complete: function () {
                    },
                    error: function () {
                    }
                });
    }

  $( document ).ready(function() {
   
    $("#icon0").click(function(){
  const fileInput = document.getElementById('imgInp');
  console.log(fileInput)
      var files = [...fileInput.files];
      console.log(files);
            files.splice(0, 1);
        document.getElementById('blah0').classList.add('d-none');
        document.getElementById('icon0').classList.add('d-none');
});

$("#icon1").click(function(){
  const fileInput = document.getElementById('imgInp');
  console.log(fileInput)
      var files = [...fileInput.files];
      console.log(files);
            files.splice(1, 1);
        document.getElementById('blah1').classList.add('d-none');
        document.getElementById('icon1').classList.add('d-none');
});

$("#icon2").click(function(){
  const fileInput = document.getElementById('imgInp');
  console.log(fileInput)
      var files = [...fileInput.files];
      console.log(files);
            files.splice(2, 1);
        document.getElementById('blah2').classList.add('d-none');
        document.getElementById('icon2').classList.add('d-none');

});

$("#icon3").click(function(){
  const fileInput = document.getElementById('imgInp');
  console.log(fileInput)
      var files = [...fileInput.files];
      console.log(files);
            files.splice(2, 1);
        document.getElementById('blah3').classList.add('d-none');
        document.getElementById('icon3').classList.add('d-none');

});
});


  </script>

<<<<<<< HEAD

=======
>>>>>>> 0122ad40bd2fbfe03f367e2f44b92ac098966a0d
@endsection