{% extends "layout.html" %}

{% set title = 'Homepage' %}

{% block content %}

<section class="map-locator">
    <div class="map-container">
        <div class="container position-relative">
            <div class="search-box">
                <div class="d-md-flex justify-content-between align-content-center">
                    <form action="" class="d-flex justify-content-between align-content-center">
                        <input type="text" class="mr-3" placeholder="ابحث">
                        <input type="submit" class="btn" value="ابحث">
                    </form>
                    <span class="text-bold pr-3 pl-3 mt-3 mb-3 m-md-auto text-center text-md-left d-block d-md-inline-block">أو</span>
                    <a href="#" class="btn btn-yellow"><i class="fa fa-filter mr-2"></i>أبحث بالتصنيف</a>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">

            </div>
        </div>
        <div id="map"></div>
    </div>
</section>

<section class="sec-pad bg-s-grey">
    <div class="container">
        <div class="section-title text-center">
            <h2 class="mb-4 text-bold">أحدث العروض</h2>
        </div>
        <div class="offers-slider">
            {% for i in range(0, 4) -%}
                <div class="box offer-item m-3">
                    <a href="property.html">
                        <div class="offer-img-mask">
                            <div class="offer-img cover" style="background-image: url('./assets/images/gallery/01.jpg')"></div>
                            <div class="offer-tag offer-rent text-bold">للأيجار</div>
                        </div>
                    </a>
                    <div class="offer-details mt-2">
                        <a href="property.html">
                            <h3 class="text-bold mb-2">فيلا للبيع في شمال الرياض</h3>
                        </a>
                        <div class="location mb-2">
                            <i class="fa fa-map-marker-alt mr-2"></i><span class="text-bold"> جدة, حي الياسمين</span>
                        </div>
                        <div class="offer-info d-flex justify-content-start align-content-center mb-2 overflow-hidden">
                            <div class="property-details d-flex justify-content-between align-content-center">
                                <div class="prop mr-3">
                                    <img src="./assets/images/icons/size.svg" alt="Dimensions" class="mr-1 d-inline-block">
                                    <span class="text-bold">١٧٩م</span>
                                </div>
                                <div class="prop mr-3">
                                    <img src="./assets/images/icons/bathtub.svg" alt="Bathtub" class="mr-1 d-inline-block">
                                    <span class="text-bold">٢</span>
                                </div>
                                <div class="prop">
                                    <img src="./assets/images/icons/bed.svg" alt="Bedroom" class="mr-1 d-inline-block">
                                    <span class="text-bold">٣</span>
                                </div>
                            </div>
                            <div class="property-price text-bold text-center">٢٠٠٠ ريال</div>
                        </div>
                        <div class="offer-footer d-flex justify-content-between align-content-center">
                            <a href="#" class="text-bold"><img src="./assets/images/icons/compare.svg" alt="" class="mr-2 d-inline-block">اضف الي المقارنة</a>
                            <a href="#" class="text-bold"><i class="far fa-star mr-2" ></i>اضف  الي المفضلة</a>
                        </div>
                    </div>
                </div>
            {%- endfor %}
        </div>
    </div>
</section>

<section class="sec-pad cover download" style="background-image: url('./assets/images/download-app.jpg')">
    <div class="container">
        <div class="row">
            <div class="col-sm-8">
                <div class="download-content">
                    <img src="./assets/images/app-icon.png" alt="Download icon" class="app-icon">
                    <h2 class="text-bold">حمل تطبيق دور علي جوالك الأن</h2>
                    <p class="text-semibold">وتمتع بجميع خدمات دور مجانا</p>
                    <div class="store">
                        <a href="#"><img src="./assets/images/playstore.png" alt="" class="mr-2"></a>
                        <a href="#"><img src="./assets/images/appstore.png" alt=""></a>
                    </div>
                </div>
            </div>
            <div class="col-sm-4 m-auto d-none d-sm-block">
                <img src="./assets/images/iphone.png" alt="">
            </div>
        </div>
    </div>
</section>

