@extends('layouts.base')
@section('tittle', 'Dashboard')

@section('content')


        <!-- Page Heading -->
        <div class="d-sm-flex align-items-center justify-content-between mb-4">
            <h1 class="h3 mb-0 text-gray-800">Dashboard</h1>
        </div>

        <!-- Content Row -->
        <div class="row">

            <!-- Earnings (Monthly) Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-primary shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                    JUMLAH MOBIL</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $carscount }} Unit</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-calendar fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Earnings (Monthly) Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-success shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                    JUMLAH DRIVER</div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $driverscount }} Driver</div>
                            </div>
                            <div class="col-auto">
                                {{-- Bisa Ditambah Logo Driver --}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Earnings (Monthly) Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-info shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-info text-uppercase mb-1">JUMLAH DEPARTMENT RO
                                </div>
                                <div class="row no-gutters align-items-center">
                                    <div class="col-auto">
                                        <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">{{$usercount}} Department</div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pending Requests Card Example -->
            <div class="col-xl-3 col-md-6 mb-4">
                <div class="card border-left-warning shadow h-100 py-2">
                    <div class="card-body">
                        <div class="row no-gutters align-items-center">
                            <div class="col mr-2">
                                <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                    Pending Requests
                                </div>
                                <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $waitingCount }}</div>
                            </div>
                            <div class="col-auto">
                                <i class="fas fa-comments fa-2x text-gray-300"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content Row -->

        <div class="row">

            <!-- Area Chart -->
            <div class="col-xl-12 col-lg-12">
                <div class="card shadow mb-4">
                    <!-- Card Header - Dropdown -->
                    <div
                        class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                        <h6 class="m-0 font-weight-bold text-primary">Total Pesanan Mobil</h6>
                    </div>
                    <!-- Card Body -->
                    <div class="card-body">
                        <!-- Content Row -->
                    <div class="row">
                            
                        <div class="col-xl-12">
                       
                            <div class="col-xl-5">
                                    <label for="month">Pilih Bulan : </label>
                                    <select id="month" class="form-control">
                                        <option value=""> --Semua-- </option>
                                        <option value="1">January</option>
                                        <option value="2">February</option>
                                        <option value="3">March</option>
                                        <option value="4">April</option>
                                        <option value="5">May</option>
                                        <option value="6">June</option>
                                        <option value="7">July</option>
                                        <option value="8">August</option>
                                        <option value="9">September</option>
                                        <option value="10">October</option>
                                        <option value="11">November</option>
                                        <option value="12">December</option>
                                    </select>
                            </div>
                        
                        </div>
                        
                </div> 
                <div class="row mt-4">
                
                    <div class="col-xl-8 col-lg-7">
{{-- CHART --}}
                        <!-- Bar Chart -->
                        <div class="card shadow mb-4">
                            
                            <div class="card-body">
                                <div class="chart-bar chart-container">
                                    <canvas id="myChart"></canvas>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- Donut Chart -->
                    <div class="col-xl-4 col-lg-5">
                        <div class="card shadow mb-4">
                            <!-- Card Body -->
                            <div class="card-body">
                                <div class="chart-pie pt-4 chart-container">
                                    <canvas id="myPieChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            

            
                <script>
    $(document).ready(function() {
        let barChart;
        let pieChart;
        console.log('test');

        // Register the datalabels plugin globally or locally
        Chart.register(ChartDataLabels);

        function updateChart(month) {
            $.ajax({
                url: "{{ route('chart.data') }}",
                type: 'GET',
                data: { month: month },
                dataType: 'json',
                success: function(data) {
                    if (barChart) {
                        barChart.destroy();
                        pieChart.destroy();
                    }

                    const ctxBar = document.getElementById('myChart').getContext('2d');
                    barChart = new Chart(ctxBar, {
                        type: 'bar',
                        data: data,
                        options: {
                            responsive: true,
                            maintainAspectRatio: false,
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            },
                            plugins: {
                                datalabels: {
                                    anchor: 'end', // Position the label at the end of the bar
                                    align: 'top',   // Align the label to the top of the bar
                                    formatter: function(value, context) {
                                        return value; // Display the raw value
                                    },
                                    font: {
                                        weight: 'bold'
                                    },
                                    color: 'black' // Color of the labels
                                }
                            }
                        }
                    });

                    const ctxPie = document.getElementById('myPieChart').getContext('2d');
                    pieChart = new Chart(ctxPie, {
                        type: 'pie',
                        data: data,
                        options: {
                            responsive: true,
                            maintainAspectRatio: false
                        }
                    });
                }
            });
        }

        updateChart(null);

        $('#month').change(function() {
            const month = $(this).val();
            updateChart(month);
        });
    });
</script>
        <style>
            .chart-container {
                width: 100%;
                max-width: 100%;
                margin: 0 auto;
            }
        
            #myChart {
                display: block;
                width: 100%;
                height: auto;
            }
        
            #myPieChart {
                display: block;
                width: 100%;
                height: auto;
            }
            </style>




@endsection