@extends('layouts.app')

@section('title', 'Students')

@section('content')
<div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;">
        <h2 style="font-size:17px;color:#0b4f2c;">Students</h2>
        <button style="background:#0b4f2c;color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:13px;cursor:pointer;">
            + Add Student
        </button>
    </div>

    <div style="display:flex;gap:10px;margin-bottom:16px;">
        <input type="text" placeholder="Search by name or admission no." style="flex:1;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:13px;">
        <select style="padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:13px;">
            <option value="">All Classes</option>
            @foreach($classes ?? [] as $class)
                <option value="{{ $class->id }}">{{ $class->name }}</option>
            @endforeach
        </select>
        <select style="padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:13px;">
            <option value="">All Status</option>
            <option value="Active">Active</option>
            <option value="Graduated">Graduated</option>
            <option value="Transferred">Transferred</option>
            <option value="Withdrawn">Withdrawn</option>
        </select>
    </div>

    <table style="width:100%;border-collapse:collapse;font-size:13px;">
        <thead>
            <tr style="background:#f4f6f5;text-align:left;">
                <th style="padding:8px;">Passport</th>
                <th style="padding:8px;">Admission No.</th>
                <th style="padding:8px;">Name</th>
                <th style="padding:8px;">Class</th>
                <th style="padding:8px;">Gender</th>
                <th style="padding:8px;">Status</th>
                <th style="padding:8px;">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($students ?? [] as $student)
                <tr style="border-bottom:1px solid #eee;">
                    <td style="padding:8px;">
                        @if($student->passport_path)
                            <img src="{{ asset('storage/' . $student->passport_path) }}" style="width:32px;height:32px;border-radius:4px;object-fit:cover;">
                        @else
                            <div style="width:32px;height:32px;border-radius:4px;background:#eee;"></div>
                        @endif
                    </td>
                    <td style="padding:8px;">{{ $student->admission_number }}</td>
                    <td style="padding:8px;font-weight:bold;">{{ $student->full_name }}</td>
                    <td style="padding:8px;">{{ $student->classArm->schoolClass->name ?? '—' }} {{ $student->classArm->name ?? '' }}</td>
                    <td style="padding:8px;">{{ $student->gender }}</td>
                    <td style="padding:8px;">
                        <span style="background:{{ $student->status === 'Active' ? '#e5f5ea' : '#f5e5e5' }};color:{{ $student->status === 'Active' ? '#0b4f2c' : '#a33' }};padding:2px 8px;border-radius:10px;font-size:11px;">
                            {{ $student->status }}
                        </span>
                    </td>
                    <td style="padding:8px;">
                        <a href="{{ url('/students/' . $student->id) }}" style="color:#0b4f2c;text-decoration:none;font-size:12px;">View</a>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" style="padding:20px;text-align:center;color:#999;">No students found.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection