        <div class="card border-0 shadow-sm rounded-4 mb-4">
            <div class="card-header bg-white border-bottom-0 pt-4 pb-0 px-4 d-flex justify-content-between align-items-center">
                <h5 class="fw-bold mb-0"><i class="bi bi-shop text-primary me-2"></i> Manage Outlets</h5>
                <button class="btn btn-primary rounded-pill px-3 py-2" data-bs-toggle="modal" data-bs-target="#addOutletModal">
                    <i class="bi bi-plus-lg me-1"></i> Add Outlet
                </button>
            </div>
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Address</th>
                                <th>Phone</th>
                                <th>Status</th>
                                <th>Created At</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($data['outlets'] as $o): ?>
                                <tr>
                                    <td>#<?= $o['id'] ?></td>
                                    <td class="fw-semibold text-dark"><?= htmlspecialchars($o['name']) ?></td>
                                    <td class="text-muted small"><?= htmlspecialchars($o['address'] ?: '-') ?></td>
                                    <td><?= htmlspecialchars($o['phone'] ?: '-') ?></td>
                                    <td><span class="badge bg-<?= $o['status'] === 'active' ? 'success' : 'secondary' ?> bg-opacity-10 text-<?= $o['status'] === 'active' ? 'success' : 'secondary' ?> rounded-pill px-2"><?= ucfirst($o['status']) ?></span></td>
                                    <td class="small text-muted"><?= htmlspecialchars($o['created_at']) ?></td>
                                    <td class="text-end">
                                        <button class="btn btn-light btn-sm rounded-circle me-1" onclick="editOutlet(<?= htmlspecialchars(json_encode($o)) ?>)" title="Edit">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <?php if ($o['id'] !== 1): ?>
                                        <form method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this outlet?');">
                                            <input type="hidden" name="id" value="<?= $o['id'] ?>">
                                            <button type="submit" name="delete_outlet" class="btn btn-light btn-sm rounded-circle text-danger" title="Delete">
                                                <i class="bi bi-trash"></i>
                                            </button>
                                        </form>
                                        <?php endif; ?>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- Add/Edit Modal -->
        <div class="modal fade" id="addOutletModal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content border-0 shadow rounded-4">
                    <form method="POST">
                        <input type="hidden" name="id" id="outlet_id">
                        <div class="modal-header border-bottom-0 pb-0 bg-primary text-white">
                            <h5 class="modal-title fw-bold" id="outletModalTitle">Add Outlet</h5>
                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body p-4">
                            <div class="mb-3">
                                <label class="form-label small fw-semibold text-muted">Name</label>
                                <input type="text" name="name" id="outlet_name" class="form-control rounded-3" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label small fw-semibold text-muted">Phone</label>
                                <input type="text" name="phone" id="outlet_phone" class="form-control rounded-3">
                            </div>
                            <div class="mb-3">
                                <label class="form-label small fw-semibold text-muted">Address</label>
                                <textarea name="address" id="outlet_address" class="form-control rounded-3" rows="2"></textarea>
                            </div>
                            <div class="mb-0">
                                <label class="form-label small fw-semibold text-muted">Status</label>
                                <select name="status" id="outlet_status" class="form-select rounded-3">
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer border-top-0 pt-0">
                            <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" name="add_outlet" id="outletSubmitBtn" class="btn btn-primary rounded-pill px-4">Save Outlet</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script>
            function editOutlet(o) {
                document.getElementById('outlet_id').value = o.id;
                document.getElementById('outlet_name').value = o.name;
                document.getElementById('outlet_phone').value = o.phone || '';
                document.getElementById('outlet_address').value = o.address || '';
                document.getElementById('outlet_status').value = o.status;
                document.getElementById('outletModalTitle').innerText = 'Edit Outlet';
                document.getElementById('outletSubmitBtn').name = 'edit_outlet';
                document.getElementById('outletSubmitBtn').innerText = 'Update Outlet';
                new bootstrap.Modal(document.getElementById('addOutletModal')).show();
            }
            document.getElementById('addOutletModal').addEventListener('hidden.bs.modal', function () {
                document.getElementById('outlet_id').value = '';
                document.getElementById('outlet_name').value = '';
                document.getElementById('outlet_phone').value = '';
                document.getElementById('outlet_address').value = '';
                document.getElementById('outlet_status').value = 'active';
                document.getElementById('outletModalTitle').innerText = 'Add Outlet';
                document.getElementById('outletSubmitBtn').name = 'add_outlet';
                document.getElementById('outletSubmitBtn').innerText = 'Save Outlet';
            });
        </script>
