<?php

session_start();

if(!isset($_SESSION['role'])){

    header("Location: ../index.php");
    exit;
}

if($_SESSION['role'] != 'admin'){

    header("Location: ../index.php");
    exit;
}

include '../config/koneksi.php';

/* TOTAL LAPORAN */

$total_laporan = mysqli_num_rows(
mysqli_query($conn,
"SELECT * FROM laporan")
);

/* PENDING */

$pending = mysqli_num_rows(
mysqli_query($conn,
"SELECT * FROM laporan
WHERE status='pending'")
);

/* DISETUJUI */

$disetujui = mysqli_num_rows(
mysqli_query($conn,
"SELECT * FROM laporan
WHERE status='disetujui'")
);

/* DITOLAK */

$ditolak = mysqli_num_rows(
mysqli_query($conn,
"SELECT * FROM laporan
WHERE status='ditolak'")
);

$total_bantuan = mysqli_num_rows(
mysqli_query($conn,
"SELECT * FROM bantuan")
);

$diproses = mysqli_num_rows(
mysqli_query($conn,
"SELECT * FROM laporan
WHERE status='diproses'")
);

$selesai = mysqli_num_rows(
mysqli_query($conn,
"SELECT * FROM laporan
WHERE status='selesai'")
);

$persentase = 0;

if($total_laporan > 0){

    $persentase = round(
        ($selesai / $total_laporan) * 100
    );
}

$cs_total = mysqli_num_rows(
mysqli_query(
$conn,
"SELECT * FROM cs_rumah_ibadah"
)
);

$rumah_ibadah_total = mysqli_num_rows(
mysqli_query(
$conn,
"SELECT * FROM rumah_ibadah"
)
);

?>

<!DOCTYPE html>
<html>

<head>

    <title>Dashboard Admin</title>
    <script src="https://cdn.tailwindcss.com"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />

    <?php include 'layout/style.php'; ?>

</head>

<body>

    <?php include 'layout/navbar.php'; ?>

    <?php include 'layout/sidebar.php'; ?>

    <div class="content">

        <div class="hero">

            <h1 style="
                font-size:32px;
                margin-bottom:10px;
                ">

                Dashboard Administrator

            </h1>

            <p>

                Selamat datang,
                <b><?= htmlspecialchars($_SESSION['nama']) ?></b>

            </p>

            <p style="
                margin-top:10px;
                opacity:.9;
                ">

                Monitoring laporan kemiskinan,
                validasi bantuan sosial,
                dan distribusi bantuan.

            </p>

            <p style="
margin-top:15px;
font-size:14px;
">

                <?= $total_laporan ?> laporan •
                <?= $total_bantuan ?> bantuan •
                <?= $persentase ?>% selesai

            </p>

        </div>

        <div class="cards">

            <div class="card">

                <i class="fa-solid fa-file"></i>

                <h3>Total Laporan</h3>

                <h1><?= $total_laporan ?></h1>

            </div>

            <div class="card">

                <i class="fa-solid fa-clock"></i>

                <h3>Pending</h3>

                <h1><?= $pending ?></h1>

            </div>

            <div class="card">

                <i class="fa-solid fa-thumbs-up"></i>

                <h3>Disetujui</h3>

                <h1><?= $disetujui ?></h1>

            </div>


            <div class="card">

                <i class="fa-solid fa-hand-holding-heart"></i>

                <h3>Total Bantuan</h3>

                <h1><?= $total_bantuan ?></h1>

            </div>

            <div class="card">

                <i class="fa-solid fa-users"></i>

                <h3>Total CS</h3>

                <h1><?= $cs_total ?></h1>

            </div>

            <div class="card">

                <i class="fa-solid fa-building"></i>

                <h3>Rumah Ibadah</h3>

                <h1><?= $rumah_ibadah_total ?></h1>

            </div>

            <div class="card">

                <i class="fa-solid fa-spinner"></i>

                <h3> Diproses</h3>

                <h1><?= $diproses ?></h1>

            </div>

            <div class="card">

                <i class="fa-solid fa-hand-holding-heart"></i>

                <h3>Selesai</h3>

                <h1><?= $selesai ?></h1>

            </div>

            <div class="card">

                <i class="fa-solid fa-ban"></i>

                <h3>Ditolak</h3>

                <h1><?= $ditolak ?></h1>

            </div>

        </div>

        <div class="box" style="margin-top:25px;">

            <h3>

                Progress Penyelesaian Bantuan

            </h3>

            <br>

            <div style="
                width:100%;
                height:20px;
                background:#e2e8f0;
                border-radius:20px;
                overflow:hidden;
                ">

                <div style="
                    width:<?= $persentase ?>%;
                    height:100%;
                    background:#16a34a;
                    ">
                </div>

            </div>

            <p style="
                margin-top:10px;
                color:#64748b;
                ">

                <?= $persentase ?>%
                laporan telah selesai ditangani

            </p>

        </div>

        <div class="box" style="margin-top:25px;">

            <h3>Statistik Laporan</h3>

            <br>

            <div style="max-width:500px;margin:auto;">
                <canvas id="myChart"></canvas>
            </div>

        </div>

        <div class="box" style="margin-top:25px;">

            <h3>Ringkasan Sistem</h3>

            <br>

            <p>
                Total laporan masuk:
                <b><?= $total_laporan ?></b>
            </p>

            <p>
                Bantuan yang telah dibuat:
                <b><?= $total_bantuan ?></b>
            </p>

            <p>
                CS aktif:
                <b><?= $cs_total ?></b>
            </p>

            <p>
                Rumah ibadah terdaftar:
                <b><?= $rumah_ibadah_total ?></b>
            </p>

        </div>
    </div>



    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
    const ctx = document.getElementById('myChart');

    new Chart(ctx, {

        type: 'doughnut',

        data: {

            labels: [
                'Pending',
                'Disetujui',
                'Ditolak',
                'Diproses',
                'Selesai'
            ],

            datasets: [{

                label: 'Jumlah Laporan',

                data: [
                    <?= $pending ?>,
                    <?= $disetujui ?>,
                    <?= $ditolak ?>,
                    <?= $diproses ?>,
                    <?= $selesai ?>
                ],

                backgroundColor: [
                    '#f59e0b',
                    '#16a34a',
                    '#dc2626',
                    '#2563eb',
                    '#7c3aed'
                ]

            }]
        },

        options: {

            responsive: true,

            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }

    });
    </script>

</body>

</html>