@extends('layouts.front')
@section('content')
<!-- Breadcrumb Area Start -->
<div class="breadcrumb-area">
   <div class="container">
      <div class="row">
         <div class="col-lg-12">
            <ul class="pages">
               <li>
                  <a href="{{route('front.index')}}">{{ $langg->lang17 }}</a>
               </li>
               @if (!empty($cat))
               <li>
                  <a href="{{route('front.category', $cat->slug)}}">{{ $cat->name }}</a>
               </li>
               @endif
               @if (!empty($subcat))
               <li>
                  <a href="{{route('front.category', [$cat->slug, $subcat->slug])}}">{{ $subcat->name }}</a>
               </li>
               @endif
               @if (!empty($childcat))
               <li>
                  <a href="{{route('front.category', [$cat->slug, $subcat->slug, $childcat->slug])}}">{{ $childcat->name }}</a>
               </li>
               @endif
               @if (empty($childcat) && empty($subcat) && empty($cat))
               <li>
                  <a href="{{route('front.category')}}">{{ $langg->lang36 }}</a>
               </li>
               @endif

            </ul>
         </div>
      </div>
   </div>
</div>
<!-- Breadcrumb Area End -->
<!-- SubCategori Area Start -->
<section class="sub-categori">
   <div class="container">
      <div class="row">
         @include('includes.catalog')
         <div class="col-lg-9 order-first order-lg-last ajax-loader-parent">
            <div class="right-area" id="app">
             
              {{-- @if(request()->input('search') != null) --}} {{-- Entramos a esta seccion solo cuando existe la variable de busqueda  --}}
              <div class="container">
                  <ul class="nav nav-pills nav-border-anim nav-big justify-content-center mb-3" role="tablist">
                    <li class="nav-item">
                      <div class="results-details">
                            @if(request()->input('search') != '')
                              @php
                                $posts = DB::table('blogs')->where('title', 'LIKE', '%' . request()->input('search') . '%')->get();
                              @endphp
                              {{ count($prods) + count($tiends)  + count($posts) }}
                              &nbsp; resultados para <span class="pink" style="color:orange">{{ request()->input('search') }}</span>
                            @endif  
                      </div>
                    </li>
                  </ul>
                  <ul class="nav nav-pills nav-border-anim nav-big justify-content-center mb-3" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link" id="store" data-toggle="tab" href="{{ url('#store1') }}" role="tab" aria-controls="products-featured-tab" aria-selected="true">Tiendas <span>@if(request()->input('search') != '') {{ count(DB::table('users')->where('shop_name', 'LIKE', '%' . request()->input('search') . '%')->get()) }} @endif</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" id="products" data-toggle="tab" href="{{ url('#products1') }}" role="tab" aria-controls="products-sale-tab" aria-selected="false">Productos <span>@if(request()->input('search') != '') {{ (count($prods)) }} @endif</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link products" id="posts" data-toggle="tab" href="{{ url('#posts1') }}" role="tab" aria-controls="products-top-tab" aria-selected="false">Posts <span>@if(request()->input('search') != '') {{ count(DB::table('blogs')->where('title', 'LIKE', '%' . request()->input('search') . '%')->get()) }} @endif</span></a>
                    </li>
                  </ul>
              </div><!-- End .container -->
              
              <div class="container-fluid">
                <div class="tab-content tab-content-carousel">
                    <div class="tab-pane p-0 fade show active" id="store1" aria-labelledby="store" role="tabpanel" style="display: none;">
                        <div class="owl-carousel owl-simple carousel-equal-height carousel-with-shadow" data-toggle="owl"
                            data-owl-options='{
                                "nav": false,
                                "dots": true,
                                "margin": 20,
                                "loop": false,
                                "responsive": {
                                    "0": {
                                        "items":2
                                    },
                                    "480": {
                                        "items":2
                                    },
                                    "768": {
                                        "items":3
                                    },
                                    "992": {
                                        "items":4
                                    },
                                    "1200": {
                                        "items":5
                                    },
                                    "1600": {
                                        "items":6,
                                        "nav": true
                                    }
                                }
                            }'>
                        </div><!-- End .owl-carousel -->
                        
                        <div class="categori-item-area">
                          <div class="row" id="ajaxContent">
                            @if(request()->input('search') != '') 
                              @if(count($tiends) == 0)
                                <div class="col-lg-12">
    					                    <div class="page-center">
    						                    <h4 class="text-center">No se encontraron Tiendas.</h4>
    					                    </div>
    				                    </div>
  					                  @else
  				                      @foreach($tiends as $tienda)
  							                  <div class="col-lg-4 col-md-4 col-6 remove-padding">
    						                    <a href="{{ route('front.vendor', $tienda->shop_name) }}" class="item">
      							                  <div class="card" style="width: 18rem;">
        						                    <div class="card-body" >
              					                  <h5 class="card-title">Tienda:{{$tienda->shop_name}}</h5><br>
              					                  <p class="card-text">Numero: {{$tienda->shop_number}}</p><br>
              					                  <p class="card-text">Direccion {{$tienda->shop_address}}</p><br>
              					                  <p class="card-text text-center">{{$tienda->shop_message}}</p><br>
      						                      </div>
    						                      </div>
  						                      </a>
  						                    </div>
  						                  @endforeach
  						                @endif
					                  @endif
                          </div>
                          <div id="ajaxLoader" class="ajax-loader" style="background: url({{asset('assets/images/'.$gs->loader)}}) no-repeat scroll center center rgba(0,0,0,.6);"></div>
                        </div>
                    </div><!-- .End .tab-pane -->
                    
                    <div class="tab-pane p-0 fade show active" id="products1" aria-labelledby="products" role="tabpanel" style="display: none;">
                        <div class="owl-carousel owl-simple carousel-equal-height carousel-with-shadow" data-toggle="owl"
                            data-owl-options='{
                                "nav": false,
                                "dots": true,
                                "margin": 20,
                                "loop": false,
                                "responsive": {
                                    "0": {
                                        "items":2
                                    },
                                    "480": {
                                        "items":2
                                    },
                                    "768": {
                                        "items":3
                                    },
                                    "992": {
                                        "items":4
                                    },
                                    "1200": {
                                        "items":5
                                    },
                                    "1600": {
                                        "items":6,
                                        "nav": true
                                    }
                                }
                            }'>
                        </div>
                        <div class="categori-item-area">
                          <div class="row" id="ajaxContent">
                  			    @if (count(DB::table('products')->where('name', 'LIKE', '%' . request()->input('search') . '%')->get()) == 0 )
				                      <div class="col-lg-12">
					                      <div class="page-center">
						                      <h4 class="text-center">{{ $langg->lang60 }}</h4>
					                      </div>
				                      </div>
					                  @else
					                    @foreach ($prods as $key => $prod)
									              <div class="col-lg-4 col-md-4 col-6 remove-padding">
										              <a href="{{ route('front.product', $prod->slug) }}" class="item">
											              <div class="item-img">
												            @if(!empty($prod->features))
													            <div class="sell-area">
													              @foreach($prod->features as $key => $data1)
														              <span class="sale" style="background-color:{{ $prod->colors[$key] }}">{{ $prod->features[$key] }}</span>
														            @endforeach
													            </div>
												            @endif
  													          <div class="extra-list">
    														        <ul>
      															      <li>
      																      @if(Auth::guard('web')->check())
      																        <span class="add-to-wish" data-href="{{ route('user-wishlist-add',$prod->id) }}" data-toggle="tooltip" data-placement="right" title="{{ $langg->lang54 }}" data-placement="right"><i class="icofont-heart-alt" ></i>
      																        </span>
      																      @else
      																        <span rel-toggle="tooltip" title="{{ $langg->lang54 }}" data-toggle="modal" id="wish-btn" data-target="#comment-log-reg" data-placement="right">
      																	        <i class="icofont-heart-alt"></i>
      																        </span>
      																      @endif
      															      </li>
      															      <li>
      															        <span class="quick-view" rel-toggle="tooltip" title="{{ $langg->lang55 }}" href="javascript:;" data-href="{{ route('product.quick',$prod->id) }}" data-toggle="modal" data-target="#quickview" data-placement="right"> <i class="icofont-eye"></i>
      															        </span>
      															       </li>
      															        <li>
      																        <span class="add-to-compare" data-href="{{ route('product.compare.add',$prod->id) }}"  data-toggle="tooltip" data-placement="right" title="{{ $langg->lang57 }}" data-placement="right">
      																	        <i class="icofont-exchange"></i>
      																        </span>
      															        </li>
    														        </ul>
  													          </div>
  												            <img class="img-fluid" src="{{ $prod->photo ? asset('assets/images/products/'.$prod->photo):asset('assets/images/noimage.png') }}" alt="">
											          </div>
											          <div class="info">
												          <div class="stars">
                                    <div class="ratings">
                                      <div class="empty-stars"></div>
                                      <div class="full-stars" style="width:{{App\Models\Rating::ratings($prod->id)}}%"></div>
                                    </div>
												          </div>
												        <h4 class="price">{{ $prod->setCurrency() }} <del><small>{{ $prod->showPreviousPrice() }}</small></del></h4>
														    <h5 class="name">{{ $prod->showName() }}</h5>
														    <div class="item-cart-area">
															    @if($prod->product_type == "affiliate")
																    <span class="add-to-cart-btn affilate-btn"
																	    data-href="{{ route('affiliate.product', $prod->slug) }}"><i class="icofont-cart"></i>
																	    {{ $langg->lang251 }}
																    </span>
															    @else
																  @if($prod->emptyStock())
																    <span class="add-to-cart-btn cart-out-of-stock">
																	    <i class="icofont-close-circled"></i> {{ $langg->lang78 }}
																    </span>
																  @else
																    <span class="add-to-cart add-to-cart-btn" data-href="{{ route('product.cart.add',$prod->id) }}">
																	    <i class="icofont-cart"></i> {{ $langg->lang56 }}
																    </span>
																    <span class="add-to-cart-quick add-to-cart-btn"
																	    data-href="{{ route('product.cart.quickadd',$prod->id) }}">
																	    <i class="icofont-cart"></i> {{ $langg->lang251 }}
																    </span>
																  @endif
															  @endif
														</div>
											      </div>
										          </a>

									            </div>
				                      @endforeach
				                     
			                  @endif
			               
                      </div>
               </div>
                    <div id="ajaxLoader" class="ajax-loader" style="background: url({{asset('assets/images/'.$gs->loader)}}) no-repeat scroll center center rgba(0,0,0,.6);"></div>
                    </div>
                    </div><!-- .End .tab-pane -->
                    
                    
                    <div class="tab-pane p-0 fade show active" id="posts1" aria-labelledby="posts" role="tabpanel" style="display: none;">
                        <div class="owl-carousel owl-simple carousel-equal-height carousel-with-shadow" data-toggle="owl"
                            data-owl-options='{
                                "nav": false,
                                "dots": true,
                                "margin": 20,
                                "loop": false,
                                "responsive": {
                                    "0": {
                                        "items":2
                                    },
                                    "480": {
                                        "items":2
                                    },
                                    "768": {
                                        "items":3
                                    },
                                    "992": {
                                        "items":4
                                    },
                                    "1200": {
                                        "items":5
                                    },
                                    "1600": {
                                        "items":6,
                                        "nav": true
                                    }
                                }
                            }'>
                        </div>
                        <div class="categori-item-area">
                          <div class="row" id="ajaxContent">
                          @if((count(DB::table('blogs')->where('title', 'LIKE', '%' . request()->input('search') . '%')->get())) == 0)
                            <div class="col-lg-12">
					                    <div class="page-center">
						                    <h4 class="text-center">No se encontraron posts.</h4>
					                   </div>
				                    </div>
                          @else
                            @foreach(DB::table('blogs')->where('title', 'LIKE', '%' . request()->input('search') . '%')->get() as $blogg)
                              <div class="col-md-6 col-lg-4">
                                <div class="blog-box">
                                  <div class="blog-images">
                                    <div class="img">
                                      <img src="{{ $blogg->photo ? asset('assets/images/blogs/'.$blogg->photo):asset('assets/images/noimage.png') }}" class="img-fluid" alt="">
                                      <div class="date d-flex justify-content-center">
                                        <div class="box align-self-center">
                                          <p>{{date('d', strtotime($blogg->created_at))}}</p>
                                          <p>{{date('M', strtotime($blogg->created_at))}}</p>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="details">
                                    <a href='{{route('front.blogshow',$blogg->id)}}'>
                                      <h4 class="blog-title">
                                        {{mb_strlen($blogg->title,'utf-8') > 50 ? mb_substr($blogg->title,0,50,'utf-8')."...":$blogg->title}}
                                      </h4>
                                    </a>
                                    <p class="blog-text">
                                      {{substr(strip_tags($blogg->details),0,120)}}
                                    </p>
                                    <a class="read-more-btn" href="{{route('front.blogshow',$blogg->id)}}">{{ $langg->lang38 }}</a>
                                  </div>
                                </div>
                              </div>
                            @endforeach
					                @endif
					                </div>
                    <div id="ajaxLoader" class="ajax-loader" style="background: url({{asset('assets/images/'.$gs->loader)}}) no-repeat scroll center center rgba(0,0,0,.6);"></div>
                    </div>
                    </div><!-- .End .tab-pane -->
            {{-- @endif --}}
                <div id=paginator>
                   {{$prods->links()}}
                </div>
                   
               <div class="categori-item-area">
                  <div class="row" id="ajaxContent">
                   
                  </div>
                <div id="ajaxLoader" class="ajax-loader" style="background: url({{asset('assets/images/'.$gs->loader)}}) no-repeat scroll center center rgba(0,0,0,.6);"></div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<!-- SubCategori Area End -->
