@extends('layouts.app')

@section('content')
    <section class="page-header page-header-xs">
        <div class="container">

            <h1>WebMoto.us&nbsp;<span>Promotional Ad - Payment</span></h1>

            <!-- breadcrumbs -->
            <ol class="breadcrumb">
                <li><a href="{{ @url('/') }}">Home</a></li>
                <li>Promotional Ad</li>
            </ol><!-- /breadcrumbs -->

        </div>
    </section>

    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                @if(env('PAYMENT_STATUS')!='off')

                    <form method="post" id="payment-form" action="{{ url('subscribe') }}">
                        {{ csrf_field() }}
                        <section>
                            <div class="panel panel-default">
                                <div class="panel-heading"><strong>{{ $plan->name }}</strong> - Promo plan
                                    @if($plan->description)
                                        <div class="">{{ $plan->description }}</div>@endif
                                </div>
                                <div class="panel-body">
                                    amount: <strong>{{ $plan->cost }} &dollar;</strong>
                                </div>
                            </div>

                            <div class="bt-drop-in-wrapper">
                                <div id="bt-dropin"></div>
                            </div>
                        </section>
                        <input id="amount" name="amount" type="hidden" min="1" value="{{ $plan->cost }} ">
                        <input id="nonce" name="payment_method_nonce" type="hidden"/>
                        <input id="planid" name="planid" type="hidden" value="{{ $plan->id }}"/>
                    <input id="addid" name="add_id" type="hidden" value="{{ request('addid') }}"/>
                        <button class="btn btn-blue pull-right" type="submit"><span>Payment</span></button>
                    </form>
                @endif
            </div>
        </div>
    </div>
@endsection

@section('footer_scripts')
    <script src="https://js.braintreegateway.com/web/dropin/1.9.2/js/dropin.min.js"></script>

    <script>
        'use strict';
        (function () {
            var amount = document.querySelector('#amount');
            var amountLabel = document.querySelector('label[for="amount"]');

            amount.addEventListener('focus', function () {
                amountLabel.className = 'has-focus';
            }, false);
            amount.addEventListener('blur', function () {
                amountLabel.className = '';
            }, false);
        })();


        var form = document.querySelector('#payment-form');
        var client_token = "{{ \Braintree\ClientToken::generate() }}";

        braintree.dropin.create({
            authorization: client_token,
            selector: '#bt-dropin',
            paypal: {
                flow: 'vault'
            }
        }, function (createErr, instance) {
            if (createErr) {
                console.log('Create Error', createErr);
                return;
            }
            form.addEventListener('submit', function (event) {
                event.preventDefault();

                instance.requestPaymentMethod(function (err, payload) {
                    if (err) {
                        console.log('Request Payment Method Error', err);
                        return;
                    } else {
                        // Add the nonce to the form and submit
                        document.querySelector('#nonce').value = payload.nonce;
                        form.submit();

                    }


                });
            });
        });


    </script>

@endsection