<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<style>
	.attendance-detail-shell {
		display: grid;
		gap: 18px;
	}
	.attendance-detail-toolbar {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		align-items: center;
		justify-content: space-between;
	}
	.attendance-detail-toolbar form {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		align-items: center;
	}
	.attendance-detail-toolbar input[type="month"] {
		border: 0;
		border-radius: 14px;
		padding: 12px 14px;
		background: var(--field-bg);
		color: var(--field-ink);
		box-shadow: inset 0 0 0 1px rgba(20, 41, 64, 0.12);
		font-family: inherit;
	}
	.attendance-summary {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
		gap: 12px;
	}
	.attendance-calendar-panel {
		background: var(--panel);
		border-radius: 22px;
		box-shadow: var(--shadow);
		padding: 18px;
		display: grid;
		gap: 14px;
	}
	.attendance-calendar-head {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 10px;
		align-items: center;
	}
	.attendance-calendar-legend {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		font-size: 0.9rem;
		color: var(--muted);
	}
	.attendance-calendar-legend span {
		display: inline-flex;
		align-items: center;
		gap: 6px;
	}
	.attendance-calendar-legend i {
		width: 10px;
		height: 10px;
		border-radius: 999px;
		display: inline-block;
	}
	.attendance-calendar-grid {
		display: grid;
		grid-template-columns: repeat(7, minmax(0, 1fr));
		gap: 8px;
	}
	.attendance-calendar-weekday,
	.attendance-calendar-day {
		border-radius: 14px;
	}
	.attendance-calendar-weekday {
		padding: 8px 0;
		text-align: center;
		font-size: 0.82rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--muted);
		background: rgba(96, 133, 169, 0.08);
	}
	.attendance-calendar-day {
		min-height: 76px;
		padding: 10px 8px;
		background: var(--card);
		box-shadow: inset 0 0 0 1px rgba(20, 41, 64, 0.08);
		display: grid;
		align-content: space-between;
		gap: 6px;
	}
	.attendance-calendar-day strong {
		font-size: 1rem;
	}
	.attendance-calendar-day small {
		font-size: 0.78rem;
		line-height: 1.2;
		color: var(--muted);
	}
	.attendance-calendar-day.is-present {
		background: rgba(46, 204, 113, 0.16);
		box-shadow: inset 0 0 0 1px rgba(46, 204, 113, 0.24);
	}
	.attendance-calendar-day.is-absent {
		background: rgba(231, 76, 60, 0.16);
		box-shadow: inset 0 0 0 1px rgba(231, 76, 60, 0.24);
	}
	.attendance-calendar-day.is-free {
		background: rgba(113, 128, 150, 0.12);
		box-shadow: inset 0 0 0 1px rgba(113, 128, 150, 0.18);
	}
	.attendance-calendar-day.is-future {
		opacity: 0.62;
	}
	.attendance-calendar-day.is-empty {
		background: transparent;
		box-shadow: none;
		min-height: 0;
		padding: 0;
	}
	.attendance-detail-table-wrap {
		background: var(--panel);
		border-radius: 22px;
		box-shadow: var(--shadow);
		overflow: hidden;
	}
	.attendance-detail-table {
		width: 100%;
		border-collapse: collapse;
	}
	.attendance-detail-table th,
	.attendance-detail-table td {
		padding: 13px 14px;
		text-align: left;
		border-bottom: 1px solid var(--border);
		vertical-align: top;
	}
	.attendance-detail-table th {
		background: var(--card);
		font-size: 0.83rem;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--muted);
	}
	.attendance-detail-table tr:last-child td {
		border-bottom: 0;
	}
	.day-cell strong,
	.day-cell span {
		display: block;
	}
	.day-cell span {
		margin-top: 4px;
		color: var(--muted);
		font-size: 0.88rem;
	}
	.note-cell {
		max-width: 360px;
		line-height: 1.45;
		color: var(--ink);
	}
	@media (max-width: 820px) {
		.attendance-calendar-grid {
			gap: 6px;
		}
		.attendance-calendar-day {
			min-height: 64px;
			padding: 8px 6px;
		}
		.attendance-calendar-day small {
			font-size: 0.72rem;
		}
	}
