@extends('layouts.app')

@section('content')
    <title>Construction ERP Dashboard</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <style>

        body {
            background-color: #f8f9fa;
        }
        .card {
            border-radius: 12px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease-in-out;
        }
        
        canvas {
            max-width: 100%;
            height: auto !important;
        }
    </style>

    <div class="container mt-4">
        <h2 class="text-center text-dark fw-bold">Construction ERP Dashboard</h2>
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card p-3">
                    <h5 class="text-start">Task Summary</h5>
                    <div class="row">
                        <!-- Left Side: Task Summary -->
                        <div class="col-md-6">
                            <div class="row g-3">
                                <div class="col-6 col-md-6">
                                    <div class="card text-center p-3 bg-secondary text-white shadow-sm">
                                        <h6>Total Tasks</h6>
                                        <p class="fw-bold fs-5">513</p>
                                    </div>
                                </div>
                                <div class="col-6 col-md-6">
                                    <div class="card text-center p-3 bg-dark text-white shadow-sm">
                                        <h6>Completed</h6>
                                        <p class="fw-bold fs-5">414</p>
                                    </div>
                                </div>
                                <div class="col-6 col-md-6">
                                    <div class="card text-center p-3 bg-light text-dark shadow-sm">
                                        <h6>Incomplete</h6>
                                        <p class="fw-bold fs-5">99</p>
                                    </div>
                                </div>
                                <div class="col-6 col-md-6">
                                    <div class="card text-center p-3 bg-body-tertiary text-dark shadow-sm">
                                        <h6>Overdue</h6>
                                        <p class="fw-bold fs-5">99</p>
                                    </div>
                                </div>
                            </div>
                        </div>
            
                        <!-- Right Side: Task Completion Chart -->
                        <div class="col-md-6 d-flex align-items-center justify-content-center">
                            <div class="text-center">
                                <h5>Task Completion Rate</h5>
                                <canvas id="taskCompletionChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
        <!-- Tickets Created vs Resolved -->
        <div class="row mt-4">
            <div class="col-md-12">
                <div class="card p-3">
                    <h5 class="text-center">Tickets Created vs Resolved</h5>
                    <canvas id="ticketsChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Status & Customer Feedback -->
        <div class="row mt-4">
            <div class="col-md-4">
                <div class="card p-3">
                    <h5 class="text-center">Current Status</h5>
                    <canvas id="statusChart"></canvas>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card p-3">
                    <h5 class="text-center">Open Tickets</h5>
                    <canvas id="openTicketsChart"></canvas>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card p-3">
                    <h5 class="text-center">Customer Feedback</h5>
                    <canvas id="feedbackChart"></canvas>
                </div>
            </div>
        </div>    
    </div>

    <script>
        // Tickets Created vs Resolved
        var ticketsCtx = document.getElementById("ticketsChart").getContext("2d");
        new Chart(ticketsCtx, {
            type: "bar",
            data: {
                labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets: [
                    { label: "Tickets Created", data: [2000, 1000, 1500, 1700, 2200, 2500, 1800, 900, 2300, 1900, 1200, 1400], backgroundColor: "#6c757d" },
                { label: "Tickets Resolved", data: [1800, 800, 1400, 1600, 2000, 2400, 1500, 700, 2200, 1800, 1000, 1300], backgroundColor: "#adb5bd" }
                ]
            }
        });

        // Current Status Chart
        var statusCtx = document.getElementById("statusChart").getContext("2d");
        new Chart(statusCtx, {
            type: "doughnut",
            data: {
                labels: ["Resolved", "Customer", "Support"],
                datasets: [{
                    data: [42, 25, 13],
                    backgroundColor: ["#6c757d", "#adb5bd", "#ced4da"]
                }]
            }
        });

        // Open Tickets Chart
        var openTicketsCtx = document.getElementById("openTicketsChart").getContext("2d");
        new Chart(openTicketsCtx, {
            type: "doughnut",
            data: {
                labels: ["UI Team", "Approvers", "Demo Support", "Escalation", "Developers", "Design Team"],
                datasets: [{
                    data: [20, 15, 10, 10, 25, 20],
                    backgroundColor: ["#6c757d", "#868e96", "#adb5bd", "#ced4da", "#dee2e6", "#e9ecef"]
                }]
            }
        });

        // Customer Feedback Chart
        var feedbackCtx = document.getElementById("feedbackChart").getContext("2d");
        new Chart(feedbackCtx, {
            type: "doughnut",
            data: {
                labels: ["Very Satisfied", "Satisfied", "Neutral", "Dissatisfied"],
                datasets: [{
                    data: [45, 25, 20, 2],
                    backgroundColor: ["#6c757d", "#868e96", "#adb5bd", "#ced4da"]
                }]
            }
        });

        // Task Completion Rate
        // document.addEventListener("DOMContentLoaded", function () {
            var ctx = document.getElementById("taskCompletionChart").getContext("2d");
            new Chart(ctx, {
                type: "doughnut",
                data: {
                    labels: ["Completed", "Incomplete", "Overdue"],
                    datasets: [
                        {
                            data: [414, 99, 99],
                            backgroundColor: ["#6c757d", "#adb5bd", "#ced4da"], // Dark Gray to Light Gray
                        },
                    ],
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: true,
                },
            });
        // });
    </script>