<?php require_once 'layouts/header.php'; ?>
<?php require_once 'layouts/sidebar.php'; ?>

<div class="flex-1 flex flex-col min-w-0 h-full overflow-hidden">
 <?php require_once 'layouts/topbar.php'; ?>

 <main class="flex-1 relative overflow-y-auto py-4 sm:py-6 px-3 sm:px-6 lg:px-8 bg-gray-50 custom-scrollbar">
 <div class="max-w-6xl mx-auto space-y-4 pb-6">
 <!-- Header -->
 <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 px-1 py-2">
 <div>
 <h1 class="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">Daily Attendance</h1>
 <p class="text-[10px] sm:text-xs font-medium text-gray-400 mt-0.5">Mark in/out times and status for students</p>
 </div>
 <div class="flex items-center gap-2">
 <a href="<?php echo url('/admin/attendance/report'); ?>" class="px-5 py-3 bg-white border border-gray-200 text-gray-700 text-[10px] font-black uppercase tracking-widest rounded-xl hover:bg-gray-50 transition-all flex items-center gap-2 active:scale-95">
 <i class="fa-solid fa-chart-line text-blue-600"></i>
 <span>Attendance Report</span>
 </a>
 </div>
 </div>

 <!-- Selection Filters -->
 <form action="<?php echo url('/admin/attendance'); ?>" method="GET" class="bg-white border border-gray-200 rounded-2xl p-4">
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
 <div class="space-y-1.5">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Select Date</label>
 <input name="date" type="date" value="<?php echo $date; ?>" onchange="this.form.submit()" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-900 focus:bg-white focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 outline-none transition-all">
 </div>
 <div class="space-y-1.5">
 <label class="text-[10px] font-bold text-gray-400 uppercase tracking-widest ml-1">Select Batch</label>
 <div class="relative">
 <select name="batch_id" onchange="this.form.submit()" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-xl text-xs font-bold text-gray-900 focus:bg-white focus:ring-4 focus:ring-blue-600/5 focus:border-blue-600 outline-none appearance-none cursor-pointer">
 <option value="">-- Choose Batch --</option>
 <?php foreach($batches as $b): ?>
 <option value="<?php echo $b['id']; ?>"<?php echo $batchId == $b['id'] ? 'selected' : ''; ?>><?php echo $b['name']; ?> (<?php echo date('h:i A', strtotime($b['start_time'])); ?>)</option>
 <?php endforeach; ?>
 </select>
 <div class="absolute inset-y-0 right-0 pr-3.5 flex items-center pointer-events-none text-gray-400">
 <i class="fa-solid fa-chevron-down text-[10px]"></i>
 </div>
 </div>
 </div>
 <?php if($selectedBatch): ?>
 <div class="flex items-center gap-4 bg-blue-50/50 border border-blue-100 rounded-2xl px-4 py-3">
 <div class="h-10 w-10 rounded-xl bg-blue-600 text-white flex items-center justify-center text-sm">
 <i class="fa-solid fa-clock"></i>
 </div>
 <div>
 <p class="text-[10px] font-bold text-blue-600 uppercase tracking-widest">Schedule</p>
 <p class="text-xs font-black text-gray-900"><?php echo date('h:i A', strtotime($selectedBatch['start_time'])); ?> - <?php echo date('h:i A', strtotime($selectedBatch['end_time'])); ?></p>
 </div>
 </div>
 <?php endif; ?>
 </div>
 </form>

 <?php if(!$batchId): ?>
 <div class="bg-white border border-gray-200 rounded-3xl p-12 text-center space-y-4">
 <div class="h-20 w-20 bg-blue-50 text-blue-600 rounded-3xl flex items-center justify-center text-3xl mx-auto">
 <i class="fa-solid fa-users-rectangle"></i>
 </div>
 <div>
 <h3 class="text-lg font-black text-gray-900">Select a Batch to Start</h3>
 <p class="text-xs font-bold text-gray-400 mt-1">Real-life attendance requires selecting a batch to track schedules correctly.</p>
 </div>
 </div>
 <?php else: ?>
 <!-- Bulk Actions -->
 <div class="bg-white border border-gray-200 rounded-2xl p-4 flex flex-wrap items-center gap-3">
 <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mr-2">Bulk Actions:</span>
 <button type="button" onclick="markAll('Present')" class="px-4 py-2 bg-emerald-50 text-emerald-600 text-[10px] font-bold rounded-lg border border-emerald-100 hover:bg-emerald-500 hover:text-white transition-all uppercase tracking-widest">Mark All Present</button>
 <button type="button" onclick="markAll('Absent')" class="px-4 py-2 bg-red-50 text-red-600 text-[10px] font-bold rounded-lg border border-red-100 hover:bg-red-500 hover:text-white transition-all uppercase tracking-widest">Mark All Absent</button>
 <button type="button" onclick="setBulkTime('in')" class="px-4 py-2 bg-blue-50 text-blue-600 text-[10px] font-bold rounded-lg border border-blue-100 hover:bg-blue-500 hover:text-white transition-all uppercase tracking-widest ml-auto">Check-In All Now</button>
 <button type="button" onclick="setBulkTime('out')" class="px-4 py-2 bg-gray-50 text-gray-600 text-[10px] font-bold rounded-lg border border-gray-100 hover:bg-gray-900 hover:text-white transition-all uppercase tracking-widest">Check-Out All Now</button>
 </div>

 <!-- Attendance Table -->
 <form action="<?php echo url('/admin/attendance/save'); ?>" method="POST" class="space-y-4" id="attendanceForm">
 <input type="hidden" name="date" value="<?php echo $date; ?>">
 <input type="hidden" name="batch_id" value="<?php echo $batchId; ?>">

 <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden">
 <div class="overflow-x-auto">
 <table class="w-full text-left border-collapse">
 <thead>
 <tr class="bg-gray-50/80 border-b border-gray-200">
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest w-16 text-center">SL</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Student</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50 text-center">Attendance Status</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">In Time</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Out Time</th>
 <th class="px-6 py-4 text-[10px] font-bold text-gray-500 uppercase tracking-widest border-l border-gray-100/50">Notes</th>
 </tr>
 </thead>
 <tbody class="divide-y divide-gray-100">
 <?php if(empty($students)): ?>
 <tr><td colspan="6" class="px-6 py-12 text-center text-gray-400 text-xs font-bold italic">No active students in this batch</td></tr>
 <?php else: ?>
 <?php foreach($students as $index => $s): ?>
 <tr class="hover:bg-gray-50/30 transition-colors attendance-row" data-student-id="<?php echo $s['student_id']; ?>">
 <td class="px-6 py-4 text-center">
 <span class="text-[10px] font-bold text-gray-400"><?php echo str_pad($index + 1, 2, '0', STR_PAD_LEFT); ?></span>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex flex-col">
 <span class="text-xs font-bold text-gray-900"><?php echo $s['student_name']; ?></span>
 <span class="text-[9px] font-bold text-gray-400 uppercase tracking-tighter"><?php echo $s['student_code']; ?></span>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex items-center justify-center gap-1.5" x-data="{ 
 init() {
 this.$watch('status', val => {
 window.dispatchEvent(new CustomEvent('status-updated', { detail: { id: '<?php echo $s['student_id']; ?>', status: val } }));
 });
 },
 status: '<?php echo $s['status'] ?? 'Present'; ?>' 
 }">
 <label class="cursor-pointer">
 <input type="radio" name="attendance[<?php echo $s['student_id']; ?>][status]" value="Present" class="hidden peer status-radio" data-status="Present"<?php echo ($s['status'] ?? 'Present') === 'Present' ? 'checked' : ''; ?> @change="status = 'Present'">
 <span class="px-3 py-1.5 rounded-lg text-[9px] font-bold border transition-all peer-checked:bg-emerald-500 peer-checked:text-white peer-checked:border-emerald-500 bg-emerald-50 text-emerald-600 border-emerald-100 hover:bg-emerald-100 uppercase">P</span>
 </label>
 <label class="cursor-pointer">
 <input type="radio" name="attendance[<?php echo $s['student_id']; ?>][status]" value="Absent" class="hidden peer status-radio" data-status="Absent"<?php echo ($s['status'] ?? '') === 'Absent' ? 'checked' : ''; ?> @change="status = 'Absent'">
 <span class="px-3 py-1.5 rounded-lg text-[9px] font-bold border transition-all peer-checked:bg-red-500 peer-checked:text-white peer-checked:border-red-500 bg-red-50 text-red-600 border-red-100 hover:bg-red-100 uppercase">A</span>
 </label>
 <label class="cursor-pointer">
 <input type="radio" name="attendance[<?php echo $s['student_id']; ?>][status]" value="Late" class="hidden peer status-radio" data-status="Late"<?php echo ($s['status'] ?? '') === 'Late' ? 'checked' : ''; ?> @change="status = 'Late'">
 <span class="px-3 py-1.5 rounded-lg text-[9px] font-bold border transition-all peer-checked:bg-amber-500 peer-checked:text-white peer-checked:border-amber-500 bg-amber-50 text-amber-600 border-amber-100 hover:bg-amber-100 uppercase">L</span>
 </label>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex items-center gap-1" x-data="{ status: '<?php echo $s['status'] ?? 'Present'; ?>' }" @status-updated.window="if($event.detail.id == '<?php echo $s['student_id']; ?>') status = $event.detail.status">
 <input type="time" name="attendance[<?php echo $s['student_id']; ?>][in_time]" :disabled="status === 'Absent'" value="<?php echo $s['in_time'] ? date('H:i', strtotime($s['in_time'])) : ''; ?>" onchange="checkLate(this)" class="w-full px-2 py-1.5 bg-gray-50 border border-gray-200 rounded-lg text-xs font-bold text-gray-700 outline-none focus:bg-white focus:border-blue-600 transition-all in-time-input disabled:opacity-50 disabled:cursor-not-allowed">
 <button type="button" :disabled="status === 'Absent'" onclick="setRowTime(this, 'in')" class="h-8 w-8 flex-none flex items-center justify-center rounded-lg bg-emerald-50 text-emerald-600 border border-emerald-100 hover:bg-emerald-600 hover:text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed" title="Check-In Now">
 <i class="fa-solid fa-sign-in text-[10px]"></i>
 </button>
 </div>
 </td>
 <td class="px-6 py-4 border-l border-gray-100/50">
 <div class="flex items-center gap-1" x-data="{ status: '<?php echo $s['status'] ?? 'Present'; ?>' }" @status-updated.window="if($event.detail.id == '<?php echo $s['student_id']; ?>') status = $event.detail.status">
 <input type="time" name="attendance[<?php echo $s['student_id']; ?>][out_time]" :disabled="status === 'Absent'" value="<?php echo $s['out_time'] ? date('H:i', strtotime($s['out_time'])) : ''; ?>" class="w-full px-2 py-1.5 bg-gray-50 border border-gray-200 rounded-lg text-xs font-bold text-gray-700 outline-none focus:bg-white focus:border-blue-600 transition-all out-time-input disabled:opacity-50 disabled:cursor-not-allowed">
 <button type="button" :disabled="status === 'Absent'" onclick="setRowTime(this, 'out')" class="h-8 w-8 flex-none flex items-center justify-center rounded-lg bg-red-50 text-red-600 border border-red-100 hover:bg-red-600 hover:text-white transition-all disabled:opacity-50 disabled:cursor-not-allowed" title="Check-Out Now">
 <i class="fa-solid fa-sign-out text-[10px]"></i>
 </button>
 </div>
 </td>

 <td class="px-6 py-4 border-l border-gray-100/50">
 <input type="text" name="attendance[<?php echo $s['student_id']; ?>][remarks]" value="<?php echo htmlspecialchars($s['remarks'] ?? ''); ?>" placeholder="..." class="w-full px-3 py-1.5 bg-gray-50 border border-gray-200 rounded-xl text-xs font-medium text-gray-700 outline-none focus:bg-white focus:border-blue-600 transition-all">
 </td>
 </tr>
 <?php endforeach; ?>
 <?php endif; ?>
 </tbody>
 </table>
 </div>
 </div>

 <?php if(!empty($students)): ?>
 <div class="flex justify-end pt-2">
 <button type="submit" class="w-full sm:w-auto px-10 py-3.5 bg-blue-600 text-white text-[11px] font-bold rounded-xl hover:bg-blue-700 transition-all -200 active:scale-95 uppercase tracking-widest flex items-center justify-center gap-2">
 <i class="fa-solid fa-check-double"></i>
 Confirm & Save Attendance
 </button>
 </div>
 <?php endif; ?>
 </form>
 <?php endif; ?>
 </div>
 </main>
