@extends('layouts.admin')
@section('title','Edit Applicant')

<style>
    .margin_input {
        margin-right: 10px;
    }
    .file-icon {
        display: inline-block;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border: 1px solid #ccc;
        margin-top: 5px;
        font-size: 14px;
        font-weight: bold;
        color: #fff;
    }

    .pdf-icon {
        background-color: #d9534f;
        color: #fff;
    }

    .word-icon {
        background-color: #0275d8;
        color: #fff;
    }

    .unknown-icon {
        background-color: #ccc;
        color: #333;
    }

</style>

@section('content')
<div class="card card-flush h-lg-100">
    <!--begin::Card header-->
    <div class="card-header pt-7">
        <!--begin::Card title-->
        <div class="card-title">
            <i class="ki-outline ki-badge fs-1 me-2"></i>
            <h2>Edit Applicant</h2>
        </div>
        <!--end::Card title-->
    </div>

    <!--end::Card header-->
    <!--begin::Card body-->
    <div class="card-body pt-5">
        {{-- <div class="row">
            @if ($applicant->applicant_picture)
            <div class="col-md-4 text-center">
                <!--begin::Photo-->
                <div class="octagon mx-auto mb-2 d-flex w-150px h-150px bgi-no-repeat bgi-size-contain bgi-position-center" style="background-image:url({{$applicant->getImage($applicant->applicant_picture)}})"></div>
                <!--end::Photo-->
                <!--begin::Person-->
                <div class="mb-0">
                    <!--begin::Name-->
                    <a href="javascript:void(0)" class="text-dark fw-bold text-hover-primary fs-3">Applicant picture</a>
                    <!--end::Name-->
                </div>
                <!--end::Person-->
            </div>
            @endif
            @if ($applicant->applicant_passport)
            <div class="col-md-4 text-center">
                <!--begin::Person-->
                <div class="mb-0">
                    <!--begin::Name-->
                    <a href="{{ $applicant->getDownloadUrl($applicant->applicant_passport) }}" class="text-dark fw-bold text-hover-primary fs-3">Download passport</a>
                    <!--end::Name-->
                </div>
                <!--end::Person-->
            </div>
            @endif
            @if ($applicant->applicant_birth_certificate)
            <div class="col-md-4 text-center">
                <!--begin::Person-->
                <div class="mb-0">
                    <!--begin::Name-->
                    <a href="{{ $applicant->getDownloadUrl($applicant->applicant_birth_certificate) }}" class="text-dark fw-bold text-hover-primary fs-3">Download birth certificate</a>
                    <!--end::Name-->
                </div>
                <!--end::Person-->
            </div>
            @endif
        </div> --}}
        <!--begin::Form-->
        <form class="form" action="{{ route('admin.applicant.update', $applicant->id) }}" method="POST" enctype="multipart/form-data">
            @csrf
            @method('PUT')
            <!-- Applicant Information Section -->
            <div class="card mb-4" style="border: 2px dashed #ccc;">
                <div class="card-header">
                    <h5 class="card-title">Applicant Information</h5>
                </div>
                <div class="card-body">
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
                        <!-- Applicant Name -->
                        <div class="col mb-4">
                            <div class="fv-row">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_name">
                                    <span class="required">Name</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the applicant's full name.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="text" autofocus id="applicant_name" class="form-control @error('applicant_name') is-invalid @enderror" name="applicant_name" value="{{ old('applicant_name') ? old('applicant_name') : $applicant->applicant_name }}" required>
                                @error('applicant_name')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Applicant Email -->
                        <div class="col mb-4">
                            <div class="fv-row">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_email">
                                    <span class="required">Applicant Email</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the applicant's email address.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="email" id="applicant_email" class="form-control @error('applicant_email') is-invalid @enderror" name="applicant_email" value="{{ old('applicant_email') ? old('applicant_email') : $applicant->applicant_email }}" required>
                                @error('applicant_email')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Applicant Phone -->
                        <div class="col mb-4">
                            <div class="fv-row">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_phone">
                                    <span class="required">Applicant Phone</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the applicant's phone number.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="text" id="applicant_phone" value="{{ old('applicant_phone') ? old('applicant_phone') : $applicant->applicant_phone }}" class="form-control @error('applicant_phone') is-invalid @enderror" name="applicant_phone" required>
                                @error('applicant_phone')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Date of Birth -->
                        <div class="col mb-4">
                            <div class="fv-row">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_date_of_birth">
                                    <span class="required">Date of Birth</span>
                                </label>
                                <input type="date" id="applicant_date_of_birth" value="{{ old('applicant_date_of_birth') ? old('applicant_date_of_birth') : $applicant->applicant_date_of_birth }}" class="form-control" name="applicant_date_of_birth" required>
                            </div>
                        </div>
                        <!-- Year Applying For -->
                        <div class="col mb-4">
                            <div class="fv-row">
                                <label for="applicant_grade" class="fs-6 fw-semibold form-label mt-3 required">Grade Applying For</label>
                                <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the applicant's academic year.">
                                    <i class="ki-outline ki-information fs-7"></i>
                                </span>
                                <select name="applicant_grade" id="applicant_grade" class="form-select">
                                    <option value="9" {{ old('applicant_grade', $applicant->applicant_grade) == '9' ? 'selected' : '' }}>Grade 9</option>
                                    <option value="10" {{ old('applicant_grade', $applicant->applicant_grade) == '10' ? 'selected' : '' }}>Grade 10</option>
                                    <option value="11" {{ old('applicant_grade', $applicant->applicant_grade) == '11' ? 'selected' : '' }}>Grade 11</option>
                                    <option value="12" {{ old('applicant_grade', $applicant->applicant_grade) == '12' ? 'selected' : '' }}>Grade 12</option>
                                </select>
                            </div>
                        </div>
                        <div class="col mb-4">
                            <div class="fv-row">
                                <label for="applicant_current_academic_year" class="fs-6 fw-semibold form-label mt-3 required">Current Academic Year:</label>
                                <select name="applicant_current_academic_year" id="applicant_current_academic_year" class="form-select">
                                    <option value="2024" {{ $applicant->applicant_current_academic_year == '2024' ? 'selected' : '' }}>2024</option>
                                    <option value="2025" {{ $applicant->applicant_current_academic_year == '2025' ? 'selected' : '' }}>2025</option>

                                </select>
                            </div>
                        </div>
                        <div class="col mb-5">
                            <div class="fv-row">
                                <label for="applicant_academic_year_applying_for" class="fs-6 fw-semibold form-label mt-3 required">Academic Year Applying For:</label>
                                <select name="applicant_academic_year_applying_for" id="applicant_academic_year_applying_for" class="form-select">
                                    <option value="2024" {{ $applicant->applicant_academic_year_applying_for == '2024' ? 'selected' : '' }}>2024 / 2025</option>
                                    <option value="2025" {{ $applicant->applicant_academic_year_applying_for == '2025' ? 'selected' : '' }}>2025 / 2026</option>
                                </select>
                            </div>
                        </div>
                        <div class="col mb-4">
                            <div class="fv-row">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_current_school">
                                    <span class="required">Current School</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the applicant's full name.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </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="{{ $applicant->applicant_current_school }}" placeholder="GAS">
                                @error('applicant_current_school')
                                <label for="step-current-school-name" class="error">{{ $message }}</label>
                                @enderror
                            </div>
                        </div>
                        <!-- Applicant Address -->
                        <div class="col mb-4">
                            <div class="fv-row">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_address">
                                    <span class="required">Applicant Address</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the applicant's home address.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="text" id="applicant_address" value="{{ old('applicant_address') ? old('applicant_address') : $applicant->applicant_address }}" class="form-control @error('applicant_address') is-invalid @enderror" name="applicant_address" required>
                                @error('applicant_address')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Gender -->
                        <div class="col mb-4">
                            <div class="fv-row">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_gender">
                                    <span class="required">Applicant Gender</span>
                                </label>
                                <select name="applicant_gender" id="applicant_gender" class="form-select">
                                    <option value="m" {{ old('applicant_gender', $applicant->applicant_gender) == 'm' ? 'selected' : '' }}>Male</option>
                                    <option value="f" {{ old('applicant_gender', $applicant->applicant_gender) == 'f' ? 'selected' : '' }}>Female</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6 mb-5">
                            <label for="step-gender" class="fs-6 fw-semibold form-label mt-3 required">National or International:</label>
                            <select name="is_international" id="step-is-international" class="form-select">
                                <option value="0">National</option>
                                <option value="1">International</option>
                            </select>
                        </div>
                        <div class="col-md-6 mb-4">
                            <label for="applicant_national_id" class="fs-6 fw-semibold form-label mt-3 required">National ID:</label><br>
                            <input type="text" name="applicant_national_id" id="applicant_national_id" class="@error('applicant_national_id') error @enderror form-control border-form-control required" value="{{ $applicant->applicant_national_id }}" placeholder="12344455" required>
                            @error('applicant_national_id')
                            <label for="step-national-id" class="error">{{ $message }}</label>
                            @enderror
                        </div>
                        <!-- Status -->
                        <div class="col mb-4">
                            <div class="fv-row">
                                <label class="fs-6 fw-semibold form-label mt-3" for="status">
                                    <span class="required">Status</span>
                                </label>
                                <div class="btn-group w-100" data-kt-buttons="true">
                                    <label class="btn btn-outline btn-color-muted btn-active-primary {{ $applicant->is_active ? 'active' : '' }}">
                                        <input class="btn-check" type="radio" {{ $applicant->is_active ? 'checked' : '' }} name="is_active" value="1" />
                                        Active
                                    </label>
                                    <label class="btn btn-outline btn-color-muted btn-active-primary {{ !$applicant->is_active ? 'active' : '' }}">
                                        <input class="btn-check" type="radio" name="is_active" {{ !$applicant->is_active ? 'checked' : '' }} value="0" />
                                        Inactive
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Parent Information Section -->

            <div class="card mb-4" style="border: 2px dashed #ccc;">
                <div class="card-header">
                    <h5 class="card-title">Parent Information</h5>
                </div>
                <div class="card-body">
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-1 row-cols-lg-3">
                        <!-- Father Name -->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_father_name">
                                    <span class="required">Father Name</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the applicant's father name.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="text" id="applicant_father_name" class="form-control @error('applicant_father_name') is-invalid @enderror" name="applicant_father_name" value="{{ old('applicant_father_name') ? old('applicant_father_name') : $applicant->applicant_father_name }}" required>
                                @error('applicant_father_name')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Father Email -->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_father_email">
                                    <span class="required">Father Email</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the applicant's father email.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="email" id="applicant_father_email" class="form-control @error('applicant_father_email') is-invalid @enderror" name="applicant_father_email" value="{{ old('applicant_father_email') ? old('applicant_father_email') : $applicant->applicant_father_email }}" required>
                                @error('applicant_father_email')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Father Phone -->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_father_phone">
                                    <span class="required">Father Phone</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the father's phone number.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="text" id="applicant_father_phone" value="{{ old('applicant_father_phone') ? old('applicant_father_phone') : $applicant->applicant_father_phone }}" class="form-control @error('applicant_father_phone') is-invalid @enderror" name="applicant_father_phone" required>
                                @error('applicant_father_phone')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_father_occupation">
                                    <span class="required">Father Occupation</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the father's occupation number.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="text" id="applicant_father_occupation" value="{{ old('applicant_father_occupation') ? old('applicant_father_occupation') : $applicant->applicant_father_occupation }}" class="form-control @error('applicant_father_occupation') is-invalid @enderror" name="applicant_father_occupation" required>
                                @error('applicant_father_occupation')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-1 row-cols-lg-3">
                        <!-- Mother Name -->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_mother_name">
                                    <span class="required">Mother Name</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the applicant's mother name.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="text" id="applicant_mother_name" class="form-control @error('applicant_mother_name') is-invalid @enderror" name="applicant_mother_name" value="{{ old('applicant_mother_name') ? old('applicant_mother_name') : $applicant->applicant_mother_name }}" required>
                                @error('applicant_mother_name')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Mother Email -->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_mother_email">
                                    <span class="required">Mother Email</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the applicant's mother email.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="email" id="applicant_mother_email" class="form-control @error('applicant_mother_email') is-invalid @enderror" name="applicant_mother_email" value="{{ old('applicant_mother_email') ? old('applicant_mother_email') : $applicant->applicant_mother_email }}" required>
                                @error('applicant_mother_email')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <!-- Mother Phone -->
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_mother_phone">
                                    <span class="required">Mother Phone</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the mother's phone number.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="text" id="applicant_mother_phone" value="{{ old('applicant_mother_phone') ? old('applicant_mother_phone') : $applicant->applicant_mother_phone }}" class="form-control @error('applicant_mother_phone') is-invalid @enderror" name="applicant_mother_phone" required>
                                @error('applicant_mother_phone')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="col">
                            <div class="fv-row mb-7">
                                <label class="fs-6 fw-semibold form-label mt-3" for="applicant_mother_occupation">
                                    <span class="required">Mother Occupation</span>
                                    <span class="ms-1" data-bs-toggle="tooltip" data-bs-original-title="Enter the mother's occupation number.">
                                        <i class="ki-outline ki-information fs-7"></i>
                                    </span>
                                </label>
                                <input type="text" id="applicant_mother_occupation" value="{{ old('applicant_mother_occupation') ? old('applicant_mother_occupation') : $applicant->applicant_mother_occupation }}" class="form-control @error('applicant_mother_occupation') is-invalid @enderror" name="applicant_mother_occupation" required>
                                @error('applicant_mother_occupation')
                                <div class="d-block fw-bold invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4" style="border: 2px dashed #ccc; background-color: rgb(255, 255, 229)">
                <div class="card-header">
                    <h5 class="card-title">Limitations</h5>
                </div>
                <div class="card-body">
                    <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="margin_input @error('applicant_is_mobility') error @enderror" {{ $limit->applicant_is_mobility == 1 ? 'checked':'' }}>
                                    <input type="text" name="applicant_mobility" id="step-mobility" class="@error('applicant_mobility') error @enderror form-control  border-form-control" value="{{ $limit->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="margin_input @error('applicant_is_vision') error @enderror" {{ $limit->applicant_is_vision == 1 ? 'checked':'' }}>
                                    <input type="text" name="applicant_vision" id="step-vision" class="@error('applicant_vision') error @enderror form-control  border-form-control" value="{{ $limit->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="margin_input @error('applicant_is_hearing') error @enderror" {{ $limit->applicant_is_hearing == 1 ? 'checked':'' }}>
                                    <input type="text" name="applicant_hearing" id="step-hearing" class="@error('applicant_hearing') error @enderror form-control  border-form-control" value="{{ $limit->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="margin_input @error('applicant_is_developmental') error @enderror" {{ $limit->applicant_is_developmental == 1 ? 'checked':'' }}>
                                    <input type="text" name="applicant_developmental" id="step-developmental" class="@error('applicant_developmental') error @enderror form-control  border-form-control" value="{{ $limit->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="margin_input @error('applicant_is_emotional') error @enderror" {{ $limit->applicant_is_emotional == 1 ? 'checked':'' }}>
                                    <input type="text" name="applicant_emotional" id="step-emotional" class="@error('applicant_emotional') error @enderror form-control  border-form-control" value="{{ $limit->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="margin_input @error('applicant_is_other_limitations') error @enderror" {{ $limit->applicant_is_other_limitations == 1 ? '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="{{ $limit->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">{{ $limit->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>
                <div class="w-100 clear"></div>
            </div>

            <div class="card mb-4" style="border: 2px dashed #ccc; background-color: rgb(255, 229, 229)">
                <div class="card-header">
                    <h5 class="card-title">Health Information</h5>
                </div>
                <div class="card-body">
                    <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="margin_input @error('applicant_is_food') error @enderror" {{ $health->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="{{ $health->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="margin_input @error('applicant_is_medication') error @enderror" {{ $health->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="{{ $health->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="margin_input @error('applicant_is_other_allergies') error @enderror" {{ $health->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="{{ $health->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="margin_input @error('applicant_is_asthma') error @enderror" {{ $health->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="{{ $health->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="margin_input @error('applicant_is_diabetes') error @enderror" {{ $health->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="{{ $health->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="margin_input @error('applicant_seizures') error @enderror" {{ $health->applicant_seizures ? 'checked':'' }}>
                                    <input type="text" name="applicant_seizures" id="step-seizures" class="@error('applicant_seizures') error @enderror form-control  border-form-control" value="{{ $health->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="margin_input @error('applicant_is_other_chronic_conditions') error @enderror" {{ $health->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="{{ $health->applicant_other_chronic_conditions }}">
                                    @error('applicant_chronic_conditions')
                                    <label for="step-other-chronic-conditions" class="error">{{ $message }}</label>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-4" style="border: 2px dashed #ccc;">
                <div class="card-header">
                    <h5 class="card-title">Documents</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-12 mb-4">
                            <label for="step-passport">Passport:</label>
                            <input type="file" name="applicant_passport" id="step-passport" class="form-control border-form-control">
                            <div id="passport-preview" class="mt-2">
                                @if(!empty($applicant->applicant_passport))
                                @php
                                    $fileExtension = pathinfo($applicant->applicant_passport, PATHINFO_EXTENSION);
                                @endphp
                                @if(in_array($fileExtension, ['png', 'jpg', 'jpeg', 'jfif']))
                                    <img src="{{ Storage::disk('do')->temporaryUrl($applicant->applicant_passport, now()->addMinutes(5)) }}"
                                         alt="Passport"
                                         style="max-width: 100px; max-height: 100px; border: 1px solid #ccc; margin-top: 5px;">
                                @elseif($fileExtension === 'pdf')
                                    <div class="file-icon pdf-icon">PDF</div>
                                @elseif(in_array($fileExtension, ['doc', 'docx']))
                                    <div class="file-icon word-icon">Word</div>
                                @else
                                    <div class="file-icon unknown-icon">File</div>
                                @endif
                            @endif
                            </div>
                            @error('applicant_passport')
                            <label for="step-passport" class="error">{{ $message }}</label>
                            @enderror
                        </div>
                        <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="form-control border-form-control">
                            <div id="birth-certificate-preview" class="mt-2">
                                @if(!empty($applicant->applicant_birth_certificate))
                                @php
                                    $fileExtension = pathinfo($applicant->applicant_birth_certificate, PATHINFO_EXTENSION);
                                @endphp
                                @if(in_array($fileExtension, ['png', 'jpg', 'jpeg', 'jfif']))
                                    <img src="{{ Storage::disk('do')->temporaryUrl($applicant->applicant_birth_certificate, now()->addMinutes(5)) }}"
                                         alt="Birth Certificate"
                                         style="max-width: 100px; max-height: 100px; border: 1px solid #ccc; margin-top: 5px;">
                                @elseif($fileExtension === 'pdf')
                                    <div class="file-icon pdf-icon">PDF</div>
                                @elseif(in_array($fileExtension, ['doc', 'docx']))
                                    <div class="file-icon word-icon">Word</div>
                                @else
                                    <div class="file-icon unknown-icon">File</div>
                                @endif
                            @endif
                            </div>
                            @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="form-control border-form-control" accept="image/png, image/jpg, image/jpeg">
                            <div id="picture-preview" class="mt-2">
                                @if(!empty($applicant->applicant_picture))
                                @php
                                    $fileExtension = pathinfo($applicant->applicant_picture, PATHINFO_EXTENSION);
                                @endphp
                                @if(in_array($fileExtension, ['png', 'jpg', 'jpeg', 'jfif']))
                                    <img src="{{ Storage::disk('do')->temporaryUrl($applicant->applicant_picture, now()->addMinutes(5)) }}"
                                         alt="Picture"
                                         style="max-width: 100px; max-height: 100px; border: 1px solid #ccc; margin-top: 5px;">
                                @elseif($fileExtension === 'pdf')
                                    <div class="file-icon pdf-icon">PDF</div>
                                @elseif(in_array($fileExtension, ['doc', 'docx']))
                                    <div class="file-icon word-icon">Word</div>
                                @else
                                    <div class="file-icon unknown-icon">File</div>
                                @endif
                            @endif
                            </div>
                            @error('applicant_picture')
                            <label for="step-picture" class="error">{{ $message }}</label>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            <!--begin::Separator-->
            <div class="separator mb-6"></div>
            <!--end::Separator-->
            <!--begin::Action buttons-->
            <div class="d-flex justify-content-end">
                <!--begin::Button-->
                <button type="reset" class="btn btn-light me-3">Reset</button>
                <!--end::Button-->
                <!--begin::Button-->
                <button type="submit" class="btn btn-primary submit_btn">
                    <span class="indicator-label">Save</span>
                    <span class="indicator-progress">Please wait...
                        <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span>
                </button>
                <!--end::Button-->
            </div>
        </form>
    </div>
</div>

@endsection
@section('js')

<script>
    $(document).ready(function() {
        $('#show_password').click(function() {
            var passwordField = $('#password');

            if (passwordField.attr('type') === 'password') {
                passwordField.attr('type', 'text');
                $(this).removeClass('fa-eye').addClass('fa-eye-slash');
            } else {
                passwordField.attr('type', 'password');
                $(this).removeClass('fa-eye-slash').addClass('fa-eye');
            }
        });
    });

</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>

{{-- 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>

{{-- Display the files when uploaded in the input file--}}

<script>
    document.addEventListener('DOMContentLoaded', function() {
        function handleFilePreview(input, previewId) {
            const file = input.files[0];
            const previewContainer = document.getElementById(previewId);

            previewContainer.innerHTML = '';

            if (file) {
                const fileName = file.name.toLowerCase();
                const reader = new FileReader();

                reader.onload = function(e) {
                    const wrapper = document.createElement('div');
                    wrapper.className = 'preview-wrapper';
                    wrapper.style.position = 'relative';

                    const closeButton = document.createElement('button');
                    closeButton.innerHTML = '&times;';
                    closeButton.className = 'close-preview';
                    closeButton.style.position = 'absolute';
                    closeButton.style.top = '5px';
                    closeButton.style.right = '5px';
                    closeButton.style.background = '#ff4d4d';
                    closeButton.style.border = 'none';
                    closeButton.style.color = '#fff';
                    closeButton.style.borderRadius = '50%';
                    closeButton.style.cursor = 'pointer';
                    closeButton.style.width = '20px';
                    closeButton.style.height = '20px';
                    closeButton.style.textAlign = 'center';
                    closeButton.style.lineHeight = '18px';
                    closeButton.style.fontSize = '14px';

                    closeButton.addEventListener('click', function() {
                        input.value = '';
                        previewContainer.innerHTML = '';
                    });

                    if (fileName.endsWith('.png') || fileName.endsWith('.jpg') || fileName.endsWith('.jpeg')) {
                        const img = document.createElement('img');
                        img.src = e.target.result;
                        img.style.maxWidth = '100px';
                        img.style.maxHeight = '100px';
                        img.style.border = '1px solid #ccc';
                        img.style.marginTop = '5px';
                        wrapper.appendChild(img);
                    } else if (fileName.endsWith('.pdf')) {
                        const pdfIcon = document.createElement('div');
                        pdfIcon.className = 'file-icon pdf-icon';
                        pdfIcon.textContent = 'PDF';
                        wrapper.appendChild(pdfIcon);
                    } else if (fileName.endsWith('.doc') || fileName.endsWith('.docx')) {
                        const wordIcon = document.createElement('div');
                        wordIcon.className = 'file-icon word-icon';
                        wordIcon.textContent = 'Word';
                        wrapper.appendChild(wordIcon);
                    } else {
                        const unknownIcon = document.createElement('div');
                        unknownIcon.className = 'file-icon unknown-icon';
                        unknownIcon.textContent = 'File';
                        wrapper.appendChild(unknownIcon);
                    }

                    wrapper.appendChild(closeButton);
                    previewContainer.appendChild(wrapper);
                };

                reader.readAsDataURL(file);
            }
        }

        document.getElementById('step-passport').addEventListener('change', function() {
            handleFilePreview(this, 'passport-preview');
        });

        document.getElementById('step-birth-certificate').addEventListener('change', function() {
            handleFilePreview(this, 'birth-certificate-preview');
        });

        document.getElementById('step-picture').addEventListener('change', function() {
            handleFilePreview(this, 'picture-preview');
        });
    });
</script>



{{-- End Display the files when uploaded --}}

@endsection