<?php $this->start('body');
    $p         = $this->data['project'];
    $current   = $this->data['current']       ?? null;
    $slas      = $this->data['current_slas']  ?? [];
    $esc       = $this->data['current_esc']   ?? [];
    $history   = $this->data['history']       ?? [];
    $catalogue = $this->data['catalogue']     ?? [];

    $severityColor = ['P1'=>'#dc2626','P2'=>'#f59e0b','P3'=>'#0ea5e9','P4'=>'#94a3b8'];
?>
<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-shield-alt me-1 text-muted"></i>
            Callout Playbook · <?= htmlspecialchars($p['project_no']); ?> · <?= htmlspecialchars($p['project_name']); ?>
        </h5>
        <div class="text-muted" style="font-size:.72rem;">
            <?= htmlspecialchars($p['project_customer']); ?> ·
            <span style="text-transform:capitalize;"><?= htmlspecialchars($p['project_type']); ?></span>
        </div>
    </div>
    <a href="<?= PROOT; ?>ProjectStarter/index/<?= (int)$p['c0d']; ?>" class="btn btn-sm btn-outline-secondary"><i class="fas fa-arrow-left me-1"></i> Back to checklist</a>
</div>

<?php if ($current): ?>
    <div class="alert py-2 mb-3" style="background:#DCFCE7;border:1px solid #22c55e;color:#166534;font-size:.86rem;">
        <i class="fas fa-check-circle me-1"></i>
        <strong>Attached: <?= htmlspecialchars($current['playbook_code']); ?> · <?= htmlspecialchars($current['playbook_name']); ?></strong>
        · by <?= htmlspecialchars($current['attached_by_name']); ?> on <?= htmlspecialchars($current['attached_on']); ?>
    </div>
<?php else: ?>
    <div class="alert py-2 mb-3" style="background:#FEF3C7;border:1px solid #F59E0B;color:#78350F;font-size:.86rem;">
        <i class="fas fa-exclamation-triangle me-1"></i>
        <strong>No playbook attached yet.</strong> Callouts on this site have no defined SLA response.
    </div>
<?php endif; ?>

<!-- Attach picker -->
<div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-white"><strong><?= $current ? 'Change' : 'Attach'; ?> playbook</strong></div>
    <div class="card-body p-3" style="background:#F8FAFC;">
        <div class="row g-2 align-items-end">
            <div class="col-md-8">
                <label class="form-label" style="font-size:.78rem;">Playbook (active only)</label>
                <select id="cp_pb" class="form-select form-select-sm">
                    <option value="">— Choose —</option>
                    <?php foreach ($catalogue as $c): ?>
                        <option value="<?= (int)$c['c0d']; ?>" <?= ($current && (int)$current['playbook_id'] === (int)$c['c0d']) ? 'selected disabled' : ''; ?>>
                            <?= htmlspecialchars($c['code']); ?> · <?= htmlspecialchars($c['name']); ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label" style="font-size:.78rem;">Notes</label>
                <input type="text" id="cp_notes" class="form-control form-control-sm">
            </div>
            <div class="col-md-1 text-end">
                <button type="button" class="btn btn-sm btn-primary" onclick="cpAttach()"><i class="fas fa-link"></i></button>
            </div>
        </div>
    </div>
</div>

<?php if ($current && !empty($slas)): ?>
<!-- SLA matrix -->
<div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-white"><strong>SLA targets in force</strong></div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0 align-middle">
            <thead class="table-light">
                <tr><th>Severity</th><th>Response (h)</th><th>Resolution (h)</th><th>Notes</th></tr>
            </thead>
            <tbody>
                <?php foreach ($slas as $s):
                    $col = $severityColor[$s['severity']] ?? '#94A3B8';
                ?>
                    <tr>
                        <td><span class="badge" style="background:<?= $col; ?>;color:#fff;"><?= htmlspecialchars($s['severity']); ?></span></td>
                        <td class="small"><?= number_format((float)$s['response_target_hours'], 2); ?></td>
                        <td class="small"><?= number_format((float)$s['resolution_target_hours'], 2); ?></td>
                        <td class="small text-muted"><?= htmlspecialchars($s['notes']); ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<?php if ($current && !empty($esc)): ?>
<!-- Escalation chain -->
<div class="card border-0 shadow-sm mb-3">
    <div class="card-header bg-white"><strong>Escalation chain</strong></div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0 align-middle">
            <thead class="table-light">
                <tr><th style="width:80px;">Severity</th><th style="width:60px;">Step</th><th>Role</th><th style="width:130px;">After (h)</th><th>Notes</th></tr>
            </thead>
            <tbody>
                <?php foreach ($esc as $e):
                    $col = $severityColor[$e['severity']] ?? '#94A3B8';
                ?>
                    <tr>
                        <td><span class="badge" style="background:<?= $col; ?>;color:#fff;"><?= htmlspecialchars($e['severity']); ?></span></td>
                        <td class="text-center small"><?= (int)$e['step_no']; ?></td>
                        <td><?= htmlspecialchars($e['role']); ?></td>
                        <td class="small"><?= number_format((float)$e['notify_after_hours'], 2); ?></td>
                        <td class="text-muted small"><?= htmlspecialchars($e['notes']); ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<?php if (count($history) > 1): ?>
<!-- Attachment history -->
<div class="card border-0 shadow-sm">
    <div class="card-header bg-white"><strong>Attachment history</strong></div>
    <div class="card-body p-0">
        <table class="table table-sm mb-0 align-middle">
            <thead class="table-light">
                <tr><th>Playbook</th><th>Attached on</th><th>Attached by</th><th>Detached on</th></tr>
            </thead>
            <tbody>
                <?php foreach ($history as $h): ?>
                    <tr style="<?= (int)$h['deleted'] === 1 ? 'background:#F8FAFC;' : ''; ?>">
                        <td><code><?= htmlspecialchars($h['playbook_code']); ?></code> · <?= htmlspecialchars($h['playbook_name']); ?></td>
                        <td class="text-muted small"><?= htmlspecialchars($h['attached_on']); ?></td>
                        <td class="text-muted small"><?= htmlspecialchars($h['attached_by_name']); ?></td>
                        <td class="text-muted small"><?= htmlspecialchars($h['detached_on'] ?? '—'); ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<?php $this->end(); ?>

<?php $this->start('section_js'); ?>
<script>
function cpAttach() {
    var pbId = $('#cp_pb').val();
    if (!pbId) { rsToast('Pick a playbook.', 'error'); return; }
    $.post('<?= PROOT; ?>SpCallouts/attachAj',
        { project_id: <?= (int)$p['c0d']; ?>, playbook_id: pbId, notes: $('#cp_notes').val() }, 'json')
        .done(function (r) { if (r && r.ok) location.reload(); else rsToast('Failed: ' + (r.msg || 'unknown'), 'error'); });
}
</script>
<?php $this->end(); ?>
