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

<link href="{{ asset('css/jquery-ui.min.css') }}" rel="stylesheet">
@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-->
<div class="container my-5">
  <div class="row">
    <div class="col-lg">
      <div id="alert-payment" class="alert alert-warning alert-dismissible fade show" role="alert">
        <span class="text-alert">
          <p>Ao clicar no botão abaixo, você será redirecionado para uma ambiente seguro da Cielo para efetuar seu pagamento.</p>
          <p>A tela será aberta por cima desta.</p>
          <p>Se o seu navegador possui bloqueador de pop-up, verifique a informação que aparecerá na parte superior ao lado da nossa URL.</p>
        </span>
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <button type="button"
      class="mb-1 btn btn-block box-green font-weight-bold waves-effect waves-light white-text pagamento-Cielo">
      Concluir Pedido e efetuar Pagamento <i class="mr-2 far fa-credit-card fa-2x"></i>

    </button>
  </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-ui.min.js') }}" type="text/javascript" charset="utf-8">
    </script>

    <script type="text/javascript">
      var token = document.head.querySelector('meta[name="csrf-token"]')
      axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content

      $(document).ready( function() {
        $('.pagamento-Cielo').on('click', function() {
          $('.pagamento-Cielo').attr('disabled', true)
          $('.pagamento-Cielo').addClass('disabled')
          $("#modalEnviaPagamento").on('show.bs.modal', function(){
            $('#modal-message').html('Estamos processando seu pagamento, aguarde...')
          })
          $("#modalEnviaPagamento").modal( 'show' )
          let base_url = "{!! url('/') !!}"
          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 = ''
          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', retorno)
            if(retorno.settings && retorno.settings.checkoutUrl !== '') {
              window.open(retorno.settings.checkoutUrl, "_blank", "height=800, width=1200, top=100, left=100");
              $("#modalEnviaPagamento").modal( 'hide' );
              setTimeout(function() {
                  window.location.href = "/accounts?tab=orders";
                }, 5000);
            }
            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')

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

              if (retorno.link) {
                setTimeout(function() {
                  window.location.href = retorno.link
                }, 20000);
              } 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)
            $('.pagamento-Cielo').removeAttr('disabled')
            $('.pagamento-Cielo').removeClass('disabled')

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

          })
        });
      });
    </script>
    @endsection