<div class="overflow-x-auto relative z-10" style="min-height: 400px;">

<table id="students-data" class="min-w-full divide-y divide-gray-200 table-

fixed z-20">
<thead class="bg-gray-50 sticky top-0 z-30">
<tr>
<th scope="col" class="px-6 py-3 text-center text-xs font-
medium text-gray-500 uppercase tracking-wider w-12">#</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider w-36">Student Number</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider w-64">Name</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider w-24">Gender</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider w-48">Program</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider w-24">Year Level</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider w-32">Requirements</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium
text-gray-500 uppercase tracking-wider w-28">Status</th>
</tr>
</thead>

<tbody class="bg-white divide-y divide-gray-200">

@forelse($students as $index => $student)
<tr
class="hover:bg-gray-50 transition-colors cursor-pointer"
onclick="openRequirementsModal({{ $student->id }}, '{{ $student-
>first_name }} {{ $student->last_name }}', {{ $student->submitted_psa_bc ? 'true' :
'false' }}, {{ $student->submitted_form_137 ? 'true' : 'false' }}, {{ $student-
>submitted_good_moral ? 'true' : 'false' }})"
>
<td class="px-6 py-4 whitespace-nowrap text-center text-sm text-
gray-500">
{{ $loop->iteration }}
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-
gray-900 truncate">
{{ $student->student_number }}
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-8 w-8 rounded-full bg-indigo-
100 flex items-center justify-center">
<span class="text-indigo-600 font-
medium">{{ substr($student->first_name, 0, 1) }}</span>
</div>
<div class="ml-3 truncate">
<div class="text-sm font-medium text-gray-
900">{{ $student->last_name }}, {{ $student->first_name }} {{ $student->middle_name
}}</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-
500">{{ $student->gender }}</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500
truncate">
 @if($student->program)
{{ $student->program->program_name }}
@if($student->program->major_name)
- {{ $student->program->major_name }}
@endif
@else
No Program Assigned
@endif
</td>

<td class="px-6 py-4 whitespace-nowrap">

@if($student->current_year_level)
<span class="px-2 py-0.5 text-xs font-medium rounded bg-
blue-100 text-blue-800">{{ $student->current_year_level }} Year</span>
@else
<span class="px-2 py-0.5 text-xs font-medium rounded bg-
gray-100 text-gray-800">N/A</span>
@endif
</td>
<td class="px-6 py-4 whitespace-nowrap">
@php
$requirementsStatus = $student->submitted_psa_bc &&
$student->submitted_form_137 && $student->submitted_good_moral
? 'Complete'
: 'Incomplete';

$statusClass = $requirementsStatus === 'Complete'

? 'bg-green-100 text-green-800'
: 'bg-amber-100 text-amber-800';
@endphp
<span class="px-3 py-1 text-xs font-medium rounded-full
{{ $statusClass }}">
{{ $requirementsStatus }}
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap">
@php
$statusClass = match($student->student_status) {
'Active' => 'bg-green-100 text-green-800',
'Graduated' => 'bg-indigo-100 text-indigo-800',
'Transferred' => 'bg-amber-100 text-amber-800',
default => 'bg-rose-100 text-rose-800'
};
@endphp
<span class="px-3 py-1 text-xs font-medium rounded-full
{{ $statusClass }}">
{{ $student->student_status }}
</span>
</td>
</tr>
@empty
<tr>
<td colspan="8" class="px-6 py-10 text-center">
<div class="flex flex-col items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10
text-gray-300 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="1" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714
2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
 </svg>
<p class="text-gray-500 text-sm">No students found</p>
<p class="text-gray-400 text-xs mt-1">Try again with
different criteria</p>
</div>
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
<div class="px-6 py-4 flex flex-col sm:flex-row justify-between items-center
border-t border-gray-100">
<div class="text-sm text-gray-500 mb-3 sm:mb-0">
Showing {{ $students->firstItem() ?? 0 }} to {{ $students-
>lastItem() ?? 0 }} of {{ $students->total() ?? 0 }} students
</div>
@if(method_exists($students, 'links'))
<div>
{{ $students->onEachSide(1)->links() }}
</div>
@endif
</div>
</div>

<!-- Requirements Modal -->

<div id="requirements-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 flex
items-center justify-center hidden">
<div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4 relative
overflow-hidden">
<!-- Modal Header -->
<div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white px-6 py-
4">
<div class="flex justify-between items-center">
<h3 class="text-lg font-bold" id="modal-student-name">Update
Student Requirements</h3>
<button onclick="closeRequirementsModal()" class="text-white
hover:text-gray-200 focus:outline-none">
<svg class="h-6 w-6" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round"
stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
</div>

<!-- Modal Body -->

<div class="p-6">
<!-- Update just the form section of your modal with the correct route -->
<form id="requirements-form" action="{{ route('registrar.student.update-
requirements') }}" method="POST">
@csrf
@method('PATCH')
<input type="hidden" id="modal-student-id" name="student_id">

<div class="space-y-4">
<div class="flex items-center">
<input type="checkbox" id="submitted_psa_bc" name="submitted_psa_bc"
class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
<label for="submitted_psa_bc" class="ml-3 block text-gray-700">
PSA Birth Certificate
</label>
</div>

<div class="flex items-center">

<input type="checkbox" id="submitted_form_137"
name="submitted_form_137" class="h-5 w-5 text-blue-600 focus:ring-blue-500 border-
gray-300 rounded">
<label for="submitted_form_137" class="ml-3 block text-gray-700">
Form 137 / Transcript of Records
</label>
</div>

<div class="flex items-center">

<input type="checkbox" id="submitted_good_moral"
name="submitted_good_moral" class="h-5 w-5 text-blue-600 focus:ring-blue-500
border-gray-300 rounded">
<label for="submitted_good_moral" class="ml-3 block text-gray-700">
Good Moral Certificate
</label>
</div>
</div>

<div class="mt-6 flex justify-end space-x-3">

<button type="button" onclick="closeRequirementsModal()" class="px-4 py-2
border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-
white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2
focus:ring-blue-500">
Cancel
</button>
<button type="submit" class="px-4 py-2 border border-transparent rounded-md
shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700
focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Save Changes
</button>
</div>
</form>
</div>
</div>
</div>

<script>
function openRequirementsModal(studentId, studentName, psa, form137, goodMoral)
{
// Set form values
document.getElementById('modal-student-id').value = studentId;
document.getElementById('modal-student-name').textContent = studentName +
"'s Requirements";
document.getElementById('submitted_psa_bc').checked = psa;
document.getElementById('submitted_form_137').checked = form137;
document.getElementById('submitted_good_moral').checked = goodMoral;

// Show modal
document.getElementById('requirements-modal').classList.remove('hidden');
}

function closeRequirementsModal() {
 document.getElementById('requirements-modal').classList.add('hidden');
}

// Close modal when clicking outside of it

document.getElementById('requirements-modal').addEventListener('click',
function(event) {
if (event.target === this) {
closeRequirementsModal();
}
});

// Stop propagation for clicks inside the modal content

document.querySelector('#requirements-modal > div').addEventListener('click',
function(event) {
event.stopPropagation();
});

// Close modal on escape key

document.addEventListener('keydown', function(event) {
if (event.key === 'Escape') {
closeRequirementsModal();
}
});
</script>