@extends('layouts.layout1')
@section('title', 'Sikumbang || KLINIK PKP JAWA 3')

@section('content')
    <style>
        /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, var(--judges-base) 0%, var(--judges-base) 100%);
            min-height: 500px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            padding: 4rem 2rem;
        }

        /* Dark Mode Support */
        [data-theme="dark"] .hero-section {
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        }

        [data-theme="dark"] .hero-title {
            color: #f1f5f9;
        }

        [data-theme="dark"] .hero-subtitle {
            color: #e2e8f0;
        }

        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>') no-repeat bottom;
            background-size: cover;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 1000px;
            text-align: center;
            color: white;
        }

        .hero-title {
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            color: #f9fafb;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.95;
            line-height: 1.8;
            max-width: 900px;
            margin-left: auto;
            margin-right: auto;
        }

        .hero-divider {
            width: 100px;
            height: 4px;
            background: white;
            margin: 1.5rem auto;
            border-radius: 2px;
        }

        .sikumbang-section {
            padding: 2rem;
            background-color: #f9f9f9;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-top: 2rem;
        }

        [data-theme="dark"] .sikumbang-section {
            background-color: #1c1c1c;
        }

        .sikumbang-header {
            font-size: 2.5rem;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 1rem;
            text-align: center;
        }

        [data-theme="dark"] .sikumbang-header {
            color: #f1f5f9;
        }

        .sikumbang-subheader {
            font-size: 1.25rem;
            color: #4a5568;
            margin-bottom: 2rem;
            text-align: center;
        }

        [data-theme="dark"] .sikumbang-subheader {
            color: #cbd5e0;
        }

        .sikumbang-card {
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            padding: 1.5rem;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            margin-bottom: 2rem;
        }

        [data-theme="dark"] .sikumbang-card {
            background-color: #0f172a;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }

        .sikumbang-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
        }

        [data-theme="dark"] .sikumbang-card:hover {
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
        }

        .sikumbang-card-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 1rem;
        }

        [data-theme="dark"] .sikumbang-card-title {
            color: #f1f5f9;
        }

        .sikumbang-horizontal {
            display: flex;
            justify-content: space-between;
            gap: 1rem;
            margin-top: 1rem;
        }

        .sikumbang-horizontal-item {
            flex: 1;
            text-align: center;
            padding: 1rem;
            border-radius: 8px;
            background-color: #f1f5f9;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        [data-theme="dark"] .sikumbang-horizontal-item {
            background-color: #1e293b;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .sikumbang-horizontal-item.gray {
            background-color: #e5e7eb;
        }

        [data-theme="dark"] .sikumbang-horizontal-item.gray {
            background-color: #374151;
            color: #f9fafb;
        }

        .sikumbang-horizontal-item.orange {
            background-color: #f97316;
            color: #ffffff;
        }

        .sikumbang-horizontal-item.green {
            background-color: #10b981;
            color: #ffffff;
        }

        .sikumbang-horizontal-item.purple {
            background-color: #8b5cf6;
            color: #ffffff;
        }

        .sikumbang-horizontal-item.blue {
            background-color: #3b82f6;
            color: #ffffff;
        }

        .sikumbang-horizontal-item.red {
            background-color: #ef4444;
            color: #ffffff;
        }

        .sikumbang-horizontal-value {
            font-size: 1.5rem;
            font-weight: 700;
        }

        .sikumbang-horizontal-title {
            font-size: 1rem;
            font-weight: 600;
        }

        /* Enhanced Dropdown Styling */
        .sikumbang-dropdown-container {
            display: flex;
            justify-content: center;
            gap: 2rem;
            margin-top: 2rem;
            flex-wrap: wrap;
        }

        .sikumbang-dropdown {
            flex: 0 1 auto;
            min-width: 250px;
        }

        .sikumbang-dropdown-label {
            font-size: 1rem;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 0.5rem;
            display: block;
            text-align: left;
        }

        [data-theme="dark"] .sikumbang-dropdown-label {
            color: #f1f5f9;
        }

        .sikumbang-dropdown-select {
            width: 100%;
            min-width: 250px;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            border: 1px solid #cbd5e0;
            border-radius: 8px;
            background-color: #ffffff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        [data-theme="dark"] .sikumbang-dropdown-select {
            background-color: #1e293b;
            border-color: #475569;
            color: #f1f5f9;
        }

        [data-theme="dark"] .sikumbang-dropdown-select option {
            background-color: #1e293b;
            color: #f1f5f9;
        }

        .sikumbang-dropdown-select:focus {
            outline: none;
            border-color: #3182ce;
            box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.25);
        }

        [data-theme="dark"] .sikumbang-dropdown-select:focus {
            border-color: #60a5fa;
            box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.25);
        }

        /* Hide disabled dropdown options placeholder */
        .sikumbang-dropdown-select option[disabled] {
            display: none;
        }

        /* Hide nice-select duplicate dropdown */
        .nice-select,
        div.nice-select,
        .nice-select-dropdown {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            pointer-events: none !important;
        }

        /* Location Card Styling */
        .location-card {
            background-color: #fffbea;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        [data-theme="dark"] .location-card {
            background-color: #0f172a;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        .location-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        [data-theme="dark"] .location-card:hover {
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
        }

        .location-card-image {
            position: relative;
            width: 100%;
            height: 200px;
            overflow: hidden;
        }

        .location-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .location-badge {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 5px 12px;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 600;
            color: white;
        }

        .badge-aktif {
            background-color: #10b981;
        }

        .badge-nonaktif {
            background-color: #6b7280;
        }

        .rumah-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 5px 12px;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 600;
            background-color: #3b82f6;
            color: white;
        }

        .location-card-content {
            padding: 1rem;
        }

        [data-theme="dark"] .location-card-content {
            background-color: #0f172a;
        }

        .location-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 0.5rem;
            text-align: left;
        }

        [data-theme="dark"] .location-title {
            color: #f1f5f9;
        }

        .location-developer {
            font-size: 0.875rem;
            color: #6b7280;
            margin-bottom: 0.75rem;
            text-align: left;
        }

        [data-theme="dark"] .location-developer {
            color: #94a3b8;
        }

        .location-detail {
            font-size: 0.875rem;
            color: #374151;
            text-align: left;
            line-height: 1.5;
        }

        [data-theme="dark"] .location-detail {
            color: #cbd5e0;
        }

        .location-units {
            display: flex;
            gap: 0.5rem;
            margin-top: 0.75rem;
            flex-wrap: wrap;
        }

        .unit-badge {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            color: white;
        }

        .unit-subsidi {
            background-color: #f97316;
        }

        .unit-komersil {
            background-color: #1f2937;
        }

        .location-pwt {
            background-color: #06b6d4;
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            display: inline-block;
            margin-top: 0.5rem;
        }

        .detail-button {
            width: 100%;
            background-color: #3b82f6;
            color: white;
            padding: 0.75rem;
            border-radius: 6px;
            font-weight: 600;
            margin-top: 1rem;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .detail-button:hover {
            background-color: #2563eb;
        }

        /* Grid Layout 3 Kolom */
        #allData {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            padding: 1.5rem;
        }

        @media (max-width: 1024px) {
            #allData {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 640px) {
            #allData {
                grid-template-columns: repeat(1, 1fr);
            }
        }

        /* Modal Styling */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 9999;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem;
        }

        [data-theme="dark"] .modal-overlay {
            background-color: rgba(0, 0, 0, 0.8);
        }

        .modal-overlay.hidden {
            display: none;
        }

        .modal-content {
            background-color: white;
            border-radius: 1rem;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            max-width: 80rem;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            position: relative;
        }

        [data-theme="dark"] .modal-content {
            background-color: #0f172a;
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
        }

        /* Modal Header Styling */
        .modal-header {
            padding: 1.5rem 2rem;
            border-bottom: 1px solid #e5e7eb;
        }

        [data-theme="dark"] .modal-header {
            border-bottom-color: #334155;
        }

        [data-theme="dark"] .modal-header h2,
        [data-theme="dark"] .modal-header h3,
        [data-theme="dark"] .modal-header h4 {
            color: #f1f5f9;
        }

        [data-theme="dark"] .modal-header p {
            color: #cbd5e0;
        }

        .modal-body {
            padding: 2rem;
        }

        /* Image Gallery Styling */
        .main-image {
            width: 100%;
            height: 300px;
            object-fit: cover;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        .thumbnail-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .thumbnail-item {
            position: relative;
        }

        .thumbnail-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 0.5rem;
        }

        .thumbnail-label {
            text-align: center;
            font-size: 0.875rem;
            color: #6b7280;
            margin-top: 0.5rem;
        }

        [data-theme="dark"] .thumbnail-label {
            color: #94a3b8;
        }

        /* House Type Card */
        .house-type-card {
            background-color: #f9fafb;
            border-radius: 0.75rem;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            border: 1px solid #e5e7eb;
        }

        [data-theme="dark"] .house-type-card {
            background-color: #1e293b;
            border-color: #334155;
        }

        .house-type-header {
            font-size: 1.125rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1rem;
            padding-bottom: 0.75rem;
            border-bottom: 2px solid #e5e7eb;
        }

        [data-theme="dark"] .house-type-header {
            color: #f1f5f9;
            border-bottom-color: #334155;
        }

        .house-type-images {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
            margin-bottom: 1.5rem;
        }

        .house-type-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 0.5rem;
            border: 1px solid #e5e7eb;
        }

        .house-specs {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.5rem;
        }

        .spec-group {
            background-color: white;
            padding: 1rem;
            border-radius: 0.5rem;
            border: 1px solid #e5e7eb;
        }

        [data-theme="dark"] .spec-group {
            background-color: #0f172a;
            border-color: #334155;
        }

        .spec-item {
            padding: 0.5rem 0;
            border-bottom: 1px solid #f3f4f6;
        }

        [data-theme="dark"] .spec-item {
            border-bottom-color: #1e293b;
        }

        .spec-item:last-child {
            border-bottom: none;
        }

        .spec-label {
            font-weight: 600;
            color: #374151;
        }

        [data-theme="dark"] .spec-label {
            color: #f1f5f9;
        }

        .spec-value {
            color: #6b7280;
        }

        [data-theme="dark"] .spec-value {
            color: #94a3b8;
        }

        /* Sidebar Styling */
        .sidebar-section {
            background-color: #f9fafb;
            border-radius: 0.75rem;
            padding: 1.25rem;
            margin-bottom: 1.5rem;
            border: 1px solid #e5e7eb;
        }

        [data-theme="dark"] .sidebar-section {
            background-color: #1e293b;
            border-color: #334155;
        }

        .sidebar-title {
            font-size: 1.125rem;
            font-weight: 700;
            color: #1f2937;
            margin-bottom: 1rem;
        }

        [data-theme="dark"] .sidebar-title {
            color: #f1f5f9;
        }

        .siteplan-button {
            display: block;
            width: 100%;
            background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
            color: white;
            font-weight: 700;
            text-align: center;
            padding: 1rem;
            border-radius: 0.5rem;
            text-decoration: none;
            transition: transform 0.2s;
        }

        .siteplan-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
        }

        .info-item {
            padding: 0.75rem 0;
            border-bottom: 1px solid #e5e7eb;
        }

        [data-theme="dark"] .info-item {
            border-bottom-color: #334155;
        }

        .info-item:last-child {
            border-bottom: none;
        }

        .info-label {
            font-size: 0.875rem;
            color: #6b7280;
            margin-bottom: 0.25rem;
        }

        [data-theme="dark"] .info-label {
            color: #94a3b8;
        }

        .info-value {
            font-size: 0.9375rem;
            color: #1f2937;
            font-weight: 500;
        }

        [data-theme="dark"] .info-value {
            color: #f1f5f9;
        }
    </style>

    <!-- Hero Section -->
    <section class="hero-section">
        <div class="hero-content">
            <h1 class="hero-title">Sikumbang - {{ env('PROVINSI') }}</h1>
            <div class="hero-divider"></div>
            <p class="hero-subtitle">
                Sistem Informasi Keterpaduan Pembangunan Perumahan dan Kawasan Permukiman.
                Temukan berbagai informasi perumahan yang tersebar di {{ env('PROVINSI') }} dengan data yang lengkap dan
                terpercaya.
            </p>
        </div>
    </section>

    <div class="sikumbang-section">
        <div class="sikumbang-subheader">
            17.338 PENGEMBANG, 283 LOKASI, 30.307 UNIT
        </div>

        <div class="sikumbang-dropdown-container my-5">
            <div class="sikumbang-dropdown">
                <label for="location-select" class="sikumbang-dropdown-label">Pilih Kabupaten:</label>
                <select id="location-select" class="sikumbang-dropdown-select">
                    <option value="" disabled selected>Pilih Kabupaten</option>
                </select>
            </div>

            <div class="sikumbang-dropdown">
                <label for="kecamatan-select" class="sikumbang-dropdown-label">Pilih Kecamatan:</label>
                <select id="kecamatan-select" class="sikumbang-dropdown-select">
                    <option value="" disabled selected>Pilih Kabupaten terlebih dahulu</option>
                </select>
            </div>
        </div>

        <div id="hitungData" class="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 gap-3 p-6">
            <!-- Data Komersil dan Subsidi akan dimuat di sini -->
        </div>

        <div id="allData">
            <!-- Card perumahan akan dimuat di sini -->
        </div>

        <div id="modial">
            <!-- Modal akan dimuat di sini -->
        </div>
    </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>
        // Mapping provinsi ke kode wilayah
        const provinsiMap = {
            'JAWA TENGAH': '33',
            'DI YOGYAKARTA': '34',
            'JAWA TIMUR': '35',
            'JAWA BARAT': '32',
            'BANTEN': '36',
            'DKI JAKARTA': '31'
        };

        // Get kode wilayah from environment
        const envProvinsi = "{{ env('PROVINSI', 'JAWA TENGAH') }}".toUpperCase();
        const kodeWilayah = provinsiMap[envProvinsi] || '33'; // Default ke Jawa Tengah jika tidak ditemukan

        console.log('Provinsi:', envProvinsi);
        console.log('Kode Wilayah:', kodeWilayah);

        $(document).ready(function() {
            // Remove nice-select elements immediately
            removeNiceSelect();

            // Remove nice-select every 100ms to prevent it from appearing
            setInterval(removeNiceSelect, 100);

            fetchKabupaten();

            $('#location-select').change(function() {
                const selectedKabupaten = $(this).val();
                if (selectedKabupaten) {
                    allData = [];
                    currentPage = 1;
                    fetchDataKab(selectedKabupaten);
                    fetchKecamatan(selectedKabupaten);
                } else {
                    $('#kecamatan-select').empty().append(
                        '<option>Pilih kecamatan terlebih dahulu</option>');
                    fetchData(currentPage);
                }
            });

            $('#kecamatan-select').change(function() {
                const selectedKecamatan = $(this).val();
                if (selectedKecamatan) {
                    fetchDataKec(selectedKecamatan);
                } else {
                    fetchData(currentPage);
                }
            });

            fetchData(currentPage);
        });

        function removeNiceSelect() {
            const niceSelects = document.querySelectorAll('.nice-select, div.nice-select, .nice-select-dropdown');
            if (niceSelects.length > 0) {
                niceSelects.forEach(el => el.remove());
                console.log('Nice-select elements removed:', niceSelects.length);
            }
        }

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

        function hideLoadingMessage() {
            Swal.close();
        }

        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();
            $.ajax({
                url: "https://sikumbang.tapera.go.id/ajax/wilayah/get-kabupaten/" + kodeWilayah,
                method: 'GET',
                success: function(response) {
                    console.log('Response kabupaten:', response);
                    hideLoadingMessage();

                    // Tunggu sebentar untuk memastikan DOM siap
                    setTimeout(function() {
                        var dropdown = document.getElementById('location-select');
                        console.log('Dropdown element:', dropdown);

                        if (!dropdown) {
                            console.error('Dropdown tidak ditemukan!');
                            return;
                        }

                        dropdown.innerHTML = '';
                        dropdown.options.length = 0;

                        var defaultOption = document.createElement('option');
                        defaultOption.value = '';
                        defaultOption.textContent = 'Pilih Kabupaten';
                        dropdown.add(defaultOption);

                        for (var i = 0; i < response.length; i++) {
                            var option = document.createElement('option');
                            option.value = response[i].kodeWilayah;
                            option.textContent = response[i].namaWilayah;
                            dropdown.add(option);
                        }

                        console.log('SELESAI! Total options:', dropdown.options.length);
                        console.log('Options in dropdown:', Array.from(dropdown.options).map(o => o
                            .text));

                        // Force refresh dropdown
                        dropdown.style.display = 'none';
                        dropdown.offsetHeight; // Trigger reflow
                        dropdown.style.display = 'block';
                    }, 100);
                },
                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();
            $.ajax({
                url: "https://sikumbang.tapera.go.id/ajax/wilayah/get-kecamatan/" + kodeKabupaten,
                method: 'GET',
                success: function(response) {
                    console.log('Response kecamatan:', response);
                    hideLoadingMessage();

                    // Tunggu sebentar untuk memastikan DOM siap
                    setTimeout(function() {
                        var dropdown = document.getElementById('kecamatan-select');
                        console.log('Dropdown kecamatan element:', dropdown);

                        if (!dropdown) {
                            console.error('Dropdown kecamatan tidak ditemukan!');
                            return;
                        }

                        dropdown.innerHTML = '';
                        dropdown.options.length = 0;

                        var defaultOption = document.createElement('option');
                        defaultOption.value = '';
                        defaultOption.textContent = 'Pilih Kecamatan';
                        dropdown.add(defaultOption);

                        for (var i = 0; i < response.length; i++) {
                            var option = document.createElement('option');
                            option.value = response[i].kodeWilayah;
                            option.textContent = response[i].namaWilayah;
                            dropdown.add(option);
                        }

                        console.log('SELESAI! Total kecamatan options:', dropdown.options.length);
                        console.log('Kecamatan options in dropdown:', Array.from(dropdown.options).map(
                            o => o.text));

                        // Force refresh dropdown
                        dropdown.style.display = 'none';
                        dropdown.offsetHeight; // Trigger reflow
                        dropdown.style.display = 'block';
                    }, 100);
                },
                error: function(xhr, status, error) {
                    hideLoadingMessage();
                    showErrorMessage(
                        'Tidak dapat mengakses data kecamatan. Silakan periksa koneksi internet atau coba lagi nanti.'
                    );
                    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 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) {
                // Get wilayah info untuk detail lokasi di card
                const provinsi = value.wilayah && value.wilayah.provinsi ? value.wilayah.provinsi : envProvinsi;
                const kabupaten = value.wilayah && value.wilayah.kabupaten ? value.wilayah.kabupaten : '';
                const kecamatan = value.wilayah && value.wilayah.kecamatan ? value.wilayah.kecamatan : '';
                const kelurahan = value.wilayah && value.wilayah.kelurahan ? value.wilayah.kelurahan : '';

                // Format detail lokasi
                let detailLokasi = provinsi.toUpperCase();
                if (kabupaten) detailLokasi += ', ' + kabupaten.toUpperCase();
                if (kecamatan) detailLokasi += ', ' + kecamatan.toUpperCase();
                if (kelurahan) detailLokasi += ', ' + kelurahan.toUpperCase();

                // Status aktif/nonaktif
                const statusBadge = value.aktivasi === "true" ?
                    '<span class="location-badge badge-nonaktif">Lokasi Tidak Aktif</span>' :
                    '<span class="location-badge badge-aktif">Lokasi Aktif</span>';

                // Badge rumah tapak jika ada
                const rumahBadge = value.jenisBangunan === 'rumah-tapak' ?
                    '<span class="rumah-badge">Rumah Tapak</span>' : '';

                // Unit badges
                let unitBadges = '';
                if (value.unitSubsidi && value.unitSubsidi > 0) {
                    unitBadges += `<span class="unit-badge unit-subsidi">${value.unitSubsidi} Unit subsidi</span>`;
                }
                if (value.unitKomersil && value.unitKomersil > 0) {
                    unitBadges +=
                        `<span class="unit-badge unit-komersil">${value.unitKomersil} Unit komersil</span>`;
                }

                // PWT number jika ada
                const pwtBadge = value.pwt ? `<span class="location-pwt">${value.pwt}</span>` : '';

                // Foto default jika tidak ada
                const fotoUrl = value.foto && value.foto[0] ? value.foto[0] : 'https://placehold.co/400x200';

                // Developer name
                const developerName = value.pengembang && value.pengembang.nama ? value.pengembang.nama : '-';

                const cardHtml = `
                    <div class="location-card">
                        <div class="location-card-image">
                            <img alt="${value.namaPerumahan}" src="${fotoUrl}"/>
                            ${statusBadge}
                            ${rumahBadge}
                        </div>
                        <div class="location-card-content">
                            <h3 class="location-title">${value.namaPerumahan}</h3>
                            <p class="location-developer">${developerName}</p>
                            <div class="location-detail">
                                ${detailLokasi}
                            </div>
                            <div class="location-units">
                                ${unitBadges}
                            </div>
                            ${pwtBadge}
                            <button data-drawer-target="rumahModal${value.idLokasi}" data-drawer-show="rumahModal${value.idLokasi}" aria-controls="rumahModal${value.idLokasi}" data-drawer-placement="top" class="detail-button">Lihat detail lokasi</button>
                        </div>
                    </div>
                `;
                $('#allData').append(cardHtml);

                // Create modal for each location
                const [latitude, longitude] = value.koordinatPerumahan ? value.koordinatPerumahan.split(',').map(
                    Number) : [0, 0];
                const kantorPemasaran = value.kantorPemasaran && value.kantorPemasaran[0] ? value.kantorPemasaran[
                    0] : null;
                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';

                // Wilayah info untuk modal (sudah didefinisikan di atas, gunakan yang sama)
                const provinsiModal = provinsi;
                const kabupatenModal = kabupaten;
                const kecamatanModal = kecamatan;
                const kelurahanModal = kelurahan;

                const fetchDataModal = `
                    <div id="rumahModal${value.idLokasi}" class="modal-overlay hidden">
                        <div class="modal-content">
                            <!-- Close Button -->
                            <button type="button" onclick="closeModal('rumahModal${value.idLokasi}')" class="absolute top-4 right-4 z-50 text-gray-400 hover:text-gray-600 focus:outline-none bg-white rounded-full p-2 shadow-lg">
                                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" style="height: 24px;" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                                </svg>
                            </button>

                            <!-- Modal Header -->
                            <div class="modal-header">
                                <h1 class="text-2xl font-bold text-gray-900">${value.namaPerumahan}</h1>
                                <p class="text-sm text-gray-600 mt-1">${developerName}</p>
                                <p class="text-xs text-gray-500 mt-1">${provinsiModal}, ${kabupatenModal}, ${kecamatanModal}, ${kelurahanModal}</p>
                            </div>

                            <!-- Modal Body -->
                            <div class="modal-body">
                                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                                    <!-- Left Column - Images & House Types (2/3 width) -->
                                    <div class="lg:col-span-2">
                                        <!-- Image Gallery -->
                                        <div class="mb-6">
                                            <img src="${value.foto && value.foto[0] ? value.foto[0] : 'https://placehold.co/800x300'}" 
                                                 class="main-image" 
                                                 alt="Foto Utama"/>
                                            
                                            <div class="thumbnail-grid">
                                                <div class="thumbnail-item">
                                                    <img src="${value.foto && value.foto[1] ? value.foto[1] : 'https://placehold.co/400x150'}" 
                                                         class="thumbnail-image" 
                                                         alt="Rumah Contoh"/>
                                                    <p class="thumbnail-label">Rumah Contoh</p>
                                                </div>
                                                <div class="thumbnail-item">
                                                    <img src="${value.foto && value.foto[2] ? value.foto[2] : 'https://placehold.co/400x150'}" 
                                                         class="thumbnail-image" 
                                                         alt="Posisi Tengah"/>
                                                    <p class="thumbnail-label">Posisi Tengah</p>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- House Types -->
                                        <div>
                                            <h2 class="text-xl font-bold mb-4 text-gray-900">Tipe Rumah</h2>
                                            ${value.tipeRumah && value.tipeRumah.length > 0 ? value.tipeRumah.map((tipe, index) => `
                                                                    <div class="house-type-card">
                                                                        <div class="house-type-header">
                                                                            ${index + 1}. Tipe ${tipe.nama} (${tipe.status})
                                                                        </div>
                                                                        
                                                                        <div class="house-type-images">
                                                                            <div>
                                                                                <img src="https://sikumbang.tapera.go.id${tipe.fotoTampak}" 
                                                                                     class="house-type-image" 
                                                                                     alt="Tampak Rumah"
                                                                                     onerror="this.src='https://placehold.co/300x200?text=Foto+Tampak'"/>
                                                                            </div>
                                                                            <div>
                                                                                <img src="https://sikumbang.tapera.go.id${tipe.fotoDenah}" 
                                                                                     class="house-type-image" 
                                                                                     alt="Denah Rumah"
                                                                                     onerror="this.src='https://placehold.co/300x200?text=Foto+Denah'"/>
                                                                            </div>
                                                                        </div>

                                                                        <div class="house-specs">
                                                                            <div class="spec-group">
                                                                                <h4 class="font-bold text-gray-900 mb-2">Informasi Umum</h4>
                                                                                <div class="spec-item">
                                                                                    <span class="spec-label">Harga:</span> 
                                                                                    <span class="spec-value">Rp ${tipe.harga ? tipe.harga.toLocaleString('id-ID') : 'N/A'}</span>
                                                                                </div>
                                                                                <div class="spec-item">
                                                                                    <span class="spec-label">Luas Bangunan:</span> 
                                                                                    <span class="spec-value">${tipe.luasBangunan || 'N/A'} m²</span>
                                                                                </div>
                                                                                <div class="spec-item">
                                                                                    <span class="spec-label">Luas Tanah:</span> 
                                                                                    <span class="spec-value">${tipe.luasTanah || 'N/A'} m²</span>
                                                                                </div>
                                                                                <div class="spec-item">
                                                                                    <span class="spec-label">Kamar Tidur:</span> 
                                                                                    <span class="spec-value">${tipe.kamarTidur || 'N/A'}</span>
                                                                                </div>
                                                                                <div class="spec-item">
                                                                                    <span class="spec-label">Kamar Mandi:</span> 
                                                                                    <span class="spec-value">${tipe.kamarMandi || 'N/A'}</span>
                                                                                </div>
                                                                            </div>
                                                                            
                                                                            <div class="spec-group">
                                                                                <h4 class="font-bold text-gray-900 mb-2">Spesifikasi Teknis</h4>
                                                                                <div class="spec-item">
                                                                                    <span class="spec-label">Atap:</span> 
                                                                                    <span class="spec-value">${tipe.spesifikasiAtap || 'N/A'}</span>
                                                                                </div>
                                                                                <div class="spec-item">
                                                                                    <span class="spec-label">Dinding:</span> 
                                                                                    <span class="spec-value">${tipe.spesifikasiDinding || 'N/A'}</span>
                                                                                </div>
                                                                                <div class="spec-item">
                                                                                    <span class="spec-label">Lantai:</span> 
                                                                                    <span class="spec-value">${tipe.spesifikasiLantai || 'N/A'}</span>
                                                                                </div>
                                                                                <div class="spec-item">
                                                                                    <span class="spec-label">Pondasi:</span> 
                                                                                    <span class="spec-value">${tipe.spesifikasiPondasi || 'N/A'}</span>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                `).join('') : '<p class="text-gray-600 text-center py-8">Tidak ada data tipe rumah</p>'}
                                        </div>
                                    </div>

                                    <!-- Right Column - Sidebar (1/3 width) -->
                                    <div class="lg:col-span-1">
                                        <!-- Siteplan Button -->
                                        <div class="sidebar-section" style="background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); border: none; padding: 0;">
                                            <a href="https://sikumbang.tapera.go.id/lokasi-perumahan/${value.idLokasi}/siteplan" 
                                               target="_blank" 
                                               class="siteplan-button" style="background: none; margin: 0;">
                                                📍 Lihat Siteplan
                                            </a>
                                        </div>

                                        <!-- Map -->
                                        <div class="sidebar-section">
                                            <h3 class="sidebar-title">Peta Lokasi</h3>
                                            <div style="border-radius: 0.5rem; overflow: hidden;">
                                                <iframe 
                                                    width="100%" 
                                                    height="200" 
                                                    style="border:0; border-radius: 0.5rem;" 
                                                    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="sidebar-section">
                                            <h3 class="sidebar-title">Kantor Pemasaran</h3>
                                            <div class="info-item">
                                                <div class="info-label">Alamat</div>
                                                <div class="info-value">${alamat}</div>
                                            </div>
                                            <div class="info-item">
                                                <div class="info-label">Telepon</div>
                                                <div class="info-value">${noTelp}</div>
                                            </div>
                                            <div class="info-item">
                                                <div class="info-label">Email</div>
                                                <div class="info-value">${email}</div>
                                            </div>
                                            <div class="info-item">
                                                <div class="info-label">Website</div>
                                                <div class="info-value">
                                                    <a href="${website}" class="text-blue-600 hover:text-blue-800 underline" target="_blank">${website}</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                $('#modial').append(fetchDataModal);
            });

            // Initialize modal events - dengan event delegation yang lebih baik
            $(document).off('click', '[data-drawer-target^="rumahModal"]').on('click', '[data-drawer-target^="rumahModal"]',
                function(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    const targetModal = $(this).data('drawer-target');
                    $(`#${targetModal}`).removeClass('hidden');
                    $('body').css('overflow', 'hidden');
                });

            // Close modal when clicking on overlay (not on modal content)
            $(document).off('click', '.modal-overlay').on('click', '.modal-overlay', function(e) {
                if ($(e.target).hasClass('modal-overlay')) {
                    const modalId = $(this).attr('id');
                    closeModal(modalId);
                }
            });

            // Prevent modal content clicks from closing modal
            $(document).off('click', '.modal-content').on('click', '.modal-content', function(e) {
                e.stopPropagation();
            });

            renderPagination();
        }

        function closeModal(modalId) {
            $(`#${modalId}`).addClass('hidden');
            $('body').css('overflow', 'auto');
        }

        function renderPagination() {
            totalPages = Math.ceil(allData.length / itemsPerPage);
        }

        function fetchData(page) {
            $.ajax({
                url: `https://sikumbang.tapera.go.id/ajax/lokasi/search?selectedSearch=wilayah&skalaPerumahan=semua&kodeWilayah=${kodeWilayah}&sort=terbaru&searchBy=nama-perumahan&page=${page}&limit=18`,
                method: 'GET',
                success: function(response) {
                    // Update statistik HANYA di page 1
                    if (page === 1) {
                        const cardHtmlCount = `
                        <div class="sikumbang-card">
                            <h2 class="sikumbang-card-title">Komersil Antrian : ${response.count.countAntrianKomersil.toLocaleString('id-ID')}</h2>
                            <div class="sikumbang-horizontal">
                                <div class="sikumbang-horizontal-item gray">
                                    <span class="sikumbang-horizontal-value">${response.count.countUnitKomersil.toLocaleString('id-ID')}</span>
                                    <span class="sikumbang-horizontal-title">Kavling</span>
                                </div>
                                <div class="sikumbang-horizontal-item orange">
                                    <span class="sikumbang-horizontal-value">${response.count.countUnitKomersilPembangunan.toLocaleString('id-ID')}</span>
                                    <span class="sikumbang-horizontal-title">Pembangunan</span>
                                </div>
                                <div class="sikumbang-horizontal-item green">
                                    <span class="sikumbang-horizontal-value">${response.count.countUnitKomersilReadyStock.toLocaleString('id-ID')}</span>
                                    <span class="sikumbang-horizontal-title">Ready Stock</span>
                                </div>
                                <div class="sikumbang-horizontal-item purple">
                                    <span class="sikumbang-horizontal-value">${response.count.countUnitKomersilDibooking.toLocaleString('id-ID')}</span>
                                    <span class="sikumbang-horizontal-title">Dipesan</span>
                                </div>
                                <div class="sikumbang-horizontal-item red">
                                    <span class="sikumbang-horizontal-value">${response.count.countUnitKomersilTerjual.toLocaleString('id-ID')}</span>
                                    <span class="sikumbang-horizontal-title">Terjual</span>
                                </div>
                            </div>
                        </div>
                        <div class="sikumbang-card">
                            <h2 class="sikumbang-card-title">Subsidi Antrian : ${response.count.totalPilihan.toLocaleString('id-ID')}</h2>
                            <div class="sikumbang-horizontal">
                                <div class="sikumbang-horizontal-item gray">
                                    <span class="sikumbang-horizontal-value">${response.count.countUnitSubsidi.toLocaleString('id-ID')}</span>
                                    <span class="sikumbang-horizontal-title">Kavling</span>
                                </div>
                                <div class="sikumbang-horizontal-item orange">
                                    <span class="sikumbang-horizontal-value">${response.count.countUnitPembangunan.toLocaleString('id-ID')}</span>
                                    <span class="sikumbang-horizontal-title">Pembangunan</span>
                                </div>
                                <div class="sikumbang-horizontal-item green">
                                    <span class="sikumbang-horizontal-value">${response.count.countUnitReady.toLocaleString('id-ID')}</span>
                                    <span class="sikumbang-horizontal-title">Ready Stock</span>
                                </div>
                                <div class="sikumbang-horizontal-item blue">
                                    <span class="sikumbang-horizontal-value">${response.count.countUnitDibooking.toLocaleString('id-ID')}</span>
                                    <span class="sikumbang-horizontal-title">Dipesan / Proses Bank</span>
                                </div>
                                <div class="sikumbang-horizontal-item red">
                                    <span class="sikumbang-horizontal-value">${response.count.countUnitTerjual.toLocaleString('id-ID')}</span>
                                    <span class="sikumbang-horizontal-title">Terjual</span>
                                </div>
                            </div>
                        </div>
                        `;
                        $('#hitungData').html(cardHtmlCount);
                    }

                    // Tambah data dan lanjut fetch page berikutnya HANYA jika ada data
                    if (response.data && response.data.length > 0) {
                        const uniqueData = response.data.filter((item, index, self) =>
                            index === self.findIndex((t) => t.idLokasi === item.idLokasi)
                        );
                        allData = allData.concat(uniqueData);

                        // Render cards hanya sekali setelah semua data dimuat
                        // Lanjutkan fetch jika masih ada data
                        fetchData(page + 1);
                    } else {
                        // Tidak ada data lagi, render semua cards dan hide loading
                        hideLoadingMessage();
                        renderPagination();
                        renderCards();
                        console.log('Semua data berhasil dimuat. Total:', allData.length);
                    }
                },
                error: function(xhr, status, error) {
                    hideLoadingMessage();
                    showErrorMessage(
                        'Tidak dapat mengakses data sikumbang. Silakan periksa koneksi internet atau coba lagi nanti.'
                    );
                    console.error('Terjadi kesalahan:', error);
                }
            });
        }

        function fetchDataKab(kodeWilayah) {
            showLoadingMessage();
            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'
                });
            }

            fetchPage(1)
                .then(function(response) {
                    const totalPages = Math.ceil(response.count.totalLokasi / 18);
                    const promises = [];

                    for (let i = 1; i <= totalPages; i++) {
                        promises.push(fetchPage(i));
                    }

                    return Promise.all(promises);
                })
                .then(function(responses) {
                    hideLoadingMessage();
                    $('#allData').empty();

                    responses.forEach(response => {
                        if (response.data) {
                            allDataTemp = allDataTemp.concat(response.data);
                        }
                    });

                    allData = allDataTemp;
                    renderCards();

                    if (responses[0] && responses[0].count) {
                        const cardHtmlCount = `
                            <div class="sikumbang-card">
                                <h2 class="sikumbang-card-title">Komersil Antrian : ${responses[0].count.countAntrianKomersil.toLocaleString('id-ID')}</h2>
                                <div class="sikumbang-horizontal">
                                    <div class="sikumbang-horizontal-item gray">
                                        <span class="sikumbang-horizontal-value">${responses[0].count.countUnitKomersil.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Kavling</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item orange">
                                        <span class="sikumbang-horizontal-value">${responses[0].count.countUnitKomersilPembangunan.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Pembangunan</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item green">
                                        <span class="sikumbang-horizontal-value">${responses[0].count.countUnitKomersilReadyStock.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Ready Stock</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item purple">
                                        <span class="sikumbang-horizontal-value">${responses[0].count.countUnitKomersilDibooking.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Dipesan</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item red">
                                        <span class="sikumbang-horizontal-value">${responses[0].count.countUnitKomersilTerjual.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Terjual</span>
                                    </div>
                                </div>
                            </div>
                            <div class="sikumbang-card">
                                <h2 class="sikumbang-card-title">Subsidi Antrian : ${responses[0].count.totalPilihan.toLocaleString('id-ID')}</h2>
                                <div class="sikumbang-horizontal">
                                    <div class="sikumbang-horizontal-item gray">
                                        <span class="sikumbang-horizontal-value">${responses[0].count.countUnitSubsidi.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Kavling</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item orange">
                                        <span class="sikumbang-horizontal-value">${responses[0].count.countUnitPembangunan.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Pembangunan</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item green">
                                        <span class="sikumbang-horizontal-value">${responses[0].count.countUnitReady.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Ready Stock</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item blue">
                                        <span class="sikumbang-horizontal-value">${responses[0].count.countUnitDibooking.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Dipesan / Proses Bank</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item red">
                                        <span class="sikumbang-horizontal-value">${responses[0].count.countUnitTerjual.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Terjual</span>
                                    </div>
                                </div>
                            </div>
                        `;
                        $('#hitungData').html(cardHtmlCount);
                    }

                    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) {
            showLoadingMessage();
            $.ajax({
                url: "https://sikumbang.tapera.go.id/ajax/lokasi/search?selectedSearch=wilayah&skalaPerumahan=semua&kodeWilayah=" +
                    kodeWilayah + "&sort=terbaru&page=1&limit=18",
                method: 'GET',
                success: function(response) {
                    hideLoadingMessage();
                    $('#allData').empty();

                    allData = response.data || [];
                    renderCards();

                    if (response.count) {
                        const cardHtmlCount = `
                            <div class="sikumbang-card">
                                <h2 class="sikumbang-card-title">Komersil Antrian : ${response.count.countAntrianKomersil.toLocaleString('id-ID')}</h2>
                                <div class="sikumbang-horizontal">
                                    <div class="sikumbang-horizontal-item gray">
                                        <span class="sikumbang-horizontal-value">${response.count.countUnitKomersil.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Kavling</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item orange">
                                        <span class="sikumbang-horizontal-value">${response.count.countUnitKomersilPembangunan.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Pembangunan</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item green">
                                        <span class="sikumbang-horizontal-value">${response.count.countUnitKomersilReadyStock.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Ready Stock</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item purple">
                                        <span class="sikumbang-horizontal-value">${response.count.countUnitKomersilDibooking.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Dipesan</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item red">
                                        <span class="sikumbang-horizontal-value">${response.count.countUnitKomersilTerjual.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Terjual</span>
                                    </div>
                                </div>
                            </div>
                            <div class="sikumbang-card">
                                <h2 class="sikumbang-card-title">Subsidi Antrian : ${response.count.totalPilihan.toLocaleString('id-ID')}</h2>
                                <div class="sikumbang-horizontal">
                                    <div class="sikumbang-horizontal-item gray">
                                        <span class="sikumbang-horizontal-value">${response.count.countUnitSubsidi.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Kavling</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item orange">
                                        <span class="sikumbang-horizontal-value">${response.count.countUnitPembangunan.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Pembangunan</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item green">
                                        <span class="sikumbang-horizontal-value">${response.count.countUnitReady.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Ready Stock</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item blue">
                                        <span class="sikumbang-horizontal-value">${response.count.countUnitDibooking.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Dipesan / Proses Bank</span>
                                    </div>
                                    <div class="sikumbang-horizontal-item red">
                                        <span class="sikumbang-horizontal-value">${response.count.countUnitTerjual.toLocaleString('id-ID')}</span>
                                        <span class="sikumbang-horizontal-title">Terjual</span>
                                    </div>
                                </div>
                            </div>
                        `;
                        $('#hitungData').html(cardHtmlCount);
                    }

                    if (allData.length === 0) {
                        showEmptyMessage('Sepertinya tidak ada data di kecamatan ini.');
                    }
                },
                error: function(xhr, status, error) {
                    hideLoadingMessage();
                    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>
    <x-footer_one />
@endsection