@include('partials.header') <!-- Include the header -->
<!-- HERO MAP
    =================================================================================================================-->
    <section id="ts-hero" class=" mb-0">

        <!--Fullscreen mode-->
        <div class="ts-full-screen d-flex flex-column">

            <!-- MAP
            =========================================================================================================-->
           
                <!--end ts-form__map-search-->


                <script type="text/javascript">
function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(24.726384, 46.677442),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var infoWindow = new google.maps.InfoWindow();
    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    $.ajax({
        url: 'http://127.0.0.1:8000/api/items',  // Your API endpoint
        type: 'GET',
        dataType: 'json',
        success: function(data) {
            // Iterate over each item in the data array
            $.each(data, function(i, value) {
                // Parse latitude and longitude as floats
                var lat = parseFloat(value.latitude);
                var lng = parseFloat(value.longitude);

                // Check if coordinates are valid numbers
                if (!isNaN(lat) && !isNaN(lng)) {
                    var myLatlng = new google.maps.LatLng(lat, lng);

                    // Define custom icons based on Property_Use
                    var iconUrl;
                   

switch (value.Property_Use) {
    case 'ارض':
        if (value.flag === 0) {
            iconUrl = '{{ asset("img/icon/land_0.png") }}'; // Icon for flag 0
        } else if (value.flag === 1) {
            iconUrl = '{{ asset("img/icon/land_1.png") }}'; // Icon for flag 1
        } else if (value.flag === 2) {
            iconUrl = '{{ asset("img/icon/land_2.png") }}'; // Icon for flag 2
        } else {
            iconUrl = '{{ asset("img/icon/land_0.png") }}';  // Fallback icon for land
        }
        break;
    case 'سكني':
        if (value.flag === 0) {
            iconUrl = '{{ asset("img/icon/home_0.png") }}'; // Icon for flag 0
        } else if (value.flag === 1) {
            iconUrl = '{{ asset("img/icon/home_1.png") }}'; // Icon for flag 1
        } else if (value.flag === 2) {
            iconUrl = '{{ asset("img/icon/home_2.png") }}'; // Icon for flag 2
        } else {
            iconUrl = '{{ asset("img/icon/home_0.png") }}';  // Fallback icon for home
        }
        break;
    case 'تجاري':
        if (value.flag === 0) {
            iconUrl = '{{ asset("img/icon/store_0.png") }}'; // Icon for flag 0
        } else if (value.flag === 1) {
            iconUrl = '{{ asset("img/icon/store_1.png") }}'; // Icon for flag 1
        } else if (value.flag === 2) {
            iconUrl = '{{ asset("img/icon/store_2.png") }}'; // Icon for flag 2
        } else {
            iconUrl = '{{ asset("img/icon/store_0.png") }}'; // Fallback icon for store
        }
        break;
    default:
        iconUrl = '{{ asset("img/icon/land_0.png") }}'; // Fallback icon
}


                    // Create a marker on the map for each item
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: map,
                        title: value.Auction_Name,  // Use Auction_Name or any other relevant property
                        icon: {
                            url: iconUrl, // Set the URL to the custom icon
                            scaledSize: new google.maps.Size(70, 70)  // Resize the icon if needed
                        }
                    });

                    // Optional: Add a click event to show more info
                google.maps.event.addListener(marker, 'click', function() {
    var infoWindow = new google.maps.InfoWindow({
        content: `
            <div dir="rtl" class="ts-marker" style="padding: 10px; border-radius: 8px; background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);">
                <h3 style="margin: 0; font-size: 18px; color: #537bb4;">${value.Auction_Name}</h3>
                <div class="ts-marker__title">
                    <p><b>نوع المزاد:</b> ${value.Auction_Type}</p>
                </div>
                <p><b>الاستخدام:</b> ${value.Property_Use}</p>
                <div class="ts-marker__title">
                    <p><b>المدينة:</b> ${value.City}</p>
                </div>
                <p><b>المساحة:</b> ${value.Area}</p>
                <div class="ts-marker__title">
                    <a href="${value.link}" target="_blank" style="color: #537bb4; text-decoration: underline;">More details</a>
                </div>
            </div>
        `
    });
    infoWindow.open(map, marker);
});

                } else {
                    console.error('Invalid coordinates for item ID:', value.id);
                }
            });
        },
        error: function(xhr, status, error) {
            console.error('Error fetching data:', error);
        }
    });
}
</script>
</head>
<!--PAGE TITLE ******************************************************************************************-->




<body onload="initialize()">
<form id="form1" runat="server">
    <div id="map_canvas" class="ts-full-screen d-flex flex-column"></div>
