<template>
    <div class="w-full flex flex-col items-center">
        <div class="flex lg:flex-row flex-col w-[90%] mt-20">
            <div class="lg:w-[30%] flex flex-col">
                <span class="text-[24px] text-[#242424]">Agen Perjalanan Umraza</span>
                <p class="text-[14px] text-[#3D3D3D] mt-5">Jangan ragu untuk menghubungi kami! Untuk pertanyaan, saran, atau permintaan reservasi, silakan
                    gunakan saluran komunikasi kami di bawah ini.</p>
                <span class="text-[24px] text-[#242424] lg:mt-10 mt-5">Informasi Kontak</span>
                <span class="text-[24px] text-[#242424] lg:mt-10 mt-5">Alamat</span>
                <p class="text-[14px] text-[#3D3D3D] mt-5">8928 Mohammed Bin Wathah, Al Mathar Ash Shamali، RGUC4298، 4298, Riyadh 12326 Arab Saudi</p>
                <div class="mt-5"><strong><span>E-mail: </span></strong> <span>Travelumraza@gmail.com</span></div>
                <div><strong><span>Telepon: </span></strong> <span>+62 823 1070 3173</span></div>
            </div>

            <div class="lg:w-[70%] lg:mt-0 mt-10">
                <div id="map" style="width: 100%; height: 400px;"></div>
            </div>
        </div>

        <div class="w-[90%] mb-10">
                <div class="text-[14px] text-[#3D3D3D] mt-5">Agen Perjalanan Umraza</div>
                <div class="text-[24px] text-[#242424]"><strong>Pertanyaan yang Sering Diajukan</strong></div>
        </div>

        <div class="lg:w-[90%] mb-20">
            <el-collapse>
                <el-collapse-item v-for="(value, index) in titList" :key="index">
                    <template #title>
                        <div class="lg:h-10 flex items-center lg:p-0 p-2.5">
                        <span style="font-size:14px;font-weight: 600;color: #3D3D3D;">{{ value.tit }}</span>
                        </div>
                        <!-- <span v-else style="font-size:16px;font-weight: 300;color: #6c6c6c;">{{value.tit}}</span> -->
                    </template>
                    <div class="text-[14px] text-[#242424] ml-6">{{ value.con }}</div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>


<script setup>

import { onMounted } from 'vue';
import L from 'leaflet'; // 引入 Leaflet 库
import 'leaflet/dist/leaflet.css'; // 引入 Leaflet 样式
import 'leaflet-control-geocoder/dist/Control.Geocoder.css'; // 引入反向地理编码控件样式
import 'leaflet-control-geocoder'; // 引入反向地理编码库

const titList = [
    {
        tit: "Bagaimana saya dapat menghubungi Agen Perjalanan Umraza?",
        con: "Untuk menghubungi Travel Umraza, Anda dapat mengisi formulir di halaman kontak situs web kami. Travelumraza@gmail.com Anda dapat mengirim email ke atau menghubungi +62 823 1070 3173."
    },
    {
        tit: "Berapa jam kerja Anda?",
        con: "Jam operasional kami adalah setiap Senin sampai Sabtu pukul 09:00–21:00 dan Minggu pukul 15:00–21:00. Jika terjadi keadaan darurat, Anda dapat menghubungi kami melalui nomor telepon resmi kami."
    },
    {
        tit: "Bisakah saya mendapatkan informasi tentang wisata haji dan umrah Anda?",
        con: "Jika Anda ingin mengetahui lebih banyak informasi tentang perjalanan Haji dan Umrah, silakan hubungi kami melalui fitur 'Hubungi Layanan Pelanggan' dan chat 'WhatsApp' di pojok kiri bawah situs web kami. Tim layanan pelanggan kami akan segera menghubungi Anda."
    },
    {
        tit: "Bagaimana cara memesan tur?",
        con: "Untuk memesan tur, Anda dapat mengisi formulir reservasi di situs web kami atau menghubungi tim layanan pelanggan kami untuk menyelesaikan reservasi Anda. Cukup berikan dokumen yang diperlukan dan detail pembayaran kepada perwakilan pelanggan kami untuk menyelesaikan reservasi Anda."
    },
    {
        tit: "Apa ketentuan pembatalan reservasi dan pengembalian uang?",
        con: "Kebijakan pembatalan dan pengembalian dana reservasi dapat bervariasi, tergantung pada paket wisata. Untuk informasi lebih lanjut tentang pembatalan dan pengembalian dana, silakan hubungi tim layanan pelanggan kami atau tinjau perjanjian reservasi Anda."
    },
    {
        tit: "Apakah Anda membantu dengan prosedur visa?",
        con: "Ya, kami dapat membantu Anda dengan prosedur visa untuk perjalanan haji dan umrah kami. Anda dapat menghubungi tim layanan pelanggan kami untuk informasi lebih lanjut mengenai dokumen yang diperlukan dan proses pengajuan visa."
    },
    {
        tit: "Apa saja yang termasuk dalam paket wisata Anda?",
        con: "Paket wisata kami umumnya mencakup akomodasi, transportasi, layanan pemandu, prosedur visa, dan makanan. Anda dapat menemukan informasi detail tentang setiap paket wisata di situs web kami."
    },
]




onMounted(() => {
      // 创建地图并设置初始视图
      const map = L.map('map').setView([24.70126, 46.65354], 15); // King Khalid Grand Mosque 的坐标

      // 设置 OpenStreetMap 图层
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map);

      // 在 King Khalid Grand Mosque 上添加标记
      L.marker([24.70126, 46.65354]).addTo(map)
        .bindPopup('<b>King Khalid Grand Mosque</b>')
        .openPopup(); // 默认打开弹出框

      // 添加反向地理编码插件（点击地图显示地址）
      const geocoder = L.Control.Geocoder.nominatim(); // 使用 Nominatim 进行反向地理编码
      map.on('click', function(e) {
        const lat = e.latlng.lat;
        const lng = e.latlng.lng;

        // 使用 Geocoder 获取地址
        geocoder.reverse([lat, lng], map.options.crs.scale(map.getZoom()), function(results) {
          const popup = L.popup()
            .setLatLng([lat, lng])
            .setContent('你点击的位置: ' + results[0].name) // 显示详细地址
            .openOn(map);
        });
      });
    });
</script>

<style>
.el-collapse-item__header {
  line-height: 1.4 !important; /* 调整标题行距 */
  padding: 8px 12px !important; /* 缩小内边距 */
  min-height: auto !important; /* 取消固定高度 */
}

.el-collapse-item__content {
  line-height: 1.6 !important;
  padding: 8px 16px !important;
}
</style>