Properties - ElMohandsen





<link rel="stylesheet" href="/static/css/real-estate-modern.css">
<link rel="stylesheet" href="/static/css/navbar-modern.css">
<link rel="stylesheet" href="/static/css/modern-filters.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">



<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Cairo:wght@400;600;700&display=swap" rel="stylesheet">



<!-- Modern Navigation Bar -->
<nav class="main-nav">
    <div class="nav-container">
        <div class="nav-logo">
            
                <img src="/static/images/Real_Estate_Logo___Premium_Vector.jpg" alt="Logo">
            
            <a href="/" class="nav-logo__text">
                ElMohandsen
            </a>
        </div>
        
        <button class="nav-toggle" aria-label="Toggle Navigation Menu">
            <i class="fas fa-bars"></i>
        </button>
        
        <div class="nav-links">
            <button class="nav-close" aria-label="Close Navigation Menu">
                <i class="fas fa-times"></i>
            </button>
            
            <ul class="nav-links__list">
                <li class="nav-links__item">
                    <a href="/" class="nav-links__link" data-en="Home" data-ar="الرئيسية">Home</a>
                </li>
                <li class="nav-links__item">
                    <a href="/about" class="nav-links__link" data-en="About Us" data-ar="من نحن">About Us</a>
                </li>
                <li class="nav-links__item">
                    <a href="#contact" class="nav-links__link" data-en="Contact Us" data-ar="اتصل بنا">Contact Us</a>
                </li>

                <li class="nav-links__item">
                    <a href="/login" class="nav-links__link" data-en="Login" data-ar="تسجيل دخول">Login</a>
                </li>
            </ul>
            
            <div class="nav-language">
                <i class="fas fa-globe nav-language__icon"></i>
                <span class="nav-language__text">العربية</span>
            </div>
        </div>
    </div>
</nav>

<!-- Navigation Overlay (for mobile) -->
<div class="nav-overlay"></div>

<!-- Language Switcher (old one - will be hidden with CSS) -->
<div class="language-switcher" style="display: none;">
    <div class="language-switcher__icon">
        <i class="fas fa-globe"></i>
    </div>
    <span class="language-switcher__text">العربية</span>
</div>

<!-- Hero Banner -->
<section class="hero" id="hero-banner" data-banner-image="https://www.nawy.com/_next/static/media/landing-new-background.5e086e5d.webp" data-fallback-image="https://source.unsplash.com/random/1600x900/?city,realestate">
    <div class="hero__overlay"></div>
    
    <div class="container">
        <div class="hero__content">
            <h1 class="hero__title" data-en="Find Your Dream Property" data-ar="ابحث عن عقارك المثالي">Find Your Dream Property</h1>
            <p class="hero__subtitle" data-en="Discover the perfect home, office, or investment opportunity" data-ar="اكتشف المنزل أو المكتب أو فرصة الاستثمار المثالية">
                Discover the perfect home, office, or investment opportunity
            </p>
        </div>
    </div>
    
    <!-- Modern Filter Bar -->
    <div class="filter-container">
        <div class="container">
            <div class="filter-bar">
