{% extends "layout.html" %}

{% block title %}Check Available{% 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">Check Available</h1></div></div>
  <p class="text-center text-muted mb-4">Here you can check availability based on product, location, room, and date.</p>

  <div class="card shadow-sm p-4">
    <div class="row g-3">
      <div class="col-md-6 col-lg-3">
        <label for="checkCategoryDropdown">Product</label>
        <select id="checkCategoryDropdown" class="form-select">
          <option value="">All</option>
        </select>
      </div>
      <div class="col-md-6 col-lg-3">
        <label for="checkLocationDropdown">Location</label>
        <select id="checkLocationDropdown" class="form-select">
          <option value="">All</option>
        </select>
      </div>
      <div class="col-md-6 col-lg-3">
        <label for="checkRoomDropdown">Room</label>
        <select id="checkRoomDropdown" class="form-select">
          <option value="">All</option>
        </select>
      </div>
      <div class="col-md-6 col-lg-3">
        <label for="checkBatchDatePicker">Date</label>
        <div class="input-group">
          <span class="input-group-text"><i class="fa fa-calendar"></i></span>
          <input type="text" id="checkBatchDatePicker" class="form-control" placeholder="Select Batch Date" readonly />
          <button class="btn btn-outline-secondary" type="button" id="checkClearDateBtn">
            <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="check-available-statbox">
          <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="check-available" class="mb-1 fs-1">0</h2>
              <p class="text-muted small mb-0">Available Spots</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>
</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>

<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>
<script src="{{ url_for('static', filename='js/check_available.js') }}"></script>
{% endblock %}