</style>

<?php
	$employee = isset($employee) && is_array($employee) ? $employee : array();
	$selected_month = isset($selected_month) ? (string)$selected_month : date('Y-m');
	$selected_month_label = isset($selected_month_label) ? (string)$selected_month_label : '';
	$attendance_detail_rows = isset($attendance_detail_rows) && is_array($attendance_detail_rows) ? $attendance_detail_rows : array();
	$attendance_detail_summary = isset($attendance_detail_summary) && is_array($attendance_detail_summary) ? $attendance_detail_summary : array(
		'present' => 0,
		'absent' => 0,
		'free' => 0,
		'notes' => 0,
		'future' => 0,
	);

	$can_view_attendance_history = !empty($can_view_attendance_history);
	$calendar_row_index = array();
	foreach ($attendance_detail_rows as $row)
	{
		if (!empty($row['attendance_date']))
		{
			$calendar_row_index[(string)$row['attendance_date']] = $row;
		}
	}

	$calendar_start = DateTime::createFromFormat('Y-m-d', $selected_month.'-01');
	if (!$calendar_start)
	{
		$calendar_start = new DateTime(date('Y-m-01'));
	}
	$calendar_days_in_month = (int)$calendar_start->format('t');
	$calendar_leading_blanks = max(0, (int)$calendar_start->format('N') - 1);
	$calendar_weekdays = array('Lu', 'Ma', 'Mi', 'Ju', 'Vi', 'Sa', 'Do');
?>

