@extends('layouts.app')
@section('content')

<!-- PAGE-HEADER -->
<div class="page-header">
    <div>
        <h1>Project Statistics <small>Overview</small></h1>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Project Statistics</li>
        </ol>
    </div>
</div>

<div class="content mt-3">
    <div class="row">
        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5>Invoice Status</h5>
                </div>
                <div class="card-body">
                    <canvas id="invoiceStatusChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>


        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5>Project Status</h5>
                </div>
                <div class="card-body">
                    <canvas id="projectDelayChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>

        <div class="col-md-3">
            <div class="card">
                <div class="card-header">
                    <h5>Service's Status</h5>
                </div>
                <div class="card-body">
                    <canvas id="serviceChart" width="400" height="400"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>

@stop

@section('scripting')

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
    const invoiceData = {
        labels: ["Pending Invoices (50)", "Cleared Invoices (70)"],
        datasets: [{
            data: [50, 70], 
            backgroundColor: ["#FF0000", "#00FF00"], 
            hoverBackgroundColor: ["#FF4D4D", "#4DFF4D"] 
        }]
    };

    const projectData = {
        labels: ["Delayed Projects (25)", "On-Time Projects (45)"],
        datasets: [{
            data: [25, 45], 
            backgroundColor: ["#FF0000", "#00FF00"], 
            hoverBackgroundColor: ["#FF4D4D", "#4DFF4D"] 
        }]
    };

    const serviceData = {
        labels: ["Completed Service (15)", "Pending Services (45)"],
        datasets: [{
            data: [15, 45], 
            backgroundColor: ["#FF0000", "#00FF00"], 
            hoverBackgroundColor: ["#FF4D4D", "#4DFF4D"] 
        }]
    };
        new Chart(document.getElementById('invoiceStatusChart'), {
            type: 'pie',
            data: invoiceData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                }
            }
        });

        new Chart(document.getElementById('projectDelayChart'), {
            type: 'pie',
            data: projectData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                }
            }
        });

        new Chart(document.getElementById('serviceChart'), {
            type: 'pie',
            data: serviceData,
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                }
            }
        });
    });
</script>

@stop