<?php $this->start('body');
    $rows = $this->data['rows'] ?? [];
?>
<div class="d-flex align-items-center justify-content-between mb-3">
    <div>
        <h5 class="mb-0" style="font-weight:600;"><i class="fas fa-ambulance me-2 text-muted"></i>Callout Categories &middot; SLA Matrix</h5>
        <div class="text-muted small mt-1" style="font-size:.72rem;">Emergency/Urgent/Routine categories with per-category SLA targets. Contracts can override per-project.</div>
    </div>
    <button type="button" class="btn btn-sm" id="btn_add" style="background:#7A9E7E;border-color:#7A9E7E;color:#fff;font-weight:600;"><i class="fas fa-plus me-1"></i>Add category</button>
</div>

<div class="card border-0 shadow-sm">
    <div class="table-responsive">
        <table class="table table-sm mb-0 align-middle">
            <thead class="table-light"><tr><th></th><th>Code</th><th>Name</th><th class="text-end">Priority</th><th class="text-end">Response SLA</th><th class="text-end">Restore SLA</th><th class="text-end">Penalty %/hr</th><th>Status</th><th></th></tr></thead>
            <tbody id="cc_body">
                <?php foreach ($rows as $r): ?>
                    <tr data-id="<?= (int)$r['c0d']; ?>" data-json='<?= htmlspecialchars(json_encode($r), ENT_QUOTES); ?>'>
                        <td><span style="display:inline-block;width:12px;height:12px;border-radius:50%;background:<?= htmlspecialchars((string)($r['color_hex'] ?: '#94A3B8')); ?>;"></span></td>
                        <td class="small"><strong><?= htmlspecialchars($r['code']); ?></strong></td>
                        <td class="small"><?= htmlspecialchars($r['name']); ?></td>
                        <td class="text-end small"><?= (int)$r['priority']; ?></td>
                        <td class="text-end small"><?= $r['sla_response_hrs'] !== null ? (int)$r['sla_response_hrs'] . 'h' : '—'; ?></td>
                        <td class="text-end small"><?= $r['sla_restoration_hrs'] !== null ? (int)$r['sla_restoration_hrs'] . 'h' : '—'; ?></td>
                        <td class="text-end small"><?= $r['penalty_pct_per_hr'] !== null ? number_format((float)$r['penalty_pct_per_hr'], 2) . '%' : '—'; ?></td>
                        <td><?= (int)$r['is_active'] === 1 ? '<span class="badge bg-success" style="font-size:.6rem;">Active</span>' : '<span class="badge bg-light text-muted" style="font-size:.6rem;">Inactive</span>'; ?></td>
                        <td class="text-end">
                            <button type="button" class="btn btn-sm btn-link p-0 me-2 cc_edit"><i class="fas fa-pen" style="color:#7A8BA1;"></i></button>
                            <button type="button" class="btn btn-sm btn-link p-0 cc_del text-danger"><i class="fas fa-times"></i></button>
                        </td>
                    </tr>
                <?php endforeach; ?>
                <?php if (empty($rows)): ?><tr><td colspan="9" class="text-center text-muted py-4">No categories yet.</td></tr><?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

<script>
(function () {
    var PROOT = '<?= PROOT; ?>';
    function esc(s) { return String(s == null ? '' : s).replace(/[&<>"']/g, function (c) { return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]); }); }
    function form(d) {
        d = d || {};
        return '<form id="cc_form">' +
            '<input type="hidden" name="c0d" value="' + (d.c0d || '') + '">' +
            '<div class="row g-2 mb-2">' +
              '<div class="col-4"><label class="form-label small">Code *</label><input name="code" class="form-control form-control-sm" value="' + esc(d.code||'') + '" required></div>' +
              '<div class="col-5"><label class="form-label small">Name *</label><input name="name" class="form-control form-control-sm" value="' + esc(d.name||'') + '" required></div>' +
              '<div class="col-3"><label class="form-label small">Priority</label><input name="priority" type="number" min="1" max="9" class="form-control form-control-sm" value="' + (d.priority || 3) + '"></div>' +
            '</div>' +
            '<div class="row g-2 mb-2">' +
              '<div class="col-4"><label class="form-label small">Response SLA (hrs)</label><input name="sla_response_hrs" type="number" min="0" class="form-control form-control-sm" value="' + (d.sla_response_hrs || '') + '"></div>' +
              '<div class="col-4"><label class="form-label small">Restore SLA (hrs)</label><input name="sla_restoration_hrs" type="number" min="0" class="form-control form-control-sm" value="' + (d.sla_restoration_hrs || '') + '"></div>' +
              '<div class="col-4"><label class="form-label small">Penalty %/hr</label><input name="penalty_pct_per_hr" type="number" step="0.01" min="0" class="form-control form-control-sm" value="' + (d.penalty_pct_per_hr || '') + '"></div>' +
            '</div>' +
            '<div class="row g-2 mb-2">' +
              '<div class="col-6"><label class="form-label small">Color</label><input name="color_hex" type="color" class="form-control form-control-sm" value="' + (d.color_hex || '#7A8BA1') + '"></div>' +
              '<div class="col-6 pt-4"><div class="form-check"><input type="checkbox" name="is_active" class="form-check-input" ' + (parseInt(d.is_active||1)===1?'checked':'') + '><label class="form-check-label small">Active</label></div></div>' +
            '</div>' +
        '</form>';
    }
    function save(d) {
        $.confirm({
            title: d && d.c0d ? 'Edit category' : 'Add category', columnClass:'col-md-6', content: form(d), type:'green',
            buttons: { save: { text:'Save', btnClass:'btn-success', action: function () {
                var f = document.getElementById('cc_form');
                var p = {
                    c0d: f.c0d.value, code: f.code.value, name: f.name.value, priority: f.priority.value,
                    sla_response_hrs: f.sla_response_hrs.value, sla_restoration_hrs: f.sla_restoration_hrs.value,
                    penalty_pct_per_hr: f.penalty_pct_per_hr.value, color_hex: f.color_hex.value,
                    is_active: f.is_active.checked ? 1 : 0
                };
                $.post(PROOT + 'CalloutCategories/saveAj', p, function (r) {
                    if (r && r.ok) { rsToast('Saved.','success'); setTimeout(function(){location.reload();}, 400); }
                    else $.alert({title:'Failed', content:(r && r.msg) || 'Server error', type:'red'});
                }, 'json');
            }}, cancel: function () {} }
        });
    }
    document.getElementById('btn_add').addEventListener('click', function () { save({}); });
    document.getElementById('cc_body').addEventListener('click', function (e) {
        var editB = e.target.closest('.cc_edit'), delB = e.target.closest('.cc_del');
        if (!editB && !delB) return;
        var tr = (editB || delB).closest('tr');
        var data = JSON.parse(tr.getAttribute('data-json'));
        if (editB) { save(data); return; }
        $.confirm({ title:'Remove?', type:'red', content:'<code>' + esc(data.code) + '</code>', buttons: {
            yes: { text:'Remove', btnClass:'btn-danger', action: function () {
                $.post(PROOT + 'CalloutCategories/deleteAj', { id: data.c0d }, function (r) {
                    if (r && r.ok) { rsToast('Removed.','success'); setTimeout(function(){location.reload();}, 300); }
                    else $.alert({title:'Failed', content:(r && r.msg) || 'Server error', type:'red'});
                }, 'json');
            }}, cancel: function () {}
        }});
    });
})();
</script>
<?php $this->end(); ?>