<div class="attendance-detail-shell">
	<div class="actions" style="margin-bottom:0;">
		<a class="btn btn-outline" href="<?php echo site_url('asistencia').'?month='.rawurlencode($selected_month); ?>">Volver al resumen</a>
	</div>

	<div class="attendance-detail-toolbar panel">
		<div>
			<h2><?php echo htmlspecialchars(!empty($employee['full_name']) ? $employee['full_name'] : 'Empleado', ENT_QUOTES, 'UTF-8'); ?></h2>
			<p>Detalle completo del mes de <?php echo htmlspecialchars($selected_month_label, ENT_QUOTES, 'UTF-8'); ?>.</p>
		</div>
		<?php if ($can_view_attendance_history) { ?>
		<form method="get" action="<?php echo site_url('asistencia/empleado/'.(int)$employee['person_id']); ?>">
			<input type="month" name="month" value="<?php echo htmlspecialchars($selected_month, ENT_QUOTES, 'UTF-8'); ?>" />
			<button class="btn" type="submit">Ver mes</button>
		</form>
		<?php } ?>

	<section class="attendance-summary">
		<div class="stat">
			<label>Asistencias</label>
			<strong><?php echo (int)$attendance_detail_summary['present']; ?></strong>
		</div>
		<div class="stat">
			<label>Faltas</label>
			<strong><?php echo (int)$attendance_detail_summary['absent']; ?></strong>
		</div>
		<div class="stat">
			<label>Libres</label>
			<strong><?php echo (int)$attendance_detail_summary['free']; ?></strong>
		</div>
		<div class="stat">
			<label>Notas</label>
			<strong><?php echo (int)$attendance_detail_summary['notes']; ?></strong>
		</div>
		<div class="stat">
			<label>Pendientes</label>
			<strong><?php echo (int)$attendance_detail_summary['future']; ?></strong>
		</div>
	</section>

	<section class="attendance-calendar-panel">
		<div class="attendance-calendar-head">
			<div>
				<h3 style="margin:0;">Calendario del mes</h3>
				<p class="note" style="margin:4px 0 0;">Verde asistio, rojo falto o faltante, gris libre.</p>
			</div>
			<div class="attendance-calendar-legend">
				<span><i style="background:#2ecc71;"></i>Asistio</span>
				<span><i style="background:#e74c3c;"></i>Falto</span>
				<span><i style="background:#718096;"></i>Libre</span>
			</div>
		</div>
		<div class="attendance-calendar-grid">
			<?php foreach ($calendar_weekdays as $weekday) { ?>
				<div class="attendance-calendar-weekday"><?php echo htmlspecialchars($weekday, ENT_QUOTES, 'UTF-8'); ?></div>
			<?php } ?>

			<?php for ($blank = 0; $blank < $calendar_leading_blanks; $blank++) { ?>
				<div class="attendance-calendar-day is-empty"></div>
			<?php } ?>

			<?php for ($day = 1; $day <= $calendar_days_in_month; $day++) {
				$date_key = $calendar_start->format('Y-m').'-'.str_pad((string)$day, 2, '0', STR_PAD_LEFT);
				$row = isset($calendar_row_index[$date_key]) ? $calendar_row_index[$date_key] : array();
				$status_key = isset($row['status_key']) ? (string)$row['status_key'] : 'free';
				$day_class = 'is-free';
				$label = 'Libre';
				if ($status_key === 'present') { $day_class = 'is-present'; $label = 'Asistio'; }
				elseif ($status_key === 'absent' || $status_key === 'unmarked') { $day_class = 'is-absent'; $label = 'Falto'; }
				elseif ($status_key === 'future') { $day_class = 'is-future'; $label = 'Pendiente'; }
			?>
				<div class="attendance-calendar-day <?php echo htmlspecialchars($day_class, ENT_QUOTES, 'UTF-8'); ?>" title="<?php echo htmlspecialchars($date_key.' - '.$label, ENT_QUOTES, 'UTF-8'); ?>">
					<strong><?php echo $day; ?></strong>
					<small><?php echo htmlspecialchars($label, ENT_QUOTES, 'UTF-8'); ?></small>
				</div>
			<?php } ?>
		</div>
	</section>

	<div class="attendance-detail-table-wrap">
		<table class="attendance-detail-table">
			<thead>
				<tr>
					<th>Fecha</th>
					<th>Estado</th>
					<th>Nota</th>
					<th>Marcado por</th>
					<th>Actualizado</th>
				</tr>
			</thead>
			<tbody>
				<?php foreach ($attendance_detail_rows as $row) { ?>
					<tr>
						<td class="day-cell">
							<strong><?php echo htmlspecialchars($row['attendance_date_label'], ENT_QUOTES, 'UTF-8'); ?></strong>
							<span><?php echo htmlspecialchars($row['attendance_day_label'], ENT_QUOTES, 'UTF-8'); ?></span>
						</td>
						<td>
							<span class="badge <?php echo htmlspecialchars($row['status_class'], ENT_QUOTES, 'UTF-8'); ?>">
								<?php echo htmlspecialchars($row['status_label'], ENT_QUOTES, 'UTF-8'); ?>
							</span>
						</td>
						<td class="note-cell"><?php echo htmlspecialchars($row['note'] !== '' ? $row['note'] : 'Sin nota registrada.', ENT_QUOTES, 'UTF-8'); ?></td>
						<td>
							<?php if (!empty($row['marked_by_label'])) { ?>
								<?php echo htmlspecialchars($row['marked_by_label'], ENT_QUOTES, 'UTF-8'); ?>
							<?php } else { ?>
								<span class="note">Sin registrar</span>
							<?php } ?>
						</td>
						<td>
							<?php if (!empty($row['updated_at_label'])) { ?>
								<?php echo htmlspecialchars($row['updated_at_label'], ENT_QUOTES, 'UTF-8'); ?>
							<?php } else { ?>
								<span class="note">Sin registro</span>
							<?php } ?>
						</td>
					</tr>
				<?php } ?>
			</tbody>
		</table>
	</div>
</div>
