<?php

session_start();

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

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

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

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

?>

<!DOCTYPE html>
<html>

<head>

    <title>Buat Laporan</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

</head>

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


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

        <a href="dashboard.php"
            class="inline-flex items-center gap-2 bg-slate-800 hover:bg-slate-900 text-white px-4 py-3 rounded-xl shadow">

            ← Kembali ke Dashboard

        </a>

        <div class="bg-white rounded-3xl shadow-lg p-8 mt-6">

            <div class="mb-8">

                <h1 class="text-3xl font-bold text-slate-800">
                    Buat Laporan Warga
                </h1>

                <p class="text-slate-500 mt-2">
                    Isi data warga yang membutuhkan bantuan sosial dan pilih lokasi pada peta.
                </p>

            </div>

            <form action="simpan_laporan.php" method="POST" enctype="multipart/form-data" class="space-y-5">

                <div>

                    <label class="block mb-2 font-medium text-slate-700">
                        Nama Warga
                    </label>

                    <input type="text" name="nama_warga" required
                        class="w-full border rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:outline-none">

                </div>

                <div>

                    <label class="block mb-2 font-medium text-slate-700">
                        Alamat
                    </label>

                    <textarea name="alamat" rows="3" required
                        class="w-full border rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:outline-none"></textarea>

                </div>

                <div>

                    <label class="block mb-2 font-medium text-slate-700">
                        Kondisi Warga
                    </label>

                    <textarea name="kondisi" rows="4" required
                        class="w-full border rounded-xl px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:outline-none"></textarea>

                </div>

                <div>

                    <label class="block mb-2 font-medium text-slate-700">
                        Foto Kondisi Warga
                    </label>

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

                </div>

                <div class="grid md:grid-cols-2 gap-4">

                    <div>

                        <label class="block mb-2 font-medium text-slate-700">
                            Latitude
                        </label>

                        <input type="text" name="latitude" id="latitude" readonly required
                            class="w-full border rounded-xl px-4 py-3 bg-slate-100">

                    </div>

                    <div>

                        <label class="block mb-2 font-medium text-slate-700">
                            Longitude
                        </label>

                        <input type="text" name="longitude" id="longitude" readonly required
                            class="w-full border rounded-xl px-4 py-3 bg-slate-100">

                    </div>

                </div>

                <div>

                    <label class="block mb-3 font-medium text-slate-700">
                        Pilih Lokasi Pada Peta
                    </label>

                    <p class="text-sm text-slate-500 mb-3">
                        Klik pada peta untuk menentukan lokasi warga.
                    </p>

                    <div id="map" style="height:450px;" class="rounded-2xl border">
                    </div>

                    <script src="https://unpkg.com/leaflet/dist/leaflet.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', {
                            maxZoom: 19
                        }
                    ).addTo(map);

                    var marker;

                    map.on('click', function(e) {

                        var lat = e.latlng.lat.toFixed(6);
                        var lng = e.latlng.lng.toFixed(6);

                        document.getElementById('latitude').value = lat;
                        document.getElementById('longitude').value = lng;

                        if (marker) {
                            map.removeLayer(marker);
                        }

                        marker = L.marker([lat, lng])
                            .addTo(map)
                            .bindPopup(
                                "Lat: " + lat +
                                "<br>Lng: " + lng
                            )
                            .openPopup();

                    });

                    setTimeout(function() {
                        map.invalidateSize();
                    }, 200);
                    </script>

                </div>

                <button type="submit"
                    class="w-full md:w-auto bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-xl font-semibold shadow">

                    Kirim Laporan

                </button>

            </form>

        </div>

    </div>


</body>

</html>