<?php

session_start();

if(!isset($_SESSION['role'])){
    header("Location: ../index.php");
    exit;
}

if($_SESSION['role'] != 'admin'){
    header("Location: ../index.php");
    exit;
}

?>

<!DOCTYPE html>
<html>
<?php

session_start();

if(!isset($_SESSION['role'])){
    header("Location: ../index.php");
    exit;
}

if($_SESSION['role'] != 'admin'){
    header("Location: ../index.php");
    exit;
}

?>

<!DOCTYPE html>

<html>

<head>


    <title>Tambah Rumah Ibadah</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" />

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

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


</head>

<body>


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

    <div class="content">

        <div class="mb-6">

            <h1 class="text-3xl font-bold text-gray-800">
                Tambah Rumah Ibadah
            </h1>

            <p class="text-gray-500 mt-2">
                Tambahkan data rumah ibadah yang akan menjadi mitra penyaluran bantuan sosial.
            </p>

        </div>

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

            <div class="p-5 border-b bg-gray-50">

                <h2 class="font-semibold text-lg flex items-center gap-2">

                    <i class="fas fa-place-of-worship text-blue-600"></i>

                    Form Rumah Ibadah

                </h2>

            </div>

            <form action="simpan_rumah_ibadah.php" method="POST" class="p-6 space-y-5">

                <div>

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

                    <div class="relative">

                        <i class="fas fa-building absolute left-4 top-4 text-gray-400"></i>

                        <input type="text" name="nama" required placeholder="Masukkan nama rumah ibadah"
                            class="w-full border rounded-xl pl-11 pr-4 py-3 focus:ring-2 focus:ring-blue-500 focus:outline-none">

                    </div>

                </div>

                <div>

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

                    <textarea id="alamat" name="alamat" required rows="4"
                        placeholder="Alamat akan terisi otomatis saat memilih lokasi"
                        class="w-full border rounded-xl p-3 focus:ring-2 focus:ring-blue-500 focus:outline-none"></textarea>

                </div>

                <div>

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

                    <input type="text" id="searchLocation" placeholder="Contoh: Masjid Raya Mujahidin Pontianak"
                        class="w-full border rounded-xl p-3">

                </div>

                <div>

                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        Pilih Lokasi di Peta
                    </label>

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

                </div>

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

                    <div>

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

                        <input type="text" id="latitude" name="latitude" readonly required
                            class="w-full border rounded-xl p-3 bg-gray-100">

                    </div>

                    <div>

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

                        <input type="text" id="longitude" name="longitude" readonly required
                            class="w-full border rounded-xl p-3 bg-gray-100">

                    </div>

                </div>

                <div class="flex flex-wrap gap-3 pt-4">

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

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

                        Simpan Data

                    </button>

                    <a href="rumah_ibadah.php"
                        class="px-6 py-3 bg-gray-500 hover:bg-gray-600 text-white rounded-xl shadow transition">

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

                        Kembali

                    </a>

                </div>

            </form>

        </div>

    </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', {
            attribution: '&copy; OpenStreetMap'
        }
    ).addTo(map);

    var marker = L.marker(
        [-0.0263, 109.3425], {
            draggable: true
        }
    ).addTo(map);

    function updateLatLng(lat, lng) {

        document.getElementById('latitude').value =
            lat.toFixed(6);

        document.getElementById('longitude').value =
            lng.toFixed(6);
    }

    updateLatLng(
        marker.getLatLng().lat,
        marker.getLatLng().lng
    );

    function updateAddress(lat, lng) {

        fetch(
                'https://nominatim.openstreetmap.org/reverse?format=json&lat=' +
                lat +
                '&lon=' +
                lng
            )
            .then(response => response.json())
            .then(data => {

                if (data.display_name) {

                    document.getElementById('alamat').value =
                        data.display_name;
                }

            });
    }

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

        marker.setLatLng(e.latlng);

        updateLatLng(
            e.latlng.lat,
            e.latlng.lng
        );

        updateAddress(
            e.latlng.lat,
            e.latlng.lng
        );

    });

    marker.on('dragend', function() {

        var pos = marker.getLatLng();

        updateLatLng(
            pos.lat,
            pos.lng
        );

        updateAddress(
            pos.lat,
            pos.lng
        );

    });

    document
        .getElementById('searchLocation')
        .addEventListener('keypress', async function(e) {

            if (e.key !== 'Enter') {
                return;
            }

            e.preventDefault();

            let keyword = this.value;

            let response = await fetch(
                'https://nominatim.openstreetmap.org/search?format=json&q=' +
                encodeURIComponent(keyword)
            );

            let data = await response.json();

            if (data.length > 0) {

                let lat = parseFloat(data[0].lat);
                let lng = parseFloat(data[0].lon);

                map.setView(
                    [lat, lng],
                    15
                );

                marker.setLatLng(
                    [lat, lng]
                );

                updateLatLng(
                    lat,
                    lng
                );

                updateAddress(
                    lat,
                    lng
                );

            } else {

                alert('Lokasi tidak ditemukan');

            }

        });

    setTimeout(function() {

        map.invalidateSize();

    }, 500);
    </script>


</body>

</html>

</html>