Tul xxx Tul

Viewing: dashboard.php

<?php include("include/header.php");
if(!isset($_SESSION['loggedUserId'])) {
  echo "<script> window.location.href = '../login.php';</script>";
}
?>
<!-- Incluir el CSS de bienvenida -->
<link rel="stylesheet" href="../assets/css/welcome.css">

<!-- Page Content  -->
<div id="content" class="p-4 p-md-5 pt-5">

<!-- Mensaje de bienvenida personalizado -->
<div class="welcome-container">
  <!-- Partículas decorativas -->
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  <div class="particle"></div>
  
  <div class="welcome-animation">
    <h1 class="welcome-title">¡Bienvenido, <?php echo $_SESSION['loggedUserName']; ?>!</h1>
    <p class="welcome-subtitle">Nos alegra verte de nuevo en la administración del Hotel</p>
    <div class="welcome-decoration">
      <i class="fa fa-star welcome-star"></i>
      <i class="fa fa-star welcome-star"></i>
      <i class="fa fa-star welcome-star"></i>
      <i class="fa fa-star welcome-star"></i>
      <i class="fa fa-star welcome-star"></i>
    </div>
  </div>
</div>

<!-- <h2 class="mb-4">Dashboard</h2>
<h6 class="mb-4">Booking Summary</h6>
<div class = "container">
  <canvas id="myChart"></canvas>
</div>
 <br><br>

 
<div class="row ml-4" >

<div class="col-md-6 col-sm-12">
<div class="card border-light mb-3" style="max-width: 36rem;">
  <div class="card-header  font-weight-bold">Room Booking Status<span class="text-muted"> (Current year)</span></div>
  <div class="card-body">
<div class="row">
<div class="col-md-6 col-sm-12">
   
   <p class="font-weight-bold">Total Booking</p>
      <p id="room_total_booking">...</p>
      <p class="font-weight-bold">Rejected Booking</p>
      <p id="room_rejeted_booking">...</p>
      <p class="font-weight-bold">Cancalled Booking</p>
      <p id="room_cancelled_booking">...</p>
   </div>
   <div class="col-md-6 col-sm-12">
     
   <p class="font-weight-bold">Booked Booking</p>
      <p id="room_booked_booking">...</p>
      <p class="font-weight-bold">Paid Booking</p>
      <p id="room_paid_booking">...</p>
      <p class="font-weight-bold">Checked Out Booking</p>
      <p id="room_checkedout_booking">...</p>
   </div>
</div>
    
  </div>
</div>
</div>

<div class="col-md-6 col-sm-12">
<div class="card border-light mb-3" style="max-width: 36rem;">
  <div class="card-header  font-weight-bold">Event Booking Status<span class="text-muted"> (Current year)</span></div>
  <div class="card-body">
<div class="row">
<div class="col-md-6 col-sm-12">
   
   <p class="font-weight-bold">Total Booking</p>
      <p id="event_total_booking">...</p>
      <p class="font-weight-bold">Rejected Booking</p>
      <p id="event_rejeted_booking">...</p>
      <p class="font-weight-bold">Cancalled Booking</p>
      <p id="event_cancelled_booking">...</p>
   </div>
   <div class="col-md-6 col-sm-12">
     
   <p class="font-weight-bold">Booked Booking</p>
      <p id="event_booked_booking">...</p>
      <p class="font-weight-bold">Paid Booking</p>
      <p id="event_paid_booking">...</p>
      <p class="font-weight-bold">Checked Out Booking</p>
      <p id="event_checkedout_booking">...</p>
   </div>
</div>
    
  </div>
</div>
</div> -->

<!-- </div>

<div class="row ml-4" >

<div class="col-md-4 col-sm-12">
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header  font-weight-bold">Room Details <span class="text-muted"> (Current year)</span></div>
  <div class="card-body">
 
    <p class="font-weight-bold">Available Room Type</p>
    <p id="room_type">...</p>
    <p class="font-weight-bold">Total Rooms</p>
    <p id="rooms">...</p>
    <p class="font-weight-bold">Available Rooms</p>
    <p id="avail_room">...</p>
    
  </div>
