<?php
$page = basename($_SERVER['PHP_SELF'], '.php');
?>
<header class="header">
    <nav class="navbar navbar-expand-xl navbar-dark stroke bg-transparent">
        <div class="container">
            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-center" id="navbarNav">
                <ul class="navbar-nav first-nav">
                    <li class="nav-item">
                        <a class="nav-link <?php if ($page == 'index') {
                                                echo 'active';
                                            } ?>" href="#overview-sec">Overview</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php if ($page == '#') {
                                                echo 'active';
                                            } ?>" href="#Maseter-plan-sec">Master Plan</a>
                    </li>
                    <!-- <li class="nav-item dropdown navdesktop">
                        <a class="nav-link <?php if ($page == '#') {
                                                echo 'active';
                                            } ?>" href="#">
                            Services <i class="fa fa-angle-down"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-navdesktop" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="#">Service 1</a></li>
                            <li><a class="dropdown-item" href="#">Service 2</a></li>
                            <li><a class="dropdown-item" href="#">Service 3</a></li>
                            <li><a class="dropdown-item" href="#">Service 4</a></li>
                        </ul>
                    </li> -->
                    <li class="nav-item">
                        <a class="nav-link <?php if ($page == '#') {
                                                echo 'active';
                                            } ?>" href="#Amenities-sec">
                            Amenities
                        </a>
                    </li>

                </ul>
                <a class="navbar-brand" href="index">
                    <img src="assets/images/logo.webp" />
                </a>
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link <?php if ($page == '#') {
                                                echo 'active';
                                            } ?>" href="#Gallery-sec">
                           Projects Pictures
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php if ($page == '#') {
                                                echo 'active';
                                            } ?>" href="#location-sec">
                            Location
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link <?php if ($page == '#') {
                                                echo 'active';
                                            } ?>" href="#contact-sec">
                            Contact
                        </a>
                    </li>
                </ul>
            </div>

        </div>
    </nav>
</header>

<!-- Modal -->
<div class="modal fade onload-popup" id="exampleModal" aria-hidden="true"
    aria-labelledby="exampleModalToggleLabel" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg model-sec">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-xl-12 col-lg-12 col-md-12">
                        <div class="model-onload">
                            <div class="d-block text-center align-items-center">
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="row align-items-center">
                                <div class="col-xl-6 col-lg-6 col-md-6">
                                    <div class="model-img">
                                        <img src="assets/images/model-img.webp" class="w-100"/>
                                    </div>
                                </div>
                                <div class="col-xl-6 col-lg-6 col-md-6">
                                    <span>Fill Out The Form To Download The Brochure</span>
                                    <form method="POST" action="signup.php" class="needs-validation form" novalidate>
                                <div class="row">
                                    <div class="col-xl-12 col-lg-12 col-md-12">
                                        <div class="mb-3">
                                            <input type="text" class="form-control model-input" placeholder="Enter Name"
                                                pattern="[A-Za-z ]+" name="name" required>
                                        </div>
                                        <div class="mb-3">
                                            <input type="email" class="form-control model-input"
                                                placeholder="Enter Email" name="email"
                                                pattern="[^\s@]+@[a-zA-Z]+[^0-9@]+\.[cC][oO][mM]$" required>
                                        </div>
                                        <div class="mb-3">
                                            <input type="number" class="form-control model-input"
                                                placeholder="Enter Contact No." name="phone"
                                                onkeypress="if(this.value.length==12) return false;" required>
                                        </div>
                                        <div class="mb-0">
                                            <button type="submit" class="btn-theme black-hover-bg mt-1">Download Brochure </button> 
                                        </div>
                                        <p class="statusMessage"></p>
                                    </div>
                                </div>
                            </form>
                                </div>
                                
                            </div>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- end -->