<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 text-primary me-2"></i>Notifications &amp; Push Alerts</h4>
            <p class="text-muted mb-0">Broadcast messages, operational announcements, and automated routine reminders.</p>
        </div>
        <button class="btn btn-primary" onclick="alert('Notification dispatched to all store staff mobile applications!');">
            <i class="fa-solid fa-paper-plane me-1"></i> Send Broadcast Alert
        </button>
    </div>

    <div class="card border-0 shadow-sm rounded-4">
        <div class="card-body p-4">
            <h5 class="fw-bold mb-3 border-bottom pb-2">Recent System Notifications</h5>
            <div class="list-group list-group-flush">
                <div class="list-group-item px-0 py-3 border-light">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="fw-bold mb-0 text-dark"><i class="fa-solid fa-check-circle text-success me-2"></i>Evening Hygiene Check-In Completed</h6>
                        <small class="text-muted">10 mins ago</small>
                    </div>
                    <p class="text-muted small mb-0">Store Islamabad I8 Markaz submitted complete routine walkthrough video and toppings area photo verification.</p>
                </div>
                <div class="list-group-item px-0 py-3 border-light">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="fw-bold mb-0 text-dark"><i class="fa-solid fa-bell text-primary me-2"></i>Shift Reminder Dispatched</h6>
                        <small class="text-muted">2 hours ago</small>
                    </div>
                    <p class="text-muted small mb-0">Automated reminder triggered for on-duty Shift Supervisors.</p>
                </div>
            </div>
        </div>
    </div>
</div>
