<?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';

$status = isset($_GET['status'])
    ? mysqli_real_escape_string($conn,$_GET['status'])
    : '';

$query = "SELECT * FROM laporan";

if($status != ''){
    $query .= " WHERE status='$status'";
}

$query .= " ORDER BY id DESC";

$data = mysqli_query($conn,$query);

if(!$data){
    die("Query Error: " . mysqli_error($conn));
}

$total_data = mysqli_num_rows($data);

?>

<!DOCTYPE html>

<html>

<head>


    <title>Peta Kemiskinan</title>

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

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />

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

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

    <style>
    #map {
        height: 80vh;
        width: 100%;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
    }
    </style>


</head>

<body>

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

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

    <div class="content">


        <div class="hero">

            <h1>Peta Kemiskinan</h1>

            <p style="margin-top:10px;">
                Visualisasi lokasi laporan kemiskinan berdasarkan status laporan.
            </p>

        </div>

        <div class="box">

            <div style="
        display:flex;
        justify-content:space-between;
        align-items:center;
        flex-wrap:wrap;
        gap:15px;
    ">

                <div>

                    <h3>Total Data Ditampilkan</h3>

                    <h1 style="
                color:#2563eb;
                margin-top:5px;
            ">
                        <?= $total_data ?>
                    </h1>

                </div>

                <form method="GET">

                    <select name="status" style="
                width:auto;
                display:inline-block;
                ">

                        <option value="">
                            Semua Status
                        </option>

                        <option value="pending" <?= $status=='pending' ? 'selected' : '' ?>>
                            Pending
                        </option>

                        <option value="disetujui" <?= $status=='disetujui' ? 'selected' : '' ?>>
                            Disetujui
                        </option>

                        <option value="ditolak" <?= $status=='ditolak' ? 'selected' : '' ?>>
                            Ditolak
                        </option>

                        <option value="diproses" <?= $status=='diproses' ? 'selected' : '' ?>>
                            Diproses
                        </option>

                        <option value="selesai" <?= $status=='selesai' ? 'selected' : '' ?>>
                            Selesai
                        </option>

                    </select>

                    <button type="submit" class="btn approve">

                        Filter

                    </button>

                    <a href="peta.php" class="btn delete">

                        Reset

                    </a>

                </form>

            </div>

        </div>

        <br>

        <div id="legend">

            <b>Status Marker</b>

            <hr style="margin:10px 0;">

            🟡 Pending <br>
            🟢 Disetujui <br>
            🔴 Ditolak <br>
            🔵 Diproses <br>
            🟣 Selesai

        </div>

        <div id="map"></div>


    </div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

    <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>

    <script>
    var map = L.map('map').setView(
        [-0.0263, 109.3425],
        11
    );

    L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; OpenStreetMap'
        }
    ).addTo(map);

    var markers = L.markerClusterGroup();

    <?php

mysqli_data_seek($data,0);

while($row = mysqli_fetch_assoc($data)){

    if(
        empty($row['latitude']) ||
        empty($row['longitude'])
    ){
        continue;
    }

    $warna = "orange";

    if($row['status']=="disetujui"){
        $warna = "green";
    }
    elseif($row['status']=="ditolak"){
        $warna = "red";
    }
    elseif($row['status']=="diproses"){
        $warna = "blue";
    }
    elseif($row['status']=="selesai"){
        $warna = "purple";
    }

    $nama =
    addslashes(
    htmlspecialchars(
    $row['nama_warga']
    ));

    $alamat =
    addslashes(
    htmlspecialchars(
    $row['alamat']
    ));

    $kondisi =
    addslashes(
    htmlspecialchars(
    $row['kondisi']
    ));

    $foto =
    addslashes(
    htmlspecialchars(
    $row['foto']
    ));

    if(empty($row['foto'])){

    $foto = 'no-image.png';
    }

 $statusBadge = '';

    if($row['status']=='pending'){
        $statusBadge = '🟡 Pending';
    }
    elseif($row['status']=='disetujui'){
        $statusBadge = '🟢 Disetujui';
    }
    elseif($row['status']=='ditolak'){
        $statusBadge = '🔴 Ditolak';
    }
    elseif($row['status']=='diproses'){
        $statusBadge = '🔵 Diproses';
    }
    elseif($row['status']=='selesai'){
        $statusBadge = '🟣 Selesai';
    }

?>

    L.circleMarker(
            [
                <?= $row['latitude'] ?>,
                <?= $row['longitude'] ?>
            ], {
                radius: 12,
                weight: 2,
                color: '<?= $warna ?>',
                fillColor: '<?= $warna ?>',
                fillOpacity: 0.8
            }
        )

        .bindPopup(`

<div style="width:250px;">

<img
src="../assets/uploads/<?= $foto ?>"
onerror="this.src='../assets/uploads/no-image.png'"
    style="
    width:100%;
    height:150px;
    object-fit:cover;
    border-radius:10px;
    margin-bottom:10px;
    ">

    <b style="
    font-size:16px;
    ">
    <?= $nama ?>
    </b>

    <hr style="margin:8px 0;">

    <b>Alamat</b>
    <br>
    <?= $alamat ?>

    <br><br>

    <b>Kondisi</b>
    <br>
    <?= $kondisi ?>

    <br><br>

    <b>Status</b>
    <br>
    <?= $statusBadge ?>

    <br><br>

    <b>Tanggal</b>
    <br>
    <?= !empty($row['created_at']) 
    ? date('d-m-Y H:i', strtotime($row['created_at'])) 
    : '-' ?>

    <br><br>

    <a
    href="https://www.google.com/maps?q=<?= $row['latitude'] ?>,<?= $row['longitude'] ?>"
    target="_blank"
    style="
    display:inline-block;
    background:#2563eb;
    color:white;
    padding:8px 12px;
    border-radius:8px;
    text-decoration:none;
    ">

    📍 Buka Google Maps

    </a>

</div>

`)
        .addTo(markers);

    <?php } ?>

    map.addLayer(markers);

    if (markers.getLayers().length > 0) {

        map.fitBounds(
            markers.getBounds()
        );

    }
    </script>

</body>

</html>