{{--{{ dd($plans, $addid, $post) }}--}}
@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>Post Promotional Ad</li>
            </ol><!-- /breadcrumbs -->

        </div>
    </section>
    <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('subscribes') }}">
                            {{ csrf_field() }}
                            @foreach($plans as $items)
                                <div class="panel panel-default">
                                    <div class="panel-heading"><strong>{{ $items->name }}</strong> Promo
                                        plan @if($items->description)<span class="small">({{ $items->description }}
                                        )</span>@endif</div>
                                    <div class="panel-body">
                                        amount:
                                        @if(request('plansdays'.$items->id)=='7' || request('plansdays'.$items->id)=='1') {{ $items->cost }} @else {{ $items->cost * 2}} @endif
                                        &dollar; <span class="pull-right">{{ $items->days }} days</span>
                                    </div>
                                    <input id="plansdays" name="plansdays{{$items->id}}" type="hidden"
                                           value="{{$items->days}}"/>
                                </div>
                            @endforeach

                            <div class="panel panel-default">
                                <div class="panel-heading"><strong>Total</strong></div>
                                <div class="panel-body">
                                    amount: <strong>{{ $post['totalcost'] }} &dollar;</strong>
                                </div>
                            </div>
                            <div class="bt-drop-in-wrapper">
                                <div id="bt-dropin"></div>
                            </div>
                            <input id="amount" name="amount" type="hidden" min="1" value="{{ $post['totalcost'] }} ">
                            <input id="nonce" name="payment_method_nonce" type="hidden"/>
                            <input id="planid" name="planid" type="hidden" value="{{ $post['planssum'] }}"/>
                            <input id="addid" name="add_id" type="hidden" value="{{ $addid }}"/>
                            <div class="col-sm-12 text-center">
                                <button class="btn btn-blue" type="submit"><span>Payment</span></button>
                            </div>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </section>
@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