<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold mb-1"><i class="fa-solid fa-bell-slash text-primary me-2"></i>Escalation &amp; Overdue Settings</h4>
            <p class="text-muted mb-0">Define alert triggers when check-in routines are missed or delayed past deadlines.</p>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4">
                <div class="card-body p-4 p-md-5">
                    <form onsubmit="event.preventDefault(); alert('Escalation settings updated!');">
                        <h5 class="fw-bold mb-3 border-bottom pb-2">Grace Period &amp; Warning Rules</h5>
                        <div class="row g-3 mb-4">
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Check-In Grace Period</label>
                                <div class="input-group">
                                    <input type="number" class="form-control rounded-start-3" value="15">
                                    <span class="input-group-text rounded-end-3">Minutes</span>
                                </div>
                                <small class="text-muted">Allowed delay before marking routine overdue.</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-semibold">Reminder Push Notification</label>
                                <div class="input-group">
                                    <input type="number" class="form-control rounded-start-3" value="10">
                                    <span class="input-group-text rounded-end-3">Minutes Prior</span>
                                </div>
                                <small class="text-muted">Staff app alert sent before scheduled check-in time.</small>
                            </div>
                        </div>

                        <h5 class="fw-bold mb-3 border-bottom pb-2">Multi-Tier Escalation Levels</h5>
                        <div class="mb-3">
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="escTier1" checked>
                                <label class="form-check-label fw-semibold" for="escTier1">Level 1: Notify Shift Supervisor via App Alert (at 15 mins overdue)</label>
                            </div>
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="escTier2" checked>
                                <label class="form-check-label fw-semibold" for="escTier2">Level 2: SMS &amp; WhatsApp Alert to Area Store Manager (at 30 mins overdue)</label>
                            </div>
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="escTier3" checked>
                                <label class="form-check-label fw-semibold" for="escTier3">Level 3: Central Operations Email &amp; Dashboard Incident Flag (at 60 mins overdue)</label>
                            </div>
                        </div>

                        <div class="mt-4 pt-3 border-top text-end">
                            <button type="submit" class="btn btn-primary px-5 fw-semibold">Save Escalation Configuration</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
