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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard</title>
    <link rel="stylesheet" href="./assets/css/all.min.css">
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="./assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="./assets/css/style.css">
</head>

<body>
    <!-- complete header section  -->
    <div class="head-Container">
        <?php include './includes/header.php'; ?>

        <div class="headBanner d-flex flex-wrap justify-content-between align-items-center mt-5 mb-5">
            <div class="banner-content">
                <h1>Welcome Back, Michael Luis <img src="./assets/images/hand.png" alt="hand"></h1>
                <p>This is the most recent information for the past seven days. <a href="#"
                        class="fw-bold text-white">Verify Right Now!</a></p>
            </div>

            <div class="bannerBtn d-flex gap-3">
                <button class="weekBtn d-flex gap-3 align-items-center">Week <i
                        class="fa-solid fa-caret-down"></i></button>
                <button class="expoBtn d-flex gap-3 align-items-center"><i class="fa-solid fa-print"></i> Export
                    Report</button>
            </div>
        </div>

        <div class="bannerCards d-flex justify-content-between gap-3">
            <div class="bannerCard-content w-25">
                <div class="iconBox d-flex align-items-center gap-3 mb-3">
                    <i class="fa-solid fa-user"></i>
                    <h3>Total Complains</h3>
                </div>

                <div class="total d-flex align-items-center gap-3">
                    <h1>15</h1>
                    <div class="profit d-flex align-items-center">
                        <i class="fa-solid fa-arrow-up"></i>
                        <p>+ 12.1 %</p>
                    </div>
                </div>

                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>

            <div class="bannerCard-content w-25">
                <div class="iconBox d-flex align-items-center gap-3 mb-3">
                    <i class="fa-solid fa-briefcase-medical"></i>
                    <h3>Total Pending</h3>
                </div>

                <div class="total d-flex align-items-center gap-3">
                    <h1>159</h1>
                    <div class="profit d-flex align-items-center">
                        <i class="fa-solid fa-arrow-up"></i>
                        <p>+2.5%</p>
                    </div>
                </div>

                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>

            <div class="bannerCard-content w-25">
                <div class="iconBox d-flex align-items-center gap-3 mb-3">
                    <i class="fa-solid fa-id-badge"></i>
                    <h3>Total Resolve</h3>
                </div>

                <div class="total d-flex align-items-center gap-3">
                    <h1>15</h1>
                    <div class="profit d-flex align-items-center">
                        <i class="fa-solid fa-arrow-up"></i>
                        <p>+1.5%</p>
                    </div>
                </div>

                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>

            <div class="bannerCard-content w-25">
                <div class="iconBox d-flex align-items-center gap-3 mb-3">
                    <i class="fa-solid fa-door-open"></i>
                    <h3>In Progress..</h3>
                </div>

                <div class="total d-flex align-items-center gap-3">
                    <h1>15</h1>
                    <div class="profit d-flex align-items-center">
                        <i class="fa-solid fa-arrow-up"></i>
                        <p>+ 12.1 %</p>
                    </div>
                </div>

                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
            </div>
        </div>
    </div>
    <!-- complete header section  -->

    <!-- graph chat and calender section -->
    <div class="overviewCol d-flex flex-wrap justify-content-between">
        <div class="chart-container">
            <div class="chatConContent d-flex align-items-start justify-content-between">
                <div>
                    <h2>Weekly Overview</h2>
                    <p>This graph presents a weekly overview of total complaints received and successfully resolved.</p>
                </div>
                <div class="legend">
                    <div class="legend-item">
                        <div class="legend-color legend-impatient"></div> Complains
                    </div>

                    <div class="legend-item">
                        <div class="legend-color legend-patient"></div> Resolve
                    </div>
                </div>
            </div>
            <canvas id="weeklyChart" height="300"></canvas>
        </div>

        <div class="calendar-container">
            <div class="calendar-header">
                <span class="calendar-title"><i class="fa-solid fa-calendar"></i> Attendance</span>
                <div class="calendar-nav">
                    <div>
                        <span id="monthYear"></span>
                    </div>
                    <div>
                        <button id="prev"><i class="fa-solid fa-chevron-left"></i></button>
                        <button id="next"><i class="fa-solid fa-chevron-right"></i></button>
                    </div>
                </div>
            </div>

            <div class="calendar">
                <div class="calendar-days">
                    <div>Mo</div>
                    <div>Tu</div>
                    <div>We</div>
                    <div>Th</div>
                    <div>Fr</div>
                    <div>Sa</div>
                    <div>Su</div>
                </div>
                <div class="calendar-dates" id="calendarDates"></div>
            </div>

            <div class="attenDetail">
                <span><span class="dot present"></span>Present</span>
                <span><span class="dot absent"></span>Absent</span>
                <span><span class="dot leave"></span>On Leave</span>
            </div>
        </div>
    </div>
    <!-- graph chat and calender section -->

    <!-- Employe data section  -->
    <div class="employeData">
        <div class="dataTable-Header d-flex justify-content-between align-items-center">
            <h1>Employees Data</h1>
            <div class="dropdown">
                <button class="filterBtn btn-secondary dropdown-toggle d-flex align-items-center" type="button"
                    data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="./assets/images/sliders.svg" alt="Icon">
                    Filter
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action</a></li>
                    <li><a class="dropdown-item" href="#">Another action</a></li>
                    <li><a class="dropdown-item" href="#">Something else here</a></li>
                </ul>
            </div>
        </div>

        <div class="mobile-table">
            <table class="table w-100">
                <tr class="eployeeData-content pb-3 border-bottom d-flex justify-content-between align-items-center">
                    <td><input type="checkbox"></td>
                    <td>No</td>
                    <td>ID Code</td>
                    <td>Name <img src="./assets/images/arrow-down-up.svg" alt="Icon"></td>
                    <td>Age</td>
                    <td>Date</td>
                    <td>Email</td>
                    <td>Type</td>
                    <td>Status</td>
                    <td>Action</td>
                </tr>
            </table>
        </div>
    </div>
    <!-- Employe data section  -->

    <!-- footer here  -->
     <?php include './includes/footer.php'; ?>
    <!-- footer here  -->

    <!-- logout btn here  -->
     <?php include './includes/logout.php'; ?>
    <!-- logout btn here  -->


    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="./assets/js/app.js"></script>
    <script src="./assets/js/bootstrap.bundle.min.js"></script>
    <script>
        // Login check
        if (localStorage.getItem("loggedIn") !== "true") {
            window.location.href = "./login/signin.php";
        }
    </script>
</body>

</html>