 <?php  
require 'admin/config/function.php';
$abt=mysqli_query($conn,"select * from cms_menu where page_url='about-the-cottage'");
$abt1=mysqli_fetch_assoc($abt);

$products=mysqli_query($conn,"select * from cat_pack where status='1'");

foreach($products as $product){

    $prodcutname=$product['p_name'];

    $bedroom=$product['bedroom'];
    $bath=$product['bath'];
    $sleep=$product['sleep'];

    $stay=$product['stay'];

    $n_price=$product['n_price'];
    $w_price=$product['w_price'];
    $g_price=$product['g_price'];
    

     $cottage=$product['cottage'];
     $cat_pd_mrp=$product['cat_pd_mrp'];

     

    $small_description=$product['small_description'];

    $long_description=$product['long_description'];

    $prodcutimg=$product['cat_pd_hv_image'];
$prod_image=explode(",",$prodcutimg);
if(!empty($prod_image[0])){
$image=admin_base_url().'uploads/product/cat_pd_image/'.$prod_image[0];
}else{
$image=admin_base_url().'uploads/product/no-image.jpg';
}

}


?>
<!doctype html>
<html lang="en">

<head>
   
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title><?=$abt1['page_title']?></title>
  <meta name="description" content="<?=$abt1['message']?>">
  <link rel="canonical" href="<?=base_url().$abt1['page_url']?>">
  <?php include 'inc/link.php';?>
   <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  
  <!--Font awesome Version--6-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
 
  <!-- css link -->
  <link rel="stylesheet" href="<?=base_url()?>assets/Sass/style.css">
  <!-- CSS for date-->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">


 
</head>

