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

$seo = [
    'title' => 'Compare Properties | ' . SITE_NAME,
    'description' => 'Compare up to three property listings side by side on price, size, bedrooms and investment score.',
    'path' => '/compare',
];
include __DIR__ . '/includes/header.php';
?>
<section class="section-pad-sm">
  <div class="container">
    <?= breadcrumb_html([['name' => 'Compare Listings', 'url' => '/compare']]) ?>
    <div class="section-head" style="max-width:none;">
      <div class="eyebrow">Side by Side</div>
      <h1>Compare Listings</h1>
      <p>Add up to 3 properties to compare using the "Add to Compare" button on any listing.</p>
    </div>
    <div id="compareWrap"></div>
    <div id="compareEmpty" class="form-card text-center" style="display:none;">
      <h3>No properties selected for comparison</h3>
      <p class="text-muted">Browse listings and tap "Add to Compare" to add up to three properties here.</p>
      <a href="/properties" class="btn btn-accent mt-4">Browse Properties</a>
    </div>
  </div>
</section>

<script>
(function () {
  var ids = JSON.parse(localStorage.getItem('ky_compare') || '[]');
  var wrap = document.getElementById('compareWrap');
  var empty = document.getElementById('compareEmpty');
  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; }
      var rows = [
        { label: 'Photo', render: function (p) { return '<a href="' + p.url + '"><img src="' + p.image + '" alt="' + p.title + '" width="160" height="110" style="border-radius:8px;object-fit:cover;"></a>'; } },
        { label: 'Property', render: function (p) { return '<a href="' + p.url + '"><strong>' + p.title + '</strong></a>'; } },
        { label: 'Status', render: function (p) { return p.status === 'rent' ? 'For Rent' : 'For Sale'; } },
        { label: 'Price', render: function (p) { return p.price_label; } },
        { label: 'Category', render: function (p) { return p.category; } },
        { label: 'District', render: function (p) { return p.district; } },
        { label: 'Bedrooms', render: function (p) { return p.bedrooms || '—'; } },
        { label: 'Bathrooms', render: function (p) { return p.bathrooms || '—'; } },
        { label: 'Land Size', render: function (p) { return p.land_size_sqm ? p.land_size_sqm + ' m²' : '—'; } },
        { label: 'Building Size', render: function (p) { return p.building_size_sqm ? p.building_size_sqm + ' m²' : '—'; } },
        { label: 'Investment Score', render: function (p) { return p.investment_score + ' / 100'; } },
        { label: '', render: function (p) { return '<button class="btn btn-outline btn-sm compare-toggle active" data-id="' + p.id + '">Remove</button>'; } },
      ];
      var html = '<div class="compare-table-wrap"><table class="compare-table"><tbody>';
      rows.forEach(function (row) {
        html += '<tr><th class="row-label">' + row.label + '</th>';
        items.forEach(function (p) { html += '<td>' + row.render(p) + '</td>'; });
        html += '</tr>';
      });
      html += '</tbody></table></div>';
      wrap.innerHTML = html;
    });
})();
</script>
<?php include __DIR__ . '/includes/footer.php'; ?>
