<?php

session_start();

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

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

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

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

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

$user_id = $_SESSION['id'];

$cs = mysqli_fetch_assoc(

mysqli_query($conn,

"SELECT * FROM cs_rumah_ibadah
WHERE user_id='$user_id'")

);

$cs_id = $cs['id'];

$data = mysqli_query($conn,

"SELECT bantuan.*,

laporan.nama_warga,
laporan.alamat,
laporan.latitude,
laporan.longitude

FROM bantuan

JOIN laporan
ON bantuan.laporan_id = laporan.id

WHERE bantuan.cs_id='$cs_id'

ORDER BY bantuan.id DESC"

);

?>

<!DOCTYPE html>
<html>

<head>

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

</head>

<body class="bg-slate-100 min-h-screen">

    <div class="max-w-7xl mx-auto p-6">

        <!-- HEADER -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">

            <div>

                <h1 class="text-3xl font-bold text-slate-800">
                    Tugas Bantuan Saya
                </h1>

                <p class="text-slate-500 mt-2">
                    Daftar bantuan sosial yang harus disalurkan.
                </p>

            </div>

            <a href="dashboard.php"
                class="bg-slate-800 hover:bg-slate-900 text-white px-5 py-3 rounded-xl shadow transition">

                ← Dashboard

            </a>

        </div>

        <!-- CARD -->
        <div class="bg-white rounded-3xl shadow-lg overflow-hidden">

            <div class="overflow-x-auto">

                <table class="min-w-full">

                    <thead>

                        <tr class="bg-emerald-600 text-white">

                            <th class="px-4 py-4 text-left">No</th>
                            <th class="px-4 py-4 text-left">Nama Warga</th>
                            <th class="px-4 py-4 text-left">Alamat</th>
                            <th class="px-4 py-4 text-left">Lokasi</th>
                            <th class="px-4 py-4 text-left">Jenis Bantuan</th>
                            <th class="px-4 py-4 text-left">Status</th>
                            <th class="px-4 py-4 text-left">Aksi</th>

                        </tr>

                    </thead>

                    <tbody>

                        <?php

                        $no = 1;

                        if(mysqli_num_rows($data) == 0){
                        ?>

                        <tr>

                            <td colspan="7" class="text-center py-10 text-slate-500">

                                Belum ada tugas bantuan

                            </td>

                        </tr>

                        <?php
                        }

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

                        <tr class="border-b hover:bg-slate-50 transition">

                            <td class="px-4 py-4">
                                <?= $no++ ?>
                            </td>

                            <td class="px-4 py-4 font-medium text-slate-800">
                                <?= htmlspecialchars($row['nama_warga']) ?>
                            </td>

                            <td class="px-4 py-4 text-slate-600">
                                <?= htmlspecialchars($row['alamat']) ?>
                            </td>

                            <td class="px-4 py-4">

                                <a target="_blank"
                                    href="https://www.google.com/maps?q=<?= $row['latitude'] ?>,<?= $row['longitude'] ?>"
                                    class="text-blue-600 hover:underline font-medium">

                                    Lihat Lokasi

                                </a>

                            </td>

                            <td class="px-4 py-4">
                                <?= htmlspecialchars($row['jenis_bantuan']) ?>
                            </td>

                            <td class="px-4 py-4">

                                <?php if($row['status']=='proses'){ ?>

                                <span class="
                                    bg-amber-500
                                    text-white
                                    px-3 py-1
                                    rounded-full
                                    text-sm">

                                    Diproses

                                </span>

                                <?php } ?>

                                <?php if($row['status']=='selesai'){ ?>

                                <span class="
                                    bg-green-600
                                    text-white
                                    px-3 py-1
                                    rounded-full
                                    text-sm">

                                    Selesai

                                </span>

                                <?php } ?>

                            </td>

                            <td class="px-4 py-4">

                                <?php if($row['status']=='proses'){ ?>

                                <a href="upload_bukti.php?id=<?= $row['id'] ?>" class="
                                    bg-emerald-600
                                    hover:bg-emerald-700
                                    text-white
                                    px-4 py-2
                                    rounded-lg
                                    shadow
                                    transition">

                                    Upload Bukti

                                </a>

                                <?php } else { ?>

                                <span class="text-green-600 font-semibold">

                                    ✓ Selesai

                                </span>

                                <?php } ?>

                            </td>

                        </tr>

                        <?php } ?>

                    </tbody>

                </table>

            </div>

        </div>

    </div>

</body>

</html>