@extends('layouts.template')

@section('main')

    <header class="">
        <div class="h-80 bg-red-500 p-2 flex items-center justify-center flex-col gap-2">
            <h1 class="text-gray-100 font-semibold">Home/ <span class="text-gray-800">Admissions</span></h1>
            <span class=" font-mija text-white text-3xl md:text-5xl font-semibold">
                    Admissions
            </span>
        </div>
    </header>

    <section class="flex flex-col gap-5 border-b border-gray-400">

        <article class="flex px-3 flex-col items-center justify-center py-10">
            <img src="{{asset('logo.jpg')}}" alt="Logo Image" class="rounded-full w-20 h-20">
            <h1 class="font-semibold text-3xl text-center">Maasai Education Center</h1>
            <h1 class="font-semibold text-xl">Student Admission Form</h1>
            <h1 class="font-semibold text-red-500">Kindly fill all the details appropriately *</h1>
        </article>
    </section>

    <section class="mb-10 flex flex-col gap-5">

        <form action="{{route('store-admissions')}}" method="post" enctype="multipart/form-data"
              class="flex p-3 flex-col gap-5 max-w-7xl w-full mx-auto">
            @csrf

            <article class="">
                <h1 class="font-semibold text-red-500 mb-3">Personal Information</h1>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                    <div>
                        <x-input-label for="firstname" :value="__('First Name')"/>
                        <x-text-input id="firstname" class="block mt-1 w-full" type="text" name="firstname"
                                      placeholder="E.g. John"/>
                        <x-input-error :messages="$errors->get('firstname')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="middlename" :value="__('Middle Name')"/>
                        <x-text-input id="middlename" class="block mt-1 w-full" type="text" name="middlename"
                                      placeholder="E.g. Doe"/>
                        <x-input-error :messages="$errors->get('middlename')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="lastname" :value="__('Last Name')"/>
                        <x-text-input id="lastname" class="block mt-1 w-full" type="text" name="lastname"
                                      placeholder="E.g. Doe"/>
                        <x-input-error :messages="$errors->get('lastname')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="dob" :value="__('Date of Birth')"/>
                        <x-text-input id="dob" class="block mt-1 w-full" type="date" name="dob"
                                      placeholder="E.g. Doe"/>
                        <x-input-error :messages="$errors->get('dob')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="gender" :value="__('Gender')"/>
                        <x-input-select id="gender" class="block mt-1 w-full" type="gender" name="gender">
                            <option selected value="male">Male</option>
                            <option value="female">Female</option>
                        </x-input-select>
                        <x-input-error :messages="$errors->get('idno')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="idno" :value="__('Id Number')"/>
                        <x-text-input id="idno" class="block mt-1 w-full" type="number" name="idno"
                                      placeholder="E.g. 40121212"/>
                        <x-input-error :messages="$errors->get('idno')" class="mt-2"/>
                    </div>
                </div>

            </article>

            <article class="">
                <h1 class="font-semibold text-red-500 mb-3">Contact Details</h1>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                    <div>
                        <x-input-label for="phone" :value="__('Phone Number')"/>
                        <x-text-input id="phone" class="block mt-1 w-full" type="number" name="phone"
                                      placeholder="E.g. 0712345678"/>
                        <x-input-error :messages="$errors->get('phone')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="email" :value="__('Email')"/>
                        <x-text-input id="email" class="block mt-1 w-full" type="text" name="email"
                                      placeholder="E.g. janedoe@123.com"/>
                        <x-input-error :messages="$errors->get('email')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="address" :value="__('Address')"/>
                        <x-text-input id="address" class="block mt-1 w-full" type="text" name="address"
                                      placeholder="E.g. P.O. Box 123, Narok"/>
                        <x-input-error :messages="$errors->get('address')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="location" :value="__('Village / Sub-Location')"/>
                        <x-text-input id="location" class="block mt-1 w-full" type="text" name="location"
                                      placeholder="E.g. Lolgorien"/>
                        <x-input-error :messages="$errors->get('location')" class="mt-2"/>
                    </div>

                </div>

            </article>

            <article class="">
                <h1 class="font-semibold text-red-500 mb-3">Guardian Information</h1>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                    <div>
                        <x-input-label for="gname" :value="__('Name')"/>
                        <x-text-input id="gname" class="block mt-1 w-full" type="text" name="gname"
                                      placeholder="E.g. John Doe"/>
                        <x-input-error :messages="$errors->get('gname')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="goccupation" :value="__('Occupation')"/>
                        <x-text-input id="goccupation" class="block mt-1 w-full" type="text" name="goccupation"
                                      placeholder="E.g. Carpenter"/>
                        <x-input-error :messages="$errors->get('goccupation')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="gidno" :value="__('Id Number')"/>
                        <x-text-input id="gidno" class="block mt-1 w-full" type="number" name="gidno"
                                      placeholder="E.g. 0712345678"/>
                        <x-input-error :messages="$errors->get('gidno')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="gphone" :value="__('Phone Number')"/>
                        <x-text-input id="gphone" class="block mt-1 w-full" type="number" name="gphone"
                                      placeholder="E.g. 0712345678"/>
                        <x-input-error :messages="$errors->get('gphone')" class="mt-2"/>
                    </div>

                </div>

            </article>

            <article class="">
                <h1 class="font-semibold text-red-500 mb-3">Academic Information</h1>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                    <div>
                        <x-input-label for="school" :value="__('School')"/>
                        <x-text-input id="phone" class="block mt-1 w-full" type="text" name="school"
                                      placeholder="E.g. School Name"/>
                        <x-input-error :messages="$errors->get('school')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="year" :value="__('Year of Completion')"/>
                        <x-input-select id="year" class="block mt-1 w-full" name="year">
                            <option selected value="2023">2023</option>
                            <option value="2022">2022</option>
                            <option value="2021">2021</option>
                            <option value="2020">2020</option>
                            <option value="2019">2019</option>
                        </x-input-select>
                        <x-input-error :messages="$errors->get('idno')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="grade" :value="__('Grade Attained')"/>
                        <x-input-select id="grade" class="block mt-1 w-full" name="grade">
                            <option selected value="A">A</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                            <option value="D">D</option>
                            <option value="E">E</option>
                        </x-input-select>
                        <x-input-error :messages="$errors->get('grade')" class="mt-2"/>
                    </div>

                </div>

            </article>

            <article class="">
                <h1 class="font-semibold text-red-500 mb-3">Course Application</h1>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                    <div>
                        <x-input-label for="course" :value="__('Course Applying For')"/>
                        <x-input-select id="year" class="block mt-1 w-full" name="course">

                            @foreach($courses as $course)
                                <option selected value="{{$course->slug}}">{{$course->title}}</option>
                            @endforeach
                        </x-input-select>
                        <x-input-error :messages="$errors->get('course')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="begin" :value="__('Commencement of Course')"/>
                        <x-text-input id="begin" class="block mt-1 w-full" type="date" name="begin"
                        />
                        <x-input-error :messages="$errors->get('begin')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="end" :value="__('End of Course')"/>
                        <x-text-input id="begin" class="block mt-1 w-full" type="date" name="end"
                        />
                        <x-input-error :messages="$errors->get('end')" class="mt-2"/>
                    </div>

                </div>

            </article>

            <article class="">
                <h1 class="font-semibold text-red-500 mb-3">Upload the following supporting documents</h1>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                    <div>
                        <x-input-label for="passport" :value="__('Student Passport Photo')"/>
                        <x-file-input id="passport" class="block mt-1 w-full" type="file" name="passport"
                                     />
                        <x-input-error :messages="$errors->get('passport')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="idcard" :value="__('Student Identity Card (ID)')"/>
                        <x-file-input id="idcard" class="block mt-1 w-full" type="file" name="idcard"
                        />
                        <x-input-error :messages="$errors->get('idcard')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="gidcard" :value="__('Guardian Identity Card (ID)')"/>
                        <x-file-input id="gidcard" class="block mt-1 w-full" type="file" name="gidcard"
                        />
                        <x-input-error :messages="$errors->get('gidcard')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="kcpe" :value="__('KCPE Certificate')"/>
                        <x-file-input id="kcpe" class="block mt-1 w-full" type="file" name="kcpe"
                        />
                        <x-input-error :messages="$errors->get('kcpe')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="secondary" :value="__('Secondary School Leaving Certificate')"/>
                        <x-file-input id="secondary" class="block mt-1 w-full" type="file" name="secondary"
                        />
                        <x-input-error :messages="$errors->get('secondary')" class="mt-2"/>
                    </div>

                    <div>
                        <x-input-label for="kcse" :value="__('KCSE Certificate')"/>
                        <x-file-input id="kcse" class="block mt-1 w-full" type="file" name="kcse"
                        />
                        <x-input-error :messages="$errors->get('kcse')" class="mt-2"/>
                    </div>

                    <div>
                        <div class="flex items-center gap-2">
                        <x-input-label for="medical" :value="__('Medical Certificate')"/>
                            <span class="text-red-500">( In case of special attention )</span>
                        </div>
                        <x-file-input id="medical" class="block mt-1 w-full" type="file" name="medical"
                        />
                        <x-input-error :messages="$errors->get('medical')" class="mt-2"/>
                    </div>

                </div>

            </article>

            <article class="border-t mt-3 py-5">
                <h1 class="font-semibold text-red-500 mb-3">Signing Off</h1>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 items-center">
                    <div class="flex items-center">
                        <div class="flex items-center justify-center">
                            <div class="mt-2 relative w-fit rounded-2xl group  bg-red-500 text-white">
                                <div
                                    class="absolute w-4 h-full bg-red-600 rounded-2xl duration-300 group-hover:w-full"></div>
                                <a href="rules.pdf"
                                   class="px-8 py-4 flex relative items-center gap-2 z-10 font-dosis tracking-widest">
                                    <i class="fa fa-file-pdf"></i>
                                    Download School Rules and Regulations
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="">
                        <div class="flex items-center justify-between gap-2">
                            <x-input-label for="active"
                                           :value="__('I have read the school rules and promise to abide by them')"/>
                            <input id="active" name="active" class="border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300
                        focus:border-indigo-500 dark:focus:border-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600
                         rounded-md shadow-sm" type="checkbox"                            /></div>
                        <x-input-error :messages="$errors->get('active')" class="mt-2"/>
                    </div>

                </div>
                <div class="flex items-center justify-end mt-1 col-span-2">
                    <div class="flex items-center justify-center">
                        <div class="mt-2 relative w-fit rounded-2xl group  bg-red-500 text-white">
                            <div
                                class="absolute w-4 h-full bg-red-600 rounded-2xl duration-300 group-hover:w-full"></div>
                            <button type="submit"
                                    class="px-8 py-4 flex relative items-center gap-2 z-10 font-dosis tracking-widest">
                                Submit Application Form
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </article>



        </form>

    </section>

@endsection