</form>

            
            <!-- RESULTS
            =========================================================================================================-->
            <div id="ts-results" class="ts-results__horizontal scrollbar-inner dragscroll">
                <div class="ts-results-wrapper"></div>
            </div>

        </div>
        <!--end full-screen-->

    </section>
    <!--end ts-hero-->

    <!--*********************************************************************************************************-->
    <!-- MAIN ***************************************************************************************************-->
    <!--*********************************************************************************************************-->
   
    <main id="ts-main">

        <!-- FEATURED PROPERTIES
        =============================================================================================================-->
        <section id="featured-properties" class="ts-block pt-5">
            <div class="container">

                <!--Title-->
                <div class="ts-title text-center">
                    <h2>Featured Properties</h2>
                </div>

                <div class="row">

                    <!--Item-->
                    <div class="col-sm-6 col-lg-4">

                        <div class="card ts-item ts-card ts-item__lg">

                            <!--Ribbon-->
                            <div class="ts-ribbon">
                                <i class="fa fa-thumbs-up"></i>
                            </div>

                            <!--Card Image-->
                            <a href="detail-01.html" class="card-img ts-item__image" data-bg-image="assets/img/img-item-thumb-01.jpg">
                                <div class="ts-item__info-badge">
                                    $350,000
                                </div>
                                <figure class="ts-item__info">
                                    <h4>Big Luxury Apartment</h4>
                                    <aside>
                                        <i class="fa fa-map-marker mr-2"></i>
                                        1350 Arbutus Drive
                                    </aside>
                                </figure>
                            </a>

                            <!--Card Body-->
                            <div class="card-body">
                                <div class="ts-description-lists">
                                    <dl>
                                        <dt>Area</dt>
                                        <dd>325m<sup>2</sup></dd>
                                    </dl>
                                    <dl>
                                        <dt>Bedrooms</dt>
                                        <dd>2</dd>
                                    </dl>
                                    <dl>
                                        <dt>Bathrooms</dt>
                                        <dd>1</dd>
                                    </dl>
                                </div>
                            </div>

                            <!--Card Footer-->
                            <a href="detail-01.html" class="card-footer">
                                <span class="ts-btn-arrow">Detail</span>
                            </a>

                        </div>
                        <!--end ts-item-->
                    </div>
                    <!--end Item col-md-4-->

                    <!--Item-->
                    <div class="col-sm-6 col-lg-4">

                        <div class="card ts-item ts-card ts-item__lg">

                            <!--Ribbon-->
                            <div class="ts-ribbon-corner">
                                <span>Updated</span>
                            </div>

                            <!--Card Image-->
                            <a href="detail-01.html" class="card-img ts-item__image" data-bg-image="assets/img/img-item-thumb-02.jpg">
                                <figure class="ts-item__info">
                                    <h4>Cozy Design Studio</h4>
                                    <aside>
                                        <i class="fa fa-map-marker mr-2"></i>
                                        4831 Worthington Drive
                                    </aside>
                                </figure>
                                <div class="ts-item__info-badge">$125,000</div>
                            </a>

                            <!--Card Body-->
                            <div class="card-body ts-item__body">
                                <div class="ts-description-lists">
                                    <dl>
                                        <dt>Area</dt>
                                        <dd>325m<sup>2</sup></dd>
                                    </dl>
                                    <dl>
                                        <dt>Bedrooms</dt>
                                        <dd>2</dd>
                                    </dl>
                                    <dl>
                                        <dt>Bathrooms</dt>
                                        <dd>1</dd>
                                    </dl>
                                </div>
                            </div>

                            <!--Card Footer-->
                            <a href="detail-01.html" class="card-footer">
                                <span class="ts-btn-arrow">Detail</span>
                            </a>

                        </div>
                        <!--end ts-item ts-card-->
                    </div>
                    <!--end Item col-md-4-->

                    <!--Item-->
                    <div class="col-sm-6 col-lg-4">

                        <div class="card ts-item ts-card ts-item__lg">

                            <!--Card Image-->
                            <a href="detail-01.html" class="card-img ts-item__image" data-bg-image="assets/img/img-item-thumb-03.jpg">
                                <figure class="ts-item__info">
                                    <h4>Family Villa</h4>
                                    <aside>
                                        <i class="fa fa-map-marker mr-2"></i>
                                        4127 Winding Way
                                    </aside>
                                </figure>
                                <div class="ts-item__info-badge">$45,900</div>
                            </a>

                            <!--Card Body-->
                            <div class="card-body ts-item__body">
                                <div class="ts-description-lists">
                                    <dl>
                                        <dt>Area</dt>
                                        <dd>325m<sup>2</sup></dd>
                                    </dl>
                                    <dl>
                                        <dt>Bedrooms</dt>
                                        <dd>2</dd>
                                    </dl>
                                    <dl>
                                        <dt>Bathrooms</dt>
                                        <dd>1</dd>
                                    </dl>
                                </div>
                            </div>

                            <!--Card Footer-->
                            <a href="detail-01.html" class="card-footer">
                                <span class="ts-btn-arrow">Detail</span>
                            </a>

                        </div>
                        <!--end ts-item ts-card-->
                    </div>
                    <!--end Item col-md-4-->

                </div>
                <!--end row-->

                <!--All properties button-->
                <div class="text-center mt-3">
                    <a href="listing-category-icons.html" class="btn btn-outline-dark ts-btn-border-muted">Show All Properties</a>
                </div>

            </div>
            <!--end container-->
        </section>

        
    </main>
    @include('partials.footer') <!-- Include the footer -->