@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')
<!-- Modal caso o Cupom esteja vazio -->
<div class="modal fade" id="modalObrigatorio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  
  <!-- Change class .modal-sm to change the size of the modal -->
  <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
    
    
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">Verifique os seguintes campos</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <ol>
          <li>CPF</li>
          <li>Endereço de Cobrança</li>
          <li>Endereço de Entrega</li>
        </ol>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal caso o Cupom esteja vazio -->

<!--Modal: modalEnviaPagamento-->
<div class="modal fade p-5" id="modalEnviaPagamento" tabindex="-1" role="dialog" data-backdrop="false">
  <div class="modal-dialog modal-notify modal-warning" role="document">
    <!--Content-->
    <div class="modal-content text-center">
      <!--Header-->
      <div class="modal-header d-flex justify-content-center">
        <p class="heading">Prossessando pagamento</p>
      </div>
      
      <!--Body-->
      <div class="modal-body">
        
        <i class="fas fa-bell fa-4x animated rotateIn mb-4"></i>
        
        <p> 
          <span class="txtProcessando">Estamos processando seu pagamento, aguarde...</span>
          <div class="spinner-grow text-danger" role="status">
            <span class="sr-only">Carregando...</span>
          </div>
        </p>
        
      </div>
      
      <!--Footer-->
      <div class="modal-footer flex-center">
        Aguarde que esta janela se fechar&aacute; ao concluir o pagamento
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
<!--Modal: modalEnviaPagamento-->

<!-- Modal informativo do Frete -->
<div class="modal fade top" id="modalFrete" tabindex="-1" role="dialog">
  
  <div class="modal-dialog  modal-side modal-bottom-left modal-notify" role="document">
    
    <div class="modal-content">
      <div class="modal-body">
        <div class="row d-flex justify-content-center align-items-center">
          
          <p class="pt-3 pr-2">Valor do Frete: 
            <span class="vl-frete-info badge badge-dark"></span> foi adicionado ao seu Pedido.
          </p>
          
          <button type="button" class="btn btn-success" data-dismiss="modal">Fechar</button>
          
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Modal informativo do Frete -->

<!-- Modal caso o Cupom esteja vazio -->
<div class="modal fade" id="modalCupom" tabindex="-1" role="dialog">
  
  <!-- Change class .modal-sm to change the size of the modal -->
  <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
    
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title w-100" id="myModalLabel">Cupom n&atilde;o preenchido</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Código do Cupom não informado.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Fechar</button>
      </div>
    </div>
  </div>
</div>

<!-- Modal caso o Cupom esteja vazio -->
<section>
  <div class="container dark-grey-text my-2">
    <nav>
      <ol class="breadcrumb grey lighten-4">
        <li>
          <a href="{{ route('home') }}" class="fosco-text font-weight-bold"> 
            <i class="fa fa-home"></i> Home
          </a>
          <i class="fas fa-angle-double-right mx-2"></i>
        </li>
        
        @if($cartCount > 0 && !isset($order))
        
        <li class="breadcrumb-item">
          <a class="fosco-text font-weight-bolder" href="{{ route('cart.index') }}">Carrinho</a>
          <i class="fas fa-angle-double-right mx-2"></i>
        </li>
        
        <li class="active">Pagamento </li>
        @else
        
        <li class="breadcrumb-item">
          <a class="fosco-text font-weight-bolder" href="/accounts/?tab=orders">Pedidos</a>
          <i class="fas fa-angle-double-right mx-2"></i>
        </li>
        
        <li class="opera-text active">Pagamento</li>
        @endif
      </ol>
    </nav>
  </div>
</section>

