<?php include 'header.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Remix Icon -->
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet"/>

    <!-- ApexCharts -->
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <style>
        body{
            font-family: Inter, sans-serif;
            background: #f8fafc;
        }

        .dashboard-card{
            @apply bg-white border border-slate-200 rounded-2xl shadow-sm;
        }
    </style>
</head>

<body class="bg-slate-50">

<div class="py-3 px-0 sm:p-4 md:p-6">

    <!-- ========================= -->
    <!-- PAGE TITLE -->
    <!-- ========================= -->

    <div class="mb-6">
        <h1 class="text-2xl md:text-3xl font-bold text-slate-800">
            Project Dashboard
        </h1>
    </div>

    <!-- ========================= -->
    <!-- TOP STATS -->
    <!-- ========================= -->

    <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-5 gap-4">

        <!-- CARD -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

            <div class="flex items-start justify-between">

                <div>
                    <p class="text-sm font-medium text-slate-500">
                        Total Projects
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-slate-900">
                        24
                    </h2>

                    <p class="mt-3 text-sm font-medium text-emerald-600">
                        On Track
                    </p>
                </div>

                <div class="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center">
                    <i class="ri-folder-line text-xl text-emerald-600"></i>
                </div>

            </div>

        </div>

        <!-- CARD -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

            <div class="flex items-start justify-between">

                <div>
                    <p class="text-sm font-medium text-slate-500">
                        On Track
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-slate-900">
                        18
                    </h2>

                    <p class="mt-3 text-sm font-medium text-emerald-600">
                        +2 this week
                    </p>
                </div>

                <div class="w-12 h-12 rounded-xl bg-blue-50 flex items-center justify-center">
                    <i class="ri-loader-4-line text-xl text-blue-600"></i>
                </div>

            </div>

        </div>

        <!-- CARD -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

            <div class="flex items-start justify-between">

                <div>
                    <p class="text-sm font-medium text-slate-500">
                        Delayed
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-red-500">
                        5
                    </h2>

                    <p class="mt-3 text-sm font-medium text-red-500">
                        21% of total
                    </p>
                </div>

                <div class="w-12 h-12 rounded-xl bg-red-50 flex items-center justify-center">
                    <i class="ri-error-warning-line text-xl text-red-500"></i>
                </div>

            </div>

        </div>

        <!-- CARD -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

            <div class="flex items-start justify-between">

                <div>
                    <p class="text-sm font-medium text-slate-500">
                        At Risk
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-amber-500">
                        7
                    </h2>

                    <p class="mt-3 text-sm font-medium text-amber-500">
                        28% of total
                    </p>
                </div>

                <div class="w-12 h-12 rounded-xl bg-amber-50 flex items-center justify-center">
                    <i class="ri-alert-line text-xl text-amber-500"></i>
                </div>

            </div>

        </div>

        <!-- CARD -->
        <div class="bg-white rounded-2xl border border-slate-200 p-5 shadow-sm">

            <div class="flex items-start justify-between">

                <div>
                    <p class="text-sm font-medium text-slate-500">
                        Pending Tasks
                    </p>

                    <h2 class="mt-3 text-4xl font-bold text-slate-900">
                        62
                    </h2>

                    <p class="mt-3 text-sm font-medium text-emerald-600">
                        +5 this week
                    </p>
                </div>

                <div class="w-12 h-12 rounded-xl bg-emerald-50 flex items-center justify-center">
                    <i class="ri-checkbox-circle-line text-xl text-emerald-600"></i>
                </div>

            </div>

        </div>

    </div>

    <!-- ========================= -->
    <!-- MIDDLE SECTION -->
    <!-- ========================= -->

    <div class="grid grid-cols-1 xl:grid-cols-12 gap-4 mt-5">

        <!-- PROJECT OVERVIEW -->
        <div class="xl:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

            <div class="flex items-center justify-between">
                <h3 class="text-base font-semibold text-slate-800">
                    Project Overview
                </h3>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>
            </div>

            <div id="projectChart" class="mt-4"></div>

        </div>

        <!-- TASK OVERVIEW -->
        <div class="xl:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

            <div class="flex items-center justify-between">
                <h3 class="text-base font-semibold text-slate-800">
                    Tasks Overview
                </h3>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>
            </div>

            <div id="taskChart" class="mt-4"></div>

        </div>

        <!-- RECENT ACTIVITY -->
        <div class="xl:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

            <div class="flex items-center justify-between">
                <h3 class="text-base font-semibold text-slate-800">
                    Recent Activity
                </h3>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>
            </div>

            <div class="space-y-5 mt-6">

                <!-- ITEM -->
                <div class="flex items-start justify-between gap-3">

                    <div class="flex gap-3">

                        <div class="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center">
                            <i class="ri-task-line text-blue-600"></i>
                        </div>

                        <div>
                            <p class="text-sm font-semibold text-slate-800">
                                Rahul Sharma completed task
                            </p>

                            <p class="text-sm text-slate-500">
                                Login API Integration
                            </p>
                        </div>

                    </div>

                    <span class="text-xs text-slate-400 whitespace-nowrap">
                        10m ago
                    </span>

                </div>

                <!-- ITEM -->
                <div class="flex items-start justify-between gap-3">

                    <div class="flex gap-3">

                        <div class="w-10 h-10 rounded-xl bg-green-50 flex items-center justify-center">
                            <i class="ri-upload-cloud-2-line text-green-600"></i>
                        </div>

                        <div>
                            <p class="text-sm font-semibold text-slate-800">
                                Priya Verma uploaded file
                            </p>

                            <p class="text-sm text-slate-500">
                                Dashboard UI Design
                            </p>
                        </div>

                    </div>

                    <span class="text-xs text-slate-400 whitespace-nowrap">
                        25m ago
                    </span>

                </div>

                <!-- ITEM -->
                <div class="flex items-start justify-between gap-3">

                    <div class="flex gap-3">

                        <div class="w-10 h-10 rounded-xl bg-yellow-50 flex items-center justify-center">
                            <i class="ri-message-2-line text-yellow-600"></i>
                        </div>

                        <div>
                            <p class="text-sm font-semibold text-slate-800">
                                Anil Kumar added comment
                            </p>

                            <p class="text-sm text-slate-500">
                                Payment Module
                            </p>
                        </div>

                    </div>

                    <span class="text-xs text-slate-400 whitespace-nowrap">
                        1h ago
                    </span>

                </div>

                <!-- ITEM -->
                <div class="flex items-start justify-between gap-3">

                    <div class="flex gap-3">

                        <div class="w-10 h-10 rounded-xl bg-pink-50 flex items-center justify-center">
                            <i class="ri-bug-line text-pink-600"></i>
                        </div>

                        <div>
                            <p class="text-sm font-semibold text-slate-800">
                                Neha Singh created bug
                            </p>

                            <p class="text-sm text-slate-500">
                                Product Listing Page
                            </p>
                        </div>

                    </div>

                    <span class="text-xs text-slate-400 whitespace-nowrap">
                        2h ago
                    </span>

                </div>

            </div>

            <button class="mt-6 text-sm font-semibold text-indigo-600 hover:text-indigo-700">
                View all activity →
            </button>

        </div>

    </div>

    <!-- ========================= -->
    <!-- BOTTOM SECTION -->
    <!-- ========================= -->

    <div class="grid grid-cols-1 xl:grid-cols-12 gap-4 mt-5">

        <!-- DEADLINES -->
        <div class="xl:col-span-4 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

            <div class="flex items-center justify-between">
                <h3 class="text-base font-semibold text-slate-800">
                    Upcoming Deadlines
                </h3>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>
            </div>

            <div class="space-y-5 mt-6">

                <div class="flex items-center justify-between">

                    <div class="flex items-center gap-3">

                        <div class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center">
                            <i class="ri-time-line text-indigo-600"></i>
                        </div>

                        <p class="text-sm font-medium text-slate-700">
                            CRM Module - Testing
                        </p>

                    </div>

                    <span class="text-sm font-semibold text-red-500">
                        24 May
                    </span>

                </div>

                <div class="flex items-center justify-between">

                    <div class="flex items-center gap-3">

                        <div class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center">
                            <i class="ri-time-line text-indigo-600"></i>
                        </div>

                        <p class="text-sm font-medium text-slate-700">
                            Mobile App - Release
                        </p>

                    </div>

                    <span class="text-sm font-semibold text-red-500">
                        27 May
                    </span>

                </div>

                <div class="flex items-center justify-between">

                    <div class="flex items-center gap-3">

                        <div class="w-10 h-10 rounded-full bg-indigo-50 flex items-center justify-center">
                            <i class="ri-time-line text-indigo-600"></i>
                        </div>

                        <p class="text-sm font-medium text-slate-700">
                            E-commerce - UAT
                        </p>

                    </div>

                    <span class="text-sm font-semibold text-red-500">
                        30 May
                    </span>

                </div>

            </div>

        </div>

        <!-- REWORK ANALYSIS -->
        <div class="xl:col-span-8 bg-white rounded-2xl border border-slate-200 shadow-sm p-5">

            <div class="flex items-center justify-between">
                <h3 class="text-base font-semibold text-slate-800">
                    Rework Analysis
                </h3>

                <button class="text-slate-400 hover:text-slate-600">
                    <i class="ri-more-2-fill"></i>
                </button>
            </div>

            <div id="reworkChart" class="mt-5"></div>

        </div>

    </div>

