{% extends "layout.html" %}

{% block title %}Occupancy{% endblock %}

{% block content %}
<div class="container" data-aos="fade-up" data-aos-duration="800" style="margin-top: 50px;">
  <div class="row justify-content-center"><div class="col-auto text-center"><h1 class="gradient-text">Occupancy</h1></div></div>
  <p class="text-center text-muted mb-4">Here you can explore capacity and batch-based occupancy insights.</p>

  <div class="card shadow-sm p-4">
    <div class="row g-3">
      <div class="col-md-6 col-lg-3">
        <label for="categoryDropdown">Product</label>
        <select id="categoryDropdown" class="form-select">
          <option value="">All</option>
        </select>
      </div>
      <div class="col-md-6 col-lg-3">
        <label for="locationDropdown">Location</label>
        <select id="locationDropdown" class="form-select">
          <option value="">All</option>
        </select>
      </div>
      <div class="col-md-6 col-lg-3">
        <label for="roomDropdown">Room</label>
        <select id="roomDropdown" class="form-select">
          <option value="">All</option>
        </select>
      </div>
      <div class="col-md-6 col-lg-3">
        <label for="batchDatePicker">Date</label>
        <div class="input-group">
          <span class="input-group-text"><i class="fa fa-calendar"></i></span>
          <input type="text" id="batchDatePicker" class="form-control" placeholder="Select Batch Date" readonly />
          <button class="btn btn-outline-secondary" type="button" id="clearDateBtn">
            <i class="fa fa-times"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="row mt-4">
      <div class="col text-center">
        
    
<div class="row justify-content-center mt-4 g-4" id="occupancy-statboxes">
  <div class="col-auto" data-aos="fade-up" data-aos-duration="800">
    <div class="stat-box text-center shadow-sm p-4 rounded-4">
      <h2 id="occupancy-total-capacity" class="mb-1 fs-1">0</h2>
      <p class="text-muted small mb-0">Total Capacity</p>
    </div>
  </div>

  <div class="col-auto" data-aos="fade-up" data-aos-duration="800">
    <div class="stat-box text-center shadow-sm p-4 rounded-4">
      <h2 id="occupancy-pax-sold" class="mb-1 fs-1">0</h2>
      <p class="text-muted small mb-0">Spots Sold</p>
    </div>
  </div>

  <div class="col-auto" data-aos="fade-up" data-aos-duration="800">
    <div class="stat-box text-center shadow-sm p-4 rounded-4">
      <h2 id="occupancy-rate" class="mb-1 fs-1">0%</h2>
      <p class="text-muted small mb-0">Occupancy Rate</p>
    </div>
  </div>

  <div class="col-auto" data-aos="fade-up" data-aos-duration="800">
    <div class="stat-box text-center shadow-sm p-4 rounded-4">
      <h2 id="occupancy-available" class="mb-1 fs-1">0</h2>
      <p class="text-muted small mb-0">Available Spots</p>
    </div>
  </div>

  <div class="col-auto" data-aos="fade-up" data-aos-duration="800">
    <div class="stat-box text-center shadow-sm p-4 rounded-4">
      <h2 id="occupancy-full-payment" class="mb-1 fs-1">0</h2>
      <p class="text-muted small mb-0">Full Payment</p>
    </div>
  </div>
  
  <div class="col-auto" data-aos="fade-up" data-aos-duration="800">
    <div class="stat-box text-center shadow-sm p-4 rounded-4">
      <h2 id="occupancy-deposit" class="mb-1 fs-1">0</h2>
      <p class="text-muted small mb-0">Deposit</p>
    </div>
  </div>

  <div class="col-auto" data-aos="fade-up" data-aos-duration="800">
    <div class="stat-box text-center shadow-sm p-4 rounded-4">
      <h2 id="occupancy-amount-payable" class="mb-1 fs-2">$0</h2>
      <p class="text-muted small mb-0">Amount Payable</p>
    </div>
  </div>

  <div class="col-auto" data-aos="fade-up" data-aos-duration="800">
    <div class="stat-box text-center shadow-sm p-4 rounded-4">
      <h2 id="occupancy-amount-paid" class="mb-1 fs-2">$0</h2>
      <p class="text-muted small mb-0">Amount Paid</p>
    </div>
  </div>

  <div class="col-auto" data-aos="fade-up" data-aos-duration="800">
    <div class="stat-box text-center shadow-sm p-4 rounded-4">
      <h2 id="occupancy-remaining" class="mb-1 fs-2">$0</h2>
      <p class="text-muted small mb-0">Remaining Payment</p>
    </div>
  </div>

  <div class="col-auto" data-aos="fade-up" data-aos-duration="800">
    <div class="stat-box text-center shadow-sm p-4 rounded-4">
      <h2 id="occupancy-potential-future" class="mb-1 fs-2">$0</h2>
      <p class="text-muted small mb-0">Potential Future</p>
    </div>
  </div>

</div>


    </div>
  </div>

  <div class="text-center mt-5" data-aos="fade-up" data-aos-duration="1200">
    <img src="{{ url_for('static', filename='images/HoOm Logo Name black.png') }}" width="140" alt="Logo" class="parallax-image">
  </div>
</div>

<style>
  body, .statbox-card, .statbox-value, .statbox-label { font-family: 'Mulish', sans-serif; }
  .parallax-image {
    transition: transform 0.3s ease-out;
  }

  .parallax-image:hover {
    transform: translateY(-20px);
  }
</style>

<!-- Fonts & CSS -->
<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<!-- JS -->
<script src="{{ url_for('static', filename='js/occupancy_toggle.js') }}"></script>
{% endblock %}