@extends('admin.layout')
@section('content')
<section class="content-header">
    <h1>
        Dashboard
    </h1>
    <ol class="breadcrumb">
        <li><a><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Dashboard</li>
    </ol>
</section>

<!-- Main content -->
<section class="content">
    <!-- Info boxes -->
    <div class="row">
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="fa fa-video-camera"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Total Videos</span>
                    <span class="info-box-number">{{$total['videos']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-yellow"><i class="fa fa-users"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Total Subscribers </span>
                    <span class="info-box-number">{{$total['subscribers']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-red"><i class="fa fa-users"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Total Production Team </span>
                    <span class="info-box-number">{{$total['production_team']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- fix for small devices only -->
        <div class="clearfix visible-sm-block"></div>

        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-green"><i class="fa fa-suitcase"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Video Categories</span>
                    <span class="info-box-number">{{$total['tv_shows']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-red"><i class="fa fa-map-signs"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Total Staff</span>
                    <span class="info-box-number">{{$total['staff']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->


        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-green"><i class="fa fa-map-signs"></i></span>

                <div class="info-box-content" id="total_mpasa_transaction">
                    <span class="info-box-text">Total M-Pesa Transactions</span>
                    <span class="info-box-number" id="mpasaCount">{{$total['transactions']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="fa fa-map-signs"></i></span>

                <div class="info-box-content" id="total_paypal_transaction">
                    <span class="info-box-text">Total PayPal Transactions</span>
                    <span class="info-box-number" id="paypalCount">{{$total['paypal_transactions_count']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-aqua"><i class="fa fa-map-signs"></i></span>

                <div class="info-box-content">
                    <span class="info-box-text">Total Credit Card Transactions</span>
                    <span class="info-box-number">0</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <!-- /.col -->

        <!-- /.col -->



    </div>




    <section class="content-header"
        style="padding:5px 5px;margin:5vh 0 0 0;background-color:#3C8DBC;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;">
        <h1 style="margin:5px 0;color:#fff;">
            Verity Media Network
        </h1>
        <div style="text-align: center;margin:5px 0;">
            <label for="date" style="color:#fff;">Select Date:</label>
            <input type="text" name="daterange" autocomplete="off" class="datepicker" />
        </div>
    </section>


    <div class="row">
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">

            <div class="info-box">
                <span class="info-box-icon bg-blue"><i class="fa fa-map-signs"></i></span>

                <div id="total_revenue" class="info-box-content">
                    <span class="info-box-text">Total Revenue</span>
                    <span class="info-box-number"
                        id="totalRevenue">${{$total['revenue'] + $total['paypal_transactions']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-blue"><i class="fa fa-map-signs"></i></span>

                <div id="mPesa_transactions" class="info-box-content">
                    <span class="info-box-text">Total M-Pesa Payment</span>
                    <span class="info-box-number" id="mPesa">${{$total['revenue']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-blue"><i class="fa fa-map-signs"></i></span>

                <div id="paypal_transactions" class="info-box-content">
                    <span class="info-box-text">Total Paypal Payment</span>
                    <span class="info-box-number" id="paypal">${{$total['paypal_transactions']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-blue"><i class="fa fa-map-signs"></i></span>

                <div id="paypal_transactions" class="info-box-content">
                    <span class="info-box-text">Total Credit Card Payment</span>
                    <span class="info-box-number" id="paypal">$0.0</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
    </div>



    <section class="content-header"
        style="padding:5px 5px;margin:5vh 0 0 0;background-color:#3C8DBC;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;">
        <h1 style="margin:5px 0;color:#fff;">
            365 Sports Channel
        </h1>
        <div style="text-align: center;margin:5px 0;">
            <label for="date" style="color:#fff;">Select Date:</label>
            <input type="text" name="daterange" autocomplete="off" class="datepicker-1" />
        </div>
    </section>


    <div class="row">
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">

            <div class="info-box">
                <span class="info-box-icon bg-blue"><i class="fa fa-map-signs"></i></span>

                <div id="total_revenue_365" class="info-box-content">
                    <span class="info-box-text">Total Revenue</span>
                    <span class="info-box-number"
                        id="totalRevenue-365">${{$total['channel_3_revenue'] + $total['channel_3_paypal_transactions']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-blue"><i class="fa fa-map-signs"></i></span>

                <div id="mPesa_transactions_365" class="info-box-content">
                    <span class="info-box-text">Total M-Pesa Payment</span>
                    <span class="info-box-number" id="mPesa-365">${{$total['channel_3_revenue']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-blue"><i class="fa fa-map-signs"></i></span>

                <div id="paypal_transactions_365" class="info-box-content">
                    <span class="info-box-text">Total Paypal Payment</span>
                    <span class="info-box-number" id="paypal-365">${{$total['channel_3_paypal_transactions']}}</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->

        <!-- /.col -->
        <div class="col-md-3 col-sm-6 col-xs-12">
            <div class="info-box">
                <span class="info-box-icon bg-blue"><i class="fa fa-map-signs"></i></span>

                <div id="paypal_transactions" class="info-box-content">
                    <span class="info-box-text">Total Credit Card Payment</span>
                    <span class="info-box-number" id="paypal">$0.0</span>
                </div>
                <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
        </div>
        <!-- /.col -->
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">Weekly Video Report</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i
                                class="fa fa-times"></i></button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="row">
                        <div class="col-md-12">
                            <p class="text-center">
                                <strong>Videos: {{\Carbon\Carbon::now()->subDay(6)->format('d M,Y')}} -
                                    {{\Carbon\Carbon::now()->subDay(0)->format('d M,Y')}}</strong>
                            </p>

                            <div class="chart">
                                <!-- Sales Chart Canvas -->
                                <canvas id="salesChart" style="height: 280px;"></canvas>
                            </div>
                            <!-- /.chart-responsive -->
                        </div>

                    </div>
                    <!-- /.row -->
                </div>

                <!-- /.box-footer -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->
@endsection

@section('custom-scripts')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
    var salesChartCanvas = $('#salesChart').get(0).getContext('2d');
    // This will get the first returned node in the jQuery collection.
    var salesChart = new Chart(salesChartCanvas);

    var salesChartData = {
        labels: ['{{\Carbon\Carbon::now()->subDay(6)->format('l')}}', '{{\Carbon\Carbon::now()->subDay(5)->format('l')}}', '{{\Carbon\Carbon::now()->subDay(4)->format('l')}}', '{{\Carbon\Carbon::now()->subDay(3)->format('l')}}', '{{\Carbon\Carbon::now()->subDay(2)->format('l')}}', '{{\Carbon\Carbon::now()->subDay(1)->format('l')}}', '{{\Carbon\Carbon::now()->subDay(0)->format('l')}}'],
        datasets: [
            {
                label: 'Videos',
                fillColor: 'rgba(60,141,188,0.9)',
                strokeColor: 'rgba(60,141,188,0.8)',
                pointColor: '#3b8bba',
                pointStrokeColor: 'rgba(60,141,188,1)',
                pointHighlightFill: '#fff',
                pointHighlightStroke: 'rgba(60,141,188,1)',
                data: [{{$videos['6']}}, {{$videos['5']}}, {{$videos['4']}}, {{$videos['3']}}, {{$videos['2']}}, {{$videos['1']}}, {{$videos['0']}}]
            },

        ]
    };

    $(function () {
        $(".datepicker").daterangepicker({
            opens: 'left',
            "processing": true,
            "serverSide": true,
        }, function (start, end) {
            var from_date = start.format('YYYY-MM-DD');
            var to_date = end.format('YYYY-MM-DD');
            document.getElementById("mPesa").remove();
            document.getElementById("paypal").remove();
            document.getElementById("totalRevenue").remove();
            document.getElementById("mpasaCount").remove();
            document.getElementById("paypalCount").remove();

            $.ajax({
                type: 'GET',
                url: "{{ route('admin.payment') }}",
                data: { from_date: from_date, to_date: to_date },
                success: function (data) {
                    console.log(JSON.stringify(data))
                    var paypal = "<span class='info-box-number' id='paypal'>$" + data.paypal_transactions + "</span>";
                    $('#paypal_transactions').append(paypal);
                    var mPesa = "<span class='info-box-number' id='mPesa'>$" + data.mPesa_transactions + "</span>";
                    $('#mPesa_transactions').append(mPesa);

                    var totalRevenu = "<span class='info-box-number' id='totalRevenue'>$" + data.totalRevenue + "</span>";
                    $('#total_revenue').append(totalRevenu);

                    var totalMpasaTransaction = "<span class='info-box-number' id='mpasaCount'>" + data.mPesa_transactions_count + "</span>";
                    $('#total_mpasa_transaction').append(totalMpasaTransaction);

                    var totalPayPalTransaction = "<span class='info-box-number' id='paypalCount'>" + data.paypal_transactions_count + "</span>";
                    $('#total_paypal_transaction').append(totalPayPalTransaction);
                }
            });
        });
        $('.datepicker').val('');
    });


    $(function () {
        $(".datepicker-1").daterangepicker({
            opens: 'left',
            "processing": true,
            "serverSide": true,
        }, function (start, end) {
            var from_date = start.format('YYYY-MM-DD');
            var to_date = end.format('YYYY-MM-DD');
            document.getElementById("mPesa-365").remove();
            document.getElementById("paypal-365").remove();
            document.getElementById("totalRevenue-365").remove();
            document.getElementById("mpasaCount").remove();
            document.getElementById("paypalCount").remove();

            $.ajax({
                type: 'GET',
                url: "{{ route('admin.payment.channel3') }}",
                data: { from_date: from_date, to_date: to_date },
                success: function (data) {
                    console.log(JSON.stringify(data))
                    var paypal = "<span class='info-box-number' id='paypal-365'>$" + data.paypal_transactions + "</span>";
                    $('#paypal_transactions_365').append(paypal);
                    var mPesa = "<span class='info-box-number' id='mPesa-365'>$" + data.mPesa_transactions + "</span>";
                    $('#mPesa_transactions_365').append(mPesa);

                    var totalRevenue = "<span class='info-box-number' id='totalRevenue-365'>$" + data.totalRevenue + "</span>";
                    $('#total_revenue_365').append(totalRevenue);

                    var totalMpasaTransaction = "<span class='info-box-number' id='mpasaCount-365'>" + data.mPesa_transactions_count + "</span>";
                    $('#total_mpasa_transaction').append(totalMpasaTransaction);

                    var totalPayPalTransaction = "<span class='info-box-number' id='paypalCount-365'>" + data.paypal_transactions_count + "</span>";
                    $('#total_paypal_transaction').append(totalPayPalTransaction);
                }
            });
        });
        $('.datepicker-1').val('');
    });
</script>
@endsection