@endsection


@section('scripts')

<script>

  $(document).ready(function() {

    // when dynamic attribute changes
    $(".attribute-input, #sortby").on('change', function() {
      $("#ajaxLoader").show();
      filter();
    });

    // when price changed & clicked in search button
    $(".filter-btn").on('click', function(e) {
      e.preventDefault();
      $("#ajaxLoader").show();
      filter();
    });
  });
  $( document ).ready(function() {
    $("#products1").show();
});
    $("#store").on('click', function() {
      $("#store1").show();
      $("#products1").hide();
      $("#posts1").hide();
      $("#paginator").hide();
    });
    
    $("#products").on('click', function() {
      $("#store1").hide();
      $("#products1").show();
      $("#posts1").hide();
       $("#paginator").show();
    });
    
    $("#posts").on('click', function() {
      $("#store1").hide();
      $("#products1").hide();
      $("#posts1").show();
       $("#paginator").hide();
    });

  function filter() {
    let filterlink = '';

    if ($("#prod_name").val() != '') {
      if (filterlink == '') {
        filterlink += '{{route('front.category', [Request::route('category'), Request::route('subcategory'), Request::route('childcategory')])}}' + '?search='+$("#prod_name").val();
      } else {
        filterlink += '&search='+$("#prod_name").val();
      }
    }

    $(".attribute-input").each(function() {
      if ($(this).is(':checked')) {
        if (filterlink == '') {
          filterlink += '{{route('front.category', [Request::route('category'), Request::route('subcategory'), Request::route('childcategory')])}}' + '?'+$(this).attr('name')+'='+$(this).val();
        } else {
          filterlink += '&'+$(this).attr('name')+'='+$(this).val();
        }
      }
    });

    if ($("#sortby").val() != '') {
      if (filterlink == '') {
        filterlink += '{{route('front.category', [Request::route('category'), Request::route('subcategory'), Request::route('childcategory')])}}' + '?'+$("#sortby").attr('name')+'='+$("#sortby").val();
      } else {
        filterlink += '&'+$("#sortby").attr('name')+'='+$("#sortby").val();
      }
    }

    if ($("#min_price").val() != '') {
      if (filterlink == '') {
        filterlink += '{{route('front.category', [Request::route('category'), Request::route('subcategory'), Request::route('childcategory')])}}' + '?'+$("#min_price").attr('name')+'='+$("#min_price").val();
      } else {
        filterlink += '&'+$("#min_price").attr('name')+'='+$("#min_price").val();
      }
    }

    if ($("#max_price").val() != '') {
      if (filterlink == '') {
        filterlink += '{{route('front.category', [Request::route('category'), Request::route('subcategory'), Request::route('childcategory')])}}' + '?'+$("#max_price").attr('name')+'='+$("#max_price").val();
      } else {
        filterlink += '&'+$("#max_price").attr('name')+'='+$("#max_price").val();
      }
    }

    // console.log(filterlink);
    console.log(encodeURI(filterlink));
    $("#ajaxContent").load(encodeURI(filterlink), function(data) {
      // add query string to pagination
      addToPagination();
      $("#ajaxLoader").fadeOut(1000);
    });
  }

  // append parameters to pagination links
  function addToPagination() {
    // add to attributes in pagination links
    $('ul.pagination li a').each(function() {
      let url = $(this).attr('href');
      let queryString = '?' + url.split('?')[1]; // "?page=1234...."

      let urlParams = new URLSearchParams(queryString);
      let page = urlParams.get('page'); // value of 'page' parameter

      let fullUrl = '{{route('front.category', [Request::route('category'),Request::route('subcategory'),Request::route('childcategory')])}}?page='+page+'&search='+'{{request()->input('search')}}';

      $(".attribute-input").each(function() {
        if ($(this).is(':checked')) {
          fullUrl += '&'+encodeURI($(this).attr('name'))+'='+encodeURI($(this).val());
        }
      });

      if ($("#sortby").val() != '') {
        fullUrl += '&sort='+encodeURI($("#sortby").val());
      }

      if ($("#min_price").val() != '') {
        fullUrl += '&min='+encodeURI($("#min_price").val());
      }

      if ($("#max_price").val() != '') {
        fullUrl += '&max='+encodeURI($("#max_price").val());
      }

      $(this).attr('href', fullUrl);
    });
  }

  $(document).on('click', '.categori-item-area .pagination li a', function (event) {
    event.preventDefault();
    if ($(this).attr('href') != '#' && $(this).attr('href')) {
      $('#preloader').show();
      $('#ajaxContent').load($(this).attr('href'), function (response, status, xhr) {
        if (status == "success") {
          $('#preloader').fadeOut();
          $("html,body").animate({
            scrollTop: 0
          }, 1);

          addToPagination();
        }
      });
    }
  });

</script>

<script type="text/javascript">

  $(function () {

    $("#slider-range").slider({
      range: true,
      orientation: "horizontal",
      min: 0,
      max: 10000000,
      values: [{{ isset($_GET['min']) ? $_GET['min'] : '0' }}, {{ isset($_GET['max']) ? $_GET['max'] : '10000000' }}],
      step: 5,

      slide: function (event, ui) {
        if (ui.values[0] == ui.values[1]) {
          return false;
        }

        $("#min_price").val(ui.values[0]);
        $("#max_price").val(ui.values[1]);
      }
    });

    $("#min_price").val($("#slider-range").slider("values", 0));
    $("#max_price").val($("#slider-range").slider("values", 1));

  });

</script>



@endsection