@extends('layout.mainlayout')
@section('title', '- Seminuevos')
@section('estilos')
<link rel="stylesheet" href="{{asset('css/seminuevos.css')}}">
<style>
  .loader {
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #000;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
  }


  @-webkit-keyframes spin {
    0% {
      -webkit-transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
    }
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  /* RANGE SLIDER */
  .range-slider {
    position: relative;
    height: 80px;
  }

  .youTube-btn {
    cursor: pointer;
    width: 85px;
    position: absolute;
    right: 13px;
    top: 22px;
    transition: width 0.3s;
    transition-timing-function: ease-in;
    z-index: 99;
  }

  .youTube-btn:hover {
    width: 90px;
  }

  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .youTube-btn {
      width: 70px;
    }

    .youTube-btn:hover {
      width: 75px;
    }
  }
</style>
@endsection
@section('navbar')
@include('layout.partials.nav')
@endsection

@section('sidebar')
@include('layout.partials.sidebar')
@endsection
@section('content')

@section('slider')
@include('layout.partials.slider')
@endsection

@section('comparador')
@include('layout.partials.comparador')
@endsection

@section('content')

<!-- Div de animacion para las búsquedas -->
<div class="loader" style="display: none"></div>
<!-- Fin Div de animacion para las búsquedas -->
<form id="search" method="GET" action="{{route('seminuevos')}}">
  <!-- Contenedor de Filtros y Autos -->
  <div class="row mx-0" style="place-content: center">
    {{-- FILTRO SUPERIOR --}}
    <div class="form-group ">

      <div class="container filtros p-4 my-5">
        <div class="row">

          <div class="col-md-3 col-sm-12 pb-3">
            <select class="form-select submitter" name="categoria">
              <option value="">Tipo de vehículo</option>
              @foreach ($data['categorias'] as $item)
              <option value="{{$item->nombre}}" {{$item->nombre == @$data['parametros']['categoria'] ? 'selected' :
                ''}}>{{$item->nombre}}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-3 col-sm-12 pb-3">
            <select class="form-select submitter" name="marca">
              <option value="">Marca</option>
              @foreach ($data['marcas'] as $item)
              <option value="{{$item->nombre}}" {{$item->nombre == @$data['parametros']['marca'] ? 'selected' :
                ''}}>{{$item->nombre}}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-3 col-sm-12 pb-3">
            <select class="form-select submitter" name="modelo">
              <option value="">Modelo</option>
              @foreach ($data['modelos'] as $item)
              <option value="{{$item->MODELO}}" {{$item->MODELO == @$data['parametros']['modelo'] ? 'selected' :
                ''}}>{{$item->MODELO}}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-3 col-sm-12 pb-3">
            <select class="form-select submitter" name="combustible">
              <option value="">Tipo Combustible</option>
              @foreach ($data['combustible'] as $item)
              <option value="{{$item->combustible_nombre}}" {{$item->combustible_nombre ==
                @$data['parametros']['combustible'] ? 'selected' : ''}}>{{$item->combustible_nombre}}</option>
              @endforeach
            </select>
          </div>

          <!-- <div class="col-md-3 col-sm-12 pb-2">
            <select class="form-select submitter" name="kms">
              <option value="">Kilómetros</option>
              @foreach ($data['kms'] as $item)
              @php $text = is_null($item[1]) ? 'Más de ' . number_format($item[0],'0', ',','.') :
              number_format($item[0],'0', ',','.') . ' - ' . number_format($item[1],'0', ',','.');
              $value = is_null($item[1]) ? $item[0] : $item[0] . ',' . $item[1];
              @endphp
              <option value="{{$value}}" {{$value==@$data['parametros']['kms'] ? 'selected' : '' }}>{{$text}}</option>
              @endforeach
            </select>
          </div> -->

          <div class="col-md-3 col-sm-12 pb-2">
            <select class="form-select submitter" name="transmision">
              <option value="">Tipo Transmisión</option>
              @foreach ($data['transmision'] as $item)
              <option value="{{$item[1]}}" {{$item[1]==@$data['parametros']['transmision'] ? 'selected' : '' }}>
                {{$item[1]}}</option>
              @endforeach
            </select>
          </div>

      

          <div class="col-md-3 col-sm-12 pb-2">
            <select class="form-select submitter" name="annio_desde">
              <option value="">Año Desde</option>
              @foreach ($data['annio_desde'] as $item)
              <option value="{{$item->INTANO}}" {{$item->INTANO == @$data['parametros']['annio_desde'] ? 'selected' :
                ''}}>{{$item->INTANO}}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-3 col-sm-12 pb-2">
            <select class="form-select submitter" name="annio_hasta">
              <option value="">Año Hasta</option>
              @foreach ($data['annio_hasta'] as $item)
              <option value="{{$item->INTANO}}" {{$item->INTANO == @$data['parametros']['annio_hasta'] ? 'selected' :
                ''}}>{{$item->INTANO}}</option>
              @endforeach
            </select>
          </div>

          <div class="col-md-3 col-sm-12 pb-2">
            <select class="form-select submitter" name="precios">
              <option value="">Precios</option>
              @foreach ($data['precios'] as $item)
              @php $text = is_null($item[1]) ? 'Desde ' . number_format($item[0],'0', ',','.') . ' a Más' : 'Desde ' .
              number_format($item[0],'0', ',','.') . ' Hasta ' . number_format($item[1],'0', ',','.');
              $value = is_null($item[1]) ? $item[0] : $item[0] . ',' . $item[1];
              @endphp
              <option value="{{$value}}" {{$value==@$data['parametros']['precios'] ? 'selected' : '' }}>{{$text}}
              </option>
              @endforeach
            </select>
          </div>

          {{-- <div class="col-md-3 col-sm-12 pb-2">
            @if(count($data['sucursales']) > 1)
            <select class="form-select submitter" name="sucursal">
              <option value="">Sucursales</option>
              @foreach ($data['sucursales'] as $item)
              <option value="{{$item->nombre}}" {{$item->nombre == @$data['parametros']['sucursal'] ? 'selected' :
                ''}}>{{$item->nombre}}</option>
              @endforeach
            </select>
            @endif
          </div> --}}

          {{-- <div class="col-md-3 col-sm-12 pb-2">
            <select class="form-select submitter" name="promocion">
              <option value="">Promoción</option>
              @foreach ($data['promociones'] as $item)
              <option value="{{$item->VCHETIQUETA_TITULO}}" {{$item->VCHETIQUETA_TITULO ==
                @$data['parametros']['promocion'] ? 'selected' : ''}}>{{$item->VCHETIQUETA_TITULO}}</option>
              @endforeach
            </select>
          </div> --}}
        </div>

      </div>
    </div>
    {{-- FIN FILTRO SUPERIOR --}}
  </div>
  <!-- Fin Div de filtros de búsquedas -->



  <!-- Div de Mini fichas -->
  <div class="container px-0">
    <div class="container">
      <div class="d-flex justify-content-between mb-4 flex-wrap">
        <div>
          <h1 class="font-extra-bold text-gray-dark">SEMINUEVOS</h1>
        </div>
  
        <div class="d-flex flex-wrap">
          <div class="text-center form-group d-flex justify-content-center pe-lg-5 pb-3 pb-lg-0">
            <label class="align-self-center me-2" for="exampleFormControlSelect1">Mostrar
            </label>
            <select class="form-select submitter" style="width: auto" id="exampleFormControlSelect1" name="cantidad">
              @forelse ($data['cantidad'] as $cant)
              <option value="{{$cant}}" {{$cant==@$data['parametros']['cantidad'] ? 'selected' : '' }}>{{$cant}}</option>
              @endforeach
            </select>
          </div>
  
          <div class="text-center form-group d-flex justify-content-center">
            <label class="align-self-center me-2" for="exampleFormControlSelect1">Ordenar por </label>
            <select class="form-select submitter" style="width: auto" id="orden" name="orden">
              <option value="marca" {{'marca'==@$data['parametros']['orden'] ? 'selected' : '' }}>Marcas</option>
              <option value="id" {{'id'==@$data['parametros']['orden'] ? 'selected' : '' }}>Recientes</option>
              <option value="preciomax" {{'preciomax'==@$data['parametros']['orden'] ? 'selected' : '' }}>Precio Mayor
              </option>
              <option value="preciomin" {{'preciomin'==@$data['parametros']['orden'] ? 'selected' : '' }}>Precio Menor
              </option>
            </select>
    
          </div>
        </div>
  
      </div>

    </div>

    {{-- <div class="row mb-2 justyfy-content-md-center justify-content-lg-between">

      <div class="col-12 col-md-4 text-center form-group d-flex justify-content-center">
          <h1>Seminuevos</h1>
      </div>
      
      <div class="col-12 col-md-4 text-center form-group d-flex justify-content-center">
        <label class="align-self-center mr-2" for="exampleFormControlSelect1">Mostrar
        </label>
        <select class="form-select submitter" style="width: auto" id="exampleFormControlSelect1" name="cantidad">
          @forelse ($data['cantidad'] as $cant)
          <option value="{{$cant}}" {{$cant==@$data['parametros']['cantidad'] ? 'selected' : '' }}>{{$cant}}</option>
          @endforeach
        </select>
      </div>


      <div class="col-12 col-md-3 text-center form-group d-flex justify-content-center">
        <label class="align-self-center mr-2" for="exampleFormControlSelect1">Ordenar por </label>
        <select class="form-select submitter" style="width: auto" id="orden" name="orden">
          <option value="marca" {{'marca'==@$data['parametros']['orden'] ? 'selected' : '' }}>Marcas</option>
          <option value="id" {{'id'==@$data['parametros']['orden'] ? 'selected' : '' }}>Recientes</option>
          <option value="preciomax" {{'preciomax'==@$data['parametros']['orden'] ? 'selected' : '' }}>Precio Mayor
          </option>
          <option value="preciomin" {{'preciomin'==@$data['parametros']['orden'] ? 'selected' : '' }}>Precio Menor
          </option>
        </select>

      </div>

    </div> --}}


    @include('components.miniFicha', ['data' => $data["autos"]])

    {{-- Cambiar numero para modificar cantidad de elementos en el PAGINADOR... --}}
    {{$data['autos']->onEachSide(0)->links()}}

  </div>
  <!-- Fin Div de Mini fichas -->

  </div>

