@extends('index')

@section('main')
    <div class="container mx-auto mt-36 mb-16">
        <div class="flex flex-col lg:flex-row gap-y-12 lg:gap-y-0 items-center justify-between mb-8">
            <h2 class="text-center lg:text-left text-4xl font-bold leading-tight text-slate-900 dark:text-white">
                <span class="absolute h-6 w-36 -z-10" style="background-color: khaki;"></span>
                Sikumbang - Kabupaten Kendal
            </h2>
        </div>

        <div
            class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-3 gap-6 p-6 dark:bg-slate-800 dark:shadow-none rounded-lg shadow-xl">
            <select id="kabu" class="dark:bg-[#2C3361] dark:text-white py-2 px-4 rounded-full flex items-center">
                <option>Pilih Kabupaten</option>
                <i class="fas fa-chevron-down ml-2"></i>
            </select>
            <select id="keca" class="dark:bg-[#2C3361] dark:text-white py-2 px-4 rounded-full flex items-center">
                <option>Pilih kabupaten terlebih dahulu</option>
                <i class="fas fa-chevron-down ml-2"></i>
            </select>
        </div>

        <div id="hitungData" class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 gap-3 p-6">

        </div>
        <div id="allData" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
        </div>

        <div id="modial">
        </div>

    </div>



    {{-- Pagination --}}
    <div id="pagination" class="flex flex-col sm:flex-row justify-center mt-8 mb-8">
        <!-- Tombol sebelumnya -->
        <a href="javascript:void(0);"
            class="flex items-center justify-center px-1 h-6 leading-tight text-slate-500 bg-white border border-slate-300 rounded-lg hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white mb-2 sm:mb-0 sm:mr-2"
            onclick="changePage(currentPage - 1)">
            <svg class="w-4 h-4 fill-slate-900 dark:fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                <path
                    d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z">
                </path>
            </svg>
        </a>

        <!-- Wrapper untuk angka pagination -->
        <div class="flex items-center justify-center mb-2 sm:mb-0">
            <span id="pagination-numbers" class="flex"></span>
        </div>

        <!-- Tombol selanjutnya -->
        <a href="javascript:void(0);"
            class="flex items-center justify-center px-1 h-6 leading-tight text-slate-500 bg-white border border-slate-300 rounded-lg hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white"
            onclick="changePage(currentPage + 1)">
            <svg class="w-4 h-4 fill-slate-900 dark:fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                <path
                    d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z">
                </path>
            </svg>
        </a>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="node_modules/preline/dist/preline.js"></script>
    <script>
        $(document).ready(function() {
            fetchKabupaten(); // Memanggil fungsi saat halaman dimuat

            $('#kabu').change(function() {
                const selectedKabupaten = $(this).val();
                if (selectedKabupaten) {
                    allData = []; // Reset data
                    currentPage = 1;
                    fetchDataKab(selectedKabupaten);
                    fetchKecamatan(
                        selectedKabupaten
                    ); // Memanggil fungsi untuk mengambil kecamatan berdasarkan kabupaten yang dipilih
                } else {
                    $('#keca').empty().append(
                        '<option>Pilih kecamatan terlebih dahulu</option>'); // Kosongkan dropdown kecamatan
                    fetchData(currentPage);
                }
            });

            $('#keca').change(function() {
                const selectedKecamatan = $(this).val();
                if (selectedKecamatan) {
                    fetchDataKec(
                        selectedKecamatan
                    ); // Memanggil fungsi untuk mengambil kecamatan berdasarkan kabupaten yang dipilih
                } else { // Kosongkan dropdown kecamatan
                    fetchData(currentPage);
                }
            });

            fetchData(currentPage);
        });

        function showLoadingMessage() {
            Swal.fire({
                title: 'Loading...',
                text: 'Tunggu sebentar, sedang mendapatkan data...',
                allowOutsideClick: false,
                didOpen: () => {
                    Swal.showLoading();
                }
            });
        }

        function hideLoadingMessage() {
            Swal.close(); // Menutup SweetAlert
        }

        function showErrorMessage(message) {
            Swal.fire({
                icon: 'error',
                title: 'Terjadi Kesalahan',
                text: message,
                confirmButtonText: 'OK'
            });
        }

        function showEmptyMessage(message) {
            Swal.fire({
                icon: 'error',
                title: 'Oopss!',
                text: message,
                confirmButtonText: 'Baik'
            });
        }

        function fetchKabupaten() {
            showLoadingMessage(); // Tampilkan pesan loading
            $.ajax({
                url: "https://sikumbang.tapera.go.id/ajax/wilayah/get-kabupaten/33", // Jawa Tengah
                method: 'GET',
                success: function(response) {
                    hideLoadingMessage(); // Sembunyikan pesan loading

                    // Cari data kabupaten Kendal (kode 3324)
                    const kabupatenKendal = response.find(item => item.kodeWilayah === "3324");

                    if (kabupatenKendal) {
                        // Kosongkan dropdown kabupaten
                        $('#kabu').empty();

                        // Tambahkan option Kendal langsung terpilih
                        $('#kabu').append(
                            '<option value="' + kabupatenKendal.kodeWilayah + '" selected>' +
                            kabupatenKendal.namaWilayah + '</option>'
                        );

                        // Disable supaya user tidak bisa mengubah
                        $('#kabu').prop('disabled', true);

                        // Otomatis fetch kecamatan Kendal
                        fetchKecamatan(kabupatenKendal.kodeWilayah);
                    } else {
                        showErrorMessage('Kabupaten Kendal (3324) tidak ditemukan dalam data.');
                    }
                },
                error: function(xhr, status, error) {
                    hideLoadingMessage();
                    showErrorMessage(
                        'Tidak dapat mengakses data kabupaten. Silakan periksa koneksi internet atau coba lagi nanti.'
                    );
                    console.error('Terjadi kesalahan:', error);
                }
            });
        }


        function fetchKecamatan(kodeKabupaten) {
            showLoadingMessage(); // Tampilkan pesan loading
            $.ajax({
                url: "https://sikumbang.tapera.go.id/ajax/wilayah/get-kecamatan/" + kodeKabupaten,
                method: 'GET',
                success: function(response) {
                    hideLoadingMessage(); // Sembunyikan pesan loading
                    $('#keca').empty(); // Kosongkan dropdown kecamatan terlebih dahulu
                    $('#keca').append('<option value="">Pilih Kecamatan</option>'); // Tambahkan opsi default

                    // Mengisi dropdown dengan data kecamatan
                    $.each(response, function(index, value) {
                        const kecamatanName = value.namaWilayah; // Mendapatkan nama kecamatan
                        const kodeWilayah = value.kodeWilayah; // Mendapatkan kode wilayah

                        // Menambahkan kecamatan ke dropdown
                        $('#keca').append('<option value="' + kodeWilayah + '">' + kecamatanName +
                            '</option>');
                    });
                },
                error: function(xhr, status, error) {
                    hideLoadingMessage(); // Sembunyikan pesan loading
                    showErrorMessage(
                        'Tidak dapat mengakses data kecamatan. Silakan periksa koneksi internet atau coba lagi nanti.'
                    ); // Tampilkan pesan kesalahan
                    console.error('Terjadi kesalahan saat mengambil kecamatan:', error);
                }
            });
        }
        let itemsPerPage = 18;
        let totalPages = 0;
        let currentPage = 1;
        let allData = [];

        function changePage(page) {
            if (page < 1 || page > totalPages) return;
            currentPage = page;
            renderCards();
        }



        function renderPagination() {
            // Menghitung total halaman
            totalPages = Math.ceil(allData.length / itemsPerPage);
            let paginationNumbers = $('#pagination-numbers');
            paginationNumbers.empty();

            // Menentukan batas maksimal jumlah halaman yang ditampilkan sekaligus (misalnya 10 halaman)
            let maxVisiblePages = 10;

            // Menentukan startPage dan endPage yang akan ditampilkan
            let startPage = Math.floor((currentPage - 1) / maxVisiblePages) * maxVisiblePages + 1;
            let endPage = Math.min(startPage + maxVisiblePages - 1, totalPages);

            // Membuat tombol untuk halaman pertama dan ellipsis di depan jika perlu
            if (startPage > 1) {
                paginationNumbers.append(`
            <a href="javascript:void(0);"
               class="flex items-center justify-center px-2 h-6 leading-tight border border-slate-300 bg-white text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white"
               onclick="changePage(1)">1</a>
        `);
                paginationNumbers.append(`<span class="px-3 text-gray-500">...</span>`); // Ellipsis dengan warna gray
            }

            // Membuat tombol untuk setiap halaman dalam rentang yang dinamis
            for (let i = startPage; i <= endPage; i++) {
                let isActive = currentPage === i;
                let activeClasses = isActive ? 'bg-slate-200 text-slate-600' : 'bg-white text-slate-500';

                let pageItem = `
            <a href="javascript:void(0);"
               class="flex items-center justify-center px-2 h-6 leading-tight border border-slate-300 ${activeClasses} hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white"
               onclick="changePage(${i})">${i}
            </a>`;

                paginationNumbers.append(pageItem);
            }

            // Membuat ellipsis untuk halaman setelahnya jika masih ada halaman lain
            if (endPage < totalPages) {
                paginationNumbers.append(`<span class="px-3 text-gray-500">...</span>`); // Ellipsis dengan warna gray
                paginationNumbers.append(`
            <a href="javascript:void(0);"
               class="flex items-center justify-center px-2 h-6 leading-tight border border-slate-300 bg-white text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:border-slate-700 dark:text-slate-400 dark:hover:bg-slate-700 dark:hover:text-white"
               onclick="changePage(${totalPages})">${totalPages}</a>
        `);
            }
        }

        function renderCards() {
            $('#allData').empty();
            $('#modial').empty();

            let start = (currentPage - 1) * itemsPerPage;
            let end = start + itemsPerPage;
            let paginatedData = allData.slice(start, end);

            $.each(paginatedData, function(index, value) {
                const siteLokasi = value.idLokasi;
                const cardHtml = `
            <div class="p-4 w-full items-center lg:items-start gap-4 rounded-xl bg-white shadow-2xl shadow-neutral-200 dark:bg-slate-800 dark:shadow-none">
                            <div class="relative">
                                <img alt="${value.namaPerumahan}" class="w-full h-48 object-cover" height="400" src="${value.foto[0]}" width="600"/>
                                <div class="absolute top-2 left-2 bg-green-500 text-white text-sm px-2 py-1 rounded">
                                    ${value.aktivasi === "true" ? 'Lokasi Tidak Aktif' : 'Lokasi Aktif'}
                                </div>
                                <div class="absolute top-2 right-2 bg-blue-500 text-white text-sm px-2 py-1 rounded">
                                    ${value.jenisPerumahan}
                                </div>
                            </div>
                            <div class="p-4 bg-cream-100 dark:text-white text-gray-600">
                                <h2 class="text-xl font-bold">
                                    ${value.namaPerumahan}
                                </h2>
                                <p>
                                    ${value.pengembang.nama} (${value.pengembang.asosiasi})
                                </p>
                                <p>
                                    ${value.wilayah.provinsi}, ${value.wilayah.kabupaten}, ${value.wilayah.kecamatan}, ${value.wilayah.kelurahan}
                                </p>
                                <div class="flex items-center mt-2 text-[10rem]">
                                    <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded mr-2">
                                        ${value.jumlahUnit} Unit subsidi
                                    </span>
                                    <span class="bg-red-800 text-white text-xs px-2 py-1 rounded mr-2">
                                        ${value.jumlahUnitKomersil} Unit komersil
                                    </span>
                                    <span class="bg-teal-600 text-white text-xs px-2 py-1 rounded mr-1">
                                        ${value.idLokasi}
                                    </span>
                                </div>
                            </div>
                            <button data-drawer-target="rumahModal${value.idLokasi}" data-drawer-show="rumahModal${value.idLokasi}" aria-controls="rumahModal${value.idLokasi}" data-drawer-placement="top" class="w-full px-4 py-2 font-medium text-sm border border-blue-500  dark:text-blue-400 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/90">Lihat</button>
                        </div>
        `;
                $('#allData').append(cardHtml);

                const [latitude, longitude] = value.koordinatPerumahan.split(',').map(Number);
                const kantorPemasaran = value.kantorPemasaran[0];
                const alamat = kantorPemasaran ? kantorPemasaran.alamat : 'N/A';
                const noTelp = kantorPemasaran ? kantorPemasaran.noTelp : 'N/A';
                const email = kantorPemasaran ? kantorPemasaran.email : 'N/A';
                const website = kantorPemasaran ? kantorPemasaran.website : 'N/A';
                const fetchDataModal = `
                    <div id="rumahModal${value.idLokasi}" class="fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50 transform -translate-y-full transition-transform duration-300">
                        <div class="min-h-screen px-4 text-center">
                            <div class="inline-block w-full max-w-7xl p-6 my-8 text-left align-middle transition-all transform bg-white dark:bg-gray-900 shadow-xl rounded-2xl">
                                <div class="absolute top-0 right-0 pt-4 pr-4">
                                    <button type="button" onclick="closeModal('rumahModal${value.idLokasi}')" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                                        <span class="sr-only">Close</span>
                                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>

                                <!-- Header -->
                                <div class="mb-8">
                                    <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">${value.namaPerumahan}</h1>
                                    <p class="mt-2 text-lg text-gray-600 dark:text-gray-400">${value.pengembang.nama} (${value.pengembang.asosiasi})</p>
                                    <p class="text-gray-600 dark:text-gray-400">${value.wilayah.provinsi}, ${value.wilayah.kabupaten}, ${value.wilayah.kecamatan}, ${value.wilayah.kelurahan}</p>
                                </div>

                                <!-- Main Content -->
                                <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                                    <!-- Left Column -->
                                    <div class="lg:col-span-8">
                                        <!-- Image Gallery -->
                                        <div class="space-y-6 mb-8">
                                            <div class="rounded-xl overflow-hidden bg-gray-50 dark:bg-gray-800">
                                                <img src="${value.foto[0]}" class="w-full h-96 object-cover" alt="Tampak Depan"/>
                                            </div>
                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                <div class="space-y-2">
                                                    <div class="rounded-xl overflow-hidden bg-gray-50 dark:bg-gray-800">
                                                        <img src="${value.foto[1]}" class="w-full h-48 object-cover" alt="Rumah Contoh"/>
                                                    </div>
                                                    <p class="text-sm text-center text-gray-700 dark:text-gray-300">Rumah Contoh</p>
                                                </div>
                                                <div class="space-y-2">
                                                    <div class="rounded-xl overflow-hidden bg-gray-50 dark:bg-gray-800">
                                                        <img src="${value.foto[2]}" class="w-full h-48 object-cover" alt="Posisi Tengah"/>
                                                    </div>
                                                    <p class="text-sm text-center text-gray-700 dark:text-gray-300">Posisi Tengah</p>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- House Types -->
                                        <div>
                                            <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Tipe Rumah</h2>
                                            ${value.tipeRumah.map((tipe, index) => `
                                                                <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6">
                                                                    <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">${index + 1}. Tipe ${tipe.nama} (${tipe.status})</h3>
                                                                    
                                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                                                        <img src="https://sikumbang.tapera.go.id${tipe.fotoTampak}" class="w-full h-64 object-cover rounded-xl" alt="Tampak"/>
                                                                        <img src="https://sikumbang.tapera.go.id${tipe.fotoDenah}" class="w-full h-64 object-cover rounded-xl" alt="Denah"/>
                                                                    </div>

                                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                                                        <div class="space-y-2 text-gray-700 dark:text-gray-300">
                                                                            <p class="font-semibold">Harga: Rp ${tipe.harga.toLocaleString('id-ID')}</p>
                                                                            <p>Luas Bangunan: ${tipe.luasBangunan} m²</p>
                                                                            <p>Luas Tanah: ${tipe.luasTanah} m²</p>
                                                                            <p>Kamar Tidur: ${tipe.kamarTidur}</p>
                                                                            <p>Kamar Mandi: ${tipe.kamarMandi}</p>
                                                                        </div>
                                                                        
                                                                        <div class="space-y-2 text-gray-700 dark:text-gray-300">
                                                                            <h4 class="font-semibold">Spesifikasi Teknis:</h4>
                                                                            <p>Atap: ${tipe.spesifikasiAtap}</p>
                                                                            <p>Dinding: ${tipe.spesifikasiDinding}</p>
                                                                            <p>Lantai: ${tipe.spesifikasiLantai}</p>
                                                                            <p>Pondasi: ${tipe.spesifikasiPondasi}</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            `).join('')}
                                        </div>
                                    </div>

                                    <!-- Right Column -->
                                    <div class="lg:col-span-4">
                                        <!-- Siteplan Button -->
                                        <div class="bg-pink-500 hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-800 rounded-xl mb-8 transition-colors">
                                            <a href="https://sikumbang.tapera.go.id/lokasi-perumahan/${value.idLokasi}/siteplan" 
                                               target="_blank" 
                                               class="block text-white text-lg font-bold text-center py-4">
                                                Lihat Siteplan
                                            </a>
                                        </div>

                                        <!-- Map -->
                                        <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg p-4 mb-8">
                                            <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Peta Lokasi</h2>
                                            <div class="rounded-xl overflow-hidden">
                                                <iframe 
                                                    width="100%" 
                                                    height="300" 
                                                    class="border-0"
                                                    src="https://www.openstreetmap.org/export/embed.html?bbox=${longitude - 0.001}%2C${latitude - 0.001}%2C${longitude + 0.001}%2C${latitude + 0.001}&amp;layer=mapnik&amp;marker=${latitude}%2C${longitude}">
                                                </iframe>
                                            </div>
                                        </div>

                                        <!-- Marketing Office -->
                                        <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg p-6">
                                            <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Kantor Pemasaran</h2>
                                            <div class="space-y-2 text-gray-700 dark:text-gray-300">
                                                <p>${alamat}</p>
                                                <p>Telp: ${noTelp}</p>
                                                <p>Email: ${email}</p>
                                                <p>Website: <a href="${website}" class="text-blue-500 dark:text-blue-400 hover:underline">${website}</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    `;
                $('#modial').append(fetchDataModal);
            });

            // Inisialisasi modal setelah konten ditambahkan
            $('[data-drawer-target^="rumahModal"]').on('click', function() {
                const targetModal = $(this).data('drawer-target');
                $(`#${targetModal}`).removeClass('-translate-y-full').addClass('translate-y-0');
            });

            $('.fixed.inset-0').on('click', function() {
                const targetModal = $(this).closest('[id^="rumahModal"]').attr('id');
                closeModal(targetModal);
            });
        }

        function fetchData(page) {
            $.ajax({
                url: `https://sikumbang.tapera.go.id/ajax/lokasi/search?selectedSearch=wilayah&skalaPerumahan=semua&kodeWilayah=3324&sort=terbaru&searchBy=nama-perumahan&page=${page}&limit=18`,
                method: 'GET',
                success: function(response) {
                    hideLoadingMessage();
                    if (response.data.length > 0) {
                        // Filter data yang memiliki idLokasi yang sama
                        const uniqueData = response.data.filter((item, index, self) =>
                            index === self.findIndex((t) => t.idLokasi === item.idLokasi)
                        );

                        // Gabungkan dengan data yang sudah ada
                        allData = allData.concat(uniqueData);
                        renderPagination();
                        fetchData(page + 1);
                    } else {
                        renderPagination();
                    }
                    $('#allData').empty(); // Kosongkan kontainer sebelum menambahkan data
                    // Mengambil data berdasarkan halaman
                    let start = (currentPage - 1) * itemsPerPage;
                    let end = start + itemsPerPage;
                    let paginatedData = allData.slice(start, end);
                    $('#modial').empty();
                    $.each(paginatedData || [], function(index, value) {
                        const siteLokasi = value.idLokasi;
                        console.log(siteLokasi);
                        const cardHtml = `
                       <div class="p-4 w-full items-center lg:items-start gap-4 rounded-xl bg-white shadow-2xl shadow-neutral-200 dark:bg-slate-800 dark:shadow-none">
                            <div class="relative">
                                <img alt="${value.namaPerumahan}" class="w-full h-48 object-cover" height="400" src="${value.foto[0]}" width="600"/>
                                <div class="absolute top-2 left-2 bg-green-500 text-white text-sm px-2 py-1 rounded">
                                    ${value.aktivasi === "true" ? 'Lokasi Tidak Aktif' : 'Lokasi Aktif'}
                                </div>
                                <div class="absolute top-2 right-2 bg-blue-500 text-white text-sm px-2 py-1 rounded">
                                    ${value.jenisPerumahan}
                                </div>
                            </div>
                            <div class="p-4 bg-cream-100 dark:text-white text-gray-600">
                                <h2 class="text-xl font-bold">
                                    ${value.namaPerumahan}
                                </h2>
                                <p>
                                    ${value.pengembang.nama} (${value.pengembang.asosiasi})
                                </p>
                                <p>
                                    ${value.wilayah.provinsi}, ${value.wilayah.kabupaten}, ${value.wilayah.kecamatan}, ${value.wilayah.kelurahan}
                                </p>
                                <div class="flex items-center mt-2 text-[10rem]">
                                    <span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded mr-2">
                                        ${value.jumlahUnit} Unit subsidi
                                    </span>
                                    <span class="bg-red-800 text-white text-xs px-2 py-1 rounded mr-2">
                                        ${value.jumlahUnitKomersil} Unit komersil
                                    </span>
                                    <span class="bg-teal-600 text-white text-xs px-2 py-1 rounded mr-1">
                                        ${value.idLokasi}
                                    </span>
                                </div>
                            </div>
                            <button data-drawer-target="rumahModal${value.idLokasi}" data-drawer-show="rumahModal${value.idLokasi}" aria-controls="rumahModal${value.idLokasi}" data-drawer-placement="top" class="w-full px-4 py-2 font-medium text-sm border border-blue-500  dark:text-blue-400 rounded-lg hover:bg-blue-50 dark:hover:bg-blue-900/90">Lihat</button>
                        </div>
                    `;
                        $('#allData').append(cardHtml);
                        const cardHtmlCount = `
                        <div class="text-center dark:text-white font-bold text-lg mb-4">
                            ${response.count.countPengembang.toLocaleString('id-ID')} PENGEMBANG, ${response.count.totalLokasi.toLocaleString('id-ID')} LOKASI, ${response.count.countUnitTotal.toLocaleString('id-ID')} UNIT
                        </div>
                        <div class="bg-gray-200 dark:bg-gray-300 p-4 rounded-lg mb-4">
                            <div class="font-bold mb-2">Komersil Antrian : ${response.count.countAntrianKomersil.toLocaleString('id-ID')}</div>
                            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2">
                                <div class="bg-gray-400 dark:bg-gray-600 text-white p-2 rounded-lg text-center">
                                    <div class="font-bold">${response.count.countUnitKomersil.toLocaleString('id-ID')}</div>
                                    <div>Kavling</div>
                                </div>
                                <div class="bg-orange-400 dark:bg-orange-600 text-white p-2 rounded-lg text-center">
                                    <div class="font-bold">${response.count.countUnitKomersilPembangunan.toLocaleString('id-ID')}</div>
                                    <div>Pembangunan</div>
                                </div>
                                <div class="bg-green-500 dark:bg-green-600 text-white p-2 rounded-lg text-center">
                                    <div class="font-bold">${response.count.countUnitKomersilReadyStock.toLocaleString('id-ID')}</div>
                                    <div>Ready Stock</div>
                                </div>
                                <div class="bg-purple-500 dark:bg-purple-800 text-white p-2 rounded-lg text-center">
                                    <div class="font-bold">${response.count.countUnitKomersilDibooking.toLocaleString('id-ID')}</div>
                                    <div>Dipesan</div>
                                </div>
                                <div class="bg-red-600 dark:bg-red-800 text-white p-2 rounded-lg text-center">
                                    <div class="font-bold">${response.count.countUnitKomersilTerjual.toLocaleString('id-ID')}</div>
                                    <div>Terjual</div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-200 dark:bg-gray-300 p-4 rounded-lg">
                            <div class="font-bold mb-2">Subsidi Antrian : ${response.count.totalPilihan.toLocaleString('id-ID')}</div>
                            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-2">
                                <div class="bg-gray-600 dark:bg-gray-400 text-white p-2 rounded-lg t     ext-center">
                                    <div class="font-bold">${response.count.countUnitSubsidi.toLocaleString('id-ID')}</div>
                                    <div>Kavling</div>
                                </div>
                                <div class="bg-orange-600 dark:bg-orange-400 text-white p-2 rounded-lg text-center">
                                    <div class="font-bold">${response.count.countUnitPembangunan.toLocaleString('id-ID')}</div>
                                    <div>Pembangunan</div>
                                </div>
                                <div class="bg-green-600 dark:bg-green-500 text-white p-2 rounded-lg text-center">
                                    <div class="font-bold">${response.count.countUnitReady.toLocaleString('id-ID')}</div>
                                    <div>Ready Stock</div>
                                </div>
                                <div class="bg-blue-800 dark:bg-blue-500 text-white p-2 rounded-lg text-center">
                                    <div class="font-bold">${response.count.countUnitDibooking.toLocaleString('id-ID')}</div>
                                    <div class="text-sm">Dipesan / Proses Bank</div>
                                </div>
                                <div class="bg-red-800 dark:bg-red-600 text-white p-2 rounded-lg text-center">
                                    <div class="font-bold">${response.count.countUnitTerjual.toLocaleString('id-ID')}</div>
                                    <div>Terjual</div>
                                </div>
                            </div>
                        </div>
                    `;

                        $('#hitungData').html(cardHtmlCount);

                        const [latitude, longitude] = value.koordinatPerumahan.split(',').map(Number);

                        // Access kantorPemasaran data
                        const kantorPemasaran = value.kantorPemasaran[
                            0]; // Get the first item in the array
                        const alamat = kantorPemasaran ? kantorPemasaran.alamat :
                            'N/A'; // Safely access alamat
                        const nomor = kantorPemasaran ? kantorPemasaran.nomor :
                            'N/A'; // Safely access nomor
                        const noTelp = kantorPemasaran ? kantorPemasaran.noTelp :
                            'N/A'; // Safely access noTelp
                        const email = kantorPemasaran ? kantorPemasaran.email :
                            'N/A'; // Safely access email
                        const website = kantorPemasaran ? kantorPemasaran.website :
                            'N/A'; // Safely access website

                        const fetchDataModal = `
                    <div id="rumahModal${value.idLokasi}" class="fixed inset-0 z-50 overflow-y-auto bg-black bg-opacity-50 transform -translate-y-full transition-transform duration-300">
                        <div class="min-h-screen px-4 text-center">
                            <div class="inline-block w-full max-w-7xl p-6 my-8 text-left align-middle transition-all transform bg-white dark:bg-gray-900 shadow-xl rounded-2xl">
                                <div class="absolute top-0 right-0 pt-4 pr-4">
                                    <button type="button" onclick="closeModal('rumahModal${value.idLokasi}')" class="text-gray-400 hover:text-gray-500 focus:outline-none">
                                        <span class="sr-only">Close</span>
                                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                        </svg>
                                    </button>
                                </div>

                                <!-- Header -->
                                <div class="mb-8">
                                    <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">${value.namaPerumahan}</h1>
                                    <p class="mt-2 text-lg text-gray-600 dark:text-gray-400">${value.pengembang.nama} (${value.pengembang.asosiasi})</p>
                                    <p class="text-gray-600 dark:text-gray-400">${value.wilayah.provinsi}, ${value.wilayah.kabupaten}, ${value.wilayah.kecamatan}, ${value.wilayah.kelurahan}</p>
                                </div>

                                <!-- Main Content -->
                                <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
                                    <!-- Left Column -->
                                    <div class="lg:col-span-8">
                                        <!-- Image Gallery -->
                                        <div class="space-y-6 mb-8">
                                            <div class="rounded-xl overflow-hidden bg-gray-50 dark:bg-gray-800">
                                                <img src="${value.foto[0]}" class="w-full h-96 object-cover" alt="Tampak Depan"/>
                                            </div>
                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                                <div class="space-y-2">
                                                    <div class="rounded-xl overflow-hidden bg-gray-50 dark:bg-gray-800">
                                                        <img src="${value.foto[1]}" class="w-full h-48 object-cover" alt="Rumah Contoh"/>
                                                    </div>
                                                    <p class="text-sm text-center text-gray-700 dark:text-gray-300">Rumah Contoh</p>
                                                </div>
                                                <div class="space-y-2">
                                                    <div class="rounded-xl overflow-hidden bg-gray-50 dark:bg-gray-800">
                                                        <img src="${value.foto[2]}" class="w-full h-48 object-cover" alt="Posisi Tengah"/>
                                                    </div>
                                                    <p class="text-sm text-center text-gray-700 dark:text-gray-300">Posisi Tengah</p>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- House Types -->
                                        <div>
                                            <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-gray-100">Tipe Rumah</h2>
                                            ${value.tipeRumah.map((tipe, index) => `
                                                                <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg p-6 mb-6">
                                                                    <h3 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">${index + 1}. Tipe ${tipe.nama} (${tipe.status})</h3>
                                                                    
                                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                                                        <img src="https://sikumbang.tapera.go.id${tipe.fotoTampak}" class="w-full h-64 object-cover rounded-xl" alt="Tampak"/>
                                                                        <img src="https://sikumbang.tapera.go.id${tipe.fotoDenah}" class="w-full h-64 object-cover rounded-xl" alt="Denah"/>
                                                                    </div>

                                                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                                                        <div class="space-y-2 text-gray-700 dark:text-gray-300">
                                                                            <p class="font-semibold">Harga: Rp ${tipe.harga.toLocaleString('id-ID')}</p>
                                                                            <p>Luas Bangunan: ${tipe.luasBangunan} m²</p>
                                                                            <p>Luas Tanah: ${tipe.luasTanah} m²</p>
                                                                            <p>Kamar Tidur: ${tipe.kamarTidur}</p>
                                                                            <p>Kamar Mandi: ${tipe.kamarMandi}</p>
                                                                        </div>
                                                                        
                                                                        <div class="space-y-2 text-gray-700 dark:text-gray-300">
                                                                            <h4 class="font-semibold">Spesifikasi Teknis:</h4>
                                                                            <p>Atap: ${tipe.spesifikasiAtap}</p>
                                                                            <p>Dinding: ${tipe.spesifikasiDinding}</p>
                                                                            <p>Lantai: ${tipe.spesifikasiLantai}</p>
                                                                            <p>Pondasi: ${tipe.spesifikasiPondasi}</p>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            `).join('')}
                                        </div>
                                    </div>

                                    <!-- Right Column -->
                                    <div class="lg:col-span-4">
                                        <!-- Siteplan Button -->
                                        <div class="bg-pink-500 hover:bg-pink-600 dark:bg-pink-700 dark:hover:bg-pink-800 rounded-xl mb-8 transition-colors">
                                            <a href="https://sikumbang.tapera.go.id/lokasi-perumahan/${value.idLokasi}/siteplan" 
                                               target="_blank" 
                                               class="block text-white text-lg font-bold text-center py-4">
                                                Lihat Siteplan
                                            </a>
                                        </div>

                                        <!-- Map -->
                                        <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg p-4 mb-8">
                                            <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Peta Lokasi</h2>
                                            <div class="rounded-xl overflow-hidden">
                                                <iframe 
                                                    width="100%" 
                                                    height="300" 
                                                    class="border-0"
                                                    src="https://www.openstreetmap.org/export/embed.html?bbox=${longitude - 0.001}%2C${latitude - 0.001}%2C${longitude + 0.001}%2C${latitude + 0.001}&amp;layer=mapnik&amp;marker=${latitude}%2C${longitude}">
                                                </iframe>
                                            </div>
                                        </div>

                                        <!-- Marketing Office -->
                                        <div class="bg-gray-50 dark:bg-gray-800 rounded-xl shadow-lg p-6">
                                            <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Kantor Pemasaran</h2>
                                            <div class="space-y-2 text-gray-700 dark:text-gray-300">
                                                <p>${alamat}</p>
                                                <p>Telp: ${noTelp}</p>
                                                <p>Email: ${email}</p>
                                                <p>Website: <a href="${website}" class="text-blue-500 dark:text-blue-400 hover:underline">${website}</a></p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    `;

                        $('#modial').append(fetchDataModal);
                    });

                    // Inisialisasi modal setelah konten ditambahkan
                    $('[data-drawer-target^="rumahModal"]').on('click', function() {
                        const targetModal = $(this).data('drawer-target');
                        $(`#${targetModal}`).removeClass('-translate-y-full').addClass('translate-y-0');
                    });

                    $('.fixed.inset-0').on('click', function() {
                        closeModal(targetModal);
                    });
                },
                error: function(xhr, status, error) {
                    hideLoadingMessage(); // Sembunyikan pesan loading
                    showErrorMessage(
                        'Tidak dapat mengakses data sikumbang dari D.I.Y. Silakan periksa koneksi internet atau coba lagi nanti.'
                    );
                    console.error('Terjadi kesalahan:', error);
                }
            });
        }

        function closeModal(modalId) {
            $(`#${modalId}`).addClass('-translate-y-full').removeClass('translate-y-0');
        }

        function fetchDataKab(kodeWilayah, page = 1) {
            let allDataTemp = [];

            function fetchPage(pageNum) {
                return $.ajax({
                    url: `https://sikumbang.tapera.go.id/ajax/lokasi/search?selectedSearch=wilayah&skalaPerumahan=semua&kodeWilayah=${kodeWilayah}&sort=terbaru&page=${pageNum}&limit=18`,
                    method: 'GET'
                });
            }

            // Ambil halaman pertama untuk mendapatkan total halaman
            fetchPage(1)
                .then(function(response) {
                    const totalPages = Math.ceil(response.count.totalLokasi / 18);
                    const promises = [];

                    // Buat array promises untuk semua halaman
                    for (let i = 1; i <= totalPages; i++) {
                        promises.push(fetchPage(i));
                    }

                    // Jalankan semua request secara parallel
                    return Promise.all(promises);
                })
                .then(function(responses) {
                    hideLoadingMessage();
                    $('#allData').empty();

                    // Gabungkan semua data dari setiap halaman
                    responses.forEach(response => {
                        if (response.data) {
                            allDataTemp = allDataTemp.concat(response.data);
                        }
                    });

                    allData = allDataTemp;
                    renderCards();
                    renderPagination();

                    if (allData.length === 0) {
                        showEmptyMessage('Sepertinya tidak ada data di kabupaten ini.');
                    }
                })
                .catch(function(error) {
                    hideLoadingMessage();
                    showErrorMessage(
                        'Tidak dapat mengakses data dari kabupaten. Silakan periksa koneksi internet atau coba lagi nanti.'
                    );
                    console.error('Terjadi kesalahan saat mengambil data lokasi:', error);
                });
        }

        function fetchDataKec(kodeWilayah, page) {

            $.ajax({
                url: "https://sikumbang.tapera.go.id/ajax/lokasi/search?selectedSearch=wilayah&skalaPerumahan=semua&kodeWilayah=" +
                    kodeWilayah + "&sort=terbaru&page=" + page + "&limit=18",
                method: 'GET',
                success: function(response) {
                    hideLoadingMessage(); // Sembunyikan pesan loading
                    $('#allData').empty(); // Kosongkan kontainer sebelum menambahkan data

                    // Mengisi kontainer dengan data
                    allData = response.data || []; // Simpan data baru ke allData
                    renderCards(); // Panggil renderCards untuk memperbarui tampilan
                    renderPagination();

                    // Jika tidak ada data, tampilkan pesan
                    if (allData.length === 0) {
                        showEmptyMessage('Sepertinya tidak ada data di kecamatan ini.');
                    }
                },
                error: function(xhr, status, error) {
                    hideLoadingMessage(); // Sembunyikan pesan loading
                    showErrorMessage(
                        'Tidak dapat mengakses data dari kecamatan. Silakan periksa koneksi internet atau coba lagi nanti.'
                    );
                    console.error('Terjadi kesalahan saat mengambil data lokasi:', error);
                }
            });
        }
    </script>
@endsection