<section class="sec-pad bg-s-grey">
    <div class="container">
        <div class="section-title text-center">
            <h2 class="mb-4 text-bold">خدماتنا</h2>
        </div>
        <div class="services">
            <div class="row">
                <div class="col-md-3 col-sm-6">
                    <div class="box service text-center mt-3">
                        <div class="service-icon mb-2">
                            <img src="./assets/images/icons/chat.svg" alt="">
                        </div>
                        <div class="service-title mb-3">
                            <h3 class="text-bold">الوساطة العقارية</h3>
                        </div>
                        <a href="#" class="text-bold">ابدأ الوساطة <i class="fas fa-angle-double-left ml-2"></i></a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="box service text-center mt-3">
                        <div class="service-icon mb-2">
                            <img src="./assets/images/icons/house.svg" alt="">
                        </div>
                        <div class="service-title mb-3">
                            <h3 class="text-bold">ابحث عن عقارك</h3>
                        </div>
                        <a href="#" class="text-bold">ابدأ البحث <i class="fas fa-angle-double-left ml-2"></i></a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="box service text-center mt-3">
                        <div class="service-icon mb-2">
                            <img src="./assets/images/icons/loan.svg" alt="">
                        </div>
                        <div class="service-title mb-3">
                            <h3 class="text-bold">اعلن عن عقارك</h3>
                        </div>
                        <a href="#" class="text-bold">أعلن الأن <i class="fas fa-angle-double-left ml-2"></i></a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="box service text-center mt-3">
                        <div class="service-icon mb-2">
                            <img src="./assets/images/icons/apartment.svg" alt="">
                        </div>
                        <div class="service-title mb-3">
                            <h3 class="text-bold">ادارة العقارات</h3>
                        </div>
                        <a href="#" class="text-bold">ابدأ الأن <i class="fas fa-angle-double-left ml-2"></i></a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="box service text-center mt-3">
                        <div class="service-icon mb-2">
                            <img src="./assets/images/icons/edit.svg" alt="">
                        </div>
                        <div class="service-title mb-3">
                            <h3 class="text-bold">نصائح عقارية</h3>
                        </div>
                        <a href="#" class="text-bold">احصل عليها <i class="fas fa-angle-double-left ml-2"></i></a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="box service text-center mt-3">
                        <div class="service-icon mb-2">
                            <img src="./assets/images/icons/newspaper.svg" alt="">
                        </div>
                        <div class="service-title mb-3">
                            <h3 class="text-bold">نشرة أخبار العقارات</h3>
                        </div>
                        <a href="#" class="text-bold">أشترك الأن <i class="fas fa-angle-double-left ml-2"></i></a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="box service text-center mt-3">
                        <div class="service-icon mb-2">
                            <img src="./assets/images/icons/bar-graph.svg" alt="">
                        </div>
                        <div class="service-title mb-3">
                            <h3 class="text-bold">التقارير العقارية</h3>
                        </div>
                        <a href="#" class="text-bold">أنشاء تقاريرك <i class="fas fa-angle-double-left ml-2"></i></a>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="box service text-center mt-3">
                        <div class="service-icon mb-2">
                            <img src="./assets/images/icons/review.svg" alt="">
                        </div>
                        <div class="service-title mb-3">
                            <h3 class="text-bold">التقييم</h3>
                        </div>
                        <a href="#" class="text-bold"> قيم الأن <i class="fas fa-angle-double-left ml-2"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="sec-pad cover reviews" style="background-image: url('./assets/images/review-img.jpg');background-attachment: fixed;">
    <div class="container">
        <div class="section-title text-center">
            <h2 class="mb-4 pb-4 text-bold">اراء المستخدمين</h2>
        </div>
        <div class="reviews-slider">
            {% for i in range(0, 4) -%}
                <div class="review-item text-center m-4">
                    <div class="reviewer-img m-auto">
                        <img src="./assets/images/reviewer.jpg" alt="">
                    </div>
                    <div class="review-info mt-2">
                        <h4 class="text-bold">مختار علي</h4>
                        <p class="text-center m-1">مصمم ومطور مواقع انترنت</p>
                        <blockquote class="m-0">
                            موقع مفيد جدا وقد افادني في كيفيه ادارة عقاري وتسهيل عملية البحث
                        </blockquote>
                    </div>
                </div>
            {%- endfor %}
        </div>
    </div>
