<?php $this->start('body'); ?>
<?php $g = $this->data['g']; ?>

<div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
  <div>
    <h5 class="mb-0 fw-semibold"><i class="fas fa-map-marker-alt me-2" style="color: <?= htmlspecialchars($g['color'] ?: '#2626F5'); ?>"></i><?= htmlspecialchars($g['name']); ?>
      <span class="badge bg-<?= $g['active']?'success':'secondary'; ?> ms-2" style="font-size:.65em;vertical-align:middle;"><?= $g['active']?'Active':'Inactive'; ?></span>
      <?php if ($g['trigger_alert']): ?><span class="badge bg-warning text-dark ms-1" style="font-size:.65em;vertical-align:middle;">Alert on exit</span><?php endif; ?>
    </h5>
    <div class="text-muted small" style="text-transform:capitalize;"><?= htmlspecialchars(str_replace('_',' ', $g['kind'])); ?><?php if ($g['customer_name']): ?> · <a href="<?= PROOT; ?>Customers/view/<?= (int)$g['customer_id']; ?>"><?= htmlspecialchars($g['customer_name']); ?></a><?php endif; ?></div>
  </div>
  <div class="d-flex gap-2">
    <a href="<?= PROOT; ?>Geofences" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left me-1"></i>Back</a>
    <a href="<?= PROOT; ?>Geofences/edit/<?= (int)$g['c0d']; ?>" class="btn btn-sm btn-primary"><i class="fas fa-pen me-1"></i>Edit</a>
  </div>
</div>

<?= flashHtml(); ?>

<div class="row g-3">
  <div class="col-lg-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body">
        <h6 class="text-uppercase text-muted small mb-3">Details</h6>
        <dl class="row mb-0 small">
          <dt class="col-4 text-muted fw-normal">Kind</dt><dd class="col-8" style="text-transform:capitalize;"><?= htmlspecialchars(str_replace('_',' ', $g['kind'])); ?></dd>
          <dt class="col-4 text-muted fw-normal">Center</dt><dd class="col-8 font-monospace"><?= number_format((float)$g['center_lat'], 6); ?>, <?= number_format((float)$g['center_lng'], 6); ?></dd>
          <dt class="col-4 text-muted fw-normal">Radius</dt><dd class="col-8"><?= number_format((int)$g['radius_m']); ?> m<?php if ($g['radius_m'] >= 1000): ?> <span class="text-muted">(<?= number_format($g['radius_m']/1000, 2); ?> km)</span><?php endif; ?></dd>
          <dt class="col-4 text-muted fw-normal">Colour</dt><dd class="col-8"><span class="d-inline-block rounded" style="width:16px;height:16px;background:<?= htmlspecialchars($g['color']); ?>;vertical-align:middle;"></span> <code><?= htmlspecialchars($g['color']); ?></code></dd>
          <dt class="col-4 text-muted fw-normal">Trigger alert</dt><dd class="col-8"><?= $g['trigger_alert'] ? '<span class="badge bg-warning text-dark">Yes</span>' : '<span class="text-muted">No</span>'; ?></dd>
          <?php if ($g['customer_name']): ?>
            <dt class="col-4 text-muted fw-normal">Customer</dt><dd class="col-8"><a href="<?= PROOT; ?>Customers/view/<?= (int)$g['customer_id']; ?>"><?= htmlspecialchars($g['customer_name']); ?></a></dd>
          <?php endif; ?>
          <?php if ($g['notes']): ?>
            <dt class="col-4 text-muted fw-normal">Notes</dt><dd class="col-8"><?= nl2br(htmlspecialchars($g['notes'])); ?></dd>
          <?php endif; ?>
        </dl>
      </div>
    </div>
  </div>

  <div class="col-lg-6">
    <div class="card border-0 shadow-sm h-100">
      <div class="card-body">
        <h6 class="text-uppercase text-muted small mb-3"><i class="fas fa-map me-1"></i>Preview</h6>
        <a href="https://www.google.com/maps/search/?api=1&query=<?= (float)$g['center_lat']; ?>,<?= (float)$g['center_lng']; ?>" target="_blank" rel="noopener" class="btn btn-sm btn-outline-primary mb-2">
          <i class="fas fa-external-link-alt me-1"></i>Open centre on Google Maps
        </a>
        <p class="small text-muted mb-0">
          The polygon overlay lands in Iter 3.3 with the Leaflet editor. For now the geofence is stored as a circle
          (centre + <?= number_format((int)$g['radius_m']); ?> m radius) and matched server-side by Haversine distance.
        </p>
      </div>
    </div>
  </div>
</div>

<div class="text-end mt-3">
  <button type="button" class="btn btn-sm btn-outline-danger" onclick="doDelete()"><i class="fas fa-trash me-1"></i>Delete geofence</button>
</div>

<form id="delForm" method="POST" action="<?= PROOT; ?>Geofences/delete/<?= (int)$g['c0d']; ?>" class="d-none"><?= csrf_field(); ?></form>

<?php $this->end(); ?>
<?php $this->start('section_js'); ?>
<script>
function doDelete() {
    $.confirm({ title: 'Delete geofence?', content: 'Soft-deletes the geofence. Historic geofence_events are kept.', type: 'red',
        buttons: { remove: { text: 'Delete', btnClass: 'btn-danger', action: () => document.getElementById('delForm').submit() }, back: function(){} } });
}
</script>
<?php $this->end(); ?>
