<?php
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/includes/seo.php';

$seo = [
    'title' => 'Saved Homes | ' . SITE_NAME,
    'description' => 'Your saved and favorited property listings on Kigali Yacu Properties.',
    'path' => '/saved',
];
include __DIR__ . '/includes/header.php';
?>
<section class="section-pad-sm">
  <div class="container">
    <?= breadcrumb_html([['name' => 'Saved Homes', 'url' => '/saved']]) ?>
    <div class="section-head" style="max-width:none;">
      <div class="eyebrow">Your Shortlist</div>
      <h1>Saved Homes</h1>
      <p>Properties you've saved on this device. Favorites are stored locally in your browser — clearing your browser data will remove them.</p>
    </div>
    <div id="savedGrid" class="grid grid-3"></div>
    <div id="savedEmpty" class="form-card text-center" style="display:none;">
      <h3>No saved homes yet</h3>
      <p class="text-muted">Tap the heart icon on any listing to save it here for later.</p>
      <a href="/properties" class="btn btn-accent mt-4">Browse Properties</a>
    </div>
  </div>
</section>

<script>
(function () {
  var HEART_SVG = '<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7.5-4.6-9.6-9A5.4 5.4 0 0 1 12 6a5.4 5.4 0 0 1 9.6 5c-2.1 4.4-9.6 9-9.6 9Z"/></svg>';
  var ids = JSON.parse(localStorage.getItem('ky_favorites') || '[]');
  var grid = document.getElementById('savedGrid');
  var empty = document.getElementById('savedEmpty');
  if (!ids.length) { empty.style.display = 'block'; return; }
  fetch('/api/properties-by-ids.php?ids=' + ids.join(','))
    .then(function (r) { return r.json(); })
    .then(function (items) {
      if (!items.length) { empty.style.display = 'block'; return; }
      grid.innerHTML = items.map(function (p) {
        return '<article class="card property-card">' +
          '<a href="' + p.url + '" class="media-frame"><img src="' + p.image + '" alt="' + p.title + '" loading="lazy" width="480" height="360"></a>' +
          '<div class="badges"><span class="badge ' + (p.status === 'rent' ? 'badge-rent' : 'badge-sale') + '">' + (p.status === 'rent' ? 'For Rent' : 'For Sale') + '</span></div>' +
          '<button class="fav-btn is-active" data-id="' + p.id + '" aria-pressed="true" aria-label="Remove from favorites">' + HEART_SVG + '</button>' +
          '<div class="body">' +
            '<div class="price">' + p.price_label + '</div>' +
            '<h3><a href="' + p.url + '">' + p.title + '</a></h3>' +
            '<div class="loc">' + p.district + '</div>' +
            '<div class="meta"><span>' + p.bedrooms + ' Beds</span><span>' + p.bathrooms + ' Baths</span></div>' +
          '</div>' +
        '</article>';
      }).join('');
    });
})();
</script>
<?php include __DIR__ . '/includes/footer.php'; ?>