<form id="property-filters" class="filter-bar__form" method="get" action="/">
    <!-- Governorate / Location Filter -->
    <div class="filter-item">
        <i class="fas fa-map-marker-alt filter-item__icon"></i>
        <select id="governorate" name="governorate" class="filter-item__select">
            <option value="" selected>All Locations</option>
            
                <option value="cario" >cario</option>
            
                <option value="" ></option>
            
                <option value="aa" >aa</option>
            
                <option value="menofia" >menofia</option>
            
        </select>
        <i class="fas fa-chevron-down filter-item__arrow"></i>
    </div>
    
    <!-- Property Type Filter -->
    <div class="filter-item">
        <i class="fas fa-home filter-item__icon"></i>
        <select id="property-type" name="type" class="filter-item__select">
            <option value="" selected>All Types</option>
            
                <option value="Apartment" >Apartment</option>
            
                <option value="Villa" >Villa</option>
            
                <option value="aa" >aa</option>
            
                <option value="" ></option>
            
                <option value="Townhouse" >Townhouse</option>
            
                <option value="Twin Villa" >Twin Villa</option>
            
                <option value="building" >building</option>
            
                <option value="ZH3M106" >ZH3M106</option>
            
                <option value="ZH3M104" >ZH3M104</option>
            
                <option value="ZH3M105" >ZH3M105</option>
            
                <option value="ZH3M96" >ZH3M96</option>
            
                <option value="ZH3M103" >ZH3M103</option>
            
                <option value="ZH3M112" >ZH3M112</option>
            
                <option value="ZH4C75" >ZH4C75</option>
            
                <option value="ZH4C76" >ZH4C76</option>
            
                <option value="ZH4C86" >ZH4C86</option>
            
                <option value="ZH4C88" >ZH4C88</option>
            
                <option value="ZH-C1-65" >ZH-C1-65</option>
            
                <option value="ZH4C73" >ZH4C73</option>
            
                <option value="ZH4C83" >ZH4C83</option>
            
                <option value="ZH4C87" >ZH4C87</option>
            
                <option value="ZH4C74" >ZH4C74</option>
            
                <option value="ZH4C77" >ZH4C77</option>
            
                <option value="ZH4C80" >ZH4C80</option>
            
                <option value="ZH-C1-64" >ZH-C1-64</option>
            
                <option value="ZH1C112" >ZH1C112</option>
            
                <option value="ZH1C128" >ZH1C128</option>
            
                <option value="ZH1C67" >ZH1C67</option>
            
                <option value="ZH1C71" >ZH1C71</option>
            
                <option value="ZH1C99" >ZH1C99</option>
            
                <option value="ZH1C108" >ZH1C108</option>
            
                <option value="ZH1C117" >ZH1C117</option>
            
                <option value="ZH1C129" >ZH1C129</option>
            
                <option value="ZH1C140" >ZH1C140</option>
            
                <option value="ZH1C20" >ZH1C20</option>
            
                <option value="ZH1C62" >ZH1C62</option>
            
                <option value="ZH1C72" >ZH1C72</option>
            
                <option value="ZH1C98" >ZH1C98</option>
            
                <option value="ZH1C113" >ZH1C113</option>
            
                <option value="ZH1C114" >ZH1C114</option>
            
                <option value="ZH1C119" >ZH1C119</option>
            
                <option value="ZH1C123" >ZH1C123</option>
            
                <option value="ZH1C127" >ZH1C127</option>
            
                <option value="ZH1C135" >ZH1C135</option>
            
                <option value="ZH1C137" >ZH1C137</option>
            
                <option value="ZH1C142" >ZH1C142</option>
            
                <option value="ZH1C156" >ZH1C156</option>
            
                <option value="ZH1C68" >ZH1C68</option>
            
                <option value="ZH1C69" >ZH1C69</option>
            
                <option value="ZH1C70" >ZH1C70</option>
            
                <option value="ZH1C81" >ZH1C81</option>
            
                <option value="ZH1C82" >ZH1C82</option>
            
                <option value="ZH1C83" >ZH1C83</option>
            
                <option value="ZH1C109" >ZH1C109</option>
            
                <option value="ZH1C111" >ZH1C111</option>
            
                <option value="ZH1C118" >ZH1C118</option>
            
                <option value="ZH1C120" >ZH1C120</option>
            
                <option value="ZH1C122" >ZH1C122</option>
            
                <option value="ZH1C124" >ZH1C124</option>
            
                <option value="ZH1C126" >ZH1C126</option>
            
                <option value="ZH1C130" >ZH1C130</option>
            
                <option value="ZH1C136" >ZH1C136</option>
            
                <option value="ZH1C138" >ZH1C138</option>
            
                <option value="ZH1C141" >ZH1C141</option>
            
                <option value="ZH1C110" >ZH1C110</option>
            
                <option value="ZH1C121" >ZH1C121</option>
            
                <option value="ZH1C125" >ZH1C125</option>
            
                <option value="ZH-M1-61" >ZH-M1-61</option>
            
                <option value="ZH3M69" >ZH3M69</option>
            
                <option value="ZH3M73" >ZH3M73</option>
            
                <option value="ZH3M70" >ZH3M70</option>
            
                <option value="ZH3M76" >ZH3M76</option>
            
                <option value="ZH3M68" >ZH3M68</option>
            
                <option value="ZH3M71" >ZH3M71</option>
            
                <option value="ZH3M67" >ZH3M67</option>
            
                <option value="ZH3M72" >ZH3M72</option>
            
                <option value="ZH3M75" >ZH3M75</option>
            
                <option value="ZH3M246B" >ZH3M246B</option>
            
                <option value="ZH3M244B" >ZH3M244B</option>
            
                <option value="ZH3M246A" >ZH3M246A</option>
            
                <option value="ZH3M247C" >ZH3M247C</option>
            
                <option value="ZH3M248B" >ZH3M248B</option>
            
                <option value="ZH3M248C" >ZH3M248C</option>
            
                <option value="ZH3M251A" >ZH3M251A</option>
            
                <option value="ZH3M251D" >ZH3M251D</option>
            
                <option value="ZH3M245D" >ZH3M245D</option>
            
                <option value="ZH3M248D" >ZH3M248D</option>
            
                <option value="ZH3M251B" >ZH3M251B</option>
            
                <option value="ZH3M247A" >ZH3M247A</option>
            
                <option value="ZH3M248A" >ZH3M248A</option>
            
                <option value="ZH3M250A" >ZH3M250A</option>
            
                <option value="ZH3M244A" >ZH3M244A</option>
            
                <option value="ZH3M244C" >ZH3M244C</option>
            
                <option value="ZH3M245B" >ZH3M245B</option>
            
                <option value="ZH3M245C" >ZH3M245C</option>
            
                <option value="ZH3M247B" >ZH3M247B</option>
            
                <option value="ZH3M247D" >ZH3M247D</option>
            
                <option value="ZH3M250D" >ZH3M250D</option>
            
                <option value="ZH3M252A" >ZH3M252A</option>
            
                <option value="ZH3M252D" >ZH3M252D</option>
            
                <option value="ZH4C170B" >ZH4C170B</option>
            
                <option value="ZH4C170A" >ZH4C170A</option>
            
                <option value="ZH1C296A" >ZH1C296A</option>
            
                <option value="ZH1C235B" >ZH1C235B</option>
            
                <option value="ZH1C297A" >ZH1C297A</option>
            
                <option value="ZH1C297B" >ZH1C297B</option>
            
                <option value="ZH1C296B" >ZH1C296B</option>
            
                <option value="ZH3M229B" >ZH3M229B</option>
            
                <option value="ZH3M232A" >ZH3M232A</option>
            
                <option value="ZH3M235B" >ZH3M235B</option>
            
                <option value="ZH3M230A" >ZH3M230A</option>
            
                <option value="ZH3M233B" >ZH3M233B</option>
            
                <option value="ZH3M185A" >ZH3M185A</option>
            
                <option value="ZH3M186B" >ZH3M186B</option>
            
                <option value="ZH3M228B" >ZH3M228B</option>
            
                <option value="ZH3M231A" >ZH3M231A</option>
            
                <option value="ZH3M233A" >ZH3M233A</option>
            
                <option value="ZH3M235A" >ZH3M235A</option>
            
                <option value="ZH3M232B" >ZH3M232B</option>
            
                <option value="ZH3M230B" >ZH3M230B</option>
            
                <option value="ZH3M231B" >ZH3M231B</option>
            
                <option value="ZH3M234A" >ZH3M234A</option>
            
                <option value="ZH3M234B" >ZH3M234B</option>
            
                <option value="ZH4C107B" >ZH4C107B</option>
            
                <option value="ZH1C332B" >ZH1C332B</option>
            
                <option value="ZH1C333B" >ZH1C333B</option>
            
                <option value="ZH1C331A" >ZH1C331A</option>
            
                <option value="ZH1C331D" >ZH1C331D</option>
            
                <option value="ZH1C333C" >ZH1C333C</option>
            
                <option value="ZH1C332C" >ZH1C332C</option>
            
                <option value="ZH1C333A" >ZH1C333A</option>
            
                <option value="ZH1C331B" >ZH1C331B</option>
            
                <option value="ZH1C332A" >ZH1C332A</option>
            
                <option value="ZH1C333D" >ZH1C333D</option>
            
                <option value="ZH1C331C" >ZH1C331C</option>
            
                <option value="ZH1C332D" >ZH1C332D</option>
            
                <option value="ZH-M1-223-A" >ZH-M1-223-A</option>
            
                <option value="ZH-M1-219-A" >ZH-M1-219-A</option>
            
                <option value="ZH-M1-223-B" >ZH-M1-223-B</option>
            
                <option value="ZH-M1-224-A" >ZH-M1-224-A</option>
            
                <option value="ZH-M1-219-B" >ZH-M1-219-B</option>
            
                <option value="ZH3M198B" >ZH3M198B</option>
            
                <option value="ZH3M202B" >ZH3M202B</option>
            
                <option value="ZH3M204B" >ZH3M204B</option>
            
                <option value="ZH3M212A" >ZH3M212A</option>
            
                <option value="ZH3M214A" >ZH3M214A</option>
            
                <option value="ZH3M215A" >ZH3M215A</option>
            
                <option value="ZH3M216B" >ZH3M216B</option>
            
                <option value="ZH3M220A" >ZH3M220A</option>
            
                <option value="ZH3M220B" >ZH3M220B</option>
            
                <option value="ZH3M197A" >ZH3M197A</option>
            
                <option value="ZH3M199A" >ZH3M199A</option>
            
                <option value="ZH3M200A" >ZH3M200A</option>
            
                <option value="ZH3M204A" >ZH3M204A</option>
            
                <option value="ZH3M206A" >ZH3M206A</option>
            
                <option value="ZH3M206B" >ZH3M206B</option>
            
                <option value="ZH3M212B" >ZH3M212B</option>
            
                <option value="ZH3M217B" >ZH3M217B</option>
            
                <option value="ZH3M226A" >ZH3M226A</option>
            
                <option value="ZH3M227B" >ZH3M227B</option>
            
                <option value="ZH3M201B" >ZH3M201B</option>
            
                <option value="ZH3M205A" >ZH3M205A</option>
            
                <option value="ZH3M208A" >ZH3M208A</option>
            
                <option value="ZH3M211A" >ZH3M211A</option>
            
                <option value="ZH3M216A" >ZH3M216A</option>
            
                <option value="ZH3M222B" >ZH3M222B</option>
            
                <option value="ZH3M197B" >ZH3M197B</option>
            
                <option value="ZH3M198A" >ZH3M198A</option>
            
                <option value="ZH3M200B" >ZH3M200B</option>
            
                <option value="ZH3M201A" >ZH3M201A</option>
            
                <option value="ZH3M205B" >ZH3M205B</option>
            
                <option value="ZH3M207A" >ZH3M207A</option>
            
                <option value="ZH3M209B" >ZH3M209B</option>
            
                <option value="ZH3M213B" >ZH3M213B</option>
            
                <option value="ZH3M215B" >ZH3M215B</option>
            
                <option value="ZH3M221B" >ZH3M221B</option>
            
                <option value="ZH3M222A" >ZH3M222A</option>
            
                <option value="ZH3M226B" >ZH3M226B</option>
            
                <option value="ZH3M203A" >ZH3M203A</option>
            
                <option value="ZH3M203B" >ZH3M203B</option>
            
                <option value="ZH3M208B" >ZH3M208B</option>
            
                <option value="ZH3M221A" >ZH3M221A</option>
            
                <option value="ZH-M1-218-A" >ZH-M1-218-A</option>
            
                <option value="ZH-M1-224-B" >ZH-M1-224-B</option>
            
                <option value="ZH-M1-253-A" >ZH-M1-253-A</option>
            
                <option value="ZH3M241B" >ZH3M241B</option>
            
                <option value="ZH3M242A" >ZH3M242A</option>
            
                <option value="ZH3M242C" >ZH3M242C</option>
            
                <option value="ZH3M243B" >ZH3M243B</option>
            
                <option value="ZH3M243C" >ZH3M243C</option>
            
                <option value="ZH3M257A" >ZH3M257A</option>
            
                <option value="ZH3M258C" >ZH3M258C</option>
            
                <option value="ZH3M241C" >ZH3M241C</option>
            
                <option value="ZH3M256B" >ZH3M256B</option>
            
                <option value="ZH3M257D" >ZH3M257D</option>
            
                <option value="ZH3M241A" >ZH3M241A</option>
            
                <option value="ZH3M243A" >ZH3M243A</option>
            
                <option value="ZH3M255D" >ZH3M255D</option>
            
                <option value="ZH3M239A" >ZH3M239A</option>
            
                <option value="ZH3M241D" >ZH3M241D</option>
            
                <option value="ZH3M256C" >ZH3M256C</option>
            
                <option value="ZH3M257C" >ZH3M257C</option>
            
                <option value="ZH3M258A" >ZH3M258A</option>
            
                <option value="ZH3M258D" >ZH3M258D</option>
            
                <option value="ZH3M255A" >ZH3M255A</option>
            
                <option value="ZH3M256A" >ZH3M256A</option>
            
                <option value="ZH3M256D" >ZH3M256D</option>
            
                <option value="ZH3M257B" >ZH3M257B</option>
            
                <option value="ZH3M258B" >ZH3M258B</option>
            
                <option value="ZH-M1-254-D" >ZH-M1-254-D</option>
            
                <option value="ZH4C143B" >ZH4C143B</option>
            
                <option value="ZH4C149A" >ZH4C149A</option>
            
                <option value="ZH-C1-221-A" >ZH-C1-221-A</option>
            
                <option value="ZH-C1-225-A" >ZH-C1-225-A</option>
            
                <option value="ZH4C143A" >ZH4C143A</option>
            
                <option value="ZH4C144B" >ZH4C144B</option>
            
                <option value="ZH4C209A" >ZH4C209A</option>
            
                <option value="ZH4C210B" >ZH4C210B</option>
            
                <option value="ZH4C209B" >ZH4C209B</option>
            
                <option value="ZH1C313A" >ZH1C313A</option>
            
                <option value="ZH1C314B" >ZH1C314B</option>
            
                <option value="ZH1C317B" >ZH1C317B</option>
            
                <option value="ZH1C318B" >ZH1C318B</option>
            
                <option value="ZH1C328A" >ZH1C328A</option>
            
                <option value="ZH1C206B" >ZH1C206B</option>
            
                <option value="ZH-C1-221-B" >ZH-C1-221-B</option>
            
                <option value="ZH-C1-223-A" >ZH-C1-223-A</option>
            
                <option value="ZH-C1-225-B" >ZH-C1-225-B</option>
            
                <option value="ZH-C1-224-A" >ZH-C1-224-A</option>
            
                <option value="ZH-C1-264-A" >ZH-C1-264-A</option>
            
                <option value="ZH-C1-222-A" >ZH-C1-222-A</option>
            
                <option value="ZH1C319B" >ZH1C319B</option>
            
                <option value="ZH1C321A" >ZH1C321A</option>
            
                <option value="ZH1C322B" >ZH1C322B</option>
            
                <option value="ZH1C327A" >ZH1C327A</option>
            
                <option value="ZH1C314A" >ZH1C314A</option>
            
                <option value="ZH1C321B" >ZH1C321B</option>
            
                <option value="ZH1C322A" >ZH1C322A</option>
            
                <option value="ZH1C329B" >ZH1C329B</option>
            
                <option value="ZH1C315B" >ZH1C315B</option>
            
                <option value="ZH1C320A" >ZH1C320A</option>
            
                <option value="ZH1C325B" >ZH1C325B</option>
            
                <option value="ZH1C327B" >ZH1C327B</option>
            
                <option value="ZH1C313B" >ZH1C313B</option>
            
                <option value="ZH1C317A" >ZH1C317A</option>
            
                <option value="ZH1C318A" >ZH1C318A</option>
            
                <option value="ZH1C320B" >ZH1C320B</option>
            
                <option value="ZH1C323A" >ZH1C323A</option>
            
                <option value="ZH1C323B" >ZH1C323B</option>
            
                <option value="ZH1C329A" >ZH1C329A</option>
            
                <option value="ZH-C1-226-B" >ZH-C1-226-B</option>
            
        </select>
        <i class="fas fa-chevron-down filter-item__arrow"></i>
    </div>
    
    <!-- Developer / Company Filter -->
    <div class="filter-item">
        <i class="fas fa-building filter-item__icon"></i>
        <select id="company" name="company" class="filter-item__select">
            <option value="" selected>All Developers</option>
            
                <option value="company1" >company1</option>
            
                <option value="second company" >second company</option>
            
                <option value="secon company" >secon company</option>
            
                <option value="newcompany" >newcompany</option>
            
                <option value="third company" >third company</option>
            
                <option value="sohila" >sohila</option>
            
                <option value="Power Boosting Egypt" >Power Boosting Egypt</option>
            
        </select>
        <i class="fas fa-chevron-down filter-item__arrow"></i>
    </div>
    
    <!-- Search Button -->
    <div class="filter-search">
        <button type="submit" id="filter-search-btn" class="filter-search__button" aria-label="Search properties">
            <i class="fas fa-search filter-search__icon"></i>
        </button>
    </div>
