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

<div class="care-admin">
	<div class="ca-hero">
		<div class="ca-hero-inner row align-items-center g-3">
			<div class="col-lg-7">
				<p class="ca-kicker">Care platform</p>
				<h1 class="ca-title"><?php echo isset($page_title) ? htmlspecialchars($page_title) : 'Admin'; ?></h1>
				<p class="ca-sub">Sample data for layout review — not connected to live records.</p>
			</div>
			<div class="col-lg-5">
				<div class="ca-nav justify-content-lg-end">
					<a href="<?php echo base_url('admin/users'); ?>" class="btn btn-light">Users</a>
					<a href="<?php echo base_url('admin/documents'); ?>" class="btn btn-light">Documents</a>
					<a href="<?php echo base_url('admin/payments'); ?>" class="btn btn-light">Payments</a>
					<a href="<?php echo base_url('admin/analytics'); ?>" class="btn btn-primary">Analytics</a>
				</div>
			</div>
		</div>
	</div>

	<div class="row g-3 mb-4">
		<div class="col-md-4 col-lg-3">
			<div class="ca-stat h-100">
				<div class="ca-stat-icon"><i class="fa-solid fa-id-badge"></i></div>
				<p class="ca-stat-label">Role types</p>
				<p class="mb-2 small text-muted">Tags shown on profiles &amp; filters</p>
				<div>
					<button type="button" class="ca-role-chip ca-role-filter" data-role-filter="Caregiver">Caregiver</button>
					<button type="button" class="ca-role-chip ca-role-filter" data-role-filter="Care Assistant">Care assistant</button>
					<button type="button" class="ca-role-chip ca-role-filter" data-role-filter="Nanny">Nanny</button>
					<button type="button" class="ca-role-chip ca-role-filter" data-role-filter="Babysitter">Babysitter</button>
					<button type="button" class="ca-role-chip ca-role-filter" data-role-filter="all" title="Show all roles">All</button>
				</div>
			</div>
		</div>
		<div class="col-md-8 col-lg-9">
			<div class="ca-stat h-100">
				<div class="ca-stat-icon"><i class="fa-solid fa-folder-open"></i></div>
				<p class="ca-stat-label">Document states</p>
				<p class="small text-muted mb-3">Snapshot across caregivers</p>
				<div class="d-flex flex-wrap gap-2">
					<button type="button" class="ca-badge-soft ca-badge-none ca-doc-filter" data-doc-filter="none">No uploads: <?php echo (int) $doc_summary['none']; ?></button>
					<button type="button" class="ca-badge-soft ca-badge-pending ca-doc-filter" data-doc-filter="pending">Pending: <?php echo (int) $doc_summary['pending']; ?></button>
					<button type="button" class="ca-badge-soft ca-badge-approved ca-doc-filter" data-doc-filter="approved"><i class="fa-solid fa-check"></i> Approved: <?php echo (int) $doc_summary['approved']; ?></button>
					<button type="button" class="ca-badge-soft ca-badge-declined ca-doc-filter" data-doc-filter="declined">Declined: <?php echo (int) $doc_summary['declined']; ?></button>
					<button type="button" class="ca-badge-soft ca-badge-none ca-doc-filter" data-doc-filter="all" title="Show all">All</button>
				</div>
			</div>
		</div>
	</div>

	<div class="ca-card mb-4" id="docFilterTarget">
		<div class="ca-card-header d-flex flex-column flex-md-row justify-content-md-between align-items-md-center gap-2">
			<div>
				<h5 class="ca-card-title mb-1"><i class="fa-solid fa-filter me-2 text-success"></i>Caregivers by document state</h5>
				<p class="mb-0">Click a state above to filter this table (dummy data).</p>
			</div>
			<div class="d-flex gap-2 flex-wrap">
				<span class="badge rounded-pill ca-pill bg-light text-dark border" id="docFilterLabel">Filter: All</span>
				<a class="btn btn-sm btn-light border rounded-pill px-3" href="<?php echo base_url('admin/documents'); ?>">Open verification list</a>
			</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" id="docStateTable">
					<thead>
						<tr>
							<th>Name</th>
							<th>Role</th>
							<th>Docs uploaded?</th>
							<th>State</th>
							<th class="text-end">Profile</th>
						</tr>
					</thead>
					<tbody>
						<?php foreach ($caregivers_for_docs as $u): ?>
							<?php
							$state = isset($u['doc_state']) ? $u['doc_state'] : 'none';
							$state_label = ucfirst($state);
							$state_class = 'ca-badge-soft ca-badge-none';
							if ($state === 'pending') $state_class = 'ca-badge-soft ca-badge-pending';
							if ($state === 'approved') $state_class = 'ca-badge-soft ca-badge-approved';
							if ($state === 'declined') $state_class = 'ca-badge-soft ca-badge-declined';
							?>
							<tr data-doc-state="<?php echo htmlspecialchars($state); ?>" data-roles="<?php echo htmlspecialchars(implode(',', $u['roles'])); ?>">
								<td class="fw-semibold"><?php echo htmlspecialchars($u['name']); ?></td>
								<td>
									<?php foreach ($u['roles'] as $r): ?>
										<span class="ca-role-chip"><?php echo htmlspecialchars($r); ?></span>
									<?php endforeach; ?>
								</td>
								<td><?php echo htmlspecialchars($u['docs']); ?></td>
								<td><span class="<?php echo $state_class; ?>"><?php echo htmlspecialchars($state_label); ?></span></td>
								<td class="text-end">
									<a class="btn btn-sm btn-light border rounded-pill px-3" href="<?php echo base_url('admin/user_profile/' . rawurlencode($u['id'])); ?>">View</a>
								</td>
							</tr>
						<?php endforeach; ?>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="ca-card mb-4">
		<div class="ca-card-header">
			<h5 class="ca-card-title"><i class="fa-solid fa-clock-rotate-left me-2 text-success"></i>Pending document verifications</h5>
			<p>Queue preview — approve or reject from <a href="<?php echo base_url('admin/documents'); ?>">Document verification</a>.</p>
		</div>
		<div class="ca-card-body p-0">
			<div class="ca-table-wrap border-0 rounded-0 border-top">
				<table class="table ca-table ca-table-sm mb-0">
					<thead>
						<tr>
							<th>Name</th>
							<th>Role</th>
							<th>Uploaded</th>
							<th class="text-end">Quick actions</th>
						</tr>
					</thead>
					<tbody>
						<?php foreach ($pending_queue as $row): ?>
						<tr>
							<td class="fw-semibold"><?php echo htmlspecialchars($row['name']); ?></td>
							<td><?php echo htmlspecialchars($row['roles']); ?></td>
							<td><span class="text-muted small"><?php echo htmlspecialchars($row['files']); ?></span></td>
							<td class="text-end">
								<button type="button" class="btn btn-sm btn-ca-success px-3" title="Verify (sample)" disabled><i class="fa-solid fa-check"></i></button>
								<button type="button" class="btn btn-sm btn-outline-danger rounded-pill px-3" disabled>Decline</button>
							</td>
						</tr>
						<?php endforeach; ?>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<?php
	$n_open = $n_filled = $n_review = $n_paused = 0;
	foreach ($client_jobs as $_j) {
		switch ($_j['status'] ?? 'open') {
			case 'open':
				$n_open++;
				break;
			case 'filled':
				$n_filled++;
				break;
			case 'review':
				$n_review++;
				break;
			case 'paused':
				$n_paused++;
				break;
		}
	}
	$_job_icons = array(
		'Nanny' => 'fa-baby-carriage',
		'Care assistant' => 'fa-hand-holding-heart',
		'Babysitter' => 'fa-shapes',
		'Caregiver' => 'fa-user-nurse',
	);
	?>
	<div class="ca-card ca-jobs-board">
		<div class="ca-card-header d-flex flex-column flex-lg-row align-items-lg-center justify-content-lg-between gap-3">
			<div>
				<h5 class="ca-card-title mb-1"><i class="fa-solid fa-briefcase me-2 text-success"></i>Client jobs</h5>
				<p class="mb-0">Review descriptions, fix copy, and link or unlink caregivers (sample data).</p>
			</div>
			<div class="ca-jobs-summary d-flex flex-wrap gap-2">
				<span class="ca-jobs-pill"><strong><?php echo count($client_jobs); ?></strong> postings</span>
				<span class="ca-jobs-pill ca-jobs-pill--open"><?php echo (int) $n_open; ?> need caregiver</span>
				<span class="ca-jobs-pill ca-jobs-pill--filled"><?php echo (int) $n_filled; ?> linked</span>
				<?php if ($n_review): ?><span class="ca-jobs-pill ca-jobs-pill--review"><?php echo (int) $n_review; ?> in review</span><?php endif; ?>
				<?php if ($n_paused): ?><span class="ca-jobs-pill ca-jobs-pill--paused"><?php echo (int) $n_paused; ?> paused</span><?php endif; ?>
			</div>
		</div>
		<div class="ca-card-body ca-jobs-board__body">
			<?php foreach ($client_jobs as $job): ?>
			<?php
			$st = $job['status'] ?? 'open';
			$role = $job['role_type'] ?? 'Caregiver';
			$icon = $_job_icons[$role] ?? 'fa-briefcase';
			?>
			<article class="ca-job-card-v2">
				<div class="ca-job-card-v2__accent ca-job-card-v2__accent--<?php echo htmlspecialchars($st); ?>" aria-hidden="true"></div>
				<div class="ca-job-card-v2__inner">
					<header class="ca-job-card-v2__head">
						<div class="ca-job-card-v2__icon" aria-hidden="true">
							<i class="fa-solid <?php echo htmlspecialchars($icon); ?>"></i>
						</div>
						<div class="ca-job-card-v2__head-text flex-grow-1 min-w-0">
							<div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-2">
								<h6 class="ca-job-card-v2__title mb-0"><?php echo htmlspecialchars($job['title']); ?></h6>
								<span class="ca-job-status ca-job-status--<?php echo htmlspecialchars($st); ?>"><?php echo htmlspecialchars($job['status_label'] ?? ucfirst($st)); ?></span>
							</div>
							<div class="ca-job-meta d-flex flex-wrap gap-3 small">
								<span class="ca-job-meta__item"><i class="fa-solid fa-user text-success me-1"></i><?php echo htmlspecialchars($job['client']); ?></span>
								<span class="ca-job-meta__item"><i class="fa-solid fa-location-dot text-success me-1"></i><?php echo htmlspecialchars($job['location'] ?? '—'); ?></span>
								<span class="ca-job-meta__item"><i class="fa-regular fa-clock text-success me-1"></i><?php echo htmlspecialchars($job['schedule'] ?? '—'); ?></span>
								<span class="ca-job-meta__item"><i class="fa-solid fa-tag text-success me-1"></i><?php echo htmlspecialchars($role); ?></span>
								<span class="ca-job-meta__item"><i class="fa-solid fa-dollar-sign text-success me-1"></i><?php echo htmlspecialchars($job['rate'] ?? '—'); ?></span>
								<span class="ca-job-meta__item"><i class="fa-regular fa-calendar text-success me-1"></i>Posted <?php echo htmlspecialchars($job['posted'] ?? '—'); ?></span>
								<span class="ca-job-meta__item"><i class="fa-solid fa-users text-success me-1"></i><?php echo (int) ($job['applicants'] ?? 0); ?> applicants</span>
							</div>
							<div class="mt-2">
								<span class="badge rounded-pill ca-pill bg-light text-dark border fw-normal">ID <?php echo htmlspecialchars($job['id']); ?></span>
							</div>
						</div>
					</header>

					<div class="ca-job-card-v2__editor">
						<label class="form-label small text-uppercase fw-bold text-muted mb-1">Job title (admin edit)</label>
						<input type="text" class="form-control mb-3" value="<?php echo htmlspecialchars($job['title']); ?>" readonly>

						<label class="form-label small text-uppercase fw-bold text-muted mb-1">Job description</label>
						<textarea class="form-control ca-job-textarea" rows="3"><?php echo htmlspecialchars($job['description']); ?></textarea>
					</div>

					<footer class="ca-job-card-v2__actions row g-2 align-items-end">
						<div class="col-md-6">
							<label class="form-label small text-uppercase fw-bold text-muted mb-1">Linked caregiver</label>
							<div class="input-group">
								<span class="input-group-text bg-white border-end-0"><?php echo htmlspecialchars($job['linked']); ?></span>
								<button class="btn btn-outline-secondary" type="button" disabled>Unlink</button>
								<button class="btn btn-ca-success" type="button" disabled>Link…</button>
							</div>
						</div>
						<div class="col-md-6 d-flex flex-wrap justify-content-md-end gap-2">
							<button type="button" class="btn btn-outline-secondary rounded-pill px-3" disabled>Preview as client</button>
							<button type="button" class="btn btn-outline-primary rounded-pill px-4" disabled>Save description</button>
						</div>
					</footer>
				</div>
			</article>
			<br>
			<?php endforeach; ?>
		</div>
	</div>
