<?php
require_once __DIR__ . "/../../app/config/auth.php";
require_login();

require_once __DIR__ . "/../../app/config/app.php";
require_once __DIR__ . "/../../app/config/session.php";

// Dashboard Data
require_once __DIR__ . "/php/dashboard_data.php";

// Profile Data
$nama = getSession('pengurus_nama') ?? 'Pengurus';
$pengurusFoto = getSession('pengurus_foto');

$root = dirname(__DIR__, 2); // naik 2 folder (ke project root)
$uploadPath = $root . "/uploads/pengurus/";
$assetsPath = $root . "/assets/img/pengurus/";

if ($pengurusFoto && file_exists($uploadPath . $pengurusFoto)) {
    $fotoUser = base_url('/uploads/pengurus/' . $pengurusFoto);
} elseif ($pengurusFoto && file_exists($assetsPath . $pengurusFoto)) {
    $fotoUser = base_url('/assets/img/pengurus/' . $pengurusFoto);
} else {
    $fotoUser = base_url('/assets/img/pengurus/user_default.png');
}

function esc($v){ return htmlspecialchars((string)$v, ENT_QUOTES,'UTF-8'); }
?>

<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dashboard — Sistem Informasi Masjid</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<link rel="stylesheet" href="<?= base_url('/assets/css/dashboard/sidebar.css'); ?>">
<link rel="stylesheet" href="<?= base_url('/assets/css/dashboard/layout.css'); ?>">
<link rel="stylesheet" href="<?= base_url('/assets/css/dashboard/widgets.css'); ?>">
</head>

<body class="dashboard-page">

<?php include __DIR__ . "/../../assets/component/dashboard_sidebar.php"; ?>

<div id="content-wrapper" class="content-wrapper">

<nav class="navbar navbar-light bg-light shadow-sm px-3">
    <button id="toggleSidebar" class="btn btn-outline-success me-3">
        <i class="fa fa-bars"></i>
    </button>

    <span class="text-muted">Halo, <?= esc($nama) ?></span>

    <button id="btnFullscreen" class="btn btn-outline-secondary btn-sm">
        <i id="iconFullscreen" class="fa fa-expand"></i>
    </button>
</nav>

<main class="container-fluid mt-4">

<div class="d-flex justify-content-between align-items-start mb-3">
    <div>
        <h1 class="page-title">Dashboard Masjid Nurul Islam Sarimulya</h1>
        <p class="small text-muted">Ringkasan — <?= date('d M Y'); ?></p>
    </div>

    <!-- NEXT PRAYER CARD -->
    <div class="card px-3 py-2 shadow-sm text-end">
        <div class="small text-muted">Waktu Sholat Berikutnya</div>
        <div id="nextPrayerLabel" class="fw-bold"><?= esc($nextPrayer ?? '-'); ?></div>
        <div id="countdownNextPrayer" class="text-primary small">--:--:--</div>
        <input type="hidden" id="nextPrayerTime" value="<?= esc($nextPrayerTime ?? ''); ?>">
    </div>
</div>

<!-- STAT CARDS -->
<div class="row g-3 mb-3">

    <div class="col-md-6 col-lg-3">
        <div class="card p-3 stat-card">
            <small class="text-muted">Jamaah Hari Ini</small>
            <div id="totalJamaahToday" class="h4 mb-0"><?= esc($jamaah_today ?? 0) ?></div>
            <small class="text-muted"> • Tepat Waktu Sholat <?= esc($jamaah_pria) ?> • Diluar Waktu Sholat <?= esc($jamaah_wanita) ?></small>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="card p-3 stat-card">
            <small class="text-muted">Pemasukan Hari Ini</small>
            <div class="h4 mb-0">Rp <?= number_format($pemasukan_today) ?></div>
            <small class="text-muted">Bulan ini: Rp <?= number_format($pemasukan_month) ?></small>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="card p-3 stat-card">
            <small class="text-muted">Penggunaan Air Hari Ini</small>
            <div id="airUsageToday" class="h4 mb-0 live-air-usage"><?= esc($air_today_usage) ?> L</div>
            <small id="airIncomeToday" class="text-muted live-air-income">
                Pemasukan: <?= esc($air_today_income) ?> L
            </small>
        </div>
    </div>

    <div class="col-md-6 col-lg-3">
        <div class="card p-3 stat-card">
            <small class="text-muted">Status Ruangan</small>
            <div id="sensorStatus" class="h6 mb-0">
                Suhu: <span id="suhuValue"><?= esc($suhu) ?></span>°C |
                Kelembapan: <span id="humValue"><?= esc($kelembapan) ?></span>%
            </div>
        </div>
    </div>

</div>

<!-- CHART AREA -->
<div class="row g-3 mt-2">

    <div class="col-lg-6">
        <div class="card p-3 shadow-sm chart-card">
            <h6 class="text-muted mb-2">Intensitas Jamaah 7 Hari</h6>
            <canvas id="chartJamaah" height="180"></canvas>
        </div>
    </div>

    <div class="col-lg-6">
        <div class="card p-3 shadow-sm chart-card">
            <h6 class="text-muted mb-2">Penggunaan Air 7 Hari</h6>
            <canvas id="chartAir" height="180"></canvas>
        </div>
    </div>

</div>

</main>
</div>

<script>
const labelsJamaah = <?= json_encode($labels_jamaah ?? []); ?>;
const dataJamaah   = <?= json_encode($trend_jamaah_values ?? []); ?>;

const labelsAir    = <?= json_encode($labels_air ?? []); ?>;
const dataAirUsage = <?= json_encode($trend_air_usage ?? []); ?>;
const dataAirIncome= <?= json_encode($trend_air_income ?? []); ?>;

const base_url = <?= json_encode(base_url()); ?>;
</script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="<?= base_url('/assets/js/dashboard/main.js'); ?>"></script>

</body>
</html>