</form>

        
        <!-- Active filters section -->
        <div class="active-filters" style="display: none;"></div>
            </div>
        </div>
    </div>
</section>

<!-- Properties Section -->
<section id="properties" class="section">
    <div class="container">
        <div class="section__header">
            <h2 class="section__title" data-en="Available Properties" data-ar="العقارات المتاحة">Available Properties</h2>
            
            <div class="d-flex align-items-center flex-wrap">
                <div class="view-options">
                    <button class="view-option view-option--grid view-option--active">
                        <i class="fas fa-th"></i>
                    </button>
                    <button class="view-option view-option--list">
                        <i class="fas fa-list"></i>
                    </button>
                </div>
            </div>
        </div>

        
        <div class="property-grid">
            
            <div class="property-card" 
                 data-property-type="twin villa" 
                 data-location="" 
                 data-bedrooms="None" 
                 data-bathrooms="None" 
                 data-price="None" 
                 data-area="681.00">
                 
                <div class="property-card__image-container">
                    
                        <div class="bg-secondary text-white d-flex align-items-center justify-content-center" style="height: 100%;">
                            <i class="fas fa-home fa-3x"></i>
                        </div>
                    
                    
                    <div class="property-card__badge" data-en="Twin Villa" data-ar="Twin Villa">Twin Villa</div>
                    <button class="property-card__favorite" data-property-id="223">
                        <i class="far fa-heart"></i>
                    </button>
                </div>
                
                <div class="property-card__content">
                    <h3 class="property-card__title" data-en="ZH3M230B" data-ar="ZH3M230B">ZH3M230B</h3>
                    
                    <div class="property-card__location">
                        <i class="fas fa-map-marker-alt property-card__location-icon"></i>
                        <span data-en=", " data-ar="، ">
                            , 
                        </span>
                    </div>
                    
                    <div class="property-card__price" 
                         data-en="None EGP" 
                         data-ar="None EGP">
                        None EGP
                    </div>
                    
                    <div class="property-card__features">
                        <div class="property-card__feature">
                            <i class="fas fa-bed property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-bath property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-ruler-combined property-card__feature-icon"></i>
                            <span data-en="681.00 m²" data-ar="681.00 م²">681.00 m²</span>
                        </div>
                    </div>
                    
                    <div class="property-card__description">
                        No description available.
                    </div>
                    
                    <div class="property-card__actions">
                    <a href="/property/223" class="btn btn--primary" data-en="View Details" data-ar="عرض التفاصيل">View Details</a>

                    </div>
                </div>
            </div>
            
            <div class="property-card" 
                 data-property-type="twin villa" 
                 data-location="" 
                 data-bedrooms="None" 
                 data-bathrooms="None" 
                 data-price="None" 
                 data-area="454.00">
                 
                <div class="property-card__image-container">
                    
                        <div class="bg-secondary text-white d-flex align-items-center justify-content-center" style="height: 100%;">
                            <i class="fas fa-home fa-3x"></i>
                        </div>
                    
                    
                    <div class="property-card__badge" data-en="Twin Villa" data-ar="Twin Villa">Twin Villa</div>
                    <button class="property-card__favorite" data-property-id="224">
                        <i class="far fa-heart"></i>
                    </button>
                </div>
                
                <div class="property-card__content">
                    <h3 class="property-card__title" data-en="ZH3M231B" data-ar="ZH3M231B">ZH3M231B</h3>
                    
                    <div class="property-card__location">
                        <i class="fas fa-map-marker-alt property-card__location-icon"></i>
                        <span data-en=", " data-ar="، ">
                            , 
                        </span>
                    </div>
                    
                    <div class="property-card__price" 
                         data-en="None EGP" 
                         data-ar="None EGP">
                        None EGP
                    </div>
                    
                    <div class="property-card__features">
                        <div class="property-card__feature">
                            <i class="fas fa-bed property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-bath property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-ruler-combined property-card__feature-icon"></i>
                            <span data-en="454.00 m²" data-ar="454.00 م²">454.00 m²</span>
                        </div>
                    </div>
                    
                    <div class="property-card__description">
                        No description available.
                    </div>
                    
                    <div class="property-card__actions">
                    <a href="/property/224" class="btn btn--primary" data-en="View Details" data-ar="عرض التفاصيل">View Details</a>

                    </div>
                </div>
            </div>
            
            <div class="property-card" 
                 data-property-type="twin villa" 
                 data-location="" 
                 data-bedrooms="None" 
                 data-bathrooms="None" 
                 data-price="None" 
                 data-area="469.00">
                 
                <div class="property-card__image-container">
                    
                        <div class="bg-secondary text-white d-flex align-items-center justify-content-center" style="height: 100%;">
                            <i class="fas fa-home fa-3x"></i>
                        </div>
                    
                    
                    <div class="property-card__badge" data-en="Twin Villa" data-ar="Twin Villa">Twin Villa</div>
                    <button class="property-card__favorite" data-property-id="225">
                        <i class="far fa-heart"></i>
                    </button>
                </div>
                
                <div class="property-card__content">
                    <h3 class="property-card__title" data-en="ZH3M234A" data-ar="ZH3M234A">ZH3M234A</h3>
                    
                    <div class="property-card__location">
                        <i class="fas fa-map-marker-alt property-card__location-icon"></i>
                        <span data-en=", " data-ar="، ">
                            , 
                        </span>
                    </div>
                    
                    <div class="property-card__price" 
                         data-en="None EGP" 
                         data-ar="None EGP">
                        None EGP
                    </div>
                    
                    <div class="property-card__features">
                        <div class="property-card__feature">
                            <i class="fas fa-bed property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-bath property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-ruler-combined property-card__feature-icon"></i>
                            <span data-en="469.00 m²" data-ar="469.00 م²">469.00 m²</span>
                        </div>
                    </div>
                    
                    <div class="property-card__description">
                        No description available.
                    </div>
                    
                    <div class="property-card__actions">
                    <a href="/property/225" class="btn btn--primary" data-en="View Details" data-ar="عرض التفاصيل">View Details</a>

                    </div>
                </div>
            </div>
            
            <div class="property-card" 
                 data-property-type="twin villa" 
                 data-location="" 
                 data-bedrooms="None" 
                 data-bathrooms="None" 
                 data-price="None" 
                 data-area="452.00">
                 
                <div class="property-card__image-container">
                    
                        <div class="bg-secondary text-white d-flex align-items-center justify-content-center" style="height: 100%;">
                            <i class="fas fa-home fa-3x"></i>
                        </div>
                    
                    
                    <div class="property-card__badge" data-en="Twin Villa" data-ar="Twin Villa">Twin Villa</div>
                    <button class="property-card__favorite" data-property-id="226">
                        <i class="far fa-heart"></i>
                    </button>
                </div>
                
                <div class="property-card__content">
                    <h3 class="property-card__title" data-en="ZH3M234B" data-ar="ZH3M234B">ZH3M234B</h3>
                    
                    <div class="property-card__location">
                        <i class="fas fa-map-marker-alt property-card__location-icon"></i>
                        <span data-en=", " data-ar="، ">
                            , 
                        </span>
                    </div>
                    
                    <div class="property-card__price" 
                         data-en="None EGP" 
                         data-ar="None EGP">
                        None EGP
                    </div>
                    
                    <div class="property-card__features">
                        <div class="property-card__feature">
                            <i class="fas fa-bed property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-bath property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-ruler-combined property-card__feature-icon"></i>
                            <span data-en="452.00 m²" data-ar="452.00 م²">452.00 m²</span>
                        </div>
                    </div>
                    
                    <div class="property-card__description">
                        No description available.
                    </div>
                    
                    <div class="property-card__actions">
                    <a href="/property/226" class="btn btn--primary" data-en="View Details" data-ar="عرض التفاصيل">View Details</a>

                    </div>
                </div>
            </div>
            
            <div class="property-card" 
                 data-property-type="townhouse" 
                 data-location="" 
                 data-bedrooms="None" 
                 data-bathrooms="None" 
                 data-price="None" 
                 data-area="365.00">
                 
                <div class="property-card__image-container">
                    
                        <div class="bg-secondary text-white d-flex align-items-center justify-content-center" style="height: 100%;">
                            <i class="fas fa-home fa-3x"></i>
                        </div>
                    
                    
                    <div class="property-card__badge" data-en="Townhouse" data-ar="Townhouse">Townhouse</div>
                    <button class="property-card__favorite" data-property-id="227">
                        <i class="far fa-heart"></i>
                    </button>
                </div>
                
                <div class="property-card__content">
                    <h3 class="property-card__title" data-en="ZH4C107B" data-ar="ZH4C107B">ZH4C107B</h3>
                    
                    <div class="property-card__location">
                        <i class="fas fa-map-marker-alt property-card__location-icon"></i>
                        <span data-en=", " data-ar="، ">
                            , 
                        </span>
                    </div>
                    
                    <div class="property-card__price" 
                         data-en="None EGP" 
                         data-ar="None EGP">
                        None EGP
                    </div>
                    
                    <div class="property-card__features">
                        <div class="property-card__feature">
                            <i class="fas fa-bed property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-bath property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-ruler-combined property-card__feature-icon"></i>
                            <span data-en="365.00 m²" data-ar="365.00 م²">365.00 m²</span>
                        </div>
                    </div>
                    
                    <div class="property-card__description">
                        No description available.
                    </div>
                    
                    <div class="property-card__actions">
                    <a href="/property/227" class="btn btn--primary" data-en="View Details" data-ar="عرض التفاصيل">View Details</a>

                    </div>
                </div>
            </div>
            
            <div class="property-card" 
                 data-property-type="townhouse" 
                 data-location="" 
                 data-bedrooms="None" 
                 data-bathrooms="None" 
                 data-price="None" 
                 data-area="394.00">
                 
                <div class="property-card__image-container">
                    
                        <div class="bg-secondary text-white d-flex align-items-center justify-content-center" style="height: 100%;">
                            <i class="fas fa-home fa-3x"></i>
                        </div>
                    
                    
                    <div class="property-card__badge" data-en="Townhouse" data-ar="Townhouse">Townhouse</div>
                    <button class="property-card__favorite" data-property-id="228">
                        <i class="far fa-heart"></i>
                    </button>
                </div>
                
                <div class="property-card__content">
                    <h3 class="property-card__title" data-en="ZH1C332B" data-ar="ZH1C332B">ZH1C332B</h3>
                    
                    <div class="property-card__location">
                        <i class="fas fa-map-marker-alt property-card__location-icon"></i>
                        <span data-en=", " data-ar="، ">
                            , 
                        </span>
                    </div>
                    
                    <div class="property-card__price" 
                         data-en="None EGP" 
                         data-ar="None EGP">
                        None EGP
                    </div>
                    
                    <div class="property-card__features">
                        <div class="property-card__feature">
                            <i class="fas fa-bed property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-bath property-card__feature-icon"></i>
                            <span>None</span>
                        </div>
                        
                        <div class="property-card__feature">
                            <i class="fas fa-ruler-combined property-card__feature-icon"></i>
                            <span data-en="394.00 m²" data-ar="394.00 م²">394.00 m²</span>
                        </div>
                    </div>
                    
                    <div class="property-card__description">
                        No description available.
                    </div>
                    
                    <div class="property-card__actions">
                    <a href="/property/228" class="btn btn--primary" data-en="View Details" data-ar="عرض التفاصيل">View Details</a>

                    </div>
                </div>
            </div>
            
        </div>
        
        <!-- Dynamic Pagination -->
        
        <div class="pagination">
            <!-- Previous -->
            
                <a href="/?page=27" class="pagination__item">
                    <i class="fas fa-chevron-left"></i>
                </a>
            

            <!-- Page numbers with ellipsis -->
            
                
                    
                        <a href="/?page=1" class="pagination__item">1</a>
                    
                
            
                
                    <span class="pagination__item">…</span>
                
            
                
                    
                        <a href="/?page=26" class="pagination__item">26</a>
                    
                
            
                
                    
                        <a href="/?page=27" class="pagination__item">27</a>
                    
                
            
                
                    
                        <a href="#" class="pagination__item pagination__item--active">28</a>
                    
                
            
                
                    
                        <a href="/?page=29" class="pagination__item">29</a>
                    
                
            
                
                    
                        <a href="/?page=30" class="pagination__item">30</a>
                    
                
            
                
                    <span class="pagination__item">…</span>
                
            
                
                    
                        <a href="/?page=295" class="pagination__item">295</a>
                    
                
            

            <!-- Next -->
            
                <a href="/?page=29" class="pagination__item">
                    <i class="fas fa-chevron-right"></i>
                </a>
            
        </div>
        
        
        
    </div>



