<?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"/>

    <title>Dashboard</title>

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

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

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

    <!-- Font -->
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

        *{
            font-family:'Inter',sans-serif;
        }

        body{
            background:#f5f7ff;
        }

        .dashboard-card{
            background:#fff;
            border:1px solid #edf0f7;
            border-radius:22px;
            transition:0.25s ease;
        }

        .dashboard-card:hover{
            transform:translateY(-3px);
            box-shadow:0 14px 30px rgba(99,102,241,0.08);
        }

        .icon-box{
            width:56px;
            height:56px;
            border-radius:16px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:24px;
        }

        .mini-icon{
            width:34px;
            height:34px;
            border-radius:10px;
            display:flex;
            align-items:center;
            justify-content:center;
            font-size:14px;
        }

        .progress-bar{
            height:8px;
            border-radius:999px;
            overflow:hidden;
            background:#eef2ff;
        }

        .progress-fill{
            height:100%;
            border-radius:999px;
        }

        .status-dot{
            width:10px;
            height:10px;
            border-radius:999px;
            display:inline-block;
        }
    </style>
</head>

<body class="min-h-screen">

<div class="max-w-7xl mx-auto  px-0 py-4 md:p-2 lg:p-4">

    <!-- HEADER -->
    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 mb-6">

        <div>
            <h1 class="text-3xl font-extrabold text-slate-800">
                Dashboard
            </h1>

        </div>


    </div>

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

        <!-- CARD -->
        <div class="dashboard-card p-5">

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

                <div class="icon-box bg-indigo-50 text-indigo-600">
                    <i class="ri-folder-chart-line"></i>
                </div>

            </div>

            <div class="mt-5">

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

                <h2 class="text-3xl font-bold text-slate-800 mt-1">
                    124
                </h2>

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

                    <span class="bg-green-100 text-green-700 text-xs font-bold px-2 py-1 rounded-lg">
                        +12%
                    </span>

                    <span class="text-xs text-slate-500">
                        from last month
                    </span>

                </div>

            </div>

        </div>

        <!-- CARD -->
        <div class="dashboard-card p-5">

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

                <div class="icon-box bg-orange-50 text-orange-500">
                    <i class="ri-time-line"></i>
                </div>


            </div>

            <div class="mt-5">

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

                <h2 class="text-3xl font-bold text-slate-800 mt-1">
                    39
                </h2>

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

                    <span class="bg-red-100 text-red-600 text-xs font-bold px-2 py-1 rounded-lg">
                        -4%
                    </span>

                    <span class="text-xs text-slate-500">
                        than yesterday
                    </span>

                </div>

            </div>

        </div>

        <!-- CARD -->
        <div class="dashboard-card p-5">

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

                <div class="icon-box bg-emerald-50 text-emerald-500">
                    <i class="ri-checkbox-circle-line"></i>
                </div>

            </div>

            <div class="mt-5">

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

                <h2 class="text-3xl font-bold text-slate-800 mt-1">
                    284
                </h2>

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

                    <span class="bg-green-100 text-green-700 text-xs font-bold px-2 py-1 rounded-lg">
                        +18%
                    </span>

                    <span class="text-xs text-slate-500">
                        productivity increased
                    </span>

                </div>

            </div>

        </div>

        <!-- CARD -->
        <div class="dashboard-card p-5">

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

                <div class="icon-box bg-rose-50 text-rose-500">
                    <i class="ri-team-line"></i>
                </div>


            </div>

            <div class="mt-5">

                <p class="text-slate-500 text-sm font-medium">
                    Team Members
                </p>

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

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

                    <span class="bg-indigo-100 text-indigo-700 text-xs font-bold px-2 py-1 rounded-lg">
                        Active
                    </span>

                    <span class="text-xs text-slate-500">
                        6 online now
                    </span>

                </div>

            </div>

        </div>

    </div>

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

        <!-- DONUT -->
        <div class="dashboard-card xl:col-span-4 p-6">

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

                <div>
                    <h2 class="text-lg font-bold text-slate-800">
                        Projects Status
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Current project performance
                    </p>
                </div>

            </div>

            <div class="flex flex-col items-center gap-6">

                <div id="statusChart"></div>

                <div class="flex-1 space-y-5 w-full">

                    <div>

                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-2">
                                <span class="status-dot bg-green-400"></span>
                                <span class="text-sm text-slate-600">
                                    On Track
                                </span>
                            </div>

                            <span class="font-bold text-slate-800 text-sm">
                                68%
                            </span>
                        </div>

                        <div class="progress-bar">
                            <div class="progress-fill bg-green-400 w-[68%]"></div>
                        </div>

                    </div>

                    <div>

                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-2">
                                <span class="status-dot bg-orange-400"></span>
                                <span class="text-sm text-slate-600">
                                    At Risk
                                </span>
                            </div>

                            <span class="font-bold text-slate-800 text-sm">
                                20%
                            </span>
                        </div>

                        <div class="progress-bar">
                            <div class="progress-fill bg-orange-400 w-[20%]"></div>
                        </div>

                    </div>

                    <div>

                        <div class="flex items-center justify-between mb-2">
                            <div class="flex items-center gap-2">
                                <span class="status-dot bg-slate-300"></span>
                                <span class="text-sm text-slate-600">
                                    Delayed
                                </span>
                            </div>

                            <span class="font-bold text-slate-800 text-sm">
                                12%
                            </span>
                        </div>

                        <div class="progress-bar">
                            <div class="progress-fill bg-slate-300 w-[12%]"></div>
                        </div>

                    </div>

                </div>

            </div>

        </div>

        <!-- LINE CHART -->
        <div class="dashboard-card xl:col-span-8 p-6">

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

                <div>
                    <h2 class="text-lg font-bold text-slate-800">
                        Task Completion Trend
                    </h2>

                    <p class="text-sm text-slate-500 mt-1">
                        Weekly task analytics overview
                    </p>
                </div>

            </div>

            <div id="trendChart"></div>

        </div>

    </div>

