{{--@dd($students->toArray())--}}
<x-admin.panel-card>
    @slot('tools')
        @can('add-student')
        <a href="{{ route('student.create') }}" class="btn btn-primary d-inline-flex align-items-center gap-1">
            <svg viewbox="0 0 20 20" fill="currentColor" aria-hidden="true">
                <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
            </svg>
            @lang('Add Student')
        </a>
        @endcan

        @can('import-student')
        <button class="btn btn-light d-inline-flex align-items-center gap-1" onclick="window.importFile.click()">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-upload" viewBox="0 0 16 16">
                <path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
                <path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z"/>
            </svg>
            @lang('Import')
        </button>
        <form action="{{route('student.import')}}" method="POST" id="importForm" enctype="multipart/form-data">@csrf
            <input type="file" name="import" accept=".xlsx,.csv" id="importFile" hidden onchange="window.importForm.submit()">
        </form>
        @endcan
        @can('export-student')
        <a href="{{route('student.export')}}" class="btn btn-light d-inline-flex align-items-center gap-1" onclick="return confirm('{{trans("Are you sure?")}}')">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download" viewBox="0 0 16 16">
                <path d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
                <path d="M7.646 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V5.5a.5.5 0 0 0-1 0v8.793l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/>
            </svg>
            @lang('Export')
        </a>
        @endcan
    @endslot
    @slot('actions')
        <div class="d-flex">
            <select class="form-control" wire:model="class">
                <option value="all">@lang("All")</option>
                @foreach($classes as $class)
                    <option value="{{$class}}">{{$class}}</option>
                @endforeach
            </select>
            <input type="text" class="form-control ms-2" placeholder="{{ trans('Search Student') }}" wire:model="keyword">
        </div>
    @endslot

    <div class="table-responsive my-1 position-relative">
        <div class="position-absolute bg-white-overlay w-100 h-100" style="z-index:9999" wire:loading wire:target="gotoPage,previousPage,nextPage,sortBy">
            <p class="h3 text-center py-2 mb-0 text-white bg-secondary position-absolute w-100 top-50 fw-bolder">Processing...</p>
        </div>
        <table class="table align-middle">
            <thead>
                <tr>
                    <th></th>
                    <th role="button" scope="col" wire:click="sortBy('last_name')" nowrap>
                        @lang('Last Name') <x-widget.sort-arrow-icons column="last_name" :current="$orderBy" :order="$orderDir"/>
                    </th>
                    <th role="button" scope="col" wire:click="sortBy('first_name')" nowrap>
                        @lang('First Name') <x-widget.sort-arrow-icons column="first_name" :current="$orderBy" :order="$orderDir"/>
                    </th>
                    <th role="button" scope="col" wire:click="sortBy('fiscal_code')" nowrap>
                        @lang('Fiscal Code') <x-widget.sort-arrow-icons column="fiscal_code" :current="$orderBy" :order="$orderDir"/>
                    </th>
                    <th role="button" scope="col" wire:click="sortBy('class')" nowrap>
                        @lang('Class') <x-widget.sort-arrow-icons column="class" :current="$orderBy" :order="$orderDir"/>
                    </th>
                    <th role="button" scope="col" wire:click="sortBy('email')" nowrap>
                        @lang('Email') <x-widget.sort-arrow-icons column="email" :current="$orderBy" :order="$orderDir"/>
                    </th>
                    <th role="button" scope="col" wire:click="sortBy('date_of_birth')" nowrap>
                        @lang('Date of Birth') <x-widget.sort-arrow-icons column="date_of_birth" :current="$orderBy" :order="$orderDir"/>
                    </th>
                    @can('send-email')
                    <th scope="col" nowrap>@lang('Last Email Sent')</th>
                    @endcan
                    @can('download-documents')
                    <th role="button" scope="col" wire:click="sortBy('documents_count')" nowrap class="text-center">
                        @lang('Documents') <x-widget.sort-arrow-icons column="documents_count" :current="$orderBy" :order="$orderDir"/>
                    </th>
                    @endcan
                    <th scope="col" sortable nowrap>@lang('Actions')</th>
                </tr>
            </thead>
            <tbody>
            @foreach ($students as $student)
                <tr>
                    <td nowrap>
                        <img src="{{ $student->image_url }}" alt width="42" height="42" class="rounded-circle border" loading="lazy">
                    </td>
                    <td nowrap><h6>{{ $student->last_name }}</h6></td>
                    <td nowrap><h6>{{ $student->first_name }}</h6></td>
                    <td nowrap>{{ $student->fiscal_code }}</td>
                    <td nowrap>{{ $student->class }}</td>
                    <td nowrap>{{ $student->email }}</td>
                    <td nowrap>
                        <span class="rounded py-1 px-2 bg-light text-secondary">
                            {{ formatDate($student->date_of_birth) }}
                        </span>
                    </td>
                    @can('send-email')
                    <td nowrap>{{ formatDateTime($student->last_email_sent ?? null, DATETIME_FORMAT, trans("Never")) }}</td>
                    @endcan
                    @can('download-documents')
                    <td nowrap class="text-center">{{ $student->documents_count ?? '0' }}</td>
                    @endcan
                    <td nowrap>
                        <div class="btn-group btn-group-sm" role="group">
                            @can('edit-student')
                            <a href="{{ route('student.edit', $student->id) }}" class="btn btn-light d-flex" title="{{ trans('Edit') }}">
                                <svg width="17" height="17" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                </svg>
                            </a>
                            @endcan
                            @can('download-documents')
                            <a href="{{ route('documents.show', $student->id) }}" class="btn btn-light d-flex" title="{{ trans('Documents') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-text-fill" viewBox="0 0 16 16">
                                    <path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM4 10.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5zm.5 2.5a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1h-4z"/>
                                </svg>
                            </a>
                            @endcan
                            @can('send-email')
                            <a href="{{ route('student.email.index', $student->id) }}" class="btn btn-light text-info d-flex" title="{{ trans('Send Email') }}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-fill" viewBox="0 0 16 16">
                                    <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z"/>
                                </svg>
                            </a>
                            @endcan
                            @can('remove-student')
                            <button type="submit" class="btn btn-light d-flex text-danger" form="deleteStudent{{ $student->id }}" onclick="return confirm('{{ trans('Are you sure?') }}')" title="{{ trans('Delete') }}">
                                <svg width="17" height="17" fill="none" viewbox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                            @endcan
                        </div>
                        <form action="{{ route('student.destroy', $student->id) }}" method="POST" id="deleteStudent{{ $student->id }}"> @csrf @method('DELETE') </form>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
        <x-admin.pagination-livewire :paginator="$students" />
    </div>
</x-admin.panel-card>