@extends('admin.layout')

@section('content')
<style>
    @media(max-width:575px){

        .box-primary{
            padding-top:20px !important;
        }
    }
    
</style>
    <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>
        
 
           <div class="box-body">
                        <div class="row">
                            <div class="box box-primary">

 <div class="col-sm-12 mt-2 mt-sm-0">
                                <div class="form-group img-div-ph">
                                    <div class="form-group slider-files">
                                        <div class="col-sm-12 image" style="text-align:center">
                                        @php 
                                            $user_profile_image = Auth()->user()->profile_image ?: NULL; 
                                            $username = Auth::user()->name;
                                        @endphp

                <img src="{{ is_null($user_profile_image) ? "https://ui-avatars.com/api/?background=random&name=$username" : $user_profile_image }}" class="user-img-passport" alt="User Image" style="width: 150px;height:180px;border:2px solid #3C8DBC; 
    padding: 0;margin-bottom:20px;object-fit:cover;">
            </div>
                                         
                                    </div>
                                </div>
                            </div>


                            <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Full Name</label>
                                        <span class="info-box-text">{{$user->name}}</span>

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

                             <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Email</label>
                                    <span class="info-box-text">{{$user->email}}</span>

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

                             <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Phone</label>
                                        <span class="info-box-text">{{$user->phone}}</span>

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

                             <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>ID Number</label>
                                    <span class="info-box-text">{{$user->staffDetail->id_number}}</span>
                                    </div>
                                </div>
                            </div>

                             <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Staff Number</label>
                                    <span class="info-box-text">{{$user->staffDetail->staff_number}}</span>
                                    </div>
                                </div>
                            </div>

                             <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Job Number</label>
                                    <span class="info-box-text">{{$user->staffDetail->job_title}}</span>
                                    </div>
                                </div>
                            </div>

                             <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Department</label>
                                         
                                     <span class="info-box-text">{{$user->staffDetail->department}}</span>

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

                             <div class="col-sm-3">
                                <div class="form-group">
                                    <div class="form-group slider-files">
                                        <label>Region</label>
                                        <span class="info-box-text">{{$user->staffDetail->region}}</span>
                                         
                                    </div>
                                </div>
                            </div>

</div>

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

    <!-- Main content -->
    @if(check_Permission('Dashboard', 'view'))
    <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">TV Shows</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 -->
        <!--<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 class="info-box-content">-->
        <!--            <span class="info-box-text">Total Revenue</span>-->
        <!--            <span class="info-box-number">${{$total['revenue'] + $total['paypal_transactions']}}</span>-->
        <!--        </div>-->
                
        <!--    </div>-->
            
        <!--</div>-->
        <!-- /.col -->



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

    <!--<hr>-->
    <div style="margin-bottom:20px;margin-top:10px;text-align: center">
            <label for="date">Select Date:</label>
            <input type="text" name="daterange" autocomplete="off" class="datepicker"/>
        </div>
        <!-- Info boxes -->


      
        <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 -->

        <!-- /.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>
        <!-- /.row -->

        <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>
    @endif
    <!-- /.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>
    
        @if(check_Permission('Dashboard', 'view'))
     
    
        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('');
        });
        @endif
    </script>
@endsection