@extends('layouts.super-admin-layout')
@section('content')

    <!--start page wrapper -->
    <div class="page-wrapper">
        <div class="page-content">
            <div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">
                <div class="col">
                    <div class="card radius-10 border-start border-0 border-3 border-info">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <p class="mb-0 text-secondary">Total Orders</p>
                                    <h4 class="my-1 text-info">{{  $orders_count }}</h4>
                                </div>
                                <div class="widgets-icons-2 rounded-circle bg-gradient-scooter text-white ms-auto"><i class='bx bxs-cart'></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card radius-10 border-start border-0 border-3 border-danger">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <p class="mb-0 text-secondary">Total Food Items</p>
                                    <h4 class="my-1 text-danger">{{ $food_items_count }}</h4>
                                </div>
                                <div class="widgets-icons-2 rounded-circle bg-gradient-bloody text-white ms-auto"><i class='bx bxs-wallet'></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card radius-10 border-start border-0 border-3 border-success">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <p class="mb-0 text-secondary">Total Table Booking</p>
                                    <h4 class="my-1 text-success">{{ $table_booking_count }}</h4>
                                </div>
                                <div class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness text-white ms-auto"><i class='bx bxs-bar-chart-alt-2' ></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card radius-10 border-start border-0 border-3 border-warning">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <p class="mb-0 text-secondary">Total Party Booking</p>
                                    <h4 class="my-1 text-warning">{{ $party_booking_count }}</h4>
                                </div>
                                <div class="widgets-icons-2 rounded-circle bg-gradient-blooker text-white ms-auto"><i class='bx bxs-cart'></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card radius-10 border-start border-0 border-3 border-warning">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <p class="mb-0 text-secondary">Total Package Menu</p>
                                    <h4 class="my-1 text-warning">{{ $package_menu_count }}</h4>
                                </div>
                                <div class="widgets-icons-2 rounded-circle bg-gradient-blooker text-white ms-auto"><i class='bx bxs-cart'></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card radius-10 border-start border-0 border-3 border-success">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <p class="mb-0 text-secondary">Total Menus</p>
                                    <h4 class="my-1 text-success">{{ $food_menu_count }}</h4>
                                </div>
                                <div class="widgets-icons-2 rounded-circle bg-gradient-ohhappiness text-white ms-auto"><i class='bx bxs-bar-chart-alt-2' ></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card radius-10 border-start border-0 border-3 border-danger">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <p class="mb-0 text-secondary">Total Customers</p>
                                    <h4 class="my-1 text-danger">{{ $customer_count }}</h4>
                                </div>
                                <div class="widgets-icons-2 rounded-circle bg-gradient-bloody text-white ms-auto"><i class='bx bxs-group'></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="card radius-10 border-start border-0 border-3 border-info">
                        <div class="card-body">
                            <div class="d-flex align-items-center">
                                <div>
                                    <p class="mb-0 text-secondary">Total Users</p>
                                    <h4 class="my-1 text-info">{{ $admin_count }}</h4>
                                </div>
                                <div class="widgets-icons-2 rounded-circle bg-gradient-scooter text-white ms-auto"><i class='bx bxs-cart'></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--end row-->
            
            <div class="row">
                <div class="col-12 col-lg-12">
                    <div class="col d-flex">
                        <div class="card radius-10 w-100">
                            <div class="card-header bg-transparent">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <h6 class="mb-0">Current Year Orders and Bookings Overview</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="chart-container-1">
                                    <canvas id="chart1"></canvas>
                                </div>
                            </div>
                            <div class="row row-cols-1 row-cols-md-3 row-cols-xl-3 g-0 row-group text-center border-top">
                                <div class="col">
                                    <div class="p-3">
                                        <h5 class="mb-0">{{  $orders_count }}</h5>
                                        <small class="mb-0">Overall Orders </small>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="p-3">
                                        <h5 class="mb-0">{{  $table_booking_count }}</h5>
                                        <small class="mb-0">Overall Table Bookings </small>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="p-3">
                                        <h5 class="mb-0">{{  $party_booking_count }}</h5>
                                        <small class="mb-0">Overall Party Bookings </small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-lg-6">
                    <div class="col d-flex">
                        <div class="card radius-10 w-100">
                            <div class="card-header bg-transparent">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <h6 class="mb-0">Tranding Products</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="chart-container-1">
                                    <canvas id="chart2"></canvas>
                                </div>
                            </div>
                            <ul class="list-group list-group-flush">
                                @foreach ($tranding_products as $key)
                                    <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center">{{ \Illuminate\Support\Str::limit($key->food_item_name, 70, $end='...') }} <span class="badge rounded-pill" style="background: @if($loop->index==0) #008cff @elseif ($loop->index==1) #15ca20 @elseif ($loop->index==2) #0dcaf0 @elseif ($loop->index==3)  #ffc107  @elseif ($loop->index==4) #fd3550 @else #fd3550  @endif">{{  $key->count }}</span></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-12 col-lg-6">
                    <div class="col d-flex">
                        <div class="card radius-10 w-100">
                            <div class="card-header bg-transparent">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <h6 class="mb-0">Orders Summary</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="chart-container-1">
                                    <canvas id="chart4"></canvas>
                                </div>
                            </div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center">Delivered <span class="badge bg-success rounded-pill">{{ $order_summary_data[0] }}</span>
                                </li>
                                <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center">Pending <span class="badge bg-warning rounded-pill">{{ $order_summary_data[1] }}</span>
                                </li>
                                <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center">Processing <span class="badge bg-info rounded-pill">{{ $order_summary_data[2] }}</span>
                                </li>                                
                                <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center">Picked <span class="badge bg-primary rounded-pill">{{ $order_summary_data[3] }}</span>
                                </li>                               
                                <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center">Cancelled <span class="badge bg-danger rounded-pill">{{ $order_summary_data[4] }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-6">
                    <div class="col d-flex">
                        <div class="card radius-10 w-100">
                            <div class="card-header bg-transparent">
                                <div class="d-flex align-items-center">
                                    <div>
                                        <h6 class="mb-0">Tranding Customer</h6>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body">
                                <div class="chart-container-1">
                                    <canvas id="chart5"></canvas>
                                </div>
                            </div>
                            <ul class="list-group list-group-flush">
                                @foreach ($tranding_customer as $key)
                                    <li class="list-group-item d-flex bg-transparent justify-content-between align-items-center">{{ \Illuminate\Support\Str::limit($key->customer?$key->customer->name:"", 70, $end='...') }} <span class="badge rounded-pill" style="background: @if($loop->index==0) #008cff @elseif ($loop->index==1) #15ca20 @elseif ($loop->index==2) #0dcaf0 @elseif ($loop->index==3)  #ffc107  @elseif ($loop->index==4) #fd3550 @else #fd3550  @endif">{{  $key->count }}</span></li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>
            </div><!--end row-->


        </div>
    </div>
    <!--end page wrapper -->