</div>

<!-- ===================================== -->
<!-- APEX CHARTS -->
<!-- ===================================== -->

<script>

    // ===============================
    // PROJECT OVERVIEW DONUT CHART
    // ===============================

    const projectChart = new ApexCharts(document.querySelector("#projectChart"), {

        chart: {
            type: 'donut',
            height: 320,
            fontFamily: 'Inter, sans-serif',
            toolbar: {
                show: false
            }
        },

        series: [10, 8, 3, 3],

        labels: [
            'On Track',
            'In Progress',
            'Delayed',
            'At Risk'
        ],

        colors: [
            '#22c55e',
            '#3b82f6',
            '#ef4444',
            '#f59e0b'
        ],

        stroke: {
            width: 0
        },

        legend: {
            position: 'bottom',
            fontSize: '14px'
        },

        dataLabels: {
            enabled: false
        },

        plotOptions: {
            pie: {
                donut: {
                    size: '70%',

                    labels: {

                        show: true,

                        total: {
                            show: true,
                            label: 'Total',

                            formatter: function () {
                                return 24
                            }
                        }
                    }
                }
            }
        },

        responsive: [
            {
                breakpoint: 640,

                options: {
                    chart: {
                        height: 280
                    }
                }
            }
        ]

    });

    projectChart.render();


    // ===============================
    // TASK OVERVIEW BAR CHART
    // ===============================

    const taskChart = new ApexCharts(document.querySelector("#taskChart"), {

        chart: {
            type: 'bar',
            height: 320,
            toolbar: {
                show: false
            },
            fontFamily: 'Inter, sans-serif'
        },

        series: [{
            name: 'Tasks',
            data: [128, 96, 42, 18]
        }],

        colors: ['#4f46e5'],

        xaxis: {

            categories: [
                'Completed',
                'In Progress',
                'Review',
                'Rework'
            ],

            labels: {
                style: {
                    colors: '#64748b'
                }
            }
        },

        yaxis: {
            labels: {
                style: {
                    colors: '#64748b'
                }
            }
        },

        plotOptions: {
            bar: {
                borderRadius: 8,
                columnWidth: '45%'
            }
        },

        grid: {
            borderColor: '#e2e8f0',
            strokeDashArray: 5
        },

        dataLabels: {
            enabled: false
        },

        responsive: [
            {
                breakpoint: 640,

                options: {
                    chart: {
                        height: 260
                    }
                }
            }
        ]

    });

    taskChart.render();


    // ===============================
    // REWORK ANALYSIS LINE CHART
    // ===============================

    const reworkChart = new ApexCharts(document.querySelector("#reworkChart"), {

        chart: {
            type: 'line',
            height: 320,
            toolbar: {
                show: false
            },
            zoom: {
                enabled: false
            },
            fontFamily: 'Inter, sans-serif'
        },

        series: [{
            name: 'Rework',
            data: [4, 7, 6, 10, 7, 9, 7, 13]
        }],

        colors: ['#4f46e5'],

        stroke: {
            curve: 'smooth',
            width: 4
        },

        markers: {
            size: 5
        },

        xaxis: {

            categories: [
                '13 May',
                '14 May',
                '15 May',
                '17 May',
                '19 May',
                '21 May',
                '22 May',
                '23 May'
            ],

            labels: {
                style: {
                    colors: '#64748b'
                }
            }
        },

        yaxis: {
            labels: {
                style: {
                    colors: '#64748b'
                }
            }
        },

        grid: {
            borderColor: '#e2e8f0',
            strokeDashArray: 5
        },

        tooltip: {
            theme: 'light'
        },

        dataLabels: {
            enabled: false
        },

        responsive: [
            {
                breakpoint: 640,

                options: {
                    chart: {
                        height: 260
                    }
                }
            }
        ]

    });

    reworkChart.render();

</script>

</body>
</html>
<?php include 'footer.php'; ?>