@extends('admin.app')

@section('title') Admin Dashboard @endsection
@section('styles')
<link rel="stylesheet" href="{{ asset('/css1/adminlte.css') }}">
<style>
    .btn-logout{
    background-color: rgb(109, 109, 109);
    border-style: none;
    color: #fff;
    }
    .btn-logout:hover {
        background-color:rgb(77, 76, 76);
        color: #fff;
    }
</style>
@endsection
@push('head-scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.2/chart.min.js" integrity="sha512-tMabqarPtykgDtdtSqCL3uLVM0gS1ZkUAVhRFu1vSEFgvB73niFQWJuvviDyBGBH22Lcau4rHB5p2K2T0Xvr6Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="{{ asset('/js1/main.js') }}"></script>
<script src="{{ asset('/js1/adminlte.js') }}"></script>
<script src="{{ asset('/js1/demo.js') }}"></script>
@endpush
@section('content')
<div class="single-product-tab-area">
    <!-- Single pro tab review Start-->
    <div class="single-pro-review-area">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="review-tab-pro-inner">
                        <div class="error_msg">
                            <p style="text-align: center; color: red;" id="errMsg"></p>
                        </div>

                        <!-- Main content -->
                        <section class="content">
                            <div class="container-fluid">
                                <div class="row">

                                    <div class="col-md-12">
                                        <!-- DONUT CHART -->
                                        <div class="card ">
                                            <div class="card-header card-honey">
                                                <h3 class="card-title">Order Status</h3>
                                                <div class="card-tools">
                                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                        <i class="fas fa-minus"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-6">
                                                        <canvas id="donutChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                                    </div>
                                                    <div class="col-6">
                                                        <table class="status-table table table-striped table-bordered">
                                                            <thead>
                                                                <tr>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>Unassigned</td>
                                                                    <td>{{ $orderStatuses->unassigned }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Assigned</td>
                                                                    <td>{{ $orderStatuses->assigned }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Pickup</td>
                                                                    <td>{{ $orderStatuses->pickup }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Staged</td>
                                                                    <td>{{ $orderStatuses->staged }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>In Transit</td>
                                                                    <td>{{ $orderStatuses->in_transit }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Delivery</td>
                                                                    <td>{{ $orderStatuses->delivery }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Cancelled</td>
                                                                    <td>{{ $orderStatuses->cancelled }}</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Delayed</td>
                                                                    <td>{{ $orderStatuses->delay }}</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>

                                            </div>
                                            <!-- /.card-body -->
                                        </div>
                                        <!-- /.card -->
                                    </div>

                                    <div class="col-md-12">
                                        <!-- AREA CHART: Task Completion-Days -->
                                        <div class="card">
                                            <div class="card-header card-honey">
                                                <h3 class="card-title">Task Completion-Days</h3>

                                                <div class="card-tools">
                                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                        <i class="fas fa-minus"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>

                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-lg-7 col-md-12 col-sm-12">
                                                        <div class="chart">
                                                            {{-- new --}}
                                                            <div class="wid-vectormap">
                                                                <div class="spacer"></div>
                                                                <canvas id="lead_canvas" height="280" width="600"></canvas>
                                                                <div class="spacer"></div>
                                                            </div>
                                                            {{-- new --}}
                                                            {{-- <canvas id="areaChart" style="min-height: 250px; height: 350px; max-height: 350px; max-width: 100%;"></canvas> --}}
                                                        </div>
                                                    </div>
                                                    <div class="col-lg-5 col-md-12 col-sm-12">
                                                        <table id="task-days-table" class="task-table table table-striped table-bordered">
                                                        <thead>
                                                            <tr>
                                                                <td>Status</td>
                                                                @foreach($dates as $key => $date)
                                                                    <td>{{ $date->format('d M') }}</td>
                                                                @endforeach
                                                            </tr>
                                                        </thead>
                                                            <tbody>
                                                                @foreach($lineData as $data)
                                                                @if($data->order_status_id <= 8)
                                                                    <tr>
                                                                        <td>
                                                                                                                                                    </td>
                                                                        <td>{{$data->day1}}</td>
                                                                        <td>{{$data->day2}}</td>
                                                                        <td>{{$data->day3}}</td>
                                                                        <td>{{$data->day4}}</td>
                                                                        <td>{{$data->day5}}</td>
                                                                        <td>{{$data->day6}}</td>
                                                                        <td>{{$data->day7}}</td>
                                                                    </tr>
                                                                @endif    
                                                                @endforeach
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- /.card -->

                                    </div>
                                    <!-- /.col (LEFT) -->
                                    <div class="col-md-12">

                                        <div class="card">
                                            <div class="card-header card-honey">
                                                <h3 class="card-title">Task Completion-Agents</h3>

                                                <div class="card-tools">
                                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                        <i class="fas fa-minus"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-lg-7 col-md-12 col-sm-12">
                                                        <canvas id="barChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>
                                                    </div>
                                                    <div class="col-lg-5 col-md-12 col-sm-12">
                                                        <table id="task-agent-table" class="task-table table table-striped table-bordered">
                                                            <thead>
                                                                <tr>
                                                                    <td>ID</td>
                                                                    <td>Name</td>
                                                                    <td>Accepted</td>
                                                                    <td>Delivered</td>
                                                                    <td>In Process</td>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                                <tr>
                                                                    <td>1</td>
                                                                    <td>Dona</td>
                                                                    <td>1</td>
                                                                    <td>1</td>
                                                                    <td>0</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>2</td>
                                                                    <td>Ayaka</td>
                                                                    <td>0</td>
                                                                    <td>2</td>
                                                                    <td>4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>3</td>
                                                                    <td>Adi</td>
                                                                    <td>1</td>
                                                                    <td>2</td>
                                                                    <td>3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>4</td>
                                                                    <td>Andrew</td>
                                                                    <td>3</td>
                                                                    <td>2</td>
                                                                    <td>1</td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- /.card-body -->
                                        </div>
                                        <!-- /.card -->

                                        <!-- STACKED BAR CHART -->
                                        {{-- <div class="card">
                                            <div class="card-header card-honey">
                                                <h3 class="card-title">Agent Reports</h3>

                                                <div class="card-tools">
                                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                        <i class="fas fa-minus"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <div class="chart">
                                                    <!-- <canvas id="stackedBarChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas> -->
                                                    <!-- <div class="col-4"> -->
                                                    <table id="agent-report-table" class="table table-striped table-bordered">
                                                        <thead>
                                                            <tr>
                                                                <th>No.</th>
                                                                <th>Name</th>
                                                                <th>Mobile</th>
                                                                <th>Total KM Travelled</th>
                                                                <th>Total KM Travelled for Delivery</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <tr id="1">
                                                                <td>1</td>
                                                                <td>Dona</td>
                                                                <td>0000000000</td>
                                                                <td>3.2</td>
                                                                <td>0.0</td>
                                                            </tr>
                                                            <tr id="2">
                                                                <td>2</td>
                                                                <td>Ayaka</td>
                                                                <td>0000000000</td>
                                                                <td>0</td>
                                                                <td>0.0</td>
                                                            </tr>
                                                            <tr id="3">
                                                                <td>3</td>
                                                                <td>Adi</td>
                                                                <td>0000000000</td>
                                                                <td>6.9</td>
                                                                <td>4.0</td>
                                                            </tr>
                                                            <tr id="4">
                                                                <td>4</td>
                                                                <td>Andrew</td>
                                                                <td>0000000000</td>
                                                                <td>0</td>
                                                                <td>0.0</td>
                                                            </tr>
                                                            <tr id="5">
                                                                <td>5</td>
                                                                <td>Saki</td>
                                                                <td>0000000000</td>
                                                                <td>0</td>
                                                                <td>0.0</td>
                                                            </tr>
                                                            <tr id="6">
                                                                <td>6</td>
                                                                <td>Diana</td>
                                                                <td>0000000000</td>
                                                                <td>0</td>
                                                                <td>0.0</td>
                                                            </tr>
                                                        </tbody>
                                                    </table>
                                                    <!-- </div> -->
                                                </div>
                                            </div>
                                        </div> --}}

                                        <!-- /.card -->

                                         <!-- STACKED BAR CHART -->
                                         <div class="card">
                                            <div class="card-header card-honey">
                                                <h3 class="card-title">Driver Reports</h3>

                                                <div class="card-tools">
                                                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                                        <i class="fas fa-minus"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-tool" data-card-widget="remove">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </div>
                                            </div>
                                            <div class="card-body">
                                                <div class="chart">
                                                    <!-- <canvas id="stackedBarChart" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas> -->
                                                    <!-- <div class="col-4"> -->
                                                    <table id="agent-report-table" class="table table-striped table-bordered">
                                                        <thead>
                                                            <tr>
                                                                <th>Name</th>
                                                                <th>Mobile</th>
                                                                <th>Email</th>
                                                            </tr>
                                                        </thead>
                                                        @foreach ($getDrivers->unique('driver_first_name') as $driver)
                                                            <tr>
                                                                <td>{{ $driver->driver_first_name }} {{ $driver->driver_last_name }}</td>
                                                                <td>{{ $driver->driver_phone }}</td>
                                                                <td>{{ $driver->email }}</td>
                                                            </tr>
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                    <!-- </div> -->
                                                </div>
                                            </div>
                                        </div>

                                        <!-- /.card -->
                                    </div>
                                    <!-- /.col (RIGHT) -->
                                </div>
                                <!-- /.row -->
                            </div><!-- /.container-fluid -->
                        </section>
                        <!-- /.content -->


                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
    $(document).ready(function(){
        window.onload = function() {
            var ctx1 = document.getElementById("lead_canvas").getContext("2d");
            var barChartData = {!! $lineChart !!}
            window.myBar = new Chart(ctx1, {
                type: 'bar',
                data: barChartData,
                options: {
                    elements: {
                        rectangle: {
                            borderWidth: 2,
                            borderColor: '#c1c1c1',
                            borderSkipped: 'bottom'
                        }
                    },
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Weekly Chart'
                    }
                }
            });
        }; 
    });
   
</script>
<script>
    //     $(document).ready(function() {
    //         $('#task-days-table').DataTable();
    //     } );

    //     $(document).ready(function() {
    //         $('#task-agent-table').DataTable();
    //     } );

    //     $(document).ready(function() {
    //         $('#agent-report-table').DataTable();
    //     } );
    // 
</script>

<script>
    $(function() {
        //-------------
        // Get context with jQuery - using jQuery's .get() method.
        var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
        var donutData = {
            labels: [
                'Unassigned',
                'Assigned',
                'Delivery',
                'In Transit',
                'Pickup',
                'Stage',
                'Cancelled',
                'Delayed',
            ],
            datasets: [{
                data: ["{{ $orderStatuses->unassigned }}","{{ $orderStatuses->assigned }}","{{ $orderStatuses->delivery }}", "{{ $orderStatuses->in_transit }}", "{{ $orderStatuses->pickup }}", "{{ $orderStatuses->staged }}","{{ $orderStatuses->cancelled }}","{{ $orderStatuses->delay }}"],
                backgroundColor: ['#2e45b6','#2ec446','#2ec4b6', '#ffbf69', '#cbf3f0', '#126782','#23344b6','#D3D3D3'],
            }]
        }
        var donutOptions = {
            maintainAspectRatio: false,
            responsive: true,
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(donutChartCanvas, {
            type: 'doughnut',
            data: donutData,
            options: donutOptions
        })

        //-------------
        //- PIE CHART -
        //-------------
        // Get context with jQuery - using jQuery's .get() method.
        var pieChartCanvas = $('#pieChart').get(0).getContext('2d')
        // var pieData        = donutData;
        var pieData = {
            labels: [
                'Busy',
                'Free',
            ],
            datasets: [{
                data: [700, 500],
                backgroundColor: ['#ffbf69', '#2ec4b6'],
            }]
        }
        var pieOptions = {
            maintainAspectRatio: false,
            responsive: true,
        }
        //Create pie or douhnut chart
        // You can switch between pie and douhnut using the method below.
        new Chart(pieChartCanvas, {
            type: 'doughnut',
            data: pieData,
            options: pieOptions
        })

        //-------------
        //- BAR CHART -
        //-------------
        var barChartCanvas = $('#barChart').get(0).getContext('2d')
        // var barChartData = $.extend(true, {}, areaChartData)


        var barChartData = {
            labels: ['Dona', 'Ayaka', 'Adi', 'Andrew', 'Saki', 'Diana', ],
            datasets: [{
                    label: 'Delivered',
                    backgroundColor: '#2ec4b6',
                    borderColor: '#2ec4b6',
                    pointRadius: false,
                    pointColor: '#2ec4b6',
                    pointStrokeColor: '#2ec4b6',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: '#2ec4b6',
                    data: [28, 48, 40, 19, 86, 27, 90]
                },
                {
                    label: 'In process',
                    backgroundColor: '#ffbf69',
                    borderColor: '#ffbf69',
                    pointRadius: false,
                    pointColor: '#ffbf69',
                    pointStrokeColor: '#ffbf69',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: '#ffbf69',
                    data: [40, 29, 68, 99, 56, 55, 33]
                },
                {
                    label: 'Accepted',
                    backgroundColor: '#cbf3f0',
                    borderColor: '#cbf3f0',
                    pointRadius: false,
                    pointColor: '#cbf3f0',
                    pointStrokeColor: '#cbf3f0',
                    pointHighlightFill: '#fff',
                    pointHighlightStroke: '#cbf3f0',
                    data: [65, 59, 80, 81, 56, 55, 40]
                },
            ]
        }

        var barChartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            datasetFill: false
        }

        new Chart(barChartCanvas, {
            type: 'bar',
            data: barChartData,
            options: barChartOptions
        })

        //---------------------
        //- STACKED BAR CHART -
        //---------------------

        //     data: stackedBarChartData,
        //     options: stackedBarChartOptions
        //     })
    })
</script>
@endpush