@extends('plantilla.plantilla')

@section('titulo','Importadora Cork')

@section('estilos')

    <link rel="stylesheet" type="text/css" href="{{ asset('asset/styles/main_styles.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('asset/styles/responsive.css') }}">

    <style>
    </style>
@endsection


@section('contenido')

    @php
        $marca = '';
        $anio = '';
        $modelo = '';
        $version = '';
        $diametro = '';

    @endphp

    @if(isset($_GET["marca"]))
        @php $marca=$_GET["marca"]; @endphp
    @else

    @endif

    @if(isset($_GET["anio"]))
        @php $anio=$_GET["anio"]; @endphp

    @endif

    @if(isset($_GET["modelo"]))
        @php $modelo=$_GET["modelo"]; @endphp

    @endif

    @if(isset($_GET["version"]))
        @php $version=$_GET["version"]; @endphp
    @endif

    @if(isset($_GET["diametro"]))
        @php $diametro=$_GET["diametro"]; @endphp
    @endif

    <style>
        .owl-carousel .owl-theme {
            display: flex;
        }

        .items {
            display: flex;
            flex: 1 0 auto;
            height: 100%;
        }

    </style>
    <input type="hidden" id="categoriaActual" value="{{ $categoria }}">
    <input type="hidden" id="DiametroActual" value="{{ $r->barre }}">
    <input type="hidden" id="BarrenacionaActual" value="{{ $r->diame }}">
    <div class="super_container_inner">
        <div class="super_overlay"></div>
        <div class="bg-blueh h90"></div>
        <div id="amazingslider-wrapper-1"
             style="display:block;position:relative;max-width:100%;margin:0 auto;">
            <div id="amazingslider-2" style="display:block;position:relative;margin:0 auto;">
                <ul class="amazingslider-slides" style="display:none;">
                    @if($categoria == 'Rines')
                        @foreach($banners_rines as $b)
                            <li><img src="{{ asset('imagenes/banners/rines/'.$b->img)}}"/>
                        @endforeach
                    @elseif($categoria == 'Llantas')
                        @foreach($banners_llantas as $b)
                            <li><img src="{{ asset('imagenes/banners/llantas/'.$b->img)}}"/>
                        @endforeach
                    @else
                        @foreach($banners_accesorios as $b)
                            <li><img src="{{ asset('imagenes/banners/accesorios/'.$b->img)}}"/>
                        @endforeach
                    @endif
                </ul>
                <ul class="amazingslider-thumbnails" style="display:none;">
                    @if($categoria == 'Rines')
                        @foreach($banners_rines as $b)
                            <li><img src="{{ asset('imagenes/banners/rines/'.$b->img)}}"/>
                        @endforeach
                    @elseif($categoria == 'Llantas')
                        @foreach($banners_llantas as $b)
                            <li><img src="{{ asset('imagenes/banners/llantas/'.$b->img)}}"/>
                        @endforeach
                    @else
                        @foreach($banners_accesorios as $b)
                            <li><img src="{{ asset('imagenes/banners/accesorios/'.$b->img)}}"/>
                        @endforeach
                    @endif
                </ul>
            </div>
        </div>
        <!-- Home -->

        <div class="clearfix"></div>
    </div>
        <div class="container-fluid pt-lg-5"><br>


        {{--<div class="container"><h2>Example 3 </h2></div>--}}
        <div id="exTab3" class="container-fluid">

            @if(strtolower($categoria) != 'accesorios')
                <ul class="nav nav-pills center-pills ">
                    <li @if(!isset($_GET["busqueda_por"])) {{ "class=active" }} @endif>
                        <a href="#tb_medida" data-toggle="tab">POR MEDIDA</a>
                    </li>
                    <li @if(isset($_GET["busqueda_por"])) {{ "class=active" }} @endif >
                        <a href="#tb_vehiculo" data-toggle="tab">POR VEHÍCULO</a>
                    </li>
                </ul>
            @endif

            <div class="tab-content clearfix">
                <div class="tab-pane @if(!isset($_GET["busqueda_por"])) {{ "active" }} @endif " id="tb_medida">

                    <div class="row justify-content-center">
                        <div class="col-md-12" align="center">
                            <h2 class="text-blue">{{ ucfirst($categoria) }}</h2>
                        </div>
                    </div>
                    {{--Filtros seleccionados--}}
                    <div class="row justify-content-center">
                        <div class="col-md-12 text-center">
                            @if($busqueda!='')
                                @php
                                    $escodeFiltro = 'none';
                                @endphp
                                <h3>Busqueda: <span class="text-blue bg-primary"><u>{{ $busqueda }}</u></span>
                                    <span onclick="cleanBusqueda();" title="Limpiar Busqueda">
										<i class="fa fa-filter" aria-hidden="true"></i>
									</span>
                                </h3>
                            @endif
                            <input type="hidden" id="busqueda" value="{{ $busqueda }}">
                        </div>
                    </div>

                    <div class="row justify-content-center">
                        @php
                            $flag = 0;

                        @endphp

                        @foreach($fil as $key => $fl)
                            @if(!empty($fil[$key]))
                                <div class="col-md-3" id="Div{{ $key }}"
                                     @if ($key > 1) style="display:none;" @endif >
                                    <label>{{ ucfirst($labelsFils[$key]) }}</label>
                                    <select id="selFil{{ $key }}" class="form-control"
                                            @if($key == count($labelsFils) )
                                            onchange="muestraBtn('selFil{{ $key }}');"
                                            @else
                                            onchange="changeFiltro({{ $key }})"
                                            filtro="{{ $labelsFils[$key] }}"
                                            filtrosiguiente="{{ $labelsFils[$key+1] }}"
                                            @endif
                                    >
                                        <option value="0">-Selecciona-</option>
                                        @foreach($fl as $val)
                                            @if ($key > 1)
                                                <option value="{{ $val }}">{{ $val }}</option>
                                            @else
                                                @if( strtolower($categoria) != 'accesorios')
                                                    <option value="{{ $val }}">{{ $val }}"</option>
                                                @else
                                                    <option value="{{ $val }}">{{ $val }}</option>
                                                @endif
                                            @endif
                                        @endforeach

                                    </select>
                                </div>
                            @endif
                        @endforeach


                        <div class="col-md-1" style="display: none;" id="divBtnBuscar">
                            <div style="padding-top: 31%;">
                                <button class="btn btn-primary"
                                        onclick="buscarProds('{{ $categoria }}')">Buscar
                                </button>
                            </div>
                        </div>
                        <div class="row justify-content-center col-md-12 pt-lg-3" id="breadcrumbFiltros"
                             style="display: none;">
                            <div class="col-md-9">
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb" id="listaBreadcrum">


                                    </ol>
                                </nav>
                            </div>
                            <div class="col-md-1">

                            </div>
                        </div>

                        <div class="row">
                            <div class="col-2 bg-gray-light position-absolute" id="sticky-sidebar"
                                 style="display: none;">
                                <div class="nav flex-column flex-nowrap vh-100 overflow-auto text-white p-5">
                                    <h3>Filtros</h3>

                                    @foreach($filtros as $key => $fl)

                                        <label class="title-filter pt-5"><span
                                                    class="color-gray">{{$fl['nombre']}}:</span></label>
                                        <div style="height: 220px; overflow-x: auto">
                                            <ul>
                                                @foreach($fl['valores'] as $key_fl => $v_fl)
                                                    <li>
                                                        <label class="text-muted -b-s b-contain">
                                                            <input name="{{$fl['nombre']}}"
                                                                   class="filter-check {{$fl['nombre']}}"
                                                                   id="{{$fl['nombre']}}-{{$key_fl}}"
                                                                   type="checkbox"
                                                                   value="{{$v_fl}}"
                                                                   id="{{$fl['nombre']}}-{{$key_fl}}"
                                                                   fl_value="{{$v_fl}}"
                                                                   onclick="revisaFiltros();">
                                                            <label for="{{$fl['nombre']}}-{{$key_fl}}"
                                                                   style="font-size:10px;">{{$v_fl}}</label>
                                                            <div class="b-input"></div>
                                                        </label>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endforeach

                                </div>
                            </div>


                        </div>
                    </div>

                </div>

                <div class="tab-pane @if(isset($_GET["busqueda_por"])) {{ "active" }} @endif " id="tb_vehiculo">

                    <div class="row">

                        <div class="col-sm-6">
                            <form id="resource-chain" class="card border-0 bg-transparent">
                                <div class="card-body">
                                    <div class="row justify-content-center">
                                        <div class="col-md-12" align="center">
                                            <h2 class="text-blue">{{ ucfirst($categoria) }}</h2>
                                        </div>
                                    </div>

                                    <h1 class="heading-title blue-color text-center">
                                        Busca tu Vehículo
                                    </h1>
                                    <p class="text-center">
                                        Ingresa los datos de tu vehículo para encontrar
                                        coincidencias
                                    </p>
                                    <div class="p-lg-2"></div>
                                    <div class="row my-20px">
                                        <div class="col-xl-6 mb-3">
                                            <select id="select-makes"
                                                    class="default-select2 form-control form-control-lg "
                                                    name="make" tabindex="-1" aria-hidden="true"
                                                    data-select2-id="select-makes">
                                                <option class="initial" value="" selected disabled>Marca</option>
                                                @if($marcas)
                                                    @foreach( $marcas["data"] as $m):
                                                    <option value="{{$m['slug']}}" @if($m['slug']== $marca) {{'selected'}} @endif>
                                                    <option value="{{$m['slug']}}">
                                                        <i class="d-inline-block icon-make me-2 my-1 icon-l-volvo"></i>
                                                        <span class="icon-inside-text">{{$m['name']}}</span>
                                                    </option>
                                                    @endforeach
                                                @else
                                                    <option value="">Servicio no disponible, intente más tarde</option>
                                                @endif
                                            </select>
                                        </div>
                                        <div class="col-xl-6 mb-3">
                                            <select id="select-years"
                                                    class="default-select2 form-control form-control-lg "
                                                    name="year" disabled="disabled" data-select2-id="select-years"
                                                    tabindex="-1" aria-hidden="true">
                                                <option data-select2-id="4" value="" selected disabled>Año</option>
                                            </select>

                                        </div>
                                        <div class="col-xl-6 mb-3">
                                            <select id="select-models"
                                                    class="default-select2 form-control form-control-lg "
                                                    name="model" disabled="disabled" data-select2-id="select-models"
                                                    tabindex="-1" aria-hidden="true">
                                                <option data-select2-id="6" value="" selected disabled>Modelo
                                                </option>
                                            </select>
                                        </div>

                                        <div class="col-xl-6 mb-3">
                                            <select id="select-modifications"
                                                    class="default-select2 form-control form-control-lg "
                                                    name="modification" disabled="disabled"
                                                    data-select2-id="select-modifications" tabindex="-1"
                                                    aria-hidden="true">
                                                <option data-select2-id="8" value="" selected disabled>Versión
                                                </option>
                                            </select>

                                        </div>
                                        <div class="col-xl-4 mb-3">
                                            <select id="select-diameter"
                                                    class="default-select2 form-control form-control-lg "
                                                    name="diameter" disabled="disabled"
                                                    data-select2-id="select-diameter" tabindex="-1"
                                                    aria-hidden="true">
                                                <option data-select2-id="8" value="" selected disabled>Diametro
                                                </option>
                                            </select>

                                        </div>

                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-sm-6" style="padding: 0 80px">

                            <img @if(isset($_GET["referencia"])) src="{{str_replace('/media','',$_GET["referencia"])}}"
                                 @else src="{{asset('imagenes/coche3d_f.png')}}" @endif id="img-vehiculo"
                                 onerror="this.src='{{ asset( 'imagenes/coche3d_f.png') }}';"
                                 class="img-responsive" style="width: 100%; height: auto;">
                        </div>
                    </div>

                    <textarea class="form-control" rows="6" id="data-vehiculo"></textarea>

                </div>
            </div>

        </div>
    </div>
    {{--Tienda--}}
    <div class="row" id="main">
        <div class="row products_row justify-content-center" style="width: 100%;">
            @include('tienda.data')
        </div>

        <div class="row ajax-load text-center" style="display:none;">
            <div class="col-12" align="center">
                <p class="text-center" align="center">
                    <img src="{{ asset('Loading_2.gif')  }}" alt="" width="5%">
                </p>
            </div>
        </div>
    </div>
    <div class="p-60"></div>

    <div class="modal fade" id="cargandoModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12" align="center">

                            <p class="text-center" align="center"><img src="{{ asset('Loading_2.gif')  }}"
                                                                       alt=""
                                                                       width="40%"></p>

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

            </div>
        </div>
    </div>
