@extends('layouts.front.app')

@section('content')

<section>
  <div class="container">
    <nav>
      <ol class="breadcrumb my-4">
        <li class="breadcrumb-item font-weight-bold">
          <a href="{{ route('home') }}" class="font-weight-bold fosco-text">
            <i class="fas fa-home"></i> Home</a>
          </li>
        <li class="breadcrumb-item active font-weight-bolder text-dark">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
        <br /> ( {{ $products->count() }} de {{ $total }} encontrados )
      </h2>
    </div>
    
    <div class="row px-1">
      @include(config('site.domain').'.front.products.product-list-search')
    </div>

    <div class="pagination pg-red justify-content-center mt-5 pt-2 rounded">
      @if(request()->search)
      {{ $products->appends(['search' => isset($search) ? $search : ''])->links() }}
      @else
      @if(!request()->width)
      {{ $products->appends(['rim' => (request()->rim) ?? ''])->links() }}
      @else
      {{ $products->appends(['width' => (request()->width) ?? '', 'height' => (request()->height) ?? '', 'rim' => (request()->rim) ?? ''])->links() }}
      @endif
      @endif
    </div>
  </div>
  
  @else
  <div class="alert font-weight-bolder alert-warning">Não temos produtos para esta busca</div>
  @endif
  
</section>

@endsection

@section('js')
<script type="text/javascript" src="{{ asset('js/axios.js') }}"></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