38471-vm/outlets_html.php
2026-02-25 09:58:14 +00:00

115 lines
7.4 KiB
PHP

<?php elseif ($page === 'outlets' && ($_SESSION['user_role_name'] ?? '') === 'Administrator'): ?>
<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">
<h5 class="modal-title fw-bold" id="outletModalTitle">Add Outlet</h5>
<button type="button" class="btn-close" 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>