@extends('layouts.front.app')

@section('og')
<meta property="og:title" content="{{ config('app.name') }}-{{ $title }}" />
<meta property="og:description" content="{{ config('app.description') }}-{{ $title }}" />
@endsection

@section('content')

{{-- <section class="container-fluid w-100">
  <div class="col-lg px-0">
    <div class="view banner-4" style="background-image: url('storage/images/strobeletro/banner-3.jpg')">
      <div class="mask d-flex rgba-black-strong justify-content-center align-items-center">
        <div class="container">
          <div class="text-center white-text">
            <h1 class="py-3 font-h1">
              <strong>Strob<span class="red-strob-text font-weight-bold">eletro</span></strong>
            </h1>
            <h2>Resultado da busca por: {{ request()->input('search')}}</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
</section> --}}

<section>
  <div class="container">
    <nav>
      <ol class="breadcrumb transparent mt-3">
        <li class="breadcrumb-item font-weight-bold"><a href="{{ route('home') }}" class="black-text"><i class="fas fa-home"></i> Home</a></li>
        <li class="breadcrumb-item active font-weight-bold black-text">Busca</li>
      </ol>
    </nav>
  </div>
</section>

<section>
  @include(config('site.domain').'.layouts.front.search-tire')
</section>

<section>
  @if ($products)
  <div class="container mt-5">
    
    <div class="legend">
      <h2 class="title font-abeezee">			
        <img src="{{ asset('storage/images/pneu/pneu_icon.png') }}" alt="Em destaque" class="img-mini mr-2">
        @if(request()->search)
        Resultado da busca por "{{ request()->search }}"
        @else
        @if(!request()->width)
        Resultado da busca por ARO {{ request()->rim }}
        @else
        Resultado da busca por medidas ({{ request()->width }} x {{ request()->height }} x {{ request()->rim }})
        @endif
        @endif
      </h2>
    </div>
    
    @include(config('site.domain').'.front.products.product-list-search', $products)
    
  </div>
  @else
  <p class="alert alert-danger">N&atilde;o temos produtos para esta busca</p>
  @endif
</section>

@endsection

@section('js')
<script type="text/javascript" src="{{ asset('js/axios.js') }}" charset="utf-8"></script>

<script type="text/javascript">
  var token = document.head.querySelector('meta[name="csrf-token"]')
  axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
  $(document).ready(function () {
    $('select[name=width]').on('focus', function(){
      $('#img-principal').hide()
      $('#img-largura').show()
      $('#img-altura').hide()
      $('#img-aro').hide()
    })
    $('select[name=height]').on('focus', function(){
      $('#img-principal').hide()
      $('#img-largura').hide()
      $('#img-altura').show()
      $('#img-aro').hide()
    })
    $('select[name=rim]').on('focus', function(){
      $('#img-principal').hide()
      $('#img-largura').hide()
      $('#img-altura').hide()
      $('#img-aro').show()
    })
    
    $('.avise-me').on('click', function() {
      let url = "{!! url('api/avise-me') !!}"
      let sku = $(this).data('sku')
      
      let customer_id = $('#user_id_loged').val()
      
      if (customer_id === "null") {
        $('#modalAviso').modal( 'show' )
        $('#modalAviso').on('show.bs.modal', function (event) {
          var modal = $(this)
          modal.find('.modal-title').text('Efetuar Login')
          modal.find('.modal-body #modal-message').html('Você precisa estar logado para armazenar as informações.')
        })
        return false
      }
      
      console.log(sku, customer_id)
      axios.post(url, {
        token: token,
        customer_id: parseInt(customer_id),
        sku: sku
      },
      {
        /*headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/json'},*/
        crossDomain: true
      })
      .then((response)=>{
        console.log('Resposta', response.data)
        console.log('Status', response.status)
        
        $('#modalAviso').modal( 'show' )
        $('#modalAviso').on('show.bs.modal', function (event) {
          var modal = $(this)
          modal.find('.modal-title').text('Aviso Gravado')
          modal.find('.modal-body').find('#modal-message').html('Você será avisado quando este produto chegar.')
        })
      }).catch((error)=>{
        console.log('Error', error)
      })
    })
  })
</script>

@endsection