@extends('template.master')

@section('page_styles')
    <link rel="stylesheet" href="{{asset('assets/css/datatables/datatables.min.css')}}">
    <style>
        .group {
            background-color: black;
            color:white;
        }
        .paginate_button {
            padding: 0.5%;
            background: black;
            border-radius: 10%;
            color: white;
            margin-left: 1.2%;
        }
        span .paginate_button {
            padding: 6px;
            margin: 0% 1% 0% 1%;
        }
        .dataTables_length {
            float: left;
            margin-top: 0.5%;
        }
        .dataTables_wrapper {
            margin: 2%;
        }
        .login-href {
            float: right;
            color: white;
            font-size: 1em;
        }
    </style>
@stop

@section('content')
    @include('payment.utilities.payment_form')
    @include('payment.utilities.latest_transactions')
    @include('payment.utilities.upcoming_dues')

    <div class="container-fluid">
        <!-- Begin Page Header-->
        <div class="row">
            <div class="page-header">
                <div class="d-flex align-items-center">
                    <h2 class="page-header-title text-gradient-02">Subscription Dashboard</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="row flex-row">
            <div class="col-xl-12">

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

                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-12">
                                <div class="widget has-shadow">
                                    <div class="row">
                                        <div class="col-xl-12">
                                            <div class="widget-header bordered no-actions d-flex align-items-center">
                                                <div class="col-xl-6">
                                                    <h4>Statistics</h4>
                                                </div>
                                                <div class="col-xl-6 no-actions d-flex align-items-center">
                                                    <button type="button" class="btn btn-success ripple mr-1 btn-block" data-toggle="modal" data-target="#latest-transactions-div">Top 10 Latest Transactions</button>
                                                    <button type="button" class="btn btn-success ripple mr-1 mb-2 btn-block" data-toggle="modal" data-target="#upcoming-dues-div">Top 10 Upcoming Dues</button>
                                                </div>
                                            </div>
                                        </div>
                                        <br/>
                                        @foreach($plans as $key => $count)
                                            <div class="col-xl-3">
                                                <div class="widget-36 widget has-shadow">
                                                    <!-- Begin Widget Body -->
                                                    <div class="widget-body">
                                                        <div class="row">
                                                            <div class="col-md-12 bg-success" >
                                                                <div class="text-center p-lg-3">
                                                                    {{ $key }}
                                                                </div>
                                                            </div>
                                                            <div class="col-xl-12 text-center mt-5 mb-5">
                                                                <div class="visitors-nb text-gradient-02">
                                                                    {{ $count }}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- End Widget Body -->
                                                </div>
                                            </div>
                                        @endforeach


                                        <div class="col-xl-12">
                                            <div class="widget-header bordered no-actions d-flex align-items-center">
                                                <h4>Subscription List</h4>
                                            </div>
                                        </div>
                                        <div class="col-xl-12">
                                            <table id="subscription-table"  class="display table mb-0 table-bordered" style="width:100% !important;">
                                                <thead>
                                                <tr>
                                                    <th>Subscription</th>
                                                    <th>Price</th>
                                                    <th>Name</th>
                                                    <th>Start Date</th>
                                                    <th>Trial End</th>
                                                    <th>Next Payment</th>
                                                    <th>Last Payment</th>
                                                    <th>Option</th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                @foreach($users as $ukey => $user)
                                                    @foreach($user as $skey => $subscription)
                                                        @if(isset($subscription['status']))
                                                            <tr>
                                                                <td>
                                                                    <span style="width:120px;"><span class="badge-text badge-text-small danger">Unsubscribed</span></span> &nbsp;
                                                                    {{ $skey }}
                                                                </td>
                                                                <td>${{ number_format($subscription['cost'], 2) }} / {{ $subscription['interval'] }}</td>
                                                                <td>
                                                                    {{ $ukey }}
                                                                    <a href="{{ route('account.customer-login', ['id' => $subscription['user_id']]) }}" onclick="return confirm('Are you sure you want to login this account?');" class="login-href"><i class="ion-close"></i> <small>Login / View as</small></a>
                                                                </td>
                                                                <td></td>
                                                                <td></td>
                                                                <td></td>
                                                                <td></td>
                                                                <td>
                                                                    <button type="button" onclick="javascript: purchase({{ $subscription['id'] }}, '{{ $subscription['name'] }}')" class="btn btn-success ripple mr-1 mb-2 btn-block" data-toggle="modal" data-target="#payment-form">Subscribe Now!</button>
                                                                </td>
                                                            </tr>
                                                        @else
                                                            @php
                                                                $now = time(); 

                                                                if(!empty($subscription->trial_ends_at)) {
                                                                    $payment_date = '';
                                                                    $next_payment = strtotime($subscription->trial_ends_at) - $now;
                                                                    $last_payment = '';
                                                                } else {
                                                                    $payment_date = strtotime($subscription->created_at);
                                                                    $next_payment = strtotime('+1 month', $payment_date) - $now;
                                                                    $last_payment = $now - $payment_date;
                                                                    $payment_date = date('Y/m/d', strtotime($subscription->created_at));
                                                                }
                                                            @endphp
                                                            <tr>
                                                                <td>
                                                                    <span style="width:120px;"><span class="badge-text badge-text-small success">Subscribed</span></span> &nbsp;
                                                                    {{ $skey }}
                                                                </td>
                                                                <td>${{ number_format($subscription->plan->cost, 2) }} / {{ $subscription->plan->interval }}</td>
                                                                <td>
                                                                    {{ $ukey }}
                                                                    <a href="{{ route('account.customer-login', ['id' => $subscription->user_id]) }}" onclick="return confirm('Are you sure you want to login this account?');" class="login-href"><i class="ion-close"></i> <small>Login / View as</small></a>
                                                                </td>

                                                                <td>{{$payment_date}}</td>
                                                                <td>@if(!empty($subscription->trial_ends_at)) {{date('Y/m/d', strtotime($subscription->trial_ends_at))}} @endif</td>
                                                                <td>In {{ round($next_payment / (60 * 60 * 24)) }} days</td>
                                                                <td>@if(!empty($last_payment)) {{ round($last_payment / (60 * 60 * 24)) }} days ago @endif</td>
                                                                <td>
                                                                    <a href="{{ route('payment.stripe.manage', ['plan_id' => $subscription->stripe_plan, 'stripe_id' => $subscription->stripe_id, 'type' => 'upgrade']) }}" onclick="return confirm('Are you sure you want to upgrade this subscription plan?');"><i class="ion-chevron-up"></i> <small>Upgrade</small></a> |
                                                                    <a href="{{ route('payment.stripe.manage', ['plan_id' => $subscription->stripe_plan, 'stripe_id' => $subscription->stripe_id, 'type' => 'refund']) }}" onclick="return confirm('Are you sure you want to refund this subscription plan?');"><i class="ion-reply"></i> <small>Refund</small></a> |
                                                                    <a href="{{ route('payment.stripe.manage', ['plan_id' => $subscription->stripe_plan, 'stripe_id' => $subscription->stripe_id, 'type' => 'canceled']) }}" onclick="return confirm('Are you sure you want to cancel this subscription plan?');"><i class="ion-close"></i> <small>Cancel</small></a> 
                                                                </td>
                                                            </tr>
                                                        @endif
                                                    @endforeach
                                                @endforeach
                                                </tbody>
                                                <tfoot>
                                                <tr>
                                                    <th>Subscription</th>
                                                    <th>Price</th>
                                                    <th>Name</th>
                                                    <th>Start Date</th>
                                                    <th>Trial End</th>
                                                    <th>Next Payment</th>
                                                    <th>Last Payment</th>
                                                    <th>Option</th>
                                                </tr>
                                                </tfoot>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

            </div>
        </div>
        <!-- End Row -->

    </div>

