<?php $this->start('body'); ?>
<?php $a = $this->data['a'];
$sev = ['info'=>'secondary','low'=>'info','medium'=>'warning','high'=>'danger','critical'=>'danger'][$a['severity']] ?? 'secondary';
$st  = ['open'=>'danger','acknowledged'=>'warning','resolved'=>'success','dismissed'=>'secondary'][$a['status']] ?? 'secondary';
?>

<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-exclamation-triangle me-2" style="color:var(--pacific-navy);"></i><?= htmlspecialchars($a['title']); ?>
      <span class="badge bg-<?= $sev; ?> ms-2" style="font-size:.65em;vertical-align:middle;"><?= htmlspecialchars($a['severity']); ?></span>
      <span class="badge bg-<?= $st; ?> ms-1" style="font-size:.65em;vertical-align:middle;text-transform:capitalize;"><?= htmlspecialchars($a['status']); ?></span>
    </h5>
    <div class="text-muted small">
      <code><?= htmlspecialchars($a['kind']); ?></code> · <?= humanDateTime($a['ts']); ?>
      <?php if ($a['truck_reg']):     ?> · <a href="<?= PROOT; ?>Trucks/view/<?= (int)$a['truck_id']; ?>"><?= htmlspecialchars($a['truck_reg']); ?></a><?php endif; ?>
      <?php if ($a['device_code']):   ?> · <a href="<?= PROOT; ?>GpsDevices/view/<?= (int)$a['device_id']; ?>" class="font-monospace"><?= htmlspecialchars($a['device_code']); ?></a><?php endif; ?>
      <?php if ($a['geofence_name']): ?> · <a href="<?= PROOT; ?>Geofences/view/<?= (int)$a['geofence_id']; ?>"><?= htmlspecialchars($a['geofence_name']); ?></a><?php endif; ?>
      <?php if ($a['rule_name']):     ?> · rule: <a href="<?= PROOT; ?>AlertRules/edit/<?= (int)$a['rule_id']; ?>"><?= htmlspecialchars($a['rule_name']); ?></a><?php endif; ?>
    </div>
  </div>
  <a href="<?= PROOT; ?>Alerts" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left me-1"></i>Back</a>
</div>

<?= flashHtml(); ?>

<div class="card border-0 shadow-sm mb-3">
  <div class="card-body py-2 d-flex flex-wrap gap-2 align-items-center">
    <span class="text-uppercase text-muted small me-2"><i class="fas fa-play-circle me-1"></i>Actions</span>
    <?php if ($a['status'] === 'open'): ?>
      <form method="POST" action="<?= PROOT; ?>Alerts/acknowledge/<?= (int)$a['c0d']; ?>" class="d-inline"><?= csrf_field(); ?><button class="btn btn-sm btn-warning"><i class="fas fa-check me-1"></i>Acknowledge</button></form>
    <?php endif; ?>
    <?php if (in_array($a['status'], ['open','acknowledged'], true)): ?>
      <button type="button" class="btn btn-sm btn-success" onclick="doResolve()"><i class="fas fa-check-double me-1"></i>Resolve</button>
      <button type="button" class="btn btn-sm btn-outline-secondary" onclick="doDismiss()"><i class="fas fa-times me-1"></i>Dismiss</button>
    <?php endif; ?>
    <span class="ms-auto small text-muted">
      <?php if ($a['sms_sent']):   ?><i class="fas fa-sms text-success me-1" title="SMS sent"></i><?php endif; ?>
      <?php if ($a['email_sent']): ?><i class="fas fa-envelope text-success me-1" title="Email sent"></i><?php endif; ?>
    </span>
  </div>
</div>

