@include('partials.header')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<!-- Load Google Maps API with async loading pattern -->
<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_OXU8m9x06roE94gEbKVUcNjYvbT3Qfg&loading=async&callback=initializeMap">
</script>

<!-- Custom CSS for modern and responsive map -->
<style>
    #map_canvas {
        height: 100vh;
        width: 100%;
        transition: all 0.5s ease;
        border-radius: 0;
        position: relative;
    }

    /* Advanced Filter Panel Styling */
    .map-filter-panel {
        position: fixed;
        top: 20px;
        right: 20px;
        background: rgba(255, 255, 255, 0.95);
        padding: 15px;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        z-index: 500;
        max-width: 320px;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        transform: translateY(0);
        opacity: 1;
    }

    .map-filter-panel.hidden {
        transform: translateY(-20px);
        opacity: 0;
    }

    .map-filter-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 12px;
        color: #333;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .map-filter-title .material-symbols-outlined {
        font-size: 20px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .map-filter-title .material-symbols-outlined:hover {
        transform: rotate(180deg);
    }

    .filter-chips-container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 10px;
    }

    .filter-section {
        margin-bottom: 15px;
    }

    .filter-section-title {
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
        color: #666;
    }

    .map-toggle-button {
        position: fixed;
        top: 20px;
        right: 20px;
        width: 40px;
        height: 40px;
        background: #900;
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 501;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        transition: all 0.3s ease;
        opacity: 0;
        pointer-events: none;
    }

    .map-toggle-button.visible {
        opacity: 1;
        pointer-events: auto;
    }

    .map-toggle-button:hover {
        transform: scale(1.1);
        background: #700;
    }

    .chip {
        display: flex;
        align-items: center;
        gap: 6px;
        border: none;
        padding: 8px 12px;
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: relative;
        overflow: hidden;
    }

    .chip::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.1);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .chip:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    }

    .chip:hover::after {
        opacity: 1;
    }

    .chip:active {
        transform: translateY(0);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .chip.active {
        box-shadow: 0 0 0 2px #900, 0 5px 15px rgba(0, 0, 0, 0.1);
        font-weight: 700;
    }

    .chip img {
        width: 20px;
        height: 20px;
        transition: transform 0.3s ease;
    }

    .chip:hover img {
        transform: scale(1.1);
    }

    /* Advanced Custom Info Window Styling */
    .gm-style .gm-style-iw-c {
        padding: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        max-width: 320px !important;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
    }

    .gm-style .gm-style-iw-d {
        overflow: hidden !important;
        padding: 0 !important;
    }

    .gm-style-iw-d::-webkit-scrollbar {
        display: none !important;
    }

    /* Hide default close button */
    .gm-style .gm-style-iw-t::after,
    .gm-ui-hover-effect {
        display: none !important;
    }

    .custom-info-window {
        font-family: 'Kufi', 'Noto', sans-serif;
        direction: rtl;
        text-align: right;
        padding: 0;
        border-radius: 12px;
        overflow: hidden;
        width: 100%;
        max-width: 320px;
        background-color: #fff;
        position: relative;
    }

    .info-window-close {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 24px;
        height: 24px;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
        font-size: 16px;
        color: #666;
        border: none;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: all 0.2s ease;
    }

    .info-window-close:hover {
        background-color: #fff;
        transform: scale(1.1);
        color: #333;
    }

    .info-window-header {
        position: relative;
        padding: 0;
        overflow: hidden;
        height: 140px;
    }

    .info-window-header-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.85);
    }

    .info-window-header-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.7) 100%);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 12px;
    }

    .info-window-title {
        color: #fff;
        margin: 0 0 5px 0;
        font-size: 16px;
        font-weight: bold;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
        line-height: 1.4;
    }

    .info-window-subtitle {
        color: #eee;
        margin: 0;
        font-size: 14px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    .info-window-badges {
        display: flex;
        gap: 8px;
        margin-top: 6px;
    }

    .info-window-badge {
        background-color: #900;
        color: white;
        padding: 3px 8px;
        border-radius: 20px;
        font-size: 11px;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .info-window-badge.electronic {
        background-color: #006e5f;
    }

    .info-window-badge.upcoming {
        background-color: #0066cc;
    }

    .info-window-badge.ongoing {
        background-color: #00994d;
    }

    .info-window-badge.finished {
        background-color: #cc3300;
    }

    .info-window-content {
        padding: 12px;
    }

    .info-window-property-info {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 12px;
        background-color: #f8f8f8;
        border-radius: 8px;
        padding: 8px;
    }

    .info-window-property-item {
        flex: 1;
        min-width: 100px;
        margin-bottom: 6px;
    }

    .info-window-property-label {
        color: #666;
        font-size: 11px;
        display: block;
        margin-bottom: 2px;
    }

    .info-window-property-value {
        color: #333;
        font-weight: bold;
        font-size: 13px;
    }

    .info-window-actions {
        display: flex;
        gap: 8px;
        margin-top: 12px;
    }

    .info-window-button {
        flex: 1;
        text-align: center;
        background-color: #900;
        color: white;
        text-decoration: none;
        padding: 8px 0;
        border-radius: 8px;
        transition: all 0.2s ease;
        font-size: 13px;
        font-weight: bold;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .info-window-button:hover {
        background-color: #700;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    .info-window-button.secondary {
        background-color: #f0f0f0;
        color: #333;
    }

    .info-window-button.secondary:hover {
        background-color: #e0e0e0;
    }

    .info-window-price {
        background-color: #900;
        color: white;
        text-align: center;
        padding: 10px;
        font-weight: bold;
        font-size: 14px;
        margin-top: 12px;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    /* Custom Marker Animation */
    @keyframes markerDrop {
        0% {
            transform: translateY(-200px) scale(0.6);
            opacity: 0;
        }

        60% {
            transform: translateY(20px) scale(1.1);
            opacity: 1;
        }

        80% {
            transform: translateY(-10px) scale(0.95);
        }

        100% {
            transform: translateY(0) scale(1);
        }
    }

    @keyframes markerPulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(1.2);
            opacity: 0.8;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Custom Cluster Animation */
    @keyframes clusterPulse {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        50% {
            transform: scale(1.15);
            opacity: 0.9;
        }

        100% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
        .map-filter-panel {
            top: auto;
            bottom: 20px;
            right: 50%;
            transform: translateX(50%);
            width: 90%;
            max-width: 400px;
        }

        .map-filter-panel.hidden {
            transform: translateX(50%) translateY(20px);
            opacity: 0;
        }

        .map-toggle-button {
            top: auto;
            bottom: 80px;
            right: 20px;
        }

        .custom-info-window {
            max-width: 280px;
        }

        .info-window-header {
            height: 120px;
        }

        .info-window-property-item {
            min-width: 80px;
        }
    }

    /* Animation effects */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes slideUp {
        from {
            transform: translateY(10px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .custom-info-window {
        animation: fadeIn 0.3s ease-out;
    }

    .info-window-content {
        animation: slideUp 0.3s ease-out;
    }

    .info-window-badge,
    .info-window-button {
        transition: all 0.2s ease;
    }

    .info-window-badge:hover,
    .info-window-button:hover {
        transform: translateY(-2px);
    }

    /* Loading animation */
    .map-loading {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        opacity: 1;
        transition: opacity 0.5s ease;
    }

    .map-loading.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .spinner {
        width: 50px;
        height: 50px;
        border: 5px solid rgba(153, 0, 0, 0.2);
        border-radius: 50%;
        border-top-color: #900;
        animation: spin 1s ease-in-out infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
</style>

<section id="ts-hero" class="mb-0 flex-wrap">
    <div id="map_canvas" class="ts-full-screen d-flex flex-column">
        <!-- Loading Spinner -->
        <div class="map-loading" id="map-loading">
            <div class="spinner"></div>
        </div>
    </div>

    <!-- Toggle Button for Filters -->
    <div class="map-toggle-button" id="filter-toggle">
        <span class="material-symbols-outlined">tune</span>
    </div>

    <!-- Advanced Filter Panel -->
    <div dir="rtl" style="text-align: right;" class="map-filter-panel" id="filter-panel">
        <div class="map-filter-title">
            <span>تصفية العقارات</span>
            <span class="material-symbols-outlined" id="filter-close">close</span>
        </div>

        <div class="filter-section">
            <div class="filter-section-title">حالة المزاد</div>
            <div class="filter-chips-container">
                <!-- Tab: قادم -->
                <button type="button" class="chip" style="background-color: #e0f0ff;" data-filter="upcoming">
                    <img src="{{ asset('img/icon/home_1blue.png') }}" style="width: 20px;">قادم
                </button>

                <!-- Tab: جاري -->
                <button type="button" class="chip" style="background-color: #e0ffe0;" data-filter="ongoing">
                    <img src="{{ asset('img/icon/home_2green.png') }}" style="width: 20px;">جاري
                </button>

                <!-- Tab: منتهي -->
                <button type="button" class="chip" style="background-color: #ffe0e0;" data-filter="finished">
                    <img src="{{ asset('img/icon/home_0red.png') }}" style="width: 20px;">منتهي
                </button>
            </div>
        </div>

        <div class="filter-section">
            <div class="filter-section-title">نوع العقار</div>
            <div class="filter-chips-container">
                <button type="button" class="chip" style="background-color: #f0f0f0;" data-property-type="1">
                    <img src="{{ asset('img/icon/land_1blue.png') }}" style="width: 20px;">أرض
                </button>
                <button type="button" class="chip" style="background-color: #f0f0f0;" data-property-type="4">
                    <img src="{{ asset('img/icon/home_1blue.png') }}" style="width: 20px;">سكني
                </button>
                <button type="button" class="chip" style="background-color: #f0f0f0;" data-property-type="2">
                    <img src="{{ asset('img/icon/store_1blue.png') }}" style="width: 20px;">تجاري
                </button>
                <button type="button" class="chip" style="background-color: #f0f0f0;" data-property-type="10">
                    <img src="{{ asset('img/icon/trad_1blue.png') }}" style="width: 20px;">صناعي
                </button>
            </div>
        </div>

        <button type="button" class="chip"
            style="background-color: #900; color: white; width: 100%; justify-content: center;" id="reset-filters">
            <span class="material-symbols-outlined">refresh</span>عرض الكل
        </button>
    </div>

    <script type="text/javascript">
        // Dynamically load MarkerClusterer library
        function loadMarkerClusterer() {
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = 'https://unpkg.com/@googlemaps/markerclusterer@2.0.15/dist/index.min.js';
                script.onload = resolve;
                script.onerror = reject;
                document.head.appendChild(script);
            });
        }

        // Global variables
        let map;
        let allMarkers = [];
        let visibleMarkers = [];
        let clusterManager = null;
        let currentInfoWindow = null;
        let data = @json($all); // Get data from Laravel
        let activeFilters = {
            status: null,
            propertyType: null
        };
        let mapLoaded = false;

        // Initialize map when Google Maps API is loaded
        window.initializeMap = async function() {
            try {
                console.log("Google Maps API loaded, initializing map");

                // Show loading spinner
                document.getElementById('map-loading').classList.remove('hidden');

                // Load MarkerClusterer library
                await loadMarkerClusterer();
                console.log("MarkerClusterer library loaded");

                // Create map instance with options
                map = new google.maps.Map(document.getElementById("map_canvas"), {
                    center: {
                        lat: 24.726384,
                        lng: 46.677442
                    }, // Center of KSA
                    zoom: 6,
                    mapTypeControl: false,
                    streetViewControl: false,
                    fullscreenControl: true,
                    fullscreenControlOptions: {
                        position: google.maps.ControlPosition.BOTTOM_LEFT
                    },
                    zoomControl: true,
                    zoomControlOptions: {
                        position: google.maps.ControlPosition.BOTTOM_RIGHT
                    },
                    gestureHandling: 'auto', // Allow free scrolling and zooming
                    clickableIcons: false, // Disable clickable POIs to improve stability
                    styles: [{
                            "featureType": "administrative",
                            "elementType": "geometry",
                            "stylers": [{
                                "visibility": "simplified"
                            }]
                        },
                        {
                            "featureType": "poi",
                            "stylers": [{
                                "visibility": "simplified"
                            }]
                        },
                        {
                            "featureType": "road",
                            "elementType": "labels",
                            "stylers": [{
                                "visibility": "simplified"
                            }]
                        },
                        {
                            "featureType": "water",
                            "stylers": [{
                                "visibility": "simplified"
                            }]
                        },
                        {
                            "featureType": "transit",
                            "stylers": [{
                                "visibility": "simplified"
                            }]
                        }
                    ]
                });

                // Add click listener to map to close info window when clicking elsewhere
                map.addListener('click', function() {
                    closeInfoWindow();
                });

                console.log("Map created successfully");

                // Set up UI event listeners
                setupUIEventListeners();

                // Create all markers after map is loaded
                google.maps.event.addListenerOnce(map, 'idle', function() {
                    console.log("Map idle, creating markers");
                    mapLoaded = true;
                    createAllMarkers();

                    // Hide loading spinner
                    setTimeout(() => {
                        document.getElementById('map-loading').classList.add('hidden');
                    }, 500);
                });
            } catch (error) {
                console.error("Error initializing map:", error);
                // Hide loading spinner on error
                document.getElementById('map-loading').classList.add('hidden');
            }
        };

        // Set up UI event listeners
        function setupUIEventListeners() {
            // Filter toggle button
            const filterToggle = document.getElementById('filter-toggle');
            const filterPanel = document.getElementById('filter-panel');
            const filterClose = document.getElementById('filter-close');

            filterToggle.addEventListener('click', function() {
                filterPanel.classList.toggle('hidden');
                filterToggle.classList.toggle('visible');
            });

            filterClose.addEventListener('click', function() {
                filterPanel.classList.add('hidden');
                filterToggle.classList.add('visible');
            });

            // Status filter buttons
            document.querySelectorAll('.chip[data-filter]').forEach(button => {
                button.addEventListener('click', function() {
                    const status = this.getAttribute('data-filter');

                    // Toggle active class on this button
                    document.querySelectorAll('.chip[data-filter]').forEach(btn => {
                        btn.classList.remove('active');
                    });
                    this.classList.add('active');

                    // Update active filters
                    activeFilters.status = status;

                    // Apply filters
                    applyActiveFilters();
                });
            });

            // Property type filter buttons
            document.querySelectorAll('.chip[data-property-type]').forEach(button => {
                button.addEventListener('click', function() {
                    const propertyType = this.getAttribute('data-property-type');

                    // Toggle active class on this button
                    document.querySelectorAll('.chip[data-property-type]').forEach(btn => {
                        btn.classList.remove('active');
                    });
                    this.classList.add('active');

                    // Update active filters
                    activeFilters.propertyType = propertyType;

                    // Apply filters
                    applyActiveFilters();
                });
            });

            // Reset filters button
            document.getElementById('reset-filters').addEventListener('click', function() {
                // Clear active classes
                document.querySelectorAll('.chip').forEach(btn => {
                    btn.classList.remove('active');
                });

                // Reset active filters
                activeFilters.status = null;
                activeFilters.propertyType = null;

                // Show all markers
                showAllMarkers();
            });
        }

        // Apply active filters
        function applyActiveFilters() {
            // Start with all markers
            let filteredMarkers = [...allMarkers];

            // Apply status filter if active
            if (activeFilters.status) {
                filteredMarkers = filteredMarkers.filter(marker =>
                    marker.customData && marker.customData.status === activeFilters.status
                );
            }

            // Apply property type filter if active
            if (activeFilters.propertyType) {
                filteredMarkers = filteredMarkers.filter(marker =>
                    marker.customData && marker.customData.propertyType === activeFilters.propertyType
                );
            }

            // Update visible markers
            visibleMarkers = filteredMarkers;
            updateMarkerVisibility();
        }

        // Function to get the auction status based on the start and end dates
        function getAuctionsStatus(start_date, end_date) {
            if (!start_date || !end_date) {
                return 'invalid';
            }

            // Get current date and time
            const now = new Date();

            // Parse and normalize start date (at start of the day)
            const startDate = new Date(start_date.replace('/', '-'));
            startDate.setHours(0, 0, 0, 0);

            // Parse and normalize end date (at 5 PM)
            const endDate = new Date(end_date.replace('/', '-'));
            endDate.setHours(17, 0, 0, 0); // Set time to 5 PM

            let status;
            if (startDate <= now && endDate >= now) {
                status = 'ongoing';
            } else if (startDate > now) {
                status = 'upcoming';
            } else if (endDate < now) {
                status = 'finished';
            } else {
                status = 'finished';
            }

            return status;
        }

        // Function to get the correct icon URL based on property type and auction status
        function getIconBasedOnStatus(propertytype, status) {
            const icons = {
                land: {
                    finished: "{{ asset('img/icon/land_0red.png') }}",
                    upcoming: "{{ asset('img/icon/land_1blue.png') }}",
                    ongoing: "{{ asset('img/icon/land_2green.png') }}",
                },
                home: {
                    finished: "{{ asset('img/icon/home_0red.png') }}",
                    upcoming: "{{ asset('img/icon/home_1blue.png') }}",
                    ongoing: "{{ asset('img/icon/home_2green.png') }}",
                },
                store: {
                    finished: "{{ asset('img/icon/store_0red.png') }}",
                    upcoming: "{{ asset('img/icon/store_1blue.png') }}",
                    ongoing: "{{ asset('img/icon/store_2green.png') }}",
                },
                trad: {
                    finished: "{{ asset('img/icon/trad_0red.png') }}",
                    upcoming: "{{ asset('img/icon/trad_1blue.png') }}",
                    ongoing: "{{ asset('img/icon/trad_2green.png') }}",
                },
            };

            switch (propertytype) {
                case '1':
                case 1:
                case '7':
                case 7:
                case '8':
                case 8:
                    return icons.land[status] || icons.land.finished;
                case '2':
                case 2:
                case '6':
                case 6:
                case '9':
                case 9:
                case '23':
                case 23:
                case '35':
                case 35:
                case '44':
                case 44:
                    return icons.store[status] || icons.store.finished;
                case '4':
                case 4:
                case '5':
                case 5:
                case '11':
                case 11:
                case '12':
                case 12:
                case '14':
                case 14:
                case '15':
                case 15:
                case '16':
                case 16:
                case '17':
                case 17:
                case '19':
                case 19:
                case '22':
                case 22:
                case '25':
                case 25:
                case '27':
                case 27:
                case '29':
                case 29:
                case '30':
                case 30:
                case '37':
                case 37:
                case '43':
                case 43:
                    return icons.home[status] || icons.home.finished;
                case '10':
                case 10:
                case '13':
                case 13:
                case '20':
                case 20:
                case '38':
                case 38:
                    return icons.trad[status] || icons.trad.finished;
                default:
                    return "{{ asset('img/icon/land_0red.png') }}";
            }
        }

        // Function to create the content for the info window - Compact Advanced UI Design
        function getPopupContent(value, markerId) {
            const auctionStatus = getAuctionsStatus(value.auction.start_date, value.auction.end_date);
            const url = `/auctionData/${value.auction.id}`;

            let statusText, statusClass;
            switch (auctionStatus) {
                case 'finished':
                    statusText = 'منتهي';
                    statusClass = 'finished';
                    break;
                case 'ongoing':
                    statusText = 'جاري';
                    statusClass = 'ongoing';
                    break;
                case 'upcoming':
                    statusText = 'قادم';
                    statusClass = 'upcoming';
                    break;
                default:
                    statusText = 'N/A';
                    statusClass = '';
            }

            let auctionTypeText, auctionTypeClass;
            switch (value.auction.auction_type_id) {
                case 1:
                    auctionTypeText = "حضوري";
                    auctionTypeClass = "";
                    break;
                case 2:
                    auctionTypeText = "إلكتروني";
                    auctionTypeClass = "electronic";
                    break;
                case 3:
                    auctionTypeText = "هجين";
                    auctionTypeClass = "";
                    break;
                default:
                    auctionTypeText = "N/A";
                    auctionTypeClass = "";
            }

            // Use a cover image instead of PDF iframe
            const coverImageUrl = `https://athman.qiam.sa/auction_cover/${value.auction_id}.png`;

            // Get price information
            const salesPrice = value.sales_price ? `${value.sales_price} ريال` : null;
            const openingPrice = value.opening_price ? `${value.opening_price} ريال` : null;
            const priceDisplay = salesPrice ? `سعر البيع: ${salesPrice}` :
                openingPrice ? `سعر الافتتاح: ${openingPrice}` :
                'السعر غير متوفر';

            // Get area information
            const area = value.area ? `${value.area} م²` : 'غير متوفر';

            // Get instrument number
            const instrumentNo = value.instrument_no || 'غير متوفر';

            // Get platform information
            const platform = value.auction.auctionPlatform || 'غير محدد';

            return `
                <div class="custom-info-window" id="info-window-${markerId}">
                    <button class="info-window-close" onclick="closeInfoWindow()">×</button>

                    <div class="info-window-header">
                        <img class="info-window-header-image" src="${coverImageUrl}" onerror="this.src='https://athman.qiam.sa/auction_cover/404.png'" alt="${value.auction.name || 'Property Image'}">
                        <div class="info-window-header-overlay">
                            <h3 class="info-window-title">${value.auction.name || 'N/A'}</h3>
                            <p class="info-window-subtitle">${value.name || ''}</p>
                            <div class="info-window-badges">
                                <span class="info-window-badge ${statusClass}">${statusText}</span>
                                <span class="info-window-badge ${auctionTypeClass}">${auctionTypeText}</span>
                            </div>
                        </div>
                    </div>

                    <div class="info-window-content">
                        <div class="info-window-property-info">
                            <div class="info-window-property-item">
                                <span class="info-window-property-label">المساحة</span>
                                <span class="info-window-property-value">${area}</span>
                            </div>
                            <div class="info-window-property-item">
                                <span class="info-window-property-label">رقم الصك</span>
                                <span class="info-window-property-value">${instrumentNo}</span>
                            </div>
                            <div class="info-window-property-item">
                                <span class="info-window-property-label">بداية المزاد</span>
                                <span class="info-window-property-value">${value.auction.start_date || 'N/A'}</span>
                            </div>
                            <div class="info-window-property-item">
                                <span class="info-window-property-label">نهاية المزاد</span>
                                <span class="info-window-property-value">${value.auction.end_date || 'N/A'}</span>
                            </div>
                        </div>

                        <div class="info-window-price">
                            ${priceDisplay}
                        </div>

                        <div class="info-window-actions">
                            <a href="${value.auction.auction_link || '#'}" target="_blank" class="info-window-button">${platform}</a>
                            <a href="https://athman.qiam.sa/brochures/${value.auction_id}.pdf" target="_blank" class="info-window-button secondary">البرشور</a>
                            <a href="${url}" class="info-window-button">التفاصيل</a>
                        </div>
                    </div>
                </div>
            `;
        }

        // Function to close info window
        function closeInfoWindow() {
            if (currentInfoWindow) {
                currentInfoWindow.close();
                currentInfoWindow = null;
            }
        }

        // Make the function available globally
        window.closeInfoWindow = closeInfoWindow;

        // Create all markers at once and store them
        function createAllMarkers() {
            try {
                console.log("Creating all markers");

                // Close any open info window
                closeInfoWindow();

                // Clear existing markers if any
                if (allMarkers.length > 0) {
                    allMarkers.forEach(marker => {
                        marker.setMap(null);
                    });
                    allMarkers = [];
                }

                // Create a bounds object to fit all markers
                const bounds = new google.maps.LatLngBounds();
                let validMarkerCount = 0;

                // Process all data items
                allMarkers = data.map((value, index) => {
                    if (!value.auction) {
                        console.log(`Missing auction data for marker`);
                        return null;
                    }

                    const auctionStatus = getAuctionsStatus(value.auction.start_date, value.auction.end_date);
                    const lat = parseFloat(value.latitude);
                    const lng = parseFloat(value.longitude);

                    if (isNaN(lat) || isNaN(lng)) {
                        console.log(`Invalid coordinates for auction: ${value.auction.name}`);
                        return null;
                    }

                    // Store additional data for filtering
                    const markerData = {
                        status: auctionStatus,
                        propertyType: value.property_type_id,
                        auctionType: value.auction.auction_type_id,
                        name: value.auction.name
                    };

                    // Create the marker using standard Marker
                    const marker = new google.maps.Marker({
                        position: {
                            lat,
                            lng
                        },
                        icon: {
                            url: getIconBasedOnStatus(value.property_type_id, auctionStatus),
                            scaledSize: new google.maps.Size(70, 70),
                            origin: new google.maps.Point(0, 0),
                            anchor: new google.maps.Point(35, 35)
                        },
                        title: value.auction.name || '',
                        optimized: true, // Improve performance
                        // Don't add to map yet - will be added by clusterer
                        map: null,
                        // Add animation for new markers
                        animation: google.maps.Animation.DROP
                    });

                    // Store custom data for filtering
                    marker.customData = markerData;
                    marker.markerId = index;

                    // Create info window with fixed options for stability
                    const infoWindow = new google.maps.InfoWindow({
                        content: getPopupContent(value, index),
                        maxWidth: 320,
                        disableAutoPan: false,
                        pixelOffset: new google.maps.Size(0, -5)
                    });

                    // Add click listener to marker
                    marker.addListener('click', () => {
                        // Close any open info window
                        closeInfoWindow();

                        // Add animation when marker is clicked
                        marker.setAnimation(google.maps.Animation.BOUNCE);
                        setTimeout(() => {
                            marker.setAnimation(null);
                        }, 750);

                        // Open this info window
                        infoWindow.open({
                            map: map,
                            anchor: marker,
                            shouldFocus: false
                        });
                        currentInfoWindow = infoWindow;

                        // Stop event propagation to prevent map click from closing the window immediately
                        google.maps.event.addListenerOnce(infoWindow, 'domready', function() {
                            $('.gm-style-iw').parent().on('click', function(e) {
                                e.stopPropagation();
                            });
                        });
                    });

                    // Extend bounds with this marker position
                    bounds.extend(marker.getPosition());
                    validMarkerCount++;

                    return marker;
                }).filter(marker => marker !== null);

                console.log(`Created ${allMarkers.length} markers out of ${data.length} data points`);

                // Show all markers initially
                showAllMarkers();

                // Fit map to bounds if we have valid markers
                if (validMarkerCount > 0) {
                    map.fitBounds(bounds);
                }

                // Apply any active filters
                if (activeFilters.status || activeFilters.propertyType) {
                    applyActiveFilters();
                }
            } catch (error) {
                console.error("Error creating markers:", error);
            }
        }

        // Show all markers and create clustering
        function showAllMarkers() {
            try {
                console.log("Showing all markers");

                // Set all markers as visible
                visibleMarkers = [...allMarkers];
                updateMarkerVisibility();

                // Reset active filters
                activeFilters.status = null;
                activeFilters.propertyType = null;

                // Reset active classes on filter buttons
                document.querySelectorAll('.chip').forEach(btn => {
                    btn.classList.remove('active');
                });
            } catch (error) {
                console.error("Error showing all markers:", error);
            }
        }

        // Update marker visibility and clustering
        function updateMarkerVisibility() {
            try {
                // First remove all markers from map and clear existing clusterer
                if (clusterManager) {
                    clusterManager.clearMarkers();
                }

                // Hide all markers
                allMarkers.forEach(marker => {
                    marker.setMap(null);
                });

                console.log(`Showing ${visibleMarkers.length} markers out of ${allMarkers.length} total`);

                // Create new MarkerClusterer with visible markers
                clusterManager = new markerClusterer.MarkerClusterer({
                    map: map,
                    markers: visibleMarkers,
                    algorithm: new markerClusterer.GridAlgorithm({
                        maxZoom: 15,
                        gridSize: 60
                    }),
                    renderer: {
                        render: ({
                            count,
                            position,
                            markers
                        }) => {
                            // Create custom cluster marker with zone.png
                            const clusterMarker = new google.maps.Marker({
                                position: position,
                                icon: {
                                    url: "{{ asset('img/icon/zone.png') }}",
                                    scaledSize: new google.maps.Size(60, 60),
                                    origin: new google.maps.Point(0, 0),
                                    anchor: new google.maps.Point(30, 30)
                                },
                                label: {
                                    text: String(count),
                                    color: "white",
                                    fontSize: "16px",
                                    fontWeight: "bold"
                                },
                                zIndex: 1000,
                                optimized: true // Improve performance
                            });

                            // Add click listener to zoom in when cluster is clicked
                            google.maps.event.addListener(clusterMarker, 'click', () => {
                                console.log(
                                    `Cluster clicked at ${position}, containing ${markers.length} markers`
                                    );

                                // Create bounds to fit all markers in this cluster
                                const bounds = new google.maps.LatLngBounds();
                                markers.forEach(marker => {
                                    bounds.extend(marker.getPosition());
                                });

                                // Zoom to fit all markers in this cluster
                                map.fitBounds(bounds, {
                                    padding: 100 // Add padding around the bounds
                                });

                                // Add animation to the cluster marker
                                clusterMarker.setAnimation(google.maps.Animation.BOUNCE);
                                setTimeout(() => {
                                    clusterMarker.setAnimation(null);
                                }, 750);
                            });

                            return clusterMarker;
                        }
                    }
                });

                // If we have visible markers and they're not too many, fit bounds to show all
                if (visibleMarkers.length > 0 && visibleMarkers.length < 500) {
                    const bounds = new google.maps.LatLngBounds();
                    visibleMarkers.forEach(marker => {
                        bounds.extend(marker.getPosition());
                    });

                    // Use smooth animation for panning
                    map.fitBounds(bounds, {
                        padding: 50
                    });
                }
            } catch (error) {
                console.error("Error updating marker visibility:", error);
            }
        }

        // Show filter toggle button when map is scrolled
        window.addEventListener('scroll', function() {
            if (mapLoaded) {
                const filterPanel = document.getElementById('filter-panel');
                const filterToggle = document.getElementById('filter-toggle');

                if (window.scrollY > 100) {
                    filterPanel.classList.add('hidden');
                    filterToggle.classList.add('visible');
                } else {
                    filterPanel.classList.remove('hidden');
                    filterToggle.classList.remove('visible');
                }
            }
        });
    </script>
</section>