{% extends "layout.html" %}

{% set title = 'Add New Property' %}

{% block content %}

<div class="sec-pad bg-s-grey pb-3 steps-wrapper">
    <div class="container">
        <ul class="steps list-unstyled d-flex justify-content-between align-items-center nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item text-center">
                <a class="active d-block" id="main-tab" data-toggle="tab" href="#main-data" role="tab" aria-controls="main" aria-selected="true">البيانات الأساسية</a>
            </li>
            <li class="nav-item text-center">
                <a class="text-center d-block" id="location-tab" data-toggle="tab" href="#location" role="tab" aria-controls="location" aria-selected="false">الموقع</a>
            </li>
            <li class="nav-item text-center">
                <a class="text-center d-block" id="images-tab" data-toggle="tab" href="#images" role="tab" aria-controls="images" aria-selected="false">الصور</a>
            </li>
            <li class="nav-item text-center">
                <a class="text-center d-block" id="property-tab" data-toggle="tab" href="#property-dtails" role="tab" aria-controls="property" aria-selected="false">البيانات التفصيلية</a>
            </li>
            <li class="nav-item text-center">
                <a class="text-center d-block" id="contact-tab" data-toggle="tab" href="#contact-info" role="tab" aria-controls="contact" aria-selected="false">بيانات التواصل</a>
            </li>
        </ul>
    </div>
</div>