<script>
    var orders = new Array();
    var tableBooking = new Array();
    var partyBooking = new Array();
    var trandingLabel = new Array();
    var trandingCount = new Array();
    var orderSummary = new Array();
    var trandingCustomerLabel = new Array();
    var trandingCustomerCount = new Array();
    //Order & Booking Overview
                //Tranding Products
            //Order Summary    
     //Tranding customer
         $(function () {
    "use strict";

        //Chart 1
        var ctx = document.getElementById("chart1").getContext('2d');

        var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
            gradientStroke1.addColorStop(0, '#6078ea');
            gradientStroke1.addColorStop(1, '#17c5ea');

        var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
            gradientStroke2.addColorStop(0, '#ff8359');
            gradientStroke2.addColorStop(1, '#ffdf40');

        var gradientStroke3 = ctx.createLinearGradient(0, 0, 0, 300);
            gradientStroke3.addColorStop(0, '#FF6347');
            gradientStroke3.addColorStop(1, '#FF0000');

        var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            datasets: [
                {
                    label: 'Food Orders',
                    data: orders,
                    borderColor: gradientStroke1,
                    backgroundColor: gradientStroke1,
                    hoverBackgroundColor: gradientStroke1,
                    pointRadius: 0,
                    fill: false,
                    borderWidth: 0
                }, {
                    label: 'Table Booking',
                    data: tableBooking,
                    borderColor: gradientStroke2,
                    backgroundColor: gradientStroke2,
                    hoverBackgroundColor: gradientStroke2,
                    pointRadius: 0,
                    fill: false,
                    borderWidth: 0
                }, {
                    label: 'Party Booking',
                    data: partyBooking,
                    borderColor: gradientStroke3,
                    backgroundColor: gradientStroke3,
                    hoverBackgroundColor: gradientStroke3,
                    pointRadius: 0,
                    fill: false,
                    borderWidth: 0
                }
            ]
        },

        options:{
            maintainAspectRatio: false,
            legend: {
                position: 'bottom',
                display: false,
                labels: {
                boxWidth:8
                }
            },
            tooltips: {
                displayColors:false,
            },
            scales: {
                xAxes: [{
                barPercentage: .5
                }]
            }
        }
        });


        //Chart 2

        var ctx = document.getElementById("chart2").getContext('2d');

        var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
        gradientStroke1.addColorStop(0, '#008cff');
        gradientStroke1.addColorStop(1, '#008cff');

        var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
        gradientStroke2.addColorStop(0, '#15ca20');
        gradientStroke2.addColorStop(1, '#15ca20');

        var gradientStroke3 = ctx.createLinearGradient(0, 0, 0, 300);
        gradientStroke3.addColorStop(0, '#0dcaf0');
        gradientStroke3.addColorStop(1, '#0dcaf0');

        var gradientStroke4 = ctx.createLinearGradient(0, 0, 0, 300);
        gradientStroke4.addColorStop(0, '#ffc107');
        gradientStroke4.addColorStop(1, '#ffc107');
        
        var gradientStroke5 = ctx.createLinearGradient(0, 0, 0, 300);
        gradientStroke5.addColorStop(0, '#fd3550');
        gradientStroke5.addColorStop(1, '#fd3550');

        var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: trandingLabel,
            datasets: [{
            backgroundColor: [
                gradientStroke1,
                gradientStroke2,
                gradientStroke3,
                gradientStroke4,
                gradientStroke5,
            ],
            hoverBackgroundColor: [
                gradientStroke1,
                gradientStroke2,
                gradientStroke3,
                gradientStroke4,
                gradientStroke5,
            ],
            data: trandingCount,
            borderWidth: [1, 1, 1, 1, 1]
            }]
        },
        options: {
            maintainAspectRatio: false,
            cutoutPercentage: 75,
            legend: {
            position: 'bottom',
            display: false,
            labels: {
                boxWidth: 8
            }
            },
            tooltips: {
            displayColors: false,
            }
        }
        });

         //Chart 5

         var ctx = document.getElementById("chart5").getContext('2d');

