@php
$titleList = ['Mr', 'Mrs', 'Miss', 'Ms', 'Dr'];
@endphp


<div class="ui modal" id="applicationFrom">
<div class="application-item applicationFrom" data-type="1">
    <form action="{{isset($token)?route('saveApplicationFormWithToken'): $route }}" class="form-item" id="externalApplicationForm" novalidate >
        <div class="application-header font-title bold">
            护照信息
            <i class="close icon"></i>
        </div>
        <div class="application-content">
            <div class="abreast">
                <div class="line">
                    <div class="label">
                        <span class="star hidden-star">*</span>
                        <label class="new-font">
                            {{__('Chinese Name', [], 'zh')}}

                            <div class="formEnglishTitle">
                                {{__('Chinese Name', [], 'en')}}
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field margin-right new-field">
                            <input
                                class="inputValidation dynamic-validation"
                                data-lang="zh"
                                type="text"
                                name="mUserName"
                                maxlength="10"
                                placeholder="{{__('Chinese Name')}}"
                                value=""
                            >
                        </div>
                    </div>
            </div>
            <div class="line">
                <div class="label">
                    <span class="star">*</span>
                    <label class="new-font">
                        {{__('Person Title', [], 'zh')}}

                        <div class="formEnglishTitle">
                            {{__('Person Title', [], 'en')}}
                        </div>
                    </label>
                </div>

                <div class="fields">
                    <div class="field new-field field-dropdown-container">
                        <div class="ui dropdown selection new-dropdown dropdown-icon" tabindex="0">
                            <i class="chevron down icon Person-icon"></i>
                            <select id="title" name="title" required>
                                @foreach($titleList as $value)
                                    <option value="{{$value}}">
                                        {{$value}}
                                    </option>
                                @endforeach
                            </select>

                            <div class="default text"></div>
                            <div class="menu transition hidden" tabindex="-1">
                                @foreach($titleList as $value)
                                    <div class="item" data-value="{{$value}}">{{$value}}</div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            

            <div class="line">
                <div class="label">
                    <span class="star">*</span>
                    <label class="new-font">
                        {{__('Passport Name', [], 'zh')}}

                        <div class="formEnglishTitle">
                            {{__('Passport Name', [], 'en')}}
                        </div>
                    </label>
                </div>

                <div class="fields">
                    <div class="field margin-right new-field">
                        <input
                            class="inputValidation dynamic-validation"
                            type="text"
                            name="firstName"
                            maxlength="20"
                            placeholder="{{__('First Name', [], 'zh')}} {{__('First Name', [], 'en')}}"
                            value=""
                            required
                        >
                    </div>

                    <div class="field margin-right new-field">
                        <input
                            class="inputValidation dynamic-validation"
                            type="text"
                            name="lastName"
                            maxlength="20"
                            placeholder="{{__('Last Name', [], 'zh')}} {{__('Last Name', [], 'en')}}"
                            value=""
                            autocomplete="off"
                            required
                        >
                    </div>
                </div>
            </div>
            <div class="abreast">
                <div class="line">
                    <div class="label">
                        <span class="star">*</span>
                        <label class="new-font">
                            {{__('Gender', [], 'zh')}}

                            <div class="formEnglishTitle">
                                {{__('Gender', [], 'en')}}
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field new-field field-dropdown-container">
                            <div class="ui dropdown selection new-dropdown dropdown-icon" tabindex="0">
                                <i class="chevron down icon Person-icon"></i>
                                <select id="PersonTitle" name="gender" required>
                                    <option value="Male">{{__('Male')}} Male</option>
                                    <option value="Female">{{__('Female')}} Female</option>
                                </select>
                                <div class="default text"></div>
                                <div class="menu transition hidden" tabindex="-1">
                                    <div class="item" data-value="Male">{{__('Male')}} Male</div>
                                    <div class="item" data-value="Female">{{__('Female')}} Female</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="line">
                    <div class="label">
                        <span class="star">*</span>
                        <label class="new-font">
                            {{__('Date of birth', [], 'zh')}}

                            <div class="formEnglishTitle">
                                {{__('Date of birth', [], 'en')}}
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field new-field" id="birthday-container" >
                            <label for="birthday-date">
                            <i class="chevron down icon"></i>
                            </label>
                            <div class="ui input right icon" id="birthday_input_block">
                                <input
                                    type="text"
                                    class="pointer inputValidation dynamic-validation datepicker-input form-control applicationDate"
                                    id="birthday-date"
                                    name="dateOfBirth"
                                    value=""
                                    placeholder="{{ __('Year-Month-Day') }}"
                                    required
                                    autocomplete="off"
                                >
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>

            <div class="abreast">
                <div class="line">
                    <div class="label">
                        <span class="star">*</span>
                        <label class="new-font">
                            {{__('Nationality', [], 'zh')}}

                            <div class="formEnglishTitle">
                                {{__('Nationality', [], 'en')}}
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field new-field field-dropdown-container">
                            <div class="ui search selection dropdown inputValidationDropdown" id="citizenshipSelection">
                                <i class="chevron down icon"></i>
                                <input
                                    data-status=""
                                    class="inputValidation dynamic-validation"
                                    data-validation-container="citizenshipSelection"
                                    type="hidden"
                                    name="nationality"
                                    id="citizenship"
                                    required
                                >
                                <div class="default text"></div>
                                <div class="menu">
                                    @include('countryFlag')
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="label">
                        <span class="star">*</span>
                        <label class="new-font">
                            {{__('Place of Birth', [], 'zh')}}

                            <div class="formEnglishTitle">
                                {{__('Place of Birth', [], 'en')}}
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field margin-right new-field">
                            <input
                                class="inputValidation dynamic-validation"
                                type="text"
                                name="placeOfBirth"
                                maxlength="50"
                                placeholder="{{__('Place of Birth')}}"
                                value="{{$applicationForm->placeOfBirth ?? ''}}"
                            >
                        </div>
                    </div>
                </div>               
            </div>

            <div class="abreast">
                <div class="line">
                    <div class="label">
                        <span class="star hidden-star">*</span>
                        <label for="passport-number" class="new-font">
                            {{__('Passport number', [], 'zh')}}

                            <div class="formEnglishTitle">
                                {{__('Passport number', [], 'en')}}
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field new-field">
                            <input
                                class="inputValidation dynamic-validation"
                                type="text"
                                name="passportNumber"
                                maxlength="20"
                                id="passport-number"
                                placeholder="{{__('Passport number')}}"
                                value=""
                            >
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="label">
                        <span class="star hidden-star">*</span>
                        <label for="placeOfIssue" class="new-font">
                            {{__('Place of Issue', [], 'zh')}}

                            <div class="formEnglishTitle">
                                {{__('Place of Issue', [], 'en')}}
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field new-field">
                            <input class="dynamic-validation" 
                                type="text" 
                                name="placeOfIssue" 
                                maxlength="50" 
                                id="placeOfIssue" 
                                placeholder="{{__('Place of Issue', [], 'zh')}}{{__('Place of Issue', [], 'en')}}" 
                                value=""
                            >
                        </div>
                    </div>
                </div>
            </div>

            <div class="abreast">
                <div class="line">
                    <div class="label">
                        <span class="star hidden-star">*</span>
                        <label for="timeOfIssue" class="new-font">
                            {{__('Time of Issue', [], 'zh')}}

                            <div class="formEnglishTitle">
                                {{__('Time of Issue', [], 'en')}}
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field new-field ">
                        <label for="timeOfIssue">
                            <i class="chevron down icon"></i>
                            </label>

                            <div class="ui input right icon">
                                <input
                                    type="text"
                                    class="pointer inputValidation dynamic-validation common_date_input_block applicationDate"
                                    id="timeOfIssue"
                                    name="timeOfIssue"
                                    value=""
                                    placeholder="{{ __('Year-Month-Day') }}"
                                    autocomplete="off"
                                >
                            </div>
                        </div>
                    </div>
                </div>

                <div class="line">
                    <div class="label">
                        <span class="star hidden-star">*</span>
                        <label for="timeOfIssue" class="new-font">
                            {{__('Date of expiry', [], 'zh')}}

                            <div class="formEnglishTitle">
                                {{__('Date of expiry', [], 'en')}}
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field new-field ">
                        <label for="timeOfIssue">
                            <i class="chevron down icon"></i>
                            </label>

                            <div class="ui input right icon">
                                <input
                                    type="text"
                                    class="pointer inputValidation dynamic-validation dateOfExpiryVal applicationDate"
                                    id="dateOfExpiry"
                                    name="dateOfExpiry"
                                    value=""
                                    placeholder="{{ __('Year-Month-Day') }}"
                                    autocomplete="off"
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <button class="ui button updateButton" data-type="1">{{ __('Update Application Form') }}</button>   
</div>
           