<section>
  <div class="container">
    
    @if($products->count() >= 0)
    @if(auth()->check())
    @php
    $sobConsulta = 0;
    $cliente = \App\Shop\Customers\Customer::find(auth()->id());
    /* Esta é a primeira compra do cliente  */
    if($cliente->orders->count() === 0) {
      $desconto = (floatVal($subtotal) / 100 * floatVal(config('cart.desconto_iniciante')));
      $valorTotal = floatVal($subtotal) - $desconto;
    } else {
      $desconto = 0;
      $valorTotal = $subtotal;
    }
    @endphp
    
    @endif
    <div class="content card">
      <h4 class="font-weight-bold fosco-text text-center p-3">FINALIZAR COMPRA</h4>
      <div class="card-body">
        
        @if($order_id && isset($order->pagamentos) || isset($order->comprovantes))
        {{-- Pagamento realizado --}}
        <div class="row">
          <div class="col-sm-6 mb-3 mb-md-0">
            <div class="card text-center">
              <div class="card-header">
                <h3>Pedido nº <span class="badge badge-inline badge-info">{{$order->id}}</span></h3>
              </div>
              <div class="card-body">
                <h5 class="card-title">Pagamento Realizado</h5>
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">Meio de Pagamento: {!! ucfirst($order->payment) !!}</li>
                  <li class="list-group-item">Código do pagamento: {{ $order->transaction_id }}</li>
                  <li class="list-group-item">Valor em produtos: {!! number_format($order->total_products, 2, ',','.') !!}</li>
                  <li class="list-group-item">Valor do Frete: {!! number_format($order->total_shipping, 2, ',','.') !!}</li>
                  <li class="list-group-item">Total Pago: {!! number_format($order->total_paid, 2, ',','.') !!}</li>
                  @if($order->pagamentos->count() > 0)
                  <li class="list-group-item">Tipo de pagamento: {!! ucfirst($order->pagamentos->first()->tipo_pagamento) !!}</li>
                  <li class="list-group-item">Bandeira do cartão: {!! ucfirst($order->pagamentos->first()->bandeira) !!}</li>
                  <li class="list-group-item">Número de parcelas: {!! ucfirst($order->pagamentos->first()->num_parcelas) !!}</li>
                  <li class="list-group-item">Código da autorização: {!! ucfirst($order->pagamentos->first()->transaction_id) !!}</li>
                  @endif
                  @if($order->comprovantes->count() > 0)
                  <li class="list-group-item">Pagamento por transfer&ecirc;ncia</li>
                  @foreach ($order->comprovantes as $comprovante)
                  
                  <li class="list-group-item">Comprovante: <img src="{{ asset('storage/'.$comprovante->src) }}" alt="" class="img-fluid"></li>
                  <li class="list-group-item">Link: <a href="{{ asset('storage/'.$comprovante->src) }}" class="black-text">Visualizar</a></li>
                  
                  @endforeach
                  @endif
                </ul>
              </div>
              <div class="card-footer text-muted">
                @if($order->pagamentos->count() > 0)
                Pedido pago em: <span class="badge badge-primary badge-lg">{!! \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $order->pagamentos->first()->created_at)->format('d/m/Y H:i') !!}</span>
                @endif
              </div>
            </div>
          </div>
          <div class="col-sm-6 mb-3 mb-md-0">
            <div class="card text-center">
              <div class="card-header">
                <h3>Dados do Pedido</h3>
              </div>
              <div class="card-body">
                <ul class="list-group list-group-flush">
                  @foreach ($order->products as $produto)
                  <li class="list-group-item">Nome: {!! $produto->name !!}</li>
                  <li class="list-group-item">SKU: {!! $produto->sku !!}</li>
                  <li class="list-group-item">Valor unitário:
                    @if ($produto->sales_price)
                    {!! number_format($produto->sales_price, 2, ',','.') !!}
                    @else
                    {!! number_format($produto->price, 2, ',','.') !!}
                    @endif
                  </li>
                  @endforeach
                </ul>
              </div>
              <div class="card-footer text-muted">
                Pedido criado em: <span class="badge badge-primary badge-lg">{!! \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $order->created_at)->format('d/m/Y H:i') !!}</span>
              </div>
            </div>
          </div>
        </div>
        
        @else
        @if ($order_id)
        @php
        $apenas_pgto = true;
        @endphp
        @else
        @php
        $apenas_pgto = false;
        @endphp
        @endif
        
        <div class="row">
          
          <div class="col-lg-8 mb-4">
            <!-- Horizontal Steppers -->
            
            <!-- Stepers Wrapper -->
            <ul class="stepper stepper-horizontal">
              
              <!-- Quarto Passo -->
              <li class="@if(!$apenas_pgto)active @endif" id="seqCadastro">
                <a href="#!">
                  <span class="circle">1</span><br>
                  <span class="label">Cadastro</span>
                </a>
              </li>
              
              <!-- Quinto Passo -->
              <li class="@if($apenas_pgto)active @endif" id="seqPagamento">
                <a href="#!" >
                  <span class="circle">2</span><br>
                  <span class="label">Pagamento</span>
                </a>
              </li>
              
              <!-- Sexto passo -->
              <li id="seqEnviaPagamento">
                <a href="#!" >
                  <span class="circle">3</span><br>
                  <span class="label">Conclusão</span>
                </a>
              </li>
              
            </ul>
            <!-- /.Stepers Wrapper -->
            
            <!-- /.Horizontal Steppers -->
            <form action="" method="post" id="formPagamento">
              {{ csrf_field() }}
              <div class="tab-content">
                
                <div class="tab-pane fade @if(!$apenas_pgto)show active @endif" id="cadastro" role="tabpanel">
                  <div class="card">
                    <h5 class="card-header text-center py-4 mb-3">
                      <strong>Confira os dados de seu cadastro</strong>
                    </h5>
                    
                    
                    <div class="card-body">
                      
                      <div class="row">
                        
                        <div class="col-md">
                          <label for="nome" class="font-weight-bold fosco-text">Nome:</label>
                          <input type="text" id="nome" name="name" class="form-control disabled" value="{{ auth()->user()->name }}" readonly>
                        </div>
                        
                        <div class="col-md">
                          <label for="email" class="font-weight-bold fosco-text">E-mail:</label>
                          <input type="email" id="email" name="email" class="form-control disabled" value="{{ auth()->user()->email }}" readonly>
                        </div>
                        
                      </div>
                      
                      <div class="my-3">
                        <label for="tipoPessoa" class="font-weight-bold fosco-text">Tipo de pessoa:</label>
                        <select class="browser-default custom-select" name="pessoa" id="tipoPessoa">
                          <option selected value="0">Pessoa Física</option>
                          <option value="1">Jurídica</option>
                          <option value="">Extrangeira</option>
                        </select>
                      </div>
                      
                      <div class="my-3">
                        <label data-tipo="cpf_cnpj" class="font-weight-bold fosco-text">CPF <span class="red-text">*</span></label>
                        <input type="text" id="cpf_cnpj" name="cpf_cnpj" value="{{ auth()->user()->cpf_cnpj }}" class="form-control">
                      </div>
                      
                      
                      @if(isset($addresses) && $addresses->count() > 0 )
                      
                      <div class="local-entrega mt-4">
                        @foreach ($addresses as $address)
                        <div class="col-lg border rounded p-3 my-2">
                          <div class="custom-control custom-radio">
                            <input class="custom-control-input" type="radio" name="end_cobranca" id="cobranca_{{ $address->id }}" 
                            value="{{ $address->id }}"  required @if(isset($order_id) && $entrega === $address->id) checked @endif>
                            <label class="custom-control-label h4 fosco-text" for="cobranca_{{ $address->id }}">{{ $address->alias }} (Cobrança)</label>
                          </div>
                          
                          <div class="local p-3">
                            <span class="font-weight-bold red-text">
                              <i class="fas fa-angle-right"></i>
                              {{ $address->address_1 }}, {{ $address->numero }} @if ($address->address_2) - 
                              {{ $address->address_2 }}@endif CEP: {{ $address->zip }} - {{ $address->cidade->nome_municipio }}/{{$address->cidade->uf}}
                            </span>
                          </div>
                          
                        </div>
                        @endforeach
                        
                      </div>
                      
                      @endif
                      
                      @if(!$order_id)
                      <p class="font-weight-bold text-right p-3 mb-0">
                        <a href="{{ route('customer.address.create', auth()->user()->id) }}" 
                          class="btn btn-md btn-rounded red darken-3 white-text font-weight-bolder">
                          Adicionar novo endereço<i class="fas fa-plus-circle ml-2"></i>
                        </a>
                      </p>
                      @endif

                      <a href="#!" class="btn box-green font-weight-bold btn-block no-rounded ativa-pagamento">Próximo 
                        <i class="fas fa-arrow-right ml-1"></i>
                      </a>
                      
                    </div>
                  </div>
                </div>
                
                <div class="tab-pane fade @if($apenas_pgto)show active @endif" id="pagamento" role="tabpanel">
                  
                  <div class="panel panel-default credit-card-box">
                    <table class="table-responsive w-100 ml-3">
                      @php
                      $pagamentos = explode(',', config('payees.name'));
                      @endphp
                      
                      <tbody>
                        @foreach ($pagamentos as $pagamento)
                        
                        @if ($pagamento === 'bank-transfer')
                        <tr>
                          <th>
                            <div class="custom-control custom-radio">
                              <input class="form-check-input" type="radio" name="tipo_pagamento" id="tipo_pagamento_{{ $pagamento }}" 
                              value="{{ $pagamento }}">
                              <label class="custom-control-label font-weight-bold h6 pointer" for="tipo_pagamento_{{ $pagamento }}">
                                <img class="mx-4 pr-1" height="75" src="{{ asset('storage/images/transferencia.png') }}"> 
                                Transferência Bancária
                              </label>
                            </div>
                          </th>
                        </tr>
                        @endif
                        
                        @endforeach
                      </tbody>
                      
                      <tfoot class="d-none">
                        <tr>
                          <th>
                            <input type="hidden" name="tipoPagamentoEnvia" >
                            <a href="#!" class="btn btn-primary btn-lg btn-block" id="concluirPagamento">
                              Próximo
                            </a>
                            <a href="#!" id="concluirPagamentoReal">
                              
                            </a>
                          </th>
                        </tr>
                      </tfoot>
                    </table>
                  </div>
                  
                </div>
                
                <div class="tab-pane fade" id="enviaPagamento" role="tabpanel">
                  <input type="hidden" name="items" value="{{ $products }}">
                  {{-- Para o endereço --}}
                  <input type="hidden" name="address_id" value="@if($order_id){!! $order->address->id !!}@endif">
                  <input type="hidden" name="entrega_id" value="@if($order_id && $order->entrega){!! $order->entrega->id !!}@endif">
                  <input type="hidden" name="frete" value="@if($order_id){!! $order->total_shipping !!}@endif">
                  <input type="hidden" name="postalCode" value="@if($order_id){!! $order->address->zip !!}@endif">
                  <input type="hidden" name="street" value="@if($order_id){!! $order->address->address_1 !!}@endif">
                  <input type="hidden" name="number" value="@if($order_id){!! $order->address->numero !!}@endif">
                  <input type="hidden" name="district" value="@if($order_id){!! $order->address->address_2 !!}@endif">
                  <input type="hidden" name="city" value="@if($order_id){!! $order->address->cidade->nome_municipio !!}@endif">
                  <input type="hidden" name="state" value="@if($order_id){!! $order->address->cidade->uf !!}@endif">
                  <input type="hidden" name="country" value="BRA">
                  <input type="hidden" name="type" value="@if($order_id){!! $order->courier_id !!}@endif">
                  <input type="hidden" name="cost" value="@if($order_id){!! $order->total_shipping !!}@endif">
                  <input type="hidden" name="discount" value="@if($order_id){!! $order->discounts !!}@elseif($desconto > 0){!! $desconto !!}@endif">
                  <input type="hidden" name="order_id" value="{!! ($order_id) ?? null !!}">
                  {{-- Para o comprador --}}
                  <input type="hidden" name="email" value="{{ auth()->user()->email }} ">
                  <input type="hidden" name="name" value="{{ auth()->user()->name }}">
                  <input type="hidden" name="document_number" value="{{ auth()->user()->cpf_cnpj }}">
                  <input type="hidden" name="document_type" value="CPF">
                  <input type="hidden" name="document_phone">
                  
                  <div id="incluiBankTransfer" style="display: none;">
                    @include(config('site.domain').'.front.payments.bank-transfer')
                  </div>
                  <div id="incluiBankTransfer" style="display: none;">
                    @include(config('site.domain').'.front.payments.bank-transfer')
                  </div>
                  <div id="incluiCielo" style="display: none;">
                    {{-- @include(config('site.domain').'.front.payments.form-payment', ['gateway' => 'cielo', 'products' => $products, 'total' => $total]) --}}
                  </div>
                  <div id="incluiPagseguro" style="display: none;">
                    {{-- @include(config('site.domain').'.front.payments.pagseguro') --}}
                  </div>
                  <div id="incluiPaypal" style="display: none;">
                    {{-- @include(config('site.domain').'.front.payments.paypal') --}}
                  </div>
                  <div id="incluiStripe" style="display: none;">
                    {{-- @include(config('site.domain').'.front.payments.stripe') --}}
                  </div>
                </div>
                
              </div>
            </form>
          </div>
          
          
          <div class="col-lg-4 mb-4">
            
            <div class="card">
              
              <div class="card-body">
                <h4 class="mb-4 mt-1 h5 text-center font-weight-bold">Sumário</h4>
                
                <hr>
                @foreach($products as $product)
                <dl class="row">
                  <dd class="col-sm-8">
                    {{ $product->name }}
                  </dd>
                  <dd class="col-sm-4">
                    {{ config('cart.currency_symbol') }} {{ number_format($product->price, 2, ',', '.') }}
                  </dd>
                </dl>
                <hr>
                <input type="hidden" name="peso_total" value="{{ floatVal($product->weight) }}">
                @php
                $product = \App\Shop\Products\Product::find($product->id);
                if ($product->sob_consulta === 1){
                  $sobConsulta = 1;
                }
                @endphp
                @endforeach
                <input type="hidden" name="sob_consulta" value="{{ $sobConsulta }}">
                <dl class="row">
                  <dt class="col-sm-8">
                    Sub Total
                  </dt>
                  <dt class="col-sm-4">
                    {{ config('cart.currency_symbol') }} {{ number_format(floatVal($subtotal), 2, ',', '.') }}
                    <input type="hidden" name='total' value="{{ floatVal($valorTotal) }}">
                  </dt>
                </dl>
                <hr>
                <dl class="row">
                  <dd class="col-sm-8">
                    Descontos
                  </dd>
                  <dd class="col-sm-4">
                    
                    <span class="text-success">{{ config('cart.currency_symbol') }}<span class="valorPromocao"> {{$desconto}} </span></span>
                    <input type="hidden" name="id_voucher">
                  </dd>
                </dl>
                @if (!isset($order_paid) || $order_paid > 1)
                @if(config('possui_descontos_ls'))
                <dl class="row">
                  
                  {{ csrf_field() }}
                  <dd class="col-sm-12">
                    <!-- Promo code -->
                    <input type="text" class="form-control" placeholder="Código Promocional" aria-label="Código Promocional"  aria-describedby="basic-addon2" name="codigoVoucher">
                  </dd>
                  <dd class="col-sm-12">
                    <button class="btn btn-success btn-md waves-effect" type="button" id="resgatar">Resgatar</button>
                  </dd>
                  
                </dl>
                @endif
                <!-- Promo code -->
                @endif
                
                <hr>
                
                <dl class="row">
                  <dd class="col-sm-8">
                    Frete
                  </dd>
                  <dd class="col-sm-4">
                    <span id="valorFrete">{{ config('cart.currency_symbol') }} @if($valorFrete) {{ number_format($valorFrete, 2, ',', '.') }} @else 0,00 @endif</span>
                  </dd>
                </dl>
                <hr>
                
                <dl class="row">
                  <dt class="col-sm-8">
                    Total
                  </dt>
                  <dt class="col-sm-4">
                    <span id="valorTotal">{{ config('cart.currency_symbol') }} @if($valorFrete) {{ number_format(floatVal($valorFrete) + floatVal($valorTotal), 2, ',', '.') }} @else {{ number_format(floatVal($valorTotal), 2, ',', '.') }} @endif</span>
                  </dt>
                </dl>
              </div>
              
            </div>
            
            
          </div>
        </div>
        
        
        @endif
      </div>
      
    </div>
    @endif
  </div>
