@php use Illuminate\Support\Facades\Auth; @endphp
@push('scripts')
    {{--    Code from https://codepen.io/ryangjchandler/pen/WNQQKeR--}}
    <script src="{{ asset('js/sort_table_by_column.js') }}"></script>
@endpush
<x-layout.app>
    <x-slot:page_title>Entries</x-slot:page_title>

    <x-layout.page-section-container>
        <x-layout.page-section>
            <x-slot:section_name>Add Entry</x-slot:section_name>
            <x-form.form method="POST" action="{{ route('entries.store') }}" class="pt-6 pb-8">

                <x-form.body-grid columns="6" class="max-w-full" x-data="studentAuditionFilter()">

                    <x-form.select name="student_id" colspan="3" x-model="selectedStudentId" @change="filterAuditions">
                        <x-slot:label>Student</x-slot:label>
                        <option value="" disabled selected>Select a student</option>
                        <template x-for="student in students" :key="student.id">
                            <option :value="student.id" x-text="student.name"></option>
                        </template>
                    </x-form.select>

                    <x-form.select name="audition_id" colspan="3">
                        <x-slot:label>Audition</x-slot:label>
                        <option value="" disabled selected>Select an audition</option>
                        <template x-for="audition in filteredAuditions" :key="audition.id">
                            <option :value="audition.id" x-text="audition.name"></option>
                        </template>
                    </x-form.select>

                    @if(auditionSetting('advanceTo'))
                        <div class="col-span-6 align-top">
                            <x-form.checkbox name="for_seating"
                                             label="Enter for {{ auditionSetting('auditionAbbreviation') }}"
                                             checked />
                        </div>
                        <div class="col-span-5 align-top">
                            <x-form.checkbox name="for_advancement"
                                             label="Enter for {{ auditionSetting('advanceTo') }}"
                                             checked />
                        </div>
                    @else
                        <input type="hidden" name="for_seating" value="on">
                    @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>Entry Listing</x-slot:section_name>
            <x-slot:section_description>You have {{ $entries->count() }} entries</x-slot:section_description>
            <div class="px-6 md:px-8 py-3">
                <x-table.table>
                    <thead>
                    <tr>
                        <x-table.th first>Name</x-table.th>
                        <x-table.th>Grade</x-table.th>
                        <x-table.th>Audition</x-table.th>
                        @if(auditionSetting('advanceTo'))
                            <x-table.th>{{ auditionSetting('auditionAbbreviation') }}</x-table.th>
                            <x-table.th>{{ auditionSetting('advanceTo') }}</x-table.th>
                        @endif
                        <x-table.th spacer_only>
                            <span class="sr-only">Edit</span>
                        </x-table.th>
                    </tr>
                    </thead>
                    <x-table.body>
                        @foreach($entries as $entry)
                            <tr>
                                <x-table.td first>{{ $entry->student->full_name(true) }}</x-table.td>
                                <x-table.td>{{ $entry->student->grade }}</x-table.td>
                                <x-table.td>{{ $entry->audition->name }}</x-table.td>

                                @if(auditionSetting('advanceTo'))
                                    <x-table.td>
                                        @if($entry->for_seating)
                                            <div aria-label="{{ $entry->student->full_name()  }} on {{ $entry->audition->name }} is entered for seating. Entry ID {{ $entry->id }}">
                                                <x-icons.checkmark color="green"/>
                                            </div>
                                        @else
                                            <div aria-label="{{ $entry->student->full_name()  }} on {{ $entry->audition->name }} is not entered for seating. Entry ID {{ $entry->id }}">
                                                <x-icons.circle-slash-no color="red"/>
                                            </div>
                                        @endif
                                    </x-table.td>
                                    <x-table.td>
                                        @if($entry->for_advancement)
                                            <div aria-label="{{ $entry->student->full_name()  }} on {{ $entry->audition->name }} is entered for advancement. Entry ID {{ $entry->id }}">
                                                <x-icons.checkmark color="green"/>

                                            </div>
                                        @else
                                            <div aria-label="{{ $entry->student->full_name()  }} on {{ $entry->audition->name }} is not entered for advancement. Entry ID {{ $entry->id }}">
                                                <x-icons.circle-slash-no color="red"/>

                                            </div>
                                        @endif
                                    </x-table.td>
                                @endif

                                <x-table.td for_button>
                                    @if( $entry->audition->entry_deadline >= now())
                                        <form method="POST" action="{{ route('entries.destroy',$entry) }}" class="inline">
                                            @csrf
                                            @method('DELETE')
                                            <x-table.button
                                                onclick="return confirm('Please confirm you would like to delete the {{ $entry->audition->name }} entry for {{ $entry->student->full_name() }}');"
                                            >Delete</x-table.button>
                                        </form>
                                    @endif
                                </x-table.td>
                            </tr>
                        @endforeach
                    </x-table.body>
                </x-table.table>
            </div>
        </x-layout.page-section>
    </x-layout.page-section-container>
    @include('students.student_audition_select_script')
</x-layout.app>