</form>

@section('scripts')
<!--Plugin CSSRANGE SLIDER-->
<link rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/css/ion.rangeSlider.min.css" />
<!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


<!--Plugin JavaScript RANGE SLIDER -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.3.1/js/ion.rangeSlider.min.js"></script>
<script>
  function getId(url) {
    const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
    const match = url.match(regExp);
    return (match && match[2].length === 11) ?
      match[2] :
      null;
  };
  function playVideo(id, video) {
    if (!video) return;
    var url_youtube = video;
    const videoId = getId(url_youtube);
    var url_final = "https://www.youtube.com/embed/" + videoId + '?rel=0';

    $("#video-youtube").attr("src", url_final);
    $('#close').on('click', () => {
      $('.myFrame').removeAttr('src');
    });

  };

</script>
<script>
  var minp = $("#minprecio").val();
  var maxp = $("#maxprecio").val();

  function format(nStr) {
    nStr += '';
    var x = nStr.split('.');
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
      x1 = x1.replace(rgx, '$1' + '.' + '$2');
    }
    return x1 + x2;
  }

  // Configuración precio
  var $range = $(".js-range-slider"),
    $inputFrom = $(".js-input-from"),
    $inputTo = $(".js-input-to"),
    instance,
    min = Math.trunc(minp), //rango mínimo
    max = Math.trunc(maxp), //rango máximo
    from = 0,
    to = 0;

  var precioArray = $("#precios").val();
  var res = precioArray.split(",");

  if (res.length > 1) {

    minp = res[0];
    maxp = res[1];
  }

  $range.ionRangeSlider({
    skin: "round",
    type: "double1",
    min: min,
    max: max,
    from: Math.trunc(minp), //Posición mínima del selector
    to: Math.trunc(maxp), //Posición máxima del selector
    prettify_separator: ".", //Esto es el simbolo que separara por miles sino no se coloca ira un espacio en blanco
    prefix: "$", //Con esto antepones algun simbolo antes de cada valor
    //onStart: updateInputs,
    onFinish: updateInputs
  });
  instance = $range.data("ionRangeSlider");

  function updateInputs(data) {
    from = data.from; //desde
    to = data.to; //hasta

    vprecio = from + "," + to;
    $("#precios").val(vprecio);

    $('#search').trigger('submit');
  }

  $inputFrom.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < min) {
      val = min;
    } else if (val > to) {
      val = to;
    }

    instance.update({
      from: val
    });

  });

  $inputTo.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < from) {
      val = from;
    } else if (val > max) {
      val = max;
    }

    instance.update({
      to: val
    });
  });  
