@extends('layouts.front.app')
@section('css')

<link href="{{ asset('css/jquery-ui.min.css') }}" rel="stylesheet">
<style media="screen">
  li>a.nav-link.active {
    background-color: white !important;
    border: 1px gray solid;
    color: blue !important;
  }
</style>
@if (config('clearsale.fingerprint'))

<script type="text/javascript">
  (function (a, b, c, d, e, f, g) {
    a['CsdpObject'] = e; a[e] = a[e] || function () {
      (a[e].q = a[e].q || []).push(arguments)
    }, a[e].l = 1 * new Date(); f = b.createElement(c),
    g = b.getElementsByTagName(c)[0]; f.async = 1; f.src = d; g.parentNode.insertBefore(f, g)
  })(window, document, 'script', '//device.clearsale.com.br/p/fp.js', 'csdp');
  csdp('app', "{!! config('clearsale.fingerprint') !!}");
  csdp('sessionid', "{!! session()->getId() !!}");
</script>

@endif

@endsection

@section('content')
<!--Modal: modalEnviaPagamento-->
<div class="p-5 modal fade" id="modalEnviaPagamento" tabindex="-1" role="dialog" data-backdrop="false">
  <div class="modal-dialog modal-notify modal-warning" role="document">
    <div class="text-center modal-content">
      <div class="modal-header d-flex justify-content-center">
        <p class="heading font-weight-bolder">processando pagamento</p>
      </div>

      <div class="modal-body">
        <i class="mb-4 fas fa-bell fa-4x animated rotateIn"></i>
        <p>
          <span class="txtProcessando font-weight-bolder">Estamos processando seu pagamento, aguarde...</span>
          <div class="spinner-grow text-danger" role="status">
            <span class="sr-only">Carregando...</span>
          </div>
        </p>
      </div>

      <div class="modal-footer flex-center font-weight-bolder">
        Aguarde que esta janela se fechar&aacute; ao concluir o pagamento
      </div>
    </div>

  </div>
</div>
<!--Modal: modalEnviaPagamento-->

@if(config('site.domain') === 'operagarden')
@include(config('site.domain').'.layouts.front.menu-banner')
@endif
<div class="container mt-5">
  @php
  use Illuminate\Support\Str;

  $formaPagamento = explode(",", config('payees.name'));
  $order_id = '';
  $order = null;
  $valFrete = ($valorFrete) ?? 0.00;
  $valTotal = ($total) ?? 0;
  $desconto = request()->desconto ?? 0.00;
  $subtotal = floatVal(request()->subTotal);

  if(request()->order_id) {
    $order_id = request()->order_id;
  }
  if (isset($pedido)) {
    // $valFrete = floatval($pedido->total_shipping);
    $valTotal = floatval($pedido->total);
  }

  if (session()->has('delivery')) {
    $valFrete = session('delivery')["w_pedido_vl_frete"];
    $valTotal = floatval($valFrete) + floatval($cartTotal);
  }
  $valTotal = floatVal(request()->subTotal) - floatVal($desconto) + $valFrete;
  $total = $valTotal;
  $valorTotal = $valTotal;
  @endphp
  <div id="alert-payment" class="alert alert-warning alert-dismissible fade show" role="alert">
    <span class="text-alert"></span>
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <ul class="mb-3 nav nav-pills" id="pills-tab" role="tablist">
    @foreach ($formaPagamento as $key => $pagamento)
    @if(Str::contains($pagamento, 'cielo') || Str::contains($pagamento, 'erede') || Str::contains($pagamento, 'getnet'))
    <li class="nav-item">
      <a class="nav-link @if($key === 0)active @endif" id="pills-{{$pagamento}}-tab" data-toggle="pill"
      href="#pills-{{$pagamento}}" role="tab" aria-controls="pills-home" aria-selected="true">
      <label class="font-weight-bold h6 pointer blue-text" for="pills-{{ $pagamento }}">
        <img class="pr-1 mx-4" height="75" src="{{ asset('storage/images/card-deb-cdt.png') }}">
        Cart&atilde;o Cr&eacute;dito ou d&eacute;bito
      </label>
    </a>
  </li>
  @endif
  @if(Str::contains($pagamento, 'transferencia'))
  <li class="nav-item">
    <a class="nav-link @if($key === 0)active @endif" id="pills-{{$pagamento}}-tab" data-toggle="pill"
    href="#pills-{{$pagamento}}" role="tab" aria-controls="pills-home" aria-selected="true">
    <label class="font-weight-bold h6 pointer blue-text" for="tipo_pagamento_{{ $pagamento }}">
      <img class="mx-3" height="75" src="{{ asset('storage/images/scholl/transferencia.png') }}">
      Transfer&ecirc;ncia Banc&aacute;ria
    </label>
  </a>
