@extends('template.master')

@section('page_styles')
{{--CUSTOM STYLES HERE--}}
<link rel="stylesheet" href="{{ asset('css/layout/payment.css') }}">
<style>

    .table, .table tbody tr {
        border: 1px solid lightgray;
    }



</style>
@stop

@section('content')

<div class="container-fluid">
    @include('payment.utilities.payment_form')
    @include('payment.utilities.card_details')
    @include('payment.utilities.cancel_option')
    @include('payment.utilities.upgrade_option')
    <!-- Begin Page Header-->
    <div class="row">
        <div class="page-header">
            <div class="d-flex align-items-center">
                <h2 class="page-header-title">Subscription</h2>
                <div>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}"><i class="ti ti-home"></i></a></li>
                        <li class="breadcrumb-item"><a href="{{ route('dashboard.index') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Subscription</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Page Header -->

    <div class="d-flex justify-content-between payment-page-container">
        <div class="overview-col">
            <!-- Begin Table -->
            <div class="desc-tables">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                {{-- <th>Payment Gateway</th> --}}
                                <th>Plan</th>
                                <th><span style="width:100px;">Status</span></th>
                                <th>Price</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php 

                                $cancelled = ['canceled at period end', 'canceled'];
                                $last_payment = 0;
                                $last_payment_date = '';
                                $next_payment = 0;
                                $next_payment_date = '';
                                $last_payment_notice = false;

                            @endphp
                            @if(count($subscription_list) > 0)
                                @foreach($subscription_list as $key => $subscription)
                                    @if(isset($subscription->status))
                                        @php

                                            if(($next_payment_date < gmdate("Y-m-d", $subscription->latest_invoice->due_date) || $next_payment_date == '') && $subscription->status != 'past_due')
                                            {
                                                $next_payment = number_format($subscription->total/100, 2);
                                                $next_payment_date = gmdate("Y-m-d", $subscription->latest_invoice->due_date);    
                                            }

                                            if(($last_payment_date < gmdate("Y-m-d", $subscription->current_period_start) || $last_payment_date == '') && $subscription->status == 'active')
                                            {
                                                $last_payment = number_format($subscription->latest_invoice->total/100, 2);
                                                $last_payment_date = gmdate("F d, Y", $subscription->current_period_start);

                                                if(in_array($subscription->status, ['past_due']))
                                                {
                                                    $last_payment_notice = true;
                                                }    
                                            }   

                                        @endphp
                                    <tr>
                                        {{-- <td>Stripe</td> --}}
                                        <td>{{ $subscription->plan->nickname }}</td>
                                        <td>
                                            @if(!empty($subscription->canceled_at)) 
                                                <span style="color: orange"> Cancels on {{ gmdate("M d", $subscription->current_period_end) }}</span>
                                            @else
                                                {{ ucfirst($subscription->status) }}
                                            @endif
                                        </td>

                                        <td>${{ number_format($subscription->latest_invoice->total/100, 2) }}</td>

                                        <td>
                                            @if(isset($subscription->latest_invoice->lines->data[0]->period->start))
                                                {{ gmdate("M d, Y hA", strtotime('-1 hour', $subscription->latest_invoice->lines->data[0]->period->start)) }}
                                            @endif
                                        </td>
                                        <td>
                                            @if(isset($subscription->latest_invoice->lines->data[0]->period->end))
                                                {{ gmdate("M d, Y hA", strtotime('-1 hour', $subscription->latest_invoice->lines->data[0]->period->end)) }}
                                            @endif
                                        </td>

                                        <td class="td-actions text-center">
                                            @if(!empty($subscription->canceled_at) || $subscription->status == 'past_due') 
                                                <a href="javascript: void(0)" onclick="javascript: purchase('{{ $subscription->plan->id }}', '{{ $subscription->plan->nickname }}')" data-toggle="modal" data-target="#payment-form">
                                                     <small style="color: green">Resubscribe</small>
                                                </a>
                                            @else

                                                @if($key < 3)
                                                <a href="javascript: void(0)" onclick="javascript: cancelData('{{ $subscription->plan->id }}', '{{ $subscription->id }}', 'canceled', '{{ gmdate('M d, Y', $subscription->latest_invoice->due_date) }}', '{{ $subscription->plan->nickname }}')" data-toggle="modal" data-target="#cancel-schedule-option"><small>Cancel</small></a>
                                                @endif
                                            @endif
                                        </td>
                                    </tr>
                                    @endif
                                @endforeach
                            @else
                            <tr>
                                <td colspan="7">
                                    <center><i>No Active Subscription/s</i></center>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
            <!-- End Table -->
            <br/>
            <div class="desc-tables">
                <h2 class="page-header-title">Invoices</h2><br/><br/>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th>Plan</th>
                                <th><span style="width:100px;">Status</span></th>
                                <th>Price</th>
                                <th>Start Date</th>
                                <th>End Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(!empty($payment_history))

                                @foreach($payment_history as $key => $history)
                                    <tr>
                                        <td>{{ $history->lines->data[0]->plan->nickname }}</td>
                                        <td>{{ ucfirst($history->status) }}</td>

                                        <td>${{ number_format($history->total/100, 2) }}</td>

                                        <td>
                                            @if(isset($history->lines->data[0]->period->start))
                                                {{ gmdate("M d, Y hA", $history->lines->data[0]->period->start) }}
                                            @endif
                                        </td>
                                        <td>
                                            @if(isset($history->lines->data[0]->period->end))
                                                {{ gmdate("M d, Y hA", strtotime('-1 hour', $history->lines->data[0]->period->end)) }}
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            @else
                            <tr>
                                <td colspan="7">
                                    <center><i>No Invoices/s</i></center>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
            </div>
        </div>



        <div class="details-col">
            <div class="feature-widgets">
                @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
                @endif

                @include('payment.utilities.plan_headers')

            </div>
            <div class="new-card animated no-padding payment-method-card">
                <div class="flex-box">
                    <div class="box horizontal">
                        <h2 class="strong">Last payment</h2>
                        <span class="next-payment-text">
                            <span>{{ $last_payment_date }}</span>
                            @if($last_payment_notice) <span style="color: red">Failed</span> @endif
                        </span>
                    </div>
                    @if(!empty($customer->card_brand))
                        <div class="credit-card">
                            <div class="number">
                                <span>****</span>
                                <span>****</span>
                                <span>****</span>
                                <span>{{ $customer->card_last_four }}</span>
                            </div>
                            <div class="credit-card-icon">
                                @if($customer->card_brand == 'Visa')
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="18px" viewBox="0 0 30 18" version="1.1">
                                        <!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
                                        <title>visa</title>
                                        <desc>Created with Sketch.</desc>
                                        <defs></defs>
                                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <g id="visa">
                                                <path d="M28.9610526,0.494210526 L0.765263158,0.494210526 C0.342105263,0.494210526 0,0.796562793 0,1.16951037 L0,16.8189107 C0,17.1918583 0.342105263,17.4942105 0.765263158,17.4942105 L28.9610526,17.4942105 C29.3842105,17.4942105 29.7263158,17.1918583 29.7263158,16.8189107 L29.7263158,1.16951037 C29.7263158,0.796562793 29.3842105,0.494210526 28.9610526,0.494210526 Z" id="Path" fill="#FFFFFF"></path>
                                                <path d="M28.9610526,0.494210526 L0.765263158,0.494210526 C0.342105263,0.494210526 0,0.796562793 0,1.16951037 L0,16.8189107 C0,17.1918583 0.342105263,17.4942105 0.765263158,17.4942105 L28.9610526,17.4942105 C29.3842105,17.4942105 29.7263158,17.1918583 29.7263158,16.8189107 L29.7263158,1.16951037 C29.7263158,0.796562793 29.3842105,0.494210526 28.9610526,0.494210526 Z M2.02631579,5.49421053 L5.19894737,5.49421053 C5.62684211,5.51052632 5.97157895,5.64684211 6.09052632,6.10421053 L6.78052632,9.42263158 C6.10263158,7.68684211 4.46894737,6.24263158 2,5.64473684 L2.02631579,5.49421053 Z M5.83263158,12.9905263 L4,6.72947368 C5.31736842,7.57263158 6.43947368,8.91052632 6.83473684,9.84157895 L7.04842105,10.6147368 L9.05263158,5.49421053 L11.2210526,5.49421053 L7.99842105,12.9889474 L5.83263158,12.9905263 Z M13.0463158,13.0036842 L11,13.0036842 L12.2794737,5.49421053 L14.3268421,5.49421053 L13.0463158,13.0036842 Z M16.28,13.2447368 C15.3626316,13.2352632 14.4789474,13.0536842 14,12.8436842 L14.2878947,11.1631579 L14.5515789,11.2826316 C15.2236842,11.5631579 15.6589474,11.6768421 16.4784211,11.6768421 C17.0663158,11.6768421 17.6963158,11.4468421 17.7021053,10.9436842 C17.7057895,10.6147368 17.4384211,10.38 16.6415789,10.0115789 C15.8647368,9.65263158 14.8363158,9.05052632 14.8489474,7.97210526 C14.86,6.51263158 16.2852632,5.49421053 18.3078947,5.49421053 C19.1005263,5.49421053 19.7357895,5.65736842 20.1410526,5.80947368 L19.8647368,7.43736842 L19.68,7.35052632 C19.3031579,7.19894737 18.8184211,7.05263158 18.1484211,7.06315789 C17.3473684,7.06315789 16.9757895,7.39684211 16.9757895,7.70894737 C16.9715789,8.06052632 17.4094737,8.29210526 18.1252632,8.64052632 C19.3057895,9.17631579 19.8515789,9.82631579 19.8442105,10.6805263 C19.8284211,12.2384211 18.4321053,13.2447368 16.28,13.2447368 Z M25.4489474,12.9989474 C25.4489474,12.9989474 25.2621053,12.1357895 25.2,11.8736842 C24.9021053,11.8736842 22.8136842,11.8705263 22.5789474,11.8705263 C22.4994737,12.0731579 22.1489474,12.9989474 22.1489474,12.9989474 L20,12.9989474 L23.0384211,6.11736842 C23.2542105,5.62842105 23.62,5.49421053 24.1105263,5.49421053 L25.6915789,5.49421053 L27.3478947,12.9984211 L25.4489474,12.9989474 Z" id="Shape" fill="#176AB4" fill-rule="nonzero"></path>
                                                <path d="M24.4957895,9.06052632 L24.3578947,8.41315789 C24.2536842,8.69578947 24.0742105,9.15 24.0857895,9.13 C24.0857895,9.13 23.4389474,10.7968421 23.2705263,11.2289474 L24.97,11.2289474 C24.8878947,10.8526316 24.4957895,9.06052632 24.4957895,9.06052632 Z" id="Shape" fill="#176AB4" fill-rule="nonzero"></path>
                                            </g>
                                        </g>
                                    </svg>
                                 @elseif($customer->card_brand == 'MasterCard')
                                    <img src="{{ asset('assets/img/mastercard-logo.png') }}" style="width: 30px;">
                                 @elseif($customer->card_brand == 'American Express')
                                    <img src="{{ asset('assets/img/american-express.jpg') }}" style="width: 30px;">
                                @endif
                            </div>
                        </div>
                    @endif
                    <h2 class="strong  @if(!$last_payment_notice) action @endif ">
                        @if(!empty($last_payment))
                            <span>${{ number_format($last_payment, 2) }}</span>
                        @else
                            <span>FREE</span>
                        @endif
                    </h2>
                </div>
                @if(isset($upcoming_invoice->total))
                <div class="flex-box small">
                    <div class="box horizontal">
                        <h2 class="strong sm">Next Payment on <b>{{ gmdate("M d", @$upcoming_invoice->period_end) }}</b></h2>
                        <span class="next-payment-text">
                            @if(isset($upcoming_invoice->total))
                                <span>${{ substr($upcoming_invoice->total, 0, -2).'.'.substr($upcoming_invoice->total, -2) }}</span>
                            @else
                                <span>FREE</span>
                            @endif
                        </span>
                    </div>
                    <h2 class="strong">
                        <span>${{ substr(@$upcoming_invoice->total, 0, -2).'.'.substr(@$upcoming_invoice->total, -2) }}</span>
                    </h2>
                </div>
                @endif
                @if(!empty($customer->card_brand))
                    <div class="flex-box small">
                        <h2 class="strong sm">Your card</h2>
                        <div class="credit-card no-border">
                            <div class="number">
                                <span>****</span>
                                <span>****</span>
                                <span>****</span>
                                <span>{{ $customer->card_last_four }}</span>
                            </div>
                            <div class="credit-card-icon">
                                @if($customer->card_brand == 'Visa')
                                    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="18px" viewBox="0 0 30 18" version="1.1">
                                        <!-- Generator: Sketch 49.2 (51160) - http://www.bohemiancoding.com/sketch -->
                                        <title>visa</title>
                                        <desc>Created with Sketch.</desc>
                                        <defs></defs>
                                        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                            <g id="visa">
                                                <path d="M28.9610526,0.494210526 L0.765263158,0.494210526 C0.342105263,0.494210526 0,0.796562793 0,1.16951037 L0,16.8189107 C0,17.1918583 0.342105263,17.4942105 0.765263158,17.4942105 L28.9610526,17.4942105 C29.3842105,17.4942105 29.7263158,17.1918583 29.7263158,16.8189107 L29.7263158,1.16951037 C29.7263158,0.796562793 29.3842105,0.494210526 28.9610526,0.494210526 Z" id="Path" fill="#FFFFFF"></path>
                                                <path d="M28.9610526,0.494210526 L0.765263158,0.494210526 C0.342105263,0.494210526 0,0.796562793 0,1.16951037 L0,16.8189107 C0,17.1918583 0.342105263,17.4942105 0.765263158,17.4942105 L28.9610526,17.4942105 C29.3842105,17.4942105 29.7263158,17.1918583 29.7263158,16.8189107 L29.7263158,1.16951037 C29.7263158,0.796562793 29.3842105,0.494210526 28.9610526,0.494210526 Z M2.02631579,5.49421053 L5.19894737,5.49421053 C5.62684211,5.51052632 5.97157895,5.64684211 6.09052632,6.10421053 L6.78052632,9.42263158 C6.10263158,7.68684211 4.46894737,6.24263158 2,5.64473684 L2.02631579,5.49421053 Z M5.83263158,12.9905263 L4,6.72947368 C5.31736842,7.57263158 6.43947368,8.91052632 6.83473684,9.84157895 L7.04842105,10.6147368 L9.05263158,5.49421053 L11.2210526,5.49421053 L7.99842105,12.9889474 L5.83263158,12.9905263 Z M13.0463158,13.0036842 L11,13.0036842 L12.2794737,5.49421053 L14.3268421,5.49421053 L13.0463158,13.0036842 Z M16.28,13.2447368 C15.3626316,13.2352632 14.4789474,13.0536842 14,12.8436842 L14.2878947,11.1631579 L14.5515789,11.2826316 C15.2236842,11.5631579 15.6589474,11.6768421 16.4784211,11.6768421 C17.0663158,11.6768421 17.6963158,11.4468421 17.7021053,10.9436842 C17.7057895,10.6147368 17.4384211,10.38 16.6415789,10.0115789 C15.8647368,9.65263158 14.8363158,9.05052632 14.8489474,7.97210526 C14.86,6.51263158 16.2852632,5.49421053 18.3078947,5.49421053 C19.1005263,5.49421053 19.7357895,5.65736842 20.1410526,5.80947368 L19.8647368,7.43736842 L19.68,7.35052632 C19.3031579,7.19894737 18.8184211,7.05263158 18.1484211,7.06315789 C17.3473684,7.06315789 16.9757895,7.39684211 16.9757895,7.70894737 C16.9715789,8.06052632 17.4094737,8.29210526 18.1252632,8.64052632 C19.3057895,9.17631579 19.8515789,9.82631579 19.8442105,10.6805263 C19.8284211,12.2384211 18.4321053,13.2447368 16.28,13.2447368 Z M25.4489474,12.9989474 C25.4489474,12.9989474 25.2621053,12.1357895 25.2,11.8736842 C24.9021053,11.8736842 22.8136842,11.8705263 22.5789474,11.8705263 C22.4994737,12.0731579 22.1489474,12.9989474 22.1489474,12.9989474 L20,12.9989474 L23.0384211,6.11736842 C23.2542105,5.62842105 23.62,5.49421053 24.1105263,5.49421053 L25.6915789,5.49421053 L27.3478947,12.9984211 L25.4489474,12.9989474 Z" id="Shape" fill="#176AB4" fill-rule="nonzero"></path>
                                                <path d="M24.4957895,9.06052632 L24.3578947,8.41315789 C24.2536842,8.69578947 24.0742105,9.15 24.0857895,9.13 C24.0857895,9.13 23.4389474,10.7968421 23.2705263,11.2289474 L24.97,11.2289474 C24.8878947,10.8526316 24.4957895,9.06052632 24.4957895,9.06052632 Z" id="Shape" fill="#176AB4" fill-rule="nonzero"></path>
                                            </g>
                                        </g>
                                    </svg>
                                 @elseif($customer->card_brand == 'MasterCard')
                                    <img src="{{ asset('assets/img/mastercard-logo.png') }}" style="width: 30px;">
                                 @elseif($customer->card_brand == 'American Express')
                                    <img src="{{ asset('assets/img/american-express.jpg') }}" style="width: 30px;">
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
                <div class="flex-box">
                    <span id="change-card" class="link" data-toggle="modal" data-target="#card-details">Change Payment Method</span>
                    @if($errors->any())
                        <span style="color: red;">{{$errors->first()}}</span style="color: red;">
                    @endif
{{--                    <span class="link">Payment History</span>--}}
                </div>
            </div>


        </div>
    </div>
