<?php
require_once('config.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);
      }


      aside{
        background: #e3e3e3;
        padding: 50px;
      }

    </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 -->
    <section class="py-5 text-start position-relative overlay-opacity overlay-opacity-scale-4" style="background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(assets/img/header-habitacion.webp);
}">
      <div class="container position-relative">
        <div class="row py-lg-5">
          <div class="col-12 mx-auto mt-5 text-white">
            <h1 class="fw-bold">Habitación Estándar</h1>
            <h3 class="font-secondary text-11"></h3>
            <p class="lead text-light"><i class="bi bi-arrow-bar-left"></i> <a href="<?=WEB?>habitaciones.php" class="text-light">Volver</a></p>
            
          </div>
        </div>
        </div>
  </section>
    <!-- COMPONENT CAROSULE END -->



    <div class="container my-5"> 

      <div class="row justify-content-sm-center">
        <div class="col-12 col-sm-8">


        <p>El esplendor y la gracia de estilo inglés definen nuestras habitaciones Superior King, que cuentan con una cama doble extragrande, cálidos detalles en madera y un lujoso baño de mármol.</p>
        <h5 class="fw-light mb-2">Destacado</h5> 
              <ul class="list-group list-group-borderless mb-0">
								<li class="list-group-item h6 fw-light d-flex mb-0"><i class="bi bi-patch-check-fill text-success me-2"></i>Every hotel staff to have Proper PPT kit for COVID-19</li>
								<li class="list-group-item h6 fw-light d-flex mb-0"><i class="bi bi-patch-check-fill text-success me-2"></i>Every staff member wears face masks and gloves at all service times.</li>
								<li class="list-group-item h6 fw-light d-flex mb-0"><i class="bi bi-patch-check-fill text-success me-2"></i>Hotel staff ensures to maintain social distancing at all times.</li>
								<li class="list-group-item h6 fw-light d-flex mb-0"><i class="bi bi-patch-check-fill text-success me-2"></i>The hotel has In-Room Dining options available </li>
							
              </ul>
            

              <hr style="height: 1px;" class="my-5 w-100 opacity-50">

        

        
          <div class="row justify-content-center align-items-top g-5">
            <div class="col">

                  <p>Una cama doble extragrande</p>
                  <p>Servicio de habitaciones las 24 horas</p>
                  <p>Climatización automática e individual</p>
                  <p>Caja de seguridad</p>
                  <p>Servicio de mensajeria</p>
                  <p>Mini bar</p>
                  <p>Secador de pelo</p>


            </div>
            <div class="col">

                  <p>Internet inalámbrico de cortesía</p>
                  <p>Escritorio de Trabajo</p>
                  <p>Televisión por cable</p>
                  <p>Marcación directa internacional</p>
                  <p>Amenidades de baño</p>
                  <p>Radio despertador</p>
            </div>
          </div>
          
        

     
        
        
        </div>
        <div class="col-12 col-sm-4">
        <div class="card card-body mb-3">
						
						<!-- Title -->
						<div class="d-sm-flex justify-content-sm-between align-items-center mb-3">
							<div>
								<span>Precio Desde</span>
								<h4 class="card-title mb-0">$350.500</h4>
							</div>
							<div>
								<h6 class="fw-normal mb-0">1 habitación por noche</h6>
								<small>+ $28.605 por impuestos</small>
							</div>
						</div>		

						<!-- Rating -->
						<ul class="list-inline mb-2">
							<li class="list-inline-item me-1 h6 fw-light mb-0"><i class="bi bi-arrow-right me-2"></i>Calificación 4.5 de 5.0</li>
						</ul>

						<p class="h6 fw-light mb-4"><i class="bi bi-arrow-right me-2"></i>Free breakfast available</p>

						<!-- Button -->
						<div class="d-grid">
							<a href="<?=WEB?>habitaciones" class="btn btn-lg btn-primary mb-0 text-light">Ver otras habitaciones</a>
						</div>
					</div>
            <aside >
            
<form>


<div class="mb-3">
  <label for="basic-url" class="form-label">Check In - Out</label>
  <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="mb-3">
  <label for="basic-url" class="form-label">Cantidad de Adultos</label>
<div class="input-group">
 <select class="form-select" aria-label="Default select example">
  <option selected>Adultos</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
</div>
</div>


<div class="mb-3">
  <label for="basic-url" class="form-label">Cantidad de Niños</label>
<div class="input-group">
 <select class="form-select" aria-label="Default select example">
  <option selected>Niños</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
</div>
</div>


<hr style="height: 1px;" class="my-5 w-100 opacity-50">

<h5>Adicionales</h5>

<div class="mb-3">
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
  <label class="form-check-label" for="flexCheckDefault">
    Traslado Aeropuerto
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
  <label class="form-check-label" for="flexCheckChecked">
    Estacionamiento
  </label>
</div>
</div>



<div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3 w-100">Reservar</button>
  </div>


</form>

            </aside>
        </div>


        

       
       
      
      </div>
    </div>



      <div class=" animation" data-animated="fade-in-down-2s" data-delay="1000" id="reserver-all" style="position: absolute;
  z-index: 99;
  top: 130px;
  right: 20px;background: rgba(0,0,0,.7);
  padding: 20px; width: 180px;">
        <div class="row justify-content-md-center">
          
          <div class="col">
                      <div class="reserva-interior">

                                    <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>
                                    <button class="btn btn-primary w-100 h-100 pt-2 mt-2" type="submit">Reservar Ahora</button>
                                  </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>
