@extends('layouts.site')
@section('title','Admission')
@section('style')
<style>
    .svg-bg {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
    }
</style>
@endsection
@section('content')
<section id="content">
    <div class="content-wrap py-0">
        <section id="slider" class="slider-element">
            <img style="left: 0;transform: rotateY(180deg)" src="{{ env('SECURE_ASSETS').'/assets/site/images/img/hero-16.svg'}}" class=" svg-bg d-none d-lg-block" alt="">
            <div class="vertical-middle min-vh-lg-100">
                <div class="container py-5 py-lg-0">
                    <div class="row align-items-center justify-content-between">
                        <div class="col-lg-5 mt-6">
                            <div class="card border-0 p-4 rounded-4 shadow-lg">
                                <div class="card-body">
                                    <h2 class="mb-1" style="color: #8c2828;">GAS Application Form</h2>
                                    <hr class="my-4">
                                    <form class="row mb-0 mt-4" action="{{route('site.admission.store')}}" method="POST">
                                        @csrf
                                        <div class="col-md-4 form-group">
                                            <input type="text" name="applicant_first_name" value="{{ old('applicant_first_name') }}" class="form-control" placeholder="First Name" required>
                                        </div>
                                        <div class="col-md-4 form-group">
                                            <input type="text" name="applicant_middle_name" value="{{ old('applicant_middle_name') }}" class="form-control" placeholder="Middle Name" required>
                                        </div>
                                        <div class="col-md-4 form-group">
                                            <input type="text" name="applicant_last_name" value="{{ old('applicant_last_name') }}" class="form-control" placeholder="Last Name" required>
                                        </div>
                                        <div class="col-12 form-group">
                                            <input type="email" name="applicant_email" value="{{ old('applicant_email') }}" class="form-control" placeholder="Contact Email" required>
                                        </div>

                                        <div class="col-12 form-group">
                                            <label for="applicant_date_of_birth" class="text-muted">Date of Birth <span class="text-danger">*</span></label>
                                            <input type="date" id="applicant_date_of_birth" value="{{ old('applicant_date_of_birth') }}" class="form-control" name="applicant_date_of_birth" required>
                                        </div>

                                        <div class="col-12 form-group">
                                            <label for="grade" class="text-muted">Year Applying For <span class="text-danger">*</span></label>
                                            <select name="applicant_grade" id="applicant_grade" class="form-select">
                                                <option value="10">grade 10</option>
                                                <option value="11">grade 11</option>
                                                <option value="12">grade 12</option>
                                            </select>
                                        </div>

                                        <div class="col-12 form-group">
                                            {{-- <label for="student_number" class="text-muted">Student phone <span class="text-danger">*</span></label> --}}
                                            <input type="text" id="applicant_phone" value="{{ old('applicant_phone') }}" placeholder="Student phone" class="form-control" name="applicant_phone" required>
                                        </div>

                                        <div class="col-12 form-group">
                                            {{-- <label for="parent_number" class="text-muted">Parent phone <span class="text-danger">*</span></label> --}}
                                            <input type="text" id="applicant_parent_phone" value="{{ old('applicant_parent_phone') }}" placeholder="Parent phone" class="form-control" name="applicant_parent_phone" required>
                                        </div>

                                        <div class="col-12 form-group">
                                            <div class="cf-turnstile"
                                            data-sitekey="0x4AAAAAAAVSiWtVuwg8UWRe"
                                            data-callback="onTurnstileSuccess"
                                            data-theme="light"
                                       ></div>
                                        </div>
                                        <div class="css3-spinner d-none" style="--cnvs-loader-color:var(--cnvs-themecolor);">
                                            <div class="css3-spinner-ball-pulse-sync">
                                                <div></div>
                                                <div></div>
                                                <div></div>
                                            </div>
                                        </div>
                                        <div class="col-12 mt-2">
                                            <button type="submit" disabled class="text-end mx-auto d-block  w-90 button button-rounded button-reveal button-large button-border tada animated">
                                                <i class="bi-arrow-right"></i>
                                                <span>Apply Now</span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <h6 class="text-uppercase ls-4 fw-normal op-05">Admission</h6>
                            <h1 class="display-4 fw-bold" style="color: #8c2828;">Apply to GAS.</h1>
                            <p class="lead mb-5 op-06">Once you click submit, you will be notified via email with your application ID</p>
                            <a href="{{ route('home') }}" class="button button-rounded button-reveal button-large button-border  tada animated">
                                <span>Back to home</span>
                                <i class="bi-arrow-left"></i>
                            </a>
                            <a href="{{ route('site.followAdmission') }}" class="button button-rounded button-reveal button-large button-border text-end tada animated">
                                <i class="bi-arrow-right"></i>
                                <span>Follow up</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</section>
@endsection