<!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  -->

    <!-- vehicle-list section here  -->
    <div class="main-vehicleList main-attendance">
        <div class="vList-header d-flex flex-wrap align-items-center justify-content-between">
            <div class="listHeader-content">
                <h1>List of Employees</h1>
            </div>

            <div class="listheader-dropBtn d-flex gap-3 align-items-center">
                <button class="btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    Employee No
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">No Employee No</a></li>
                    <li><a class="dropdown-item" href="#">No Employee No</a></li>
                </ul>

                <button class="btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    Date
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">No Date</a></li>
                    <li><a class="dropdown-item" href="#">No Date</a></li>
                </ul>
            </div>
        </div>

        <div class="mainVehicle-list attendece-list py-3">
            <table>
                <tbody>
                    <tr class="theader">
                        <td>Name</td>
                        <td>Employee ID</td>
                        <td>Email</td>
                        <td>Phone number</td>
                        <td>Date</td>
                        <td>Status</td>
                    </tr>

                    <tr class="tbody">
                        <td class="d-flex align-items-center gap-2">
                            <img src="./assets/images/man1.png" alt="Car Detail">
                            <div>
                                <h1>Kristin Watson</h1>
                                <p>Cardiovascular Diseases</p>
                            </div>
                        </td>
                        <td>93874563</td>
                        <td>kristinw@mail.com</td>
                        <td>(219) 555-0114</td>
                        <td>
                            <p>22/12/2022</p>
                            <h6>05:20 PM</h6>
                        </td>
                        <td>
                            <button class="btn btn-danger">Absent</button>
                        </td>
                    </tr>

                    <tr class="tbody">
                        <td class="d-flex align-items-center gap-2">
                            <img src="./assets/images/man2.png" alt="Car Detail">
                            <div>
                                <h1>Jacob Jones</h1>
                                <p>Type 2 Diabetes</p>
                            </div>
                        </td>
                        <td>23847569</td>
                        <td>jacbj@mail.com</td>
                        <td>(319) 555-0115</td>
                        <td>
                            <p>22/12/2022</p>
                            <h6>05:20 PM</h6>
                        </td>
                        <td>
                            <button class="btn btn-success">Present</button>
                        </td>
                    </tr>

                    <tr class="tbody">
                        <td class="d-flex align-items-center gap-2">
                            <img src="./assets/images/man2.png" alt="Car Detail">
                            <div>
                                <h1>Jacob Jones</h1>
                                <p>Type 2 Diabetes</p>
                            </div>
                        </td>
                        <td>23847569</td>
                        <td>jacbj@mail.com</td>
                        <td>(319) 555-0115</td>
                        <td>
                            <p>22/12/2022</p>
                            <h6>05:20 PM</h6>
                        </td>
                        <td>
                            <button class="btn btn-success">Present</button>
                        </td>
                    </tr>

                    <tr class="tbody">
                        <td class="d-flex align-items-center gap-2">
                            <img src="./assets/images/man2.png" alt="Car Detail">
                            <div>
                                <h1>Jacob Jones</h1>
                                <p>Type 2 Diabetes</p>
                            </div>
                        </td>
                        <td>23847569</td>
                        <td>jacbj@mail.com</td>
                        <td>(319) 555-0115</td>
                        <td>
                            <p>22/12/2022</p>
                            <h6>05:20 PM</h6>
                        </td>
                        <td>
                            <button class="btn btn-success">Present</button>
                        </td>
                    </tr>

                    <tr class="tbody">
                        <td class="d-flex align-items-center gap-2">
                            <img src="./assets/images/man5.png" alt="Car Detail">
                            <div>
                                <h1>Lana Rhoades</h1>
                                <p>Cardiovascular Diseases</p>
                            </div>
                        </td>
                        <td>17364323</td>
                        <td>Lana@mail.com</td>
                        <td>(310) 424-0113</td>
                        <td>
                            <p>22/12/2022</p>
                            <h6>05:20 PM</h6>
                        </td>
                        <td>
                            <button class="btn btn-danger">Present</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <!-- vehicle-list section here  -->

    <!-- 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.js
        if (localStorage.getItem("loggedIn") !== "true") {
            window.location.href = "./login/signin.php";
        }
    </script>
</body>

</html>