<h3>Notification templates</h3>
<p class="text-faint text-sm">Placeholders like <code>{{ticket_no}}</code>, <code>{{contact_name}}</code>, <code>{{subject}}</code> are substituted when a notification is sent.</p>
<?php foreach ($templates as $t) : $fid = 'tpl-' . $t['id']; ?>
  <div class="card mb-0 mt-3">
    <div class="card-header">
      <h3><?= e($t['event_code']) ?> <span class="badge badge-outline"><?= e($t['channel']) ?></span></h3>
      <label class="checkbox-row mb-0"><input type="checkbox" name="is_active" form="<?= $fid ?>" <?= $t['is_active']?'checked':'' ?> value="1"> Active</label>
    </div>
    <div class="card-body">
      <form method="post" id="<?= $fid ?>" action="<?= url('/admin/templates/' . $t['id']) ?>"><?= csrf_field() ?></form>
      <?php if ($t['channel'] === 'email') : ?>
        <div class="form-group"><label>Subject</label><input type="text" name="subject" form="<?= $fid ?>" value="<?= e($t['subject']) ?>"></div>
      <?php endif; ?>
      <div class="form-group"><label>Body</label><textarea name="body" form="<?= $fid ?>" rows="4"><?= e($t['body']) ?></textarea></div>
      <button class="btn btn-sm" form="<?= $fid ?>">Save template</button>
    </div>
  </div>
<?php endforeach; ?>

<div class="ticket-grid mt-3" style="grid-template-columns:1fr 340px">
  <div class="card">
    <div class="card-header"><h3>Canned responses</h3></div>
    <div class="table-wrap">
      <table class="table">
        <thead><tr><th>Title</th><th>Category</th><th>Body</th><th>Status</th><th></th></tr></thead>
        <tbody>
        <?php foreach ($canned as $c) : ?>
          <tr>
            <td style="white-space:nowrap"><?= e($c['title']) ?></td>
            <td class="text-sm"><?= e($c['category_name'] ?? '—') ?></td>
            <td class="text-sm"><?= e(mb_strimwidth($c['body'], 0, 100, '…')) ?></td>
            <td><span class="badge <?= $c['is_active'] ? 'badge-resolved' : 'badge-closed' ?>"><?= $c['is_active'] ? 'Active' : 'Inactive' ?></span></td>
            <td>
              <div class="flex gap-2">
                <button type="button" class="btn btn-sm" data-modal-open="edit-canned-<?= $c['id'] ?>">Edit</button>
                <form method="post" action="<?= url('/admin/canned/' . $c['id'] . '/delete') ?>" onsubmit="return confirm('Delete this canned response?');">
                  <?= csrf_field() ?>
                  <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                </form>
              </div>

              <div class="modal-overlay" id="edit-canned-<?= $c['id'] ?>">
                <div class="modal-box">
                  <div class="modal-header"><h3>Edit canned response</h3><button type="button" class="modal-close" data-modal-close aria-label="Close">&times;</button></div>
                  <div class="modal-body">
                    <form method="post" action="<?= url('/admin/canned/' . $c['id']) ?>">
                      <?= csrf_field() ?>
                      <div class="form-group"><label>Title <span class="req">*</span></label><input type="text" name="title" required value="<?= e($c['title']) ?>"></div>
                      <div class="form-group">
                        <label>Category</label>
                        <select name="category_id">
                          <option value="">— None —</option>
                          <?php foreach ($categories as $cat) : ?>
                            <option value="<?= $cat['id'] ?>" <?= $c['category_id'] == $cat['id'] ? 'selected' : '' ?>><?= $cat['parent_id'] ? '— ' : '' ?><?= e($cat['name']) ?></option>
                          <?php endforeach; ?>
                        </select>
                      </div>
                      <div class="form-group"><label>Body <span class="req">*</span></label><textarea name="body" rows="4" required><?= e($c['body']) ?></textarea></div>
                      <label class="checkbox-row mb-2"><input type="checkbox" name="is_active" value="1" <?= $c['is_active'] ? 'checked' : '' ?>> Active</label>
                      <button type="submit" class="btn btn-primary btn-block">Save changes</button>
                    </form>
                  </div>
                </div>
              </div>
            </td>
          </tr>
        <?php endforeach; ?>
        <?php if (empty($canned)) : ?><tr><td colspan="5" class="text-faint">No canned responses yet.</td></tr><?php endif; ?>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card">
    <div class="card-header"><h3>Add canned response</h3></div>
    <div class="card-body">
      <form method="post" action="<?= url('/admin/canned') ?>">
        <?= csrf_field() ?>
        <div class="form-group"><label>Title <span class="req">*</span></label><input type="text" name="title" required></div>
        <div class="form-group">
          <label>Category</label>
          <select name="category_id">
            <option value="">— None —</option>
            <?php foreach ($categories as $cat) : ?>
              <option value="<?= $cat['id'] ?>"><?= $cat['parent_id'] ? '— ' : '' ?><?= e($cat['name']) ?></option>
            <?php endforeach; ?>
          </select>
        </div>
        <div class="form-group"><label>Body <span class="req">*</span></label><textarea name="body" rows="4" required placeholder="Use {{contact_name}}, {{ticket_no}}, {{agent_name}}…"></textarea></div>
        <button class="btn btn-primary btn-block">Add</button>
      </form>
    </div>
  </div>
</div>
