<!DOCTYPE html>
<html>

<head>

    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">

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

    <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.css" />

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

    <style>
    #map {
        height: 100vh;
    }
    </style>
</head>

<body>
    <div class="flex h-screen">

        <div class="flex-1 relative">

            <div style="
                position:absolute;
                top:15px;
                left:60px;
                z-index:9999;
                background:white;
                padding:10px;
                border-radius:8px;
                box-shadow:0 2px 8px rgba(0,0,0,.2);
                ">

                <div style="margin-bottom:10px;">

                    <h1 style="
                        font-size:24px;
                        font-weight:bold;
                        color:#2563eb;
                        margin:0;
                    ">
                        Dashboard WebGIS SPBU
                    </h1>

                    <p style="
                        margin:0;
                        color:#666;
                        font-size:14px;
                    ">
                        Sistem Informasi Geografis Pemetaan dan Pencarian Lokasi SPBU
                    </p>

                    <p style="
                        margin:3px 0 0 0;
                        color:#999;
                        font-size:12px;
                    ">
                        Clara Oxana Azalia | D1041231051
                    </p>

                </div>

                <!-- toolbar -->
                <div class="flex gap-2">

                    <input type="text" id="search_spbu" placeholder="Cari SPBU..." class="border p-2 rounded">

                    <button onclick="cariSPBU()" class="bg-blue-500 text-white px-3 rounded">
                        Cari
                    </button>

                    <button onclick="lokasiSaya()" class="bg-green-500 text-white px-3 rounded">
                        Lokasi Saya
                    </button>

                    <button onclick="cariTerdekat()" class="bg-red-500 text-white px-3 rounded">
                        SPBU Terdekat
                    </button>

                    <button onclick="buatRuteTerdekat()" class="bg-purple-500 text-white px-3 rounded">

                        Rute

                    </button>

                    <select id="filter_spbu" onchange="filterSPBU()" class="border p-2 rounded">

                        <option value="all">
                            Semua SPBU
                        </option>

                        <option value="24">
                            SPBU 24 Jam
                        </option>

                        <option value="non24">
                            Non 24 Jam
                        </option>

                        <option value="buka">
                            Sedang Buka
                        </option>

                        <option value="tutup">
                            Sedang Tutup
                        </option>

                    </select>

                    <button onclick="toggleMode()" id="btnMode" class="bg-blue-600 text-white px-3 rounded">

                        Ganti Mode

                    </button>
                    <span id="statusMode" class="bg-blue-100 text-blue-700 px-3 py-2 rounded font-semibold">

                        🔓 ADMIN

                    </span>

                </div>

            </div>

            <div style="
                position:absolute;
                bottom:20px;
                left:20px;
                z-index:9999;
                background:white;
                padding:12px;
                border-radius:8px;
                box-shadow:0 2px 8px rgba(0,0,0,.2);
                ">

                <h3 class="font-bold mb-2">
                    Keterangan
                </h3>

                <div class="flex items-center gap-2 mb-1">

                    <span class="w-4 h-4 bg-green-500 rounded-full"></span>

                    SPBU 24 Jam

                </div>

                <div class="flex items-center gap-2">

                    <span class="w-4 h-4 bg-red-500 rounded-full"></span>

                    SPBU Non 24 Jam

                </div>

            </div>

            <div id="bannerMode" class="hidden" style="
                position:absolute;
                top:120px;
                left:50%;
                transform:translateX(-50%);
                z-index:99999;
                ">

            </div>

            <div id="map" class="h-full"></div>

        </div>

        <!-- edit -->
        <div id="sidebar" class="w-96 bg-white shadow-lg p-5 hidden overflow-y-auto">

            <h2 class="text-xl font-bold mb-4">
                Edit SPBU
            </h2>

            <input type="hidden" id="edit_id">

            <label class="block mb-1">
                Nama SPBU
            </label>

            <input id="edit_nama" class="w-full border p-2 rounded mb-3">

            <label class="block mb-1">
                Alamat
            </label>

            <textarea id="edit_alamat" class="w-full border p-2 rounded mb-3"></textarea>

            <label class="block mb-1">
                Foto SPBU
            </label>

            <img id="preview_edit_foto" src="" class="w-full h-40 object-cover rounded mb-2 hidden">

            <input type="file" id="edit_foto" class="w-full border p-2 rounded mb-3">

            <label class="block mb-1">
                Jam Buka
            </label>

            <input type="time" id="edit_jam_buka" class="w-full border p-2 rounded mb-3">

            <label class="block mb-1">
                Jam Tutup
            </label>

            <input type="time" id="edit_jam_tutup" class="w-full border p-2 rounded mb-3">

            <label class="flex items-center gap-2 mb-3">

                <input type="checkbox" id="edit_24jam">

                Buka 24 Jam

            </label>

            <label class="block mb-1">
                Latitude
            </label>

            <input id="edit_lat" class="w-full border p-2 rounded mb-3">

            <label class="block mb-1">
                Longitude
            </label>

            <input id="edit_lng" class="w-full border p-2 rounded mb-3">

            <div class="flex gap-2">

                <button onclick="updateSPBU()" class="bg-blue-500 text-white px-4 py-2 rounded">

                    Simpan
                </button>

                <button onclick="tutupSidebar()" class="bg-gray-500 text-white px-4 py-2 rounded">

                    Tutup
                </button>

            </div>

        </div>
        <div id="sidebarObjek" class="w-96 bg-white shadow-lg p-5 hidden overflow-y-auto">

            <h2 class="text-xl font-bold mb-4">
                Edit Objek Peta
            </h2>

            <input type="hidden" id="objek_id">

            <label class="block mb-1">
                Nama Objek
            </label>

            <input id="objek_nama" class="w-full border p-2 rounded mb-3">

            <label class="block mb-1">
                Deskripsi
            </label>

            <textarea id="objek_deskripsi" class="w-full border p-2 rounded mb-3"></textarea>

            <label class="block mb-1">
                Tipe
            </label>

            <input id="objek_tipe" readonly class="w-full border p-2 rounded mb-3 bg-gray-100">

            <div class="flex gap-2">

                <button onclick="updateObjek()" class="bg-blue-500 text-white px-4 py-2 rounded">

                    Simpan

                </button>

                <button onclick="tutupSidebarObjek()" class="bg-gray-500 text-white px-4 py-2 rounded">

                    Tutup

                </button>

            </div>

        </div>
    </div>


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

    <script src="https://unpkg.com/leaflet-routing-machine@latest/dist/leaflet-routing-machine.js"></script>

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

    <script src="assets/js/map.js"></script>
</body>

</html>