<?php use App\Helpers\Helper; ?>
<section class="page-header">
  <div class="container">
    <h1 class="fw-700 mb-2">Our Residences</h1>
    <nav aria-label="breadcrumb"><ol class="breadcrumb mb-0"><li class="breadcrumb-item"><a href="<?= APP_URL ?>/">Home</a></li><li class="breadcrumb-item active">Residences</li></ol></nav>
  </div>
</section>

<section class="py-5">
  <div class="container">
    <!-- Type Filter Tabs -->
    <div class="d-flex gap-2 mb-4 flex-wrap justify-content-center">
      <a href="<?= APP_URL ?>/residences" class="btn btn-sm <?= !isset($_GET['type'])?'btn-primary':'btn-outline-secondary' ?>">All</a>
      <?php foreach ($types as $t): ?>
      <a href="<?= APP_URL ?>/residences?type=<?= $t['id'] ?>" class="btn btn-sm <?= ($_GET['type']??'')==$t['id']?'btn-primary':'btn-outline-secondary' ?>"><?= Helper::e($t['name']) ?></a>
      <?php endforeach; ?>
    </div>

    <?php if (empty($properties)): ?>
    <div class="text-center py-5 text-muted"><i class="bi bi-buildings fs-1 d-block mb-3"></i><h5>No properties available</h5></div>
    <?php else: ?>
    <div class="row g-4">
      <?php foreach ($properties as $p): ?>
      <div class="col-lg-4 col-md-6">
        <div class="card property-card h-100 border-0 shadow-sm">
          <div class="property-img-wrap">
            <img src="https://images.unsplash.com/photo-1560448204-e02f11c3d0e2?w=600&q=60" alt="<?= Helper::e($p['name']) ?>" loading="lazy">
            <div class="property-badge">
              <?php if ($p['is_featured']): ?><span class="badge bg-warning text-dark me-1">Featured</span><?php endif; ?>
              <span class="badge bg-<?= ($p['available_units']??0)>0?'success':'danger' ?>"><?= ($p['available_units']??0)>0?(($p['available_units']).' Free'):'Full' ?></span>
            </div>
          </div>
          <div class="property-body">
            <div class="d-flex justify-content-between align-items-start mb-1">
              <h5 class="fw-700 fs-6 mb-0"><?= Helper::e($p['name']) ?></h5>
              <span class="badge bg-light text-dark ms-2 flex-shrink-0"><?= Helper::e($p['type_name']??'') ?></span>
            </div>
            <p class="text-muted small mb-2"><i class="bi bi-geo-alt me-1"></i><?= Helper::e($p['region_name']??'') ?><?= !empty($p['area'])?', '.Helper::e($p['area']):'' ?></p>
            <div class="property-meta mb-3">
              <span><i class="bi bi-door-open me-1"></i><?= $p['total_units']??0 ?> Units</span>
              <?php if ($p['total_floors']??0): ?><span><i class="bi bi-layers me-1"></i><?= $p['total_floors'] ?> Floors</span><?php endif; ?>
            </div>
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <div class="property-price"><?= !empty($p['min_rent'])?Helper::money($p['min_rent']):'TZS —' ?><span>/mo</span></div>
                <div class="small text-muted">from</div>
              </div>
              <a href="<?= APP_URL ?>/residences/<?= $p['id'] ?>" class="btn btn-primary btn-sm">View Details</a>
            </div>
          </div>
        </div>
      </div>
      <?php endforeach; ?>
    </div>
    <?php if ($pagination['totalPages'] > 1): ?>
    <div class="mt-5"><?= Helper::paginator($pagination, APP_URL.'/residences') ?></div>
    <?php endif; ?>
    <?php endif; ?>
  </div>
</section>
