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

if(!$cs){
    die("Data CS tidak ditemukan");
}

$cs_id = $cs['id'];

$id = intval($_GET['id']);

$data = mysqli_fetch_assoc(

mysqli_query($conn,

"SELECT bantuan.*,

laporan.nama_warga,
laporan.alamat

FROM bantuan

JOIN laporan
ON bantuan.laporan_id = laporan.id

WHERE bantuan.id='$id'
AND bantuan.cs_id='$cs_id'")
);

if(!$data){
    die("Tugas tidak ditemukan");
}

?>

<!DOCTYPE html>
<!DOCTYPE html>

<html>

<head>


    <title>Upload Bukti Bantuan</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">


</head>

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


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

        <a href="tugas.php"
            class="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white rounded-xl mb-6 transition">

            <i class="fas fa-arrow-left"></i>

            Kembali

        </a>

        <div class="bg-white rounded-2xl shadow-lg overflow-hidden">

            <div class="bg-green-600 text-white p-6">

                <h1 class="text-2xl font-bold flex items-center gap-3">

                    <i class="fas fa-camera"></i>

                    Upload Bukti Bantuan

                </h1>

                <p class="mt-2 text-green-100">
                    Upload dokumentasi penyaluran bantuan kepada warga.
                </p>

            </div>

            <div class="p-6">

                <div class="grid md:grid-cols-2 gap-5 mb-6">

                    <div class="bg-gray-50 rounded-xl p-4">

                        <p class="text-gray-500 text-sm">
                            Nama Warga
                        </p>

                        <h3 class="font-semibold text-lg mt-1">
                            <?= htmlspecialchars($data['nama_warga']) ?>
                        </h3>

                    </div>

                    <div class="bg-gray-50 rounded-xl p-4">

                        <p class="text-gray-500 text-sm">
                            Alamat
                        </p>

                        <h3 class="font-medium mt-1">
                            <?= htmlspecialchars($data['alamat']) ?>
                        </h3>

                    </div>

                </div>

                <form action="proses_upload.php" method="POST" enctype="multipart/form-data">

                    <input type="hidden" name="id" value="<?= $data['id'] ?>">

                    <div class="mb-5">

                        <label class="block text-sm font-medium text-gray-700 mb-2">

                            Foto Bukti Bantuan

                        </label>

                        <input type="file" id="foto" name="foto" accept="image/*" required
                            class="w-full border rounded-xl p-3">

                    </div>

                    <div class="mb-6">

                        <img id="preview" class="hidden w-full max-w-md h-64 object-cover rounded-xl border shadow">

                    </div>

                    <button type="submit"
                        class="px-6 py-3 bg-green-600 hover:bg-green-700 text-white rounded-xl shadow transition">

                        <i class="fas fa-upload mr-2"></i>

                        Upload Bukti

                    </button>

                </form>

            </div>

        </div>

    </div>

    <script>
    document
        .getElementById('foto')
        .addEventListener('change', function(e) {

            const file = e.target.files[0];

            if (!file) return;

            const reader = new FileReader();

            reader.onload = function(ev) {

                const preview =
                    document.getElementById('preview');

                preview.src = ev.target.result;

                preview.classList.remove('hidden');
            };

            reader.readAsDataURL(file);

        });
    </script>


</body>

</html>