</div>

@stop

@section('page_modals')

@stop
@section('page_scripts')
<script src="https://js.stripe.com/v3/"></script>
<!--CUSTOM SCRIPTS-->
<script>
    var stripe = Stripe('{{ $stripe_key }}');

    // Create an instance of Elements.
    var elements = stripe.elements();

    // Custom styling can be passed to options when creating an Element.
    // (Note that this demo uses a wider set of styles than the guide below.)
    var style = {
        base: {
            color: '#32325d',
            lineHeight: '18px',
            fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
            fontSmoothing: 'antialiased',
            fontSize: '16px',
            '::placeholder': {
                color: '#aab7c4'
            }
        },
        invalid: {
            color: '#fa755a',
            iconColor: '#fa755a'
        }
    };

    // Create an instance of the card Element.
    var card = elements.create('card', {
        style: style
    });

    // Add an instance of the card Element into the `card-element` <div>.
    card.mount('#card-element');

    // Handle real-time validation errors from the card Element.
    card.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });

    // Handle form submission.
    var form = document.getElementById('checkout-form');
    form.addEventListener('submit', function(event) {
        event.preventDefault();

        stripe.createToken(card).then(function(result) {
            if (result.error) {
                // Inform the user if there was an error.
                var errorElement = document.getElementById('card-errors');
                errorElement.textContent = result.error.message;
            } else {
                // Send the token to your server.
                stripeTokenHandler(result.token);
            }
        });
    });

    // Submit the form with the token ID.
    function stripeTokenHandler(token) {
        // Insert the token ID into the form so it gets submitted to the server
        var form = document.getElementById('checkout-form');
        var hiddenInput = document.createElement('input');
        hiddenInput.setAttribute('type', 'hidden');
        hiddenInput.setAttribute('name', 'stripeToken');
        hiddenInput.setAttribute('value', token.id);
        form.appendChild(hiddenInput);

        // Submit the form
        form.submit();
    }


    $(document).ready(function(){
        @if(strstr(Request::url(), 'updatecc'))
            $('#change-card').click();
        @endif
    });

    // Choose Plan
    function purchase(id, name) {
        $('.plan').text(name + ' Subscription');
        $('.plan-hidden').val(id);
    }

    // Submit card update
    function cardUpdate() {
        $('#card-form').submit();
    }

    // Cancel Data
    function cancelData(plan_id, stripe_id, type, trial_end, plan) {
        $('.cancel_plan_id').val(plan_id);
        $('.cancel_stripe_id').val(stripe_id);
        $('.cancel_plan').val(plan);
        $('.cancel_type').val(type);
        $('.cancel_trial_end').html('Your subscription will be terminated on <b>' + trial_end + '</b> upon cancellation. Are you sure you want to cancel?');
    }

    // Upgrade Data
    function upgradeData(plan_id, stripe_id, type) {
        $('#upgrade_plan_id').val(plan_id);
        $('#upgrade_stripe_id').val(stripe_id);
        $('#upgrade_type').val(type);
    }

    // Manage Subscription
    function submitRefund(plan_id, stripe_id, type) {
        if (confirm('Are you sure you want to refund this subscription?')) {
            var data = {
                "_token": "{{ csrf_token() }}"
            };

            if (type == 'canceled') {
                data.push();
            }

            $.post("stripe/manage/" + plan_id + '/' + stripe_id + '/' + type, data, function(data, status) {
                location.reload();
            });
        }
    }

    // Submit Cancel
    function submitCancel() {
        $('#reason-txt').hide();
        if($.trim($('#reason').val()) != '')
        {
            $('#cancel-form').attr('action', "subscriptions/stripe/manage/" + $('.cancel_plan_id').val() + '/' + $('.cancel_stripe_id').val() + '/' + $('.cancel_type').val());

            $('#cancel-form').submit();
        }
        else
        {
            $('#reason-txt').show();
        }
    }

    // Submit Upgrade
    function submitUpgrade() {
        $('#upgrade-form').attr('action', "stripe/manage/" + $('#upgrade_plan_id').val() + '/' + $('#upgrade_stripe_id').val() + '/' + $('#upgrade_type').val());

        $('#upgrade-form').submit();
    }
</script>
<script>
    $(function() {
        $('[data-toggle="tooltip"]').tooltip()
    })
</script>
@stop