</section>


<div class="modal fade" id="addAppointmentModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      
      <div class="modal-header">
        <h5 class="modal-title">اختر فئة العقار</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      
      <form method="POST" action="/appointments/book">
        <div class="modal-body">
          
          <!-- Hidden field for property id -->
          <input type="hidden" name="property_id" id="modalPropertyId">

          <div class="mb-3">
            <label for="appointmentDate" class="form-label">الأنواع المفضلة</label>
            <input type="date" class="form-control" name="appointmentDate" id="appointmentDate" required>
          </div>

          <div class="mb-3">
            <label for="appointmentTime" class="form-label">الأنواع المفضلة</label>
            <select class="form-control" name="appointmentTime" id="appointmentTime" required>
              <option value="">اختر النوع</option>
              <option value="morning">صباحاً (9:00 - 12:00)</option>
              <option value="afternoon">ظهراً (12:00 - 15:00)</option>
              <option value="evening">مساءً (15:00 - 18:00)</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="appointmentType" class="form-label">المواعيد</label>
            <select class="form-control" name="appointmentType" id="appointmentType" required>
              <option value="viewing">معاينة شخصية</option>
              <option value="virtual">جولة افتراضية</option>
              <option value="consultation">استشارة</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="modalName" class="form-label">اسم المالك</label>
            <input type="text" class="form-control" name="name" id="modalName" required>
          </div>

          <div class="mb-3">
            <label for="modalPhone" class="form-label">أرقام الاتصال</label>
            <input type="tel" class="form-control" name="phone" id="modalPhone" required>
          </div>

          <div class="mb-3">
            <label for="modalEmail" class="form-label">العنوان</label>
            <input type="email" class="form-control" name="email" id="modalEmail" required>
          </div>

          <div class="mb-3">
            <label for="modalMessage" class="form-label">رسالة (اختيارية)</label>
            <textarea class="form-control" name="message" id="modalMessage"></textarea>
          </div>
          
        </div>
        
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
          <button type="submit" class="btn btn-primary">حجز موعد</button>
        </div>
      </form>
    </div>
  </div>
