@extends('layouts.app')
@section('title', 'Dashbaord')

@section('content')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>
        .charts-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .chart {
            width: 50%;
            margin-bottom: 20px;
        }

        canvas#pieChart {
            height: 250px !important;
            width: 250px !important;
            margin: 0 auto;
        }

        canvas#doughnutChart {
            height: 250px !important;
            width: 250px !important;
            margin: 0 auto;
        }

        .cart_container {
            padding-top: 160px;
        }

        @media screen and (max-width: 550px) {
            .charts-container {
                flex-direction: column;
            }

            .chart {
                width: 100%;
                margin-bottom: 50px;
            }

            canvas#columnChart {
                height: 350px !important;
            }
            .cart_container {
                padding-top: 20px;
            }
          
        }
    </style>
    @include('admin.breadcrumb.index')
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Users</p>
                                    <h5 class="font-weight-bolder">
                                                                            </h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-primary shadow-primary text-center rounded-circle">
                                    <i class="ni ni-money-coins text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-sm-6 mb-xl-0 mb-4">
                <div class="card">
                    <div class="card-body p-3">
                        <div class="row">
                            <div class="col-8">
                                <div class="numbers">
                                    <p class="text-sm mb-0 text-uppercase font-weight-bold">Service providers</p>
                                    <h5 class="font-weight-bolder">
                                                                            </h5>
                                </div>
                            </div>
                            <div class="col-4 text-end">
                                <div class="icon icon-shape bg-gradient-danger shadow-danger text-center rounded-circle">
                                    <i class="ni ni-world text-lg opacity-10" aria-hidden="true"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
        <div class="container cart_container">
            <!-- <h1 style="Visibility:hidden;">Dashboard</h1>
            <p style="Visibility:hidden;">You are logged in!</p>
            <p style="Visibility:hidden;">You are logged in!</p> -->
            <!-- <a href="{{ route('admin.users.index') }}" class="btn btn-primary">Manage Users</a>
            <a href="{{ route('admin.providers.index') }}" class="btn btn-primary">Manage Service Providers</a>
            <a href="{{ route('admin.assignments.index') }}" class="btn btn-primary">Manage Assignments</a> -->
            <div>
                <h5>Reports:</h5>
                <div class="charts-container">
                    <!-- Column Chart -->
                    <div class="chart">
                        <canvas id="columnChart"></canvas>
                    </div>

                    <!-- Pie Chart -->
                    <div class="chart">
                        <canvas id="pieChart"></canvas>
                    </div>

                    <!-- Line Chart -->
                    <div class="chart">
                        <canvas id="lineChart"></canvas>
                    </div>

                    <!-- Doughnut Chart -->
                    <div class="chart">
                        <canvas id="doughnutChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <script>
            // Column Chart
            const columnCtx = document.getElementById('columnChart').getContext('2d');
            new Chart(columnCtx, {
                type: 'bar',
                data: {
                    labels: ['Users', 'Service Providers', 'Assignments'],
                    datasets: [{
                        label: 'Statistics',
                        data: [{{ $totalUsers }}, {{ $totalServiceProviders }}, {{ $totalAssignments }}],
                        backgroundColor: [
                            'rgba(54, 162, 235, 0.6)',
                            'rgba(255, 99, 132, 0.6)',
                            'rgba(75, 192, 192, 0.6)'
                        ],
                        borderColor: [
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 99, 132, 1)',
                            'rgba(75, 192, 192, 1)'
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // Pie Chart
            const pieCtx = document.getElementById('pieChart').getContext('2d');
            new Chart(pieCtx, {
                type: 'pie',
                data: {
                    labels: ['Users', 'Service Providers', 'Assignments'],
                    datasets: [{
                        data: [{{ $totalUsers }}, {{ $totalServiceProviders }}, {{ $totalAssignments }}],
                        backgroundColor: [
                            'rgba(54, 162, 235, 0.6)',
                            'rgba(255, 99, 132, 0.6)',
                            'rgba(75, 192, 192, 0.6)'
                        ]
                    }]
                }
            });

            // Line Chart
            const lineCtx = document.getElementById('lineChart').getContext('2d');
            new Chart(lineCtx, {
                type: 'line',
                data: {
                    labels: ['Users', 'Service Providers', 'Assignments'],
                    datasets: [{
                        label: 'Statistics',
                        data: [{{ $totalUsers }}, {{ $totalServiceProviders }}, {{ $totalAssignments }}],
                        borderColor: 'rgba(75, 192, 192, 1)',
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                }
            });


            // Doughnut Chart
            const doughnutCtx = document.getElementById('doughnutChart').getContext('2d');
            new Chart(doughnutCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Users', 'Service Providers', 'Assignments'],
                    datasets: [{
                        data: [{{ $totalUsers }}, {{ $totalServiceProviders }}, {{ $totalAssignments }}],
                        backgroundColor: [
                            'rgba(54, 162, 235, 0.6)',
                            'rgba(255, 99, 132, 0.6)',
                            'rgba(75, 192, 192, 0.6)'
                        ]
                    }]
                }
            });
        </script>
    @endsection