@extends('layouts.front.app')

@section('content')
    <div class="container product-in-cart-list">
        @if($products)
            <div class="container wow fadeIn">

                <!-- Heading -->
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb blue-grey lighten-4">
                        <li class="breadcrumb-item"><a class="black-text" href="#">Home</a><i class="fas fa-angle-double-right mx-2"
                            aria-hidden="true"></i></li>
                            @if(isset($products->id))
                                <li class="breadcrumb-item"><a class="black-text" href="/accounts/?tab=orders">Pedidos</a><i class="fas fa-angle-double-right mx-2"
                                    aria-hidden="true"></i></li>
                                <li class="breadcrumb-item active">Checkout</li>
                            @else
                                <li class="breadcrumb-item active">Carrinho </li>
                            @endif

                    </ol>
                </nav>
                <!-- Heading -->
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb blue-grey lighten-4">
                        <li><a href="{{ route('home') }}"> <i class="fa fa-home"></i> Home</a><i class="fas fa-angle-double-right mx-2"
                            aria-hidden="true"></i></li>
                        @if(isset($products->id))
                            <li class="breadcrumb-item"><a class="black-text" href="/accounts/?tab=orders">Pedidos</a><i class="fas fa-angle-double-right mx-2"
                                aria-hidden="true"></i></li>
                            <li class="breadcrumb-item active">Checkout</li>
                        @else
                            <li class="breadcrumb-item active">Carrinho </li>
                        @endif
                    </ol>
                </nav>
                <!--Grid row-->
                <div class="row">

                <!--Grid column-->
                <div class="col-md-8 mb-4">

                    <!--Card-->
                    <div class="card">

                    <!--Card content-->
                    <form class="card-body" id="formPagamento" action="{{ route('bank-transfer.index') }}">
                        @include('layouts.errors-and-messages')
                        {{ csrf_field() }}
                        <input type="hidden" class="billing_address" name="billing_address" value="{{ $entrega['entrega'] }}">
                        <input type="hidden" class="frete" name="frete" value="{{ $valorFrete }}">
                        <input type="hidden" class="order" name="order" value="{{ (isset($order_id)) ? $order_id : '' }}">
                        <input type="hidden" name="shipment_obj_id" value="{{ $shipment_object_id }}">
                        <input type="hidden" class="rate" name="rate" value="">
                        <input type="hidden" name="shipment_obj_id" value="{{ $shipment_object_id }}">
                        <!--Grid row-->
                        <div class="row">

                            <!--Grid column-->
                            <div class="col-md-12 mb-2">

                                <!--firstName-->
                                <div class="md-form ">
                                    <input type="text" id="firstName" class="form-control" value="@if(auth()->check()) {{ auth()->user()->name }} @endif" require>
                                    <label for="firstName" class="">Nome Completo <span class="red-text">*</span></label>
                                </div>

                            </div>
                            <!--Grid column-->

                        </div>
                        <!--Grid row-->

                        <!--email-->
                        <div class="md-form mb-5">
                            <input type="email" id="email" class="form-control" placeholder="youremail@example.com" value="@if(auth()->check()) {{ auth()->user()->email }} @endif" require>
                            <label for="email" class="">Email <span class="red-text">*</span></label>
                        </div>

                        <!--cpf-->
                        <div class="md-form mb-5">
                            <input type="text" id="cpf_cnpj" name="cpf_cnpj" class="form-control" placeholder="xxx.xxx.xxx-xx">
                            <label for="cpf_cnpj" class="">CPF (obrigatório, para os nascidos no Brasil)</label>
                        </div>

                        <div class="row">
                            @if (!isset($order_paid) || $order_paid > 1)
                                @if(isset($payments) && !empty($payments))
                                    <div class="col-md-12 mb-3">
                                        <!-- Heading -->
                                        <h4 class="d-flex justify-content-between align-items-center mb-3">
                                        <span class="text-muted">Pagar com:</span>
                                    </div>
                                    </h4>
                                    <div class="d-block mb-3">
                                        @foreach($payments as $payment)
                                            <div class="custom-control custom-radio">
                                                @if(isset($payment['name']))
                                                    @if($payment['name'] == config('stripe.name'))
                                                        @if(env('STRIPE_KEY'))
                                                            <input id="stripe" name="paymentMethod" type="radio" class="custom-control-input" >
                                                            <label class="custom-control-label" for="stripe">Stripe</label>
                                                        @endif
                                                    @elseif($payment['name'] == config('paypal.name'))
                                                        @if(env('PP_ACCOUNT_ID'))
                                                            <input id="paypal" name="paymentMethod" type="radio" class="custom-control-input" >
                                                            <label class="custom-control-label" for="paypal"><i class="fab fa-cc-paypal"></i> PayPal</label>
                                                        @endif
                                                    @elseif($payment['name'] == config('cielo.name'))
                                                        @if(env('CIELO_ID'))
                                                            <input id="cielo" name="paymentMethod" type="radio" class="custom-control-input">
                                                            <label class="custom-control-label" for="cielo"><img src="{{ asset('storage/cartoes-cielo.jpg') }}" class="rounded img-fluid w-25" alt="Pagamento Cielo"> Cielo</label>
                                                        @endif
                                                    @elseif($payment['name'] == config('bank-transfer.name'))
                                                        <input id="bank-transfer" name="paymentMethod" type="radio" class="custom-control-input" checked required>
                                                        <label class="custom-control-label" for="bank-transfer"><i class="fas fa-money-check-alt"></i> Transferência Bancária</label>
                                                    @endif
                                                @endif
                                            </div>
                                        @endforeach
                                    </div>
                                    <button class="btn btn-primary btn-lg btn-block" type="submit">Efetuar pagamento</button>

                                </form>
                                @else
                                    <p class="alert alert-danger">Nenhum método de pagamento definido</p>
                                @endif
                            @else
                            <div class="row">
                                <!-- Grid column -->
                                <div class="col-md-12 mb-4">
                                    <!--Card-->
                                    <div class="card">
                                        <!--Card content-->
                                        <div class="card-body text-center">
                                            <h2 class="h2-responsive card-meta"><strong>Pagamento Realizado!</strong></h2>
                                            <hr>
                                            <div class="table-responsive">
                                                <table class="table">
                                                    <tbody>
                                                        <tr>
                                                            <th class="text-left">Meio:</th>
                                                            <th class="text-left">{{ ucfirst($pagamento->plataforma) }}</th>
                                                        </tr>
                                                        <tr>
                                                            <th class="text-left">Método:</th>
                                                            <th class="text-left">{{ ucfirst($pagamento->tipo_pagamento) }}</th>
                                                        </tr>
                                                        <tr>
                                                            <th class="text-left">Data do pagamento:</th>
                                                            <th class="text-left">{{ date('d/m/Y h:i', strtotime($pagamento->created_at)) }}</th>
                                                        </tr>
                                                        <tr>
                                                            <th class="text-left">Autenticação:</th>
                                                            <th class="text-left">{{ $pagamento->transaction_id }}</th>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endif
                            <hr class="mb-4">
                        </div>



                    </div>
                    <!--/.Card-->

                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-4 mb-4">

                    <!-- Heading -->
                    <h4 class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-muted">Seus itens</span>
                    <span class="badge badge-secondary badge-pill">{{ count($cartItems) }}</span>
                    </h4>

                    <!-- Cart -->
                    <ul class="list-group mb-3 z-depth-1">
                    @if($cartItems)
                        @foreach($cartItems as $product)
                            <li class="list-group-item d-flex justify-content-between lh-condensed">
                                <div>
                                <h6 class="my-0">{{ $product->name }}</h6>
                                <small class="text-muted">{{ $product->description }}</small>
                                </div>
                                <span class="text-muted">{{ config('cart.currency_symbol') }}@if (!is_null($product->sale_price)) {{ number_format(intval($product->sale_price), 2, ',', '.') }} @else {{ number_format(intval($product->price), 2, ',', '.') }} @endif</span>
                            </li>
                        @endforeach
                    @endif

                    <li class="list-group-item d-flex justify-content-between bg-light">
                        <div class="text-success">
                        <h6 class="my-0">Código promocional</h6>
                        <small class="codigo"></small>
                        </div>
                        <span class="text-success">{{ config('cart.currency_symbol') }}<span class="valorPromocao"> - </span></span>
                        <input type="hidden" name="id_voucher">
                    </li>

                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div class="text-default">
                        <h6 class="my-0">Frete</h6>
                        <small></small>
                        </div>
                        <span class="text-default">{{ config('cart.currency_symbol') }} {{ number_format(intval($valorFrete), 2, ',', '.') }}</span>
                    </li>

                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div class="text-default">
                        <h6 class="my-0">Taxas</h6>
                        <small></small>
                        </div>
                        <span class="text-default">{{ config('cart.currency_symbol') }} {{ number_format(intval($rates), 2, ',', '.') }}</span>
                    </li>

                    <li class="list-group-item d-flex justify-content-between">
                        <span>Total ({{ config('cart.currency_symbol') }})</span>
                        <strong>{{ config('cart.currency_symbol') }} <span class="novoValor">{{ number_format(intval($total), 2, ',', '.') }}</span></strong>
                        <input type="hidden" name="total" value="{{ number_format(intval($total), 2, '.', '') }}">
                    </li>
                    </ul>
                    <!-- Cart -->
                    @if (!isset($order_paid) || $order_paid > 1)
                        <!-- Promo code -->
                        <form class="card p-2">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="Código Promocional" aria-label="Código Promocional" aria-describedby="basic-addon2" name="codigoVoucher">
                            <div class="input-group-append">
                            <button class="btn btn-secondary btn-md waves-effect m-0" type="button" id="resgatar">Resgatar</button>
                            </div>
                        </div>
                        </form>
                        <!-- Promo code -->
                    @endif
                </div>
                <!--Grid column-->

                </div>
                <!--Grid row-->

            </div>
        @else
            <div class="row">
                <div class="col-md-12">
                    <p class="alert alert-warning">Nenhum produto no carrinho. <a href="{{ route('home') }}">Mostrar!</a></p>
                </div>
            </div>
        @endif
        <!-- Modal informativo do Cupom -->
        <div class="modal fade top" id="modalVoucher" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-frame modal-top 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">O cupom <span class="codigo badge badge-dark"></span> foi adicionado ao seu Pedido.</p>

                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                </div>
            </div>
            </div>
        </div>
        </div>
        <!-- Modal informativo do Cupom -->

        <!-- Modal caso o Cupom esteja vazio -->
        <div class="modal fade" id="modalCupom" 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">Cupom nã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-secondary btn-sm" data-dismiss="modal">Fechar</button>
            </div>
            </div>
        </div>
        </div>
        <!-- Modal caso o Cupom esteja vazio -->
