@extends('layouts.guest')

@section('css')
    <link rel="stylesheet" href="{{URL::asset('/css/pricing.css')}}">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
@endsection

@section('content')


<div class="container" id="content">


    <h1 class="demo-title">Elige tu plan</h1>

    <div class="pricing-table">
        <div id="btnGratis" class="pricing-option col-sm-4">
            <i class="material-icons">important_devices</i>
            <h1>Free</h1>
            <hr />
            <p>Mira gratuitamente 3 películas al mes
            </p>
            <hr />
            <div class="price">
                <div class="front">
                    <span class="price">0 <b>$</b></span>
                    mensual
                </div>
                <div class="back">
                    <a href="#" class="button">Comprar</a>
                </div>
            </div>
        </div>

        <div id="btnPaga" class="pricing-option col-sm-4">
            <i class="material-icons">perm_identity</i>
            <h1>Standard</h1>
            <hr />
            <p>Mira todas las películas que quieras, cuando quieras, donde quieras.</p>
            <hr />
            <div class="price">
                <div class="front">
                    <span class="price">9.9 <b>$</b></span>
                    mensual
                </div>
                <div class="back">
                    <a href="#" class="button" >Comprar</a>
                </div>
            </div>
        </div>
<!--
        <div class="pricing-option col-sm-4">
            <i class="material-icons">art_track</i>
            <h1>Print design</h1>
            <hr />
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum voluptatum, sit cum voluptatibus inventore quae qui provident eveniet dicta at, quibusdam ipsam iusto reprehenderit hic saepe nesciunt sed illo.</p>
            <hr />
            <div class="price">
                <div class="front">
                    <span class="price">999 <b>$</b></span>
                </div>
                <div class="back">
                    <a href="#" class="button">Purchase now</a>
                </div>
            </div>
        </div>-->
    </div>

</div>

@endsection

@section('js')

    <!-- Incluye el Checkout de Culqi en tu sitio web-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script src="https://checkout.culqi.com/v2"></script>


    <script>
        Culqi.publicKey = 'pk_test_tqlkcWyJbkCUuz3o';

        var settingsSeleccionado;

        $(function () {
            $('#btnGratis').click(function () {

                settingsSeleccionado = {
                    title: 'Club Minuto 90',
                    currency: 'USD',
                    description: 'Mira gratuitamente 3 películas al mes',
                    amount: 0
                };

                Culqi.settings(settingsSeleccionado);
                Culqi.open();
            });

            $('#btnPaga').click(function () {
                settingsSeleccionado = {
                    title: 'Club Minuto 90',
                    currency: 'USD',
                    description: 'Mira todas las películas que quieras, cuando quieras, donde quieras',
                    amount: 900
                };
                Culqi.settings(settingsSeleccionado);
                Culqi.open();
            });
        });

        //TODO::https://www.youtube.com/watch?v=nFw8lF80SAI   terminar de verlo
        //TODO::https://www.youtube.com/watch?v=r7C_qN0vEyA mas o menos


        // Recibimos el token desde los servidores de Culqi
        function culqi() {
            if (Culqi.token) { // Token creado exitosamente!
                // Obtener el token ID

                var data = {
                    tokenId: Culqi.token.id,
                    email: Culqi.token.email,
                    lastFour: Culqi.token.last_four,
                    ip: Culqi.token.client.ip,
                    ipCountry: Culqi.token.client.ip_country,
                    ipCountryCode: Culqi.token.client.ip_country_code,
                    title: settingsSeleccionado.title,
                    currency: settingsSeleccionado.currency,
                    description: settingsSeleccionado.description,
                    amount: settingsSeleccionado.amount
                };

                var url = '/api/pagar';

                $.post(url, data, function (res) {
                    alert(res);
                    // console.log(res);
                })
                    .fail(function (xhr, status, error) {
                        // console.log(xhr);
                        // console.log(xhr.responseJSON.message.user_message);
                        var msj = JSON.parse(xhr.responseJSON.message);
                        // console.log(msj);
                        alert(msj.user_message);
                    });

            } else { // Hubo algun problema!
                // Mostramos JSON de objeto error en consola
                console.log(Culqi.error);
                alert(Culqi.error.mensaje);
            }
        };
    </script>
@endsection