</section>

@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>

<script type="text/javascript">
  function TestaCPF(cpf) {
    cpf = cpf.replace(/[^\d]+/g,'');
    if(cpf == '') return false;
    // Elimina CPFs invalidos conhecidos
    if (cpf.length != 11 ||
    cpf == "00000000000" ||
    cpf == "11111111111" ||
    cpf == "22222222222" ||
    cpf == "33333333333" ||
    cpf == "44444444444" ||
    cpf == "55555555555" ||
    cpf == "66666666666" ||
    cpf == "77777777777" ||
    cpf == "88888888888" ||
    cpf == "99999999999")
    return false;
    // Valida 1o digito
    add = 0;
    for (i=0; i < 9; i ++)
    add += parseInt(cpf.charAt(i)) * (10 - i);
    rev = 11 - (add % 11);
    if (rev == 10 || rev == 11)
    rev = 0;
    if (rev != parseInt(cpf.charAt(9)))
    return false;
    // Valida 2o digito
    add = 0;
    for (i = 0; i < 10; i ++)
    add += parseInt(cpf.charAt(i)) * (11 - i);
    rev = 11 - (add % 11);
    if (rev == 10 || rev == 11)
    rev = 0;
    if (rev != parseInt(cpf.charAt(10)))
    return false;
    return true;
  }
  
  var token = document.head.querySelector('meta[name="csrf-token"]')
  axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
  
  $(document).ready(function(){
    $('input[name=cpf_cnpj]').mask('999.999.999-99')
    $('.numero_cartao').mask('9999 9999 9999 9999')
    $('.validade').mask('99/9999')
    $('.cvv').mask('999')
    
    $('div.master-card').on('click', function(){
      $('input[value=master]').attr('checked', true)
      $('input[value=amex]').removeAttr('checked')
      $('input[value=aura]').removeAttr('checked')
      $('input[value=discover]').removeAttr('checked')
      $('input[value=diners]').removeAttr('checked')
      $('input[value=elo]').removeAttr('checked')
      $('input[value=jcb]').removeAttr('checked')
      $('input[value=visa]').removeAttr('checked')
      $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
      $('.numero_cartao').mask('9999 9999 9999 9999')
      $('.cvv').attr('placeholder', '000')
      $('.cvv').mask('999')
    })
    
    $('div.visa').on('click', function(){
      $('input[value=visa]').attr('checked', true)
      $('input[value=amex]').removeAttr('checked')
      $('input[value=aura]').removeAttr('checked')
      $('input[value=discover]').removeAttr('checked')
      $('input[value=diners]').removeAttr('checked')
      $('input[value=elo]').removeAttr('checked')
      $('input[value=jcb]').removeAttr('checked')
      $('input[value=master]').removeAttr('checked')
      $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
      $('.numero_cartao').mask('9999 9999 9999 9999')
      $('.cvv').attr('placeholder', '000')
      $('.cvv').mask('999')
    })
    
    $('div.elo').on('click', function(){
      $('input[value=elo]').attr('checked', true)
      $('input[value=amex]').removeAttr('checked')
      $('input[value=aura]').removeAttr('checked')
      $('input[value=discover]').removeAttr('checked')
      $('input[value=diners]').removeAttr('checked')
      $('input[value=jcb]').removeAttr('checked')
      $('input[value=master]').removeAttr('checked')
      $('input[value=visa]').removeAttr('checked')
      $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
      $('.numero_cartao').mask('9999 9999 9999 9999')
      $('.cvv').attr('placeholder', '000')
      $('.cvv').mask('999')
    })
    
    $('div.diners').on('click', function(){
      $('input[value=diners]').attr('checked', true)
      $('input[value=amex]').removeAttr('checked')
      $('input[value=aura]').removeAttr('checked')
      $('input[value=discover]').removeAttr('checked')
      $('input[value=elo]').removeAttr('checked')
      $('input[value=jcb]').removeAttr('checked')
      $('input[value=master]').removeAttr('checked')
      $('input[value=visa]').removeAttr('checked')
      $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
      $('.numero_cartao').mask('9999 9999 9999 9999')
      $('.cvv').attr('placeholder', '000')
      $('.cvv').mask('999')
    })
    
    $('div.discover').on('click', function(){
      $('input[value=discover]').attr('checked', true)
      $('input[value=amex]').removeAttr('checked')
      $('input[value=aura]').removeAttr('checked')
      $('input[value=diners]').removeAttr('checked')
      $('input[value=elo]').removeAttr('checked')
      $('input[value=jcb]').removeAttr('checked')
      $('input[value=master]').removeAttr('checked')
      $('input[value=visa]').removeAttr('checked')
      $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
      $('.numero_cartao').mask('9999 9999 9999 9999')
      $('.cvv').attr('placeholder', '000')
      $('.cvv').mask('999')
    })
    
    $('div.jcb').on('click', function(){
      $('input[value=jcb]').attr('checked', true)
      $('input[value=master]').removeAttr('checked')
      $('input[value=amex]').removeAttr('checked')
      $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
      $('.numero_cartao').mask('9999 9999 9999 9999')
      $('.cvv').attr('placeholder', '000')
      $('.cvv').mask('999')
    })
    
    $('div.aura').on('click', function(){
      $('input[value=aura]').attr('checked', true)
      $('input[value=master]').removeAttr('checked')
      $('input[value=amex]').removeAttr('checked')
      $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
      $('.numero_cartao').mask('9999 9999 9999 9999')
      $('.cvv').attr('placeholder', '000')
      $('.cvv').mask('999')
    })
    
    $('div.amex').on('click', function(){
      $('input[value=amex]').attr('checked', true)
      $('input[value=master]').removeAttr('checked')
      $('input[value=visa]').removeAttr('checked')
      $('.numero_cartao').attr('placeholder', '0000 000000 00000')
      $('.numero_cartao').mask('9999 999999 99999')
      $('.cvv').attr('placeholder', '0000')
      $('.cvv').mask('0000')
    })
    
    $('#tipoPessoa').on('change', function(){
      let tipo = $('#tipoPessoa option:selected').val()
      $('input[name=cpf_cnpj]').unmask()
      $('input[name=cpf_cnpj]').val('')
      if( tipo === '0'	) {
        $('span[data-tipo=cpf_cnpj]').html('CPF <span class="red-text">*</span>')
        $('input[name=cpf_cnpj]').attr('placeholder', 'XX.XXX.XXX-XX')
        $('input[name=cpf_cnpj]').mask('999.999.999-99')
        $('input[name=document_type]').val('CPF')
      } else if( tipo === '1' ) {
        $('span[data-tipo=cpf_cnpj]').html('CNPJ <span class="red-text">*</span>')
        $('input[name=cpf_cnpj]').attr('placeholder', 'XX.XXX.XXX/XXXX-XX')
        $('input[name=cpf_cnpj]').mask('99.999.999/9999-99')
        $('input[name=document_type]').val('CNPJ')
      } else {
        $('span[data-tipo=cpf_cnpj]').html('Passport')
        $('input[name=cpf_cnpj]').attr('placeholder', 'Passport')
        $('input[name=cpf_cnpj]').unmask()
        $('input[name=document_type]').val('Passport')
      }
    })
    
    $('input[name=cpf_cnpj]').on('blur', function(){
      let tipoPessoa = $('#tipoPessoa option:selected').val()
      let strCPF = $('input[name=cpf_cnpj]').val();
      let testCPF = TestaCPF(strCPF)
      console.log(testCPF)
      if(testCPF === false && tipoPessoa === "0") {
        $("#modalAviso").on('show.bs.modal', function() {
          $('.modal-title').empty()
          $('.modal-title').html('CPF Inv&aacute;lido!!!')
          $('.modal-body').html('O n&uacute;mero do CPF, não &eacute; v&aacute;lido.')
        });
        $("#modalAviso").modal('show')
      } else {
        $('input[name=document_number]').val($(this).val())
      }
    })
    
    $('.ativa-pagamento').on('click', function(e){
      let tipoPessoa = $('#tipoPessoa option:selected').val()
      let cpf_cnpj = $('input[name=cpf_cnpj]').val()
      let cobranca = $('input[name=end_cobranca]:checked').val()
      let testCPF = TestaCPF(cpf_cnpj)
      e.preventDefault()
      
      if(testCPF === false && tipoPessoa === "0") {
        console.log('entra no modal')
        $("#modalAviso").on('show.bs.modal', function() {
          $('.modal-title').empty()
          $('.modal-title').html('CPF Inv&aacute;lido!!!')
          $('.modal-body').html('O n&uacute;mero do CPF, não &eacute; v&aacute;lido.')
        });
        $("#modalAviso").modal('show')
        return false
      }
      console.log({'CPF':cpf_cnpj, 'Cobranca': cobranca})
      if(cobranca === 'undefined' || cobranca === '' || cpf_cnpj === '') {
        $('#modalObrigatorio').modal( 'show' )
        return false
      } else {
        let url = "{!! url('customer/update') !!}"
        let customer_id = "{!! auth()->id() !!}"
        axios.post(url, {
          token          : token,
          customer_id    : parseInt(customer_id),
          cpf_cnpj       : cpf_cnpj
        },
        {
          headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/json'},
          crossDomain: true
        })
        .then((response)=>{
          console.log('Status', response.status)
          $('#modalAviso').on('show.bs.modal', function (event) {
            var modal = $(this)
            modal.find('.modal-title').text('Informações gravadas')
            modal.find('.modal-body #modal-message').html('Prossiga com o pagamento.')
          })
          //$('#modalAviso').modal( 'show' )
          
        }).catch((error)=>{
          console.log('Error', error)
        })
        $('#pagamento').addClass('active')
        $('#seqPagamento>span.label').addClass('text-success')
        $('#seqPagamento').addClass('active')
        $('#cadastro').removeClass('show').removeClass('active').addClass('in')
        $('#pagamento').addClass('show').addClass('active')
      }
    })
    
    $('input[name=meio_pagamento]').on('click', function() {
      let meio_pagamento = $('input[name=meio_pagamento]:checked').val()
      let formato = { minimumFractionDigits: 2 }
      let vlFrete = $('input[name=frete]').val()
      vlFrete = parseFloat(vlFrete)
      
      let subTotal = $('input[name=total]').val()
      subTotal = parseFloat(subTotal)
      
      let preco_valido = parseFloat(subTotal) + parseFloat(vlFrete)
      let txt_parcela = preco_valido.toLocaleString('pt-BR', formato)
      if(meio_pagamento === 'debito') {
        $('select[name=num_parcelas] option[value=1]').attr('selected','selected')
        $('select[name=num_parcelas]').attr('disabled', true)
        
        $('.show-parcelas').val(txt_parcela)
        $('input[name=mobile]').removeAttr('readonly')
        $('input[name=mobile]').mask('(99)9 9999-9999')
      } else {
        $('select[name=num_parcelas]').removeAttr('disabled')
        $('select[name=num_parcelas] option[value=1]').removeAttr('selected')
        $('input[name=mobile]').attr('readonly', true)
        $('input[name=mobile]').val("")
      }
    })
    
    $('input[name=tipo_pagamento]').on('click', function() {
      let tipo_pagamento = $(this).val()
      let end_cobranca = $('input[name=end_cobranca]:checked').val()
      
      if(tipo_pagamento !== '' && tipo_pagamento !== 'undefined') {
        $('#tabEnviaPagamento').addClass('active')
        $('#tabEnviaPagamento>a>span.label').addClass('piccolino-text')
        
        $('#concluirPagamentoReal').attr( 'href', '#enviaPagamento')
        $('#concluirPagamentoReal').attr( 'data-toggle', 'tab')
        $('#concluirPagamentoReal').attr( 'role', 'tab')
        $('#concluirPagamentoReal').trigger("click")
        
        if(tipo_pagamento === 'bank-transfer') {
          $('#incluiBankTransfer').show()
          $('#incluiCielo').hide()
          $('#incluiPagseguro').hide()
          $('#incluiPaypal').hide()
          $('#incluiStripe').hide()
          $('#formPagamento').attr('method', "POST")
          $('#formPagamento input[name=billing_address]').val(end_cobranca)
          $('#formPagamento').attr('action', "{{ route('bank-transfer.store') }}")
        } else if (tipo_pagamento === 'cielo') {
          $('#incluiCielo').show()
          $('#incluiBankTransfer').hide()
          $('#incluiPagseguro').hide()
          $('#incluiPaypal').hide()
          $('#incluiStripe').hide()
          $('#formPagamento').attr('method', "POST")
          $('#formPagamento input[name=billing_address]').val(end_cobranca)
          $('#formPagamento').attr('action', "{{ route('cielo.storenew') }}")
        } else if (tipo_pagamento === 'pagseguro') {
          $('#incluiPagseguro').removeAttr('style')
          $('#incluiPagseguro').show()
          $('#incluiCielo').hide()
          $('#incluiBankTransfer').hide()
          $('#incluiPaypal').hide()
          $('#incluiStripe').hide()
        } else if (tipo_pagamento === 'paypal') {
          $('#incluiPaypal').show()
          $('#incluiPagseguro').hide()
          $('#incluiCielo').hide()
          $('#incluiBankTransfer').hide()
          $('#incluiStripe').hide()
        } else if (tipo_pagamento === 'stripe') {
          $('#incluiStripe').show()
          $('#incluiPaypal').hide()
          $('#incluiPagseguro').hide()
          $('#incluiCielo').hide()
          $('#incluiBankTransfer').hide()
        }
      }
    })
    
    $('input[name=end_cobranca]').on('click', function(){
      let cobranca = $('input[name=end_cobranca]:checked').val()
      $('input[name=address_id]').val(cobranca)
    })
    
    $('#cielo').on('click', function(){
      $('#formPagamento').attr('action', "{{ route('cielo.index') }}")
    })
    $('#bank-transfer').on('click', function(){
      $('.formPagamento').attr('action', "{{ route('bank-transfer.index') }}")
    })
    $('#stripe').on('click', function(){
      $('#formPagamento').attr('action', "{{ route('checkout.execute') }}")
    })
    
    $('.btn-pagseguro').on('click', function() {
      $('#adicionandoCarrinho').modal( 'show' )
      
      $('#adicionandoCarrinho').on('shown.bs.modal', function (event) {
        var modal = $(this)
        modal.find('.modal-title').text('Redirecionando para o PagSeguro')
        $(this).modal({
          backdrop: 'static'
        })
      })
      
      let items = $('input[name=items]').val()
      let postalCode = $('input[name=postalCode]').val()
      let cost = $('input[name=frete]').val()
      let street = $('input[name=street]').val()
      let number = $('input[name=number]').val()
      let district = $('input[name=district]').val()
      let city = $('input[name=city]').val()
      let state = $('input[name=state]').val()
      let country = $('input[name=country]').val()
      let type = $('input[name=type]').val()
      let cpf_cnpj = $('input[name=cpf_cnpj]').val()
      let document_type = $('input[name=document_type]').val()
      let address_id = $('input[name=address_id]').val()
      let entrega_id = $('input[name=entrega_id]').val()
      let order_id = $('input[name=order_id]').val()
      
      let body = {items: items, cost: cost, postalCode: postalCode, street: street, number: number, district: district, city: city, state: state, country: country, type: type, cpf_cnpj: cpf_cnpj, document_type: document_type, address_id: address_id, entrega_id: entrega_id, order_id: order_id}
      
      axios({
        method: 'post',
        url: "{!! url('pagseguro/envia-pagamento') !!}",
        data: body
      })
      .then(function (response) {
        let code = response.data.code
        let pedido_id = response.data.pedido.id
        console.log(response.data, pedido_id);
        
        let callback = {
          success : function(transactionCode) {
            //Insira os comandos para quando o usuário finalizar o pagamento.
            //O código da transação estará na variável "transactionCode"
            console.log("Compra feita com sucesso, código de transação: " + transactionCode)
            axios({
              method: 'get',
              url: "api/pagseguro/confirm/"+code+"/"+transactionCode
            }).then(function (responseC) {
              console.log(responseC)
              
            })
            .catch(function(error) {
              console.log(error)
            })
          },
          abort : function() {
            //Insira os comandos para quando o usuário abandonar a tela de pagamento.
            console.log("abortado")
          }
        }
        $('#adicionandoCarrinho').modal( 'hide' )
        //Chamada do lightbox passando o código de checkout e os comandos para o callback
        let isOpenLightbox = PagSeguroLightbox(code, callback)
        // Redireciona o comprador, caso o navegador não tenha suporte ao Lightbox
        if (!isOpenLightbox){
          $(location).href="https://pagseguro.uol.com.br/v2/checkout/payment.html?code=" + code
        }
        
        $('#enviaPagamento').removeClass('active').removeClass('show').addClass('in')
        $('#resultadoPagamento').addClass('show').addClass('active')
      })
      .catch(function (error) {
        console.log(error);
      })
      
    })
    
    $('#resgatar').on('click', function(e){
      let voucher = $('input[name=codigoVoucher]').val()
      let valorPedido = $('input[name=total]').val()
      if(voucher === ''){
        $('#modalCupom').modal('show')
      } else {
        e.preventDefault();
        $.ajaxSetup({
          headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
          }
        });
        $.ajax({
          url: "{{ url('api/voucher/findByString') }}",
          method: 'post',
          data: {
            voucher: voucher,
            nome: voucher
          },
          success: function(result){
            /*
            Documentação:
            tipo {
              I = Índice (percentual)
              P = Produto (percentual) - precisa ler também, qual o item está associado ou age em qq item, mas uma única vez (promoção de primeira compra)
              V = Valor do produto
              F = Frete Gratis
              Se o campo qtde = '-1', isto quer dizer que não existe limite para usar
              Observar o campo valor mínimo e o campo da data de validade do cumpom, mesmo que já esteja validado no sistema
            }
            */
            if(result.total > 0) {
              $(".codigo").html(result.data.voucher)
              $('input[name=id_voucher]').val(result.data.id)
              $('input[name=discount]').val(result.data.valor)
              let novoValor = valorPedido
              let valorDesconto = 0.00
              if(result.data.tipo === 'I') {
                valorDesconto = valorPedido * (result.data.valor / 100)
              }
              novoValor = valorPedido - valorDesconto
              // console.log(result.data, valorPedido, novoValor, valorDesconto)
              $(".valorPromocao").html(valorDesconto.toLocaleString('pt-BR'))
              $(".novoValor").html(novoValor.toLocaleString('pt-BR'))
              $("input[name=total]").val(novoValor.toLocaleString('pt-BR'))
              $('#modalVoucher').modal('show')
            }
          }
        })
      }
    })
    
    $(".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'],
      nextText: 'Próximo',
      prevText: 'Anterior',
      weekHeader: 'Semana',
      currentText: 'Hoje',
      doneText: 'Ok',
      
      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)
      })
    })
    
    $('select[name=num_parcelas]').on('change', function(){
      let formato = { minimumFractionDigits: 2 }
      let parcela = $('select[name=num_parcelas] option:selected').data('parcelas')
      let val_parcela = $('select[name=num_parcelas] option:selected').data('por-parcela')
      let txt_parcela = parcela + ' x de ' + val_parcela.toLocaleString('pt-BR', formato)
      $('.show-parcelas').val(txt_parcela)
      console.log(parcela, val_parcela)
    })
    
    $('.finalizar-compra>button[type=submit]').on('click', function(e){
      e.preventDefault()
      let textModal = ''
      let order_id = $('input[name=order_id]').val()
      let meio_pagamento = $('input[name=meio_pagamento]:checked').val()
      let brand_card = $('input[name=brand_card]:checked').val()
      let nome_completo =$('input[name=nome_completo]').val()
      let birthday =$('input[name=birthday]').val()
      let numero_cartao =$('input[name=numero_cartao]').val()
      let cvv =$('input[name=cvv]').val()
      let validade_cartao =$('input[name=validade_cartao]').val()
      let num_parcelas =$('select[name=num_parcelas] option:selected').val()
      let num_documento =$('input[name=rg]').val()
      let cpf_cnpj =$('input[name=cpf_cnpj]').val()
      let mobile =$('input[name=mobile]').val()
      let error = false
      
      /* if(meio_pagamento === 'debito' && mobile === '') {
        error = true
        textModal += 'Preencha o n&aacute;mero do celular <br>'
      }
      if(meio_pagamento === '') {
        error = true
        textModal += 'Selecione se &eacute; cr&eacute;dito ou d&eacute;bito <br>'
      }
      if(brand_card === '') {
        error = true
        textModal += 'Selecione a bandeira de seu cart&atilde;o <br>'
      }
      if(nome_completo === '') {
        error = true
        textModal += 'Preencha o nome do titular do cart&atilde;o <br>'
      }
      if(birthday === '') {
        error = true
        textModal += 'Preencha a data de anivers&aacute;rio do titular <br>'
      }
      if(numero_cartao === '') {
        error = true
        textModal += 'Preencha o n&uacute;mero do cart&atilde;o <br>'
      }
      if(cvv === '') {
        error = true
        textModal += 'Informe o c&oacute;digo de seguran&ccedil;a do cart&atilde;o <br>'
      }
      if(validade_cartao === '') {
        error = true
        textModal += 'Informe data de validade do cart&atilde;o <br>'
      }
      if(num_parcelas === '') {
        error = true
        textModal += 'Selecione o n&uacute;mero de parcelas <br>'
      }
      if(cpf_cnpj === '') {
        error = true
        textModal += 'Informe o CPF / CNPJ do titular do cart&atilde;o <br>'
      }
      if(num_documento === '') {
        error = true
        textModal += 'Informe o n&uacute;mero do documento do Titular do cart&atilde;o <br>'
      } */
      
      $("#modalAviso").on('show.bs.modal', function(){
        $('#modalAviso').find('#modalAvisoLabel').html('Reveja os campos')
        $('#modalAviso').find("#modal-message").html(textModal)
      });
      
      $("#modalEnviaPagamento").on('show.bs.modal', function(){
        $('#modal-message').html('Estamos processando seu pagamento, aguarde...')
      });
      
      if(error) {
        $('#modalAviso').modal( 'show' )
      } else {
        $('#modalEnviaPagamento').modal( 'show' )
        $('#formPagamento').submit();
      }
    })
  })
</script>
@endsection