@extends('layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="d-flex flex-column gap-3">

                <x-page-title
                    title="Assigned Students"
                    description="Students assigned to {{ $admin->full_name }}."
                >
                    <a href="javascript:history.back()" class="asset-btn asset-btn--secondary">
                        Back
                    </a>
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <div class="ui-card__header">
                        <div class="d-flex align-items-center gap-3 flex-wrap">
                            <div style="margin-right: auto;">
                                <h6 class="mb-0 ui-title">{{ $admin->full_name }}'s Students</h6>
                                <p class="mb-0 ui-muted">All students assigned to this admin.</p>
                            </div>
                            <span class="ui-pill ui-pill--info">Total: {{ $students->total() }}</span>
                        </div>
                    </div>

                    <x-table
                        :headers="['ID', 'Name', 'Code', 'Mobile', 'Actions']"
                        :paginator="$students"
                        emptyMessage="No students assigned to this admin."
                    >
                        @foreach ($students as $student)
                            <tr>
                                <td class="ui-id text-center">{{ $student->id }}</td>
                                <td class="ui-title text-center">
                                    {{ $student->first_name }} {{ $student->last_name }}
                                </td>
                                <td class="text-center ui-muted">
                                    {{ $student->student_code ?? 'N/A' }}
                                </td>
                                <td class="text-center ui-muted">
                                    {{ $student->mobile ?? 'N/A' }}
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('students.show', $student->id) }}" class="btn btn-outline-primary btn-sm radius-8" title="View Profile">
                                        <iconify-icon icon="mdi:eye-outline" class="text-lg"></iconify-icon>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>

            </div>
        </div>
    </div>
@endsection