</div>

<script>

document.addEventListener("DOMContentLoaded", function () {

    // DONUT CHART
    new ApexCharts(document.querySelector("#statusChart"), {

        series:[68,20,12],

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

        chart:{
            type:'donut',
            width:260
        },

        colors:['#4ade80','#fb923c','#d1d5db'],

        stroke:{
            width:5,
            colors:['#fff']
        },

        dataLabels:{
            enabled:false
        },

        legend:{
            show:false
        },

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

                    labels:{
                        show:true,

                        total:{
                            show:true,
                            label:'Projects',
                            color:'#94a3b8',
                            fontSize:'13px',
                            formatter:function(){
                                return '124';
                            }
                        },

                        value:{
                            fontSize:'30px',
                            fontWeight:700,
                            color:'#111827'
                        }
                    }
                }
            }
        }

    }).render();



    // LINE CHART
    new ApexCharts(document.querySelector("#trendChart"), {

        series:[{
            name:'Tasks',
            data:[18,45,92,74,88,70,102]
        }],

        chart:{
            type:'area',
            height:320,
            toolbar:{
                show:false
            },
            zoom:{
                enabled:false
            }
        },

        colors:['#6366f1'],

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

        markers:{
            size:5,
            colors:['#6366f1'],
            strokeWidth:0,
            hover:{
                size:7
            }
        },

        fill:{
            type:'gradient',
            gradient:{
                shadeIntensity:1,
                opacityFrom:0.25,
                opacityTo:0.02,
                stops:[0,100]
            }
        },

        dataLabels:{
            enabled:false
        },

        grid:{
            borderColor:'#edf0f7',
            strokeDashArray:0,

            xaxis:{
                lines:{
                    show:false
                }
            },

            yaxis:{
                lines:{
                    show:true
                }
            }
        },

        xaxis:{

            categories:['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],

            labels:{
                style:{
                    colors:'#94a3b8',
                    fontSize:'12px'
                }
            },

            axisBorder:{
                show:false
            },

            axisTicks:{
                show:false
            }

        },

        yaxis:{

            min:0,
            max:105,
            tickAmount:3,

            labels:{
                style:{
                    colors:'#94a3b8',
                    fontSize:'12px'
                }
            }

        },

        tooltip:{
            theme:'light'
        },

        legend:{
            show:false
        }

    }).render();

});

</script>

</body>
</html>

<?php include 'footer.php'; ?>