</div>

<script>
(function () {
	var buttons = document.querySelectorAll('.ca-doc-filter');
	var roleButtons = document.querySelectorAll('.ca-role-filter');
	var table = document.getElementById('docStateTable');
	var label = document.getElementById('docFilterLabel');
	var target = document.getElementById('docFilterTarget');
	if (!buttons.length || !table) return;

	function setActive(btn) {
		buttons.forEach(function (b) { b.classList.remove('ca-doc-filter--active'); });
		btn.classList.add('ca-doc-filter--active');
	}

	function setRoleActive(btn) {
		roleButtons.forEach(function (b) { b.classList.remove('ca-role-filter--active'); });
		btn.classList.add('ca-role-filter--active');
	}

	var currentDoc = 'all';
	var currentRole = 'all';

	function apply() {
		var rows = table.querySelectorAll('tbody tr');
		var shown = 0;
		rows.forEach(function (tr) {
			var st = tr.getAttribute('data-doc-state') || '';
			var roles = (tr.getAttribute('data-roles') || '').toString();
			var okDoc = (currentDoc === 'all') ? true : (st === currentDoc);
			var okRole = (currentRole === 'all') ? true : (roles.indexOf(currentRole) !== -1);
			var ok = okDoc && okRole;
			tr.style.display = ok ? '' : 'none';
			if (ok) shown++;
		});
		var humanDoc = currentDoc === 'all' ? 'All states' : (currentDoc.charAt(0).toUpperCase() + currentDoc.slice(1));
		var humanRole = currentRole === 'all' ? 'All roles' : currentRole;
		if (label) label.textContent = 'Filter: ' + humanDoc + ' · ' + humanRole + ' (' + shown + ')';
		if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
	}

	buttons.forEach(function (btn) {
		btn.addEventListener('click', function () {
			var f = btn.getAttribute('data-doc-filter') || 'all';
			setActive(btn);
			currentDoc = f;
			apply();
		});
	});

	roleButtons.forEach(function (btn) {
		btn.addEventListener('click', function () {
			var r = btn.getAttribute('data-role-filter') || 'all';
			setRoleActive(btn);
			currentRole = r;
			apply();
		});
	});

	// default active
	var docAll = document.querySelector('.ca-doc-filter[data-doc-filter=\"all\"]');
	if (docAll) setActive(docAll);
	var roleAll = document.querySelector('.ca-role-filter[data-role-filter=\"all\"]');
	if (roleAll) setRoleActive(roleAll);
	apply();
})();
</script>