</li>
@endif
@if(Str::contains($pagamento, 'pagseguro'))

<li class="nav-item">
  <a class="nav-link @if($key === 0)active @endif" id="pills-{{$pagamento}}-tab" data-toggle="pill"
  href="#pills-{{$pagamento}}" role="tab" aria-controls="pills-home" aria-selected="true">
  @if (config('site.gera_so_boleto'))
  <label class="font-weight-bold h6 pointer blue-text mostra-boleto" for="tipo_pagamento_{{ $pagamento }}">
    {{-- @if(floatVal($valorTotal) >= 5.00 ) --}}
    <img class="pr-1 mx-4" height="64" src="{{ asset('storage/images/boleto.png') }}">
    Boleto banc&aacute;rio <br /><small>(ser&aacute; acrescentado ao valor, uma taxa de
      {{ config('cart.currency_symbol') }} 1,00 <br /> compra m&iacute;nima de
      {{ config('cart.currency_symbol') }} 5,00)</small>
      {{-- @endif --}}
      @else
      <label class="font-weight-bold h6 pointer blue-text mostra-pagseguro" for="tipo_pagamento_{{ $pagamento }}">
        <img class="pr-1 mx-2" height="90" src="{{ asset('storage/images/boleto_cartao.png') }}">
        Cart&atilde;o de cr&eacute;dito ou boleto banc&aacute;rio
        {{-- ou d&eacute;bito --}}

      {{-- <label class="font-weight-bold h6 pointer blue-text" for="pills-{{ $pagamento }}">
        <img class="pr-1 mx-4" height="75" src="{{ asset('storage/images/card-deb-cdt.png') }}">
        Cart&atilde;o Cr&eacute;dito ou d&eacute;bito --}}

        @endif
      </label>
    </a>
  </li>
  @endif
  @endforeach
</ul>
<div class="my-2 row">
  <div class="col-lg-8">

    <div class="pl-1 tab-content" id="pills-tabContent">
      @foreach ($formaPagamento as $key => $pagamento)

      @if(Str::contains($pagamento, 'cielo') || Str::contains($pagamento, 'erede') || Str::contains($pagamento,
      'getnet'))
      <div class="tab-pane fade @if($key === 0)show active @endif " id="pills-{{$pagamento}}" role="tabpanel"
      aria-labelledby="pills-{{$pagamento}}-tab">
      @include('layouts.front.payments.form-payment', ['order_id' => $order_id])
    </div>
    @endif

    @if(Str::contains($pagamento, 'transferencia'))
    <div class="tab-pane fade @if($key === 0)show active @endif " id="pills-{{$pagamento}}" role="tabpanel"
    aria-labelledby="pills-{{$pagamento}}-tab">
    @include('layouts.front.payments.bank-transfer', ['order_id' => $order_id, 'valorFrete' => $valorFrete,
    'valorTotal' => $valorTotal, 'order' => ''])
  </div>
  @endif

  @if(Str::contains($pagamento, 'pagseguro'))
  <div class="tab-pane fade @if($key === 0)show active @endif " id="pills-{{$pagamento}}" role="tabpanel"
  aria-labelledby="pills-{{$pagamento}}-tab">
  <input type="hidden" value="{{ request()->cpf_cnpj }}" name="cpf_cnpj">
  <input type="hidden" value="{{ request()->phone }}" name="phone">
  @if ($total)
  <input type="hidden" value="{{  $total  }}" name="subTotal">
  @endif
  <input type="hidden" value="" name="installment">
  @include('layouts.front.payments.pagseguro-old', ['order_id' => $order_id])
  {{-- @include('layouts.front.payments.form-payment', ['order_id' => $order_id, 'valFrete' => $valFrete,
  'valorTotal' => ($valorTotal) ?? 0]) --}}
</div>
@endif

@endforeach
</div>

</div>

