@extends('layouts.app')

@section('title', 'Search')

@section('content')
  <section class="mb-0 pt-3">
    <div class="container">
      <div class="row ">

     

      <div class="col-md-3 bg-grey">
      <div class="col-md-12 bg-light  mb-3 " data-aos="fade-up">
               <div class="m-2"><a href="/" title="Home" class="home-bc">Home</a> <span aria-hidden="true">›</span><span style="text-transform: uppercase;color: #454545;font-weight: 300;margin-left: 9px;">
               @if(!empty(request()->name)) 
               {{ request()->name }}
            @elseif($category_name != "")
               {{ $category_name }}
            @elseif($brand_name != "") 
               {{ $brand_name }}
            @elseif(!empty(request()->type)) 
               {{ request()->type }}
            @elseif(!empty(request()->condition)) 
               {{ request()->condition }}
            @else
               All Products
            @endif
        </span> </div>
        </div>
            <div class="t-products brand p-2 mb-2">
                <h4 class="text-uppercase">Category</h4>
                <div class="p-lists">
                   @foreach($categories as $category)
                    <div class="d-flex justify-content-between mt-2 text-uppercase" style=" border-bottom: 1px dashed #ccc;">
                      @if($category_name == $category->name)
                        <a href="/search/?category={{ $category->name }}"><span style="color:#ae0151;">{{ $category->name }}</span></a>
                      @else
                        <a href="/search/?category={{ $category->name }}"><span>{{ $category->name }}</span></a>
                      @endif
                    </div>
                  @endforeach
                </div>
            </div>

          
            <div class="brand p-2 mb-2">
                <div class="heading d-flex justify-content-between align-items-center">
                    <h6 class="text-uppercase">Brand</h6> <span>--</span>
                </div>
            @foreach($brands as $brand)
                <div class="d-flex justify-content-between mt-2">
                     
                      @if($brand_name == $brand->name)
                      <div class="form-check">
                          <input class="form-check-input" type="radio" name="brand" value="{{ $brand->id }}" id="flexCheckDefault" checked onclick="brand_click(this)"> <label class="form-check-label" for="flexCheckDefault"> {{ $brand->name }} </label>
                        </div>
                      @else
                          <div class="form-check">
                          <input class="form-check-input" type="radio" name="brand" value="{{ $brand->id }}" id="flexCheckDefault" onclick="brand_click(this)"> <label class="form-check-label" for="flexCheckDefault"> {{ $brand->name }} </label>
                        </div>
                      @endif
                    
                </div>
            @endforeach
            </div>
            <div class="type p-2 mb-2">
                <div class="heading d-flex justify-content-between align-items-center">
                    <h6 class="text-uppercase">Type</h6> <span>--</span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <div class="form-check"> <input class="form-check-input" type="radio" name="type" value="digital" id="flexCheckDefault" onclick="type_click(this)"  @if(!empty(request()->type)) @if(request()->type == 'digital') checked @endif @endif> <label class="form-check-label" for="flexCheckDefault"> Digital </label> </div> <span></span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <div class="form-check"> <input class="form-check-input" type="radio" name="type" value="physical" id="flexCheckChecked" onclick="type_click(this)"  @if(!empty(request()->type)) @if(request()->type == 'physical') checked @endif @endif> <label class="form-check-label" for="flexCheckChecked"> Physical </label> </div> <span></span>
                </div>
                
            </div>



            <div class="type p-2 mb-2">
                <div class="heading d-flex justify-content-between align-items-center">
                    <h6 class="text-uppercase">Product Condition</h6> <span>--</span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <div class="form-check"> <input class="form-check-input" type="radio" name="condition" value="new" id="flexCheckDefault" onclick="condition_click(this)"  @if(!empty(request()->condition)) @if(request()->condition == 'new') checked @endif @endif> <label class="form-check-label" for="flexCheckDefault"> New </label> </div> <span></span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <div class="form-check"> <input class="form-check-input" type="radio" name="condition" value="old" id="flexCheckChecked" onclick="condition_click(this)"  @if(!empty(request()->condition)) @if(request()->condition == 'old') checked @endif @endif> <label class="form-check-label" for="flexCheckChecked"> Old </label> </div> <span></span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <div class="form-check"> <input class="form-check-input" type="radio" name="condition" value="refurbished" id="flexCheckChecked" onclick="condition_click(this)"  @if(!empty(request()->condition)) @if(request()->condition == 'refurbished') checked @endif @endif> <label class="form-check-label" for="flexCheckChecked"> Refurbished </label> </div> <span></span>
                </div>
            </div>



            <div class="type p-2 mb-2">
                <div class="heading d-flex justify-content-between align-items-center">
                    <h6 class="text-uppercase">Price Range</h6> <span>--</span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label" for="flexCheckDefault">₹ 400 -  600 </label> </div>
                </div>
                <div class="d-flex justify-content-between mt-2">
                    <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked"> <label class="form-check-label" for="flexCheckChecked">₹ 600 -  1000</label> </div>
                </div>

                <div class="d-flex justify-content-between mt-2">
                    <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" > <label class="form-check-label" for="flexCheckChecked">₹ 1000 -  1500</label> </div>
                </div>

                <div class="d-flex justify-content-between mt-2">
                    <div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" > <label class="form-check-label" for="flexCheckChecked">₹ 1500 -  3000</label> </div>
                </div>
                

            </div>





        </div>
       
        <div class="col-lg-9 col-md-9 col-sm-12">
          <div class="row align-items-center g-2">
            @if($items->count() > 0)
              @foreach($items as $item)
                 <?php
                    $save = 100 - ($item->sale_price/$item->price) * 100;
                    $save = (int)$save;
                 ?>
                        <div class="col-md-4">
                              <div class="product"> 
                    <figure class="card card-product-grid shadow">
                    <a href="{{ route('item.show', $item) }}" class="img-wrap"> 
                      <span class="topbar"> <b class="badge"> {{ $save }}% OFF </b> </span>
                      <img src="{{ asset('storage/'.$item->image) }}" class="img-fluid w-100 " style="height: 250px;"> 
                    </a>
                    <figcaption class="info-wrap border-top">
                      <span class="float-end icon-product-div">
                <div class="mb-2 d-block icon-product">
                @if(auth()->check())
                            @if(!\Cart::session(auth()->user()->id)->get($item->id))
                            
                              <button id="add-{{ $item->id }}" class="bttn" type="button" style=" border: 0; background: transparent;" onclick="add_cart({{ $item->id }})"><i class="fas fa-cart-arrow-down" style=" color: #fff; font-size: 14px; "></i></button>
                              
                              <button id="added-{{ $item->id }}" type="button" disabled class="bttn d-none" style=" border: 0; background: transparent;" ><i class="fas fa-cart-arrow-down" style=" color: #fff; font-size: 14px; "></i></button>
                              
                          @else
                              <button type="button" disabled class="bttn" style=" border: 0; background: transparent;" ><i class="fas fa-cart-arrow-down" style=" color: #fff; font-size: 14px; "></i></button>
                            @endif
                          @else
                            <a href="{{ route('login') }}" class="bttn"><i class="fas fa-cart-arrow-down" style=" color: #fff; font-size: 14px; "></i></a>
                          @endif
                            </div>
                <div class="fw-bold favorite-icon- mb-2 mt-2">
                                @if(auth()->check())
                                            <span class="product-like-divs" id="favorite_icon-{{ $item->id }}" onclick="add_favorite({{ $item->id }})"><i class="fa fa-heart" style=" color: #fff; font-size: 14px; "></i></span>
                                          <span class="favorite-active d-none" id="favorite_icon1-{{ $item->id }}"><i class="fa fa-heart" style=" color: #fff; font-size: 14px; "></i></span>
                                  @else
                                            <span class="product-like-divs" id="favorite_icon-{{ $item->id }}" onclick="add_favorite({{ $item->id }})"><a href="{{ route('login') }}"><i class="fa fa-heart" style=" color: #fff; font-size: 14px; "></i></a></span>

                                  @endif
                              </div>
                <div class="mb-1 d-block product-rating-div">
                <i class="fa fa-star" style=" color: #fff; font-size: 14px; " aria-hidden="true"></i>
                <p class="mb-0">5.0</p>
                            </div>
                </span>
                      <small class="text-muted ">Himalaya</small>
                      <p class="text-desk mb-1">
                <a href="{{ route('item.show', $item) }}">{{ $item->name }}</a>
                </p>

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

              @endforeach
            @else
                   <div class="text-center" style="margin-top: 20%;">
                       <h3>No Product Found</h3>
                   </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </section>
<!-- ------------------------------------2nd--------------------------- -->



@endsection

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






<script>

  function brand_click(element){
      window.location.replace(window.location.origin + '/search/?brand='+element.value);
  }

  function type_click(element){
      window.location.replace(window.location.origin + '/search/?type='+element.value);
  }

  function condition_click(element){
      window.location.replace(window.location.origin + '/search/?condition='+element.value);
  }

   function add_cart(id){

     var cart_no = document.getElementById('cart_no').textContent;

            $.ajax({
                    type: "Post",
                    url: '{{route('add.to.cart')}}',
                    datatype: 'json',
                    data: {
                      "_token": "{{ csrf_token() }}",
                        'item_id' : id,
                    },
                    success: function (data) {
                        const obj = JSON.parse(data);
                         
                           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 () {
                    }
                });

    }

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 add_cart_recent(id){

     var cart_no = document.getElementById('cart_no').textContent;

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

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

    }

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

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

    }

</script>