<div class="row g-3">
  <div class="col-lg-7">
    <div class="card border-0 shadow-sm">
      <div class="card-body">
        <h6 class="text-uppercase text-muted small mb-3">Details</h6>
        <p class="mb-3 small"><?= nl2br(htmlspecialchars($a['message'])); ?></p>
        <dl class="row mb-0 small">
          <dt class="col-4 text-muted fw-normal">When (device)</dt><dd class="col-8"><?= humanDateTime($a['ts']); ?></dd>
          <dt class="col-4 text-muted fw-normal">Created (server)</dt><dd class="col-8"><?= humanDateTime($a['created_on']); ?></dd>
          <?php if ($a['lat'] !== null): ?>
            <dt class="col-4 text-muted fw-normal">Location</dt>
            <dd class="col-8 font-monospace"><?= number_format((float)$a['lat'], 5); ?>, <?= number_format((float)$a['lng'], 5); ?> · <a href="https://www.google.com/maps/search/?api=1&query=<?= (float)$a['lat']; ?>,<?= (float)$a['lng']; ?>" target="_blank" rel="noopener"><i class="fas fa-external-link-alt fa-xs"></i></a></dd>
          <?php endif; ?>
          <?php if ($a['acknowledged_by_name']): ?>
            <dt class="col-4 text-muted fw-normal">Acknowledged</dt>
            <dd class="col-8"><?= humanDateTime($a['acknowledged_at']); ?> by <?= htmlspecialchars($a['acknowledged_by_name']); ?></dd>
          <?php endif; ?>
          <?php if ($a['resolution_note']): ?>
            <dt class="col-4 text-muted fw-normal">Resolution note</dt>
            <dd class="col-8"><?= nl2br(htmlspecialchars($a['resolution_note'])); ?></dd>
          <?php endif; ?>
        </dl>
      </div>
    </div>
  </div>
  <div class="col-lg-5">
    <?php if ($a['payload_json']): ?>
      <div class="card border-0 shadow-sm">
        <div class="card-body">
          <h6 class="text-uppercase text-muted small mb-2">Payload</h6>
          <pre class="small mb-0" style="background:#f8f9fa;padding:.5rem;border-radius:.25rem;"><?= htmlspecialchars(json_encode(json_decode((string)$a['payload_json'], true), JSON_PRETTY_PRINT|JSON_UNESCAPED_SLASHES)); ?></pre>
        </div>
      </div>
    <?php endif; ?>
  </div>
</div>

<form id="resForm" method="POST" action="<?= PROOT; ?>Alerts/resolve/<?= (int)$a['c0d']; ?>" class="d-none"><?= csrf_field(); ?><input type="hidden" name="resolution_note" id="fResNote"></form>
<form id="disForm" method="POST" action="<?= PROOT; ?>Alerts/dismiss/<?= (int)$a['c0d']; ?>" class="d-none"><?= csrf_field(); ?><input type="hidden" name="resolution_note" id="fDisNote"></form>

<?php $this->end(); ?>
<?php $this->start('section_js'); ?>
<script>
function doResolve() {
    $.confirm({ title: 'Resolve alert?', content: '<label class="form-label small">Resolution note</label><textarea id="rn" class="form-control form-control-sm" rows="3" placeholder="What was the root cause / action taken?"></textarea>', type: 'green',
        buttons: { go: { text: 'Resolve', btnClass: 'btn-success', action: function() { document.getElementById('fResNote').value = document.getElementById('rn').value; document.getElementById('resForm').submit(); } }, back: function(){} } });
}
function doDismiss() {
    $.confirm({ title: 'Dismiss alert?', content: '<label class="form-label small">Reason (optional)</label><textarea id="dn" class="form-control form-control-sm" rows="2" placeholder="False positive? Test signal? Duplicate?"></textarea>', type: 'red',
        buttons: { go: { text: 'Dismiss', btnClass: 'btn-outline-secondary', action: function() { document.getElementById('fDisNote').value = document.getElementById('dn').value; document.getElementById('disForm').submit(); } }, back: function(){} } });
}
</script>
<?php $this->end(); ?>
