<?php include('include/header.php'); 
include('admin/config.php');

$page_type='air';

$sqlTB=mysqli_query($conn,"select * from tbl_banner where page_type='".$page_type."' and position='T'");
$rowTB=mysqli_fetch_object($sqlTB);

$sqlMB=mysqli_query($conn,"select * from tbl_banner where page_type='".$page_type."' and position='M'");
$rowMB=mysqli_fetch_object($sqlMB);

$sqlBB=mysqli_query($conn,"select * from tbl_banner where page_type='".$page_type."' and position='B'");
$rowBB=mysqli_fetch_object($sqlBB);


$sqlAm=mysqli_query($conn,"SELECT id, category, title, image, page_type FROM tbl_amenities_pic WHERE page_type='".$page_type."' order by category, 1 desc");


$sqlSL1=mysqli_query($conn,"SELECT id, title, image FROM tbl_slider WHERE page_type='".$page_type."' and position='T' order by 1 desc");

$sqlSL2=mysqli_query($conn,"SELECT id, title, image FROM tbl_slider WHERE page_type='".$page_type."' and position='M' order by 1 desc");

$sqlSL3=mysqli_query($conn,"SELECT id, title, image FROM tbl_slider WHERE page_type='".$page_type."' and position='B' order by 1 desc");



?>
   