@endsection
@section('js')
    <script type="text/javascript">
        $(document).ready(function(){
            $('input[name=sameDeliveryAddress]').on('click', function() {
                let frete = $(this).data('frete')
                let subTotal = $('#subTotal').html()
                let taxa = $('#taxa').html()
                let total = parseFloat(frete.replace('.', '').replace(',', '.')) + parseFloat(subTotal.replace('.', '').replace(',', '.')) + parseFloat(taxa.replace('.', '').replace(',','.'))
                frete = frete.toLocaleString('pt-BR')
                total = total.toLocaleString('pt-BR')
                $('#shippingFee').html(frete)
                $('#grandTotal').html(total)
                $('input[name=frete]').val(frete)
            })
            $('#cpf_cnpj').on('keyup', function(){
                let cpf_cnpj = $(this).val()
                console.log(cpf_cnpj.length)
                if(cpf_cnpj.length > 15){
                    $('#cpf_cnpj').unmask()
                }
                if (cpf_cnpj.length > 15) {
                    $('#cpf_cnpj').mask('99.999.999/9999-99')
                } else {
                    $('#cpf_cnpj').mask('999.999.999-99')
                }
            })
            $('#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') }}")
            })

            $('#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
                                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)
                                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')
                            }
                        }
                    })
                }
            })
        })
    </script>
@endsection