@extends('template.master')

@section('page_styles')
<link rel="stylesheet" href="{{ asset('assets/css/datatable/jquery.dataTables.min.css') }}">
<link rel="stylesheet" href="{{asset('css/layout/payment.css')}}">
<style>
    .group {
        background-color: black;
        color: white;
    }

    .dataTables_length {
        float: left;
        margin-top: 0.5%;
    }

    .dataTables_wrapper {
        margin: 2%;
    }

    .login-href {
        float: right;
        color: white;
        font-size: 1em;
    }
    #success
    {
        float: right;
        padding: 1%;
        border: 1px solid darkseagreen;
        background: lightgreen;
        color: white;
    }

    #subscriptions-tbl tr td {
        padding: 0;
    }

    .show-calendar{
        z-index: 9999 !important;
    }
</style>
@stop

@section('content')
    <div id="success" style="display: none">
        Successful!
    </div>
    @include('payment.utilities.payment_override')
    @include('payment.utilities.cancel_option')
    @include('payment.utilities.password_reset')

<div class="container-fluid payment-dashboard">
    <!-- 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>

    <!--New Design Start -->
    <div class="d-flex main-content flex-wrap">
        <div class="left">
            <div class="overview-row">
                <div class="chart-container">

                    <div class="widget has-shadow">
                        <div class="widget-header bordered d-flex align-items-center p-4">
                            <h2>Monthly Subscriptions</h2>
                        </div>
                        <div class="widget-body">
                            <div class="chart">
                                <canvas id="transactions-chart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="transactions">
                    <div class="widget has-shadow">
                        <div class="widget-header bordered d-flex align-items-center p-4">
                            <h2>Total Subscriptions</h2>
                        </div>
                        <div class="widget-body pb-3 pt-3">
                            <div class="row">
                                <div class="col-xl-4 col-md-4 col-sm-4">
                                    <div class="widget widget-12 has-shadow m-0 mt-3 mb-3">
                                        <div class="widget-body">
                                            <div class="media">
                                                <div class="media-body align-self-center">
                                                    <div class="title">{{ $statistics['Real Time Social'][date('Y-m')] }}</div>
                                                    <div class="number"> Real Time Social</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-4 col-md-4 col-sm-4">
                                    <div class="widget widget-12 has-shadow m-0 mt-3 mb-3">
                                        <div class="widget-body">
                                            <div class="media">
                                                <div class="media-body align-self-center">
                                                    <div class="title">{{ $statistics['Real Time Reviews'][date('Y-m')] }}</div>
                                                    <div class="number"> Real Time Reviews</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-xl-4 col-md-4 col-sm-4">
                                    <div class="widget widget-12 has-shadow m-0 mt-3 mb-3">
                                        <div class="widget-body">
                                            <div class="media">
                                                <div class="media-body align-self-center">
                                                    <div class="title">{{ $statistics['Real Time Chat'][date('Y-m')] }}</div>
                                                    <div class="number"> Real Time Chat</div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>



            <table id="subscriptions-tbl" class="subscriptions-list display" style="width:100%">
                <thead>
                    <tr>
                        <th>&nbsp;</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>&nbsp;</th>
                    </tr>
                </tfoot>
            </table>


            {{-- <div class="subscriptions-list">
                <div class="row">
                    <table class="table">
                        <tr>
                            <td style="width: 90%"><input type="text" id="search" class="form-control" placeholder="Input user's name to search..."></td>
                            <td style="width: 10%"><button type="button" onclick="javascript: load_users()" class="btn btn-primary btn-square btn-lg">Search</button></td>
                        </tr>
                    </table>
                </div>

                <ul id="result-list" class="result-list">Please wait for a while. We are loading your data...</ul>

                <br/>
                <div class="col-md-12">
                    <center>
                        <b class="paging">Page </b><b class="paging" id="current">1</b> <b class="paging"> of </b><b class="paging" id="last_page"></b><b style="display: none;" id="total_count"></b> <br/>
                        <button type="button" onclick="javascript: pagination('back')" class="btn btn-primary btn-square btn-lg">Back</button> | <button type="button" onclick="javascript: pagination('next')" class="btn btn-primary btn-square btn-lg">Next</button>
                    </center>
                </div>

            </div> --}}




        </div>
        <div class="right">
            <div class="widget widget-18 has-shadow">
                <!-- Begin Widget Header -->
                <div class="widget-header bordered d-flex align-items-center p-4">
                    <h2>Transaction Logs</h2>
                </div>
                <!-- End Widget Header -->
                <div class="widget-body">
                    <ul class="nav nav-tabs nav-fill" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="just-tab-1" data-toggle="tab" href="#j-tab-1" role="tab" aria-controls="j-tab-1" aria-selected="true">Latest Payments</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="just-tab-2" data-toggle="tab" href="#j-tab-2" role="tab" aria-controls="j-tab-2" aria-selected="false">Recent Cancellation</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="just-tab-3" data-toggle="tab" href="#j-tab-3" role="tab" aria-controls="j-tab-3" aria-selected="false">Failed Payments</a>
                        </li>
                    </ul>
                    <div class="tab-content pt-3">
                        <div class="tab-pane fade show active" id="j-tab-1" role="tabpanel" aria-labelledby="just-tab-1">
                            @foreach($latest_transactions as $date => $latest)
                            <div class="group">
                                <div class="title">
                                    <div class="date-container">
                                        <span class="date">{{ $date }}</span>
                                    </div>
                                    <div class="payments-on-date">
                                        <span class="count">{{ count($latest_transactions[$date]) }}</span>
                                        <span class="text">@if(count($latest_transactions[$date]) > 1) Payments @else Payment @endif</span>
                                    </div>
                                </div>
                                <ul class="list-group w-100 ">
                                    @foreach($latest as $transaction)
                                    <li class="list-group-item">
                                        <div class="other-message">
                                            <div class="media">
                                                <div class="media-body align-self-center">
                                                    <div class="other-message-sender">{{ $transaction->user->name }} &nbsp; ({{ $transaction->user->email }})</div>
                                                    <div class="other-message-time"><b>{{ $transaction->name }}</b> <br/>paid on <span class="text-green">{{ date('h:i a', strtotime($transaction->created_at)) }}</span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endforeach
                        </div>
                        <div class="tab-pane fade" id="j-tab-2" role="tabpanel" aria-labelledby="just-tab-2">
                            @foreach($latest_cancellations as $date => $recent)
                            <div class="group">
                                <div class="title">
                                    <div class="date-container">
                                        <span class="date">{{ $date }}</span>
                                    </div>
                                    <div class="payments-on-date">
                                        <span class="count">{{ count($latest_cancellations[$date]) }}</span>
                                    </div>
                                </div>
                                <ul class="list-group w-100 ">
                                    @foreach($recent as $transaction)
                                    <li class="list-group-item">
                                        <div class="other-message">
                                            <div class="media">
                                                <div class="media-body align-self-center">
                                                    <div class="other-message-sender">{{ $transaction->user->name }} &nbsp; ({{ $transaction->user->email }})</div>
                                                    <div class="other-message-time">{{ $transaction->cancel_reason }}</div>
{{--                                                    <div class="other-message-time"><b>{{ $transaction->plan->name }} </b><br/> cancelled on <span class="text-red">{{ date('M d, Y h:i a', strtotime($transaction->ends_at)) }}</span> <br/>Reason: @if(!empty($transaction->cancel_reason)) {{ $transaction->cancel_reason }} @else N/A @endif</div>--}}
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    @endforeach
                                </ul>
                            </div>
                            @endforeach
                        </div>
                        <div class="tab-pane fade" id="j-tab-3" role="tabpanel" aria-labelledby="just-tab-3">
                            @if(!empty($failed_payments))
                                @foreach($failed_payments as $date => $failed)
                                <div class="group">
                                    <div class="title">
                                        <div class="date-container">
                                            <span class="date">{{ $date }}</span>
                                        </div>
                                        <div class="payments-on-date">
                                            <span class="count">{{ count($failed_payments[$date]) }}</span>
                                        </div>
                                    </div>
                                    <ul class="list-group w-100 ">
                                        @foreach($failed as $failed_payment)
                                        <li class="list-group-item">
                                            <div class="other-message">
                                                <div class="media">
                                                    <div class="media-body align-self-center">
                                                        <div class="other-message-sender">{{ $failed_payment->user->name }} &nbsp; ({{ $transaction->user->email }})</div>
                                                        <div class="other-message-time"><b>{{ $failed_payment->plan->name }} </b></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endforeach
                            @else
                                No Failed Payments
                            @endif
                        </div>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <!--New Design End -->

