@extends('layouts.

dashboard-registrar')
@section('title', 'Students Dashboard')
@section('content')
<!-- Add this style tag to ensure x-cloak works properly -->
<style>
[x-cloak] { display: none !important; }
</style>
<div class="bg-gray-50 min-h-screen p-6">
<!-- Dashboard Header with Search -->
<div class="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-
6">
<div>
<h1 class="text-2xl font-bold text-gray-800">Student Requirements</h1>
<p class="text-sm text-gray-500">Manage and view all requirements of
students</p>
</div>
</div>
<!-- Student List Section -->
<div class="bg-gradient-to-br from-gray-50 to-gray-100 rounded-xl shadow-2xl
overflow-hidden border border-gray-200">
<!-- Filter Header -->
<div class="flex flex-col md:flex-row justify-between items-center px-6 py-5
bg-white border-b border-gray-200">
<h3 class="text-2xl font-bold text-gray-800 mb-4 md:mb-0 flex items-
center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mr-3 text-blue-
600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-
1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0
0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014
0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
Student List
</h3>
<div class="flex flex-wrap gap-3 items-center justify-end">
<!-- Student Status Dropdown -->
<div class="relative inline-block text-left">
<button type="button" id="statusDropdownButton" class="inline-flex justify-
between items-center w-full px-4 py-2.5 bg-white border border-gray-300 rounded-lg
shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none
focus:ring-2 focus:ring-indigo-500">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-gray-
500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-
1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0
0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014
0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span>{{ request('status') ?? 'All Students' }}</span>
<span class="ml-2 bg-purple-100 text-purple-600 text-xs font-medium px-
2 py-0.5 rounded-full">{{ $totalStudents ?? Student::count() }}</span>
</div>
<svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10
10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
clip-rule="evenodd" />
</svg>
</button>

<div
id="statusDropdown"
class="absolute left-0 mt-2 w-72 bg-white rounded-lg shadow-lg z-20 border
border-gray-100 hidden overflow-y-auto max-h-96"
>
<div class="py-1.5 rounded-lg">
<div class="px-3 py-2 sticky top-0 bg-white border-b border-gray-100">
<input type="text" id="statusSearch" class="w-full px-3 py-1.5
text-sm border border-gray-200 rounded-md focus:border-indigo-300 focus:ring
focus:ring-indigo-200 focus:ring-opacity-50" placeholder="Search status...">
</div>

<a href="{{ url()->current() }}"

class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 {{ !
request('status') ? 'bg-indigo-50 text-indigo-700' : '' }} transition rounded-md
mx-1">
<div class="flex justify-between items-center">
<div class="flex items-center">
<div class="flex items-center justify-center h-8 w-8
rounded-lg bg-purple-100 text-purple-600 mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10
0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-
1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2
0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
</div>
All Students
</div>
<span class="bg-purple-100 text-purple-600 text-xs font-medium
px-2 py-0.5 rounded-full">{{ $totalStudents ?? Student::count() }}</span>
</div>
</a>

<div class="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500

uppercase">
Student Status
</div>

<!-- Active Students -->

<a href="{{ url()->current() }}?status=Active"
class="status-item block px-4 py-2 text-sm text-gray-700 hover:bg-
indigo-50 {{ request('status') == 'Active' ? 'bg-indigo-50 text-indigo-700' : '' }}
transition rounded-md mx-1">
<div class="flex justify-between items-center">
<div class="flex items-center">
<div class="flex items-center justify-center h-8 w-8
rounded-lg bg-indigo-100 text-indigo-600 mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0
00-7 7h14a7 7 0 00-7-7z" />
 </svg>
</div>
Active Students
</div>
<span class="bg-indigo-100 text-indigo-600 text-xs font-medium
px-2 py-0.5 rounded-full">{{ $activeCount ?? Student::where('student_status',
'Active')->count() }}</span>
</div>
</a>

<!-- Graduated Students -->

<a href="{{ url()->current() }}?status=Graduated"
class="status-item block px-4 py-2 text-sm text-gray-700 hover:bg-
indigo-50 {{ request('status') == 'Graduated' ? 'bg-indigo-50 text-indigo-700' : ''
}} transition rounded-md mx-1">
<div class="flex justify-between items-center">
<div class="flex items-center">
<div class="flex items-center justify-center h-8 w-8
rounded-lg bg-emerald-100 text-emerald-600 mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M12 14l9-5-9-5-9 5 9 5z" />
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083
12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-
2.998a12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
</svg>
</div>
Graduated Students
</div>
<span class="bg-emerald-100 text-emerald-600 text-xs font-
medium px-2 py-0.5 rounded-full">{{ $graduatedCount ??
Student::where('student_status', 'Graduated')->count() }}</span>
</div>
</a>