</div>
</div>

<div class="col-md-4 col-sm-12">
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header  font-weight-bold">Event Details <span class="text-muted"> (Current year)</span></div>
  <div class="card-body">
 
    <p class="font-weight-bold">Available Event Type</p>
    <p id="event_type">...</p>
    <p class="font-weight-bold">Total Halls</p>
    <p id="events">...</p>
    <p class="font-weight-bold">Available Halls</p>
    <p id="avail_event">...</p>
   
  </div>
</div>
</div>

<div class="col-md-4 col-sm-12">
<div class="card border-light mb-3" style="max-width: 18rem;">
  <div class="card-header font-weight-bold">Amount Details <span class="text-muted"> (Current year)</span></div>
  <div class="card-body">
 
    <p class="font-weight-bold">Room Booking Total</p>
    <p id="room_booking">...</p>
    <p class="font-weight-bold">Event Booking Total</p>
    <p id="event_booking">...</p>
    <p class="font-weight-bold">Total Amount</p>
    <p id="total_amount">...</p>
   
  </div>
</div>
</div> -->

</div>

<!-- Script para animación de bienvenida -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Añadir un efecto de desvanecimiento después de 5 segundos
    setTimeout(function() {
      const welcomeContainer = document.querySelector('.welcome-container');
      if(welcomeContainer) {
        welcomeContainer.style.transition = 'all 1s ease';
        welcomeContainer.style.height = welcomeContainer.offsetHeight + 'px';
        
        setTimeout(function() {
          welcomeContainer.style.height = '80px';
          welcomeContainer.style.overflow = 'hidden';
          
          const welcomeTitle = document.querySelector('.welcome-title');
          if(welcomeTitle) {
            welcomeTitle.style.fontSize = '1.5rem';
            welcomeTitle.style.marginBottom = '0';
          }
          
          const welcomeSubtitle = document.querySelector('.welcome-subtitle');
          if(welcomeSubtitle) {
            welcomeSubtitle.style.display = 'none';
          }
          
          const welcomeDecoration = document.querySelector('.welcome-decoration');
          if(welcomeDecoration) {
            welcomeDecoration.style.display = 'none';
          }
        }, 100);
      }
    }, 5000);
    
    // Añadir efecto de hover para expandir nuevamente
    const welcomeContainer = document.querySelector('.welcome-container');
    if(welcomeContainer) {
      welcomeContainer.addEventListener('mouseenter', function() {
        if(this.style.height === '80px') {
          this.style.height = 'auto';
          
          const welcomeTitle = document.querySelector('.welcome-title');
          if(welcomeTitle) {
            welcomeTitle.style.fontSize = '2.5rem';
            welcomeTitle.style.marginBottom = '0.5rem';
          }
          
          const welcomeSubtitle = document.querySelector('.welcome-subtitle');
          if(welcomeSubtitle) {
            welcomeSubtitle.style.display = 'block';
          }
          
          const welcomeDecoration = document.querySelector('.welcome-decoration');
          if(welcomeDecoration) {
            welcomeDecoration.style.display = 'block';
          }
        }
      });
      
      welcomeContainer.addEventListener('mouseleave', function() {
        if(parseFloat(getComputedStyle(this).height) > 100) {
          this.style.height = '80px';
          
          const welcomeTitle = document.querySelector('.welcome-title');
          if(welcomeTitle) {
            welcomeTitle.style.fontSize = '1.5rem';
            welcomeTitle.style.marginBottom = '0';
          }
          
          const welcomeSubtitle = document.querySelector('.welcome-subtitle');
          if(welcomeSubtitle) {
            welcomeSubtitle.style.display = 'none';
          }
          
          const welcomeDecoration = document.querySelector('.welcome-decoration');
          if(welcomeDecoration) {
            welcomeDecoration.style.display = 'none';
          }
        }
      });
    }
  });
</script>

<?php include("include/footer.php"); ?>
User / IP	: 216.73.216.159
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64