</script>
<script>
  var mina = $("#minano").val();
  var maxa = $("#maxano").val();

  // Configuración Años
  var $range = $(".js-range-slider-anio"),
    $inputFrom = $(".js-input-from-anio"),
    $inputTo = $(".js-input-to-anio"),
    instance,
    min = mina, //rango mínimo
    max = maxa, //rango máximo
    from = 0,
    to = 0;

  if ($("#annio_desde").val() != '') {
    mina = $("#annio_desde").val();
  }
  if ($("#annio_hasta").val() != '') {
    maxa = $("#annio_hasta").val();
  }
  $range.ionRangeSlider({
    skin: "round",
    type: "double",
    min: min,
    max: max,
    from: mina, //Posición mínima del selector
    to: maxa, //Posición máxima del selector
    //onStart: updateInputs,
    prettify_separator: "",
    onFinish: updateInputs
  });
  instance = $range.data("ionRangeSlider");

  function updateInputs(data) {
    from = data.from; //desde
    to = data.to; //hasta

    $("#annio_desde").val(from);
    $("#annio_hasta").val(to);

    $('#search').trigger('submit');
  }

  $inputFrom.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < min) {
      val = min;
    } else if (val > to) {
      val = to;
    }

    instance.update({
      from: val
    });
  });

  $inputTo.on("input", function () {
    var val = $(this).prop("value");

    // validate
    if (val < from) {
      val = from;
    } else if (val > max) {
      val = max;
    }

    instance.update({
      to: val
    });
  });