<section class="earth-sec-1">
     <div class="img-1">
        <img src="admin/upload_image/<?=$rowTB->image;?>" alt="Banner" data-aos="fade-up" data-fancybox="my_img">
        <p data-aos="fade-up" data-aos-duration="2000"><?=$rowTB->title;?></p>
     </div>
 </section>


 <div class="earth-items-container">
    <svg  width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
        <style type="text/css">
            .st0{fill:#404041;}
            .st1{fill:#E7BBAB;}
            .st22{fill:#535353;}
            .st33{fill:#535353;}
        </style>
        <rect y="0" class="st0" width="1920" height="1080"/>
        
        <g class="cloud-2">
            <path class="st22" d="M208,778.7l-25.2-56.5l-24.6,56.5h-18.1l39.4-89.2h6l40.7,89.2H208z"/>
            <path class="st22" d="M286.4,778.7l-25.2-56.5l-24.6,56.5h-18.1l39.4-89.2h6l40.7,89.2H286.4z"/>
        </g>
        <g class="cloud-3">
            <path class="st22" d="M485.7,1078L447,991.1l-37.8,86.9h-27.8L442,940.9h9.2l62.5,137.1H485.7z"/>
            <path class="st22" d="M606.2,1078l-38.8-86.9l-37.8,86.9h-27.8l60.6-137.1h9.2l62.5,137.1H606.2z"/>
            <path class="st22" d="M726.6,1078l-38.8-86.9L650,1078h-27.8l60.6-137.1h9.2l62.5,137.1H726.6z"/>
            <path class="st22" d="M847,1078l-38.8-86.9l-37.8,86.9h-27.8l60.6-137.1h9.2l62.5,137.1H847z"/>
            <path class="st22" d="M967.4,1078l-38.8-86.9l-37.8,86.9h-27.8l60.6-137.1h9.2l62.5,137.1H967.4z"/>
        </g>
        <g class="cloud-5">
            <path class="st22" d="M1354.1,147l-16-35.9l-15.6,35.9H1311l25-56.7h3.8l25.8,56.7H1354.1z"/>
            <path class="st22" d="M1403.9,147l-16-35.9l-15.6,35.9h-11.5l25-56.7h3.8l25.8,56.7H1403.9z"/>
            <path class="st22" d="M1453.6,147l-16-35.9L1422,147h-11.5l25-56.7h3.8l25.8,56.7H1453.6z"/>
            <path class="st22" d="M1503.4,147l-16-35.9l-15.6,35.9h-11.5l25-56.7h3.8l25.8,56.7H1503.4z"/>
            <path class="st22" d="M1553.2,147l-16-35.9l-15.6,35.9H1510l25-56.7h3.8l25.8,56.7H1553.2z"/>
        </g>
        <g class="cloud-6">
            <path class="st33" d="M1291.1,885.3l-23.8-53.3l-23.2,53.3h-17l37.2-84.1h5.7l38.4,84.1H1291.1z"/>
            <path class="st33" d="M1365,885.3l-23.8-53.3l-23.2,53.3h-17l37.2-84.1h5.7l38.4,84.1H1365z"/>
            <path class="st33" d="M1438.9,885.3l-23.8-53.3l-23.2,53.3h-17l37.2-84.1h5.7l38.4,84.1H1438.9z"/>
            <path class="st33" d="M1512.7,885.3l-23.8-53.3l-23.2,53.3h-17l37.2-84.1h5.7l38.4,84.1H1512.7z"/>
            <path class="st33" d="M1586.6,885.3l-23.8-53.3l-23.2,53.3h-17l37.2-84.1h5.7l38.4,84.1H1586.6z"/>
        </g>
    </svg>

    <div class="content">
        <h1 data-aos="fade-up">Air</h1>
        <p data-aos="fade-up">TERRACE AMENITIES</p>
        <div class="items" data-aos="fade-up">
          <?php 
            while($rowAm=mysqli_fetch_array($sqlAm)){?>
                <div>
                    <img src="admin/upload_image/<?=$rowAm['image'];?>" alt="amenities">
                    <span><?=$rowAm['title'];?></span>
                </div>         
            <?php } ?>        
        
        </div>
    </div>

 </div>

 <div class="full-img-section">
    <div class="img">
        <img src="admin/upload_image/<?=$rowMB->image;?>" alt="Banner" data-fancybox="ig">
        <div class="big-a" data-aos="fade-left">
         <img src="./images/bigA.png" alt="">
        </div>
     </div>
     <span><?=$rowMB->title;?></span>
 </div>

 <section class="earth-mid-section">
    <div class="mid-image owl-carousel" data-aos="fade-up">
        <?php 
            while($rowSL1=mysqli_fetch_array($sqlSL1)){?>
               <div class="item">
                <a href="admin/upload_image/<?=$rowSL1['image'];?>" data-fancybox="image">
                  <img src="admin/upload_image/<?=$rowSL1['image'];?>" alt="slider">
                </a>
                <span><?=$rowSL1['title'];?></span>   
             </div>      
        <?php } ?>    
     </div>

     <div class="parellel-imgs">
        <?php 
            while($rowSL2=mysqli_fetch_array($sqlSL2)){?>
               <div data-aos="fade-up">
                <a href="admin/upload_image/<?=$rowSL2['image'];?>" data-fancybox="img" data-caption="<?=$rowSL2['title'];?>">
                  <img src="admin/upload_image/<?=$rowSL2['image'];?>" alt="slider">
                </a>
                <span><?=$rowSL2['title'];?></span>   
             </div>      
        <?php } ?> 
     </div>

     <div class="full-img" data-aos="fade-up">
         <a href="admin/upload_image/<?=$rowBB->image;?>" data-fancybox="imgs" data-caption="<?=$rowBB->title;?>">
          <img src="admin/upload_image/<?=$rowBB->image;?>" alt="Banner" >
        </a>
        <span><?=$rowBB->title;?></span>
     </div>

     <div class="parellel-imgs-2">
        <?php $i=1;
            while($rowSL3=mysqli_fetch_array($sqlSL3)){
                $class_hdn='';
                
                if($i>3)
                {
                    $class_hdn='image-hidden';
                }
                ?>
               <div data-aos="fade-up" class="<?=$class_hdn;?>">
                <a href="admin/upload_image/<?=$rowSL3['image'];?>" data-fancybox="my-imgs" data-caption="<?=$rowSL3['title'];?>">
                  <img src="admin/upload_image/<?=$rowSL3['image'];?>" alt="slider">
                </a>
                <span><?=$rowSL3['title'];?></span>   
             </div>      
        <?php  $i++;} ?>    
     </div>
     <div class="btn-container">
         <button id="viewMoreBtn">View More <i class="fa-solid fa-greater-than"></i></button>
     </div>

    
     <div class="earth-icons">
        <img class='one cloud-1' src="./images/cloud.png" alt="">
        <img class='two cloud-2' src="./images/cloud.png" alt="">
        <img class='two cloud-3' src="./images/cloud.png" alt="">
        <img class='two cloud-4' src="./images/cloud.png" alt="">
     </div>
 </section>

 <!---Enquiry Button-->
 <button class="enquire-btn" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
    <div>
       <img src="./images/inquiry.png"/>
    </div>
    <span>Enquire Now</span>
 </button>

 
 <!-- Modal for Download Brochure-->
 <section class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog " style="max-width: 80%; margin: 5% auto;">
      <div class="modal-content">
        <div class="modal-header p-0" style="z-index: 2;">
            <button type="button" class="btn-close p-3" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <div class="blue-form">
                <h1>For More Enquiry</h1>
                <p>Feel free to get in touch with us</p>
               <form id="enquiry_form">
                   <div class="field">
                       <input type="text" name="efname" id="efname" placeholder="FIRST NAME" class="d-block" required>
                       <input type="text" name="elname" id="elname" placeholder="LAST NAME" class="d-block" required>
                   </div>
                   <div class="field">
                       <input type="text" name="ephone" id="ephone" placeholder="PHONE NUMBER" class="d-block" onkeypress='return event.charCode >= 48 && event.charCode <= 57'   required>
                       <input type="email" name="eemail" id="eemail" placeholder="EMAIL" class="d-block" required>
                   </div>
                   <div class="msg-box">
                       <textarea name="emsg" id="emsg" cols="30" rows="6" placeholder="MESSAGE" required></textarea>
                   </div>
                   <div class="last-line">
                      <button type="submit" style="z-index: 10"><span class="spinner-border text-secondary loader1" style="display:none;"></span> <span>Submit Now</span><i class="fa-solid fa-greater-than"></i></button>
                   </div>
                   <p id="product_message1"></p>
               </form>
           </div>
        </div>
      </div>
    </div>
  </section>

 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/assets/owl.carousel.min.css">

    <!----===============FancyBox's CDN=======================-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css">
    <!--===========Custom js============-->
    <script src="./js/menu.js"></script>

    <!--===========BOOTSTRAP 5 script link================-->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    
    <script src="./js/tatvaSlider.js"></script>

    <script src="./js/menuSvgSlider.js"></script>
             
    <!----AOS SCRIPT link-->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

    <script>

        AOS.init({
            duration:1500
        })

    </script>

<script>
    const items=document.querySelectorAll(".menu-list .svg");
        let currentIndex = 0;

        function showNextItem() {
            
            items[currentIndex].classList.add('hidden');
            
            currentIndex = (currentIndex + 1) % items.length;
            
            items[currentIndex].classList.remove('hidden');
        }

        // Initial display
        showNextItem();

        // Change item every 3 seconds (3000 milliseconds)
        setInterval(showNextItem, 13000);
</script>

<!------owl carousel script link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.3/owl.carousel.min.js"></script>
    
    <script>
     $('.owl-carousel').owlCarousel({
        loop: true,
        nav: true,
        smartSpeed: 1000,
        margin:25,
        loop:true,
        navText: [
         '<i class="fa-solid fa-less-than"></i>',
         '<i class="fa-solid fa-greater-than"></i>'
        ],
        autoplay: true,
        responsive: {
          0: {
            items: 1
          },
          600: {
            items: 1
          },
          1000: {
            items: 1
          }
        }
      });
    </script>


 <!----================Fancy box script link==================--->
 <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

<!-----fancybox script----->
<script>
    Fancybox.bind("[data-fancybox]", {
        Carousel: {
        infinite: false,
      },
      Slideshow: {
        playOnStart: false,
        timeout: 3000,
      },
      Toolbar: {
        display: {
          left: [],
          middle: [],
          right: ["slideshow", "close"],
        },
      },
      Images: {
        zoom: true,
      },
});
</script>

<script>
    
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
    var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        document.querySelector(".nav_wrap").style.top = "0";
        document.querySelector(".nav_wrap").style.transition="1s"
      } else {
        document.querySelector(".nav_wrap").style.top = "-220px";
        flag=false;
        document.querySelector(".nav_wrap").style.transition="1s"
      }
      prevScrollpos = currentScrollPos;
    }
    
</script>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 
<script>
     $(document).ready(function(){
        $("#enquiry_form").submit(function(e){
        e.preventDefault();
        var newdata = new FormData(this);
    
        
  
         $(".loader1").show();
                          $.ajax({

                            url: 'enquiry_form.php',
                            type:'POST',
                            data: newdata,
                            contentType: false,
                            cache: false,
                            processData:false,
                          success:function(result2){
                            console.log(result2);
                            if(result2==1){
                           $(".loader1").hide();   
                           $("#product_message1").show().html('<span style="color:green; font-weight:bold;">Form submitted successfully. We will get back to you soon.</span>').delay(10000).fadeOut(200);;
                          
                           $("#enquiry_form")[0].reset();
                            }else{
                             $("#product_message1").show().html('<span style="color:red;">Something wrong. Try after sometimes.</span>');   
                            }
                               }
                             });
  
        });
     });
    </script>



</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'},{'ap':'cpsh-oh'},{'server':'sg2plzcpnl479135'},{'dcenter':'sg2'},{'cp_id':'10070443'},{'cp_cl':'8'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/traffic-assets/js/tccl.min.js'></script></html>