@extends('layouts.site')
@section('title','Follow Application')
@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 order-2 order-md-1">
                            <div class="card border-0 p-4 rounded-4 shadow-lg">
                                <div class="card-body">
                                    <h2 class="mb-1" style="color: #8c2828;">GAS Application</h2>
                                    <hr class="my-4">
                                    <form class="row mb-0 mt-4" action="{{ route('site.admissionStatus') }}" method="POST">
                                    @csrf
                                        <div class="col-12 form-group">
                                            <input type="number" name="applicant_code" value="{{ old('applicant_code') }}" class="form-control py-2" placeholder="Your Applicantion ID" 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"  min="{{ date('Y-m-d', strtotime('-17 years')) }}" max="{{ date('Y-m-d', strtotime('-9 years')) }}" id="applicant_date_of_birth" value="{{ old('applicant_date_of_birth') }}" class="form-control py-2" name="applicant_date_of_birth" 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>Submit</span>
                                            </button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5 order-1 order-md-2 my-4 tada animated">
                            <h6 class="text-uppercase ls-4 fw-normal op-05">Admission</h6>
                            <h1 class="display-4 fw-bold" style="color: #8c2828;">Follow Your Application status.</h1>
                            <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>
                        </div>
                    </div>
                </div>
            </div>

        </section>
    </div>
</section>
@endsection