@extends('evento2')
@section('content')
<section class="py-0">
    <div class="container text-black">
        <div class="row">
            <div class="col-sm-7">
                <h4>Selecciona tu forma de pago</h4>
                <br>
                <form id="card-form">
                    <input name="conektaTokenId" id="conektaTokenId" hidden>
                    <input hidden name="eventoId" value="{{Crypt::encrypt($evento->id)}}">

                    <input hidden name="numEntradas" value="{{Crypt::encrypt($evento->id)}}">

                    <div class="card col-sm-9 text-black">
                        <div class="card-body ">
                            <h5 class="card-title">Continuar como invitado</h5>


                            <div class="row">
                                <div class="col-sm-6 md-3">
                                    <label for="exampleInputEmail1" class="form-label">Tarjetahabiente</label>
                                    <input type="text" class="form-control" name="card" id="tarjetahabiente" data-conekta="card[name]"
                                        aria-describedby="emailHelp">

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 md-3">
                                    <label for="exampleInputEmail1" class="form-label">Numero de tarjeta</label>
                                    <input type="text" name="card" id="numero-tarjeta" maxlength="16" class="form-control"
                                        onkeydown="setTimeout('mascaraTarjeta(\'numero-tarjeta\',\'cuenta\',false);',10)"
                                        autocomplete="off">
                                    <input type="hidden" name="cuenta" id="cuenta" data-conekta="card[number]">
                                </div>
                            </div>

                            <div class="row">
                                <h4>Fecha de caducidad</h4>
                                <div class="col-sm-3 md-3">
                                    <label for="exampleInputEmail1" class="form-label">Mes</label>
                                    <input type="text" placeholder="DD" class="form-control" data-conekta="card[exp_month]"
                                        aria-describedby="emailHelp">

                                </div>
                                <div class="col-sm-3 md-3">
                                    <label for="exampleInputEmail1" class="form-label">Año</label>
                                    <input type="text" placeholder="YY" class="form-control" data-conekta="card[exp_year]"
                                        aria-describedby="emailHelp">

                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 md-3">
                                    <label for="exampleInputEmail1" class="form-label">Codigo de seguridad</label>
                                    <input type="text" class="form-control" data-conekta="card[cvc]"
                                        aria-describedby="emailHelp">

                                </div>
                            </div>

                            Información de facturación

                            <div class="row">
                                <div class="col-sm-10 md-3">
                                    <label for="exampleInputEmail1" class="form-label">Calle y número
                                        Su dirección de facturación debe coincidir con la información proporcionada a su
                                        banco
                                        emisor</label>
                                    <input type="text" class="form-control" id="direccion"
                                        aria-describedby="emailHelp">

                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-6 md-3">
                                    <label for="exampleInputEmail1" class="form-label">Código postal</label>
                                    <input type="text" class="form-control" id="cp"
                                        aria-describedby="emailHelp">
                                    Si vives en otro país, solo ingresa 5 números.
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-12" style="text-align:center;">
                                    <button class="btn btn-success btn-lg" onclick="obtenerTotal()">
                                        <i class="fa fa-check-square"></i> PAGAR
                                    </button>
                                </div>

                            </div>


                        </div>
                    </div>

                </form>
            </div>
            <div class="col-md-5  pl-5 py-2">
                <div class="card">
                    <div class="card-header">
                        Resumen de tu compra
                    </div>
                    @php
                        $suma=0;
                    @endphp
                    <div class="card-body">
                        <div class="row">
                            <table>
                                @foreach ($entradas as $entrada)
                                @php
                                 $suma+= floatval($entrada['cantidad'] )* floatval($entrada['precio']);
                                @endphp
                                    <tr>
                                        <td>{{ $entrada['cantidad'] }}x {{ $entrada['nombre'] }}</td>
                                        <td style="text-align: right">$
                                            {{ number_format($entrada['cantidad'] * $entrada['precio'], 2) }}
                                            MXN</td>

                                        <td>
                                            <hr>
                                        </td>
                                    </tr>

                                @endforeach
                                <tr><td colspan="2"><hr></td></tr>
                                <tr>
                                    <td>Total:</td>
                                    <td style="text-align: right">{{number_format($suma,2)}}</td>
                                </tr>
                            </table>
                            <input type="hidden" hidden name="montoTotal" value="b{{$suma}}">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@endsection
@push('css')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css"
    integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
    label.error {
        color: #a94442;
        padding: 1px 20px 1px 0px;
    }
</style>
@endpush

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.conekta.io/js/latest/conekta.js"></script>
<script src="{{asset('assets/js/checkout.js')}}"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="{{asset('assets_client/js/validarTarjeta.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"
    integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.0/moment.min.js"></script>



<script>
    Conekta.setPublicKey("key_JM2b3rqQPBAk97tP2YHTpew");

    var conektaSuccessResponseHandler= function(token){

        $("#conektaTokenId").val(token.id);

        checkout();
    };

    var conektaErrorResponseHandler =function(response){
        var $form=$("#card-form");
        alert(  $("#numero-tarjeta").val());
       errorTarjeta(response.message_to_purchaser)
        //alert(response.message_to_purchaser);
    }

    $(document).ready(function(){

        $("#card-form").submit(function(e){
            e.preventDefault();

            var $form=$("#card-form");

            Conekta.Token.create($form,conektaSuccessResponseHandler,conektaErrorResponseHandler);
        })

    })


    function jsClean(){
        $(".form-control").prop("value","");
        $("#conektaTokenId").prop("value","");
        $("#cantidadEntrada").prop("value","");
        $("#totalPrecio").text("");
    }

    function obtenerTotal(){

        let montoTotal =0;

        var numEntradasCount = document.getElementsByName("cantidadEntradas[]").length;

        for (i = 0; i < numEntradasCount; i++) {

            cantidadEntradas= document.getElementsByName("cantidadEntradas[]")[i].value;
            if(cantidadEntradas){
                precioEntrada=document.getElementsByName("precioEntrada[]")[i].value;
                montoTotal+= (cantidadEntradas*precioEntrada);

            }

        }

        $("#totalPrecio").text(montoTotal);
    }

   function validar(){

   }

   function errorTarjeta(error) {

        toastr["error"](error, "Error")

        toastr.options = {
             "closeButton": false,
             "debug": false,
            "newestOnTop": false,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "preventDuplicates": true,
            "onclick": null,
            "showDuration": "300",
             "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
            }
    }
</script>