</div>






<script src="/static/js/real-estate-modern.js"></script>
<script src="/static/js/navbar-modern.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
  function openBookAppointmentModal(propertyId) {
    // Set the hidden input value
    document.getElementById('modalPropertyId').value = propertyId;

    // Show the Bootstrap modal
    var myModal = new bootstrap.Modal(document.getElementById('bookAppointmentModal'));
    myModal.show();
  }

document.addEventListener('DOMContentLoaded', function() {
    // --- Appointment date minimum = today ---
    const today = new Date().toISOString().split('T')[0];
    document.querySelectorAll('input[type="date"]').forEach(input => {
        input.min = today;
    });

    // --- Apply filters button ---
    const applyFiltersBtn = document.getElementById('apply-filters');
    const filterForm = document.querySelector('.filters__form');
    
    if (applyFiltersBtn && filterForm) {
        applyFiltersBtn.addEventListener('click', () => {
            const formData = new FormData(filterForm);
            const filters = {};
            for (const [key, value] of formData.entries()) {
                if (value && value !== '') {
                    filters[key] = value;
                }
            }
            applyFilters(filters);
            displayActiveFilters(filters);
        });
    }

    // --- Reset filters button ---
    const resetFiltersBtn = document.getElementById('reset-filters');
    if (resetFiltersBtn && filterForm) {
        resetFiltersBtn.addEventListener('click', () => {
            filterForm.reset();
            document.querySelectorAll('.property-card').forEach(card => {
                card.style.display = '';
            });
            const activeFiltersContainer = document.querySelector('.active-filters');
            if (activeFiltersContainer) {
                activeFiltersContainer.innerHTML = '';
                activeFiltersContainer.style.display = 'none';
            }
        });
    }

    // --- Sort properties ---
    const sortSelect = document.getElementById('sort-properties');
    if (sortSelect) {
        sortSelect.addEventListener('change', () => {
            const sortValue = sortSelect.value;
            const propertyGrid = document.querySelector('.property-grid');
            const propertyCards = Array.from(document.querySelectorAll('.property-card'));
            propertyCards.sort((a, b) => {
                if (sortValue === 'price-asc') {
                    return parseFloat(a.dataset.price) - parseFloat(b.dataset.price);
                } else if (sortValue === 'price-desc') {
                    return parseFloat(b.dataset.price) - parseFloat(a.dataset.price);
                } else if (sortValue === 'area-asc') {
                    return parseFloat(a.dataset.area) - parseFloat(b.dataset.area);
                } else if (sortValue === 'area-desc') {
                    return parseFloat(b.dataset.area) - parseFloat(a.dataset.area);
                } else {
                    return 0;
                }
            });
            propertyCards.forEach(card => propertyGrid.appendChild(card));
        });
    }

    // --- Open appointment modal + set propertyId ---
    document.querySelectorAll('.btn-book-appointment').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const propertyId = this.dataset.propertyId;
            const modal = document.querySelector('.appointment-modal');
            modal.querySelector('[name="propertyId"]').value = propertyId;
            modal.classList.add('modal--active');
            document.body.style.overflow = 'hidden';
        });
    });

    // --- Close modal (× or Cancel button) ---
    document.querySelectorAll('.modal__close, .modal__close-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const modal = document.querySelector('.appointment-modal');
            modal.classList.remove('modal--active');
            document.body.style.overflow = '';
        });
    });

    // --- Submit appointment form ---
    const appointmentForm = document.querySelector('.appointment-form');
    if (appointmentForm) {
        appointmentForm.addEventListener('submit', function(e) {
            if (!validateForm(appointmentForm)) {
                e.preventDefault(); // Stop submission if invalid
            }
            // If valid, it will submit normally to Flask endpoint
        });
    }
});