</div>

<?php require_once 'layouts/footer.php'; ?>

<script>
const BATCH_START_TIME = '<?php echo $selectedBatch['start_time'] ?? ''; ?>';
const GRACE_PERIOD_MINS = 15;

function markAll(status) {
 document.querySelectorAll('.status-radio[data-status="' + status + '"]').forEach(radio => {
 radio.checked = true;
 });
}

function getCurrentTimeString() {
 const now = new Date();
 return now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0');
}

function setBulkTime(type) {
 const time = getCurrentTimeString();
 document.querySelectorAll('.' + type + '-time-input').forEach(input => {
 if (!input.value) {
 input.value = time;
 if(type === 'in') checkLate(input);
 }
 });
}

function setRowTime(btn, type) {
 const time = getCurrentTimeString();
 const row = btn.closest('tr');
 const input = row.querySelector('.' + type + '-time-input');
 input.value = time;
 if(type === 'in') checkLate(input);
}

function checkLate(input) {
 if (!BATCH_START_TIME || !input.value) return;
 
 const row = input.closest('tr');
 const [startH, startM] = BATCH_START_TIME.split(':').map(Number);
 const [inH, inM] = input.value.split(':').map(Number);
 
 const startTime = startH * 60 + startM;
 const inTime = inH * 60 + inM;
 
 if (inTime > (startTime + GRACE_PERIOD_MINS)) {
 row.querySelector('.status-radio[data-status="Late"]').checked = true;
 } else {
 row.querySelector('.status-radio[data-status="Present"]').checked = true;
 }
}
</script>
 </div>
 </main>
</div>

<?php require_once 'layouts/footer.php'; ?>