</script>
<script>
  $('.submitter').change(function () {
    $('#search').trigger('submit');
  })
  $('#search').submit(function (event) {
    event.preventDefault();
    $('div.loader').show();
    $(this).off('submit').submit();
  })    
</script>
<script>
  const brandCheckbox = document.querySelectorAll('.brandCheckbox');
  const collapseBrand = document.getElementById('collapseBrand');
  let brandBtn;

  brandCheckbox.forEach((el, i) => {

    if (el.checked && i > 3) {

      collapseBrand.classList.add('show');
      document.getElementById('modelwrapper').classList.remove('d-none')

    } else if (el.checked) {

      document.getElementById('modelwrapper').classList.remove('d-none')

    }

  });

  brandBtn = document.getElementById('brandBtn');


  // EVALUA SI EL COLLAPSE DE MARCA TIENE  LA CLASE 'SHOW' PARA VER QUE MUESTRA EL BOTÓN
  (collapseBrand.classList.contains('show')) ? brandBtn.innerHTML = 'Ver Menos -' : brandBtn.innerHTML = 'Ver Más +';

  const toggleName = () => {
    brandBtn = document.getElementById('brandBtn');

    if (brandBtn.innerHTML === 'Ver Más +') {

      brandBtn.innerHTML = 'Ver Menos -';

    } else {

      brandBtn.innerHTML = 'Ver Más +';

    }
  };
</script>
@append

@endsection

@endsection
@section('footer')
@include('layout.partials.footer')
@endsection