@php use App\Models\Audition;use Illuminate\Support\Facades\Auth; @endphp

<x-layout.app>
    <x-slot:page_title>Students</x-slot:page_title>

    <x-layout.page-section-container>
        <x-layout.page-section>
            <x-slot:section_name>Add Student</x-slot:section_name>
            <x-form.form method="POST" action="{{ route('students.store') }}" class="mb-6 mt-3">
                <x-form.body-grid columns="8" class="max-w-full">
                    <x-form.field name="first_name" label_text="First Name" colspan="3" autofocus />
                    <x-form.field name="last_name" label_text="Last Name" colspan="3"/>

                    <x-form.select name="grade">
                        <x-slot:label>Grade</x-slot:label>
                        @php($n = Audition::min('minimum_grade'))
                        @php($maxGrade = Audition::max('maximum_grade'))
                        @while($n <= $maxGrade)
                            <option value="{{ $n }}">{{ $n }}</option>
                            @php($n++);
                        @endwhile
                    </x-form.select>

                    @if(auditionSetting('student_data_collect_shirt_size'))
                        <x-form.select name="shirt_size" colspan="2">
                            <x-slot:label>Shirt Size</x-slot:label>
                            <option value="none"> </option>
                            <option value="YS">Youth S</option>
                            <option value="YM">Youth M</option>
                            <option value="YL">Youth L</option>
                            <option value="YXL">Youth XL</option>
                            <option value="S">S</option>
                            <option value="M">M</option>
                            <option value="L">L</option>
                            <option value="XL">XL</option>
                            <option value="2XL">2XL</option>
                            <option value="3XL">3XL</option>
                        </x-form.select>
                    @endif


                    <x-form.button class="mt-6">Save</x-form.button>
                </x-form.body-grid>
            </x-form.form>
        </x-layout.page-section>


        <x-layout.page-section>
            <x-slot:section_name>Student Listing</x-slot:section_name>
            <div class="px-4">
                <x-table.table>
                    <thead>
                    <tr>
                        <x-table.th first>Name</x-table.th>
                        <x-table.th>Grade</x-table.th>
                        @if(auditionSetting('student_data_collect_shirt_size'))
                            <x-table.th>Shirt</x-table.th>
                        @endif
                        <x-table.th class="hidden md:table-cell">Entries</x-table.th>
                        <x-table.th spacer_only>
                            <span class="sr-only">Edit</span>
                        </x-table.th>
                    </tr>
                    </thead>
                    <x-table.body >
                        @foreach($students as $student)
                            <tr>
                                <x-table.td first>{{ $student->full_name(true) }}</x-table.td>
                                <x-table.td>{{ $student->grade }}</x-table.td>
                                @if(auditionSetting('student_data_collect_shirt_size'))
                                    <x-table.th>sss</x-table.th>
                                @endif
                                <x-table.td class="hidden md:table-cell">{{ $student->entries_count }}</x-table.td>
                                <x-table.td for_button>
                                    @if( $student->entries_count === 0)
                                        <form method="POST" action="{{ route('students.destroy',$student) }}" class="inline">
                                            @csrf
                                            @method('DELETE')
                                            <x-table.button
                                                onclick="return confirm('Please confirm you would like to delete the student {{ $student->full_name() }}');"
                                            >Delete
                                            </x-table.button>
                                        </form>
                                        |
                                    @endif
                                    <x-table.button href="{{ route('students.edit',$student) }}">Edit</x-table.button>
                                </x-table.td>
                            </tr>
                        @endforeach
                    </x-table.body>
                </x-table.table>
            </div>
        </x-layout.page-section>
    </x-layout.page-section-container>
</x-layout.app>