// --- Apply filters ---
function applyFilters(filters) {
    const propertyCards = document.querySelectorAll('.property-card');
    propertyCards.forEach(card => {
        let shouldShow = true;
        for (const [key, value] of Object.entries(filters)) {
            if (key === 'location' && card.dataset.location !== value) {
                shouldShow = false; break;
            } else if (key === 'propertyType' && card.dataset.propertyType !== value) {
                shouldShow = false; break;
            } else if (key === 'bedrooms' && card.dataset.bedrooms !== value) {
                shouldShow = false; break;
            } else if (key === 'bathrooms' && card.dataset.bathrooms !== value) {
                shouldShow = false; break;
            } else if (key === 'priceMax' && parseFloat(card.dataset.price) > parseFloat(value)) {
                shouldShow = false; break;
            } else if (key === 'minArea' && parseFloat(card.dataset.area) < parseFloat(value)) {
                shouldShow = false; break;
            }
        }
        if (shouldShow) {
            card.style.display = '';
            card.classList.add('animate-fade-in');
            setTimeout(() => card.classList.remove('animate-fade-in'), 500);
        } else {
            card.style.display = 'none';
        }
    });
    const visibleCards = Array.from(propertyCards).filter(card => card.style.display !== 'none');
    const noResultsMsg = document.querySelector('.no-results');
    if (visibleCards.length === 0 && noResultsMsg) {
        noResultsMsg.style.display = 'block';
    } else if (noResultsMsg) {
        noResultsMsg.style.display = 'none';
    }
}