var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
gradientStroke1.addColorStop(0, '#008cff');
gradientStroke1.addColorStop(1, '#008cff');

var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
gradientStroke2.addColorStop(0, '#15ca20');
gradientStroke2.addColorStop(1, '#15ca20');

var gradientStroke3 = ctx.createLinearGradient(0, 0, 0, 300);
gradientStroke3.addColorStop(0, '#0dcaf0');
gradientStroke3.addColorStop(1, '#0dcaf0');

var gradientStroke4 = ctx.createLinearGradient(0, 0, 0, 300);
gradientStroke4.addColorStop(0, '#ffc107');
gradientStroke4.addColorStop(1, '#ffc107');

var gradientStroke5 = ctx.createLinearGradient(0, 0, 0, 300);
gradientStroke5.addColorStop(0, '#fd3550');
gradientStroke5.addColorStop(1, '#fd3550');

var myChart = new Chart(ctx, {
type: 'doughnut',
data: {
    labels: trandingCustomerLabel,
    datasets: [{
    backgroundColor: [
        gradientStroke1,
        gradientStroke2,
        gradientStroke3,
        gradientStroke4,
        gradientStroke5,
    ],
    hoverBackgroundColor: [
        gradientStroke1,
        gradientStroke2,
        gradientStroke3,
        gradientStroke4,
        gradientStroke5,
    ],
    data: trandingCustomerCount,
    borderWidth: [1, 1, 1, 1, 1]
    }]
},
options: {
    maintainAspectRatio: false,
    cutoutPercentage: 75,
    legend: {
    position: 'bottom',
    display: false,
    labels: {
        boxWidth: 8
    }
    },
    tooltips: {
    displayColors: false,
    }
}
});
        // chart 4 Orders Summary

        var ctx = document.getElementById("chart4").getContext('2d');

        var gradientStroke1 = ctx.createLinearGradient(0, 0, 0, 300);
        gradientStroke1.addColorStop(0, '#198754');
        gradientStroke1.addColorStop(1, '#198754');

        var gradientStroke2 = ctx.createLinearGradient(0, 0, 0, 300);
        gradientStroke2.addColorStop(0, '#ffc107');
        gradientStroke2.addColorStop(1, '#ffc107');

        var gradientStroke3 = ctx.createLinearGradient(0, 0, 0, 300);
        gradientStroke3.addColorStop(0, '#0dcaf0');
        gradientStroke3.addColorStop(1, '#0dcaf0');

        var gradientStroke4 = ctx.createLinearGradient(0, 0, 0, 300);
        gradientStroke4.addColorStop(0, '#0d6efd');
        gradientStroke4.addColorStop(1, '#0d6efd');
        
        var gradientStroke5 = ctx.createLinearGradient(0, 0, 0, 300);
        gradientStroke5.addColorStop(0, '#dc3545');
        gradientStroke5.addColorStop(1, '#dc3545');

        var myChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: ["Delivered", "Pending", "Processing","Picked", "Cancelled"],
            datasets: [{
            backgroundColor: [
                gradientStroke1,
                gradientStroke2,
                gradientStroke3,
                gradientStroke4,
                gradientStroke5,
            ],

            hoverBackgroundColor: [
                gradientStroke1,
                gradientStroke2,
                gradientStroke3,
                gradientStroke4,
                gradientStroke5,
            ],

            data: orderSummary,
            borderWidth: [1, 1, 1, 1, 1]
            }]
        },
        options: {
            maintainAspectRatio: false,
            cutoutPercentage: 0,
            legend: {
            position: 'bottom',
            display: false,
            labels: {
                boxWidth: 8
            }
            },
            tooltips: {
            displayColors: false,
            },
        }
        });


    })
</script>
@endsection