@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>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="/students">
                <x-form.body-grid columns="8" class="max-w-full">
                    <x-form.field name="first_name" label_text="First Name" colspan="3"  />
                    <x-form.field name="last_name" label_text="Last Name" colspan="3" />
                    <x-form.field name="grade" label_text="Grade" colspan="1" />
                    {{--   TODO make grade a dropdown    --}}
                    <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>
                    <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>
                            <x-table.td for_button>
                                <x-table.button href="/students/{{ $student->id }}/edit">Edit</x-table.button>
                                |

                                <form method="POST" action="/students/{{ $student->id }}" 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>

                            </x-table.td>
                        </tr>
                    @endforeach
                </x-table.body>
            </x-table.table>
            </div>
        </x-layout.page-section>
    </x-layout.page-section-container>
</x-layout.app>