<?php
session_start();
if (
    !isset($_SESSION['username'], $_SESSION['database'], $_SESSION['userid']) ||
    empty($_SESSION['username']) || empty($_SESSION['database']) || empty($_SESSION['userid'])
) {
    echo "❌ Session data incomplete. Redirecting to login...";
    header("Refresh:2; url=login.html");
    exit();
}
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sales Analytics</title>
    <!-- IMPORTING FONTS -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="data/SALES ANALYTICS.png" type="image/x-icon">

    <!-- IMPORTING CHART.JS TO INITIALIZE CHARTS IN THE WEBSITE -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>

    <!-- MAIN STYLE SHEET WITH PRELOADER -->
    <link rel="stylesheet" href="main.css">

    <!-- SCRIPTS FOR MODAL, PRELOADER, CHARTMAKER AND CUSTOM MADE PLUGINS -->
    <script src="chartMaker.js"></script>
    <script src="modal.js"></script>
    <script>
        function hideNavigation() {
            if (!document.getElementById("navigation").classList.contains("navigation-hide")) {
                toggleNavigation();
            }
        }

        function toggleCollapse(el) {
            el.classList.toggle('active');
        }

        function toggleNavigation() {
            document.getElementById("navigation").classList.toggle("navigation-hide");
        }

        document.addEventListener("keydown", (event) => {
            if (event.key === "Escape") {
                closeModal();
                hideNavigation();
            }
        });
    </script>
</head>

<body class="salesAnalyticsDashboard darkmode" onclick="hideNavigation()">
    <?php include "preloader.html"?>
    <?php include "navigation.html"?>
    <?php include "modal.html"?>


    <!-- MAIN DASHBOARD STARTS HERE -->
    <div class="dashboard">
        <!-- HEADER OF THE PAGE USED WITH FLEX TO MAKE IT CUSTOMIZABLE AS PER SCREEN SIZE -->
        <div class="header">
            <h1>Sales Analytics</h1>

            <div class="filters">

                <button class="update" id="logout" title="Logout" onclick="logoutUser()">⏻</button>
                
                <button class="update" id="update" title="Update" onclick="updateData()">⟳</button>

                <button class="menu" id="menu" title="Menu" onclick="event.stopPropagation(); toggleNavigation()">☰</button>

            </div>
        </div>

        <div class="kpiRow" id="kpiRow">
            <div class="totalRevenueKpi">
                <img src="data/money.png" alt="icon">
                <span>Total Revenue</span>
                <span id="totalRevenueKpi" class="kpiValue"></span>
                <span id="comment" class="comment">All Time earnings</span>
            </div>
            <div class="totalOrdersKpi">
                <img src="data/bag.png" alt="icon">
                <span>Total Orders</span>
                <span id="totalOrdersKpi" class="kpiValue"></span>
                <span id="comment" class="comment">Orders Processed</span>
            </div>
            <div class="avgOrderValueKpi">
                <img src="data/chart.png" alt="icon">
                <span>Avg Order Value</span>
                <span id="avgOrderValueKpi" class="kpiValue"></span>
                <span id="comment" class="comment">Per Order Average</span>

            </div>
            <div class="deliveryRateKpi">
                <img src="data/delivery.png" alt="icon">
                <span>Delivery Rate</span>
                <span id="deliveryRateKpi" class="kpiValue"></span>
                <span id="comment" class="comment">Successfully Delivered</span>

            </div>
            <div class="paidOrdersKpi">
                <img src="data/rupee.png" alt="icon">
                <span>Paid Orders</span>
                <span id="paidOrdersKpi" class="kpiValue"></span>
                <span id="comment" class="comment">Payement Complete</span>

            </div>
            <div class="deliveredOrdersKpi">
                <img src="data/delivered.png" alt="icon">
                <span>Delivered Orders</span>
                <span id="deliveredOrdersKpi" class="kpiValue"></span>
                <span id="comment" class="comment">Orders Fulfilled</span>

            </div>
        </div>

        <div align="center" class="card">
            <h3>Revenue by Category</h3>
            <canvas class="bar" id="revenueByCategory"></canvas>
        </div>



        <div align="center" class="card">
            <h3>Orders By Status</h3>
            <canvas class="pie" id="ordersByStatus"></canvas>
        </div>



        <div align="center" class="card">
            <h3>Revenue By Payment</h3>
            <canvas class="bar" id="revenueByPayment"></canvas>
        </div>




        <div align="center" class="card">
            <h3>Orders By Gender</h3>
            <canvas class="pie" id="ordersByGender"></canvas>
        </div>



        <div align="center" class="card">
            <h3>Top Cities Revenue</h3>
            <canvas class="bar" id="topCitiesRevenue"></canvas>
        </div>




        <div align="center" class="card">
            <h3>Average Delivery Days</h3>
            <canvas class="bar" id="averageDeliveryDays"></canvas>
        </div>


        
    </div>



    <script src="salesAnalytics.js"></script>
</body>

</html>