@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 d-lg-block d-none">
      <div class="container 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">
                  <a href="{{ route('pagina', 'centros-de-montagem') }}"><img src="{{ asset('storage/images/montagem.png') }}" class="img-fluid"></a>
                </div>
                <div class="col-lg pl-0 my-auto">
                  <a href="{{ route('pagina', 'centros-de-montagem') }}"><h5 class="font-weight-bold fosco-text">Montagem gratuita</h5></a>
                  <a href="{{ route('pagina', 'centros-de-montagem') }}"><p class="font-weight-bolder fosco-text mb-0">para pneus comprados pelo site</p></a>
                </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') }} vezes</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>
                @if ((config('cart.desconto_boleto')) || config('cart.desconto_dinheiro'))
                  @php
                  $desconto = config('cart.desconto_boleto') + config('cart.desconto_dinheiro');
                  @endphp
                  <div class="col-lg pl-0 my-auto">
                    <h5 class="font-weight-bold fosco-text">{{ $desconto }}% de desconto</h5>
                    <small class="font-weight-bolder fosco-text mb-0">Apenas para pagamento à vista (DINHEIRO, DÉBITO e BOLETO)</small>
                  </div>
                @endif
              </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 () {

    $('.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