</section>

<section class="sec-pad bg-s-grey">
    <div class="container">
        <div class="section-title text-center">
            <h2 class="mb-4 pb-4 text-bold">كيف تستفيد من دور</h2>
        </div>
        <div class="how-it-works">
            <div class="row">
                <div class="col-md-4 col-sm-12">
                    <div class="box how mt-3">
                        <div class="how-img mb-2">
                            <img src="./assets/images/icons/search-engine.svg" alt="">
                        </div>
                        <div class="how-content">
                            <h3 class="text-bold mb-2">ابحث عن عقارك</h3>
                            <p class="text-semibold mb-0">
                                بأختيار المدينة التي تريد السكن بها ثم تحديد المنطقة او الحي داخل المدينة ليتم اظهار كل العقارات المعروضة للبيع او الايجار داخل المدينة والحي المطلوب
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="box how mt-3">
                        <div class="how-img mb-2">
                            <img src="./assets/images/icons/house-1.svg" alt="">
                        </div>
                        <div class="how-content">
                            <h3 class="text-bold mb-2">قم بتحديد مواصفات العقار</h3>
                            <p class="text-semibold mb-0">
                                بأختيار المدينة التي تريد السكن بها ثم تحديد المنطقة او الحي داخل المدينة ليتم اظهار كل العقارات المعروضة للبيع او الايجار داخل المدينة والحي المطلوب
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="box how mt-3">
                        <div class="how-img mb-2">
                            <img src="./assets/images/icons/home-2.svg" alt="">
                        </div>
                        <div class="how-content">
                            <h3 class="text-bold mb-2">قم بأختيار العقار</h3>
                            <p class="text-semibold mb-0">
                                بأختيار المدينة التي تريد السكن بها ثم تحديد المنطقة او الحي داخل المدينة ليتم اظهار كل العقارات المعروضة للبيع او الايجار داخل المدينة والحي المطلوب
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


{% endblock content %}
{% block JS %}

<script>
    function initMap() {
        var map,
            markers = [
                ['Saudi Arabia, City Name', 25.8372164, 43.4344467, "./assets/images/marker.png"],
                ['Saudi Arabia, City Name', 23.8765277, 41.0844523, "./assets/images/marker.png"],
                ['Saudi Arabia, City Name', 24.4710078, 39.4774756, "./assets/images/marker.png"]
            ];

        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 24.0499066, lng: 42.4992422},
            zoom: 6,
            disableDefaultUI: true,
            styles: [
                {
                    "featureType": "administrative",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#444444"
                        }
                    ]
                },
                {
                    "featureType": "landscape",
                    "elementType": "all",
                    "stylers": [
                        {
                            "color": "#f2f2f2"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "all",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "all",
                    "stylers": [
                        {
                            "saturation": -100
                        },
                        {
                            "lightness": 45
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "all",
                    "stylers": [
                        {
                            "visibility": "simplified"
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "transit",
                    "elementType": "all",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "all",
                    "stylers": [
                        {
                            "color": "#46bcec"
                        },
                        {
                            "visibility": "on"
                        }
                    ]
                }
            ]
        });
        const contentString =
            `<div class="offer-item pt-3 pl-3">
                    <a href="#">
                        <div class="offer-img cover" style="background-image: url('./assets/images/gallery/01.jpg');height: 100px"></div>
                    </a>
                    <div class="offer-details mt-2">
                        <a href="#">
                            <h3 class="text-bold mb-2">فيلا للبيع في شمال الرياض</h3>
                        </a>
                        <div class="location mb-2">
                            <i class="fa fa-map-marker-alt mr-2"></i><span class="text-bold"> جدة, حي الياسمين</span>
                        </div>
                    </div>
                </div>`;

        const infowindow = new google.maps.InfoWindow({
            content: contentString,
        });

        // Loop through our array of markers & place each one on the map
        for( i = 0; i < markers.length; i++ ) {
            var lat = markers[i][1],
                lng = markers[i][2],
                pin = markers[i][3];

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: map,
                icon: pin,
                title: markers[i][0]
            });
        }
        marker.addListener("click", () => {
            infowindow.open(map, marker);
        });
    }
</script>

{% endblock %}