{"id":2313,"date":"2026-04-09T05:23:30","date_gmt":"2026-04-09T05:23:30","guid":{"rendered":"https:\/\/marineconservation.id\/?page_id=2313"},"modified":"2026-04-09T05:55:43","modified_gmt":"2026-04-09T05:55:43","slug":"find-your-whale-shark","status":"publish","type":"page","link":"https:\/\/marineconservation.id\/id\/find-your-whale-shark\/","title":{"rendered":"Find Your Whale Shark"},"content":{"rendered":"<style>.elementor-2313 .elementor-element.elementor-element-e45398b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}<\/style>\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2313\" class=\"elementor elementor-2313\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e45398b e-flex e-con-boxed e-con e-parent\" data-id=\"e45398b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3dea0fb elementor-widget elementor-widget-html\" data-id=\"3dea0fb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"id\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes\">\r\n    <title>e-Elasmobranch Indonesia - Whale Shark<\/title>\r\n    <!-- Leaflet -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.css\" \/>\r\n    <script src=\"https:\/\/unpkg.com\/leaflet@1.9.4\/dist\/leaflet.js\"><\/script>\r\n    <!-- Leaflet MarkerCluster -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet.markercluster@1.4.1\/dist\/MarkerCluster.css\" \/>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/unpkg.com\/leaflet.markercluster@1.4.1\/dist\/MarkerCluster.Default.css\" \/>\r\n    <script src=\"https:\/\/unpkg.com\/leaflet.markercluster@1.4.1\/dist\/leaflet.markercluster.js\"><\/script>\r\n    <!-- Cropper.js -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.css\" \/>\r\n    <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/cropperjs\/1.5.13\/cropper.min.js\"><\/script>\r\n    <style>\r\n        * { box-sizing: border-box; }\r\n        body {\r\n            font-family: 'Segoe UI', Roboto, sans-serif;\r\n            background: #eef2f5;\r\n            margin: 0;\r\n            padding: 20px;\r\n        }\r\n        .container {\r\n            max-width: 1400px;\r\n            margin: 0 auto;\r\n            background: white;\r\n            border-radius: 28px;\r\n            box-shadow: 0 10px 30px rgba(0,0,0,0.1);\r\n            overflow: hidden;\r\n            padding: 20px 25px 30px;\r\n            position: relative;\r\n        }\r\n        .lang-switch {\r\n            position: absolute;\r\n            top: 20px;\r\n            right: 25px;\r\n            display: flex;\r\n            gap: 8px;\r\n            background: #e2e8f0;\r\n            padding: 5px 10px;\r\n            border-radius: 40px;\r\n            z-index: 10;\r\n        }\r\n        .lang-btn {\r\n            background: transparent;\r\n            border: none;\r\n            padding: 5px 12px;\r\n            border-radius: 30px;\r\n            cursor: pointer;\r\n            font-weight: bold;\r\n            color: #334155;\r\n        }\r\n        .lang-btn.active {\r\n            background: #0284c7;\r\n            color: white;\r\n        }\r\n        h1 {\r\n            color: #0c4a6e;\r\n            margin-top: 0;\r\n            border-bottom: 2px solid #e2e8f0;\r\n            padding-bottom: 12px;\r\n            font-size: 1.8rem;\r\n        }\r\n        .two-columns {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 25px;\r\n            margin-top: 20px;\r\n        }\r\n        .map-col {\r\n            flex: 1.5;\r\n            min-width: 300px;\r\n        }\r\n        .form-col {\r\n            flex: 1;\r\n            min-width: 320px;\r\n        }\r\n        .step-area {\r\n            background: #f8fafc;\r\n            border-radius: 20px;\r\n            padding: 20px;\r\n            margin-bottom: 20px;\r\n        }\r\n        .upload-card {\r\n            text-align: center;\r\n            border: 2px dashed #3b82f6;\r\n            background: #eff6ff;\r\n            border-radius: 20px;\r\n            padding: 25px 15px;\r\n            cursor: pointer;\r\n            transition: 0.2s;\r\n        }\r\n        .upload-card:hover { background: #dbeafe; border-color: #2563eb; }\r\n        .upload-icon { font-size: 48px; display: block; margin-bottom: 8px; }\r\n        .photo-preview { margin-top: 15px; display: flex; justify-content: center; }\r\n        .photo-preview img { max-width: 100%; max-height: 200px; border-radius: 12px; border: 2px solid #0284c7; }\r\n        .form-group { margin-bottom: 18px; }\r\n        label { font-weight: 600; display: block; margin-bottom: 6px; color: #0f172a; }\r\n        input, select, textarea {\r\n            width: 100%;\r\n            padding: 10px 14px;\r\n            border: 1px solid #cbd5e1;\r\n            border-radius: 14px;\r\n            font-size: 0.95rem;\r\n        }\r\n        input:disabled { background: #e2e8f0; color: #475569; }\r\n        button {\r\n            background: #0284c7;\r\n            color: white;\r\n            border: none;\r\n            padding: 12px 20px;\r\n            border-radius: 40px;\r\n            font-weight: bold;\r\n            cursor: pointer;\r\n            font-size: 1rem;\r\n            transition: 0.2s;\r\n        }\r\n        button:hover { background: #0369a1; }\r\n        button:disabled { background: #94a3b8; cursor: not-allowed; }\r\n        #globalMap, #miniMap {\r\n            height: 400px;\r\n            border-radius: 16px;\r\n            border: 1px solid #cbd5e1;\r\n            background: #f1f5f9;\r\n        }\r\n        #miniMap { height: 250px; margin-top: 8px; }\r\n        .info-box { background: #f1f5f9; border-left: 5px solid #0284c7; padding: 12px; border-radius: 12px; margin: 10px 0; }\r\n        .recommend { background: #dcfce7; padding: 12px; border-radius: 16px; color: #166534; margin-bottom: 15px; }\r\n        .hidden { display: none; }\r\n        .loading-spinner {\r\n            display: inline-block;\r\n            width: 18px;\r\n            height: 18px;\r\n            border: 2px solid rgba(255,255,255,0.3);\r\n            border-radius: 50%;\r\n            border-top-color: white;\r\n            animation: spin 0.6s linear infinite;\r\n            margin-right: 6px;\r\n        }\r\n        @keyframes spin { to { transform: rotate(360deg); } }\r\n        footer { font-size: 12px; text-align: center; margin-top: 30px; color: #475569; }\r\n        .flex-row { display: flex; gap: 10px; flex-wrap: wrap; }\r\n        .match-badge { background: #fef9c3; padding: 8px 12px; border-radius: 30px; font-size: 0.85rem; margin-bottom: 15px; }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"container\">\r\n    <div class=\"lang-switch\">\r\n        <button id=\"langIdBtn\" class=\"lang-btn active\">\ud83c\uddee\ud83c\udde9 Indonesia<\/button>\r\n        <button id=\"langEnBtn\" class=\"lang-btn\">\ud83c\uddec\ud83c\udde7 English<\/button>\r\n    <\/div>\r\n    <h1 id=\"mainTitle\">\ud83e\udd88 e-Elasmobranch Indonesia <span style=\"font-size:0.9rem;\">Whale Shark Edition<\/span><\/h1>\r\n\r\n    <div class=\"two-columns\">\r\n        <!-- KOLOM KIRI: PETA HASIL (RESIGHTING) -->\r\n        <div class=\"map-col\">\r\n            <div class=\"step-area\" style=\"height:100%;\">\r\n                <h3 id=\"mapResultTitle\">\ud83d\uddfa\ufe0f Peta Hasil (Seluruh Data Hiu Paus)<\/h3>\r\n                <div id=\"globalMap\"><\/div>\r\n                <p id=\"mapCaption\" style=\"font-size:12px; margin-top:8px; color:#475569;\">Klik marker untuk melihat detail foto, tanggal, nama hiu, dan kontributor.<\/p>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- KOLOM KANAN: UPLOAD & FORM -->\r\n        <div class=\"form-col\">\r\n            <!-- STEP UPLOAD -->\r\n            <div id=\"stepUpload\" class=\"step-area\">\r\n                <div class=\"upload-card\" id=\"uploadTrigger\">\r\n                    <div class=\"upload-icon\">\ud83d\udcf8<\/div>\r\n                    <strong id=\"uploadText\">Upload foto sisi kiri Hiu Paus<\/strong><br>\r\n                    <span id=\"uploadSub\" style=\"font-size:12px;\">Pola totol di belakang insang (wajib)<\/span>\r\n                <\/div>\r\n                <input type=\"file\" id=\"leftPhotoFile\" accept=\"image\/*\" style=\"display:none;\">\r\n                <div id=\"photoPreviewArea\" class=\"photo-preview hidden\"><\/div>\r\n                <div id=\"uploadStatus\" style=\"margin-top:10px; text-align:center;\"><\/div>\r\n            <\/div>\r\n\r\n            <!-- STEP FORM (muncul setelah upload, untuk individu baru atau resighting) -->\r\n            <div id=\"formContainer\" class=\"step-area hidden\">\r\n                <h3 id=\"formTitle\">\ud83d\udcdd Data Penemuan Hiu Paus<\/h3>\r\n                <div id=\"matchInfo\" class=\"match-badge hidden\"><\/div>\r\n                <div class=\"recommend\" id=\"recBox\">\ud83d\udd0d <strong id=\"recLabel\">Rekomendasi Spesies:<\/strong> Rhincodon typus (Whale Shark)<\/div>\r\n                <form id=\"whaleSharkForm\" action=\"\">\r\n                    <div class=\"form-group\">\r\n                        <label id=\"locLabel\">\ud83d\udccd Pilih Lokasi (klik peta kecil) *<\/label>\r\n                        <div id=\"miniMap\"><\/div>\r\n                        <div class=\"flex-row\" style=\"margin-top:8px;\">\r\n                            <input type=\"text\" id=\"latitude\" name=\"latitude\" placeholder=\"Latitude\" readonly style=\"background:#f1f5f9;\">\r\n                            <input type=\"text\" id=\"longitude\" name=\"longitude\" placeholder=\"Longitude\" readonly style=\"background:#f1f5f9;\">\r\n                        <\/div>\r\n                        <div style=\"display:flex; gap:8px; margin-top:8px;\">\r\n                            <select id=\"provinceSelect\" style=\"flex:1;\"><option value=\"\">Provinsi<\/option><\/select>\r\n                            <select id=\"districtSelect\" style=\"flex:1;\"><option value=\"\">Kab\/Kota<\/option><\/select>\r\n                        <\/div>\r\n                        <input type=\"text\" name=\"location_name\" id=\"locationNameInput\" placeholder=\"Nama lokasi\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label id=\"dateLabel\">\ud83d\udcc5 Tanggal *<\/label>\r\n                        <input type=\"date\" name=\"survey_date\" id=\"surveyDate\" required>\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label id=\"contribLabel\">\ud83e\uddd1 Nama Kontributor *<\/label>\r\n                        <input type=\"text\" name=\"contributor\" id=\"contributorInput\" required>\r\n                    <\/div>\r\n                    <div id=\"newNameGroup\" class=\"form-group\">\r\n                        <label id=\"sharkNameLabel\">\ud83c\udd94 Nama Hiu Paus *<\/label>\r\n                        <input type=\"text\" id=\"newSharkName\" name=\"individual_name\" placeholder=\"Contoh: Bima, Cendrawasih-01\">\r\n                        <small id=\"nameHint\" style=\"color:#475569;\">Nama unik untuk individu baru (jika resighting, nama otomatis terisi)<\/small>\r\n                    <\/div>\r\n                    <input type=\"hidden\" id=\"individualIdHidden\" name=\"individual_id\">\r\n                    <input type=\"hidden\" id=\"leftPhotoBase64\" name=\"left_photo_base64\">\r\n                    <button type=\"submit\" id=\"submitNewBtn\" style=\"width:100%;\">\ud83d\udcbe Simpan Penemuan<\/button>\r\n                <input type=\"hidden\" name=\"trp-form-language\" value=\"id\"\/><\/form>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    <footer id=\"footerText\">\u26a1 Khusus Whale Shark | Foto sisi kiri (pola insang) | Peta hasil menampilkan semua data<\/footer>\r\n<\/div>\r\n\r\n<script>\r\n    \/\/ ======================== DATA WILAYAH LENGKAP ========================\r\n    const indonesiaRegions = {\r\n        \"Aceh\": [\"Aceh Barat\",\"Aceh Barat Daya\",\"Aceh Besar\",\"Aceh Jaya\",\"Aceh Selatan\",\"Aceh Singkil\",\"Aceh Tamiang\",\"Aceh Tengah\",\"Aceh Tenggara\",\"Aceh Timur\",\"Aceh Utara\",\"Bener Meriah\",\"Bireuen\",\"Gayo Lues\",\"Nagan Raya\",\"Pidie\",\"Pidie Jaya\",\"Simeulue\",\"Kota Banda Aceh\",\"Kota Langsa\",\"Kota Lhokseumawe\",\"Kota Sabah\",\"Kota Subulussalam\"],\r\n        \"Sumatera Utara\": [\"Asahan\",\"Batu Bara\",\"Dairi\",\"Deli Serdang\",\"Humbang Hasundutan\",\"Karo\",\"Labuhanbatu\",\"Labuhanbatu Selatan\",\"Labuhanbatu Utara\",\"Langkat\",\"Mandailing Natal\",\"Nias\",\"Nias Barat\",\"Nias Selatan\",\"Nias Utara\",\"Padang Lawas\",\"Padang Lawas Utara\",\"Pakpak Bharat\",\"Samosir\",\"Serdang Bedagai\",\"Simalungun\",\"Tapanuli Selatan\",\"Tapanuli Tengah\",\"Tapanuli Utara\",\"Toba Samosir\",\"Kota Binjai\",\"Kota Gunungsitoli\",\"Kota Medan\",\"Kota Padangsidimpuan\",\"Kota Pematangsiantar\",\"Kota Sibolga\",\"Kota Tanjungbalai\",\"Kota Tebing Tinggi\"],\r\n        \"Sumatera Barat\": [\"Agam\",\"Dharmasraya\",\"Kepulauan Mentawai\",\"Lima Puluh Kota\",\"Padang Pariaman\",\"Pasaman\",\"Pasaman Barat\",\"Pesisir Selatan\",\"Sijunjung\",\"Solok\",\"Solok Selatan\",\"Tanah Datar\",\"Kota Bukittinggi\",\"Kota Padang\",\"Kota Padang Panjang\",\"Kota Pariaman\",\"Kota Payakumbuh\",\"Kota Sawahlunto\",\"Kota Solok\"],\r\n        \"Riau\": [\"Bengkalis\",\"Indragiri Hilir\",\"Indragiri Hulu\",\"Kampar\",\"Kepulauan Meranti\",\"Kuantan Singingi\",\"Pelalawan\",\"Rokan Hilir\",\"Rokan Hulu\",\"Siak\",\"Kota Dumai\",\"Kota Pekanbaru\"],\r\n        \"Kepulauan Riau\": [\"Bintan\",\"Karimun\",\"Kepulauan Anambas\",\"Lingga\",\"Natuna\",\"Kota Batam\",\"Kota Tanjungpinang\"],\r\n        \"Jambi\": [\"Batanghari\",\"Bungo\",\"Kerinci\",\"Merangin\",\"Muaro Jambi\",\"Sarolangun\",\"Tanjung Jabung Barat\",\"Tanjung Jabung Timur\",\"Tebo\",\"Kota Jambi\",\"Kota Sungai Penuh\"],\r\n        \"Bengkulu\": [\"Bengkulu Selatan\",\"Bengkulu Tengah\",\"Bengkulu Utara\",\"Kaur\",\"Kepahiang\",\"Lebong\",\"Muko Muko\",\"Rejang Lebong\",\"Seluma\",\"Kota Bengkulu\"],\r\n        \"Sumatera Selatan\": [\"Banyuasin\",\"Empat Lawang\",\"Lahat\",\"Muara Enim\",\"Musi Banyuasin\",\"Musi Rawas\",\"Musi Rawas Utara\",\"Ogan Ilir\",\"Ogan Komering Ilir\",\"Ogan Komering Ulu\",\"Ogan Komering Ulu Selatan\",\"Ogan Komering Ulu Timur\",\"Penukal Abab Lematang Ilir\",\"Kota Lubuklinggau\",\"Kota Pagar Alam\",\"Kota Palembang\",\"Kota Prabumulih\"],\r\n        \"Bangka Belitung\": [\"Bangka\",\"Bangka Barat\",\"Bangka Selatan\",\"Bangka Tengah\",\"Belitung\",\"Belitung Timur\",\"Kota Pangkalpinang\"],\r\n        \"Lampung\": [\"Lampung Barat\",\"Lampung Selatan\",\"Lampung Tengah\",\"Lampung Timur\",\"Lampung Utara\",\"Mesuji\",\"Pesawaran\",\"Pesisir Barat\",\"Pringsewu\",\"Tanggamus\",\"Tulang Bawang\",\"Tulang Bawang Barat\",\"Way Kanan\",\"Kota Bandar Lampung\",\"Kota Metro\"],\r\n        \"Banten\": [\"Lebak\",\"Pandeglang\",\"Serang\",\"Tangerang\",\"Kota Cilegon\",\"Kota Serang\",\"Kota Tangerang\",\"Kota Tangerang Selatan\"],\r\n        \"DKI Jakarta\": [\"Kepulauan Seribu\",\"Kota Jakarta Barat\",\"Kota Jakarta Pusat\",\"Kota Jakarta Selatan\",\"Kota Jakarta Timur\",\"Kota Jakarta Utara\"],\r\n        \"Jawa Barat\": [\"Bandung\",\"Bandung Barat\",\"Bekasi\",\"Bogor\",\"Ciamis\",\"Cianjur\",\"Cirebon\",\"Garut\",\"Indramayu\",\"Karawang\",\"Kuningan\",\"Majalengka\",\"Pangandaran\",\"Purwakarta\",\"Subang\",\"Sukabumi\",\"Sumedang\",\"Tasikmalaya\",\"Kota Bandung\",\"Kota Banjar\",\"Kota Bekasi\",\"Kota Bogor\",\"Kota Cimahi\",\"Kota Cirebon\",\"Kota Depok\",\"Kota Sukabumi\",\"Kota Tasikmalaya\"],\r\n        \"Jawa Tengah\": [\"Banjarnegara\",\"Banyumas\",\"Batang\",\"Blora\",\"Boyolali\",\"Brebes\",\"Cilacap\",\"Demak\",\"Grobogan\",\"Jepara\",\"Karanganyar\",\"Kebumen\",\"Kendal\",\"Klaten\",\"Kudus\",\"Magelang\",\"Pati\",\"Pekalongan\",\"Pemalang\",\"Purbalingga\",\"Purworejo\",\"Rembang\",\"Semarang\",\"Sragen\",\"Sukoharjo\",\"Tegal\",\"Temanggung\",\"Wonogiri\",\"Wonosobo\",\"Kota Magelang\",\"Kota Pekalongan\",\"Kota Salatiga\",\"Kota Semarang\",\"Kota Surakarta\",\"Kota Tegal\"],\r\n        \"DI Yogyakarta\": [\"Bantul\",\"Gunungkidul\",\"Kulon Progo\",\"Sleman\",\"Kota Yogyakarta\"],\r\n        \"Jawa Timur\": [\"Bangkalan\",\"Banyuwangi\",\"Blitar\",\"Bojonegoro\",\"Bondowoso\",\"Gresik\",\"Jember\",\"Jombang\",\"Kediri\",\"Lamongan\",\"Lumajang\",\"Madiun\",\"Magetan\",\"Malang\",\"Mojokerto\",\"Nganjuk\",\"Ngawi\",\"Pacitan\",\"Pamekasan\",\"Pasuruan\",\"Ponorogo\",\"Probolinggo\",\"Sampang\",\"Sidoarjo\",\"Situbondo\",\"Sumenep\",\"Trenggalek\",\"Tuban\",\"Tulungagung\",\"Kota Batu\",\"Kota Blitar\",\"Kota Kediri\",\"Kota Madiun\",\"Kota Malang\",\"Kota Mojokerto\",\"Kota Pasuruan\",\"Kota Probolinggo\",\"Kota Surabaya\"],\r\n        \"Bali\": [\"Badung\",\"Bangli\",\"Buleleng\",\"Gianyar\",\"Jembrana\",\"Karangasem\",\"Klungkung\",\"Tabanan\",\"Kota Denpasar\"],\r\n        \"Nusa Tenggara Barat\": [\"Bima\",\"Dompu\",\"Lombok Barat\",\"Lombok Tengah\",\"Lombok Timur\",\"Lombok Utara\",\"Sumbawa\",\"Sumbawa Barat\",\"Kota Bima\",\"Kota Mataram\"],\r\n        \"Nusa Tenggara Timur\": [\"Alor\",\"Belu\",\"Ende\",\"Flores Timur\",\"Kupang\",\"Lembata\",\"Malaka\",\"Manggarai\",\"Manggarai Barat\",\"Manggarai Timur\",\"Nagekeo\",\"Ngada\",\"Rote Ndao\",\"Sabu Raijua\",\"Sikka\",\"Sumba Barat\",\"Sumba Barat Daya\",\"Sumba Tengah\",\"Sumba Timur\",\"Timor Tengah Selatan\",\"Timor Tengah Utara\",\"Kota Kupang\"],\r\n        \"Kalimantan Barat\": [\"Bengkayang\",\"Kapuas Hulu\",\"Kayong Utara\",\"Ketapang\",\"Kubu Raya\",\"Landak\",\"Melawi\",\"Mempawah\",\"Sambas\",\"Sanggau\",\"Sekadau\",\"Sintang\",\"Kota Pontianak\",\"Kota Singkawang\"],\r\n        \"Kalimantan Tengah\": [\"Barito Selatan\",\"Barito Timur\",\"Barito Utara\",\"Gunung Mas\",\"Kapuas\",\"Katingan\",\"Kotawaringin Barat\",\"Kotawaringin Timur\",\"Lamandau\",\"Murung Raya\",\"Pulang Pisau\",\"Sukamara\",\"Seruyan\",\"Kota Palangka Raya\"],\r\n        \"Kalimantan Selatan\": [\"Balangan\",\"Banjar\",\"Barito Kuala\",\"Hulu Sungai Selatan\",\"Hulu Sungai Tengah\",\"Hulu Sungai Utara\",\"Kotabaru\",\"Tabalong\",\"Tanah Bumbu\",\"Tanah Laut\",\"Tapin\",\"Kota Banjarbaru\",\"Kota Banjarmasin\"],\r\n        \"Kalimantan Timur\": [\"Berau\",\"Kutai Barat\",\"Kutai Kartanegara\",\"Kutai Timur\",\"Mahakam Ulu\",\"Paser\",\"Penajam Paser Utara\",\"Kota Balikpapan\",\"Kota Bontang\",\"Kota Samarinda\"],\r\n        \"Kalimantan Utara\": [\"Bulungan\",\"Malinau\",\"Nunukan\",\"Tana Tidung\",\"Kota Tarakan\"],\r\n        \"Sulawesi Utara\": [\"Bolaang Mongondow\",\"Bolaang Mongondow Selatan\",\"Bolaang Mongondow Timur\",\"Bolaang Mongondow Utara\",\"Kepulauan Sangihe\",\"Kepulauan Siau Tagulandang Biaro\",\"Kepulauan Talaud\",\"Minahasa\",\"Minahasa Selatan\",\"Minahasa Tenggara\",\"Minahasa Utara\",\"Kota Bitung\",\"Kota Kotamobagu\",\"Kota Manado\",\"Kota Tomohon\"],\r\n        \"Gorontalo\": [\"Boalemo\",\"Bone Bolango\",\"Gorontalo\",\"Gorontalo Utara\",\"Pohuwato\",\"Kota Gorontalo\"],\r\n        \"Sulawesi Tengah\": [\"Banggai\",\"Banggai Kepulauan\",\"Banggai Laut\",\"Buol\",\"Donggala\",\"Morowali\",\"Morowali Utara\",\"Parigi Moutong\",\"Poso\",\"Sigi\",\"Tojo Una-Una\",\"Toli-Toli\",\"Kota Palu\"],\r\n        \"Sulawesi Barat\": [\"Majene\",\"Mamasa\",\"Mamuju\",\"Mamuju Tengah\",\"Pasangkayu\",\"Polewali Mandar\"],\r\n        \"Sulawesi Selatan\": [\"Bantaeng\",\"Barru\",\"Bone\",\"Bulukumba\",\"Enrekang\",\"Gowa\",\"Jeneponto\",\"Kepulauan Selayar\",\"Luwu\",\"Luwu Timur\",\"Luwu Utara\",\"Maros\",\"Pangkajene dan Kepulauan\",\"Pinrang\",\"Sidenreng Rappang\",\"Sinjai\",\"Soppeng\",\"Takalar\",\"Tana Toraja\",\"Toraja Utara\",\"Wajo\",\"Kota Makassar\",\"Kota Palopo\",\"Kota Parepare\"],\r\n        \"Sulawesi Tenggara\": [\"Bombana\",\"Buton\",\"Buton Selatan\",\"Buton Tengah\",\"Buton Utara\",\"Kolaka\",\"Kolaka Timur\",\"Kolaka Utara\",\"Konawe\",\"Konawe Kepulauan\",\"Konawe Selatan\",\"Konawe Utara\",\"Muna\",\"Muna Barat\",\"Wakatobi\",\"Kota Bau-Bau\",\"Kota Kendari\"],\r\n        \"Maluku\": [\"Buru\",\"Buru Selatan\",\"Kepulauan Aru\",\"Maluku Barat Daya\",\"Maluku Tengah\",\"Maluku Tenggara\",\"Maluku Tenggara Barat\",\"Seram Bagian Barat\",\"Seram Bagian Timur\",\"Kota Ambon\",\"Kota Tual\"],\r\n        \"Maluku Utara\": [\"Halmahera Barat\",\"Halmahera Tengah\",\"Halmahera Timur\",\"Halmahera Selatan\",\"Halmahera Utara\",\"Kepulauan Sula\",\"Pulau Morotai\",\"Pulau Taliabu\",\"Kota Ternate\",\"Kota Tidore Kepulauan\"],\r\n        \"Papua\": [\"Asmat\",\"Biak Numfor\",\"Boven Digoel\",\"Deiyai\",\"Dogiyai\",\"Intan Jaya\",\"Jayapura\",\"Jayawijaya\",\"Keerom\",\"Kepulauan Yapen\",\"Lanny Jaya\",\"Mamberamo Raya\",\"Mamberamo Tengah\",\"Mappi\",\"Merauke\",\"Mimika\",\"Nabire\",\"Nduga\",\"Paniai\",\"Pegunungan Bintang\",\"Puncak\",\"Puncak Jaya\",\"Sarmi\",\"Supiori\",\"Tolikara\",\"Waropen\",\"Yahukimo\",\"Yalimo\",\"Kota Jayapura\"],\r\n        \"Papua Barat\": [\"Fakfak\",\"Kaimana\",\"Manokwari\",\"Manokwari Selatan\",\"Maybrat\",\"Pegunungan Arfak\",\"Raja Ampat\",\"Sorong\",\"Sorong Selatan\",\"Tambrauw\",\"Teluk Bintuni\",\"Teluk Wondama\",\"Kota Sorong\"],\r\n        \"Papua Selatan\": [\"Merauke\",\"Mappi\",\"Asmat\",\"Boven Digoel\"],\r\n        \"Papua Tengah\": [\"Nabire\",\"Puncak Jaya\",\"Paniai\",\"Mimika\",\"Puncak\",\"Dogiyai\",\"Intan Jaya\",\"Deiyai\"],\r\n        \"Papua Pegunungan\": [\"Jayawijaya\",\"Lanny Jaya\",\"Mamberamo Tengah\",\"Nduga\",\"Pegunungan Bintang\",\"Tolikara\",\"Yahukimo\",\"Yalimo\"],\r\n        \"Papua Barat Daya\": [\"Sorong\",\"Sorong Selatan\",\"Raja Ampat\",\"Tambrauw\",\"Maybrat\",\"Kota Sorong\"]\r\n    };\r\n\r\n    \/\/ ======================== TRANSLATIONS ========================\r\n    const translations = {\r\n        id: {\r\n            mapResultTitle: \"\ud83d\uddfa\ufe0f Peta Hasil (Seluruh Data Hiu Paus)\",\r\n            mapCaption: \"Klik marker untuk melihat detail foto, tanggal, nama hiu, dan kontributor.\",\r\n            uploadText: \"Upload foto sisi kiri Hiu Paus\",\r\n            uploadSub: \"Pola totol di belakang insang (wajib)\",\r\n            formTitle: \"\ud83d\udcdd Data Penemuan Hiu Paus\",\r\n            recLabel: \"Rekomendasi Spesies:\",\r\n            locLabel: \"\ud83d\udccd Pilih Lokasi (klik peta kecil) *\",\r\n            dateLabel: \"\ud83d\udcc5 Tanggal *\",\r\n            contribLabel: \"\ud83e\uddd1 Nama Kontributor *\",\r\n            sharkNameLabel: \"\ud83c\udd94 Nama Hiu Paus *\",\r\n            nameHintNew: \"Nama unik untuk individu baru\",\r\n            nameHintResight: \"Nama hiu otomatis dari database (tidak bisa diubah)\",\r\n            submitBtn: \"\ud83d\udcbe Simpan Penemuan\",\r\n            footer: \"\u26a1 Khusus Whale Shark | Foto sisi kiri (pola insang) | Peta hasil menampilkan semua data\",\r\n            processing: \"Mengolah foto & menganalisis...\",\r\n            matching: \"\ud83d\udd04 Mencocokkan dengan database...\",\r\n            matchDetected: \"\u2705 Hiu ini sudah terdaftar! Silakan isi data penemuan ulang (resighting).\",\r\n            newDetected: \"\u2705 Individu baru. Silakan lengkapi data.\",\r\n            errorAnalyze: \"\u26a0\ufe0f Gagal analisis. Coba lagi.\",\r\n            errorConnection: \"\u274c Koneksi error.\",\r\n            alertLocation: \"Klik peta untuk menentukan koordinat.\",\r\n            alertContributor: \"Nama kontributor wajib.\",\r\n            alertSharkName: \"Beri nama untuk hiu paus baru.\",\r\n            alertDate: \"Pilih tanggal.\",\r\n            saveSuccess: \"\u2705 Data penemuan berhasil disimpan!\",\r\n            saveFailed: \"\u274c Gagal simpan: \"\r\n        },\r\n        en: {\r\n            mapResultTitle: \"\ud83d\uddfa\ufe0f Result Map (All Whale Shark Data)\",\r\n            mapCaption: \"Click marker to see photo, date, shark name, and contributor.\",\r\n            uploadText: \"Upload Whale Shark left side photo\",\r\n            uploadSub: \"Spot pattern behind gills (required)\",\r\n            formTitle: \"\ud83d\udcdd Whale Shark Sighting Data\",\r\n            recLabel: \"Species Recommendation:\",\r\n            locLabel: \"\ud83d\udccd Select Location (click on mini map) *\",\r\n            dateLabel: \"\ud83d\udcc5 Date *\",\r\n            contribLabel: \"\ud83e\uddd1 Contributor Name *\",\r\n            sharkNameLabel: \"\ud83c\udd94 Whale Shark Name *\",\r\n            nameHintNew: \"Unique name for new individual\",\r\n            nameHintResight: \"Shark name from database (read-only)\",\r\n            submitBtn: \"\ud83d\udcbe Save Sighting\",\r\n            footer: \"\u26a1 Whale Shark only | Left side photo | Result map shows all data\",\r\n            processing: \"Processing photo & analyzing...\",\r\n            matching: \"\ud83d\udd04 Matching with database...\",\r\n            matchDetected: \"\u2705 This shark is already registered! Please fill in resighting data.\",\r\n            newDetected: \"\u2705 New individual detected. Please complete data.\",\r\n            errorAnalyze: \"\u26a0\ufe0f Analysis failed. Try again.\",\r\n            errorConnection: \"\u274c Connection error.\",\r\n            alertLocation: \"Click on map to set coordinates.\",\r\n            alertContributor: \"Contributor name required.\",\r\n            alertSharkName: \"Provide a name for new whale shark.\",\r\n            alertDate: \"Select date.\",\r\n            saveSuccess: \"\u2705 Sighting saved successfully!\",\r\n            saveFailed: \"\u274c Save failed: \"\r\n        }\r\n    };\r\n    let currentLang = 'id';\r\n    function t(key) { return translations[currentLang][key] || key; }\r\n    function updateUI() {\r\n        document.getElementById('mapResultTitle').innerHTML = t('mapResultTitle');\r\n        document.getElementById('mapCaption').innerHTML = t('mapCaption');\r\n        document.getElementById('uploadText').innerHTML = t('uploadText');\r\n        document.getElementById('uploadSub').innerHTML = t('uploadSub');\r\n        document.getElementById('formTitle').innerHTML = t('formTitle');\r\n        document.getElementById('recLabel').innerHTML = t('recLabel') + ' Rhincodon typus (Whale Shark)';\r\n        document.getElementById('locLabel').innerHTML = t('locLabel');\r\n        document.getElementById('dateLabel').innerHTML = t('dateLabel');\r\n        document.getElementById('contribLabel').innerHTML = t('contribLabel');\r\n        document.getElementById('sharkNameLabel').innerHTML = t('sharkNameLabel');\r\n        if(document.getElementById('newSharkName').disabled) {\r\n            document.getElementById('nameHint').innerHTML = t('nameHintResight');\r\n        } else {\r\n            document.getElementById('nameHint').innerHTML = t('nameHintNew');\r\n        }\r\n        document.getElementById('submitNewBtn').innerHTML = t('submitBtn');\r\n        document.getElementById('footerText').innerHTML = t('footer');\r\n        document.getElementById('locationNameInput').placeholder = currentLang==='id'?'Nama lokasi':'Location name';\r\n        document.getElementById('contributorInput').placeholder = currentLang==='id'?'Nama lengkap \/ institusi':'Full name \/ institution';\r\n        document.getElementById('newSharkName').placeholder = currentLang==='id'?'Contoh: Bima, Cendrawasih-01':'Example: Bima, Blue Bay';\r\n    }\r\n\r\n    \/\/ ======================== GLOBAL MAP (SEMUA DATA) ========================\r\n    let globalMap, globalMarkersCluster;\r\n    const themeFolder = 'astra';\r\n    const API_BASE = `\/wp-content\/themes\/${themeFolder}\/elasmobranch-api\/`;\r\n    const GET_URL = API_BASE + 'elasmobranch-get.php';\r\n    const ANALYZE_URL = API_BASE + 'elasmobranch-analyze.php';\r\n    const SAVE_URL = API_BASE + 'elasmobranch-save.php';\r\n\r\n    async function loadGlobalMap() {\r\n        globalMap = L.map('globalMap').setView([-2.5, 118], 5);\r\n        L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}', { attribution: 'Esri' }).addTo(globalMap);\r\n        globalMarkersCluster = L.markerClusterGroup();\r\n        try {\r\n            const resp = await fetch(GET_URL);\r\n            const data = await resp.json();\r\n            const whaleData = data.filter(d => d.species === 'Rhincodon typus' || d.species?.includes('whale') || d.species?.includes('Whale'));\r\n            whaleData.forEach(item => {\r\n                const lat = parseFloat(item.latitude);\r\n                const lng = parseFloat(item.longitude);\r\n                if (isNaN(lat) || isNaN(lng)) return;\r\n                const popupHtml = `\r\n                    <div style=\"min-width:200px;\">\r\n                        <img decoding=\"async\" src=\"${item.dorsal_photo_url || item.left_photo_url || ''}\" style=\"max-width:100%; max-height:120px; border-radius:8px;\"><br>\r\n                        <strong>${currentLang==='id'?'Spesies':'Species'}:<\/strong> ${item.species || 'Rhincodon typus'}<br>\r\n                        <strong>${currentLang==='id'?'Tanggal':'Date'}:<\/strong> ${item.survey_date || '-'}<br>\r\n                        <strong>${currentLang==='id'?'Nama Hiu':'Shark Name'}:<\/strong> ${item.individual_name || '-'}<br>\r\n                        <strong>${currentLang==='id'?'Kontributor':'Contributor'}:<\/strong> ${item.contributor || item.surveyor || '-'}\r\n                    <\/div>\r\n                `;\r\n                const marker = L.marker([lat, lng]).bindPopup(popupHtml);\r\n                globalMarkersCluster.addLayer(marker);\r\n            });\r\n            globalMap.addLayer(globalMarkersCluster);\r\n        } catch(e) { console.error(e); }\r\n    }\r\n\r\n    \/\/ ======================== UPLOAD & ANALISIS ========================\r\n    let uploadedBase64 = null;\r\n    let currentMatchData = null; \/\/ menyimpan data match { id, name }\r\n    const leftPhotoFile = document.getElementById('leftPhotoFile');\r\n    const uploadTrigger = document.getElementById('uploadTrigger');\r\n    const photoPreview = document.getElementById('photoPreviewArea');\r\n    const uploadStatus = document.getElementById('uploadStatus');\r\n    const stepUploadDiv = document.getElementById('stepUpload');\r\n    const formContainer = document.getElementById('formContainer');\r\n    const leftPhotoBase64Input = document.getElementById('leftPhotoBase64');\r\n    const individualIdHidden = document.getElementById('individualIdHidden');\r\n    const newSharkNameInput = document.getElementById('newSharkName');\r\n    const surveyDate = document.getElementById('surveyDate');\r\n    const provinceSelect = document.getElementById('provinceSelect');\r\n    const districtSelect = document.getElementById('districtSelect');\r\n    const submitBtn = document.getElementById('submitNewBtn');\r\n    const latitudeInput = document.getElementById('latitude');\r\n    const longitudeInput = document.getElementById('longitude');\r\n    const matchInfoDiv = document.getElementById('matchInfo');\r\n    let miniMap, miniMarker;\r\n\r\n    \/\/ Crop & compress\r\n    let cropper;\r\n    function showCropModal(file, callback) {\r\n        const modal = document.createElement('div');\r\n        modal.style.cssText = 'position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:10000; display:flex; justify-content:center; align-items:center;';\r\n        modal.innerHTML = `<div style=\"background:white; border-radius:20px; width:90%; max-width:700px; padding:20px;\"><h3 style=\"margin-top:0;\">\u2702\ufe0f Crop Foto<\/h3><div><img id=\"cropImg\" style=\"max-width:100%; max-height:60vh;\"><\/div><div style=\"margin-top:15px; display:flex; gap:10px; justify-content:flex-end;\"><button id=\"cancelCrop\">${currentLang==='id'?'Batal':'Cancel'}<\/button><button id=\"applyCrop\" style=\"background:#0284c7;\">${currentLang==='id'?'Terapkan':'Apply'}<\/button><\/div><\/div>`;\r\n        document.body.appendChild(modal);\r\n        const imgEl = document.getElementById('cropImg');\r\n        const reader = new FileReader();\r\n        reader.onload = e => { imgEl.src = e.target.result; if(cropper) cropper.destroy(); cropper = new Cropper(imgEl, { aspectRatio: NaN, viewMode: 1 }); };\r\n        reader.readAsDataURL(file);\r\n        document.getElementById('applyCrop').onclick = () => { if(cropper) cropper.getCroppedCanvas().toBlob(callback, 'image\/jpeg', 0.9); modal.remove(); };\r\n        document.getElementById('cancelCrop').onclick = () => modal.remove();\r\n    }\r\n    async function compressBlob(blob) {\r\n        return new Promise(resolve => {\r\n            const img = new Image();\r\n            img.onload = () => { const c=document.createElement('canvas'); c.width=img.width; c.height=img.height; c.getContext('2d').drawImage(img,0,0); c.toBlob(resolve,'image\/jpeg',0.85); };\r\n            img.src = URL.createObjectURL(blob);\r\n        });\r\n    }\r\n    async function processPhoto(file) {\r\n        if(!file) return;\r\n        uploadStatus.innerHTML = `<span class=\"loading-spinner\"><\/span> ${t('processing')}`;\r\n        showCropModal(file, async (croppedBlob) => {\r\n            const compressed = await compressBlob(croppedBlob);\r\n            const reader = new FileReader();\r\n            reader.onload = async (e) => {\r\n                uploadedBase64 = e.target.result;\r\n                leftPhotoBase64Input.value = uploadedBase64;\r\n                photoPreview.classList.remove('hidden');\r\n                photoPreview.innerHTML = `<img decoding=\"async\" src=\"${uploadedBase64}\" alt=\"Left side\">`;\r\n                await analyzePhoto(uploadedBase64);\r\n            };\r\n            reader.readAsDataURL(compressed);\r\n        });\r\n    }\r\n    async function analyzePhoto(base64) {\r\n        uploadStatus.innerHTML = t('matching');\r\n        const fd = new FormData();\r\n        fd.append('dorsal_photo_base64', base64);\r\n        fd.append('species', 'Rhincodon typus');\r\n        try {\r\n            const res = await fetch(ANALYZE_URL, { method: 'POST', body: fd });\r\n            const result = await res.json();\r\n            if(result.status === 'match' && result.matchData) {\r\n                \/\/ RESIGHTING: tampilkan form dengan individual_id terisi, nama hiu otomatis\r\n                currentMatchData = result.matchData;\r\n                uploadStatus.innerHTML = '';\r\n                stepUploadDiv.style.display = 'none';\r\n                formContainer.classList.remove('hidden');\r\n                \/\/ Isi hidden individual_id\r\n                individualIdHidden.value = currentMatchData.id;\r\n                \/\/ Isi nama hiu dan disable input\r\n                newSharkNameInput.value = currentMatchData.name || (currentLang==='id' ? 'Hiu Paus' : 'Whale Shark');\r\n                newSharkNameInput.disabled = true;\r\n                document.getElementById('nameHint').innerHTML = t('nameHintResight');\r\n                \/\/ Tampilkan info match\r\n                matchInfoDiv.classList.remove('hidden');\r\n                matchInfoDiv.innerHTML = `<strong>${t('matchDetected')}<\/strong> (ID: ${currentMatchData.id})`;\r\n                \/\/ Set tanggal default hari ini\r\n                surveyDate.value = new Date().toISOString().split('T')[0];\r\n                \/\/ Inisialisasi mini map untuk input lokasi baru\r\n                initMiniMapForm();\r\n                \/\/ Kosongkan field koordinat\r\n                latitudeInput.value = '';\r\n                longitudeInput.value = '';\r\n                if(miniMarker) miniMap.removeLayer(miniMarker);\r\n            } else if(result.status === 'new') {\r\n                uploadStatus.innerHTML = t('newDetected');\r\n                stepUploadDiv.style.display = 'none';\r\n                formContainer.classList.remove('hidden');\r\n                individualIdHidden.value = '';\r\n                newSharkNameInput.disabled = false;\r\n                newSharkNameInput.value = '';\r\n                document.getElementById('nameHint').innerHTML = t('nameHintNew');\r\n                matchInfoDiv.classList.add('hidden');\r\n                surveyDate.value = new Date().toISOString().split('T')[0];\r\n                initMiniMapForm();\r\n                if(result.feature_data?.temp_id) {\r\n                    let tmp = document.createElement('input'); tmp.type='hidden'; tmp.name='temp_id'; tmp.value=result.feature_data.temp_id;\r\n                    document.getElementById('whaleSharkForm').appendChild(tmp);\r\n                }\r\n            } else {\r\n                uploadStatus.innerHTML = t('errorAnalyze');\r\n            }\r\n        } catch(e) { uploadStatus.innerHTML = t('errorConnection'); }\r\n    }\r\n\r\n    \/\/ Mini map untuk input lokasi\r\n    function initMiniMapForm() {\r\n        if(miniMap) miniMap.remove();\r\n        miniMap = L.map('miniMap').setView([-2.5, 118], 5);\r\n        L.tileLayer('https:\/\/server.arcgisonline.com\/ArcGIS\/rest\/services\/World_Imagery\/MapServer\/tile\/{z}\/{y}\/{x}', { attribution: 'Esri' }).addTo(miniMap);\r\n        miniMap.on('click', async (e) => {\r\n            const lat = e.latlng.lat.toFixed(6), lng = e.latlng.lng.toFixed(6);\r\n            latitudeInput.value = lat; longitudeInput.value = lng;\r\n            if(miniMarker) miniMap.removeLayer(miniMarker);\r\n            miniMarker = L.marker([lat, lng]).addTo(miniMap);\r\n            miniMap.setView([lat, lng], 10);\r\n            \/\/ reverse geocode sederhana\r\n            try {\r\n                const geo = await fetch(`https:\/\/api.bigdatacloud.net\/data\/reverse-geocode-client?latitude=${lat}&longitude=${lng}&localityLanguage=id`);\r\n                const geoData = await geo.json();\r\n                let prov = '';\r\n                geoData.localityInfo?.administrative?.forEach(a => { if(a.adminLevel===4) prov = a.name; });\r\n                if(prov) {\r\n                    const matchProv = Object.keys(indonesiaRegions).find(p => p.toLowerCase().includes(prov.toLowerCase()) || prov.toLowerCase().includes(p.toLowerCase()));\r\n                    if(matchProv) { provinceSelect.value = matchProv; provinceSelect.dispatchEvent(new Event('change')); setTimeout(() => {\r\n                        if(geoData.city) { Array.from(districtSelect.options).some(opt => { if(opt.text.toLowerCase() === geoData.city.toLowerCase()) { districtSelect.value = opt.value; return true; } }); }\r\n                    }, 300); }\r\n                }\r\n            } catch(e) {}\r\n        });\r\n    }\r\n\r\n    \/\/ Dropdown provinsi\/kota\r\n    function initRegionSelects() {\r\n        const provinces = Object.keys(indonesiaRegions).sort();\r\n        provinceSelect.innerHTML = '<option value=\"\">'+(currentLang==='id'?'Pilih Provinsi':'Select Province')+'<\/option>';\r\n        provinces.forEach(p => { const opt = document.createElement('option'); opt.value = p; opt.textContent = p; provinceSelect.appendChild(opt); });\r\n        provinceSelect.addEventListener('change', function() {\r\n            districtSelect.innerHTML = '<option value=\"\">'+(currentLang==='id'?'Pilih Kab\/Kota':'Select City')+'<\/option>';\r\n            if(this.value && indonesiaRegions[this.value]) {\r\n                indonesiaRegions[this.value].forEach(city => { const opt = document.createElement('option'); opt.value = city; opt.textContent = city; districtSelect.appendChild(opt); });\r\n            }\r\n        });\r\n    }\r\n\r\n    \/\/ Submit form (untuk individu baru maupun resighting)\r\n    async function submitNew(e) {\r\n        e.preventDefault();\r\n        if(!latitudeInput.value || !longitudeInput.value) { alert(t('alertLocation')); return; }\r\n        if(!document.querySelector('input[name=\"contributor\"]').value.trim()) { alert(t('alertContributor')); return; }\r\n        if(!newSharkNameInput.value.trim() && !individualIdHidden.value) { alert(t('alertSharkName')); return; }\r\n        if(!surveyDate.value) { alert(t('alertDate')); return; }\r\n        const fd = new FormData(document.getElementById('whaleSharkForm'));\r\n        fd.append('dorsal_photo_base64', leftPhotoBase64Input.value);\r\n        fd.append('left_photo_base64', leftPhotoBase64Input.value);\r\n        fd.append('species', 'Rhincodon typus');\r\n        fd.append('surveyor', document.querySelector('input[name=\"contributor\"]').value);\r\n        fd.append('province', provinceSelect.value);\r\n        fd.append('district', districtSelect.value);\r\n        \/\/ Jika resighting, pastikan individual_id terkirim\r\n        if(individualIdHidden.value) {\r\n            fd.append('individual_id', individualIdHidden.value);\r\n        }\r\n        submitBtn.disabled = true;\r\n        submitBtn.innerHTML = '<span class=\"loading-spinner\"><\/span> Saving...';\r\n        try {\r\n            const res = await fetch(SAVE_URL, { method: 'POST', body: fd });\r\n            const result = await res.json();\r\n            if(result.success) { alert(t('saveSuccess')); window.location.reload(); }\r\n            else { alert(t('saveFailed') + result.message); submitBtn.disabled=false; submitBtn.innerHTML=t('submitBtn'); }\r\n        } catch(err) { alert('Error'); submitBtn.disabled=false; submitBtn.innerHTML=t('submitBtn'); }\r\n    }\r\n\r\n    \/\/ Event listeners\r\n    uploadTrigger.addEventListener('click', () => leftPhotoFile.click());\r\n    leftPhotoFile.addEventListener('change', e => { if(e.target.files.length) processPhoto(e.target.files[0]); });\r\n    document.getElementById('whaleSharkForm').addEventListener('submit', submitNew);\r\n    document.getElementById('langIdBtn').addEventListener('click', () => { currentLang='id'; updateUI(); document.getElementById('langIdBtn').classList.add('active'); document.getElementById('langEnBtn').classList.remove('active'); location.reload(); });\r\n    document.getElementById('langEnBtn').addEventListener('click', () => { currentLang='en'; updateUI(); document.getElementById('langEnBtn').classList.add('active'); document.getElementById('langIdBtn').classList.remove('active'); location.reload(); });\r\n\r\n    \/\/ Inisialisasi\r\n    initRegionSelects();\r\n    loadGlobalMap();\r\n    updateUI();\r\n    surveyDate.value = new Date().toISOString().split('T')[0];\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>e-Elasmobranch Indonesia &#8211; Whale Shark \ud83c\uddee\ud83c\udde9 Indonesia \ud83c\uddec\ud83c\udde7 English \ud83e\udd88 e-Elasmobranch Indonesia Whale Shark Edition \ud83d\uddfa\ufe0f Peta Hasil (Seluruh Data [&hellip;]<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2313","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.3 (Yoast SEO v24.7) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Find Your Whale Shark - marineconservation.id<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marineconservation.id\/id\/find-your-whale-shark\/\" \/>\n<meta property=\"og:locale\" content=\"id_ID\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Find Your Whale Shark\" \/>\n<meta property=\"og:description\" content=\"e-Elasmobranch Indonesia &#8211; Whale Shark \ud83c\uddee\ud83c\udde9 Indonesia \ud83c\uddec\ud83c\udde7 English \ud83e\udd88 e-Elasmobranch Indonesia Whale Shark Edition \ud83d\uddfa\ufe0f Peta Hasil (Seluruh Data [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marineconservation.id\/id\/find-your-whale-shark\/\" \/>\n<meta property=\"og:site_name\" content=\"marineconservation.id\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61572311944591\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-09T05:55:43+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimasi waktu membaca\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 menit\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marineconservation.id\/find-your-whale-shark\/\",\"url\":\"https:\/\/marineconservation.id\/find-your-whale-shark\/\",\"name\":\"Find Your Whale Shark - marineconservation.id\",\"isPartOf\":{\"@id\":\"https:\/\/marineconservation.id\/#website\"},\"datePublished\":\"2026-04-09T05:23:30+00:00\",\"dateModified\":\"2026-04-09T05:55:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/marineconservation.id\/find-your-whale-shark\/#breadcrumb\"},\"inLanguage\":\"id\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marineconservation.id\/find-your-whale-shark\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/marineconservation.id\/find-your-whale-shark\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/marineconservation.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Find Your Whale Shark\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marineconservation.id\/#website\",\"url\":\"https:\/\/marineconservation.id\/\",\"name\":\"marineconservation.id\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/marineconservation.id\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/marineconservation.id\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"id\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/marineconservation.id\/#organization\",\"name\":\"marineconservation.id\",\"url\":\"https:\/\/marineconservation.id\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"id\",\"@id\":\"https:\/\/marineconservation.id\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/marineconservation.id\/wp-content\/uploads\/2025\/02\/Marine-Conservation-Indonesia.png\",\"contentUrl\":\"https:\/\/marineconservation.id\/wp-content\/uploads\/2025\/02\/Marine-Conservation-Indonesia.png\",\"width\":500,\"height\":500,\"caption\":\"marineconservation.id\"},\"image\":{\"@id\":\"https:\/\/marineconservation.id\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/profile.php?id=61572311944591\",\"https:\/\/www.instagram.com\/marineconservation.id\/\",\"https:\/\/www.youtube.com\/watch?v=nOmjtk-dTg8&list=LL\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Find Your Whale Shark - marineconservation.id","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/marineconservation.id\/id\/find-your-whale-shark\/","og_locale":"id_ID","og_type":"article","og_title":"Find Your Whale Shark","og_description":"e-Elasmobranch Indonesia &#8211; Whale Shark \ud83c\uddee\ud83c\udde9 Indonesia \ud83c\uddec\ud83c\udde7 English \ud83e\udd88 e-Elasmobranch Indonesia Whale Shark Edition \ud83d\uddfa\ufe0f Peta Hasil (Seluruh Data [&hellip;]","og_url":"https:\/\/marineconservation.id\/id\/find-your-whale-shark\/","og_site_name":"marineconservation.id","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61572311944591","article_modified_time":"2026-04-09T05:55:43+00:00","twitter_card":"summary_large_image","twitter_misc":{"Estimasi waktu membaca":"1 menit"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/marineconservation.id\/find-your-whale-shark\/","url":"https:\/\/marineconservation.id\/find-your-whale-shark\/","name":"Find Your Whale Shark - marineconservation.id","isPartOf":{"@id":"https:\/\/marineconservation.id\/#website"},"datePublished":"2026-04-09T05:23:30+00:00","dateModified":"2026-04-09T05:55:43+00:00","breadcrumb":{"@id":"https:\/\/marineconservation.id\/find-your-whale-shark\/#breadcrumb"},"inLanguage":"id","potentialAction":[{"@type":"ReadAction","target":["https:\/\/marineconservation.id\/find-your-whale-shark\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/marineconservation.id\/find-your-whale-shark\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/marineconservation.id\/"},{"@type":"ListItem","position":2,"name":"Find Your Whale Shark"}]},{"@type":"WebSite","@id":"https:\/\/marineconservation.id\/#website","url":"https:\/\/marineconservation.id\/","name":"marineconservation.id","description":"","publisher":{"@id":"https:\/\/marineconservation.id\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/marineconservation.id\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"id"},{"@type":"Organization","@id":"https:\/\/marineconservation.id\/#organization","name":"marineconservation.id","url":"https:\/\/marineconservation.id\/","logo":{"@type":"ImageObject","inLanguage":"id","@id":"https:\/\/marineconservation.id\/#\/schema\/logo\/image\/","url":"https:\/\/marineconservation.id\/wp-content\/uploads\/2025\/02\/Marine-Conservation-Indonesia.png","contentUrl":"https:\/\/marineconservation.id\/wp-content\/uploads\/2025\/02\/Marine-Conservation-Indonesia.png","width":500,"height":500,"caption":"marineconservation.id"},"image":{"@id":"https:\/\/marineconservation.id\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61572311944591","https:\/\/www.instagram.com\/marineconservation.id\/","https:\/\/www.youtube.com\/watch?v=nOmjtk-dTg8&list=LL"]}]}},"_links":{"self":[{"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/pages\/2313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/comments?post=2313"}],"version-history":[{"count":16,"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/pages\/2313\/revisions"}],"predecessor-version":[{"id":2334,"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/pages\/2313\/revisions\/2334"}],"wp:attachment":[{"href":"https:\/\/marineconservation.id\/id\/wp-json\/wp\/v2\/media?parent=2313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}