<div class="sec-pad pt-0 bg-s-grey">
    <div class="container">
        <div class="tab-content" id="myTabContent">
            <div class="tab-pane fade show active" id="main-data" role="tabpanel" aria-labelledby="main-tab">
                <div class="box">
                    <h3 class="m-0 mb-3 text-bold text-secondaryColor">البيانات الأساسية</h3>
                    <hr class="mb-4 mt-3">
                    <form action="">
                        <div class="row">
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="adTitle" class="mb-2 text-semibold">عنوان الأعلان</label>
                                    <input type="text" class="form-control" id="adTitle" placeholder="ادخل عنوان الأعلان">
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="propertySelection" class="mb-2 text-semibold">اضافة العقار الي</label>
                                    <div class="select-custom d-block mb-0">
                                        <select name="" id="propertySelection" class="form-control">
                                            <option disabled selected>أضف العقار الي</option>
                                            <option value="1">العروض العقارية</option>
                                            <option value="2">العروض العقارية</option>
                                            <option value="23">العروض العقارية</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="purpose" class="mb-2 text-semibold">الغرض</label>
                                    <div class="select-custom d-block mb-0">
                                        <select name="" id="purpose" class="form-control">
                                            <option disabled selected>اختار الغرض</option>
                                            <option value="1">بيع</option>
                                            <option value="2">شراء</option>
                                            <option value="2">تأجير</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="propertyType" class="mb-2 text-semibold">نوع العقار</label>
                                    <div class="select-custom d-block mb-0">
                                        <select name="" id="propertyType" class="form-control">
                                            <option disabled selected>اختار نوع العقار</option>
                                            <option value="1">فيلا</option>
                                            <option value="2">شقة</option>
                                            <option value="2">شاليه</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-4">
                                <div class="form-group">
                                    <label for="propertyName" class="mb-2 text-semibold">اسم العقار</label>
                                    <input type="text" class="form-control" id="propertyName" placeholder="ادخل اسم العقار">
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-content-center justify-content-between mt-4 pt-4 bt">
                            <div>
                                <a href="#" class="btn btn-cancel d-inline-block mr-2">الغاء</a>
                            </div>
                            <div>
                                <a href="#" class="btn btn-yellow d-inline-block mr-2"><i class="fa fa-save mr-2"></i>حفظ</a>
                                <a href="location.html" class="btn btn-primary d-inline-block">التالي<i class="fa fa-arrow-left ml-2"></i></a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="tab-pane fade" id="location" role="tabpanel" aria-labelledby="location-tab">
                <div class="box">
                    <h3 class="m-0 mb-3 text-bold text-secondaryColor">الموقع</h3>
                    <hr class="mb-4 mt-3">
                    <form action="">
                        <div class="row">
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="state" class="d-block text-bold mb-2">المحافظة</label>
                                    <div class="select-custom">
                                        <select name="" id="state" class="form-control">
                                            <option disabled selected>اختار المحافظة</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="23">23</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="city" class="d-block text-bold mb-2">المدينة</label>
                                    <div class="select-custom">
                                        <select name="" id="city" class="form-control">
                                            <option disabled selected>اختار المدينة</option>
                                            <option value="1">1</option>
                                            <option value="2">2</option>
                                            <option value="23">23</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="neighborhood" class="d-block text-bold mb-2">الحي</label>
                                    <input type="text" class="form-control" id="neighborhood" placeholder="ادخل الحي">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="street" class="d-block text-bold mb-2">الشارع</label>
                                    <input type="text" class="form-control" id="street" placeholder="ادخل الشارع">
                                </div>
                            </div>
                        </div>
                        <div class="mt-2">
                            <div class="checkbox-custom clearfix d-block mb-2">
                                <input type="checkbox" name="acceptTerms" value="acceptTerms" id="acceptTerms" class="form-checkbox float-left">
                                <label for="acceptTerms" class="float-left text-capitalize text-semibold">اظهار موقع العقار علي الخريطة</label>
                            </div>
                            <div><small class="text-bold">فضلا حدد موقع العقار علي الخريطة من خلال النقر علي الموقع المطلوب</small></div>
                        </div>
                        <div id="propertyLocation" class="mt-3"></div>
                        <div class="d-flex align-content-center justify-content-between mt-4 pt-4 bt">
                            <div>
                                <a href="main-data.html" class="btn btn-brand-outline d-inline-block mr-2"><i class="fa fa-arrow-right mr-2"></i>السابق</a>
                                <a href="#" class="btn btn-cancel d-inline-block">الغاء</a>
                            </div>
                            <div>
                                <a href="#" class="btn btn-yellow d-inline-block mr-2"><i class="fa fa-save mr-2"></i>حفظ</a>
                                <a href="images.html" class="btn btn-primary d-inline-block">التالي<i class="fa fa-arrow-left ml-2"></i></a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="tab-pane fade" id="images" role="tabpanel" aria-labelledby="images-tab">
                <div class="box">
                    <h3 class="m-0 mb-3 text-bold text-secondaryColor">الصور</h3>
                    <hr class="mb-4 mt-3">
                    <form action="">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="mainImage" class="d-block text-bold mb-2">اختر الصورة الأساسية للعقار</label>
                                    <input type="file"  id="mainImage"  accept="image/*" onchange="loadFile(event)"/>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label for="mainImage" class="d-block text-bold mb-2">ارفع باقي الصور</label>
                                    <input type="file"  id="gallery-images" multiple accept="image/*"/>
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="image-preview overflow-hidden mb-3"></div>
                            </div>
                            <div class="col-sm-6">
                                <div class="gallery-upload overflow-hidden mb-3"></div>
                            </div>
                        </div>
                        <div class="d-flex align-content-center justify-content-between mt-4 pt-4 bt">
                            <div>
                                <a href="location.html" class="btn btn-brand-outline d-inline-block mr-2"><i class="fa fa-arrow-right mr-2"></i>السابق</a>
                                <a href="#" class="btn btn-cancel d-inline-block">الغاء</a>
                            </div>
                            <div>
                                <a href="#" class="btn btn-yellow d-inline-block mr-2"><i class="fa fa-save mr-2"></i>حفظ</a>
                                <a href="property-details.html" class="btn btn-primary d-inline-block">التالي<i class="fa fa-arrow-left ml-2"></i></a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="tab-pane fade" id="property-dtails" role="tabpanel" aria-labelledby="property-tab">
                <div class="box">
                    <h3 class="m-0 mb-3 text-bold text-secondaryColor">البيانات التفصيلية</h3>
                    <hr class="mb-4 mt-3">
                    <form action="">
                        <div class="row">
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="spaceInMeter" class="d-block text-bold mb-2">المساحه بالمتر المربع</label>
                                    <input type="text" class="form-control" id="spaceInMeter" placeholder="ادخل المساحه بالمتر المربع">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="floorsNo" class="d-block text-bold mb-2">عدد الأدوار</label>
                                    <input type="text" class="form-control" id="floorsNo" placeholder="ادخل عدد الأدوار">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="apaNo" class="d-block text-bold mb-2">عدد الشقق</label>
                                    <input type="text" class="form-control" id="apaNo" placeholder="ادخل عدد الشقق">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="officeNo" class="d-block text-bold mb-2">عدد المكاتب</label>
                                    <input type="text" class="form-control" id="officeNo" placeholder="ادخل عدد المكاتب">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="number" class="d-block text-bold mb-2">عدد الوحدات</label>
                                    <input type="text" class="form-control" id="number" placeholder="ادخل عدد الوحدات">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="elecNo" class="d-block text-bold mb-2">عدد عدادات الكهرباء</label>
                                    <input type="text" class="form-control" id="elecNo" placeholder="ادخل عدد عدادات الكهرباء">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="n-view" class="d-block text-bold mb-2">الوجهة الشمالية</label>
                                    <input type="text" class="form-control" id="n-view" placeholder="ادخل الوجهة الشمالية">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="e-view" class="d-block text-bold mb-2">الوجهة الشرقية</label>
                                    <input type="text" class="form-control" id="e-view" placeholder="ادخل الوجهة الشرقية">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="w-view" class="d-block text-bold mb-2">الوجهة الغربية</label>
                                    <input type="text" class="form-control" id="w-view" placeholder="ادخل الوجهة الغربية">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="s-view" class="d-block text-bold mb-2">الوجهة الجنوبية</label>
                                    <input type="text" class="form-control" id="s-view" placeholder="ادخل الوجهة الجنوبية">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="propertyAge" class="d-block text-bold mb-2">عمر العقار</label>
                                    <input type="text" class="form-control" id="propertyAge" placeholder="ادخل عمر العقار">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="propertyIncome" class="d-block text-bold mb-2">الدخل من العقار</label>
                                    <input type="text" class="form-control" id="propertyIncome" placeholder="ادخل الدخل من العقار">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="feesPrice" class="d-block text-bold mb-2">سعر الرسوم</label>
                                    <input type="text" class="form-control" id="feesPrice" placeholder="ادخل سعر الرسوم">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="requestedPrice" class="d-block text-bold mb-2">السعر المطلوب</label>
                                    <input type="text" class="form-control" id="requestedPrice" placeholder="ادخل السعر المطلوب">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div style="margin-top: 35px">
                                    <div class="checkbox-custom clearfix d-block mb-2">
                                        <input type="checkbox" name="acceptTerms" value="acceptTerms" id="acceptTerms" class="form-checkbox float-left">
                                        <label for="acceptTerms" class="float-left text-capitalize text-semibold">اخفاء السعر</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-content-center justify-content-between mt-4 pt-4 bt">
                            <div>
                                <a href="images.html" class="btn btn-brand-outline d-inline-block mr-2"><i class="fa fa-arrow-right mr-2"></i>السابق</a>
                                <a href="#" class="btn btn-cancel d-inline-block">الغاء</a>
                            </div>
                            <div>
                                <a href="#" class="btn btn-yellow d-inline-block mr-2"><i class="fa fa-save mr-2"></i>حفظ</a>
                                <a href="contact-info.html" class="btn btn-primary d-inline-block">التالي<i class="fa fa-arrow-left ml-2"></i></a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="tab-pane fade" id="contact-info" role="tabpanel" aria-labelledby="contact-tab">
                <div class="box">
                    <h3 class="m-0 mb-3 text-bold text-secondaryColor">بيانات التواصل</h3>
                    <hr class="mb-4 mt-3">
                    <form action="">
                        <div class="row">
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="phoneNumberr" class="mb-2 text-semibold d-block">رقم الجوال</label>
                                    <input type="text" class="form-control" id="phoneNumberr" placeholder="">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div style="margin-top: 35px">
                                    <div class="checkbox-custom clearfix d-block mb-2">
                                        <input type="checkbox" name="acceptTerms" value="acceptTerms" id="hidePhone" class="form-checkbox float-left">
                                        <label for="hidePhone" class="float-left text-capitalize text-semibold">اخفاء رقم الجوال</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div class="form-group">
                                    <label for="whatsapp" class="mb-2 text-semibold">رقم الواتس اب</label>
                                    <input type="text" class="form-control phoneNumber" id="whatsapp" placeholder="">
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div style="margin-top: 35px">
                                    <div class="checkbox-custom clearfix d-block mb-2">
                                        <input type="checkbox" name="acceptTerms" value="acceptTerms" id="hideWhatsapp" class="form-checkbox float-left">
                                        <label for="hideWhatsapp" class="float-left text-capitalize text-semibold">اخفاء الواتس اب</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12 col-md-8 col-lg-6">
                                <div class="form-group">
                                    <label for="" class="mb-2 text-semibold d-block">الوقت المفضل للتواصل</label>
                                    <div class="row">
                                        <div class="col-sm-6">
                                            <label for="timeFrom" class="mb-2 text-semibold mr-2 d-inline-block">من</label>
                                            <input type="text" class="form-control w-75 d-inline-block" id="timeFrom" placeholder="">
                                        </div>
                                        <div class="col-sm-6">
                                            <label for="timeTo" class="mb-2 text-semibold mr-2 d-inline-block">الي</label>
                                            <input type="text" class="form-control w-75 d-inline-block" id="timeTo" placeholder="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-md-6 col-lg-4">
                                <div style="margin-top: 35px">
                                    <div class="checkbox-custom clearfix d-block mb-2">
                                        <input type="checkbox" name="acceptTerms" value="acceptTerms" id="allowMsgs" class="form-checkbox float-left">
                                        <label for="allowMsgs" class="float-left text-capitalize text-semibold">السماح للرسائل</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="d-flex align-content-center justify-content-between mt-4 pt-4 bt">
                            <div>
                                <a href="property-details.html" class="btn btn-brand-outline d-inline-block mr-2"><i class="fa fa-arrow-right mr-2"></i>السابق</a>
                                <a href="#" class="btn btn-cancel d-inline-block">الغاء</a>
                            </div>
                            <div>
                                <a href="#" class="btn btn-yellow d-inline-block mr-2"><i class="fa fa-save mr-2"></i>حفظ</a>
                                <a href="contact-info.html" class="btn btn-primary d-inline-block">التالي<i class="fa fa-arrow-left ml-2"></i></a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock %}
{% block JS %}
    <script>
        var timepicker = new TimePicker('#timeFrom', {
            lang: 'pt',
            theme: 'yellow'
        });
        timepicker.on('change', function(evt) {
            var value = (evt.hour || '00') + ':' + (evt.minute || '00');
            evt.element.value = value;
        });

        var timepickerr = new TimePicker('#timeTo', {
            lang: 'pt',
            theme: 'yellow'
        });
        timepickerr.on('change', function(evt) {
            var value = (evt.hour || '00') + ':' + (evt.minute || '00');
            evt.element.value = value;
        });
    </script>
{% endblock %}