<?php
require_once('configuracion.php');
$light_mode = false;
$small_footer = false;
?>
<!doctype html>
<html lang="en">
  <head>
      <?php 
      // global head tag stylesheet
      /* **************************************** */
      include_once("components/head.php");
      /* **************************************** */
      // global head tag stylesheet
      ?>  

    <!-- CUSTOM CSS VIEW --> 
    <style>
      .franjas {
        background-image: linear-gradient(to right, white 11.1%, red 11.1% 22.2%, white 22.2% 33.3%, 
                    red 33.3% 44.4%, white 44.4% 55.5%, red 55.5% 66.6%, 
                    white 66.6% 77.7%, red 77.7% 88.8%, white 88.8% 100%);
        display: inline-block;
        border: 1px solid #dfdfdf;
        
      }

      h1 > .franjas{
        height: 35px;
        width: 100px;
      }


      h2 > .franjas{
        width: 50px;
        height: 28px;
      }

      @media (max-width: 575px) {
        h1 > .franjas{
          height: 25px !important;
          width: 55px !important;
        }

        #header.fixed-stop {
          max-height: 70px !important;
        }
        #divide-header {
          height: 70px !important;
        }
        #reserver-container {
            margin-top: -380px !important;
            padding-bottom: 15px !important;
        }
      }

      .newdate{
        background: red;
        color: #fff;
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 4px 10px;
        font-weight: bold;
        font-family: 'Anton', sans-serif;
      }

      .newview{
        background: red;
        color: #fff;
        position: relative;
        bottom: 10px;
        left: 10px;
        padding: 2px 8px;
        font-weight: bold;
        width: 100px;
        margin-bottom: -20px;
        margin-top: 10px;
      }

      #reserver-container{
        margin-top: -260px;
  padding-bottom: 85px;
  z-index: 3 !important;
  display: block;
  position: relative;
      }
      .reserva-home{
        padding: 30px;
  background: rgba(0,0,0,0.4);
      }

    </style>
    <!-- CUSTOM CSS VIEW END --> 
  </head>

  <body>

    <main role="main" class="main">
    
    <?php 

      // global header menu 
      /* **************************************** */
          require_once("components/header.php");
      /* **************************************** */
      // global header end
    ?> 
    <!-- COMPONENT CAROSULE -->
    <?php include_once("components/general/carousel-slider.php")?>
    <!-- COMPONENT CAROSULE END -->



      <div class="container animation" data-animated="fade-in-down-2s" data-delay="1000" id="reserver-container">
        <div class="row justify-content-md-center">
          
          <div class="col-12 col-sm-7">
                      <div class="reserva-home">
                          <div class="row g-3">
                          <div class="col-sm-12"><h1 class="font-secondary text-center text-light text-10">Haz Tu Reserva Aquí</h1></div>
                                  <div class="col-sm-7">
                                    <div class="input-group">
                                      <input type="date" class="form-control" placeholder="Desde" aria-label="Desde">
                                      <span class="input-group-text">to</span>
                                      <input type="date" class="form-control" placeholder="Hasta" aria-label="Hasta">
                                    </div>
                                  </div>
                                  <div class="col-sm">
                                      <input type="number" class="form-control" placeholder="Adultos" aria-label="Adultos">
                                  </div>
                                  <div class="col-sm">
                                      <input type="number" class="form-control" placeholder="Niños" aria-label="Niños">
                                  </div>
                                  <div class="col-sm">
                                      <button class="btn btn-primary w-100 h-100" type="submit"><i class="bi bi-search"></i></button>
                                  </div>
                        </div>
                      </div>
          </div>
        </div>
      </div>





    


 


</main>
    
    <?php 
      /* **************************************** */
      // footer
      require_once("components/footer.php");
      // footer end
      // script js global
      require_once('components/bottom.php');
      //  script js global end
      /* **************************************** */
    ?>        


    <!-- CUSTOM VIEW SCRIPT/LIBRARY END -->
    <script type="module" src="assets/js/views/home.js?<?=date('U')?>"></script>
    <!-- CUSTOM VIEW SCRIPT/LIBRARY END -->
   

    <script>
       window.addEventListener('scroll', function() {
          var scrollMessage = document.getElementById('header');
          // Si el desplazamiento vertical es mayor que 0, se ha desplazado hacia abajo.
          if (window.scrollY > 0) {
            scrollMessage.style.background = 'rgba(255,255,255,1)';
          } else {
            scrollMessage.style.background = 'rgba(255,255,255,.6)';
          }
        });
    </script>

  </body>
</html>
