@extends('layouts.front.app')

@section('og')
  <meta property="og:locale" content="{{ app()->getLocale() }}"/>
  <meta property="og:type" content="home"/>
  <meta property="og:title" content="{{ config('app.name') }} - Home"/>
  <meta property="og:site_name" content="{{ config('app.name') }}"/>
  <meta property="og:description" content="{{ config('site.description') }}"/>
@endsection

@section('content')

<section>
  <div class="icones-footer yellow-speed z-depth-1 d-lg-block d-none">
    <div class="container-fluid py-2">
      <div class="icones text-md-left text-center">

        <div class="row my-auto">

          <div class="col-lg">
            <div class="row">
              <div class="col-lg-3 text-md-right text-center my-auto">
                <img src="{{ asset('storage/images/montagem.png') }}" class="img-fluid">
              </div>
              <div class="col-lg pl-0 my-auto">
                <h5 class="font-weight-bold fosco-text">Montagem gratuita</h5>
                <p class="font-weight-bolder fosco-text mb-0">para pneus comprados pelo site</p>
              </div>
            </div>
          </div>

          <div class="col-lg">
            <div class="row pb-3">
              <div class="col-lg-3 text-md-right text-center my-auto">
                <img src="{{ asset('storage/images/frete.png') }}" class="img-fluid">
              </div>
              <div class="col-lg pl-0 my-auto">
                <h5 class="font-weight-bold fosco-text">Compre no site, retire na loja</h5>
                <p class="font-weight-bolder fosco-text mb-0">sem custo adicional</p>
              </div>
            </div>
          </div>

          <div class="col-lg">
            <div class="row">
              <div class="col-lg-3 text-md-right text-center my-auto">
                <img src="{{ asset('storage/images/credito-card.png') }}" class="img-fluid">
              </div>
              <div class="col-lg pl-0 my-auto">
                <h5 class="font-weight-bold fosco-text">Em até {{ config('cart.parcelas') }}x</h5>
                <p class="font-weight-bolder fosco-text mb-0">no cartão de crédito</p>
              </div>
            </div>
          </div>

          <div class="col-lg">
            <div class="row">
              <div class="col-lg-3 text-md-right text-center my-auto">
                <i class="fas fa-tags fa-3x"></i>
              </div>
              <div class="col-lg pl-0 my-auto">
                <h5 class="font-weight-bold fosco-text">{{ config('cart.desconto_boleto') }}% de desconto</h5>
                <p class="font-weight-bolder fosco-text mb-0">em todo o site</p>
              </div>
            </div>
          </div>

        </div>

      </div>
    </div>
  </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">Em destaque
      </h2>
    </div>
    @include(config('site.domain').'.front.products.product-carousel', ['products' => $products])
  </div>

  @endif

  @if ($novos)
  <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">Novidades
      </h2>
    </div>
    @include(config('site.domain').'.front.products.product-carousel', ['products' => $novos])
  </div>
  @endif

  @if ($vendidos)
  <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">Mais Vendidos
      </h2>
    </div>
    @include(config('site.domain').'.front.products.product-carousel', ['products' => $vendidos ])
  </div>
  @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-  ').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