@extends('admin::layouts.master')
@section('pagetitle','Dashboard')
@section('content')

<!-- Dashboard Content -->
<div class="container-xxl" id="kt_content_container">
    <!--begin::Row-->
    <div class="row g-5 g-xl-8">
        <!--begin::Col-->
        <div class="col-xl-4">
            <div class="card card-custom gutter-b">
                <div class="card-header">
                    <h3 class="card-title">Projects Overview</h3>
                </div>
                <div class="card-body">
                    <canvas id="projectsChart"></canvas>
                </div>
            </div>
        </div>
        <!--end::Col-->

        <div class="col-xl-4">
            <div class="card card-custom gutter-b">
                <div class="card-header">
                    <h3 class="card-title">Budget Overview</h3>
                </div>
                <div class="card-body">
                    <canvas id="budgetChart"></canvas>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card card-custom gutter-b">
                <div class="card-header">
                    <h3 class="card-title">Attendance Summary</h3>
                </div>
                <div class="card-body">
                    <canvas id="attendanceChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <!--end::Row-->

    <!--begin::Row-->
    <div class="row g-5 g-xl-8">
        <div class="col-xl-6">
            <div class="card card-custom gutter-b">
                <div class="card-header">
                    <h3 class="card-title">Materials Inventory</h3>
                </div>
                <div class="card-body">
                    <canvas id="materialsChart"></canvas>
                </div>
            </div>
        </div>

        <div class="col-xl-6">
            <div class="card card-custom gutter-b">
                <div class="card-header">
                    <h3 class="card-title">Payroll Summary</h3>
                </div>
                <div class="card-body">
                    <canvas id="payrollChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    <!--end::Row-->
</div>

@endsection
@section('scripts')
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="{{asset('js/admin/dashboard/dashboard.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
   // Projects Chart
   const projectsChart = new Chart(document.getElementById('projectsChart'), {
            type: 'bar',
            data: {
                labels: ['Ongoing', 'Completed', 'Delayed'],
                datasets: [{
                    label: 'Projects',
                    data: [12, 19, 3],
                    backgroundColor: ['#36A2EB', '#4BC0C0', '#FF6384']
                }]
            }
        });

        // Budget Chart
        const budgetChart = new Chart(document.getElementById('budgetChart'), {
            type: 'pie',
            data: {
                labels: ['Allocated', 'Spent', 'Remaining'],
                datasets: [{
                    label: 'Budget',
                    data: [500000, 350000, 150000],
                    backgroundColor: ['#FFCE56', '#FF6384', '#36A2EB']
                }]
            }
        });

        // Attendance Chart
        const attendanceChart = new Chart(document.getElementById('attendanceChart'), {
            type: 'line',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
                datasets: [{
                    label: 'Attendance',
                    data: [85, 90, 88, 92, 95],
                    borderColor: '#4BC0C0',
                    fill: false
                }]
            }
        });

        // Materials Chart
        const materialsChart = new Chart(document.getElementById('materialsChart'), {
            type: 'doughnut',
            data: {
                labels: ['Cement', 'Steel', 'Bricks', 'Wood'],
                datasets: [{
                    label: 'Materials',
                    data: [500, 300, 200, 100],
                    backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#4BC0C0']
                }]
            }
        });

        // Payroll Chart
        const payrollChart = new Chart(document.getElementById('payrollChart'), {
            type: 'bar',
            data: {
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
                datasets: [{
                    label: 'Payroll',
                    data: [200000, 220000, 210000, 230000, 240000],
                    backgroundColor: '#36A2EB'
                }]
            }
        });
</script>
@endsection