@extends('layouts.site')
@section('title','Admission')
@section('style')
<!-- Plugins/Components CSS -->
<style>
    .block-form-2 .form-control {
        --cnvs-input-btn-padding-y: 15px;
        --cnvs-input-btn-padding-x: 2px;
        --cnvs-input-btn-font-weight: 500;
        --cnvs-input-btn-font-size: 18px;
        --cnvs-input-btn-border-color: #DDD;
    }

    .block-form-2 .form-control::-moz-placeholder {
        color: #DDD;
        font-weight: 400;
        font-size: 15px;
    }

    .block-form-2 .form-control:-ms-input-placeholder {
        color: #DDD;
        font-weight: 400;
        font-size: 15px;
    }

    .block-form-2 .form-control::-webkit-input-placeholder {
        color: #DDD;
        font-weight: 400;
        font-size: 15px;
    }

    .block-form-2 label:not(.custom-control-label):not(.error) {
        text-transform: none;
        letter-spacing: 0;
        font-weight: 500;
        color: #777;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .nav-pills .nav-link,
    .section-title {
        padding: 10px 17px;
        color: #FFF;
        background-color: #2d3a56;
        ;
        border: 1px solid transparent;
    }

    .block-form-2 .nav-pills .nav-link.active,
    .block-form-2 .nav-pills .show>.nav-link,
    .block-form-2 .nav-pills .nav-link:not(.active) {
        background-color: #2d3a56;
        border-color: #2d3a56;
    }

    .block-form-2 .nav-pills .nav-link:not(.active) {
        opacity: .7;
    }

    .block-form-2 .nav-pills .nav-link.active~.nav-link {
        opacity: 1;
        color: var(--cnvs-constrast-600);
        background-color: var(--cnvs-constrast-100);
        pointer-events: none;
    }

    .block-form-2 .flatpickr-input.form-control[readonly] {
        background-color: inherit;
    }

    label.error {
        display: block !important;
        color: #762626;
        font-size: 12px !important;
        font-weight: 400 !important;
        opacity: 0.9;
        font-style: italic;
        letter-spacing: 0;
        text-transform: none;
    }

    .svg-bg {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 0;
    }


    @media (max-width: 767.98px) {
        .section-title {
            font-size: .8rem;
        }

        .preview-title {
            font-size: 1.3rem;
        }

        .next-btn {
            padding: 4px;
        }
    }

</style>
@endsection
@section('content')
<section id="content" class="block-form-2">
    <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-12 p-4 p-lg-5">
                            @include('errors.form-errors')
                            <div class="card border-0 p-4 rounded-4 shadow-lg">
                                <div class="card-body">
                                    <h2 class="mb-1 bounce animated" style="color: #8c2828;">GBS Admission Form</h2>
                                    <div class="line line-sm" style="background:#762626"></div>
                                    <form id="admission-form" class="mb-0" action="{{route('site.admission.store')}}" method="post" enctype="multipart/form-data">
                                        @csrf
                                        <div class="form-process"></div>

                                        <div id="tab-admission" class="nav nav-pills flex-column flex-lg-row" role="tablist">
                                            <a class="nav-link active ms-0" data-bs-toggle="list" href="#tab-student-info" role="tab">1. Student Information</a>
                                            <a class="nav-link ms-0 mt-2 mt-lg-0 ms-lg-3" data-bs-toggle="list" href="#tab-guardians-info" role="tab">2. Guardians Information</a>
                                            {{-- <a class="nav-link ms-0 mt-2 mt-lg-0 ms-lg-3" data-bs-toggle="list" href="#tab-health-record" role="tab">3. Health Record</a>
                                            <a class="nav-link ms-0 mt-2 mt-lg-0 ms-lg-3" data-bs-toggle="list" href="#tab-scanned-paper" role="tab">4. Documents</a> --}}
                                            {{-- <a class="nav-link ms-0 mt-2 mt-lg-0 ms-lg-3" data-bs-toggle="list" href="#tab-preview" role="tab">5. Review</a> --}}
                                        </div>

                                        <div class="line line-sm" style="background:#762626"></div>
                                        <div class="tab-content mt-5" id="nav-tabContent">
                                            <div class="tab-pane fade show active" id="tab-student-info">
                                                <span class="op-05 text-smaller ls-1">STEP - 1/2</span>
                                                <h2 class="mb-5 text-uppercase ls-1 fw-bold section-title">Student Information</h2>

                                                <div class="row">
                                                    <div class="col-md-6 mb-5">
                                                        <label for="step-applicant-academic-year-applying-for">Academic Year Applying for:</label>
                                                        <select name="applicant_academic_year_applying_for" id="step-applicant-academic-year-applying-for" class="form-select form-control border-form-control ">
                                                            @foreach ($academicYears as $year)
                                                            <option value="{{ $year->id }}">{{ $year->year }} / {{ $year->year + 1 }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    <div class="col-md-12 mb-4">
                                                        <label for="step-student-name">Full Name as Passport:</label>
                                                        <div class="row">
                                                            <div class="col-md-4">
                                                                <input type="text" name="applicant_first_name" id="step-student-first-name" class=" @error('applicant_first_name') error @enderror form-control border-form-control required" value="{{ old('applicant_first_name') }}" placeholder="Student First Name">
                                                                @error('applicant_first_name')
                                                                <label for="step-student-name" class="error d-block">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                            <div class="col-md-4">
                                                                <input type="text" name="applicant_middle_name" id="step-student-middle-name" class=" @error('applicant_middle_name') error @enderror form-control border-form-control required" value="{{ old('applicant_middle_name') }}" placeholder="Student Middle Name">
                                                                @error('applicant_middle_name')
                                                                <label for="step-student-name" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                            <div class="col-md-4">
                                                                <input type="text" name="applicant_last_name" id="step-student-last-name" class=" @error('applicant_last_name') error @enderror form-control border-form-control required" value="{{ old('applicant_last_name') }}" placeholder="Student Last Name">
                                                                @error('applicant_last_name')
                                                                <label for="step-student-name" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-current-school-name">Current School:</label>
                                                        <input type="text" name="applicant_current_school" id="step-current-school-name" class=" @error('applicant_current_school') error @enderror form-control border-form-control required" value="{{ old('applicant_current_school') }}" placeholder="GAS">
                                                        @error('applicant_current_school')
                                                        <label for="step-current-school-name" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>

                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-date-of-birth">Student’s Date of Birth:</label>
                                                        <input type="date" value="{{ old('applicant_date_of_birth') }}" class="@error('applicant_date_of_birth') error @enderror form-control border-form-control required text-start" id="step-date-of-birth" name="applicant_date_of_birth" placeholder="DD/MM/YYYY">
                                                        @error('applicant_date_of_birth')
                                                        <label for="step-date-of-birth" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6 mb-5">
                                                        <label for="step-grade">Year Applying for:</label>
                                                        <select name="applicant_grade" id="step-grade" class="form-select form-control border-form-control ">
                                                            {{-- <option value="9">Grade 9</option> --}}
                                                            <option value="10">Year 10</option>
                                                            <option value="11">Year 11</option>
                                                            <option value="12">Year 12</option>
                                                        </select>
                                                    </div>
                                                    {{-- <div class="col-md-6 mb-5">
                                                        <label for="step-current-academic-year">Current Grade:</label>
                                                        <select name="applicant_current_academic_year" id="step-current-academic-year" class="form-select form-control border-form-control ">
                                                            <option value="{{ date('Y') }}">{{ date('Y') }}</option>
                                                            <option value="9">Grade 9</option>
                                                            <option value="10">Grade 10</option>
                                                            <option value="11">Grade 11</option>
                                                            <option value="12">Grade 12</option>
                                                        </select>
                                                    </div> --}}

                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-email">
                                                            Contact Email:
                                                            <span class="ms-1" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-original-title="Main contact email for any official communication from the school.">
                                                                <i class="uil-comment-info"></i>
                                                            </span>

                                                        </label>
                                                        <input type="email" name="applicant_email" id="step-email" class="@error('applicant_email') error @enderror form-control border-form-control required" value="{{ old('applicant_email') }}" placeholder="example@email.com">
                                                        @error('applicant_email')
                                                        <label for="step-email" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-phone">Contact Number (Active WhatsApp Number):</label><br>
                                                        <input type="text" name="applicant_phone" id="step-phone" class="@error('applicant_phone') error @enderror form-control border-form-control required" value="{{ old('applicant_phone') }}" placeholder="+20111XXXX">
                                                        @error('applicant_phone')
                                                        <label for="step-phone" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-address">Student’s address:</label><br>
                                                        <input type="text" name="applicant_address" id="step-address" class="@error('applicant_address') error @enderror form-control border-form-control required" value="{{ old('applicant_address') }}" placeholder="123, Maadi, Cairo, Egypt ">
                                                        @error('applicant_address')
                                                        <label for="step-address" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6 mb-5">
                                                        <label for="step-gender">Gender:</label>
                                                        <select name="applicant_gender" id="step-gender" class="form-select form-control border-form-control ">
                                                            <option value="m">Male</option>
                                                            <option value="f">Female</option>
                                                        </select>
                                                    </div>
                                                    {{-- <div class="col-md-6 mb-5">
                                                        <label for="step-gender">National or International:</label>
                                                        <select name="is_international" id="step-is-international" class="form-select form-control border-form-control ">
                                                            <option value="0">National</option>
                                                            <option value="1">International</option>
                                                        </select>
                                                    </div> --}}
                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-national-id">National ID:</label><br>
                                                        <input type="text" name="applicant_national_id" id="step-national-id" class="@error('applicant_national_id') error @enderror form-control border-form-control required" value="{{ old('applicant_national_id') }}" placeholder="12344455">
                                                        @error('applicant_national_id')
                                                        <label for="step-national-id" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="w-100 clear"></div>
                                                    <div class="col-12 text-end">
                                                        <a href="#" class="tab-action-btn-next next-btn text-white text-end button button-rounded button-reveal button-large button-border  tada animated" style="background-color: #2D3A56;">
                                                            <i class="bi-arrow-right"></i>
                                                            <span>Next step</span>
                                                        </a>
                                                    </div>

                                                </div>
                                            </div>

                                            <div class="tab-pane fade" id="tab-guardians-info">
                                                <span class="op-05 text-smaller ls-1">STEP - 2/2</span>
                                                <h2 class="mb-5 text-uppercase ls-1 fw-bold section-title">Guardians Information</h2>
                                                <div class="row">
                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-father-name">Father’s Name:</label>
                                                        <input type="text" name="applicant_father_name" id="step-father-name" class="@error('applicant_father_name') error @enderror form-control border-form-control required" value="{{ old('applicant_father_name') }}" placeholder="Father Name">
                                                        @error('applicant_father_name')
                                                        <label for="step-father-name" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-father-occupation">Father’s Occupation:</label>
                                                        <input type="text" name="applicant_father_occupation" id="step-father-occupation" class="@error('applicant_father_occupation') error @enderror form-control border-form-control required" value="{{ old('applicant_father_occupation') }}" placeholder="Engineer, Doctor, etc..">
                                                        @error('applicant_father_occupation')
                                                        <label for="step-father-occupation" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-father-email">Father’s Email:</label>
                                                        <input type="email" name="applicant_father_email" id="step-father-email" class="@error('applicant_father_email') error @enderror form-control border-form-control required" value="{{ old('applicant_father_email') }}" placeholder="mail@example.com">
                                                        @error('applicant_father_email')
                                                        <label for="step-father-email" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-father-phone">Father’s Contact Number:</label><br>
                                                        <input name="applicant_father_phone" id="step-father-phone" class="@error('applicant_father_phone') error @enderror form-control border-form-control required" value="{{ old('applicant_father_phone') }}" placeholder="+20111XXXX">
                                                        @error('applicant_father_phone')
                                                        <label for="step-father-phone" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>

                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-mother-name">Mother’s Name:</label>
                                                        <input type="text" name="applicant_mother_name" id="step-mother-name" class="@error('applicant_mother_name') error @enderror form-control border-form-control required" value="{{ old('applicant_mother_name') }}" placeholder="Mother Name">
                                                        @error('applicant_mother_name')
                                                        <label for="step-mother-name" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-mother-occupation">Mother’s Occupation:</label>
                                                        <input type="text" name="applicant_mother_occupation" id="step-mother-occupation" class="@error('applicant_mother_occupation') error @enderror form-control border-form-control required" value="{{ old('applicant_mother_occupation') }}" placeholder="Engineer, Doctor, etc..">
                                                        @error('applicant_mother_occupation')
                                                        <label for="step-mother-occupation" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-mother-email">Mother’s Email:</label>
                                                        <input type="email" name="applicant_mother_email" id="step-mother-email" class="@error('applicant_mother_email') error @enderror form-control border-form-control required" value="{{ old('applicant_mother_email') }}" placeholder="mail@example.com">
                                                        @error('applicant_mother_email')
                                                        <label for="step-mother-email" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-md-6 mb-4">
                                                        <label for="step-mother-phone">Mother's Contact Number:</label><br>
                                                        <input name="applicant_mother_phone" id="step-mother-phone" class="@error('applicant_mother_phone') error @enderror form-control border-form-control required" value="{{ old('applicant_mother_phone') }}" placeholder="+20111XXXX">
                                                        @error('applicant_mother_phone')
                                                        <label for="step-mother-phone" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="w-100 clear"></div>
                                                    {{-- <div class="col-md-6 text-end">
                                                        <a href="#tab-student-info" class="btn px-5 py-3 tab-action-btn-previous text-white" style="background-color: #8c2828;;">Previous Step</a>
                                                    </div> --}}
                                                    {{-- <div class="col-md-12 mt-2 text-end">
                                                        <a href="#" id="next_to_health_record_step_btn" class="tab-action-btn-next next-btn text-white text-end button button-rounded button-reveal button-large button-border  tada animated" style="background-color: #2D3A56;">
                                                            <i class="bi-arrow-right"></i>
                                                            <span>Next step</span>
                                                        </a>
                                                    </div> --}}
                                                    <div class="w-100 clear"></div>
                                                    <div class="row">
                                                        <div class="col-12 form-group">
                                                            <div class="cf-turnstile"
                                                            data-sitekey="0x4AAAAAAAVSiWtVuwg8UWRe"
                                                            data-callback="onTurnstileSuccess"
                                                            data-theme="light"
                                                       ></div>
                                                       <input type="hidden" name="g-recaptcha-response" id="recaptchaResponse">
                                                        </div>
                                                        <div class="col-12 py-4">
                                                            <div class="css3-spinner d-none " style="--cnvs-loader-color:#2d3a56;;">
                                                                <div class="css3-spinner-ball-pulse-sync">
                                                                    <div></div>
                                                                    <div></div>
                                                                    <div></div>
                                                                </div>
                                                            </div>
                                                            <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>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- <div class="tab-pane fade" id="tab-health-record">
                                                <span class="op-05 text-smaller ls-1">STEP - 3/4</span>
                                                <h2 class="mb-5 text-uppercase ls-1 fw-bold section-title">Health Information</h2>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <h4 class="text-center" style="color:#762626">Allergies</h4>
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-food">Food:</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_food" id="step-is-food" class="@error('applicant_is_food') error @enderror" {{ old('applicant_is_food') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_food" id="step-food" class="@error('applicant_food') error @enderror form-control  border-form-control" value="{{ old('applicant_food') }}">
                                                                @error('applicant_food')
                                                                <label for="step-food" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-medication">Medication:</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_medication" id="step-is-medication" class="@error('applicant_is_medication') error @enderror" {{ old('applicant_is_medication') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_medication" id="step-medication" class="@error('applicant_medication') error @enderror form-control  border-form-control" value="{{ old('applicant_medication') }}">
                                                                @error('applicant_medication')
                                                                <label for="step-medication" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-other-allergies">Other:</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_other_allergies" id="step-is-other-allergies" class="@error('applicant_is_other_allergies') error @enderror" {{ old('applicant_is_other_allergies') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_other_allergies" id="step-other-allergies" class="@error('applicant_other_allergies') error @enderror form-control  border-form-control" value="{{ old('applicant_other_allergies') }}">
                                                                @error('applicant_other_allergies')
                                                                <label for="step-other-allergies" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <h4 class="text-center" style="color:#762626">Chronic Conditions</h4>
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-asthma">Asthma:</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_asthma" id="step-is-asthma" class="@error('applicant_is_asthma') error @enderror" {{ old('applicant_is_asthma') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_asthma" id="step-asthma" class="@error('applicant_asthma') error @enderror form-control  border-form-control" value="{{ old('applicant_asthma') }}">
                                                                @error('applicant_food')
                                                                <label for="step-asthma" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-diabetes">Diabetes:</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_diabetes" id="step-is-diabetes" class="@error('applicant_is_diabetes') error @enderror" {{ old('applicant_is_diabetes') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_diabetes" id="step-diabetes" class="@error('applicant_diabetes') error @enderror form-control  border-form-control" value="{{ old('applicant_diabetes') }}">
                                                                @error('applicant_diabetes')
                                                                <label for="step-diabetes" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-seizures">Seizures:</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_seizures" id="step-is-seizures" class="@error('applicant_seizures') error @enderror" {{ old('applicant_seizures') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_seizures" id="step-seizures" class="@error('applicant_seizures') error @enderror form-control  border-form-control" value="{{ old('applicant_seizures') }}">
                                                                @error('applicant_seizures')
                                                                <label for="step-seizures" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-other-chronic-conditions">Other:</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_other_chronic_conditions" id="step-is-other-chronic-conditions" class="@error('applicant_is_other_chronic_conditions') error @enderror" {{ old('applicant_is_other_chronic_conditions') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_other_chronic_conditions" id="step-other-chronic-conditions" class="@error('applicant_other_chronic_conditions') error @enderror form-control  border-form-control" value="{{ old('applicant_other_chronic_conditions') }}">
                                                                @error('applicant_chronic_conditions')
                                                                <label for="step-other-chronic-conditions" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <h2 class="mb-5 text-uppercase ls-1 fw-bold section-title">Limitations</h2>
                                                <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-mobility">Mobility :</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_mobility" id="step-is-mobility" class="@error('applicant_is_mobility') error @enderror" {{ old('applicant_is_mobility') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_mobility" id="step-mobility" class="@error('applicant_mobility') error @enderror form-control  border-form-control" value="{{ old('applicant_mobility') }}">
                                                                @error('applicant_mobility')
                                                                <label for="step-mobility" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-vision">Vision:</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_vision" id="step-is-vision" class="@error('applicant_is_vision') error @enderror" {{ old('applicant_is_vision') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_vision" id="step-vision" class="@error('applicant_vision') error @enderror form-control  border-form-control" value="{{ old('applicant_vision') }}">
                                                                @error('applicant_vision')
                                                                <label for="step-vision" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-hearing">Hearing:</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_hearing" id="step-is-hearing" class="@error('applicant_is_hearing') error @enderror" {{ old('applicant_is_hearing') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_hearing" id="step-hearing" class="@error('applicant_hearing') error @enderror form-control  border-form-control" value="{{ old('applicant_hearing') }}">
                                                                @error('applicant_hearing')
                                                                <label for="step-hearing" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div class="row my-3">
                                                            <div class="col-md-3 mt-3">
                                                                <label for="step-developmental">Developmental:</label>
                                                            </div>
                                                            <div class="col-md-7 d-flex">
                                                                <input type="checkbox" name="applicant_is_developmental" id="step-is-developmental" class="@error('applicant_is_developmental') error @enderror" {{ old('applicant_is_developmental') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_developmental" id="step-developmental" class="@error('applicant_developmental') error @enderror form-control  border-form-control" value="{{ old('applicant_developmental') }}">
                                                                @error('applicant_developmental')
                                                                <label for="step-developmental" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-emotional">Emotional:</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_emotional" id="step-is-emotional" class="@error('applicant_is_emotional') error @enderror" {{ old('applicant_is_emotional') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_emotional" id="step-emotional" class="@error('applicant_emotional') error @enderror form-control  border-form-control" value="{{ old('applicant_emotional') }}">
                                                                @error('applicant_emotional')
                                                                <label for="step-emotional" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                        <div class="row my-3">
                                                            <div class="col-md-2 mt-3">
                                                                <label for="step-other-limitations">Other:</label>
                                                            </div>
                                                            <div class="col-md-8 d-flex">
                                                                <input type="checkbox" name="applicant_is_other_limitations" id="step-is-other-limitations" class="@error('applicant_is_other_limitations') error @enderror" {{ old('applicant_is_other_limitations') ? 'checked':'' }}>
                                                                <input type="text" name="applicant_other_limitations" id="step-other-limitations" class="@error('applicant_other_limitations') error @enderror form-control  border-form-control" value="{{ old('applicant_other_limitations') }}">
                                                                @error('applicant_other_limitations')
                                                                <label for="step-other-limitations" class="error">{{ $message }}</label>
                                                                @enderror
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-12 my-2">
                                                        <label for="step-other-health-concerns">Other Health Concerns:</label>
                                                        <textarea rows="2" name="applicant_other_health_concerns" id="step-other-health-concerns" class=" @error('applicant_other_health_concerns') error @enderror form-control border-form-control">{{ old('applicant_other_health_concerns') }}</textarea>
                                                        @error('applicant_other_health_concerns')
                                                        <label for="step-other-health-concerns" class="error d-block">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                </div>
                                                <div class="w-100 clear"></div>
                                                <div class="col-md-12 mt-2 text-end">
                                                    <a href="#" id="next_to_scanned_paper_step_btn" class="tab-action-btn-next next-btn text-white text-end button button-rounded button-reveal button-large button-border  tada animated" style="background-color: #2D3A56;">
                                                        <i class="bi-arrow-right"></i>
                                                        <span>Next step</span>
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="tab-pane fade" id="tab-scanned-paper">
                                                <span class="op-05 text-smaller ls-1">STEP - 4/4</span>
                                                <h2 class="mb-5 text-uppercase ls-1 fw-bold section-title">Documents</h2>
                                                <div class="row">
                                                    <div class="col-12 mb-4">
                                                        <label for="step-birth-certificate">Birth certificate:</label>
                                                        <input type="file" name="applicant_birth_certificate" id="step-birth-certificate" class="@error('applicant_birth_certificate') error @enderror form-control border-form-control required">
                                                        <span class="text-muted">Max allowed size is 5MB</span>
                                                        @error('applicant_birth_certificate')
                                                        <label for="step-birth-certificate" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-12 mb-4">
                                                        <label for="step-picture">Personal Picture:</label>
                                                        <input type="file" name="applicant_picture" id="step-picture" class="@error('applicant_picture') error @enderror form-control border-form-control required" accept="image/png, image/jpg, image/jpeg">
                                                        <span class="text-muted">Max allowed size is 5MB</span>
                                                        @error('applicant_picture')
                                                        <label for="step-picture" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="col-12 mb-4">
                                                        <label for="step-passport">Passport / NationaLID:</label>
                                                        <input type="file" name="applicant_passport" id="step-passport" class=" @error('applicant_passport') error @enderror form-control border-form-control">
                                                        <span class="text-muted">Max allowed size is 5MB</span>
                                                        @error('applicant_passport')
                                                        <label for="step-passport" class="error">{{ $message }}</label>
                                                        @enderror
                                                    </div>
                                                    <div class="w-100 clear"></div>
                                                    <div class="row">
                                                        <div class="col-12 form-group">
                                                            <div class="cf-turnstile"
                                                            data-sitekey="0x4AAAAAAAVSiWtVuwg8UWRe"
                                                            data-callback="onTurnstileSuccess"
                                                            data-theme="light"
                                                       ></div>
                                                        </div>
                                                        <div class="col-12 py-4">
                                                            <div class="css3-spinner d-none " style="--cnvs-loader-color:#2d3a56;;">
                                                                <div class="css3-spinner-ball-pulse-sync">
                                                                    <div></div>
                                                                    <div></div>
                                                                    <div></div>
                                                                </div>
                                                            </div>
                                                            <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>
                                                    </div>
                                                </div>
                                            </div> --}}

                                            {{-- <div class="tab-pane fade" id="tab-preview">
                                                <span class="op-05 text-smaller ls-1">STEP - 5/5</span>
                                                <h2 class="mb-5 text-uppercase ls-1 fw-bold section-title">Preview & Apply</h2>
                                                <div class="row">
                                                    <div class="col-md-5">
                                                        <h2 class="mb-5 text-uppercase text-center ls-1 fw-bold border-bottom preview-title" style="color:#2d3a56">Student Information</h2>
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <label for="">Student Name:</label>
                                                                <p class="border-bottom pb-3" id="student_name"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-current-school-name">Current School:</label>
                                                                <p class="border-bottom pb-3" id="student_school"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-date-of-birth">Student’s Date Of Birth:</label>
                                                                <p class="border-bottom pb-3" id="student_date_of_birth"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-grade">Year Applying for:</label>
                                                                <p class="border-bottom pb-3" id="student_grade"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-email">Student’s Email:</label>
                                                                <p class="border-bottom pb-3" id="student_email"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-phone">Student’s Contact Number:</label><br>
                                                                <p class="border-bottom pb-3" id="student_phone"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-phone">Student’s Address:</label><br>
                                                                <p class="border-bottom pb-3" id="student_address"></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-1" style="border-left: 1px solid #762626;margin:0 auto;"></div>
                                                    <div class="col-md-5">
                                                        <h2 class="mb-5 text-uppercase text-center ls-1 fw-bold border-bottom preview-title" style="color:#2d3a56">Guardians Information</h2>
                                                        <div class="row">
                                                            <div class="col-12">
                                                                <label for="step-father-name">Father’s Name:</label>
                                                                <p class="border-bottom pb-3" id="father_name"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-father-occupation">Father’s Occupation:</label>
                                                                <p class="border-bottom pb-3" id="father_occupation"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-father-email">Father’s Email:</label>
                                                                <p class="border-bottom pb-3" id="father_email"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-father-phone">Father’s Contact no:</label><br>
                                                                <p class="border-bottom pb-3" id="father_phone"></p>
                                                            </div>

                                                            <div class="col-12">
                                                                <label for="step-mother-name">Mother’s Name:</label>
                                                                <p class="border-bottom pb-3" id="mother_name"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-mother-occupation">Mother’s Occupation:</label>
                                                                <p class="border-bottom pb-3" id="mother_occupation"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-mother-email">Mother’s Email:</label>
                                                                <p class="border-bottom pb-3" id="mother_email"></p>
                                                            </div>
                                                            <div class="col-12">
                                                                <label for="step-mother-phone">Mother's Contact no:</label><br>
                                                                <p class="border-bottom pb-3" id="mother_phone"></p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="col-12 form-group">
                                                        <div class="cf-turnstile"
                                                        data-sitekey="0x4AAAAAAAVSiWtVuwg8UWRe"
                                                        data-callback="onTurnstileSuccess"
                                                        data-theme="light"
                                                   ></div>
                                                    </div>
                                                    <div class="col-12 py-4">
                                                        <div class="css3-spinner d-none " style="--cnvs-loader-color:#2d3a56;;">
                                                            <div class="css3-spinner-ball-pulse-sync">
                                                                <div></div>
                                                                <div></div>
                                                                <div></div>
                                                            </div>
                                                        </div>
                                                        <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>
                                                </div>
                                            </div> --}}
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
</section>
<div id="empty-field-error-message" data-notify-position="top-right" data-notify-type="error" data-notify-msg='<i class="fa-solid fa-circle-exclamation pe-2"></i> Please fill in all required fields'></div>
@endsection
@section('js')
    <!-- Google reCAPTCHA v3 Script -->
    <script src="https://www.google.com/recaptcha/api.js?render={{ env('RECAPTCHA_SITE_KEY') }}"></script>

    <script>

    document.getElementById('admission-form').addEventListener('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission
        grecaptcha.ready(function() {
            grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', {action: 'submit'}).then(function(token) {
                document.getElementById('recaptchaResponse').value = token;
                event.target.submit(); // Submit the form after setting the token
            });
        });
    });
    </script>


<script>
    jQuery(document).ready(function() {
        // check empty fields
        function containsNoString(fields) {
            var containsString = false;
            var count = 0
            fields.each(function() {
                if ($(this).val().trim() == '') {
                    count++
                }
            });
            return count;
        }
        jQuery('.tab-action-btn-next').click(function(e) {
            let elementTab = jQuery(this).parents('.tab-pane');

            jQuery('#admission-form').valid();
            let errors = elementTab.find('.required.error').length;
            let emptyFields = containsNoString(elementTab.find('.required'));

            if (errors > 0) {
                jQuery('#tab-admission > .active').nextAll('a').addClass('disabled');
                return false;
            } else if (emptyFields > 0) {
                SEMICOLON.Modules.notifications(document.querySelector('#empty-field-error-message'));
            } else {
                jQuery('#tab-admission > .active').next('a').removeClass('disabled').trigger('click');
                let nextTabEl = jQuery('#tab-admission > .active').next('a').removeClass('disabled')
                    , tab = new bootstrap.Tab(nextTabEl.get(0));
                tab.show();
                e.preventDefault();
                return false;
            }
        });

        jQuery('#admission-form').on('formSubmitSuccess', function() {
            jQuery(".tab-content .tab-pane:eq(2)").removeClass('active show');
            jQuery(".tab-content .tab-pane:eq(0)").addClass('active show');
            jQuery("#tab-admission .nav-link:eq(2)").removeClass('active');
            jQuery("#tab-admission .nav-link:eq(0)").addClass('active');
        });
    });

</script>

{{-- fill preview page --}}
<script>
    // on click next btn that show the preview step
    $('#next_to_preview_step_btn').on('click', function() {
        $('#student_name').html($('#step-student-name').val());
        $('#student_school').html($('#step-current-school-name').val());
        $('#student_date_of_birth').html($('#step-date-of-birth').val());
        $('#student_grade').html($('#step-grade').val());
        $('#student_email').html($('#step-email').val());
        $('#student_phone').html($('#step-phone').val());
        $('#student_address').html($('#step-address').val());

        $('#father_name').html($('#step-father-name').val());
        $('#father_occupation').html($('#step-father-occupation').val());
        $('#father_email').html($('#step-father-email').val());
        $('#father_phone').html($('#step-father-phone').val());

        $('#mother_name').html($('#step-mother-name').val());
        $('#mother_occupation').html($('#step-mother-occupation').val());
        $('#mother_email').html($('#step-mother-email').val());
        $('#mother_phone').html($('#step-mother-phone').val());

    })

</script>

{{-- Disable the text field  --}}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const checkboxInputs = document.querySelectorAll('input[type="checkbox"]');

        checkboxInputs.forEach(checkbox => {
            const textField = document.querySelector(`#${checkbox.id.replace('is-', '')}`);

            if (textField) {
                // Initial state setup
                textField.disabled = !checkbox.checked;

                // Add event listener to toggle the disabled attribute and clear value if unchecked
                checkbox.addEventListener('change', function() {
                    if (this.checked) {
                        textField.disabled = false;
                    } else {
                        textField.disabled = true;
                        textField.value = ''; // Clear the value
                    }
                });
            }
        });
    });

</script>
@endsection