<?php
include('core.php');

$component = getAllTable();
$totalComponents = count($component);

$today = date('Y-m-d');
$startDate = date('Y-m-01', strtotime($today)); // First day of current month
$endDate = date('Y-m-t', strtotime($today)); // Last day of current month
?>
<!DOCTYPE html>
<html lang="en" data-menu-size="hidden">

<head>
    <!-- Title Meta -->
    <meta charset="utf-8"/>
    <title>Home</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- App favicon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico">

    <!-- Gridjs Plugin css -->
    <link href="assets/vendor/gridjs/theme/mermaid.min.css" rel="stylesheet" type="text/css"/>

    <!-- Vendor css (Require in all Page) -->
    <link href="assets/css/vendor.min.css" rel="stylesheet" type="text/css"/>

    <!-- Icons css (Require in all Page) -->
    <link href="assets/css/icons.min.css" rel="stylesheet" type="text/css"/>

    <!-- App css (Require in all Page) -->
    <link href="assets/css/app.min.css" rel="stylesheet" type="text/css"/>

    <!-- Theme Config js (Require in all Page) -->
    <script src="assets/js/config.min.js"></script>
</head>

<body>

<!-- START Wrapper -->
<div class="wrapper">

    <!-- ========== Topbar Start ========== -->
    <header class="">
        <div class="topbar">
            <div class="container-fluid">
                <div class="navbar-header">
                    <div class="d-flex align-items-center gap-2">
                    </div>

                    <div class="d-flex align-items-center gap-1">
                        <!-- Theme Color (Light/Dark) -->
                        <div class="topbar-item">
                            <button type="button" class="topbar-button" id="light-dark-mode">
                                <i class="ri-moon-line fs-24 light-mode"></i>
                                <i class="ri-sun-line fs-24 dark-mode"></i>
                            </button>
                        </div>

                        <!-- Category -->
                        <div class="dropdown topbar-item d-none d-lg-flex">
                            <button type="button" class="topbar-button" data-toggle="fullscreen">
                                <i class="ri-fullscreen-line fs-24 fullscreen"></i>
                                <i class="ri-fullscreen-exit-line fs-24 quit-fullscreen"></i>
                            </button>
                        </div>

                        <!-- Theme Setting -->
                        <div class="topbar-item d-none d-md-flex">
                            <button type="button" class="topbar-button" id="theme-settings-btn"
                                    data-bs-toggle="offcanvas" data-bs-target="#theme-settings-offcanvas"
                                    aria-controls="theme-settings-offcanvas">
                                <i class="ri-settings-4-line fs-24"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- Right Sidebar (Theme Settings) -->
    <div>
        <div class="offcanvas offcanvas-end border-0 rounded-start-4 overflow-hidden" tabindex="-1"
             id="theme-settings-offcanvas">
            <div class="d-flex align-items-center bg-primary p-3 offcanvas-header">
                <h5 class="text-white m-0">Theme Settings</h5>
                <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="offcanvas"
                        aria-label="Close"></button>
            </div>

            <div class="offcanvas-body p-0">
                <div data-simplebar class="h-100">
                    <div class="p-3 settings-bar">

                        <div>
                            <h5 class="mb-3 font-16 fw-semibold">Color Scheme</h5>

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="data-bs-theme"
                                       id="layout-color-light" value="light">
                                <label class="form-check-label" for="layout-color-light">Light</label>
                            </div>

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="data-bs-theme" id="layout-color-dark"
                                       value="dark">
                                <label class="form-check-label" for="layout-color-dark">Dark</label>
                            </div>
                        </div>

                        <div>
                            <h5 class="my-3 font-16 fw-semibold">Topbar Color</h5>

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="data-topbar-color"
                                       id="topbar-color-light" value="light">
                                <label class="form-check-label" for="topbar-color-light">Light</label>
                            </div>
                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="data-topbar-color"
                                       id="topbar-color-dark" value="dark">
                                <label class="form-check-label" for="topbar-color-dark">Dark</label>
                            </div>
                        </div>


                        <div>
                            <h5 class="my-3 font-16 fw-semibold">Menu Color</h5>

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="data-menu-color"
                                       id="leftbar-color-light" value="light">
                                <label class="form-check-label" for="leftbar-color-light">
                                    Light
                                </label>
                            </div>

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="data-menu-color"
                                       id="leftbar-color-dark" value="dark">
                                <label class="form-check-label" for="leftbar-color-dark">
                                    Dark
                                </label>
                            </div>
                        </div>

                        <div>
                            <h5 class="my-3 font-16 fw-semibold">Sidebar Size</h5>

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="data-menu-size"
                                       id="leftbar-size-default" value="default">
                                <label class="form-check-label" for="leftbar-size-default">
                                    Default
                                </label>
                            </div>

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="data-menu-size"
                                       id="leftbar-size-small" value="condensed">
                                <label class="form-check-label" for="leftbar-size-small">
                                    Condensed
                                </label>
                            </div>

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="data-menu-size" id="leftbar-hidden"
                                       value="hidden">
                                <label class="form-check-label" for="leftbar-hidden">
                                    Hidden
                                </label>
                            </div>

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="data-menu-size"
                                       id="leftbar-size-small-hover-active" value="sm-hover-active">
                                <label class="form-check-label" for="leftbar-size-small-hover-active">
                                    Small Hover Active
                                </label>
                            </div>

                            <div class="form-check mb-2">
                                <input class="form-check-input" type="radio" name="data-menu-size"
                                       id="leftbar-size-small-hover" value="sm-hover">
                                <label class="form-check-label" for="leftbar-size-small-hover">
                                    Small Hover
                                </label>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
            <div class="offcanvas-footer border-top p-3 text-center">
                <div class="row">
                    <div class="col">
                        <button type="button" class="btn btn-danger w-100" id="reset-layout">Reset</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ========== Topbar End ========== -->

    <!-- ==================================================== -->
    <!-- Start right Content here -->
    <!-- ==================================================== -->
    <div class="page-content">

        <!-- Start Container Fluid -->
        <div class="container-fluid">
            <div class="row">
                <div class="col">
                    <div class="card">
                        <div class="card-body overflow-hidden position-relative">
                            <iconify-icon icon="solar:cpu-bolt-line-duotone" class="fs-36 text-warning"></iconify-icon>
                            <h3 class="mb-0 fw-bold mt-3 mb-1"><?php echo $totalComponents; ?></h3>
                            <p class="text-muted">Total Components</p>
                            <i class='ri-stack-line widget-icon'></i>
                        </div> <!-- end card-body -->
                    </div> <!-- end card -->
                </div> <!-- end col -->

                <div class="col">
                    <div class="card">
                        <div class="card-body overflow-hidden position-relative">
                            <iconify-icon icon="solar:black-hole-line-duotone"
                                          class="fs-36 text-success"></iconify-icon>
                            <h3 class="mb-0 fw-bold mt-3 mb-1"><?php echo $totalComponents; ?></h3>
                            <p class="text-muted">Total Components</p>
                            <i class='ri-file-chart-line widget-icon'></i>
                        </div> <!-- end card-body -->
                    </div> <!-- end card -->
                </div> <!-- end col -->

                <div class="col">
                    <div class="card">
                        <div class="card-body overflow-hidden position-relative">
                            <iconify-icon icon="solar:leaf-bold-duotone" class="fs-36 text-primary"></iconify-icon>
                            <h3 class="mb-0 fw-bold mt-3 mb-1"><?php echo $totalComponents; ?></h3>
                            <p class="text-muted">Total Components</p>
                            <i class='ri-drag-move-line widget-icon'></i>
                        </div> <!-- end card-body -->
                    </div> <!-- end card -->
                </div> <!-- end col -->

                <div class="col">
                    <div class="card">
                        <div class="card-body overflow-hidden position-relative">
                            <iconify-icon icon="solar:crown-star-bold-duotone" class="fs-36 text-danger"></iconify-icon>
                            <h3 class="mb-0 fw-bold mt-3 mb-1"><?php echo $totalComponents; ?></h3>
                            <p class="text-muted">Total Components</p>
                            <i class='ri-hand-heart-line widget-icon'></i>
                        </div> <!-- end card-body -->
                    </div> <!-- end card -->
                </div> <!-- end col -->
            </div>
            <!-- end row-->

            <div class="card">
                <div class="card-body p-0">
                    <div class="p-3">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h4 class="card-title">Date Filter</h4>
                        </div>
                        <form id="date-filter-form">
                            <input type="hidden" id="mode" value="home">
                            <div class="row">
                                <div class="col-6">
                                    <label for="start-date">Start Date:</label>
                                    <input type="text" id="start-date" class="form-control" name="start_date">
                                </div>
                                <div class="col-6">
                                    <label for="end-date">End Date:</label>
                                    <input type="text" id="end-date" class="form-control" name="end_date">
                                </div>
                            </div>
                            <div class="row mt-3">
                                <div class="col text-right">
                                    <button type="submit" class="btn btn-primary">Filter</button>
                                    <button type="button" id="reset" class="btn btn-danger">Reset</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-8">
                    <div class="card">
                        <div class="card-body p-0">
                            <div class="p-3">
                                <div class="d-flex justify-content-between align-items-center">
                                    <h4 class="card-title">Energy Consumption (<?php echo date('Y'); ?>)</h4>
                                </div>

                                <div dir="ltr">
                                    <div id="chart" class="apex-charts"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-4">
                    <div class="card">
                        <div class="card-body p-0">
                            <div class="p-3">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h4 class="card-title">Calculate Energy</h4>
                                </div>

                                <form id="calculate-energy-form">
                                    <div class="mb-3">
                                        <label for="price-per-kwh" class="form-label">Price per kWh:</label>
                                        <div class="input-group">
                                            <span class="input-group-text">Rp</span>
                                            <input type="text" class="form-control" id="price-per-kwh" onkeyup="formatCurrency(this)" name="price_per_kwh" required>
                                        </div>
                                    </div>
                                    <button type="button" id="calculate" class="btn btn-primary">Calculate</button>
                                    <button type="button" id="reset-calculate" class="btn btn-danger">Clear</button>
                                </form>
                                <div id="result-kwh" class="mt-3" style="display: none; font-size: 1.5rem; font-weight: bold; color: #ffffff; background-color: #007bff; padding: 10px; border-radius: 5px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end row-->

            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4 class="card-title">List Components</h4>
                </div> <!-- end card-header-->
                <div class="card-body p-0">
                    <div class="p-3">
                        <div id="table-pagination"></div>
                    </div>
                </div> <!-- end card body -->
            </div>

        </div>
        <!-- End Container Fluid -->

        <!-- ========== Footer Start ========== -->
        <footer class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 text-center">
                        Crafted by
                        <iconify-icon icon="solar:hearts-bold-duotone"
                                      class="fs-18 align-middle text-danger"></iconify-icon>
                        <a
                                href="https://wreative.com?source=esp32" class="fw-bold footer-text" target="_blank">Wreative</a>
                    </div>
                </div>
            </div>
        </footer>
        <!-- ========== Footer End ========== -->

    </div>
    <!-- ==================================================== -->
    <!-- End Page Content -->
    <!-- ==================================================== -->

</div>
<!-- END Wrapper -->

<!-- Vendor Javascript (Require in all Page) -->
<script src="assets/js/vendor.js"></script>

<!-- App Javascript (Require in all Page) -->
<script src="assets/js/app.js"></script>

<!-- Gridjs Plugin js -->
<script src="assets/vendor/gridjs/gridjs.umd.js"></script>

<!-- Custom Js -->
<script>
    let data = <?= json_encode(getAllFirstData()) ?>;
    let chartData = <?= json_encode(getDailyEnergyConsumption($startDate, $endDate)) ?>;
</script>
<script src="assets/js/core.js"></script>
<script src="assets/js/table.js"></script>
<script src="assets/js/chart.js"></script>

</body>

</html>