// --- Display active filters ---
function displayActiveFilters(filters) {
    const activeFiltersContainer = document.querySelector('.active-filters');
    if (!activeFiltersContainer) return;
    activeFiltersContainer.innerHTML = '';
    for (const [key, value] of Object.entries(filters)) {
        if (value && value !== '') {
            const chip = document.createElement('div');
            chip.className = 'filter-chip';
            let filterLabel = key.replace(/([A-Z])/g, ' $1').toLowerCase();
            filterLabel = filterLabel.charAt(0).toUpperCase() + filterLabel.slice(1);
            let displayValue = value;
            if (key === 'priceMax') {
                displayValue = `Max ${value} EGP`;
            } else if (key === 'minArea') {
                displayValue = `Min ${value} m²`;
            }
            chip.innerHTML = `
                <span>${filterLabel}: ${displayValue}</span>
                <span class="filter-chip__close" data-filter="${key}">
                    <i class="fas fa-times"></i>
                </span>
            `;
            activeFiltersContainer.appendChild(chip);
            chip.querySelector('.filter-chip__close').addEventListener('click', (e) => {
                const filterKey = e.currentTarget.dataset.filter;
                const filterInput = document.querySelector(`[name="\${filterKey}"]`);
                if (filterInput) {
                    filterInput.value = '';
                    document.getElementById('apply-filters').click();
                }
            });
        }
    }
    activeFiltersContainer.style.display = Object.keys(filters).length > 0 ? 'flex' : 'none';
}
</script>

<script src="/static/js/banner-modern.js"></script>