<!-- Transferred Students -->

<a href="{{ url()->current() }}?status=Transferred"
class="status-item block px-4 py-2 text-sm text-gray-700 hover:bg-
indigo-50 {{ request('status') == 'Transferred' ? 'bg-indigo-50 text-indigo-700' :
'' }} transition rounded-md mx-1">
<div class="flex justify-between items-center">
<div class="flex items-center">
<div class="flex items-center justify-center h-8 w-8
rounded-lg bg-amber-100 text-amber-600 mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-
4l4-4" />
</svg>
</div>
Transferred Students
</div>
<span class="bg-amber-100 text-amber-600 text-xs font-medium
px-2 py-0.5 rounded-full">{{ $transferredCount ?? Student::where('student_status',
'Transferred')->count() }}</span>
</div>
</a>
 <!-- Inactive Students -->
<a href="{{ url()->current() }}?status=Inactive"
class="status-item block px-4 py-2 text-sm text-gray-700 hover:bg-
indigo-50 {{ request('status') == 'Inactive' ? 'bg-indigo-50 text-indigo-700' :
'' }} transition rounded-md mx-1">
<div class="flex justify-between items-center">
<div class="flex items-center">
<div class="flex items-center justify-center h-8 w-8
rounded-lg bg-rose-100 text-rose-600 mr-2">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-
linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-
1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3
1.732 3z" />
</svg>
</div>
Inactive Students
</div>
<span class="bg-rose-100 text-rose-600 text-xs font-medium px-2
py-0.5 rounded-full">{{ $inactiveCount ?? Student::where('student_status', '!=',
'Active')->where('student_status', '!=', 'Graduated')->where('student_status', '!
=', 'Transferred')->count() }}</span>
</div>
</a>
</div>
</div>
</div>

<!-- JavaScript for dropdown functionality -->

<script>
// Wait for the DOM to be fully loaded
document.addEventListener('DOMContentLoaded', function() {
// Get the elements
const dropdownButton = document.getElementById('statusDropdownButton');
const dropdown = document.getElementById('statusDropdown');
const searchInput = document.getElementById('statusSearch');
const statusItems = document.querySelectorAll('.status-item');

if (!dropdownButton || !dropdown) {
console.error('Dropdown elements not found');
return;
}

// Toggle dropdown
dropdownButton.addEventListener('click', function(event) {
event.stopPropagation(); // Prevent event bubbling
dropdown.classList.toggle('hidden');
if (!dropdown.classList.contains('hidden')) {
if (searchInput) searchInput.focus();
}
});

// Close dropdown when clicking outside

document.addEventListener('click', function(event) {
if (dropdown && !dropdown.classList.contains('hidden') &&
!dropdownButton.contains(event.target) &&
!dropdown.contains(event.target)) {
 dropdown.classList.add('hidden');
}
});

// Search functionality
if (searchInput) {
searchInput.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();

statusItems.forEach(item => {
const text = item.textContent.toLowerCase();
if (text.includes(searchTerm)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});

// Prevent dropdown from closing when clicking on search input

searchInput.addEventListener('click', function(event) {
event.stopPropagation();
});
}
});
</script>

<div class="relative group ml-2">

<button
id="programFilterBtn"
class="text-sm px-4 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-700
rounded-lg transition flex items-center font-medium"
type="button"
>
@if(request('course'))
{{ collect($programs)->firstWhere('id', request('course'))
['program_name'] ?? 'All Programs' }}
@if(request('major'))
- {{ collect($programs)->firstWhere('id', request('course'))
['major_name'] ?? '' }}
@endif
@else
All Programs
@endif
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2 transform
group-hover:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>
<div
id="programDropdown"
class="absolute right-0 mt-2 w-72 bg-white rounded-lg shadow-lg z-20 border
border-gray-100 hidden overflow-y-auto max-h-96"
>
<div class="py-1.5 rounded-lg">
 <div class="px-3 py-2 sticky top-0 bg-white border-b border-gray-100">
<input type="text" id="programSearch" class="w-full px-3 py-1.5
text-sm border border-gray-200 rounded-md focus:border-indigo-300 focus:ring
focus:ring-indigo-200 focus:ring-opacity-50" placeholder="Search program...">
</div>

<a href="{{ url()->current() }}?{{ http_build_query(request()-

>except('course', 'major', 'page')) }}"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 {{ !
request('course') ? 'bg-indigo-50 text-indigo-700' : '' }} transition rounded-md
mx-1">
All Programs
</a>

