<?php
require_once 'includes/helpers.php';
require_once 'includes/header.php';
require_once 'includes/footer.php';

renderHeader('Live Availability');

$services = db()->query(
  'SELECT s.id, s.code, s.label, s.icon, s.total_slots, s.price_per_hour, a.available_slots, a.last_updated
   FROM service_types s
   JOIN availability a ON a.service_type_id = s.id
   ORDER BY s.id'
)->fetchAll();
?>

<div class="page-hero" data-page="availability">
  <div class="container">
    <span class="section-label">Real-Time Status</span>
    <h1 class="section-title">Live Availability</h1>
    <p class="section-sub" style="margin:0 auto;text-align:center">
      Slots update automatically. Page refreshes every 30 seconds.
    </p>
    <div style="display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--font-cond);font-size:0.85rem;color:var(--teal)">
      <span class="live-dot">LIVE</span>
      Last updated: <?= date('h:i A', strtotime($services[0]['last_updated'] ?? 'now')) ?>
    </div>
  </div>
</div>

<section class="section" data-page="availability">
  <div class="container">

    <!-- Summary bar -->
    <?php
    $totalAvail = array_sum(array_column($services, 'available_slots'));
    $totalSlots = array_sum(array_column($services, 'total_slots'));
    $overallPct = $totalSlots > 0 ? round(($totalAvail / $totalSlots) * 100) : 0;
    ?>
    <div style="background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);padding:28px;margin-bottom:40px;display:flex;align-items:center;gap:32px;flex-wrap:wrap">
      <div>
        <div style="font-family:var(--font-cond);font-size:0.78rem;letter-spacing:2px;color:var(--text-muted);margin-bottom:4px">OVERALL AVAILABILITY</div>
        <div style="font-family:var(--font-head);font-size:2.4rem;color:var(--amber)"><?= $totalAvail ?> / <?= $totalSlots ?></div>
      </div>
      <div style="flex:1;min-width:200px">
        <div class="avail-bar" style="height:12px">
          <div class="avail-fill <?= $overallPct > 50 ? 'fill-green' : ($overallPct > 20 ? 'fill-amber' : 'fill-red') ?>"
               style="width:<?= $overallPct ?>%"
               data-width="<?= $overallPct ?>%"></div>
        </div>
        <div style="margin-top:8px;font-family:var(--font-cond);font-size:0.85rem;color:var(--text-muted)"><?= $overallPct ?>% of all slots currently available</div>
      </div>
      <a href="booking.php" class="btn btn-amber"><i class="fa fa-calendar-check"></i> Book Now</a>
    </div>

    <!-- Legend -->
    <div style="display:flex;gap:20px;margin-bottom:32px;flex-wrap:wrap">
      <div style="display:flex;align-items:center;gap:8px;font-family:var(--font-cond);font-size:0.82rem">
        <span style="width:12px;height:12px;background:var(--teal);border-radius:2px;display:inline-block"></span>
        <span style="color:var(--text-muted)">Available (&gt;50%)</span>
      </div>
      <div style="display:flex;align-items:center;gap:8px;font-family:var(--font-cond);font-size:0.82rem">
        <span style="width:12px;height:12px;background:var(--amber);border-radius:2px;display:inline-block"></span>
        <span style="color:var(--text-muted)">Limited (20–50%)</span>
      </div>
      <div style="display:flex;align-items:center;gap:8px;font-family:var(--font-cond);font-size:0.82rem">
        <span style="width:12px;height:12px;background:var(--red);border-radius:2px;display:inline-block"></span>
        <span style="color:var(--text-muted)">Almost Full (&lt;20%)</span>
      </div>
    </div>

    <!-- Availability cards -->
    <div class="avail-grid">
      <?php foreach ($services as $svc):
        $pct = $svc['total_slots'] > 0 ? round(($svc['available_slots'] / $svc['total_slots']) * 100) : 0;
        $fillClass  = $pct > 50 ? 'fill-green' : ($pct > 20 ? 'fill-amber' : 'fill-red');
        $badgeClass = $pct > 50 ? 'badge-green' : ($pct > 20 ? 'badge-amber' : 'badge-red');
        $badgeText  = $pct > 50 ? 'AVAILABLE' : ($pct > 0 ? 'LIMITED' : 'FULL');
      ?>
      <div class="avail-card" data-service="<?= $svc['id'] ?>">
        <div class="avail-card-header">
          <div class="avail-card-icon"><i class="fa fa-<?= h($svc['icon']) ?>"></i></div>
          <div>
            <div class="avail-card-title"><?= h($svc['label']) ?></div>
            <div class="avail-card-price">
              <?= $svc['price_per_hour'] > 0 ? '₹' . number_format($svc['price_per_hour'], 2) . ' / hr' : 'Complimentary' ?>
            </div>
          </div>
        </div>

        <div class="avail-progress-wrap">
          <div class="avail-progress-label">
            <span>Availability</span>
            <span class="avail-slots"><?= $svc['available_slots'] ?> / <?= $svc['total_slots'] ?></span>
          </div>
          <div class="avail-bar">
            <div class="avail-fill <?= $fillClass ?>"
                 style="width:<?= $pct ?>%"
                 data-width="<?= $pct ?>%"></div>
          </div>
        </div>

        <div style="display:flex;align-items:center;justify-content:space-between">
          <span class="avail-badge <?= $badgeClass ?>"><?= $badgeText ?></span>
          <?php if ($pct > 0): ?>
          <a href="booking.php?service=<?= urlencode($svc['code']) ?>" class="btn btn-outline-sm">
            Book <i class="fa fa-arrow-right" style="font-size:0.75rem"></i>
          </a>
          <?php else: ?>
          <span style="font-family:var(--font-cond);font-size:0.82rem;color:var(--text-muted)">No slots</span>
          <?php endif; ?>
        </div>
      </div>
      <?php endforeach; ?>
    </div>

  </div>
</section>

<script>
// Auto-refresh page every 30 seconds
setTimeout(() => location.reload(), 30000);
</script>

<?php renderFooter(); ?>