<body>


  <!-- navbar start here -->
 <?php include 'inc/header.php';?>
  <!-- navbar end here -->

  <main>
      <!-- cottage start -->
        <section id="cottages">
          <div class="container mt-5">
            <div class="row">
                <div class="col-md-8">
                    <div class="container" id="CottageSlider">

       <?php  if(!empty($prodcutimg)){
//$prod_image=
$prod_image=explode(",",$prodcutimg);
$count=count($prod_image);
for($i=0;$i<=$count;$i++)
{?>


                        <div class="mySlides">
                          <div class="numbertext">1 / 40</div>
                          <img src="<?=admin_base_url()?>uploads/product/cat_pd_hv_image/<?=$prod_image[$i]?>" style="width:100%">
                        </div>

                         <?php
}
?>
<?php }else{
echo '<img src="'.$noimage.'">';
}
?>
                       
                          
                        <a class="prev" onclick="plusSlides(-1)">❮</a>
                        <a class="next" onclick="plusSlides(1)">❯</a>
                      
                        <!-- <div class="caption-container">
                          <p id="caption"></p>
                        </div> -->
                      
                        <div id="ChooseImage" class="mt-3">
                            <div class="">
                                <div class="ImageContainer" id="imageContainer" >
                                      <?php  if(!empty($prodcutimg)){
//$prod_image=
$prod_image=explode(",",$prodcutimg);
$count=count($prod_image);
for($i=0;$i<=$count;$i++)
{?>


                                    <div class="ImageDiv">
                                        <img class="demo cursor" src="<?=admin_base_url()?>uploads/product/cat_pd_hv_image/<?=$prod_image[$i]?>" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
                                    </div>

                                     <?php
}
?>
<?php }else{
echo '<img src="'.$noimage.'">';
}
?>


                                    
                                </div>
                            </div>
                                
                        </div>

                        
                    </div>
                </div>
                <div class="col-md-4">
                    <div id="GetQuote">
                        <div class="cottage-content container text-center">
                            <div class="">
                                <div class="card p-4 pb-0 mt-3" style="border-color: #207FBF;">
                                  <form action="<?=base_url()?>getquote.php" method="post">
                                    <h2 class="mb-4" style="color: #207FBF;">Instant Quote</h2>
                                    <div class="date" id="date1" data-target-input="nearest">
                                        <input type="text" name="check_in" class="form-control form-control-lg  mb-3 datetimepicker-input"
                                          placeholder="Check in" data-target="#date1" data-toggle="datetimepicker" required>
                                      </div>
                                      <div class="date" id="date2" data-target-input="nearest">
                                        <input type="text" name="check_out" class="form-control form-control-lg mb-3 datetimepicker-input"
                                          placeholder="Check out" data-target="#date2" data-toggle="datetimepicker" required>
                                      </div>
                                      <input type="hidden" name="heading" value="<?=$prodcutname?>">
                                      <input type="hidden" name="stay" value="<?=$stay?>">

                                      <input type="hidden" name="n_price" value="<?=$n_price?>">
                                      <input type="hidden" name="w_price" value="<?=$w_price?>">
                                      <input type="hidden" name="g_price" value="<?=$g_price?>">


                                      <div class="d-grid gap-2 mb-2">
                                        <button class="btn" type="submit">Get Quote</button>

                                      </div>
                                  </form>
                    
                                </div>
                    
                              </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
            <div class="container pt-5">
                <h3 style="color: #207FBF;">
                  <b> <?=$prodcutname?></b>
                    
                </h3>
                <hr>
                <h4>
                    <?=$cottage?> <span class="me-5 ms-3"><?=$bedroom?></span> <span class="me-5"><?=$bath?></span> <span class="me-5"><?=$sleep?></span> <span class="me-5"> <?=$stay?></span> 
                </h4>
                <hr>
                 <?=$small_description?>
                <h2 style="color: #207FBF;">
                    Map
                </h2>
                <div class="map-container">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d15081.163082827681!2d77.3962717!3d28.6208836!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce52cf15b2683%3A0x407ec4ae43e7fbf8!2sA-21%2C%202nd%20Floor%2C%20Office-No.208%2C%20Block%20A%2C%20Sector%2067%2C%20Noida%2C%20Uttar%20Pradesh%20201301!5e0!3m2!1sen!2sin!4v1550902899167" width="100%" height="350" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

                    <!-- <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3502.082777542236!2d77.36729831440445!3d28.61167958242864!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390ce5d300b200a1%3A0x4ac06b3d7a3c7b9a!2sA-21%2C%202nd%20Floor%2C%20Office-No.208%2C%20Block%20A%2C%20Sector%2067%2C%20Noida%2C%20Uttar%20Pradesh%20201301!5e0!3m2!1sen!2sin!4v1647771475406!5m2!1sen!2sin" width="100%" height="300" allowfullscreen="" loading="lazy"></iframe> -->
                  <h4><?=$cat_pd_mrp?></h4>  
                </div>
                <hr>

                <h4 class="mt-3" style="color: #207FBF;">
               <?=$long_description?>
                <h4 class="mt-3" style="color: #207FBF;">
                    Calendar
                </h4>
                 <!-- calendar start -->

                    <div id="calendar">
                        <div class="month">      
                            <ul>
                              <li class="prev">&#10094;</li>
                              <li class="next">&#10095;</li>
                              <li>
                                March<br>
                                <span style="font-size:18px">2024</span>
                              </li>
                            </ul>
                          </div>
                          
                          <ul class="weekdays">
                            <li>Mo</li>
                            <li>Tu</li>
                            <li>We</li>
                            <li>Th</li>
                            <li>Fr</li>
                            <li>Sa</li>
                            <li>Su</li>
                          </ul>
                          
                          <ul class="days">  
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li>4</li>
                            <li>5</li>
                            <li>6</li>
                            <li>7</li>
                            <li>8</li>
                            <li>9</li>
                            <li>10</li>
                            <li>11</li>
                            <li>12</li>
                            <li>13</li>
                            <li>14</li>
                            <li>15</li>
                            <li>16</li>
                            <li>17</li>
                            <li>18</li>
                            <li>19</li>
                            <li>20</li>
                            <li>21</li>
                            <li><span class="active">22</span></li>
                            <li>23</li>
                            <li>24</li>
                            <li>25</li>
                            <li>26</li>
                            <li>27</li>
                            <li>28</li>
                            <li>29</li>
                            <li>30</li>
                            <li>31</li>
                          </ul>
                    </div>

                 <!-- calendar end -->

            </div>
        </section>
      <!-- cottage end -->
  </main>
   <!-- bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

     <!-- JavaScript for date-->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/en-au.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"></script>
     
    <!-- external js link -->
    <script src="<?=base_url()?>assets/js/datepicker.js"></script>
    <script src="<?=base_url()?>assets/js/gallery.js"></script>
    
</body>

</html>