<div class="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500

uppercase">
Academic Programs
</div>

@forelse($programs as $program)
<a href="{{ url()->current() }}?
{{ http_build_query(array_merge(request()->except('course', 'major', 'page'),
['course' => $program['id']])) }}"
class="program-item block px-4 py-2 text-sm text-gray-700
hover:bg-indigo-50 {{ request('course') == $program['id'] ? 'bg-indigo-50 text-
indigo-700' : '' }} transition rounded-md mx-1">
{{ $program['program_name'] }}
@if($program['major_name'])
- {{ $program['major_name'] }}
@endif
</a>
@empty
<div class="px-4 py-2 text-sm text-gray-500">No programs
found</div>
@endforelse
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const programFilterBtn = document.getElementById('programFilterBtn');
const programDropdown = document.getElementById('programDropdown');
const programSearch = document.getElementById('programSearch');
const programItems = document.querySelectorAll('.program-item');

// Toggle dropdown visibility

programFilterBtn.addEventListener('click', function() {
programDropdown.classList.toggle('hidden');
});

// Close dropdown when clicking outside

document.addEventListener('click', function(event) {
if (!programFilterBtn.contains(event.target) && !
programDropdown.contains(event.target)) {
programDropdown.classList.add('hidden');
}
});
 // Filter programs based on search input
programSearch.addEventListener('input', function() {
const searchTerm = this.value.toLowerCase();

programItems.forEach(item => {
const programText = item.textContent.toLowerCase();
const matchesSearch = programText.includes(searchTerm);

item.style.display = matchesSearch ? 'block' : 'none';

});
});
});
</script>

<!-- Year Level Filter -->

<div class="relative group">
<button
id="yearLevelFilterBtn"
class="text-sm px-4 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-700
rounded-lg transition flex items-center font-medium"
type="button"
>
{{ request('year_level') ? request('year_level') . ' Year' : 'All Year
Levels' }}
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2 transform
group-hover:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
</svg>
</button>

<div
id="yearLevelDropdown"
class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg z-20 border
border-gray-100 hidden overflow-y-auto max-h-64"
>
<div class="py-1.5 rounded-lg">
<a href="{{ url()->current() }}?{{ http_build_query(request()-
>except('year_level', 'page')) }}"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 {{ !
request('year_level') ? 'bg-indigo-50 text-indigo-700' : '' }} transition rounded-
md mx-1">
All Year Levels
</a>

<div class="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500

uppercase">
Year Levels
</div>

@php
$yearLevels = ['1', '2', '3', '4', '5'];
@endphp

@foreach($yearLevels as $yearLevel)
<a href="{{ url()->current() }}?
{{ http_build_query(array_merge(request()->except('year_level', 'page'),
['year_level' => $yearLevel])) }}"
class="year-level-item block px-4 py-2 text-sm text-gray-700
hover:bg-indigo-50 {{ request('year_level') == $yearLevel ? 'bg-indigo-50 text-
indigo-700' : '' }} transition rounded-md mx-1">
{{ $yearLevel }} Year
</a>
@endforeach
</div>
</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
// Year Level Filter Toggle
const yearLevelFilterBtn = document.getElementById('yearLevelFilterBtn');
const yearLevelDropdown = document.getElementById('yearLevelDropdown');

if (yearLevelFilterBtn && yearLevelDropdown) {

yearLevelFilterBtn.addEventListener('click', function(e) {
e.stopPropagation();
yearLevelDropdown.classList.toggle('hidden');

// Close other dropdowns if they exist

const otherDropdowns = document.querySelectorAll('.dropdown-
content:not(#yearLevelDropdown)');
otherDropdowns.forEach(dropdown => {
dropdown.classList.add('hidden');
});
});
}

// Close dropdown when clicking outside

document.addEventListener('click', function(event) {
if (yearLevelDropdown && !yearLevelFilterBtn.contains(event.target)
&& !yearLevelDropdown.contains(event.target)) {
yearLevelDropdown.classList.add('hidden');
}
});
});
</script>

<!-- San Fernando, Pampanga Barangay Filter -->

<div class="relative group">
<button
id="barangayFilterBtn"
class="text-sm px-4 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-700
rounded-lg transition flex items-center font-medium"
type="button"
>
{{ request('barangay_code') ? (collect($barangays)->firstWhere('brgy_code',
request('barangay_code'))['brgy_name'] ?? 'San Fernando Barangay') : 'San Fernando
Barangay' }}
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-2 transform
group-hover:rotate-180 transition-transform" fill="none" viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 9l-7 7-7-7" />
 </svg>
</button>

<div
id="barangayDropdown"
class="absolute right-0 mt-2 w-64 bg-white rounded-lg shadow-lg z-20 border
border-gray-100 hidden overflow-y-auto max-h-64"
>
<div class="py-1.5 rounded-lg">
<div class="px-3 py-2 sticky top-0 bg-white border-b border-gray-100">
<input type="text" id="barangaySearch" class="w-full px-3 py-1.5
text-sm border border-gray-200 rounded-md focus:border-indigo-300 focus:ring
focus:ring-indigo-200 focus:ring-opacity-50" placeholder="Search barangay...">
</div>

<a href="{{ url()->current() }}?{{ http_build_query(request()-

>except('barangay_code', 'page')) }}"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-indigo-50 {{ !
request('barangay_code') ? 'bg-indigo-50 text-indigo-700' : '' }} transition
rounded-md mx-1">
All Barangays
</a>