<div class="application-item applicationFrom Score-wrapper" data-type="7">
    <form action="{{isset($token)?route('saveApplicationFormWithToken'): $route }}" class="form-item" id="externalApplicationForm" novalidate >
        <div class="application-header font-title bold">
            <div class="proficiency-title">@lang('Language Proficiency')</div>
            <i class="close icon"></i>
        </div>
        <div class="application-content">
            <input class="ieltsGroupValidation dynamic-validation lang" name="englishProficiency" maxlength="10" id="ielts-total" type="hidden" />
            <div class="abreast">
                <div class="line">
                    <div class="label">
                        <span class="star">*</span>
                        <label class="new-font">
                        @lang('Exam Total Score',[],'zh')
                            <div class="formEnglishTitle">
                            @lang('Exam Total Score',[],'en')
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field margin-right new-field">
                            <input
                                
                                class="ieltsGroupValidation dynamic-validation lang"
                                name="IELTSResult"
                                maxlength="10"
                                id="ielts-total"
                                type="text"
                            >
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="label">
                        <span class="star hidden-star">*</span>
                        <label class="new-font">
                            @lang('Date of Exam',[],'zh')

                            <div class="formEnglishTitle">
                                @lang('Date of Exam',[],'en')
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field new-field" id="ielts-container">
                            <label for="ielts-date">
                            <i class="chevron down icon"></i>
                            </label>
                            <div class="ui input right icon" id="exam_date_uk_block">
                                <input
                                    class="pointer ieltsGroupValidation dynamic-validation applicationDate"
                                    type="text"
                                    id="ielts-date"
                                    name="IELTSDate"
                                    placeholder="{{ __('Choose date') }}"
                                    autocomplete="off"
                                >
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="abreast">
                <div class="line">
                    <div class="label">
                        <span class="star">*</span>
                        <label class="new-font">
                            @lang('Hearing',[],'zh')

                            <div class="formEnglishTitle">
                            @lang('Hearing',[],'en')
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field margin-right new-field">
                            <input
                                
                                class="ieltsGroupValidation dynamic-validation lang"
                                name="IELTSListening"
                                maxlength="10"
                                id="ielts-hearing"
                                type="text"
                            >
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="label">
                        <span class="star">*</span>
                        <label class="new-font">
                        @lang('Reading',[],'zh')

                            <div class="formEnglishTitle">
                            @lang('Reading',[],'en')
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field margin-right new-field">
                            <input
                                
                                class="ieltsGroupValidation dynamic-validation lang"
                                name="IELTSReading"
                                maxlength="10"
                                id="ielts-reading"
                                type="text"
                            >
                        </div>
                    </div>
                </div>               
            </div>

            <div class="abreast">
                <div class="line">
                    <div class="label">
                        <span class="star">*</span>
                        <label for="passport-number" class="new-font">
                            @lang('Writing',[],'zh')

                            <div class="formEnglishTitle">
                            @lang('Writing',[],'en')
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field new-field">
                            <input
                                
                                class="ieltsGroupValidation dynamic-validation lang"
                                name="IELTSWriting"
                                maxlength="10"
                                id="ielts-writing"
                                type="text"
                            >
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="label">
                        <span class="star">*</span>
                        <label for="placeOfIssue" class="new-font">
                            @lang('Speaking',[],'zh')

                            <div class="formEnglishTitle">
                                @lang('Speaking',[],'en')
                            </div>
                        </label>
                    </div>

                    <div class="fields">
                        <div class="field new-field">
                            <input
                                
                                class="ieltsGroupValidation dynamic-validation lang"
                                name="IELTSSpeaking"
                                maxlength="10"
                                id="ielts-speaking"
                                type="text"
                            >
                        </div>
                    </div>
                </div>
            </div>    
        </div>
    </form>
    <button class="ui button updateButton" data-type="7">{{ __('Update Application Form') }}</button> 
  </div>
</div>