@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="text-dark">
            <i class="fas fa-home"></i> Home</a>
          </li>
          <li class="breadcrumb-item font-weight-bolder text-dark">Busca</li>
        </ol>
      </nav>
    </div>
  </section>
  
  <section id="wish" v-cloak>
    
    <div class="container">
      @if ($products)
      
      @include('layouts.front.shared.error-success')
      
      <div class="d-md-block d-none">
        @include(config('site.domain').'.front.products.product-list-search')
      </div>
      
      <div class="d-md-none d-block">
        @include(config('site.domain').'.front.products.product-list-mobile')
      </div>
      
      <div class="pagination pg-dark 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>
      
      @else
      <div class="alert alert-warning font-weight-bold">Não temos produtos para esta busca</div>
      @endif
      
    </div>
    
  </section>
  
  @endsection
  
  @section('js')
  <script type="text/javascript" src="{{ asset('js/axios.js') }}"></script>
  
  @include("layouts.front.js.wishlist")
  
  <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 () {
      $('.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').on('show.bs.modal', function (event) {
            var modal = $(this)
            modal.find('.modal-title').text('Aviso Gravado')
            modal.find('.modal-body #modal-message').html('Você será avisado quando este produto chegar.')
          })
          $('#modalAviso').modal( 'show' )
        }).catch((error)=>{
          console.log('Error', error)
        })
      })
    })
  </script>
  @endsection