@stop

@section('page_modals')

@stop
@section('page_scripts')
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://js.stripe.com/v3/"></script>
    <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();
        }


        $(function(){
            var groupColumn = 2;
            var table = $('#subscription-table').DataTable({
                "columnDefs": [
                    { "visible": false, "targets": groupColumn }
                ],
                "order": [[ groupColumn, 'asc' ]],
                "displayLength": 50,
                "drawCallback": function ( settings ) {
                    var api = this.api();
                    var rows = api.rows( {page:'current'} ).nodes();
                    var last=null;

                    api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
                        if ( last !== group ) {
                            $(rows).eq( i ).before(
                                '<tr class="group"><td colspan="7">'+group+'</td></tr>'
                            );

                            last = group;
                        }
                    } );
                }
            } );

            // Order by the grouping
            $('#subscription-table tbody').on( 'click', 'tr.group', function () {
                var currentOrder = table.order()[0];
                if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
                    table.order( [ groupColumn, 'desc' ] ).draw();
                }
                else {
                    table.order( [ groupColumn, 'asc' ] ).draw();
                }
            } );
        } );

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

        // function loginCustomer(id)
        // {
        //     $.post("account/customer-login/"+id, [], function(data, status){
        //         if(data)
        //         {
        //             location.();
        //         }
        //     });
        // }
    </script>
@stop