<div class="col-lg-4">

  <div class="rounded shadow-1-strong">

    <h4 class="p-3 text-center font-weight-bolder fosco-text font-nunito">Resumo</h4>

    <ul class="list-group list-group-flush">

      @if ($getCartItems && $getCartItems->count() > 0)
      <input type="hidden" name="items" value="{{ $getCartItems }}">
      <li class="list-group-item">
        <h6 class="font-weight-bolder fosco-text">Itens</h6>
        <hr>
        @foreach($getCartItems as $product)
        <dl class="row">
          <dd class="col-sm-5">
            <small>{{ $product->name }}</small>
            @if (!$order && $product->options->combination)
            ({{ $product->options->combination[0]['value'] }})
            @endif
          </dd>
          <dd class="text-right col-sm-2">
            @if(isset($product->pivot))
            <small>{{ $product->pivot->quantity }} x</small>
            @else
            @if(isset($product->qty))
            <small>{{ $product->qty }} x</small>
            @endif
            @endif
          </dd>
          <dd class="text-right col-sm">
            <em>{{ config('cart.currency_symbol') }} {{ number_format($product->price, 2, ',', '.') }}</em>
          </dd>
        </dl>

        <input type="hidden" name="peso_total" value="{{ floatVal($product->weight) }}">

        @endforeach
      </li>

      <li class="list-group-item">
        <hr>
        <dl class="row">
          <dd class="col-sm-7">
            <em>Descontos</em>
            @if (config('cart.desconto_dinheiro') || config('cart.desconto_avista'))
            <em>(à vista)</em>
            @endif
          </dd>
          <dd class="text-right col-sm">
            <span class="text-success">
              <span class="valorPromocao">
                {{ config('cart.currency_symbol') }} {{ number_format($desconto, 2, ',','.') }}
              </span>
              <input type="hidden" name="vlPromocao" value="{{ floatval($desconto) }}">
            </span>
            <input type="hidden"
            name="id_voucher">
          </dd>
        </dl>
        @if ($desconto > 0)
        <hr>
        <dl class="row">
          <dd class="col-sm-7">
            Valor com desconto
          </dd>
          <dd class="text-right col-sm">
            <span class="text-success">
              @php
              $valorDescontado = floatVal($subtotal) - $desconto;
              @endphp
              {{ config('cart.currency_symbol') }} {{ number_format($valorDescontado, 2, ',','.') }}
            </span>
          </dd>
        </dl>
        @endif
        @if (!isset($order_paid) || $order_paid > 1)

        @endif
      </li>
      <li class="list-group-item">
        <dl class="row">
          <dd class="col-sm-5">
            <strong>Frete</strong>
          </dd>
          <dd class="text-right col-sm">
            <strong>{{ config('cart.currency_symbol') }} {{ number_format(floatval($valFrete), 2, ",", ".") }}</strong>
          </dd>
        </dl>
      </li>
      <li class="list-group-item">
        <dl class="row">
          <dd class="col-sm-5">
            <strong>Total</strong>
          </dd>
          <dd class="text-right col-sm">
            <strong>{{ config('cart.currency_symbol') }} {{ number_format($valTotal, 2, ",", ".") }}</strong>
          </dd>
        </dl>
      </li>
      @endif
      @if (isset($pedido))
      <li class="list-group-item">
        <h6 class="card-subtitle text-muted">Produtos no pedido</h6>
        <hr>
        @foreach($pedido->products as $product)

        <dl class="row">
          <dd class="col-sm-5">
            <small>{{ $product->name }}</small>
            @if ($product->attributes->count() > 0)

            @endif
          </dd>
          <dd class="text-right col-sm-2">
            @if(isset($product->pivot))
            <small>{{ $product->pivot->quantity }} x</small>
            @else
            @if(isset($product->qty))
            <small>{{ $product->qty }} x</small>
            @endif
            @endif
          </dd>
          <dd class="text-right col-sm">
            <em>{{ config('cart.currency_symbol') }} {{ number_format(floatval($product->price), 2, ',', '.') }}</em>
          </dd>
        </dl>
        <input type="hidden" name="peso_total" value="{{ floatVal($product->weight) }}">

        @endforeach
      </li>

      <li class="list-group-item">
        <dl class="row">
          <dd class="col-sm-5">
            <strong>Frete</strong>
          </dd>
          <dd class="text-right col-sm">
            <strong>{{ config('cart.currency_symbol') }}
              {{ number_format(floatval($pedido->total_shipping), 2, ",", ".") }}</strong>
            </dd>
          </dl>
        </li>
        <li class="list-group-item">
          <dl class="row">
            <dd class="col-sm-5">
              <strong>Total</strong>
            </dd>
            <dd class="text-right col-sm">
              <strong>{{ config('cart.currency_symbol') }} {{ number_format(floatval($pedido->total), 2, ",", ".") }}</strong>
              <input type="hidden" name="priceTT" value="{{ $pedido->total }}">
            </dd>
          </dl>
        </li>
        @endif

        @if(session()->has('delivery'))
        @php
        $delivery = collect(session('delivery'));
        @endphp
        <li class="list-group-item">
          @if (intval($delivery["w_pedido_entr_tipo"]) === 2)
          <h6 class="mb-2 card-subtitle text-muted">Dados da entrega</h6>
          @else
          <h6 class="mb-2 card-subtitle text-muted">Pedido a ser retirado</h6>
          @endif
          <hr>
          <ul class="list-group list-group-flush">
            @php

            $periodo = ($delivery["w_pedido_id_entr_periodo"] === 1) ? 'pela manhã' : 'na parte da tarde';
            $comp = ($delivery["w_pedido_entrega_complem"]) ? "(" . $delivery["w_pedido_entrega_complem"] .")" : "";
            $endereco = $delivery["w_pedido_entrega_logr"] . ", " . $delivery["w_pedido_entrega_numero"] . $comp . " -
            " . $delivery["w_pedido_entrega_bairro"] . "<br>";
            $endereco .= "CEP: ". $delivery["w_pedido_entrega_cep"] . "-" . $delivery["w_pedido_entrega_munic"]
            ."/".$delivery["w_pedido_entrega_uf"] ;

            @endphp
            @if (intval($delivery["w_pedido_entr_tipo"]) === 2)
            <li class="list-group-item">Entregar para: <strong>{{$delivery["w_pedido_entrega_nome"]}}</strong></li>
            <li class="list-group-item">Entregar no dia: <strong>{{$delivery["w_pedido_data_saida"]}}</strong></li>
            <li class="list-group-item">Per&iacute;odo <strong>{{$periodo}}</strong></li>
            <li class="list-group-item">
              Local da entrega: <strong>{!! $endereco !!} </strong>
            </li>
            <li class="list-group-item">Refer&ecirc;ncia <strong>{{$delivery["w_pedido_entrega_prox"]}}</strong></li>
            @else
            <li class="list-group-item">Irei retirar no dia: <strong>{{$delivery["w_pedido_data_saida"]}}</strong>
            </li>
            <li class="list-group-item">Per&iacute;odo <strong>{{$periodo}}</strong></li>
            @endif
          </ul>
          @if ($delivery["w_pedido_cartao_tit"] !== '')

          <li class="list-group-item">
            <h6 class="my-2 card-subtitle text-muted">Cartão de presente</h6>
            <hr>
            <ul class="list-group list-group-flush">
              <li class="list-group-item">Título: <strong>{{$delivery["w_pedido_cartao_tit"]}}</strong></li>
              <li class="list-group-item">Mensagem: <strong>{{$delivery["w_pedido_cartao_msg"]}}</strong></li>
              <li class="list-group-item">Assinado: <strong>{{$delivery["w_pedido_cartao_ass"]}}</strong></li>
            </ul>
          </li>

          @endif
          <li class="text-center list-group-item">
            @if (config('site.checkout.novo'))
            @else
            <form class="" action="{{ route('checkout.change.delivery')}}" method="post">
              {{ csrf_field() }}
              <button type="submit" class="btn btn-elegant">Modificar a entrega<i
                class="ml-2 fas fa-trash-alt"></i></button>
              </form>
              @endif
            </li>
            @endif

          </ul>

        </div>
      </div>

    </div>
  </div>

  @endsection
  @section('js')
  <script src="{{ asset('js/axios.js') }}" type="text/javascript" charset="utf-8">
  </script>
  <script src="{{ asset('js/jquery.mask.js') }}" type="text/javascript" charset="utf-8">
  </script>
  <script src="{{ asset('js/jquery-ui.min.js') }}" type="text/javascript" charset="utf-8">
  </script>

  @if (config('pagseguro.method'))
  <script type="text/javascript"
  src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js"></script>
  @else

  <script type="text/javascript" src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.js">
  </script>
  @endif

  <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() {
      $('.show-pagseguro').hide()
      $('.show-boleto-pagseguro').hide()
      $('div.edit-radio-top-card').hide()
      $('div.edit-radio-top-card-pagseguro').hide()

      /* Novo PagSeguro */
      let pagseguro_method = "{!! config('pagseguro.method') !!}"
      let parc_sem_juros = "{!! config('cart.parc_sem_juros') !!}"
      let card_token = ''
      let nameHash = ''

      if(pagseguro_method === 'transparent') {
        let base_pagseguro = "https://stc.pagseguro.uol.com.br"

        let subTotal = $('input[name=subTotal]').val()
        subTotal = parseFloat(subTotal)

        axios.get('/api/vue/payments/getsession-pagseguro')
        .then((resp) => {
          let sessionid = resp.data.id
          console.log('Session Id', sessionid, subTotal)
          PagSeguroDirectPayment.setSessionId(sessionid);
          /* Recuperando os cartões */
          PagSeguroDirectPayment.getPaymentMethods({
            amount: subTotal,
            success: function(response) {

              // Retorna os meios de pagamento disponíveis.
              console.log('Methods payments', response)
              if (!response.error) {
                console.log('Não teve erros')
                let cartoes_credito = response.paymentMethods.CREDIT_CARD.options
                let cartoes_debito = response.paymentMethods.DEBIT_CARD.options
                let divCards = ''

                $.each(cartoes_credito, function(i, cartao){
                  if (cartao.status === "AVAILABLE") {
                    divCards += `<div class="my-2 col-lg-3 col-6 seleciona_credito">`
                      divCards += `<div class="custom-control custom-radio">`
                        divCards += `<input type="radio" class="custom-control-input cartao_${cartao.name}" id="credit_${cartao.name}" value="${cartao.name}" name="brand_card" required>`
                        divCards += `<label class="custom-control-label paymentMethod" for="credit_${cartao.name}">`
                          if(cartao.images){
                            divCards += `<img src="${base_pagseguro}${cartao.images.MEDIUM.path}" alt="${cartao.displayName}">`
                          } else {
                            divCards += cartao.displayName
                          }
                          divCards += `</label>`
                          divCards += `</div>`
                          divCards += `</div>`
                        }
                      });
                      $.each(cartoes_debito, function(i, cartao) {
                        if (cartao.status === "AVAILABLE") {
                          divCards += `<div class="my-2 col-lg-3 col-6 seleciona_debito" style="display:none;">`
                            divCards += `<div class="custom-control custom-radio">`
                              divCards += `<input type="radio" class="custom-control-input cartao_${cartao.name}" id="debit_${cartao.name}"
                              value="${cartao.name}" name="brand_card" required>`
                              divCards += `<label class="custom-control-label paymentMethod" for="debit_${cartao.name}">`
                                if(cartao.images){
                                  divCards += `<img src="${base_pagseguro}${cartao.images.MEDIUM.path}" alt="${cartao.displayName}">`
                                } else {
                                  divCards += cartao.displayName
                                }
                                divCards += `</label>`
                                divCards += `</div>`
                                divCards += `</div>`
                              }
                            });

                            $('div.edit-radio-top-card-pagseguro').html(divCards)

                            $('div.edit-radio-top-card-pagseguro').show()

                            /* Efetua o calculo de parcelamento */
                            $('input[name=brand_card]').on('click', function() {
                              let bandeira = $('input[name=brand_card]:checked').val()
                              bandeira = bandeira.toLowerCase()
                              let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
                              console.log('Efetua o calculo de parcelamento', bandeira, parc_sem_juros, subTotal)
                              PagSeguroDirectPayment.getInstallments({
                                amount: subTotal,
                                maxInstallmentNoInterest: parseInt(parc_sem_juros),
                                brand: bandeira,
                                success: function(response){
                                  console.log('Retorno ==> ', response)
                                  let parcelas = response.installments
                                  $('select[name=num_parcelas]').html("")
                                  let _optionParcela = `<option value="1" data-parcelas="1" data-porparcela="${subTotal}">Parcela</option>`
                                  $.each(parcelas, function(i, parc) {
                                    // console.log('Dentro do parc ', parc)
                                    $.each(parc, function(k, parcela) {
                                      // console.log('cada parcela', parcela.quantity, parcela.installmentAmount)
                                      let txt_sem_juros = ""
                                      if(parcela.interestFree) {
                                        txt_sem_juros += '[sem juros]'
                                      } else {
                                        txt_sem_juros += '['+parcela.totalAmount.toLocaleString('pt-BR', formato)+']'
                                      }
                                      let vlParc = parcela.installmentAmount.toLocaleString('pt-BR', formato)

                                      _optionParcela += `<option value="${parcela.quantity}" data-parcelas="${parcela.quantity}" data-porparcela="${parcela.installmentAmount}">${parcela.quantity} x de ${vlParc} ${txt_sem_juros}</option>`
                                    });
                                  });
                                  $('select[name=num_parcelas]').html(_optionParcela)
                                },
                                error: function(error) {
                                  console.log('Falha ao tentar recuperar o percelamento', error)
                                },
                                complete: function(response){
                                  // Callback para todas chamadas.
                                }
                              });
                            })
                            /* ./ Efetua o calculo de parcelamento */

                          }
                        },
                        error: function(error) {
                          console.log('Falha ao tentar recuperar os cartões', error)
                        },
                        complete: function(response) {
                          // Callback para todas chamadas.
                        }
                      });
                      /* ./Recuperando os cartões */

                      /* Verifca o nome informado e devolve o hash */
                      $('input[name=nome_completo]').on('blur', function(){
                        PagSeguroDirectPayment.onSenderHashReady(function(response){
                          if(response.status == 'error') {
                            console.log(response.message);
                            return false;
                          }
                          let hash = response.senderHash; //Hash estará disponível nesta variável.
                          nameHash = hash
                        });
                      });
                      /* ./ Verifca o nome informado e devolve o hash */

                      /* Verifica a bandeira de acordo com o número digitado*/
                      $('input[name=numero_cartao]').keypress(function() {
                        let cardBin = $(this).val()
                        cardBin = cardBin.replace(" ", "")

                        if(cardBin.length === 6) {
                          PagSeguroDirectPayment.getBrand({
                            cardBin: cardBin,
                            success: function(response) {
                              //bandeira encontrada
                              console.log('bandeira do cartão',response)
                              $('input[name=brand_card][value=' + response.name.toUpperCase() + ']').attr('checked', 'checked')
                              bandeira = response.name
                              if(response.cvvSize > 3) {
                                $('.cvv').attr('placeholder', '0000')
                                $('.cvv').mask('0000')
                              }
                            },
                            error: function(error) {
                              console.log('Falha ao tentar recuperar a bandeira', error, cardBin)
                            },
                            complete: function(response) {
                              //tratamento comum para todas chamadas
                            }
                          });
                        }
                      });
                      /* ./ Verifica a bandeira de acordo com o número digitado*/

                      /* Gera o Card Token */
                      $('input[name=validade_cartao]').change(function() {
                        let cardNumber = $('input[name=numero_cartao]').val()
                        cardNumber = cardNumber.replace(/[^\d.-]/g,'')
                        let bandeira = $('input[name=brand_card]:checked').val()
                        bandeira = bandeira.toLowerCase()
                        let cvv = $('input[name=cvv]').val()
                        let validade_cartao = $('input[name=validade_cartao]').val()
                        validade_cartao = validade_cartao.split('/')
                        let ano_expira = validade_cartao[1]
                        let mes_expira = validade_cartao[0]

                        PagSeguroDirectPayment.createCardToken({
                          cardNumber: cardNumber, // Número do cartão de crédito
                          brand: bandeira, // Bandeira do cartão
                          cvv: cvv, // CVV do cartão
                          expirationMonth: mes_expira, // Mês da expiração do cartão
                          expirationYear: ano_expira, // Ano da expiração do cartão, é necessário os 4 dígitos.
                          success: function(response) {
                            card_token = response.card.token
                            console.log('token do cartao', response.card.token)
                          },
                          error: function(error) {
                            console.log('Falha ao tentar tokenizar o cartão', error, cardNumber, bandeira, cvv, ano_expira, mes_expira)
                          },
                          complete: function(response) {
                            // Callback para todas chamadas.
                          }
                        });
                      });
                      /* ./ Gera o Card Token */


                    })
                    .catch((error) => {
                      console.log('Error ao recuperar o Session Id PagSeguro', error)
                    })
                  } else {
                    $('div.edit-radio-top-card').show()
                  }

                  /* ./ Novo PagSeguro */

                  $('#alert-payment').removeClass('show')
                  $('input[name=mobile]').mask('(99)9 9999-9999')
                  $('.validade').mask('99/9999')
                  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)

                  $('.mostra-boleto').on('click', function() {
                    $('.show-boleto-pagseguro').show()
                    $('#PagamentoBoletoPagSeguro').prop( "checked", true )
                  });

                  $('.mostra-pagseguro').on('click', function() {
                    $('.show-pagseguro').show()
                    $('#PagamentoPagSeguro').prop( "checked", true )
                  });

                  $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
                  $('.numero_cartao').mask('9999 9999 9999 9999')
                  $('.cvv').attr('placeholder', '999')
                  $('.cvv').mask('999')

                  $('input[name=brand_card]').on('click', function() {
                    let bandeira = $('input[name=brand_card]:checked').val()
                    if (bandeira === 'amex') {
                      $('.numero_cartao').attr('placeholder', '0000 000000 00000')
                      $('.numero_cartao').mask('9999 999999 99999')
                      $('.cvv').attr('placeholder', '0000')
                      $('.cvv').mask('0000')
                    } else if (bandeira === 'diners') {
                      $('.numero_cartao').attr('placeholder', '0000 000000 0000')
                      $('.numero_cartao').mask('9999 999999 9999')
                      $('.cvv').attr('placeholder', '000')
                      $('.cvv').mask('000')
                    } else {
                      $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
                      $('.numero_cartao').mask('9999 9999 9999 9999')
                      $('.cvv').attr('placeholder', '999')
                      $('.cvv').mask('999')
                    }
                  })

                  $(".datepicker").datepicker({
                    dateFormat: 'mm/yy',
                    minDate: new Date(),
                    changeMonth: true,
                    changeYear: true,
                    showButtonPanel: true,
                    monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
                    prevText: '&#x3c;Anterior',
                    nextText: 'Pr&oacute;ximo&#x3e;',
                    weekHeader: 'Sm',
                    currentText: 'Hoje',
                    doneText: 'Ok',
                    closeText: 'Fechar',

                    onClose: function(dateText, inst) {
                      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                      $(this).val($.datepicker.formatDate('mm/yy', new Date(year, month, 1)));
                    },

                    onChangeMonthYear: function (year, month, inst) {
                      $(this).val($.datepicker.formatDate('mm/yy', new Date(year, month - 1, 1)));
                    },

                  })
                  $(".datepicker").focus(function () {
                    $(".ui-datepicker-calendar").hide();
                    $("#ui-datepicker-div").position({
                      my: "center top",
                      at: "center bottom",
                      of: $(this)
                    })
                  })

                  $('.seleciona_debito').hide()
                  $('input[name=meio_pagamento]').on('click', function() {
                    let meio_pagamento = $('input[name=meio_pagamento]:checked').val()
                    let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
                    let vlFrete = $('input[name=frete]').val()
                    vlFrete = parseFloat(vlFrete)

                    let subTotal = $('input[name=total]').val()
                    subTotal = parseFloat(subTotal)
                    console.log(subTotal, vlFrete)

                    let preco_valido = parseFloat(subTotal) + parseFloat(vlFrete)
                    let txt_parcela = preco_valido.toLocaleString('pt-BR', formato)

                    if(meio_pagamento === 'debito') {
                      $('.seleciona_credito').hide()
                      $('.seleciona_debito').show()
                      $('.label_cartao_amex').hide()
                      $('.label_cartao_jcb').hide()
                      $('.label_cartao_discover').hide()
                      $('.label_cartao_diners').hide()
                      $('select[name=num_parcelas] option[value=1]').attr('selected','selected')
                      $('select[name=num_parcelas]').attr('disabled', true)

                      $('.show-parcelas').val("1 x de " + txt_parcela)
                      $('input[name=mobile]').removeAttr('readonly')
                      $('input[name=mobile]').mask('(99)9 9999-9999')
                    } else {
                      $('.seleciona_credito').show()
                      $('.seleciona_debito').hide()
                      $('.label_cartao_amex').show()
                      $('.label_cartao_jcb').show()
                      $('.label_cartao_discover').show()
                      $('.label_cartao_diners').show()
                      $('select[name=num_parcelas]').removeAttr('disabled')
                      $('select[name=num_parcelas] option[value=1]').removeAttr('selected')
                      $('input[name=mobile]').attr('readonly', true)
                    }
                  })

                  $('select[name=num_parcelas]').on('change', function() {
                    let formato = { minimumFractionDigits: 2 }
                    let parcela = $(this).children("option:selected").data('parcelas')
                    let val_parcela = $(this).children("option:selected").data('porparcela')
                    let txt_parcela = parcela + ' x de ' + val_parcela.toLocaleString('pt-br', formato)
                    $('.show-parcelas').val(txt_parcela)
                    $('input[name=installment]').val(val_parcela)
                  })

                  // Pagamento via Cartão
                  $('.efetuar-pagamento').on('click', function() {

                    $('.efetuar-pagamento').attr('disabled', true)
                    $('.efetuar-pagamento').addClass('disabled')
                    $("#modalEnviaPagamento").on('show.bs.modal', function(){
                      $('#modal-message').html('Estamos processando seu pagamento, aguarde...')
                    })
                    $("#modalEnviaPagamento").modal( 'show' )

                    let tipo_pagamento = $('input[name=meio_pagamento]:checked').val()
                    let brand_card = $('input[name=brand_card]:checked').val()
                    let nome_titular = $('input[name=nome_completo]').val()
                    let numero_cartao = $('input[name=numero_cartao]').val()
                    let num_parcelas = $('select[name=num_parcelas] option:selected').val()
                    let installment = $('input[name=installment]').val()
                    let cvv = $('input[name=cvv]').val()
                    let validade = $('[name=validade_cartao]').val()
                    let birthday = $('input[name=birthday]').val()
                    let cpf_cnpj = $('input[name=cpf_cnpj2]').val()
                    let rg =  $('input[name=rg]').val()
                    let order_id =  $('input[name=order_id]').val()
                    let mobile =  $('input[name=mobile]').val()

                    let url = base_url + '/payment/record'
                    let dadosEnvio = ''
                    if (pagseguro_method === 'transparent') {

                      dadosEnvio = {
                        token : token.content,
                        tipo_pagamento :tipo_pagamento,
                        brand_card :brand_card,
                        nome_titular :nome_titular,
                        numero_cartao :numero_cartao,
                        num_parcelas :num_parcelas,
                        cvv :cvv,
                        validade :validade,
                        birthday :birthday,
                        cpf_cnpj :cpf_cnpj,
                        rg: rg,
                        order_id: order_id,
                        mobile: mobile,
                        card_token: card_token,
                        nameHash: nameHash,
                        installment: installment
                      }
                    } else {
                      dadosEnvio = {
                        token : token.content,
                        tipo_pagamento :tipo_pagamento,
                        brand_card :brand_card,
                        nome_titular :nome_titular,
                        numero_cartao :numero_cartao,
                        num_parcelas :num_parcelas,
                        cvv :cvv,
                        validade :validade,
                        birthday :birthday,
                        cpf_cnpj :cpf_cnpj,
                        rg: rg,
                        order_id: order_id,
                        mobile: mobile
                      }
                    }
                    axios.post(url, dadosEnvio ,
                    {
                      headers: {'Accept': 'application/json', 'Content-Type': 'application/json'},
                      crossDomain: true
                    })
                    .then((response)=>{
                      let txt_alert = ''
                      let retorno = response.data;
                      console.log('Retorno do pgto', response)
                      if (retorno.metodo === 'debito') {
                        if(retorno.code === '222') {
                          window.location.href = "{!! route('send.getnet.debit') !!}"
                        } else {
                          window.location.href = retorno.link
                        }
                      }
                      if (retorno.metodo === 'credito') {
                        $('#alert-payment').removeClass('alert-warning')
                        $('#alert-payment').removeClass('alert-danger')
                        $('#alert-payment').addClass('alert-success')
                        $('#alert-payment>span.text-alert').html('Pagamento Aprovado')
                        $('#alert-payment').addClass('show')

                        setTimeout(function() {
                          window.location.href = retorno.link
                        }, 3000);
                      }
                      if (retorno.metodo === 'boleto') {
                        $('#alert-payment').removeClass('alert-warning')
                        $('#alert-payment').removeClass('alert-danger')
                        $('#alert-payment').addClass('alert-success')
                        $('#alert-payment>span.text-alert').html('Boleto gerado')
                        $('#alert-payment').addClass('show')

                        setTimeout(function() {
                          window.location.href = retorno.link
                        }, 3000);
                      }
                      if(retorno.code) {
                        $('#alert-payment').removeClass('alert-success')
                        $('#alert-payment').removeClass('alert-danger')
                        $('#alert-payment').addClass('alert-warning')
                        $('#alert-payment>span.text-alert').html('Seu pagamento enconstra-se em análise pelo PagSeguro. Em breve você receberá um e-mail com o retorno da aprovação.')
                        $('#alert-payment').addClass('show')

                        setTimeout(function() {
                          window.location.href = "{!! route('accounts') !!}"
                        }, 3000);
                      }
                      if (retorno.error) {

                        if (retorno.file) {
                          txt_alert += 'Arquivo ('+retorno.file+') '
                        }
                        if (retorno.line) {
                          txt_alert += 'Linha: ['+retorno.line+'] '
                        }
                        if (retorno.code) {
                          txt_alert += 'Código de retorno: ['+retorno.code+'] '
                        }
                        if (retorno.message) {
                          txt_alert += 'Mensagem: "'+retorno.message+'" '
                        }
                        $('#alert-payment').removeClass('alert-warning')
                        $('#alert-payment').removeClass('alert-success')
                        $('#alert-payment').addClass('alert-danger')
                        $('#alert-payment>span.text-alert').html('Houve falha ao processar seu pagamento => ' + txt_alert)
                        $('#alert-payment').addClass('show')

                        $('.efetuar-pagamento').removeAttr('disabled')
                        $('.efetuar-pagamento').removeClass('disabled')

                        if (retorno.link) {
                          setTimeout(function() {
                            window.location.href = retorno.link
                          }, 3000);
                        } else {
                          $("#modalEnviaPagamento").modal( 'hide' )
                        }

                      }
                    })
                    .catch((error)=>{
                      $('#alert-payment').removeClass('alert-warning')
                      $('#alert-payment').removeClass('alert-success')
                      $('#alert-payment').addClass('alert-danger')
                      $('#alert-payment>span.text-alert').html('Houve falha ao processar seu pagamento.')
                      $('#alert-payment').addClass('show')
                      console.log('Error', error)
                      $('.efetuar-pagamento').removeAttr('disabled')
                      $('.efetuar-pagamento').removeClass('disabled')

                      $("#modalEnviaPagamento").modal( 'hide' )

                      // if (retorno.link) {
                        //   setTimeout(function() {
                          //     window.location.href = retorno.link
                          //   }, 3000);
                          // }

                        })
                      })

                      // ./Pagamento via Cartão
                    })
                  </script>
                  @endsection