@extends('layouts.front.app')
@section('og')
<meta property="og:type" content="home" />
<meta property="og:title" content="{{ config('app.name') }} - Inicial" />
<meta property="og:description" content="{{ config('app.description') }}" />
@endsection

@section('content')
@php
use Illuminate\Support\Str;
use Carbon\Carbon;

$acessoLiberado = explode("|",config('site.login.integra_ls.acesso_liberado'));
$getRewards = $getClientData->getRewardsInformation();
$base_img = config('site.url').'storage/categories/';
if (!is_null($getRewards)) {
  $pontos = $getPontos->getPontosByCliente(auth()->user()->cpf_cnpj);
  $pontosUsados = $getPontos->getPontosUtilizados(auth()->user()->cpf_cnpj);
  $pontosAcumulados = $getPontos->getPontosAcumulados(auth()->user()->cpf_cnpj);
  $pontosVencidos = $getPontos->getPontosVencidos(auth()->user()->cpf_cnpj);
}
@endphp
<section>

  <div class="container mt-4">
    @include(config('site.domain').'.front.rewards.navbar')

    @if (!is_null($getRewards) && $getRewards->cliente_ponto_ativo && $getRewards->cliente_ponto_dh_ativo < Carbon::now())

    <div class="pt-2 pl-1 tab-content" id="pills-tabContent">
      <!-- Área de resgate -->
      <div class="tab-pane fade show active" id="strobplus-resgate" role="tabpanel" aria-labelledby="strobplus-resgate-tab">

        <div class="row">
          @foreach ($categories as $key => $category)

          <div class="mb-4 col-md-4 centro ">
            <div class="effect">

              <div class="view">
                <img class="card-img-top" src="{{ $base_img . $category->id }}.jpg" alt="{{ $category->name }}">
                <a href="{{ route('programa.fidelidade.rewards.products', [$category->id, true]) }}">
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>

              <div class="overlay">
                <div class="text-center pdt">
                  <a href="{{ route('programa.fidelidade.rewards.products', [$category->id, true]) }}" class="my-2 btn btn-lg btn-custom-strobplus white-text box-red">
                    {{ $category->name }} <i class="ml-1 fas fa-boxes"></i>
                  </a>
                </div>
              </div>

            </div>
          </div>

          @endforeach
        </div>

      </div>
      <!-- ./Área de resgate -->

    </div>

    @else
    @include(config('site.domain').'.front.rewards.info', compact('getRewards'))
    @endif

  </div>

</section>
@endsection

@section('js')
<script src = "{{ mix('js/jquery.mask.js') }}"></script>
<script src = "{{ mix('js/jquery-ui.min.js') }}"></script>
<script src = "{{ mix('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(){
    let base_url = "{!! url('/') !!}"
    let options = {
      onKeyPress: function (cpf, ev, el, op) {
        var masks = ['000.000.000-000', '00.000.000/0000-00'];
        $('.cliente_cnpj').mask((cpf.length > 14) ? masks[1] : masks[0], op);
      }
    }

    $('.cliente_cnpj').length > 14 ? $('.cliente_cnpj').mask('00.000.000/0000-00', options) : $('.cliente_cnpj').mask('000.000.000-00#', options)
    $('#leituraRegulamento').prop('indeterminate', true);
  })
</script>
@endsection