@endsection

@section('scrips')
    {{--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>--}}
    {{--<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>--}}

    <script type="application/javascript">
		showDropdown = function (element) {
			var event;
			event = document.createEvent('MouseEvents');
			event.initMouseEvent('mousedown', true, true, window);
			element.dispatchEvent(event);
		};

		$(document).ready(function () {
			$.ajaxSetup({
				headers: {
					'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
				}
			});
			busquedaBredcrums();
			var page = 1;
			$(window).scroll(function (event) {
				// console.log($(window).scrollTop() + $(window).height() + '>=' + $(document).height())
				if ($(window).scrollTop() + $(window).height() >= ($(document).height() - 20)) {
					page++
					//loadMoreData(page)
				}
			});

			$("#select-makes").on("change", function () {
				sendParams('make');
				$("#select-years").focus();
			});
			$("#select-years").on("change", function () {
				sendParams('years');
				$("#select-models").focus();
			});
			$("#select-models").on("change", function () {
				sendParams('models');
				$("#select-modifications").focus();
			});
			$("#select-modifications").on("change", function () {
				sendParams('modifications');
			});
			// $("#select-diameter").on("change", function () {
			// 	sendParams('diameter');
			// });


			setTimeout(alertFuncMarca, 500);

		});

		function alertFuncMarca() {
			var marca = '{{$marca}}';


			if (marca != "") {
				$('html, body').animate({
					scrollTop: $('#exTab3').offset().top
				}, 'slow');
				$("#select-makes").val(marca);
				sendParams('make');
			}

			setTimeout(alertFuncAnio, 500);

		}

		function alertFuncAnio() {

			var anio = '{{$anio}}';

			if (anio != "") {
				$("#select-years").val(anio);
				sendParams('years');
			}

			setTimeout(alertFuncModelo, 500);
		}

		function alertFuncModelo() {

			var modelo = '{{$modelo}}';

			if (modelo != "") {
				$("#select-models").val(modelo);
				sendParams('models');
			}

			setTimeout(alertFuncVersion, 500);
		}

		function alertFuncVersion() {

			var version = '{{$version}}';

			if (version != "") {
				$("#select-modifications").val(version);
				// sendParams('modifications');

			}
			// setTimeout(alertFuncDiametro, 500);
		}

        {{--function alertFuncDiametro() {--}}

        {{--var diametro = '{{$diametro}}';--}}

        {{--if (diametro != "") {--}}
        {{--$("#select-diameter").val(diametro);--}}
        {{--}--}}
        {{--}--}}


		function sendParams(id) {

			if (id == 'make') {
				$("#select-years").prop('disabled', false);

				$("#select-years").empty();
				$('#select-years').append('<option value="">Año</option>');

				$("#select-models").empty();
				$('#select-models').append('<option value="">Modelo</option>');

				$("#select-modifications").empty();
				$('#select-modifications').append('<option value="">Versión</option>');

				// $("#select-diameter").empty();
				// $('#select-diameter').append('<option value="">Diametro</option>');
				//

			}

			if (id == 'years') {
				$("#select-models").prop('disabled', false);
				$("#select-models").val("");
				$("#select-modifications").val("");
				// $("#select-diameter").val("");
			}
			if (id == 'models') {
				$("#select-modifications").prop('disabled', false);
				$("#select-modifications").val("");
				// $("#select-diameter").val("")
			}
			if (id == 'modifications') {
				//envia
				// $("#select-diameter").prop('disabled', false);
				// $("#select-diameter").val("");
				// $("#select-diameter").val("")
			}
			// if (id == 'diameter') {
			//ENVIA
			// }
			var make = $("#select-makes").val();
			var years = $("#select-years").val();
			var models = $("#select-models").val();
			var modifications = $("#select-modifications").val();
			// var diameter = $("#select-diameter").val();

			$.ajax({
				url: "{{url('find-car')}}",
				type: 'post',
				dataType: 'json',
				data: {
					make: make,
					year: years,
					model: models,
					modification: modifications,
					// diameter: diameter,
				},
				beforeSend: function () {
					$('.ajax-load').show()
				}
			})
				.done(function (resp) {
					// console.log(resp.data);

					console.log("success");
					// console.log(id);

					$('.ajax-load').hide();


					data = resp.data;
					var len = data.length;

					if (id == 'make') {
						$("#select-years").empty();
						$('#select-years').append('<option value="">Año</option>');
						for (var i = 0; i < len; i++) {
							$('#select-years').append('<option value="' + data[i].slug + '">' + data[i].name + '</option>');
							// $("#select-years").append("" + name + "");
						}
					} else if (id == 'years') {
						$("#select-models").empty();
						$('#select-models').append('<option value="">Modelo</option>');
						for (var i = 0; i < len; i++) {
							$('#select-models').append('<option value="' + data[i].slug + '">' + data[i].name + '</option>');
							// $("#select-years").append("" + name + "");
						}

					} else if (id == 'models') {
						console.log('==================================');
						console.log(resp.data[0].engine);
						$("#select-modifications").empty();
						$('#select-modifications').append('<option value="">Versión</option>');
						for (var i = 0; i < len; i++) {
							$('#select-modifications').append('<option value="' + data[i].slug + '">' + data[i].name + ' - ' + data[i].generation.name + ' - hp: ' + data[i].engine.power.hp + '</option>');
						}
					} else if (id == 'modifications') {
						$('#cargandoModal').modal();
						// console.log('==================================');
						// console.log(resp.data[0].wheels);
						// console.log(len);
						wheels = resp.data[0].wheels;
						var len_w = wheels.length;
						var diameters = '';
						// console.log(len_w);
						// $("#select-diameter").empty();
						// $('#select-diameter').append('<option value="">Diametro</option>');
						for (var i = 0; i < len_w; i++) {
							// console.log(data[0].wheels[i].front.rim_diameter);
							// $('#select-diameter').append('<option value="' + data[0].wheels[i].front.rim_diameter + '">' + data[0].wheels[i].front.rim_diameter + ' (' + data[0].wheels[i].front.tire + ')</option>');
							diameters += data[0].wheels[i].front.rim_diameter + ',';
						}
						diameters = diameters.substring(0, diameters.length - 1);

						var categoria = '{{ $categoria }}';

						var params = '';
						for (var i = 0; i < len; i++) {
							// 	console.log(data.generation[0].bodies[0].image);
							var img = data[i].generation.bodies[0].image;
							document.getElementById("img-vehiculo").setAttribute('src', img);
							// $("#select-years").append("" + name + "");
							// $("#data-vehiculo").val(JSON.stringify(data[i]));
							// console.log(data[i].generation.bodies[0].image)
							var marca = $("#select-makes").val();
							var anio = $("#select-years").val();
							var modelo = $("#select-models").val();
							var version = $("#select-modifications").val();
							// var diametro = $("#select-diameter").val();

							if (categoria == 'Rines') {
								// var diametro = data[i].wheels[0].front.rim_diameter;
								var barrenacion = data[i].technical.stud_holes + '-' + data[i].technical.pcd;
								params = "&diametro=" + diameters + "&barrenacion=" + barrenacion;
							} else {
								// var diametro = data[i].wheels[0].front.rim_diameter;
								var ancho = data[i].wheels[0].front.tire_width;
								var alto = data[i].wheels[0].front.tire_aspect_ratio;
								params = "&diametro=" + diameters + "&ancho=" + ancho
									+ "&alto=" + alto;
							}
						}
						params += "&marca=" + marca
							+ "&anio=" + anio
							+ "&modelo=" + modelo
							+ "&version=" + version
							+ "&referencia=" + img
							+ "&busqueda_por=vehiculo";


						$('.products_row').html('');
						window.location.href = '{{url("tienda")}}' + '?categoria=' + categoria + params

					}


				})
				.fail(function () {
					console.log("error");

				})
				.always(function () {
					console.log("complete");
				});

		}

		function loadMoreData(page, tamano = 0) {
			// console.log(page)
			const queryString = window.location.search;
			const urlParams = new URLSearchParams(queryString);
			console.log(queryString)
			console.log(queryString.replace('?', ''));
			var tamano = $('#tamano').val();

			var categoria = '{{ $categoria }}';
			var busqueda = $('#busqueda').val();


			//if(categoria=='Rines'){
			//url = '?page=' + page + '&categoria=' + categoria + '&barre=' + barrenacion + '&diame=' + diametro+ '&busca=' + busqueda
			//url = '?page=' + page + '&categoria=' + categoria + '&barre=' + barrenacion + '&diame=' + diametro+ '&busca=' + busqueda
			url = '?page=' + page + '&' + queryString.replace('?', '');
			/*}else{
                if(busqueda !=''){

                 url = '?page=' + page + '&categoria=' + categoria +'&busca=' + busqueda
                }else{
                    url = '?page=' + page + '&categoria=' + categoria
                }
            }*/

			$.ajax({
				url: url,
				type: 'get',
				beforeSend: function () {
					$('.ajax-load').show()
				}
			})
				.done(function (resp) {
					console.log("success");
					if (resp.html == '') {
						$('.ajax-load').hide();
						return false;
					}
					$('.ajax-load').hide();
					$('.products_row').append(resp.html)
				})
				.fail(function () {
					console.log("error");

				})
				.always(function () {
					console.log("complete");
				});

		}

		function getProds() {
			var tamano = $('#tamano').val()
			$("html, body").animate({
				scrollTop: 0
			}, 600);
			page = 1;
			$('.products_row').html('')
			loadMoreData(page, tamano)

		}

		function addItem(codigo) {
			$.ajax({
				url: "{{url('agrega_producto')}}",
				type: 'post',
				dataType: 'json',
				data: {
					codigo: codigo
				},
			})
				.done(function (resp) {
					console.log("success");
				})
				.fail(function () {
					console.log("error");
				})
				.always(function () {
					console.log("complete");
				});

		}

		function revisaFiltros() {
			$('.products_row').html('');
			page = 1;
			loadMoreData(page, 0)
		}

		function cleanBusqueda() {
			var categoria = $('#categoriaActual').val()
			categoria = categoria.toLowerCase()
			window.location.href = '{{url("tienda")}}' + '?categoria=' + categoria
		}

		function changeFiltro(div) {
			var sel = $('#selFil' + div).val();
			var filcate = $('#selFil' + div).attr('filtro');
			var next = $('#selFil' + div).attr('filtrosiguiente');
			var categoria = '{{ $categoria }}';
			var params = '';
            @foreach($fil as $key => $fl)
			if ($('#selFil{{ $key }}').val() != '0') {
				params += '"{{ $labelsFils[$key] }}":["' + $('#selFil{{ $key }}').val() + '"],'
			}

            @endforeach
			$.ajax({
				url: '{{url('get_filtros')}}',
				type: 'POST',
				dataType: 'json',
				data: {sel: sel, categoria: '{{ $categoria }}', fil: filcate, next: next, params: params},
			})
				.done(function (resp) {
					// console.log(resp.valores.length);
					//if(categoria=='Rines'){
					if (resp.valores.length != 0) {
						$('#selFil' + (parseInt(div) + 1)).html('');
						html = '<option value="0">-Todos-</option>';
						cuenta = 0;
						$.each(resp.valores, function (index, val) {
							html += '<option value="' + val + '">' + val + '</option>'
							cuenta++
						});
						$('#selFil' + (parseInt(div) + 1)).append(html);
						$('#Div' + (parseInt(div) + 1)).show('slow');
						/*if(cuenta==1){
                            $('#divBtnBuscar').show('slow')
                        }*/
						/*}else{

                        }*/
					} else {
						$('#Div' + (parseInt(div) + 1)).hide();
					}
					muestraBtn();
				})
				.fail(function () {
					console.log("error");
				})
				.always(function () {
					console.log("complete");
				});

		}

		function buscarProds(categoria) {
			//if(categoria=='Rines'){
			$('#cargandoModal').modal();
			var diametro = $('#selDiametro').val();
			var barreanacion = $('#selBarrenacion').val();
			var params = '';
            @foreach($fil as $key => $fl)
				params += '&{{ $labelsFils[$key] }}=' + $('#selFil{{ $key }}').val();
            @endforeach
				categoria = categoria.toLowerCase();
			$('.products_row').html('');
			//loadMoreData(1);
			window.location.href = '{{url("tienda")}}' + '?categoria=' + categoria + params
			//}
		}


		function busquedaBredcrums() {
			var queryString = window.location.search;
			var urlParams = new URLSearchParams(queryString);

			html = '';
			var flag = 2;
			var cont = 0;
			urlParams.forEach((value, key) => {
				if (key != 'categoria' && key != 'busqueda_por' && key != 'version' && key != 'referencia') {
					if (flag == urlParams.size) {
						if (value == '0') {
							panval = 'Todos'
						} else {
							panval = value
						}
						html += '<li class="breadcrumb-item" aria-current="page">' + panval + ' <span onclick="cleanBusqueda();" title="Limpiar Busqueda"><i class="fa fa-filter" aria-hidden="true"></i></span></li>';
					} else {
						if (value == '0') {
							panval = 'Todos'
						} else {
							panval = value
						}
						html += '<li class="breadcrumb-item" aria-current="page">' + panval + '</li>';
					}
					flag++
				}

				if (cont == 4) {
					return false;
				}
				cont++;
			});
			if (html != '') {
				$('#breadcrumbFiltros').show();
				$('#listaBreadcrum').append(html)
			} else {
				$('#breadcrumbFiltros').hide();
				$('#listaBreadcrum').append('')
			}

		}

		function muestraBtn(d) {

			/*if($('#'+d).val() == 0){
                alert('Los filtros no se ecnuentran completos');
                return false;
            }*/
			$('#divBtnBuscar').show('slow')
		}
    </script>
@endsection