@php
// City of San Fernando city code
$cityCode = '035416';

// Filter barangays for San Fernando, Pampanga

$sanFernandoBarangays = collect($barangays)
->filter(function($barangay) use ($cityCode) {
return substr($barangay['brgy_code'], 0, 6) === $cityCode;
})
->sortBy('brgy_name')
->values()
->all();
@endphp

<div class="px-4 py-2 bg-gray-50 text-xs font-medium text-gray-500

uppercase">
City of San Fernando, Pampanga
</div>

@forelse($sanFernandoBarangays as $barangay)
<a href="{{ url()->current() }}?
{{ http_build_query(array_merge(request()->except('barangay_code', 'page'),
['barangay_code' => $barangay['brgy_code']])) }}"
class="barangay-item block px-4 py-2 text-sm text-gray-700
hover:bg-indigo-50 {{ request('barangay_code') == $barangay['brgy_code'] ? 'bg-
indigo-50 text-indigo-700' : '' }} transition rounded-md mx-1">
{{ $barangay['brgy_name'] }}
</a>
@empty
<div class="px-4 py-2 text-sm text-gray-500">No barangays
found</div>
@endforelse
</div>
</div>
</div>
<script>
 // Add this to your JavaScript file or include it in a script tag
document.addEventListener('DOMContentLoaded', function() {
// Barangay Filter Toggle
const barangayFilterBtn = document.getElementById('barangayFilterBtn');
const barangayDropdown = document.getElementById('barangayDropdown');
const barangaySearch = document.getElementById('barangaySearch');

if (barangayFilterBtn && barangayDropdown) {

barangayFilterBtn.addEventListener('click', function(e) {
e.stopPropagation();
barangayDropdown.classList.toggle('hidden');

// Close other dropdowns if they exist

const otherDropdowns = document.querySelectorAll('.dropdown-
content:not(#barangayDropdown)');
otherDropdowns.forEach(dropdown => {
dropdown.classList.add('hidden');
});
});

// Search functionality
if (barangaySearch) {
barangaySearch.addEventListener('input', function() {
const searchValue = this.value.toLowerCase();
const barangayItems = document.querySelectorAll('.barangay-item');
let hasResults = false;

barangayItems.forEach(item => {
const barangayName = item.textContent.trim().toLowerCase();
if (barangayName.includes(searchValue)) {
item.style.display = 'block';
hasResults = true;
} else {
item.style.display = 'none';
}
});

// Show no results message if needed

const noResultsMsg = document.getElementById('noResultsMsg');
if (!hasResults && searchValue !== '') {
if (!noResultsMsg) {
const msgElement = document.createElement('div');
msgElement.id = 'noResultsMsg';
msgElement.className = 'px-4 py-2 text-sm text-gray-500
text-center';
msgElement.textContent = 'No matching barangays found';
barangayDropdown.querySelector('.py-
1.5').appendChild(msgElement);
}
} else if (noResultsMsg) {
noResultsMsg.remove();
}
});
}
}

// Close dropdown when clicking outside

document.addEventListener('click', function(event) {
if (barangayDropdown && !barangayFilterBtn.contains(event.target) && !
barangayDropdown.contains(event.target)) {
barangayDropdown.classList.add('hidden');
}
});
});
</script>
<!-- Reset Filters -->
<a href="{{ url()->current() }}" class="text-sm px-4 py-2 bg-red-50
hover:bg-red-100 text-red-700 rounded-lg transition font-medium flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2"
fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-
width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0
0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
Reset
</a>
</div>
</div>

<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">
<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>
@endsection