</div>

@stop

@section('page_modals')

@stop
@section('page_scripts')
<script src="{{ asset('assets/js/datatable/jquery.dataTables.min.js') }}"></script>
{{-- <script src="https://js.stripe.com/v3/"></script> --}}
<script>

    $(document).ready(function() {

        $('#subscriptions-tbl').DataTable( {
            "processing": true,
            "serverSide": true,
            "ajax": "{{route('payment.load')}}"
        } );


    } );

    var limit = 25;

    $(document).ready(function(){
        // load_users();

        var ctxTransactions = document.getElementById('transactions-chart').getContext("2d");

        var data = "{{ implode(',', array_keys($statistics_date)) }}";

        var transactionsChart = new Chart(ctxTransactions, {
            type: 'line',
            data: {
                labels: data.split(','),
                datasets: [{
                    label: "Real Time Social",
                    borderColor: "#08a6c3",
                    pointBackgroundColor: "#08a6c3",
                    pointHoverBorderColor: "#08a6c3",
                    pointHoverBackgroundColor: "#08a6c3",
                    pointBorderColor: "#fff",
                    pointBorderWidth: 3,
                    pointRadius: 6,
                    fill: true,
                    backgroundColor: "transparent",
                    borderWidth: 3,
                    data: [{{ implode(', ', $statistics['Real Time Social']) }}]
                },{
                    label: "Real Time Reviews",
                    borderColor: "green",
                    pointBackgroundColor: "green",
                    pointHoverBorderColor: "green",
                    pointHoverBackgroundColor: "green",
                    pointBorderColor: "#fff",
                    pointBorderWidth: 3,
                    pointRadius: 6,
                    fill: true,
                    backgroundColor: "transparent",
                    borderWidth: 3,
                    data: [{{ implode(', ', $statistics['Real Time Reviews']) }}]
                },{
                    label: "Real Time Chat",
                    borderColor: "orange",
                    pointBackgroundColor: "orange",
                    pointHoverBorderColor: "orange",
                    pointHoverBackgroundColor: "orange",
                    pointBorderColor: "#fff",
                    pointBorderWidth: 3,
                    pointRadius: 6,
                    fill: true,
                    backgroundColor: "transparent",
                    borderWidth: 3,
                    data: [{{ implode(', ', $statistics['Real Time Chat']) }}]
                }]
            },
            options: {
                responsive: true,
                legend: {
                    display: false
                },
                tooltips: {
                    backgroundColor: 'rgba(47, 49, 66, 0.8)',
                    titleFontSize: 13,
                    titleFontColor: '#fff',
                    caretSize: 0,
                    cornerRadius: 4,
                    xPadding: 10,
                    displayColors: false,
                    yPadding: 10
                },
                scales: {
                    yAxes: [{
                        ticks: {
                            display: true,
                            beginAtZero: true
                        },
                        gridLines: {
                            drawBorder: true,
                            display: true
                        }
                    }],
                    xAxes: [{
                        gridLines: {
                            drawBorder: true,
                            display: true
                        },
                        ticks: {
                            display: true
                        }
                    }]
                }
            }
        });
    });

    
    // Load Report Data
    function load_users()
    {
        var offset = $('#current').text();
        var search = $('#search').val();

        $.ajax({
            type: 'GET',
            url: '{{route('payment.load')}}?offset='+offset+'&limit='+limit+'&search='+search,
            dataType: 'json',
            success: function(resp) {
                $('#result-list').html(resp.data);
                $('.paging').show();
                $('#current').text(resp.current);
                $('#last_page').text(Math.ceil(parseInt(resp.total_count)/5));
                $('#display_total').text(parseInt(resp.current)+4);
                $('#total_count').text(resp.total_count);
            }
        });
    }

    // Stripe Sync
    function sync(path)
    {
        $.ajax({
            type: 'GET',
            url: path,
            dataType: 'json',
            success: function(resp) {
                alert('Data Sync');
                $('#subscriptions-tbl').DataTable().ajax.reload();
            }
        });
    }

    // Password Reset
    function password_reset(email)
    {
        $('.password-loading').text('Loading...');
        $.ajax({
            type: 'POST',
            url: '{{ route('account.reset_link') }}',
            dataType: 'json',
            data: {
                "_token": "{{ csrf_token() }}",
                "email": email
            },
            success: function(resp) {
                $('.password-loading').hide();
                $('.password_reset_link').val(resp.link);
            }
        });
    }

    

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

    // Pagination
    function pagination(type)
    {
        var current = parseInt($('#current').text());
        var total_count = parseInt($('#total_count').text());

        var page = (type == 'back') ? current-1 : current+1;
        if((type == 'back' && page*limit > 0) || (type == 'next' && page*limit > 0 && current*limit <= total_count))
        {
            $('.paging').hide();
            $('#current').text(page);
            load_users();
        }
    }

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


    // 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?');
    }

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

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

</script>
@stop