@extends('layouts.dashboard')

@section('meta')
<title>{{ config('app.name') }} - Donations</title>
@endsection

@section('title')
Donations
@endsection

@section('form')
@php
$user = auth()->user();
@endphp
<!--CLIENT ADMIN-->
<div class="container-fluid color-white pt-2 pb-4 shippinArea">
    <div class="container">
        <div class="row">

            <!--content Area-->
            <div id="admin-main-control" class="col-md-12">
                <div class="content-title m-x-auto col-sm-12">
                    <i class="fa fa-truck"></i> Donations
                </div>

                {{-- Message Display--}}
                @if (session('success'))
                <div class="alert alert-success d-flex justify-content-center w-100">
                    {{ session('success') }}
                </div>
                @elseif (session('fail'))
                <div class="alert alert-danger d-flex justify-content-center">
                    {{ session('fail') }}
                </div>
                @endif

                <div class="col-sm-12 order-history">
                    <div class="card">
                        <div class="card-title">
                            <button class="btn btn-white-new" data-toggle="modal" data-target="#payment-method"><i
                                    class="fa fa-plus"></i> Start a New Donation</button>

                        </div>
                        <div class="clearfix"></div>

                        @foreach ($user->subscriptions->sortByDesc('created_at') as $subscription)
                        <div class="card-body" id="donations">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="pull-right"><label
                                            class="label label-danger">{{ $subscription->ends_at ? 'canceled' : $subscription->stripe_status }}</label>
                                    </div>
                                    <span>Referencing code: {{ $subscription->name }}</span> <br>
                                    <span>Donating ${{ $subscription->getTotal() }}
                                        {{ $subscription->getInterval() }}</span>
                                </div>
                                <div class="col-md-12">
                                    <div class="row justify-content-between">
                                        <div class="col-md-4">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <span>Started at:</span>
                                                    <span>{{ $subscription->created_at->format('M d, Y') }}</span>
                                                </div>
                                            </div>
                                            @if ($subscription->ends_at)
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <span>Ended at:</span>
                                                    <span>{{ Carbon\Carbon::parse($subscription->ends_at)->format('M d, Y') }}</span>
                                                </div>
                                            </div>
                                            @endif
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <span>Next billing date:</span>
                                                    <span>{{ ($date = $subscription->getInvoiceDate()) == 'N/A' ? $date : $date->format('M d, Y') }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="pull-right cancel-donation">
                                                @if (!$subscription->ends_at)
                                                <a href="javascript:;" title="Cancel" data-id="{{ $subscription->id }}"
                                                    class="btn btn-sm btn-danger pull-right view cancel"
                                                    style="margin-right: 5px"><i class="voyager-x"></i> <span
                                                        class="hidden-xs hidden-sm">Cancel</span></a>
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <hr class="my-0" style="border-color: inherit">
                        @endforeach
                    </div>

                </div>

            </div>
            <!--content Area-->
        </div>
    </div>
</div>
<!--CLIENT ADMIN-->

<!-- Modal -->
<div class="modal fade" id="payment-method" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Make a monthly donation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="{{ route('donate') }}" id="checkout-form" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="form-group col-md-12">
                        <label for="amount">Amount per Month (CAD)</label>
                        <input id="amount" name="amount" type="number" step="0.01" value="10" class="form-control">
                    </div>

                    <div class="form-group col-md-12" v-if="hasPaymentMethod && !addNewPaymentMethod">
                        <select class="form-control" name="payment_method_id" id="payment_method_id"
                            style="padding-top: 0; padding-bottom: 0;">
                            @foreach ($user->paymentMethods() as $pm)
                            <option value="{{ $pm->id }}" {{ $user->defaultPaymentMethod() && $pm->id ==
                            $user->defaultPaymentMethod()->id ? 'selected' : ''}}>
                                {{ Str::upper($pm->card->brand) . ' ••••' . $pm->card->last4 }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div v-show="addNewPaymentMethod">
                        <input type="hidden" name="payment_method_id" id="payment_method_id" v-if="addNewPaymentMethod">
                        <div class="form-group col-md-12">
                            <div class="form-group">
                                <label for="card-holder-name">Card Holder Name</label>
                                <input id="card-holder-name" placeholder="Card Holder Name" class="form-control"
                                    type="text">
                            </div>
                            <div class="form-group">
                                <label for="card-element">Credit or Debit Card</label>
                                <!-- Stripe Elements Placeholder -->
                                <div id="card-element" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group col-md-12" v-show="hasPaymentMethod">
                        <div class="control-group">
                            <div class="controls">
                                <label class="checkbox" for="addNewPaymentMethod">
                                    <input type="checkbox" id="addNewPaymentMethod" v-model="addNewPaymentMethod"
                                        style="display: inline-block">
                                    Add a new card</label>
                            </div>
                        </div>
                    </div>

                    <div class="form-group col-md-12">
                        <div class="control-group">
                            <div class="controls">
                                <label class="checkbox" for="accept">
                                    <input type="checkbox" name="accept" id="accept" :value="true" v-model="accept"
                                        style="display: inline-block">
                                    I accept the <a href="#" target="_blank">Terms and
                                        conditions</a> </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-dark" id="placeorderbtn" :disabled="!accept"
                        v-show="!addNewPaymentMethod" @click="submit()">Donate</button>
                    <button type="button" class="btn btn-dark" data-secret="{{ $intent->client_secret }}"
                        id="card-button" :disabled="!accept" v-show="addNewPaymentMethod"
                        @click="stripeSubmit()">Donate</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal modal-danger fade" tabindex="-1" id="cancel_modal" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="voyager-x"></i> Are you sure you want to stop this donation?</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-footer">
                <form action="#" id="cancel_form" method="POST">
                    {{ csrf_field() }}
                    <button type="submit" class="btn btn-danger pull-right">Yes</button>
                </form>
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Back</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
@endsection

@section('scripts')
@if (config('app.debug'))
<script src="{{ asset('js/vue.js') }}"></script>
@else
<script src="{{ asset('js/vue.min.js') }}"></script>
@endif
{{-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> --}}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"
    integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous">
</script>
<script src="https://js.stripe.com/v3/"></script>

<script>
    $ = jQuery;

    var stripe = Stripe('{{ config('stripe.public') }}');

    var vm = new Vue({
        el: '#payment-method',
        data: {
            accept : false,
            hasPaymentMethod : {{ $user->hasPaymentMethod() ? 'true' : 'false' }},
            addNewPaymentMethod : !{{ $user->hasPaymentMethod() ? 'true' : 'false'}}
        },
        methods: {
            submit: function () {
                $('#placeorderbtn').attr("disabled", true);
                $('#placeorderbtn').text("Processing...");

                $('#checkout-form').submit();
            },
            stripeSubmit: async (e) => {
                $('#card-button').attr("disabled", true);
                $('#card-button').text("Processing...");

                const { setupIntent, error } = await stripe.confirmCardSetup(
                    clientSecret, {
                        payment_method: {
                            card: cardElement,
                            billing_details: { name: cardHolderName.value }
                        }
                    }
                );

                if (error) {
                    // Display "error.message" to the user...
                    alert(error.message);
                } else {
                    $('#payment_method_id').val(setupIntent.payment_method);
                    $('#checkout-form').submit();
                }
            }
        },
    });
    var elements = stripe.elements();
    var cardElement = elements.create('card');

    cardElement.mount('#card-element');

    var cardHolderName = document.getElementById('card-holder-name');
    var cardButton = document.getElementById('card-button');
    var clientSecret = cardButton.dataset.secret;

    $('.cancel-donation').on('click', '.cancel', function (e) {
        $('#cancel_form')[0].action = '{{ route('donation-cancel', ['donation' => '__id']) }}'.replace('__id', $(this).data('id'));
        $('#cancel_modal').modal('show');
    });
</script>
@endsection