<link href="<?php echo base_url('assets/css/admin-panel.css'); ?>" rel="stylesheet">

<style>
	.aoust-avatar {
		width: 34px;
		height: 34px;
		border-radius: 12px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-weight: 700;
		color: #0f5132;
		background: rgba(25, 135, 84, 0.14);
		border: 1px solid rgba(25, 135, 84, 0.25);
	}
	.aoust-muted { color: rgba(33, 37, 41, 0.7); }
	.aoust-table-actions .btn { padding-inline: 0.75rem; }
</style>

<div class="care-admin" id="aoustStay">
	<div class="ca-hero">
		<div class="ca-hero-inner row align-items-center g-3">
			<div class="col-lg-8">
				<p class="ca-kicker">AOUST portal</p>
				<h1 class="ca-title"><?php echo isset($page_title) ? htmlspecialchars($page_title) : 'AOUST — Stay Requests'; ?></h1>
				<p class="ca-sub mb-0">Approve/Reject buttons with colored status badges (JS dummy array).</p>
			</div>
			<div class="col-lg-4">
				<div class="ca-nav justify-content-lg-end">
					<a class="btn btn-light" href="<?php echo base_url('admin/aoust'); ?>">Dashboard</a>
					<a class="btn btn-light" href="<?php echo base_url('aoust_pickup'); ?>">Pickup</a>
					<a class="btn btn-primary" href="<?php echo base_url('aoust_stay'); ?>">Stay</a>
				</div>
			</div>
		</div>
	</div>

	<div class="ca-card mb-4">
		<div class="ca-card-header d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between gap-2">
			<div>
				<h5 class="ca-card-title mb-1"><i class="fa-solid fa-bed me-2 text-success"></i>Stay Requests</h5>
				<p class="mb-0">Approve or reject pending stay requests.</p>
			</div>
			<div class="d-flex align-items-stretch gap-2 flex-wrap justify-content-lg-end">
				<span class="badge rounded-pill ca-pill bg-light text-dark border" id="stayCountLabel">Showing 0</span>
				<select class="form-select" id="stayStatusFilter" style="width: 190px;">
					<option value="all">All statuses</option>
					<option value="Pending">Pending</option>
					<option value="Approved">Approved</option>
					<option value="Rejected">Rejected</option>
				</select>
			</div>
		</div>
		<div class="ca-card-body p-0">
			<div class="ca-table-wrap border-0 rounded-0 border-top">
				<table class="table ca-table table-striped mb-0 align-middle">
					<thead>
						<tr>
							<th>User</th>
							<th>Country</th>
							<th>City</th>
							<th>Duration</th>
							<th>Status</th>
							<th class="text-end">Actions</th>
						</tr>
					</thead>
					<tbody id="stayTbody"></tbody>
				</table>
			</div>
		</div>
		<div class="p-4 d-none" id="stayEmpty">
			<div class="text-center">
				<div class="mb-2"><i class="fa-regular fa-face-frown fs-2 text-muted"></i></div>
				<div class="fw-semibold">No requests found</div>
				<div class="aoust-muted small">Try changing the status filter.</div>
			</div>
		</div>
	</div>
</div>

<script>
(function () {
	var stayRequests = [
		{ id: 's1', userName: 'Daniel Brooks', country: 'UK', city: 'London', duration: '14 days', status: 'Pending' },
		{ id: 's2', userName: 'Evelyn Carter', country: 'Canada', city: 'Toronto', duration: '7 days', status: 'Approved' }
	];
	var statusFilter = 'all';

	function el(id) { return document.getElementById(id); }
	function escapeHtml(str) {
		return String(str)
			.replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
			.replaceAll('"', '&quot;').replaceAll("'", '&#039;');
	}
	function badgeForStatus(st) {
		var s = String(st || '').toLowerCase();
		if (s === 'pending') return '<span class="badge bg-warning-subtle text-warning border border-warning-subtle">Pending</span>';
		if (s === 'approved') return '<span class="badge bg-success-subtle text-success border border-success-subtle">Approved</span>';
		if (s === 'rejected') return '<span class="badge bg-danger-subtle text-danger border border-danger-subtle">Rejected</span>';
		return '<span class="badge bg-light text-dark border">—</span>';
	}

	function render() {
		var filtered = stayRequests.filter(function (s) {
			if (statusFilter === 'all') return true;
			return s.status === statusFilter;
		});

		var countLabel = el('stayCountLabel');
		if (countLabel) {
			var extra = statusFilter === 'all' ? '' : ' · filtered';
			countLabel.textContent = 'Showing ' + filtered.length + ' of ' + stayRequests.length + extra;
		}

		el('stayTbody').innerHTML = filtered.map(function (s) {
			var disabled = s.status !== 'Pending' ? ' disabled' : '';
			var initials = (s.userName || '?').split(/\s+/).filter(Boolean).slice(0, 2).map(function (x) { return x[0]; }).join('').toUpperCase();
			return '' +
				'<tr>' +
					'<td class="fw-semibold">' +
						'<div class="d-flex align-items-center gap-2">' +
							'<span class="aoust-avatar" aria-hidden="true">' + escapeHtml(initials) + '</span>' +
							'<span>' + escapeHtml(s.userName) + '</span>' +
						'</div>' +
					'</td>' +
					'<td>' + escapeHtml(s.country) + '</td>' +
					'<td>' + escapeHtml(s.city) + '</td>' +
					'<td>' + escapeHtml(s.duration) + '</td>' +
					'<td>' + badgeForStatus(s.status) + '</td>' +
					'<td class="text-end">' +
						'<div class="btn-group aoust-table-actions" role="group">' +
							'<button class="btn btn-sm btn-ca-success" data-action="approve" data-id="' + escapeHtml(s.id) + '"' + disabled + ' title="Approve"><i class="fa-solid fa-check"></i></button>' +
							'<button class="btn btn-sm btn-outline-danger" data-action="reject" data-id="' + escapeHtml(s.id) + '"' + disabled + ' title="Reject"><i class="fa-solid fa-xmark"></i></button>' +
						'</div>' +
					'</td>' +
				'</tr>';
		}).join('');

		var empty = el('stayEmpty');
		if (empty) {
			if (filtered.length === 0) empty.classList.remove('d-none');
			else empty.classList.add('d-none');
		}
	}

	document.getElementById('aoustStay').addEventListener('click', function (e) {
		var btn = e.target.closest('button[data-action]');
		if (!btn) return;
		var action = btn.getAttribute('data-action');
		var id = btn.getAttribute('data-id');
		var s = stayRequests.find(function (x) { return x.id === id; });
		if (!s || s.status !== 'Pending') return;
		s.status = (action === 'approve') ? 'Approved' : 'Rejected';
		render();
	});

	el('stayStatusFilter').addEventListener('change', function () {
		statusFilter = el('stayStatusFilter').value || 'all';
		render();
	});

	render();
})();
</script>

