@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 data-aos="fade-down" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                class="text-gray-100 font-semibold">Home/ <span class="text-gray-800">Admissions</span></h1>
            <span data-aos="flip-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                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 data-aos="flip-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                src="{{ asset('logo.jpg') }}" alt="Logo Image" class="rounded-full w-20 h-20">
            <h1 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                class="font-semibold text-3xl text-center">Maasai Education Center</h1>
            <h1 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                class="font-semibold text-xl">Student Admission Form</h1>
            <h1 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                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 data-aos="fade-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                    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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                    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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                    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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                    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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                    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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                    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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out">
                        <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 data-aos="fade-right" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                    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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                        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 data-aos="fade-up" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out"
                        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 data-aos="flip-right" data-aos-delay="50" data-aos-duration="1000"
                            data-aos-easing="ease-in-out"
                            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