@extends('layouts.master')

@section('title', 'Express54')

@section('content')


    <!--links-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

    <!-- MultiStep Form -->
    <div class="stepper-body" style="min-height: calc(100vh - 110px);">
        <div class="container-fluid">
            <div class="row justify-content-center">
                <div class="col-11 col-sm-9 col-md-8 col-lg-8  text-center p-0 mt-3 mb-2">
                    <div class="card px-5 pt-4 pb-0 mt-3 mb-3">

                        <form id="msform" method="POST"
                            action="{{ route('editCollectData', ['id' => $application->id]) }}"
                            enctype="multipart/form-data">
                            @csrf

                            <!-- progressbar -->
                            <ul id="progressbar">
                                <!-- <li id="service"><strong>@lang('messages.service')</strong></li> -->
                                <li class="active" id="collectdata"><strong>@lang('messages.collectdata')</strong></li>

                                @if ($application->service_selected != 4 && $application->sub_service != '24')
                                <li id="documents"><strong>@lang('messages.documents')</strong></li>
                                <li id="speed"><strong>@lang('messages.speed')</strong></li>
                                @endif
                                
                                <li id="delivery"><strong>@lang('messages.delivery')</strong></li>
                                <li id="pay"><strong>@lang('messages.pay')</strong></li>
                            </ul>

                            <div id="alert-container">
                                @if (Session('error'))
                                    <div class="alert alert-warning" role="alert">
                                        {{ Session('error') }}
                                    </div>
                                @endif

                                @if (Session('success'))
                                    <div class="alert alert-success" role="alert">
                                        {{ Session('success') }}
                                    </div>
                                @endif
                            </div>
                            <!-- alert time out  -->
                            <script>
                                document.addEventListener("DOMContentLoaded", function() {
                                    var alertContainer = document.getElementById("alert-container");
                                    if (alertContainer) {
                                        setTimeout(function() {
                                            alertContainer.remove();
                                        }, 5000);
                                    }
                                });
                            </script>
                            <br>



                            <fieldset id="collect_data">
                                <input type="hidden" id="parentServiceId" name="parentServiceId"
                                    value="{{ $application->service_selected }}">
                                <input type="hidden" id="childServiceId" name="childServiceId"
                                    value="{{ $application->sub_service }}">

                                <!-- when selecetd service is Civil Document id is 2 a nd sub service is Transcript Marriage Certificate id 15 -->
                                @if ($application->service_selected == 2 && $application->sub_service == '15')
                                    <div class="deceased-section">
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.matrimonial_regime')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                    <input class="" type="radio" name="matrimonialregime"
                                                        id="" value="Joint Goods" checked
                                                        style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.jointgoods')</label>

                                                    <input class="" type="radio" name="matrimonialregime"
                                                        id="" value="Separation of Goods"
                                                        style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.separationofgoods')</label>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- birth -->
                                        <h5 class="text-right">@lang('messages.requester')</h5>
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" value="{{ $application->name }}"
                                                    name="name" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $application->surname }}" name="surname" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.dob')
                                                <span aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="date" class="form-control"
                                                    value="{{ $application->child_dob }}" name="child_dob" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.requester_birth')
                                                <span aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $applicationInfo ? $applicationInfo->requester_birth : '' }}"
                                                    name="requester_birth" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="appartmentornumber"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.birthstreet')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $application->birth_appartment_number }}"
                                                    name="birth_appartment_number" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="birthcity"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.city')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $application->birthcity }}" name="birthcity" required>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="birth_country_selected"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.country')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select class="form-control countrySelect" id="birthCountrySelect"
                                                    name="birth_country_selected"
                                                    data-value="{{ $application->birth_country_selected }}"
                                                    value="{{ $application->birth_country_selected }}"required>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="birthstate"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.state')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select class="form-control stateSelect" id="birthStateSelect"
                                                    name="birthstate"
                                                    data-country="{{ $application->birth_country_selected }}"
                                                    data-state="{{ $application->birthstate }}"
                                                    value="{{ $application->birthstate }}" required>
                                                </select>
                                            </div>
                                        </div>
                                        <br>

                                        <div class="form-group row">
                                            <label for="birth_zip_code"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $application->birth_zip_code }}" name="birth_zip_code"
                                                    required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="profession"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.profession')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $application->profession }}" name="profession" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="requestercontact"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.contact')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="requestercontact"
                                                    name="requestercontact"
                                                    value="{{ $applicationInfo ? $applicationInfo->requestercontact : '' }}"
                                                    required>
                                            </div>
                                        </div>

                                        <h5>@lang('messages.requester_father')</h5>
                                        <div class="form-group row">
                                            <label for="requester_father"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.spouse_father')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">

                                                    <input class="" type="radio" name="requester_father"
                                                        value="Alive" checked="" style="width:auto; margin:0"
                                                        >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.alive')</label>

                                                    <input class="" type="radio" name="requester_father"
                                                        value="Dead" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.dead')</label>

                                                    <input class="" type="radio" name="requester_father"
                                                        value="Retired" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.retired')</label>

                                                    <input class="" type="radio" name="requester_father"
                                                        value="Widower" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.widower')</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="requesterlname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $applicationInfo ? $applicationInfo->requesterlname : '' }}"
                                                    name="requesterlname" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="requesterfname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $applicationInfo ? $applicationInfo->requesterfname : '' }}"
                                                    name="requesterfname" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="requesterprofession"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.job_title')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $applicationInfo ? $applicationInfo->requesterprofession : '' }}"
                                                    name="requesterprofession" required>
                                            </div>
                                        </div>

                                        <!-- spouse mother -->
                                        <h5>@lang('messages.requester_mother')</h5>

                                        <div class="form-group row">
                                            <label for="requester_mother"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.spouse_mother')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                    <input class="" type="radio" name="requester_mother"
                                                        value="Alive" checked="" style="width:auto; margin:0"
                                                        >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.alive')</label>

                                                    <input class="" type="radio" name="requester_mother"
                                                        value="Dead" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.dead')</label>

                                                    <input class="" type="radio" name="requester_mother"
                                                        value="Retired" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.retired')</label>

                                                    <input class="" type="radio" name="requester_mother"
                                                        value="Widower" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.widower')</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="requestermotherlname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $applicationInfo ? $applicationInfo->requestermotherlname : '' }}"
                                                    name="requestermotherlname" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="requestermotherfname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $applicationInfo ? $applicationInfo->requestermotherfname : '' }}"
                                                    name="requestermotherfname" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="requestermotherprofession"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.job_title')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $applicationInfo ? $applicationInfo->requestermotherprofession : '' }}"
                                                    name="requestermotherprofession" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="maritalstatusofrequester"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.marital_statusof_spouse_parents')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                    <input class="" type="radio" name="maritalstatusofrequester"
                                                        id="married" value="Married" style="width:auto; margin:0"
                                                        >
                                                    <label class="form-check-label"
                                                        for="married">@lang('messages.married')</label>

                                                    <input class="" type="radio" name="maritalstatusofrequester"
                                                        id="divorced" value="Divorced" style="width:auto; margin:0"
                                                        >
                                                    <label class="form-check-label"
                                                        for="divorced">@lang('messages.divorced')</label>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                    <!-- spouse section -->
                                    <div class="deceased-section">
                                        <h5>@lang('messages.spouse')</h5>
                                        <div class="form-group row">
                                            <label for="spouseparentfname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="spouseparentfname"
                                                    name="spouseparentfname"
                                                    value="{{ $application->spouseparentfname }}" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="spouseparentlname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="spouseparentlname"
                                                    value="{{ $application->spouseparentlname }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="spousedob"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.dob')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="date" class="form-control" name="spouse_dob"
                                                    value="{{ $applicationInfo ? $applicationInfo->spouse_dob : '' }}"
                                                    required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="spouse_birth"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.spouse_birth')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="spouse_birth"
                                                    value="{{ $applicationInfo ? $applicationInfo->spouse_birth : '' }}"
                                                    required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="spouseparentbirthaddress"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.birthstreet')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    name="spouseparentbirthaddress"
                                                    value="{{ $application->spouseparentbirthaddress }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="spousebirthcity"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.city')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"name="spouseparentbirthcity"
                                                    value="{{ $application->spouseparentbirthcity }}" required>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="spousebirthcountry"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.country')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select type="text"
                                                    class="form-control countrySelect"name="spouseparentbirthcountry"
                                                    value="{{ $applicationInfo ? $applicationInfo->spouseparentbirthcountry : '' }}"
                                                    data-value="{{ $applicationInfo ? $applicationInfo->spouseparentbirthcountry : '' }}"
                                                    required>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="spousebirthstate"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.state')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select class="form-control stateSelect"name="spouseparentbirthstate"
                                                    value="{{ $application->spouseparentbirthstate }}"
                                                    data-country="{{ $applicationInfo ? $applicationInfo->spouseparentbirthcountry : '' }}"
                                                    data-state="{{ $application->spouseparentbirthstate }}" required>
                                                </select>
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label for="spouseparentbirthzipcode"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"name="spouseparentbirthzipcode"
                                                    value="{{ $application->spouseparentbirthzipcode }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="spouseparentprofession"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.profession')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"name="spouseparentprofession"
                                                    value="{{ $application->spouseparentprofession }}" required>
                                            </div>
                                        </div>

                                        <h5>@lang('messages.spouse_father')</h5>
                                        <div class="form-group row">
                                            <label for="spousefather"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.spouse_father')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">

                                                    <input class="" type="radio" name="spousefather"
                                                        value="Alive" checked="" style="width:auto; margin:0"
                                                        >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.alive')</label>

                                                    <input class="" type="radio" name="spousefather"
                                                        value="Dead" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.dead')</label>

                                                    <input class="" type="radio" name="spousefather"
                                                        value="Retired" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.retired')</label>

                                                    <input class="" type="radio" name="spousefather"
                                                        value="Widower" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.widower')</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="father_lname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $application->father_lname }}" name="father_lname"
                                                    required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="father_fname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $application->father_fname }}" name="father_fname"
                                                    required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="fatherprofession"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.job_title')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $application->fatherprofession }}" name="fatherprofession"
                                                    required>
                                            </div>
                                        </div>


                                        <!-- spouse mother -->
                                        <h5>@lang('messages.spouse_mother')</h5>

                                        <div class="form-group row">
                                            <label for="spousemother"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.spouse_mother')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                    <input class="" type="radio" name="spousemother"
                                                        value="Alive" checked="" style="width:auto; margin:0"
                                                        >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.alive')</label>

                                                    <input class="" type="radio" name="spousemother"
                                                        value="Dead" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.dead')</label>

                                                    <input class="" type="radio" name="spousemother"
                                                        value="Retired" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.retired')</label>

                                                    <input class="" type="radio" name="spousemother"
                                                        value="Widower" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.widower')</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="motherlname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $application->motherlname }}" name="motherlname" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="motherfname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $application->motherfname }}" name="motherfname" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="motherprofession"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.job_title')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    value="{{ $application->motherprofession }}" name="motherprofession"
                                                    required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="maritalstatusofspouseparents"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.marital_statusof_spouse_parents')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                    <input class="" type="radio"
                                                        name="maritalstatusofspouseparents2" id="married"
                                                        value="Married" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="married">@lang('messages.married')</label>

                                                    <input class="" type="radio"
                                                        name="maritalstatusofspouseparents2" id="divorced"
                                                        value="Divorced" style="width:auto; margin:0"
                                                        >
                                                    <label class="form-check-label"
                                                        for="divorced">@lang('messages.divorced')</label>
                                                </div>
                                            </div>
                                        </div>

                                    </div>


                                    <!-- witness section -->
                                    <div class="deceased-section">
                                        <h5>@lang('messages.wedding_location')</h5>
                                        <div class="form-group row">
                                            <label for="date"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.date')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="date" class="form-control" name="date"
                                                    value="{{ $application->date }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="time"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.time')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="time" class="form-control" name="time"
                                                    value="{{ $application->time }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="weddingaddress"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.address')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="weddingaddress"
                                                    value="{{ $application->weddingaddress }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="weddingcity"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.city')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="weddingcity"
                                                    value="{{ $application->weddingcity }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="weddingcountry"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.country')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select type="text" class="form-control countrySelect"
                                                    name="weddingcountry"
                                                    value="{{ $applicationInfo ? $applicationInfo->weddingcountry : '' }}"
                                                    data-value="{{ $applicationInfo ? $applicationInfo->weddingcountry : '' }}"
                                                    required>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="weddingstate"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.state')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select type="text" class="form-control stateSelect"
                                                    name="weddingstate" value="{{ $application->weddingstate }}"
                                                    data-country="{{ $applicationInfo ? $applicationInfo->weddingcountry : '' }}"
                                                    data-state="{{ $application->weddingstate }}" required>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="weddingzipcode"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="weddingzipcode"
                                                    value="{{ $application->weddingzipcode }}" required>
                                            </div>
                                        </div>
                                        <h5>@lang('messages.witness')1</h5>
                                        <div class="form-group row">
                                            <label for="witness1_spouse"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.witness')1<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                    <input class="" type="radio" name="witness1_spouse"
                                                        value="Alive" checked="" style="width:auto; margin:0"
                                                        >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.alive')</label>

                                                    <input class="" type="radio" name="witness1_spouse"
                                                        value="Retired" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.retired')</label>

                                                    <input class="" type="radio" name="witness1_spouse"
                                                        value="Widower" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.widower')</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="witness1lname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="witness1lname"
                                                    value="{{ $application->witness1lname }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="witness1fname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="witness1fname"
                                                    value="{{ $application->witness1fname }}" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="witness1profession"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.profession')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="witness1profession"
                                                    value="{{ $application->witness1profession }}" required>
                                            </div>
                                        </div>

                                        <!-- witness permanent address -->
                                        <h5 class="text-right">@lang('messages.Address')</h5>
                                        <div class="form-group row">
                                            <label for="witness1address"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.address')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="witness1address"
                                                    value="{{ $application->witness1address }}" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="witness1city"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.city')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"name="witness1city"
                                                    value="{{ $application->witness1city }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="witness1country"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.country')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select type="text"
                                                    class="form-control countrySelect"name="witness1country"
                                                    value="{{ $applicationInfo ? $applicationInfo->witness1country : '' }}"
                                                    data-value="{{ $applicationInfo ? $applicationInfo->witness1country : '' }}"
                                                    required>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="witness1state"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.state')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select type="text"
                                                    class="form-control stateSelect"name="witness1state"
                                                    value="{{ $application->witness1state }}"
                                                    data-country="{{ $applicationInfo ? $applicationInfo->witness1country : '' }}"
                                                    data-state="{{ $application->witness1state }}" required>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="witness1zipcode"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"name="witness1zipcode"
                                                    value="{{ $application->witness1zipcode }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="witness1contact"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.contact')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="witness1contact"
                                                    value="{{ $application->witness1contact }}" required>
                                            </div>
                                        </div>

                                        <!--witness2 -->
                                        <h5>@lang('messages.witness')2</h5>
                                        <div class="form-group row">
                                            <label for="witness2_spouse"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.witness')2<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                    <input class="" type="radio" name="witness2_spouse"
                                                        value="Alive" checked="" style="width:auto; margin:0"
                                                        >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.alive')</label>

                                                    <input class="" type="radio" name="witness2_spouse"
                                                        value="Retired" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.retired')</label>

                                                    <input class="" type="radio" name="witness2_spouse"
                                                        value="Widower" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.widower')</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="witness2lname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="witness2lname"
                                                    value="{{ $application->witness2lname }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="witness2fname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="witness2fname"
                                                    value="{{ $application->witness2fname }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="witness2profession"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.profession')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="witness2profession"
                                                    value="{{ $application->witness2profession }}" required>
                                            </div>
                                        </div>

                                        <!-- witness permanent address -->
                                        <h5 class="text-right">@lang('messages.Address')</h5>
                                        <div class="form-group row">
                                            <label for="witness2address"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.address')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="witness2address"
                                                    value="{{ $application->witness2address }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="witness2city"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.city')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"name="witness2city"
                                                    value="{{ $application->witness2city }}" required>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="witness2country"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.country')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select type="text"
                                                    class="form-control countrySelect"name="witness2country"
                                                    value="{{ $applicationInfo ? $applicationInfo->witness2country : '' }}"
                                                    data-value="{{ $applicationInfo ? $applicationInfo->witness2country : '' }}"
                                                    required>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="witness2state"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.state')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select type="text"
                                                    class="form-control stateSelect"name="witness2state"
                                                    value="{{ $application->witness2state }}"
                                                    data-country="{{ $applicationInfo ? $applicationInfo->witness2country : '' }}"
                                                    data-state="{{ $application->witness2state }}" required>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="witness2zipcode"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"name="witness2zipcode"
                                                    value="{{ $application->witness2zipcode }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="witness2contact"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.contact')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" name="witness2contact"
                                                    value="{{ $application->witness2contact }}" required>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- when selecetd service is Civil Document id is 2 a nd sub service is Transcript Birth Certificate is is 61 -->
                                @elseif ($application->service_selected == 2 && $application->sub_service == '61')
                                    <!-- child section -->
                                    <div class="deceased-section">
                                        <h5>@lang('messages.child')</h5>

                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="surname" name="surname"
                                                    value="{{ $application->surname }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="name" name="name"
                                                    value="{{ $application->name }}" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.dob')
                                                <span aria-hidden="true" class="required">*</span>:</label>
                                            <div class="col-sm-6">
                                                <input type="date" class="form-control" id="child_dob"
                                                    name="child_dob" value="{{ $application->child_dob }}" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.child_time_dob')
                                                <span aria-hidden="true" class="required">*</span>:</label>
                                            <div class="col-sm-6">
                                                <input type="time" class="form-control" id="child_time_dob"
                                                    name="child_time_dob"
                                                    value="{{ $applicationInfo ? $applicationInfo->child_time_dob : '' }}"
                                                    required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.gender')<span
                                                    aria-hidden="true" class="required">*</span> :
                                            </label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                    <input class="" type="radio" name="gender" id=""
                                                        value="Male" checked style="width:auto; margin:0"
                                                        >

                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.male')</label>

                                                    <input class="" type="radio" name="gender" id=""
                                                        value="Female" style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.female')</label>
                                                </div>
                                            </div>
                                        </div>
                                        <!--birth location-->
                                        <h6 class="text-right">@lang('messages.birthlocation')</h6>
                                        <div class="form-group row">
                                            <label for="hospital_name"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.hospital_name')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="hospital_name"
                                                    name="hospital_name"
                                                    value="{{ $applicationInfo ? $applicationInfo->hospital_name : '' }}"
                                                    required>
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label for="birthcity"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.city')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id=""
                                                    name="birthcity" value="{{ $application->birthcity }}" required>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="birth_country_selected"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.birth_country')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select class="form-control countrySelect" id="birthCountrySelect"
                                                    name="birth_country_selected"
                                                    value="{{ $application->birth_country_selected }}"
                                                    data-value="{{ $application->birth_country_selected }}" required>
                                                    <option value="">Select Birth Country</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="birthstate"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.birth_state')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select class="form-control stateSelect" id="birthStateSelect"
                                                    name="birthstate" value="{{ $application->birthstate }}"
                                                    data-country="{{ $application->birth_country_selected }}"
                                                    data-state="{{ $application->birthstate }}" required>
                                                    <option value="">Select Birth State</option>
                                                </select>
                                            </div>
                                        </div>
                                        <br>

                                        <div class="form-group row">
                                            <label for="birth_zip_code"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id=""
                                                    name="birth_zip_code" value="{{ $application->birth_zip_code }}"
                                                    required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="appartmentornumber"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.home_address')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    id="birth_appartment_number" name="birth_appartment_number"
                                                    value="{{ $application->birth_appartment_number }}" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="home_city"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.city')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="home_city"
                                                    name="home_city" value="{{ $applicationInfo->home_city }}"
                                                    required>
                                            </div>
                                        </div>


                                        <div class="form-group row mb-3">
                                            <label for="country"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.country')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select class="form-control countrySelect" id="countrySelect"
                                                    name="country_selected"
                                                    value="{{ $application->country_selected }}"
                                                    data-value="{{ $application->country_selected }}" required>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row mb-3">
                                            <label for="state"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.state')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select class="form-control stateSelect" id="stateSelect"
                                                    name="state" value="{{ $application->state }}"
                                                    data-country="{{ $application->country_selected }}"
                                                    data-state="{{ $application->state }}" required>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="home_zipcode"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="home_zipcode"
                                                    name="home_zipcode" value="{{ $applicationInfo->home_zipcode }}"
                                                    required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.contact')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="contact"
                                                    name="contact" value="{{ $application->contact }}">
                                            </div>
                                        </div>
                                    </div>
                                    <!-- father section -->
                                    <div class="deceased-section">
                                        <h5>@lang('messages.father')</h5>

                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.lifestatus')<span
                                                    aria-hidden="true" class="required">*</span> :
                                            </label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                    <input class="" type="radio" name="lifestatus"
                                                        id="" value="Alive" checked=""
                                                        style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.alive')</label>

                                                    <input class="" type="radio" name="lifestatus"
                                                        id="" value="Dead" style="width:auto; margin:0"
                                                        >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.dead')</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="father_fname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="father_fname"
                                                    name="father_fname" value="{{ $application->father_fname }}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="father_lname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="father_lname"
                                                    name="father_lname" value="{{ $application->father_lname }}"
                                                    required>
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label for="father_dob"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.dob')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="date" class="form-control" id="father_dob"
                                                    name="father_dob" value="{{ $application->father_dob }}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="father_birth_place"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.father_birth_place')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="father_birth_place"
                                                    name="father_birth_place"
                                                    value="{{ $applicationInfo ? $applicationInfo->father_birth_place : '' }}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="fatherprofession"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.profession')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="fatherprofession"
                                                    name="fatherprofession"
                                                    value="{{ $application->fatherprofession }}">
                                            </div>
                                        </div>



                                        <!--birth location-->
                                        {{-- <h6 class="text-right">@lang('messages.birthlocation')</h6> --}}
                                        <div class="form-group row">
                                            <label for="fatherappartmentnumber"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.birthstreet')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id=""
                                                    name="fatherappartmentnumber"
                                                    value="{{ $application->fatherappartmentnumber }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="fatherbirthcity"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.city')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id=""
                                                    name="fatherbirthcity" value="{{ $application->fatherbirthcity }}"
                                                    required>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="fatherbirthcountry"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.birth_country')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select class="form-control countrySelect" id="fatherbirthcountry"
                                                    name="fatherbirthcountry"
                                                    value="{{ $application->fatherbirthcountry }}"
                                                    data-value="{{ $application->fatherbirthcountry }}" required>
                                                    <option value="">Select Birth Country</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="fatherbirthstate"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.birth_state')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select class="form-control stateSelect" id="fatherbirthstate"
                                                    name="fatherbirthstate"
                                                    value="{{ $application->fatherbirthstate }}"
                                                    data-country="{{ $application->fatherbirthcountry }}"
                                                    data-state="{{ $application->fatherbirthstate }}" required>
                                                    <option value="">Select Birth State</option>
                                                </select>
                                            </div>
                                        </div>
                                        <br>

                                        <div class="form-group row">
                                            <label for="fatherbirthzipcode"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id=""
                                                    name="fatherbirthzipcode"
                                                    value="{{ $application->fatherbirthzipcode }}" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="email"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.email')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id=""
                                                    name="email" value="{{ $application->email }}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="fathercontact"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.contact')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id=""
                                                    name="fathercontact" value="{{ $application->fathercontact }}"
                                                    required>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- mother section -->
                                    <div class="deceased-section">
                                        <h5>@lang('messages.mother')</h5>

                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-3 col-form-label text-end">@lang('messages.lifestatus')<span
                                                    aria-hidden="true" class="required">*</span> :
                                            </label>
                                            <div class="col-sm-6">
                                                <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                    <input class="" type="radio" name="motherlifestatus"
                                                        id="" value="Alive" checked=""
                                                        style="width:auto; margin:0" >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.alive')</label>

                                                    <input class="" type="radio" name="motherlifestatus"
                                                        id="" value="Dead" style="width:auto; margin:0"
                                                        >
                                                    <label class="form-check-label"
                                                        for="inlineRadio1">@lang('messages.dead')</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="motherfname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="motherfname"
                                                    name="motherfname" value="{{ $application->motherfname }}">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="motherlname"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="motherlname"
                                                    name="motherlname" value="{{ $application->motherlname }}">
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label for="motherdob"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.dob')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="date" class="form-control" id="motherdob"
                                                    name="motherdob" value="{{ $application->motherdob }}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="mother_birth_place"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.mother_birth_place')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="mother_birth_place"
                                                    name="mother_birth_place"
                                                    value="{{ $applicationInfo ? $applicationInfo->mother_birth_place : '' }}">
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="motherprofession"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.profession')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="motherprofession"
                                                    name="motherprofession"
                                                    value="{{ $application->motherprofession }}">
                                            </div>
                                        </div>


                                        {{-- <h6>@lang('messages.birthlocation')</h6> --}}
                                        <div class="form-group row">
                                            <label for="motherappartmentnumber"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.birthstreet')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id=""
                                                    name="motherappartmentnumber"
                                                    value="{{ $application->motherappartmentnumber }}" required>
                                            </div>
                                        </div>
                                        <div class="form-group row">
                                            <label for="motherbirthcity"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.city')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id=""
                                                    name="motherbirthcity" value="{{ $application->motherbirthcity }}"
                                                    required>
                                            </div>
                                        </div>
                                        <div class="form-group row mb-3">
                                            <label for="motherbirthcountry"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.birth_country')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select class="form-control countrySelect" id="motherbirthcountry"
                                                    name="motherbirthcountry"
                                                    data-value="{{ $application->motherbirthcountry }}" required>
                                                    <option value="">Select Birth Country</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="motherbirthstate"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.birth_state')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <select class="form-control stateSelect" id="motherbirthstate"
                                                    name="motherbirthstate"
                                                    data-country="{{ $application->motherbirthcountry }}"
                                                    data-state="{{ $application->motherbirthstate }}" required>
                                                    <option value="">Select Birth State</option>
                                                </select>
                                            </div>
                                        </div>
                                        <br>


                                        <div class="form-group row">
                                            <label for="motherbirthzipcode"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id=""
                                                    name="motherbirthzipcode"
                                                    value="{{ $application->motherbirthzipcode }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="motheremail"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.email')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="email" class="form-control" id=""
                                                    name="motheremail" value="{{ $application->motheremail }}"
                                                    required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="mothercontact"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.contact')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id=""
                                                    name="mothercontact" value="{{ $application->mothercontact }}"
                                                    required>
                                            </div>
                                        </div>
                                    </div>
                                @elseif ($application->service_selected == 4)
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control"
                                                value="{{ $application->name }}" name="name" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control"
                                                value="{{ $application->surname }}" name="surname" required>
                                        </div>
                                    </div>

                                    <!-- when select service is consulate service "4" and sub service is human remians "74" -->
                                    @if ($application->service_selected == 4 && $application->sub_service == '74')
                                        <div class="deceased-section">
                                            <h4>@lang('messages.deceased')</h4>

                                            <div class="form-group row">
                                                <label for="spousename"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.spousename')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="spousename"
                                                        name="spousename" value="{{ $application->spousename }}"
                                                        required>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="spouseaddress"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.spouseaddress')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="spouseaddress"
                                                        name="spouseaddress" value="{{ $application->spouseaddress }}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="spousecity"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.spousecity')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="spousecity"
                                                        name="spousecity"
                                                        value="{{ $applicationInfo ? $applicationInfo->spousecity : '' }}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="form-group row mb-3">
                                                <label for="spousecountry"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.spousecountry')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <select type="text" class="form-control countrySelect"
                                                        id="spousecountry" name="spousecountry"
                                                        value="{{ $applicationInfo ? $applicationInfo->spousecountry : '' }}"
                                                        data-value="{{ $applicationInfo ? $applicationInfo->spousecountry : '' }}"
                                                        required>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row mb-3">
                                                <label for="spousestate"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.spousestate')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <select type="text" class="form-control stateSelect"
                                                        id="spousestate" name="spousestate"
                                                        value="{{ $applicationInfo ? $applicationInfo->spousestate : '' }}"
                                                        data-country="{{ $applicationInfo ? $applicationInfo->spousecountry : '' }}"
                                                        data-state="{{ $applicationInfo ? $applicationInfo->spousestate : '' }}"
                                                        required>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="spousecode"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.spousecode')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="spousecode"
                                                        name="spousecode"
                                                        value="{{ $applicationInfo ? $applicationInfo->spousecode : '' }}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="spouseoccupation"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.spouseoccupation')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="spouseoccupation"
                                                        name="spouseoccupation"
                                                        value="{{ $application->spouseoccupation }}" required>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Remains Receiver in Ivory Coast -->
                                        <div class="remains-section">
                                            <h4>@lang('messages.remains_receiverivorycoast')</h4>.

                                            <div class="form-group row">
                                                <label for="remainsname"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.remainsname')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="remainsname"
                                                        name="remainsname" value="{{ $application->remainsname }}"
                                                        required>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="remainphoneno"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.remain_phoneno')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="remainphoneno"
                                                        name="remainphoneno" value="{{ $application->remainphoneno }}"
                                                        required>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="remainaddress"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.remain_address')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="remainaddress"
                                                        name="remainaddress" value="{{ $application->remainaddress }}"
                                                        required>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for=""
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.departure_date_abidjan')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="date" class="form-control"
                                                        value="{{ $application->departuredateabidjan }}"
                                                        name="departuredateabidjan" required>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="remainaddress"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.remain_address')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="remainaddress"
                                                        name="remainaddress" value="{{ $application->remainaddress }}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="ivory_coast_city"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.ivory_coast_city')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="ivory_coast_city"
                                                        name="ivory_coast_city"
                                                        value="{{ $applicationInfo ? $applicationInfo->ivory_coast_city : '' }}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="form-group row mb-3">
                                                <label for="ivory_coast_country"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.ivory_coast_country')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <select type="text" class="form-control countrySelect"
                                                        id="ivory_coast_country" name="ivory_coast_country"
                                                        value="{{ $applicationInfo ? $applicationInfo->ivory_coast_country : '' }}"
                                                        data-value="{{ $applicationInfo ? $applicationInfo->ivory_coast_country : '' }}"
                                                        required></select>
                                                </div>
                                            </div>

                                            <div class="form-group row mb-3">
                                                <label for="ivory_coast_state"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.ivory_coast_state')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <select type="text" class="form-control stateSelect"
                                                        id="ivory_coast_state" name="ivory_coast_state"
                                                        value="{{ $applicationInfo ? $applicationInfo->ivory_coast_state : '' }}"
                                                        data-country="{{ $applicationInfo ? $applicationInfo->ivory_coast_country : '' }}"
                                                        data-state="{{ $applicationInfo ? $applicationInfo->ivory_coast_state : '' }}"
                                                        required> </select>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="ivory_coast_code"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.ivory_coast_code')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="ivory_coast_code"
                                                        name="ivory_coast_code"
                                                        value="{{ $applicationInfo ? $applicationInfo->ivory_coast_code : '' }}"
                                                        required>
                                                </div>
                                            </div>
                                            <div class="form-group row">
                                                <label for="ivory_coast_occupation"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.ivory_coast_occupation')<span
                                                        aria-hidden="true" class="required">*</span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control"
                                                        id="ivory_coast_occupation" name="ivory_coast_occupation"
                                                        value="{{ $applicationInfo ? $applicationInfo->ivory_coast_occupation : '' }}"
                                                        required>
                                                </div>
                                            </div>
                                        </div>

                                        <!--when selected service is consulate service "4" and sub service Life Certificate "38"-->
                                    @elseif ($application->service_selected == 4 && ($application->sub_service == '38' || $application->sub_service == '75'))
                                        <div class="form-group row">
                                            <label for="cgrae_cnps"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.select_value')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-3 radio-group">
                                                <label class="radio-inline">
                                                    <input type="radio" name="cgrae_cnps" value="cgrae"
                                                        >
                                                    @lang('messages.cgrae')
                                                </label>
                                                <label class="radio-inline">
                                                    <input type="radio" name="cgrae_cnps" value="cnps"
                                                        >
                                                    @lang('messages.cnps')
                                                </label>
                                            </div>
                                        </div>
                                        <!--select service is consular service id is 4 and sub service is Non Remarriage Certificate and id is 76 -->
                                    @elseif ($application->service_selected == 4 && $application->sub_service == '76')
                                        <!-- witness 2 -->
                                        <div class="witness-section">
                                            <h4>@lang('messages.witness')1</h4>

                                            <div class="form-group row">
                                                <label for="witnessname1"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.Name')<span
                                                        aria-hidden="true" class="required"></span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="witnessname1"
                                                        name="witnessname1" value="{{ $application->witnessname1 }}">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="occupation"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.occupation')<span
                                                        aria-hidden="true" class="required"></span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="occupation"
                                                        name="occupation" value="{{ $application->occupation }}">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="witnessaddress1"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.address')<span
                                                        aria-hidden="true" class="required"></span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="witnessaddress1"
                                                        name="witnessaddress1"
                                                        value="{{ $application->witnessaddress1 }}">
                                                </div>
                                            </div>
                                        </div>

                                        <!-- witness 2 -->
                                        <div class="witness-section">
                                            <h4>@lang('messages.witness')2</h4>

                                            <div class="form-group row">
                                                <label for="witnessname"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.Name')<span
                                                        aria-hidden="true" class="required"></span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="witnessname"
                                                        name="witnessname" value="{{ $application->witnessname }}">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="witnessoccupation"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.occupation')<span
                                                        aria-hidden="true" class="required"></span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="witnessoccupation"
                                                        name="witnessoccupation"
                                                        value="{{ $application->witnessoccupation }}">
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="witnessaddress"
                                                    class="col-sm-3 col-form-label text-end">@lang('messages.address')<span
                                                        aria-hidden="true" class="required"></span> :</label>
                                                <div class="col-sm-6">
                                                    <input type="text" class="form-control" id="witnessaddress"
                                                        name="witnessaddress"
                                                        value="{{ $application->witnessaddress }}">
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                @elseif ($application->service_selected == 1)
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="name" name="name"
                                                value="{{ $application->name }}" required>
                                        </div>
                                    </div>

                                    {{-- <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.first_name')
                                            :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="fname" name="fname"
                                                value="{{ $application->fname }}">
                                        </div>
                                    </div> --}}

                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.last_name')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="surname" name="surname"
                                                value="{{ $application->surname }}" required>
                                        </div>
                                    </div>

                                    {{-- <div class="form-group row">
                                        <label for="family_name"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.family_name')<span
                                                aria-hidden="true" class="required"></span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="family_name"
                                                name="family_name" value="{{ $application->family_name }}">
                                        </div>
                                    </div> --}}

                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.gender')<span
                                                aria-hidden="true" class="required">*</span> :
                                        </label>
                                        <div class="col-sm-6">
                                            <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                <input class="" type="radio" name="gender" id=""
                                                    value="Male" checked style="width:auto; margin:0"
                                                    >
                                                <label class="form-check-label"
                                                    for="inlineRadio1">@lang('messages.male')</label>

                                                <input class="" type="radio" name="gender" id=""
                                                    value="Female" style="width:auto; margin:0" >
                                                <label class="form-check-label"
                                                    for="inlineRadio1">@lang('messages.female')</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.dob')<span
                                                aria-hidden="true" class="required">*</span>
                                            :</label>
                                        <div class="col-sm-6">
                                            <input type="date" class="form-control" id="child_dob"
                                                name="child_dob" value="{{ $application->child_dob }}" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="appartmentornumber"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.place_of_birth')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="birth_appartment_number"
                                                name="birth_appartment_number"
                                                value="{{ $application->birth_appartment_number }}" required>
                                        </div>
                                    </div>

                                    <div class="form-group row  mb-3">
                                        <label for="nationality_origin"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.nationality_origin')<span
                                                aria-hidden="true"class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <select name="nationality_origin"
                                                class="nationality form-control countrySelect"
                                                value="{{ $application->nationality_origin }}"
                                                data-value="{{ $application->nationality_origin }}"required>
                                                <option value="">Select Nationality</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group row mb-3">
                                        <label for="present_nationality"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.present_nationality')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <select name="present_nationality"
                                                class="nationality form-control countrySelect"
                                                value="{{ $application->present_nationality }}"
                                                data-value="{{ $application->present_nationality }}"required>
                                                <option value="">Select Present Nationality</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="date_naturalization"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.date_naturalization')<span
                                                aria-hidden="true" class="required"></span> :</label>
                                        <div class="col-sm-6">
                                            <input type="date" class="form-control" id="date_naturalization"
                                                name="date_naturalization"
                                                value="{{ $application->date_naturalization }}">
                                        </div>
                                    </div>

                                    <div class="card bg-light shadow-none pt-2  pb-2">
                                        <h5 class="px-5" style="text-align:left">@lang('messages.passport_details')</h5>
                                        <div class="form-group row">
                                            <label for="passport_number"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.passport_number')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="passport_number"
                                                    name="passport_number" value="{{ $application->passport_number }}"
                                                    required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="date_issuance"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.date_issuance')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="date" class="form-control" id="date_issuance"
                                                    name="date_issuance" value="{{ $application->date_issuance }}"
                                                    required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="place_issuance"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.place_issuance')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control" id="place_issuance"
                                                    name="place_issuance" value="{{ $application->place_issuance }}"
                                                    required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="valid_until"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.valid_until')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="date" class="form-control" id="valid_until"
                                                    name="valid_until" value="{{ $application->valid_until }}"
                                                    required>
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <label for="military_status"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.military_status')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-2">
                                            <input type="radio" class="" value="yes"
                                                name="military_status" > @lang('messages.yes')
                                        </div>
                                        <div class="col-sm-2">
                                            <input type="radio" class="" value="no"
                                                name="military_status" >@lang('messages.no')
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <label for="email"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.email')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="email" class="form-control" name="email"
                                                value="{{ $application->email }}" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="duration_stay"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.duration_stay')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6 d-flex gap-2 justify-content-center align-items-center">
                                            <select class="form-control" name="duration_stay" required>
                                                @for ($i = 1; $i <= 30; $i++)
                                                    <option value="{{ $i }}"
                                                        {{ $i == $application->duration_stay ? 'selected' : '' }}>
                                                        {{ $i }}</option>
                                                @endfor
                                            </select> <span>Days</span>
                                        </div>
                                    </div>


                                    <div class="card bg-light shadow-none pt-2 pb-3 m-2">
                                        <div class="form-group row">
                                            <label for="reasons_for_traveling_detail"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.reasons_for_traveling_detail')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    name="reasons_for_traveling_detail"
                                                    value="{{ $application->reasons_for_traveling_detail }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="stay_three_months"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.have_stay_more_than_three_months_Coted’Ivoire')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="row col-sm-6">
                                                <div class="col-sm-3">
                                                    <h6><input type="radio" name="stay_three_months" value="yes"
                                                            checked="" >@lang('messages.yes')</h6>
                                                </div>
                                                <div class="col-sm-3">
                                                    <h6><input type="radio" name="stay_three_months" value="no"
                                                            >@lang('messages.no')</h6>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="give_exact_date"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.give_exact_date')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="date" class="form-control" name="give_exact_date"
                                                    value="{{ $application->give_exact_date }}">
                                            </div>
                                        </div>


                                        <div class="form-group row">
                                            <label for="give_addresses_businessmen"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.give_addresses_businessmen_manufactures_trip')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    name="give_addresses_businessmen"
                                                    value="{{ $application->give_addresses_businessmen }}">
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="any_relatives_Coted’Ivoire"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.any_relatives_Coted’Ivoire')<span
                                                    aria-hidden="true" class="required"></span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    name="any_relatives_Coted’Ivoire"
                                                    value="{{ $application->any_relatives_Coted’Ivoire }}">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="place_entry_Coted’Ivoire"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.place_entry_Coted’Ivoire')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" name="place_entry_Coted’Ivoire"
                                                value="{{ $application->place_entry_Coted’Ivoire }}" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="date_entry_Coted’Ivoire"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.date_entry_Coted’Ivoire')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="date" class="form-control" name="date_entry_Coted’Ivoire"
                                                value="{{ $application->date_entry_Coted’Ivoire }}" required>
                                        </div>
                                    </div>

                                    <div class="card bg-light shadow-none pt-2 pb-3 m-2">
                                        <div class="form-group row">
                                            <label for="intend_establish_business_industry"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.intend_establish_business_industry_Coted’Ivoire')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="row col-sm-6">
                                                <div class="col-sm-3">
                                                    <h6><input type="radio" name="intend_establish_business_industry"
                                                            value="yes" checked
                                                            >@lang('messages.yes')
                                                    </h6>
                                                </div>
                                                <div class="col-sm-3">
                                                    <h6><input type="radio" name="intend_establish_business_industry"
                                                            value="no" >@lang('messages.no')</h6>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="correct_address_during_stay"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.correct_address_during_stay_IvoryCoast')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    name="correct_address_during_stay"
                                                    value="{{ $application->correct_address_during_stay }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="where_are_planning_while"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.where_are_planning_while_leaving_Coted’Ivoire')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="text" class="form-control"
                                                    name="where_are_planning_while"
                                                    value="{{ $application->where_are_planning_while }}" required>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="salary_room_stay_Coted’Ivoire"
                                                class="col-sm-3 col-form-label text-end">@lang('messages.salary_room_stay_Coted’Ivoire_not_seek_remain_granted')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="row col-sm-6">
                                                <div class="col-sm-3">
                                                    <h6><input type="radio" name="salary_room_stay_Coted’Ivoire"
                                                            value="yes" checked
                                                            >@lang('messages.yes')
                                                    </h6>
                                                </div>
                                                <div class="col-sm-3">
                                                    <h6><input type="radio" name="salary_room_stay_Coted’Ivoire"
                                                            value="no" >@lang('messages.no')</h6>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @else
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.name')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="name" name="name"
                                                value="{{ $application->name }}" required>
                                        </div>
                                    </div>
                                    {{-- <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.first_name')
                                            :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="fname" name="fname"
                                                value="{{ $application->fname }}">
                                        </div>
                                    </div> --}}
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.surname')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="surname" name="surname"
                                                value="{{ $application->surname }}" required>
                                        </div>
                                    </div>
                                @endif

                                @if ($application->service_selected == 4)
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.gender')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <div class="form-check" style="text-align:left; padding:5px 0 5px 0">
                                                <input class="" type="radio" name="gender" id=""
                                                    value="Male" checked style="width:auto; margin:0">
                                                <label class="form-check-label"
                                                    for="inlineRadio1">@lang('messages.male')</label>

                                                <input class="" type="radio" name="gender" id=""
                                                    value="Female" style="width:auto; margin:0">
                                                <label class="form-check-label"
                                                    for="inlineRadio1">@lang('messages.female')</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="citizenship"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.citizenship')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="citizenship"
                                                name="citizenship"
                                                value="{{ $applicationInfo ? $applicationInfo->citizenship : '' }}"
                                                required>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="child_dob"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.dob')<span
                                                aria-hidden="true" class="required">*</span>
                                            :</label>
                                        <div class="col-sm-6">
                                            <input type="date" class="form-control" id="child_dob"
                                                name="child_dob" value="{{ $application->child_dob }}" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="cni_consulatecard"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.cni_consulatecard')<span
                                                aria-hidden="true" class="required">*</span>
                                            :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="cni_consulatecard"
                                                name="cni_consulatecard"
                                                value="{{ $applicationInfo ? $applicationInfo->cni_consulatecard : '' }}"
                                                required>
                                        </div>
                                    </div>
                                @endif

                                @if ($application->service_selected == 7)
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.age')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <select class="form-control" id="age" name="age">
                                                <option value="">@lang('messages.select_age')</option>
                                                <option value="18 years old and Plus"
                                                    {{ $application->age === '18 years old and Plus' ? 'selected' : '' }}>
                                                    @lang('messages.18yearsold')</option>
                                                <option
                                                    value="16 – 17 years old"{{ $application->age === '16 – 17 years old' ? 'selected' : '' }}>
                                                    @lang('messages.16yearsold')
                                                </option>
                                                <option
                                                    value="14 – 15 years old"{{ $application->age === '14 – 15 years old' ? 'selected' : '' }}>
                                                    @lang('messages.14yearsold')
                                                </option>
                                                <option
                                                    value="0 – 13 years old"{{ $application->age === '0 – 13 years old' ? 'selected' : '' }}>
                                                    @lang('messages.0yearsold')
                                                </option>
                                            </select>
                                        </div>
                                    </div>
                                    <br>


                                    <div class="form-group row" id="nationalIdField">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.national_id')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <select class="form-control" id="national_id" name="national_id">
                                                <option value="yes"
                                                    {{ $application->national_id === 'yes' ? 'selected' : '' }}>
                                                    @lang('messages.yes')
                                                </option>
                                                <option value="no"
                                                    {{ $application->national_id === 'no' ? 'selected' : '' }}>
                                                    @lang('messages.no')
                                                </option>
                                            </select>
                                        </div>
                                    </div>

                                    <!-- when select 18 or 18+ age then show yes no drop down -->
                                    <script>
                                        document.addEventListener("DOMContentLoaded", function() {
                                            const ageSelect = document.getElementById("age");
                                            const nationalIdField = document.getElementById("nationalIdField");
                                            const nationalIdSelect = document.getElementById("national_id");

                                            if (ageSelect && nationalIdField) {
                                                ageSelect.addEventListener("change", function() {
                                                    if (ageSelect.value === "18 years old and Plus" || ageSelect.value ===
                                                        "16 – 17 years old") {
                                                        nationalIdField.classList.remove("d-none");
                                                        nationalIdSelect.required = true;
                                                    } else {
                                                        nationalIdField.classList.add("d-none");
                                                        nationalIdSelect.required = false;
                                                        nationalIdSelect.value = ""; // Reset the value
                                                    }
                                                });
                                            }

                                            // Initial check on page load
                                            if (ageSelect.value === "18 years old and Plus" || ageSelect.value === "16 – 17 years old") {
                                                nationalIdField.classList.remove("d-none");
                                                nationalIdSelect.required = true;
                                            } else {
                                                nationalIdField.classList.add("d-none");
                                                nationalIdSelect.required = false;
                                                nationalIdSelect.value = ""; // Reset the value
                                            }
                                        });
                                    </script>
                                @endif

                                {{-- <!-- when selectd service is Consulate Service id is 1 a nd sub service Human Remains and id 65 -->
                                @if ($application->service_selected == 1 && $application->sub_service == '65')
                                @endif --}}

                                @if ($application->sub_service != 15 && $application->sub_service != 61)
                                    <div class="form-group row">
                                        <label for="appartmentornumber"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.street')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="appartmentornumber1"
                                                name="appartment_number" value="{{ $application->appartment_number }}"
                                                required>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="city"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.city')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="city1" name="city"
                                                value="{{ $application->city }}" required>
                                        </div>
                                    </div>


                                    <div class="form-group row mb-3">
                                        <label for="country"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.country')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <select class="form-control countrySelect" id="countrySelect"
                                                name="country_selected" value="{{ $application->country_selected }}"
                                                data-value="{{ $application->country_selected }}" required>
                                                <option value="">Select Country</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group row ">
                                        <label for="state"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.state')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <select class="form-control stateSelect" id="stateSelect" name="state"
                                                value="{{ $application->state }}"
                                                data-country="{{ $application->country_selected }}"
                                                data-state="{{ $application->state }}" required>
                                                <option value="">Select State</option>
                                            </select>
                                        </div>
                                    </div><br>
                                    <div class="form-group row">
                                        <label for="zip_code"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="zip_code1"
                                                name="zip_code" value="{{ $application->zip_code }}" required>
                                        </div>
                                    </div>
                                @endif
                                @if ($application->sub_service == 51)
                                    <div class="form-group row">
                                        <label for="ivoireaddress"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.ivoireaddress')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="ivoireaddress"
                                                name="ivoireaddress"
                                                value="{{ $applicationInfo ? $applicationInfo->ivoireaddress : '' }}"
                                                required>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="ivoirecity"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.ivoirecity')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="ivoirecity"
                                                name="ivoirecity"
                                                value="{{ $applicationInfo ? $applicationInfo->ivoirecity : '' }}"
                                                required>
                                        </div>
                                    </div>


                                    <div class="form-group row mb-3">
                                        <label for="ivoirecountry"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.ivoirecountry')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <select class="form-control countrySelect" id="ivoirecountry"
                                                name="ivoirecountry"
                                                value="{{ $applicationInfo ? $applicationInfo->ivoirecountry : '' }}"
                                                data-value="{{ $applicationInfo ? $applicationInfo->ivoirecountry : '' }}"
                                                required>
                                                <option>Select Country</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <label for="ivoirestate"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.ivoirestate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <select class="form-control stateSelect" id="ivoirestate"
                                                name="ivoirestate"
                                                value="{{ $applicationInfo ? $applicationInfo->ivoirestate : '' }}"
                                                data-country="{{ $applicationInfo ? $applicationInfo->ivoirecountry : '' }}"
                                                data-state="{{ $applicationInfo ? $applicationInfo->ivoirestate : '' }}"
                                                required>
                                                <option>Select State</option>
                                            </select>
                                        </div>
                                    </div><br>

                                    <div class="form-group row">
                                        <label for="ivoirezip_code"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.ivoirezip_code')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="ivoirezip_code"
                                                name="ivoirezip_code"
                                                value="{{ $applicationInfo ? $applicationInfo->ivoirezip_code : '' }}"
                                                required>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.departure_date_abidjan')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="date" class="form-control" id="departuredateabidjan"
                                                name="departuredateabidjan"
                                                value="{{ $application->departuredateabidjan }}" required>
                                        </div>
                                    </div>
                                @endif
                                <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

                                {{-- @if ($application->sub_service != 74 && $application->sub_service != 54 && $application->sub_service != 64 && $application->sub_service != 79 && $application->sub_service != 65 && $application->sub_service != 51 && $application->sub_service != 61 && $application->sub_service != 52 && $application->sub_service != 15 && $application->sub_service != 17 && $application->sub_service != 70)
                                <div class="form-group row">
                                    <label for="zip_code"
                                        class="col-sm-3 col-form-label text-end">@lang('messages.zip_code')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="zip_code1" name="zip_code"
                                            value="{{ $application->zip_code }}" required>
                                    </div>
                                </div>
                                @endif --}}
                                @if ($application->sub_service == '74' || $application->sub_service == '70' || $application->sub_service == '69')
                                    <div class="form-group row">
                                        <label for="job_title"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.job_title')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="job_title"
                                                name="job_title" value="{{ $application->job_title }}" required>
                                        </div>
                                    </div>
                                @endif
                                <!-- when selectd service is Civil Document id is 2 a nd sub service is Transcript Marriage Certificate is is 15 -->
                                @if (
                                    $application->sub_service != 61 &&
                                        $application->sub_service != '15' &&
                                        $application->sub_service != '74' &&
                                        $application->sub_service != 51 &&
                                        $application->sub_service != 70)
                                    <div class="form-group row">
                                        <label for="job_title"
                                            class="col-sm-3 col-form-label text-end">@lang('messages.job_title')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="job_title"
                                                name="job_title" value="{{ $application->job_title }}" required>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.maritalstatus')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-2">
                                            <select class="form-select" name="mstatus" id="mstatusSelect">
                                                <option value="single"
                                                    {{ $application->mstatus === 'single' ? 'selected' : '' }}>
                                                    @lang('messages.single')</option>
                                                <option value="married"
                                                    {{ $application->mstatus === 'married' ? 'selected' : '' }}>
                                                    @lang('messages.married')
                                                </option>
                                                <option value="widow"
                                                    {{ $application->mstatus === 'widow' ? 'selected' : '' }}>
                                                    @lang('messages.widow')
                                                </option>
                                                <option value="divorced"
                                                    {{ $application->mstatus === 'divorced' ? 'selected' : '' }}>
                                                    @lang('messages.divorced')
                                                </option>
                                            </select>
                                        </div>

                                        <label for=""
                                            class="col-sm-2 col-form-label text-end">@lang('messages.weddingdate')</label>
                                        <div class="col-sm-2">
                                            <input type="date" class="form-control" id="weddingdate"
                                                name="weddingdate" value="{{ $application->weddingdate }}">
                                        </div>
                                    </div>
                                @endif

                                @if ($application->service_selected == 5)
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.children')</label>
                                        <div class="col-sm-6 border border-dark p-3 rounded" id="childFormContainer">
                                            <button type="button" class="btn btn mt-2 float-end" id="addChildForm">
                                                <i class="fas fa-plus-circle"></i>@lang('messages.add_child')
                                            </button>
                                            <div class="child-form">
                                                
                                                <div class="child-entry">
                                                    <input type="text" class="form-control mb-2" name="childName[]"
                                                        placeholder="Name and first name">
                                                    <input type="date" class="form-control mb-2" name="childDOB[]"
                                                        placeholder="Date of birth">
                                                    <input type="text" class="form-control mb-2" name="childPOB[]"
                                                        placeholder="Place of birth">
                                                </div>
                                                                                            </div>

                                        </div>
                                    </div>

                                    <script>
                                        $(document).ready(function() {

                                            $("#addChildForm").click(function() {
                                                var childForm = $(".child-form .child-entry:first").clone();
                                                childForm.find("input").val(""); // Clear input values
                                                $("#childFormContainer .child-form").append(childForm);
                                            });

                                        });
                                    </script>
                                @endif
                                @if ($application->sub_service != 15 && $application->sub_service != 61)
                                    <div class="form-group row ">
                                        <label for=""
                                            class="col-sm-3 col-form-label text-end">@lang('messages.contact')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="text" class="form-control" id="contact" name="contact"
                                                value="{{ $application->contact }}">
                                        </div>
                                    </div>
                                @endif




                                <button type="button" name="next"
                                    class="btn rounded-pill btn-lg px-3 next action-button" value="Next"
                                    id="nextButton2" style="background: {{ $colorCode }};"
                                    onmouseover="this.style.background='{{ $hovercolor }}';"
                                    onmouseout="this.style.background='{{ $colorCode }}';">@lang('messages.next')
                                    <i class="fas fa-thin fa-angle-right"></i>
                                </button>

                                <script>
                                    $(document).ready(function() {
                                        $("#nextButton2").prop("disabled", true);

                                        function checkFields() {
                                            var allRequiredFieldsFilled = true;
                                            $("#collect_data input, #collect_data select").each(
                                                function() {
                                                    if ($(this).prop("required") && !$(this).hasClass("d-none")) {
                                                        if ($(this).is("select")) {
                                                            if ($(this).val() === "" || $(this).val() === null) {
                                                                allRequiredFieldsFilled = false;
                                                                return false;
                                                            }
                                                        } else if ($(this).is("input") && $(this).val() === "") {
                                                            allRequiredFieldsFilled = false;
                                                            return false;
                                                        }
                                                    }
                                                });
                                            if ($('#age').prop("required") && $("#age").val() === "") {
                                                allRequiredFieldsFilled = false;
                                            }
                                            if ($("#age").val() === "16 – 17 years old" || $("#age").val() === "18 years old and Plus") {
                                                if ($('#national_id').prop("required") && $("#national_id").val() === "") {
                                                    allRequiredFieldsFilled = false;
                                                }
                                            }
                                            if (allRequiredFieldsFilled) {
                                                return true;
                                            } else {
                                                // $("#nextButton").prop("disabled", true);
                                                return false;
                                            }
                                        }

                                        // Function to enable/disable the "Next" button based on field validation
                                        function toggleNextButton() {
                                            const isValid = checkFields();
                                            $("#nextButton2").prop("disabled", !isValid);
                                        }

                                        // Call the toggleNextButton function when any input field changes
                                        $("input, select").on("input change", function() {
                                            toggleNextButton();
                                        });

                                        // Call the toggleNextButton function on page load
                                        toggleNextButton();
                                    });
                                </script>
                            </fieldset>


                            <fieldset>

                                {{-- @if ($application->service_selected == 1)
                                    <div class="form-group row">
                                        <div class="col-md-12 mb-5">
                                            <a href="{{ asset('/assets/doc_visa.pdf') }}" class="btn btn-dark"
                                                download>@lang('messages.download_and_fill_document')</a>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="signedvisadoc"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.upload_the_duly_signed_document')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="signedvisadoc"
                                                name="signedvisadoc" value="{{ $application->signedvisadoc }}"
                                                accept=".pdf">
                                            <small class="text-danger" id="signedvisadocmessage"
                                                style="display: none;">Please
                                                upload
                                                a valid PDF file.</small>

                                            <div class="col-sm-3">
                                                <iframe src="{{ asset('/storage/' . $application->signedvisadoc) }}"
                                                    alt="signedvisadoc" style="width: 50%; height: 100px;"></iframe>
                                            </div>
                                        </div>
                                    </div>
                                @endif --}}

                                @if ($application->service_selected == 4)
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="form-group row">
                                        <label for="copyofpassport"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copyofpassport')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="copyofpassport"
                                                name="copyofpassport" value="{{ $application->copyofpassport }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF,">
                                            <small class="text-danger" id="photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->copyofpassport, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copyofpassport) }}"
                                                        alt="copyofpassport"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copyofpassport) }}"
                                                        alt="copyofpassport" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="greencardcopy"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.green_card_copy') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="greencardcopy"
                                                name="greencardcopy" value="{{ $application->greencardcopy }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="6photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid
                                                file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->greencardcopy, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->greencardcopy) }}"
                                                        alt="greencardcopy" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->greencardcopy) }}"
                                                        alt="greencardcopy" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>


                                    {{-- <div class="form-group row">
                                        <label for="proofofaddress"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.proofofaddress')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="proofofaddress"
                                                name="proofofaddress" value="{{ $application->proofofaddress }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->proofofaddress, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->proofofaddress) }}"
                                                        alt="proofofaddress"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->proofofaddress) }}"
                                                        alt="proofofaddress" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div> --}}


                                    <div class="form-group row">
                                        <label for="copyflightticket"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_of_flight_ticket')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="copyflightticket"
                                                name="copyflightticket" value="{{ $application->copyflightticket }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="6photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid
                                                file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->copyflightticket, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copyflightticket) }}"
                                                        alt="copyflightticket"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copyflightticket) }}"
                                                        alt="copyflightticket" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="laisserpasserinquiry"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.laisser-passer_inquiry')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="laisserpasserinquiry" name="laisserpasserinquiry"
                                                value="{{ $application->laisserpasserinquiry }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="6photoValidationMessage5"
                                                style="display: none;">Please
                                                upload a valid
                                                file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->laisserpasserinquiry, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->laisserpasserinquiry) }}"
                                                        alt="laisserpasserinquiry"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->laisserpasserinquiry) }}"
                                                        alt="laisserpasserinquiry" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="photopassportformat"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.photo_passport_format')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="photopassportformat" name="photopassportformat" value="{{ $application->photopassportformat }}" accept=".png, .jpg, .jpeg, .PNG, .JPG, .JPEG"> 
                                            <small class="text-danger" id="6photoValidationMessage6" style="display: none;">Please upload a valid file.</small>
                                            <input type="hidden" id="aspectRatio" name="aspectRatio">
                                            <input type="hidden" id="croppedImage" name="photopassportformat">
                                            <canvas id="cropperCanvas" style="display: none;"></canvas>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->photopassportformat, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->photopassportformat) }}" alt="photopassportformat" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photopassportformat) }}" alt="photopassportformat" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Modal -->
                                    <div class="modal fade" id="cropImageModal" data-bs-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="cropImageModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                        <h5 class="modal-title" id="cropImageModalLabel">Crop Image</h5>
                                                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                            <span aria-hidden="true">&times;</span>
                                                        </button>
                                                </div>
                                                <div class="modal-body">
                                                    <div class="img-container">
                                                        <img id="imageToCrop" src="" alt="Image for cropping">
                                                    </div>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                    <button type="button" class="btn btn-primary" id="cropButton">Crop</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- when  selected service is passport and  -->
                                @elseif ($application->service_selected == 1 && $application->sub_service == 65)
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for="photopassportformat"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.photo_passport_format')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="photopassportformat" name="photopassportformat" value="{{ $application->photopassportformat }}" accept=".png, .jpg, .jpeg, .PNG, .JPG, .JPEG"> 
                                            <small class="text-danger" id="6photoValidationMessage6" style="display: none;">Please upload a valid file.</small>
                                            <input type="hidden" id="aspectRatio" name="aspectRatio">
                                            <input type="hidden" id="croppedImage" name="photopassportformat">
                                            <canvas id="cropperCanvas" style="display: none;"></canvas>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->photopassportformat, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->photopassportformat) }}" alt="photopassportformat" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photopassportformat) }}" alt="photopassportformat" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Modal -->
                                    <div class="modal fade" id="cropImageModal" data-bs-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="cropImageModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="cropImageModalLabel">Crop Image</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="img-container">
                                                    <img id="imageToCrop" src="" alt="Image for cropping">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-primary" id="cropButton">Crop</button>
                                            </div>
                                        </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="passport6monthsvalidity"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.passport_6_months_validity')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="passport6monthsvalidity" name="passport6monthsvalidity"
                                                value="{{ $application->passport6monthsvalidity }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->passport6monthsvalidity, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->passport6monthsvalidity) }}"
                                                        alt="passport6monthsvalidity"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->passport6monthsvalidity) }}"
                                                        alt="passport6monthsvalidity"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="copygreencardnoncitizen"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_green_card_non_citizen') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="copygreencardnoncitizen"
                                                name="copygreencardnoncitizen"
                                                value="{{ $application->copygreencardnoncitizen }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->copygreencardnoncitizen, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copygreencardnoncitizen) }}"
                                                        alt="copygreencardnoncitizen"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copygreencardnoncitizen) }}"
                                                        alt="copygreencardnoncitizen"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="copyvaccincertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_vaccin_certificate_yellow_fever')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <select id="copyvaccincertificateSelect" name="copyvaccincertificate"
                                                class="form-control">
                                                <option value="Certified Invitation Letter"
                                                    {{ $application->copyvaccincertificate === 'Certified Invitation Letter' ? 'selected' : '' }}>
                                                    @lang('messages.certified_invitation_letter')</option>
                                                <option value="Hotel Reservation"
                                                    {{ $application->copyvaccincertificate === 'Hotel Reservation' ? 'selected' : '' }}>
                                                    @lang('messages.hotel_reservaton')</option>
                                                <option value="Business Invitation Letter"
                                                    {{ $application->copyvaccincertificate === 'Business Invitation Letter' ? 'selected' : '' }}>
                                                    @lang('messages.business_invitation_letter')</option>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="form-group row p-2">
                                        <label for="uploadcopyvaccincertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.upload_copy_vaccin_certificate_yellow_fever')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="uploadcopyvaccincertificate" name="uploadcopyvaccincertificate"
                                                value="{{ $application->uploadcopyvaccincertificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->uploadcopyvaccincertificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->uploadcopyvaccincertificate) }}"
                                                        alt="uploadcopyvaccincertificate"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->uploadcopyvaccincertificate) }}"
                                                        alt="uploadcopyvaccincertificate"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row p-2">
                                        <label for="uploadyellowcard"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.upload_yellow_card')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="uploadyellowcard"
                                                name="uploadyellowcard" value="{{ $application->uploadyellowcard }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage8"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->uploadyellowcard, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->uploadyellowcard) }}"
                                                        alt="uploadyellowcard"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->uploadyellowcard) }}"
                                                        alt="uploadyellowcard" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    {{-- <div class="form-group row p-2">
                                        <label for="businessinvitationletter"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.business_invitation_letter') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="businessinvitationletter"
                                                name="businessinvitationletter"
                                                value="{{ $application->businessinvitationletter }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage7"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->businessinvitationletter, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->businessinvitationletter) }}"
                                                        alt="businessinvitationletter"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->businessinvitationletter) }}"
                                                        alt="businessinvitationletter"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div> --}}


                                    <div class="form-group row">
                                        <label for="copyflightitinerary"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_flight_itinerary')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copyflightitinerary" name="copyflightitinerary"
                                                value="{{ $application->copyflightitinerary }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->copyflightitinerary, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copyflightitinerary) }}"
                                                        alt="copyflightitinerary"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copyflightitinerary) }}"
                                                        alt="copyflightitinerary" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <label for="certifiedparentalauthorization"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.certified_parental_authorization') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control"
                                                id="certifiedparentalauthorization"
                                                name="certifiedparentalauthorization"
                                                value="{{ $application->certifiedparentalauthorization }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage5"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->certifiedparentalauthorization, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->certifiedparentalauthorization) }}"
                                                        alt="certifiedparentalauthorization"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->certifiedparentalauthorization) }}"
                                                        alt="certifiedparentalauthorization"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="passportgreenvisa"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.passport_green_visa') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="passportgreenvisa"
                                                name="passportgreenvisa" value="{{ $application->passportgreenvisa }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage9"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->passportgreenvisa, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->passportgreenvisa) }}"
                                                        alt="passportgreenvisa"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->passportgreenvisa) }}"
                                                        alt="passportgreenvisa" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <label for="copycustodydocument"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_custody_document') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="copycustodydocument"
                                                name="copycustodydocument"
                                                value="{{ $application->copycustodydocument }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage6"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->copycustodydocument, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copycustodydocument) }}"
                                                        alt="copycustodydocument"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copycustodydocument) }}"
                                                        alt="copycustodydocument" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <!-- when select parent service is visa service and child service is Visa Diplomatique -->
                                @elseif ($application->service_selected == 1 && $application->sub_service == 67)
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for="photopassportformat"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.photo_passport_format')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="photopassportformat" name="photopassportformat" value="{{ $application->photopassportformat }}" accept=".png, .jpg, .jpeg, .PNG, .JPG, .JPEG"> 
                                            <small class="text-danger" id="6photoValidationMessage6" style="display: none;">Please upload a valid file.</small>
                                            <input type="hidden" id="aspectRatio" name="aspectRatio">
                                            <input type="hidden" id="croppedImage" name="photopassportformat">
                                            <canvas id="cropperCanvas" style="display: none;"></canvas>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->photopassportformat, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->photopassportformat) }}" alt="photopassportformat" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photopassportformat) }}" alt="photopassportformat" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Modal -->
                                    <div class="modal fade" id="cropImageModal" data-bs-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="cropImageModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="cropImageModalLabel">Crop Image</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="img-container">
                                                    <img id="imageToCrop" src="" alt="Image for cropping">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-primary" id="cropButton">Crop</button>
                                            </div>
                                        </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="passport6monthsvalidity"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.passport_6_months_validity')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="passport6monthsvalidity" name="passport6monthsvalidity"
                                                value="{{ $application->passport6monthsvalidity }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->passport6monthsvalidity, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->passport6monthsvalidity) }}"
                                                        alt="passport6monthsvalidity"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->passport6monthsvalidity) }}"
                                                        alt="passport6monthsvalidity"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="verbalnote"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.verbal_note')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="verbalnote"
                                                name="verbalnote" value="{{ $application->verbalnote }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="67photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->verbalnote, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->verbalnote) }}"
                                                        alt="verbalnote" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->verbalnote) }}"
                                                        alt="verbalnote" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="travelreason"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.travel_reason')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="row col-sm-6">
                                            <div class="col-sm-3">
                                                <label>
                                                    <input type="radio" name="note_type" id="personalRadio"
                                                        value="Personal"
                                                        {{ $application->note_type === 'Personal' ? 'checked' : '' }}>
                                                    @lang('messages.personal')
                                                </label>
                                            </div>
                                            <div class="col-sm-3">
                                                <label>
                                                    <input type="radio" name="note_type" id="officialRadio"
                                                        value="Official"
                                                        {{ $application->note_type === 'Official' ? 'checked' : '' }}>
                                                    @lang('messages.official')
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row d-none" id="missionOrderField">
                                        <label for="missionorder"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.mission_order') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="missionorder"
                                                name="missionorder" value="{{ $application->missionorder }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="67photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->missionorder, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->missionorder) }}"
                                                        alt="missionorder" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->missionorder) }}"
                                                        alt="missionorder" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <!-- script for hide and show Personal Official -->
                                    <script>
                                        const officialRadio = document.getElementById('officialRadio');
                                        const personalRadio = document.getElementById('personalRadio');
                                        const missionOrderField = document.getElementById('missionOrderField');

                                        function toggleMissionOrderField() {
                                            if (officialRadio.checked) {
                                                missionOrderField.classList.remove("d-none");
                                            } else {
                                                missionOrderField.classList.add("d-none");
                                            }
                                        }

                                        officialRadio.addEventListener('change', toggleMissionOrderField);
                                        personalRadio.addEventListener('change', toggleMissionOrderField);

                                        // Initial state on page load
                                        toggleMissionOrderField();
                                    </script>

                                    <div class="form-group row">
                                        <label for="uploadcopyvaccincertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.upload_copy_vaccin_certificate_yellow_fever')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="uploadcopyvaccincertificate" name="uploadcopyvaccincertificate"
                                                value="{{ $application->uploadcopyvaccincertificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->uploadcopyvaccincertificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->uploadcopyvaccincertificate) }}"
                                                        alt="uploadcopyvaccincertificate"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->uploadcopyvaccincertificate) }}"
                                                        alt="uploadcopyvaccincertificate"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row p-2">
                                        <label for="uploadyellowcard"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.upload_yellow_card')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="uploadyellowcard"
                                                name="uploadyellowcard" value="{{ $application->uploadyellowcard }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage8"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->uploadyellowcard, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->uploadyellowcard) }}"
                                                        alt="uploadyellowcard"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->uploadyellowcard) }}"
                                                        alt="uploadyellowcard" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <!-- when select parent service is visa service and child service is Visa Offciel id 72-->
                                @elseif ($application->service_selected == 1 && $application->sub_service == 72)
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                      <div class="form-group row">
                                        <label for="photopassportformat"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.photo_passport_format')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="photopassportformat" name="photopassportformat" value="{{ $application->photopassportformat }}" accept=".png, .jpg, .jpeg, .PNG, .JPG, .JPEG"> 
                                            <small class="text-danger" id="6photoValidationMessage6" style="display: none;">Please upload a valid file.</small>
                                            <input type="hidden" id="aspectRatio" name="aspectRatio">
                                            <input type="hidden" id="croppedImage" name="photopassportformat">
                                            <canvas id="cropperCanvas" style="display: none;"></canvas>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->photopassportformat, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->photopassportformat) }}" alt="photopassportformat" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photopassportformat) }}" alt="photopassportformat" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- Modal -->
                                    <div class="modal fade" id="cropImageModal" data-bs-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="cropImageModalLabel" aria-hidden="true">
                                        <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="cropImageModalLabel">Crop Image</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="img-container">
                                                    <img id="imageToCrop" src="" alt="Image for cropping">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-primary" id="cropButton">Crop</button>
                                            </div>
                                        </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="passport6monthsvalidity"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.passport_6_months_validity')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="passport6monthsvalidity" name="passport6monthsvalidity"
                                                value="{{ $application->passport6monthsvalidity }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->passport6monthsvalidity, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->passport6monthsvalidity) }}"
                                                        alt="passport6monthsvalidity"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->passport6monthsvalidity) }}"
                                                        alt="passport6monthsvalidity"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="verbalnote"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.verbal_note')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="verbalnote"
                                                name="verbalnote" value="{{ $application->verbalnote }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="67photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->verbalnote, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->verbalnote) }}"
                                                        alt="verbalnote" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->verbalnote) }}"
                                                        alt="verbalnote" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="travelreason"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.travel_reason')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="row col-sm-6">
                                            <div class="col-sm-3">
                                                <label>
                                                    <input type="radio" name="note_type" id="personalRadio"
                                                        value="Personal"
                                                        {{ $application->note_type === 'Personal' ? 'checked' : '' }}>
                                                    @lang('messages.personal')
                                                </label>
                                            </div>
                                            <div class="col-sm-3">
                                                <label>
                                                    <input type="radio" name="note_type" id="officialRadio"
                                                        value="Official"
                                                        {{ $application->note_type === 'Official' ? 'checked' : '' }}>
                                                    @lang('messages.official')
                                                </label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row d-none" id="missionOrderField">
                                        <label for="missionorder"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.mission_order') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="missionorder"
                                                name="missionorder" value="{{ $application->missionorder }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="67photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->missionorder, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->missionorder) }}"
                                                        alt="missionorder" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->missionorder) }}"
                                                        alt="missionorder" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <!-- script for hide and show Personal Official -->
                                    <script>
                                        const officialRadio = document.getElementById('officialRadio');
                                        const personalRadio = document.getElementById('personalRadio');
                                        const missionOrderField = document.getElementById('missionOrderField');

                                        function toggleMissionOrderField() {
                                            if (officialRadio.checked) {
                                                missionOrderField.classList.remove("d-none");
                                            } else {
                                                missionOrderField.classList.add("d-none");
                                            }
                                        }

                                        officialRadio.addEventListener('change', toggleMissionOrderField);
                                        personalRadio.addEventListener('change', toggleMissionOrderField);

                                        // Initial state on page load
                                        toggleMissionOrderField();
                                    </script>

                                    <div class="form-group row">
                                        <label for="uploadcopyvaccincertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.upload_copy_vaccin_certificate_yellow_fever')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="uploadcopyvaccincertificate" name="uploadcopyvaccincertificate"
                                                value="{{ $application->uploadcopyvaccincertificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->uploadcopyvaccincertificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->uploadcopyvaccincertificate) }}"
                                                        alt="uploadcopyvaccincertificate"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->uploadcopyvaccincertificate) }}"
                                                        alt="uploadcopyvaccincertificate"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row p-2">
                                        <label for="uploadyellowcard"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.upload_yellow_card')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="uploadyellowcard"
                                                name="uploadyellowcard" value="{{ $application->uploadyellowcard }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="1photoValidationMessage8"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->uploadyellowcard, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->uploadyellowcard) }}"
                                                        alt="uploadyellowcard"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->uploadyellowcard) }}"
                                                        alt="uploadyellowcard" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <!-- when user select passport and national identy is present then show this fields -->
                                @elseif ($application->service_selected == 7 && $application->sub_service == '54')
                                    @if ($application->embassies == 35 || $application->embassies == 36)

                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>

                                    @endif
                                    <div class="form-group row d-none">
                                        <label for="photoofpassport"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.passportphoto')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="photopassportformat"
                                                name="photoofpassport" value="{{ $application->photoofpassport }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <input type="hidden" id="aspectRatio" name="aspectRatio">
                                                <input type="hidden" id="croppedImage" name="photopassportformat">
                                                <canvas id="cropperCanvas" style="display: none;"></canvas>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->photoofpassport, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="photoofpassport"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="photoofpassport" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal fade" id="cropImageModal" data-bs-backdrop="false"
                                    tabindex="-1" role="dialog" aria-labelledby="cropImageModalLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="cropImageModalLabel">Crop Image</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="img-container">
                                                    <img id="imageToCrop" src="" alt="Image for cropping">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-primary"
                                                    id="cropButton">Crop</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                    <div class="form-group row d-none">
                                        <label for="copynationalidentitycard"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copynationalidentitycard')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copynationalidentitycard" name="copynationalidentitycard"
                                                value="{{ $application->copynationalidentitycard }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->copynationalidentitycard, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copynationalidentitycard) }}"
                                                        alt="copynationalidentitycard"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copynationalidentitycard) }}"
                                                        alt="copynationalidentitycard"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row d-none">
                                        <label for="birth_certificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.birth_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="birth_certificate"
                                                name="birth_certificate"value="{{ $application->birth_certificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->birth_certificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->birth_certificate) }}"
                                                        alt="birth_certificate"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->birth_certificate) }}"
                                                        alt="birth_certificate" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group row d-none">
                                        <label for="parental_authorization_legalized"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.parental_authorization_legalized')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="parental_authorization_legalized"
                                                name="parental_authorization_legalized"
                                                value="{{ $application->parental_authorization_legalized }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage6"
                                                style="display: none;">Please
                                                upload a valid file.</small>


                                            <div class="col-sm-3">
                                                @if (pathinfo($application->parental_authorization_legalized, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->parental_authorization_legalized) }}"
                                                        alt="parental_authorization_legalized"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->parental_authorization_legalized) }}"
                                                        alt="parental_authorization_legalized"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row d-none">
                                        <label for="letterfrommedicaldoctorthedeath"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_one_parent_nationalid')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="letterfrommedicaldoctorthedeath"
                                                name="letterfrommedicaldoctorthedeath"
                                                value="{{ $application->letterfrommedicaldoctorthedeath }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="74photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>


                                            <div class="col-sm-3">
                                                @if (pathinfo($application->letterfrommedicaldoctorthedeath, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->letterfrommedicaldoctorthedeath) }}"
                                                        alt="letterfrommedicaldoctorthedeath"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->letterfrommedicaldoctorthedeath) }}"
                                                        alt="letterfrommedicaldoctorthedeath"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group row d-none">
                                        <label for="national_identity_card_parental_authorization_author"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.national_identity_card_parental_authorization_author')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="national_identity_card_parental_authorization_author"
                                                name="national_identity_card_parental_authorization_author"
                                                value="{{ $application->national_identity_card_parental_authorization_author }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage7"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->national_identity_card_parental_authorization_author, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->national_identity_card_parental_authorization_author) }}"
                                                        alt="national_identity_card_parental_authorization_author"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->national_identity_card_parental_authorization_author) }}"
                                                        alt="national_identity_card_parental_authorization_author"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row d-none">
                                        <label for="marriagecertificatenamechanging"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.marriage_certificate_name_changing') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control"
                                                id="marriagecertificatenamechanging"
                                                name="marriagecertificatenamechanging"
                                                value="{{ $application->marriagecertificatenamechanging }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage9"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->marriagecertificatenamechanging, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->marriagecertificatenamechanging) }}"
                                                        alt="marriagecertificatenamechanging"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->marriagecertificatenamechanging) }}"
                                                        alt="marriagecertificatenamechanging"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>




                                    <div class="form-group row d-none">
                                        <label for="identity_certificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.identity_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="identity_certificate" name="identity_certificate"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->identity_certificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->identity_certificate) }}"
                                                        alt="identity_certificate"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->identity_certificate) }}"
                                                        alt="identity_certificate" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row d-none">
                                        <label for="enrolment_certificate_national_identity"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.enrolment_certificate_national_identity')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="enrolment_certificate_national_identity"
                                                value="{{ $application->enrolment_certificate_national_identity }}"
                                                name="enrolment_certificate_national_identity"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->enrolment_certificate_national_identity, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->enrolment_certificate_national_identity) }}"
                                                        alt="enrolment_certificate_national_identity"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->enrolment_certificate_national_identity) }}"
                                                        alt="enrolment_certificate_national_identity"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row d-none">
                                        <label for="national_identity_cardone_parent"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.national_identity_cardone_parent')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="national_identity_cardone_parent"
                                                name="national_identity_cardone_parent"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage5"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->national_identity_cardone_parent, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->national_identity_cardone_parent) }}"
                                                        alt="national_identity_cardone_parent"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->national_identity_cardone_parent) }}"
                                                        alt="national_identity_cardone_parent"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <!-- here script is show upload field with the conditon of pasport service and lasier  -->
                                    <script>
                                        document.addEventListener("DOMContentLoaded", function() {
                                            const ageSelect = document.getElementById("age");
                                            const nationalIdSelect = document.getElementById("national_id");
                                            const photoOfPassportField = document.getElementById("photopassportformat").parentElement.parentElement;
                                            const copyNationalIdentityCardField = document.getElementById("copynationalidentitycard").parentElement
                                                .parentElement;
                                            const birthCertificateField = document.getElementById("birth_certificate").parentElement.parentElement;
                                            const parentalAuthorizationLegalizedField = document.getElementById("parental_authorization_legalized")
                                                .parentElement.parentElement;
                                            const nationalidentitycardparentalauthorizationauthorField = document.getElementById(
                                                "national_identity_card_parental_authorization_author").parentElement.parentElement;
                                            const identityCertificateField = document.getElementById("identity_certificate").parentElement
                                                .parentElement;
                                            const enrolmentNationalIdentityField = document.getElementById(
                                                "enrolment_certificate_national_identity").parentElement.parentElement;
                                            const nationalIdentityParentField = document.getElementById("national_identity_cardone_parent")
                                                .parentElement.parentElement;
                                            const marriagecertificatenamechangingField = document.getElementById("marriagecertificatenamechanging")
                                                .parentElement.parentElement;
                                            const copyconsulatecardField = document.getElementById("copyconsulatecard")
                                                .parentElement.parentElement;
                                            const letterfrommedicaldoctorthedeathField = document.getElementById("letterfrommedicaldoctorthedeath")
                                                .parentElement.parentElement;

                                            function updateFieldsVisibility() {

                                                if (ageSelect.value === "18 years old and Plus" && nationalIdSelect.value === "yes") {

                                                    // Show the fields
                                                    photoOfPassportField.classList.remove("d-none");
                                                    copyNationalIdentityCardField.classList.remove("d-none");
                                                    birthCertificateField.classList.remove("d-none");
                                                    marriagecertificatenamechangingField.classList.remove("d-none");
                                                    copyconsulatecardField.classList.remove("d-none");
                                                    identityCertificateField.classList.remove("d-none");
                                                    letterfrommedicaldoctorthedeathField.classList.remove("d-none");

                                                    // Hide the other fields
                                                    enrolmentNationalIdentityField.classList.add("d-none");
                                                    nationalIdentityParentField.classList.add("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.add("d-none");
                                                    parentalAuthorizationLegalizedField.classList.add("d-none");

                                                } else if (ageSelect.value === "18 years old and Plus" && nationalIdSelect.value === "no") {
                                                    photoOfPassportField.classList.remove("d-none");
                                                    identityCertificateField.classList.remove("d-none");
                                                    birthCertificateField.classList.remove("d-none");
                                                    copyNationalIdentityCardField.classList.add("d-none");
                                                    copyconsulatecardField.classList.remove("d-none");
                                                    marriagecertificatenamechangingField.classList.remove("d-none");

                                                    enrolmentNationalIdentityField.classList.remove("d-none");
                                                    nationalIdentityParentField.classList.remove("d-none");
                                                    parentalAuthorizationLegalizedField.classList.add("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.add("d-none")

                                                } else if (ageSelect.value === "16 – 17 years old" && nationalIdSelect.value === "yes") {
                                                    photoOfPassportField.classList.remove("d-none");
                                                    copyNationalIdentityCardField.classList.remove("d-none");
                                                    birthCertificateField.classList.remove("d-none");
                                                    parentalAuthorizationLegalizedField.classList.remove("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.remove("d-none");
                                                    copyconsulatecardField.classList.remove("d-none");
                                                    identityCertificateField.classList.remove("d-none");

                                                    marriagecertificatenamechangingField.classList.add("d-none");
                                                    enrolmentNationalIdentityField.classList.add("d-none");
                                                    nationalIdentityParentField.classList.add("d-none");

                                                } else if (ageSelect.value === "16 – 17 years old" && nationalIdSelect.value === "no") {
                                                    photoOfPassportField.classList.remove("d-none");
                                                    parentalAuthorizationLegalizedField.classList.remove("d-none");
                                                    copyconsulatecardField.classList.remove("d-none");
                                                    birthCertificateField.classList.remove("d-none");
                                                    identityCertificateField.classList.remove("d-none");
                                                    enrolmentNationalIdentityField.classList.remove("d-none");
                                                    nationalIdentityParentField.classList.remove("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.remove("d-none");

                                                    copyNationalIdentityCardField.classList.add("d-none");
                                                    marriagecertificatenamechangingField.classList.add("d-none");


                                                } else if (ageSelect.value === "14 – 15 years old") {
                                                    photoOfPassportField.classList.remove("d-none");
                                                    birthCertificateField.classList.remove("d-none");
                                                    identityCertificateField.classList.remove("d-none");
                                                    parentalAuthorizationLegalizedField.classList.remove("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.remove("d-none");

                                                    enrolmentNationalIdentityField.classList.add("d-none");
                                                    nationalIdentityParentField.classList.add("d-none");
                                                    copyNationalIdentityCardField.classList.add("d-none");

                                                } else {
                                                    photoOfPassportField.classList.remove("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.remove("d-none");
                                                    birthCertificateField.classList.remove("d-none");
                                                    parentalAuthorizationLegalizedField.classList.remove("d-none");

                                                    enrolmentNationalIdentityField.classList.add("d-none");
                                                    nationalIdentityParentField.classList.add("d-none");
                                                    copyNationalIdentityCardField.classList.add("d-none");
                                                    identityCertificateField.classList.add("d-none");
                                                }
                                            }


                                            // Initial visibility
                                            updateFieldsVisibility();

                                            ageSelect.addEventListener("change", updateFieldsVisibility);
                                            nationalIdSelect.addEventListener("change",
                                                updateFieldsVisibility);
                                        });
                                    </script>
                                @elseif ($application->service_selected == 7 && $application->sub_service == '64')
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="form-group row d-none">
                                        <label for="photoofpassport"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.passportphoto')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="photoValidationMessage1"
                                                name="photoofpassport" value="{{ $application->photoofpassport }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <input type="hidden" id="aspectRatio" name="aspectRatio">
                                                <input type="hidden" id="croppedImage" name="photopassportformat">
                                                <canvas id="cropperCanvas" style="display: none;"></canvas>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->photoofpassport, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="photoofpassport"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="photoofpassport" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal fade" id="cropImageModal" data-bs-backdrop="false"
                                    tabindex="-1" role="dialog" aria-labelledby="cropImageModalLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="cropImageModalLabel">Crop Image</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="img-container">
                                                    <img id="imageToCrop" src="" alt="Image for cropping">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-primary"
                                                    id="cropButton">Crop</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                    <div class="form-group row d-none">
                                        <label for="copynationalidentitycard"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_expired_biometric_passport')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copynationalidentitycard" name="copynationalidentitycard"
                                                value="{{ $application->copynationalidentitycard }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->copynationalidentitycard, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copynationalidentitycard) }}"
                                                        alt="copynationalidentitycard"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copynationalidentitycard) }}"
                                                        alt="copynationalidentitycard"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    {{-- <div class="form-group row d-none">
                                        <label for="birth_certificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.birth_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="birth_certificate"
                                                name="birth_certificate"value="{{ $application->birth_certificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->birth_certificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->birth_certificate) }}"
                                                        alt="birth_certificate"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->birth_certificate) }}"
                                                        alt="birth_certificate" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div> --}}


                                    <div class="form-group row d-none">
                                        <label for="parental_authorization_legalized"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.parental_authorization_legalized')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="parental_authorization_legalized"
                                                name="parental_authorization_legalized"
                                                value="{{ $application->parental_authorization_legalized }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage6"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->parental_authorization_legalized, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->parental_authorization_legalized) }}"
                                                        alt="parental_authorization_legalized"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->parental_authorization_legalized) }}"
                                                        alt="parental_authorization_legalized"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group row d-none">
                                        <label for="national_identity_card_parental_authorization_author"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.national_identity_card_parental_authorization_author')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="national_identity_card_parental_authorization_author"
                                                name="national_identity_card_parental_authorization_author"
                                                value="{{ $application->national_identity_card_parental_authorization_author }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage7"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->national_identity_card_parental_authorization_author, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->national_identity_card_parental_authorization_author) }}"
                                                        alt="national_identity_card_parental_authorization_author"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->national_identity_card_parental_authorization_author) }}"
                                                        alt="national_identity_card_parental_authorization_author"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    {{-- <div class="form-group row d-none">
                                        <label for="marriagecertificatenamechanging"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.marriage_certificate_name_changing') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control"
                                                id="marriagecertificatenamechanging"
                                                name="marriagecertificatenamechanging"
                                                value="{{ $application->marriagecertificatenamechanging }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage9"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->marriagecertificatenamechanging, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->marriagecertificatenamechanging) }}"
                                                        alt="marriagecertificatenamechanging"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->marriagecertificatenamechanging) }}"
                                                        alt="marriagecertificatenamechanging"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div> --}}
                                    {{-- <div class="form-group row d-none">
                                        <label for="identity_certificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.identity_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="identity_certificate" name="identity_certificate"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->identity_certificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->identity_certificate) }}"
                                                        alt="identity_certificate"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->identity_certificate) }}"
                                                        alt="identity_certificate" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div> --}}
                                    <div class="form-group row d-none">
                                        <label for="enrolment_certificate_national_identity"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.enrolment_certificate_national_identity')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="enrolment_certificate_national_identity"
                                                value="{{ $application->enrolment_certificate_national_identity }}"
                                                name="enrolment_certificate_national_identity"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->enrolment_certificate_national_identity, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->enrolment_certificate_national_identity) }}"
                                                        alt="enrolment_certificate_national_identity"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->enrolment_certificate_national_identity) }}"
                                                        alt="enrolment_certificate_national_identity"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row d-none">
                                        <label for="national_identity_cardone_parent"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.national_identity_cardone_parent')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="national_identity_cardone_parent"
                                                name="national_identity_cardone_parent"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage5"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->national_identity_cardone_parent, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->national_identity_cardone_parent) }}"
                                                        alt="national_identity_cardone_parent"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->national_identity_cardone_parent) }}"
                                                        alt="national_identity_cardone_parent"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <!-- here script is show upload field with the conditon of pasport service and lasier  -->
                                    <script>
                                        document.addEventListener("DOMContentLoaded", function() {
                                            const ageSelect = document.getElementById("age");
                                            const nationalIdSelect = document.getElementById("national_id");
                                            const photoOfPassportField = document.getElementById("photoofpassport").parentElement.parentElement;
                                            const copyNationalIdentityCardField = document.getElementById("copynationalidentitycard").parentElement
                                                .parentElement;
                                            // const birthCertificateField = document.getElementById("birth_certificate").parentElement.parentElement;
                                            const parentalAuthorizationLegalizedField = document.getElementById("parental_authorization_legalized")
                                                .parentElement.parentElement;
                                            const nationalidentitycardparentalauthorizationauthorField = document.getElementById(
                                                "national_identity_card_parental_authorization_author").parentElement.parentElement;
                                            // const identityCertificateField = document.getElementById("identity_certificate").parentElement
                                            //     .parentElement;
                                            const enrolmentNationalIdentityField = document.getElementById(
                                                "enrolment_certificate_national_identity").parentElement.parentElement;
                                            const nationalIdentityParentField = document.getElementById("national_identity_cardone_parent")
                                                .parentElement.parentElement;
                                            // const marriagecertificatenamechangingField = document.getElementById("marriagecertificatenamechanging")
                                            //     .parentElement.parentElement;
                                            const copyconsulatecardField = document.getElementById("copyconsulatecard")
                                                .parentElement.parentElement;

                                            function updateFieldsVisibility() {
                                                if (ageSelect.value === "18 years old and Plus" && nationalIdSelect.value === "yes") {
                                                    // Show the fields
                                                    photoOfPassportField.classList.remove("d-none");
                                                    copyNationalIdentityCardField.classList.remove("d-none");
                                                    // birthCertificateField.classList.remove("d-none");
                                                    // marriagecertificatenamechangingField.classList.remove("d-none");
                                                    copyconsulatecardField.classList.remove("d-none");
                                                    // identityCertificateField.classList.remove("d-none");
                                                    // Hide the other fields

                                                    enrolmentNationalIdentityField.classList.add("d-none");
                                                    nationalIdentityParentField.classList.add("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.add("d-none");
                                                    parentalAuthorizationLegalizedField.classList.add("d-none");

                                                } else if (ageSelect.value === "18 years old and Plus" && nationalIdSelect.value === "no") {
                                                    photoOfPassportField.classList.remove("d-none");
                                                    // identityCertificateField.classList.remove("d-none");
                                                    // birthCertificateField.classList.remove("d-none");
                                                    copyNationalIdentityCardField.classList.add("d-none");
                                                    copyconsulatecardField.classList.remove("d-none");
                                                    // marriagecertificatenamechangingField.classList.remove("d-none");

                                                    enrolmentNationalIdentityField.classList.remove("d-none");
                                                    nationalIdentityParentField.classList.remove("d-none");
                                                    parentalAuthorizationLegalizedField.classList.add("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.add("d-none")

                                                } else if (ageSelect.value === "16 – 17 years old" && nationalIdSelect.value === "yes") {
                                                    photoOfPassportField.classList.remove("d-none");
                                                    copyNationalIdentityCardField.classList.remove("d-none");
                                                    // birthCertificateField.classList.remove("d-none");
                                                    parentalAuthorizationLegalizedField.classList.remove("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.remove("d-none");
                                                    copyconsulatecardField.classList.remove("d-none");
                                                    // identityCertificateField.classList.remove("d-none");

                                                    // marriagecertificatenamechangingField.classList.add("d-none");
                                                    enrolmentNationalIdentityField.classList.add("d-none");
                                                    nationalIdentityParentField.classList.add("d-none");

                                                } else if (ageSelect.value === "16 – 17 years old" && nationalIdSelect.value === "no") {
                                                    photoOfPassportField.classList.remove("d-none");
                                                    parentalAuthorizationLegalizedField.classList.remove("d-none");
                                                    copyconsulatecardField.classList.remove("d-none");
                                                    // birthCertificateField.classList.remove("d-none");
                                                    // identityCertificateField.classList.remove("d-none");
                                                    enrolmentNationalIdentityField.classList.remove("d-none");
                                                    nationalIdentityParentField.classList.remove("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.remove("d-none");
                                                    parentalAuthorizationLegalizedField.classList.remove("d-none");

                                                    copyNationalIdentityCardField.classList.add("d-none");
                                                    // marriagecertificatenamechangingField.classList.add("d-none");


                                                } else if (ageSelect.value === "14 – 15 years old") {
                                                    photoOfPassportField.classList.remove("d-none");
                                                    copyNationalIdentityCardField.classList.add("d-none");
                                                    // birthCertificateField.classList.remove("d-none");
                                                    // identityCertificateField.classList.remove("d-none");
                                                    parentalAuthorizationLegalizedField.classList.remove("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.remove("d-none");
                                                    enrolmentNationalIdentityField.classList.add("d-none");
                                                    nationalIdentityParentField.classList.add("d-none");

                                                } else {
                                                    photoOfPassportField.classList.remove("d-none");
                                                    copyNationalIdentityCardField.classList.add("d-none");
                                                    // birthCertificateField.classList.remove("d-none");
                                                    parentalAuthorizationLegalizedField.classList.remove("d-none");
                                                    // identityCertificateField.classList.add("d-none");
                                                    enrolmentNationalIdentityField.classList.add("d-none");
                                                    nationalIdentityParentField.classList.add("d-none");
                                                    nationalidentitycardparentalauthorizationauthorField.classList.remove("d-none");

                                                }
                                            }

                                            // Initial visibility
                                            updateFieldsVisibility();

                                            ageSelect.addEventListener("change", updateFieldsVisibility);
                                            nationalIdSelect.addEventListener("change",
                                                updateFieldsVisibility);
                                        });
                                    </script>

                                    <!-- when user select consulate_services and sub service io human_remains id is 74 -->
                                @elseif ($application->service_selected == 4 && $application->sub_service == '74')
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for="deathcertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.death_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="deathcertificate"
                                                name="deathcertificate" value="{{ $application->deathcertificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="74photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->deathcertificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->deathcertificate) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->deathcertificate) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="translateddeathcertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.translated_death_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="translateddeathcertificate" name="translateddeathcertificate"
                                                value="{{ $application->translateddeathcertificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="74photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->translateddeathcertificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->translateddeathcertificate) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->translateddeathcertificate) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="affidavitofembalming"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.affidavit_of_embalming')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="affidavitofembalming" name="affidavitofembalming"
                                                value="{{ $application->affidavitofembalming }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="74photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->affidavitofembalming, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->affidavitofembalming) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->affidavitofembalming) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="letterfrommedicaldoctorthedeath"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.letter_from_medical_doctor_the_death')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="letterfrommedicaldoctorthedeath"
                                                name="letterfrommedicaldoctorthedeath"
                                                value="{{ $application->letterfrommedicaldoctorthedeath }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="74photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->letterfrommedicaldoctorthedeath, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->letterfrommedicaldoctorthedeath) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->letterfrommedicaldoctorthedeath) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    {{-- <div class="form-group row">
                                        <label for="idcard"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.id_card')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="idcard"
                                                name="idcard" value="{{ $application->idcard }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="74photoValidationMessage5"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->idcard, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->idcard) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->idcard) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div> --}}

                                    <div class="form-group row">
                                        <label for="letterauthorizingembassyshipremainscard"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.letter_authorizing_embassy_ship_remainscard')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="letterauthorizingembassyshipremainscard" name="idcard"
                                                value="{{ $application->letterauthorizingembassyshipremainscard }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="74photoValidationMessage6"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->letterauthorizingembassyshipremainscard, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->letterauthorizingembassyshipremainscard) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->letterauthorizingembassyshipremainscard) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>



                                    <div class="form-group row">
                                        <label for="flightreservation"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.flight_reservation')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="flightreservation"
                                                name="flightreservation" value="{{ $application->flightreservation }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="74photoValidationMessage8"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->flightreservation, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->flightreservation) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->flightreservation) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="deceased-section">
                                        <h5>@lang('messages.deceased')</h5>
                                        <div class="form-group row">
                                            <label for="validpassport"
                                                class="col-sm-4 col-form-label text-end">@lang('messages.valid_passport') :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" id="validpassport"
                                                    name="validpassport" value="{{ $application->validpassport }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="74photoValidationMessage9"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">

                                                    @if (pathinfo($application->validpassport, PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $application->validpassport) }}"
                                                            alt="image" style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $application->validpassport) }}"
                                                            alt="image" style="width: 100px; height: 100px;">
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="visanecessary"
                                                class="col-sm-4 col-form-label text-end">@lang('messages.visa_necessary') :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" id="visanecessary"
                                                    name="visanecessary" value="{{ $application->visanecessary }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="74photoValidationMessage10"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">

                                                    @if (pathinfo($application->visanecessary, PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $application->visanecessary) }}"
                                                            alt="image" style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $application->visanecessary) }}"
                                                            alt="image" style="width: 100px; height: 100px;">
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label for="birthcertificateidcard"
                                                class="col-sm-4 col-form-label text-end">@lang('messages.birth_certificate_idcard')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="birthcertificateidcard" name="birthcertificateidcard"
                                                    value="{{ $application->birthcertificateidcard }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="74photoValidationMessage11"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">

                                                    @if (pathinfo($application->birthcertificateidcard, PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $application->birthcertificateidcard) }}"
                                                            alt="image" style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $application->birthcertificateidcard) }}"
                                                            alt="image" style="width: 100px; height: 100px;">
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- when user select consulate_services and sub service io Life Certificate id is 38 -->
                                @elseif ($application->service_selected == 4 && ($application->sub_service == '38' || $application->sub_service == '75'))
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <!-- if select CGRAE -->
                                    <div class="form-group row">
                                        <label for="retirementenrolementcertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.retirement_enrolement_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="retirementenrolementcertificate"
                                                name="retirementenrolementcertificate"
                                                value="{{ $application->retirementenrolementcertificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="38photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->retirementenrolementcertificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->retirementenrolementcertificate) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->retirementenrolementcertificate) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="letterofretirement"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.letter_of_retirement')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="letterofretirement" name="letterofretirement"
                                                value="{{ $application->letterofretirement }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="38photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->letterofretirement, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->letterofretirement) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->letterofretirement) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <!-- if select CNPS -->
                                    <div class="form-group row">
                                        <label for="cnpsbook"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.cnps_book')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="cnpsbook"
                                                name="cnpsbook" value="{{ $application->cnpsbook }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="38photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->cnpsbook, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->cnpsbook) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->cnpsbook) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="proofoccupationbeforeretirement"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.proof_occupation_before_retirement')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="proofoccupationbeforeretirement"
                                                name="proofoccupationbeforeretirement"
                                                value="{{ $application->proofoccupationbeforeretirement }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="38photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->proofoccupationbeforeretirement, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->proofoccupationbeforeretirement) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->proofoccupationbeforeretirement) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            const cgraeRadio = document.querySelector('input[name="cgrae_cnps"][value="cgrae"]');
                                            const cnpsRadio = document.querySelector('input[name="cgrae_cnps"][value="cnps"]');
                                            const retirementenrolementcertificateField = document.getElementById("retirementenrolementcertificate")
                                                .parentElement.parentElement;
                                            const letterofretirementField = document.getElementById("letterofretirement").parentElement
                                                .parentElement;
                                            const cnpsbookField = document.getElementById("cnpsbook").parentElement.parentElement;
                                            const proofoccupationbeforeretirementField = document.getElementById("proofoccupationbeforeretirement")
                                                .parentElement.parentElement;

                                            function updateFieldsVisibility() {
                                                if (cgraeRadio.checked) {
                                                    retirementenrolementcertificateField.classList.remove('d-none');
                                                    letterofretirementField.classList.remove('d-none');

                                                    cnpsbookField.classList.add('d-none');
                                                    proofoccupationbeforeretirementField.classList.add('d-none');
                                                } else if (cnpsRadio.checked) {
                                                    retirementenrolementcertificateField.classList.add('d-none');
                                                    letterofretirementField.classList.add('d-none');

                                                    cnpsbookField.classList.remove('d-none');
                                                    proofoccupationbeforeretirementField.classList.remove('d-none');
                                                }
                                            }
                                            updateFieldsVisibility();

                                            // Add event listeners to the radio buttons
                                            cgraeRadio.addEventListener('change', updateFieldsVisibility);
                                            cnpsRadio.addEventListener('change', updateFieldsVisibility);
                                        });
                                    </script>


                                    <div class="form-group row">
                                        <label for="photoofpassport"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.passportphoto')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="photopassportformat"
                                                name="photoofpassport" value="{{ $application->photoofpassport }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <input type="hidden" id="aspectRatio" name="aspectRatio">
                                                <input type="hidden" id="croppedImage" name="photopassportformat">
                                                <canvas id="cropperCanvas" style="display: none;"></canvas>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->photoofpassport, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal fade" id="cropImageModal" data-bs-backdrop="false"
                                    tabindex="-1" role="dialog" aria-labelledby="cropImageModalLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="cropImageModalLabel">Crop Image</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="img-container">
                                                    <img id="imageToCrop" src="" alt="Image for cropping">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-primary"
                                                    id="cropButton">Crop</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_of_password_cni')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copy_of_password_cni" name="copy_of_password_cni"
                                                value="{{ $applicationInfo ? $applicationInfo->copy_of_password_cni : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($applicationInfo ? $applicationInfo->copy_of_password_cni : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->copy_of_password_cni) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->copy_of_password_cni) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row ">
                                        <label for="copy_of_parental_document"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_of_parental_document')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copy_of_parental_document" name="copy_of_parental_document"
                                                value="{{ $applicationInfo ? $applicationInfo->copy_of_parental_document : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage7"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($applicationInfo ? $applicationInfo->copy_of_parental_document : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->copy_of_parental_document) }}"
                                                        alt="copy_of_parental_document"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->copy_of_parental_document) }}"
                                                        alt="copy_of_parental_document"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="proofofaddress"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residence')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="proofofaddress"
                                                name="proofofaddress" value="{{ $application->proofofaddress }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->proofofaddress, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->proofofaddress) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->proofofaddress) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <!-- add  one field more and id is 75  -->
                                    @if ($application->service_selected == 4 && $application->sub_service == '75')
                                        <div class="form-group row">
                                            <label for="spousedeathcertificate"
                                                class="col-sm-4 col-form-label text-end">@lang('messages.spouse_death_certificate')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="spousedeathcertificate" name="spousedeathcertificate"
                                                    value="{{ $application->spousedeathcertificate }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="38photoValidationMessage5"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">

                                                    @if (pathinfo($application->spousedeathcertificate, PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $application->spousedeathcertificate) }}"
                                                            alt="image" style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $application->spousedeathcertificate) }}"
                                                            alt="image" style="width: 100px; height: 100px;">
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <!-- when user select consulate_services 4 and sub service io Life Certificate id nd 76  -->
                                @elseif ($application->service_selected == 4 && $application->sub_service == '76')
                                    @if ($application->embassies == 35 || $application->embassies == 36)


                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.photo_of_passport')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="photoofpassport"
                                                name="photoofpassport" value="{{ $application->photoofpassport }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->photoofpassport, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row ">
                                        <label for="birth_certificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.mise_à_jour')<span
                                                aria-hidden="true"></span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="birth_certificate"
                                                name="birth_certificate"value="{{ $application->birth_certificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->birth_certificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->birth_certificate) }}"
                                                        alt="birth_certificate"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->birth_certificate) }}"
                                                        alt="birth_certificate" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row ">
                                        <label for="marriagecertificatenamechanging"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.marriage_certificate') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control"
                                                id="marriagecertificatenamechanging"
                                                name="marriagecertificatenamechanging"
                                                value="{{ $application->marriagecertificatenamechanging }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage9"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->marriagecertificatenamechanging, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->marriagecertificatenamechanging) }}"
                                                        alt="marriagecertificatenamechanging"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->marriagecertificatenamechanging) }}"
                                                        alt="marriagecertificatenamechanging"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="proofofaddress"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residence')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="proofofaddress"
                                                name="proofofaddress" value="{{ $application->proofofaddress }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->proofofaddress, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->proofofaddress) }}"
                                                        alt="proofofaddress"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->proofofaddress) }}"
                                                        alt="proofofaddress" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="spousedeathcertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.spouse_death_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="spousedeathcertificate" name="spousedeathcertificate"
                                                value="{{ $application->spousedeathcertificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="38photoValidationMessage5"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->spousedeathcertificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->spousedeathcertificate) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->spousedeathcertificate) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="copyofpassportIDcardwitness1"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_of_passportID_card_witness1')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copyofpassportIDcardwitness1" name="copyofpassportIDcardwitness1"
                                                value="{{ $application->copyofpassportIDcardwitness1 }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="76photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->copyofpassportIDcardwitness1, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copyofpassportIDcardwitness1) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copyofpassportIDcardwitness1) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <label for="proofofresidencewitness1"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residence_witness1')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="proofofresidencewitness1" name="proofofresidencewitness1"
                                                value="{{ $application->proofofresidencewitness1 }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="76photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->proofofresidencewitness1, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->proofofresidencewitness1) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->proofofresidencewitness1) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="copyofpassportIDcardwitness2"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_of_passportID_card_witness2')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copyofpassportIDcardwitness2" name="copyofpassportIDcardwitness2"
                                                value="{{ $application->copyofpassportIDcardwitness2 }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="76photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->copyofpassportIDcardwitness2, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copyofpassportIDcardwitness2) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copyofpassportIDcardwitness2) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="proofofresidencewitness2"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residence_witness2')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="proofofresidencewitness2" name="proofofresidencewitness2"
                                                value="{{ $application->proofofresidencewitness2 }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="76photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->proofofresidencewitness2, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->proofofresidencewitness2) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->proofofresidencewitness2) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <!--upload document when user select Civil Document 2 and sub service io transcript Birth Certificate  id 61  -->
                                @elseif ($application->service_selected == 2 && $application->sub_service == '61')
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for="copybirthcertificatechildversion"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_of_birth_certificate_child_version')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copybirthcertificatechildversion"
                                                name="copybirthcertificatechildversion"
                                                value="{{ $application->copybirthcertificatechildversion }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="61photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->copybirthcertificatechildversion, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copybirthcertificatechildversion) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copybirthcertificatechildversion) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="ivorianparentcopiespassportbirthcertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.requester_copies_passport_birth_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="ivorianparentcopiespassportbirthcertificate"
                                                name="ivorianparentcopiespassportbirthcertificate"
                                                value="{{ $application->ivorianparentcopiespassportbirthcertificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="61photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->ivorianparentcopiespassportbirthcertificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->ivorianparentcopiespassportbirthcertificate) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->ivorianparentcopiespassportbirthcertificate) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="nonivorianparentscopiespassportbirthcertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.spouse_copies_passport_birth_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="nonivorianparentscopiespassportbirthcertificate"
                                                name="nonivorianparentscopiespassportbirthcertificate"
                                                value="{{ $application->nonivorianparentscopiespassportbirthcertificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="61photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->nonivorianparentscopiespassportbirthcertificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->nonivorianparentscopiespassportbirthcertificate) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->nonivorianparentscopiespassportbirthcertificate) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="familybookonlyforspouses"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.family_book_only_for_spouses')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="familybookonlyforspouses" name="familybookonlyforspouses"
                                                value="{{ $application->familybookonlyforspouses }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="61photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->familybookonlyforspouses, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->familybookonlyforspouses) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->familybookonlyforspouses) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="nationalitycertificateivorianparent"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.nationality_certificate_ivorian_parent')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="nationalitycertificateivorianparent"
                                                name="nationalitycertificateivorianparent"
                                                value="{{ $application->nationalitycertificateivorianparent }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="61photoValidationMessage5"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->nationalitycertificateivorianparent, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->nationalitycertificateivorianparent) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->nationalitycertificateivorianparent) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <!--- when service is 2 and sub service is 15  -->
                                @elseif ($application->service_selected == 2 && ($application->sub_service == '17' || $application->sub_service == '15'))
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for="copymarriagecertificatenotorizedtranslatedfrenchversion"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_marriage_certificate_notorized_translated_french_version')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copymarriagecertificatenotorizedtranslatedfrenchversion"
                                                name="copymarriagecertificatenotorizedtranslatedfrenchversion"
                                                value="{{ $application->copymarriagecertificatenotorizedtranslatedfrenchversion }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="15photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->copymarriagecertificatenotorizedtranslatedfrenchversion, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copymarriagecertificatenotorizedtranslatedfrenchversion) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copymarriagecertificatenotorizedtranslatedfrenchversion) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="ivorianspousepassportuptodatebirthcertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.ivorian_spouse_passport_uptodate_birth_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="ivorianspousepassportuptodatebirthcertificate"
                                                name="ivorianspousepassportuptodatebirthcertificate"
                                                value="{{ $application->ivorianspousepassportuptodatebirthcertificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="15photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->ivorianspousepassportuptodatebirthcertificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->ivorianspousepassportuptodatebirthcertificate) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->ivorianspousepassportuptodatebirthcertificate) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="nonivorianspousepassportuptodatebirthcertificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.nonivorian_spouse_passport_uptodate_birth_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="nonivorianspousepassportuptodatebirthcertificate"
                                                name="nonivorianspousepassportuptodatebirthcertificate"
                                                value="{{ $application->nonivorianspousepassportuptodatebirthcertificate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="15photoValidationMessage5"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->nonivorianspousepassportuptodatebirthcertificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->nonivorianspousepassportuptodatebirthcertificate) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->nonivorianspousepassportuptodatebirthcertificate) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="temoin1passportuptodate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.temoin1_passport_uptodate_birthcertificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="temoin1passportuptodate" name="temoin1passportuptodate"
                                                value="{{ $application->temoin1passportuptodate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="15photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->temoin1passportuptodate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->temoin1passportuptodate) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->temoin1passportuptodate) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for="temoin2passportuptodate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.temoin2_passport_uptodate_birthcertificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="temoin2passportuptodate" name="temoin2passportuptodate"
                                                value="{{ $application->temoin2passportuptodate }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="15photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->temoin2passportuptodate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->temoin2passportuptodate) }}"
                                                        alt="image" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->temoin2passportuptodate) }}"
                                                        alt="image" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @elseif ($application->sub_service == '70')
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.passportphoto')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="photopassportformat"
                                                name="photoofpassport" value="{{ $application->photoofpassport }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <input type="hidden" id="aspectRatio" name="aspectRatio">
                                                <input type="hidden" id="croppedImage" name="photopassportformat">
                                                <canvas id="cropperCanvas" style="display: none;"></canvas>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->photoofpassport, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="modal fade" id="cropImageModal" data-bs-backdrop="false"
                                    tabindex="-1" role="dialog" aria-labelledby="cropImageModalLabel"
                                    aria-hidden="true">
                                    <div class="modal-dialog modal-lg" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="cropImageModalLabel">Crop Image</h5>
                                                <button type="button" class="close" data-dismiss="modal"
                                                    aria-label="Close">
                                                    <span aria-hidden="true">&times;</span>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="img-container">
                                                    <img id="imageToCrop" src="" alt="Image for cropping">
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-secondary"
                                                    data-dismiss="modal">Cancel</button>
                                                <button type="button" class="btn btn-primary"
                                                    id="cropButton">Crop</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_death_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copy_death_certificate" name="copy_death_certificate"
                                                value="{{ $applicationInfo ? $applicationInfo->copy_death_certificate : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->copy_death_certificate : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->copy_death_certificate) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->copy_death_certificate) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_birth_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copy_birth_certificate" name="copy_birth_certificate"
                                                value="{{ $applicationInfo ? $applicationInfo->copy_birth_certificate : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->copy_birth_certificate : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->copy_birth_certificate) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->copy_birth_certificate) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_cni_biometric')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copy_cni_biometric" name="copy_cni_biometric"
                                                value="{{ $applicationInfo ? $applicationInfo->copy_cni_biometric : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->copy_cni_biometric : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->copy_cni_biometric) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->copy_cni_biometric) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_citizenship_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copy_citizenship_certificate" name="copy_citizenship_certificate"
                                                value="{{ $applicationInfo ? $applicationInfo->copy_citizenship_certificate : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->copy_citizenship_certificate : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->copy_citizenship_certificate) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->copy_citizenship_certificate) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @elseif ($application->sub_service == 69)
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please
                                                    upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_transcript_death_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copy_transcript_death_certificate"
                                                name="copy_transcript_death_certificate"
                                                value="{{ $applicationInfo ? $applicationInfo->copy_transcript_death_certificate : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->copy_transcript_death_certificate : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->copy_transcript_death_certificate) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->copy_transcript_death_certificate) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.application_death_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="application_death_certificate" name="application_death_certificate"
                                                value="{{ $applicationInfo ? $applicationInfo->application_death_certificate : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->application_death_certificate : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->application_death_certificate) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->application_death_certificate) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @elseif ($application->sub_service == 16)
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.application_marriage_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="application_marriage_certificate"
                                                name="application_marriage_certificate"
                                                value="{{ $applicationInfo ? $applicationInfo->application_marriage_certificate : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->application_marriage_certificate : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->application_marriage_certificate) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->application_marriage_certificate) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_marriage_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copy_marriage_certificate" name="copy_marriage_certificate"
                                                value="{{ $applicationInfo ? $applicationInfo->copy_marriage_certificate : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->copy_marriage_certificate : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->copy_marriage_certificate) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->copy_marriage_certificate) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @elseif ($application->sub_service == 20)
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.application_birth_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="application_birth_certificate" name="application_birth_certificate"
                                                value="{{ $applicationInfo ? $applicationInfo->application_birth_certificate : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->application_birth_certificate : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->application_birth_certificate) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->application_birth_certificate) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_transcript_birth_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="copy_transcript_birth_certificate"
                                                name="copy_transcript_birth_certificate"
                                                value="{{ $applicationInfo ? $applicationInfo->copy_transcript_birth_certificate : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->copy_transcript_birth_certificate : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->copy_transcript_birth_certificate) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->copy_transcript_birth_certificate) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @elseif ($application->sub_service == 77 || $application->sub_service == 78 || $application->sub_service == 79)
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.birthextract')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="birthextract"
                                                name="birthextract" value="{{ $application->birthextract }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->birthextract, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->birthextract) }}"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->birthextract) }}"
                                                        style="width: 100px; height: 100px;">
                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for="identity_certificate"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.citizenship_identity_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="identity_certificate" name="identity_certificate"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->identity_certificate, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->identity_certificate) }}"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->identity_certificate) }}"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @elseif ($application->sub_service == 80)
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.document_notarize')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="document_notarize"
                                                name="document_notarize"
                                                value="{{ $applicationInfo ? $applicationInfo->document_notarize : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->document_notarize : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->document_notarize) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->document_notarize) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.cni_requester')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="cni_requester"
                                                name="cni_requester"
                                                value="{{ $applicationInfo ? $applicationInfo->cni_requester : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->cni_requester : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->cni_requester) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->cni_requester) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.cni_beneficiary')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="cni_beneficiary"
                                                name="cni_beneficiary"
                                                value="{{ $applicationInfo ? $applicationInfo->cni_beneficiary : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->cni_beneficiary : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->cni_beneficiary) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->cni_beneficiary) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    {{-- @elseif ($application->service_selected == 5 && $application->embassies == 35)
                                    <!-- download Fiche Paris document -->
                                    <div class="form-group row">
                                        <div class="col-md-12 mb-5">
                                            <a href="{{ asset('/assets/FicheParis.pdf') }}" class="btn btn-dark"
                                                download>@lang('messages.download_and_fill_document')</a>
                                        </div>
                                    </div>


                                    <div class="form-group row">
                                        <div class="col-sm-12">
                                            <div class="form-check"
                                                style="text-align:center; text-bold padding:5px 0 5px 0">
                                                <input class="" type="radio" name="adult_minor"
                                                    id="residentRadio" value="Adult Resident"
                                                    {{ $applicationInfo->adult_minor === 'Adult Resident' ? 'checked' : '' }}
                                                    style="width:auto; margin-left: 20px;">
                                                <label class="form-check-label"
                                                    for="inlineRadio1">@lang('messages.adult_resident')</label>

                                                <input class="" type="radio" name="adult_minor"
                                                    id="residentRadio" value="Minor"
                                                    {{ $applicationInfo->adult_minor === 'Minor' ? 'checked' : '' }}
                                                    style="width:auto; margin-left: 20px;">
                                                <label class="form-check-label"
                                                    for="inlineRadio1">@lang('messages.minor')</label>

                                                <input class="" type="radio" name="adult_minor"
                                                    id="residentRadio" value="Minor Accompanied by Association"
                                                    {{ $applicationInfo->adult_minor === 'Minor Accompanied by Association' ? 'checked' : '' }}
                                                    style="width:auto; margin-left: 20px;">
                                                <label class="form-check-label"
                                                    for="inlineRadio1">@lang('messages.minor_accompanied_association')</label>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row" id="additionalFields">
                                        <label for="photopassportformat"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.passportformatphoto')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="photopassportformat" name="photopassportformat"
                                                value="{{ $application->photopassportformat }}"
                                                accept=".png, .jpeg, .PNG, .JPEG">
                                            <small class="text-danger" id="6photoValidationMessage6"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <input type="hidden" id="aspectRatio" name="aspectRatio">
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->photopassportformat, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->photopassportformat) }}"
                                                        alt="photopassportformat"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photopassportformat) }}"
                                                        alt="photopassportformat" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row" id="additionalFields2">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.cni_citizenship_certificate')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="cni_citizenship_certificate" name="cni_citizenship_certificate"
                                                value="{{ $applicationInfo ? $applicationInfo->cni_citizenship_certificate : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="5photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->cni_citizenship_certificate : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->cni_citizenship_certificate) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->cni_citizenship_certificate) }}"
                                                        alt="cni_citizenship_certificate"
                                                        style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row" id="additionalFields3">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.birth_certificate_supplementary')<span
                                                aria-hidden="true" class="required"></span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="photoofpassport"
                                                name="photoofpassport" value="{{ $application->photoofpassport }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage1"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($application->photoofpassport, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>


                                    <div class="form-group row" id="additionalFields4">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.mariage_certificate_family_book')<span
                                                aria-hidden="true" class="required"></span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control"
                                                id="mariage_certificate_family_book"
                                                name="mariage_certificate_family_book"
                                                value="{{ $applicationInfo->mariage_certificate_family_book }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="5photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo->mariage_certificate_family_book, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->mariage_certificate_family_book) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->mariage_certificate_family_book) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row" id="additionalFields5">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.residency_card_proof')<span
                                                aria-hidden="true" class="required"></span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="residency_card_proof"
                                                name="residency_card_proof"
                                                value="{{ $applicationInfo ? $applicationInfo->residency_card_proof : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="5photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->residency_card_proof : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->residency_card_proof) }}"
                                                        alt="" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->residency_card_proof) }}"
                                                        alt="" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row" id="additionalFields6">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.proofofaddress')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="proofofaddress"
                                                name="proofofaddress" value="{{ $application->proofofaddress }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->proofofaddress, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->proofofaddress) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->proofofaddress) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif

                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row" id="additionalFields7">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.certificate_of_residency_people_hosted')<span
                                                aria-hidden="true" class="required"></span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control"
                                                id="certificate_of_residency_people_hosted"
                                                name="certificate_of_residency_people_hosted"
                                                value="{{ $applicationInfo ? $applicationInfo->certificate_of_residency_people_hosted : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="5photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->certificate_of_residency_people_hosted : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->certificate_of_residency_people_hosted) }}"
                                                        alt="" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->certificate_of_residency_people_hosted) }}"
                                                        alt="" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row" id="additionalFields8">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.application_document_filled_out')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="application_document_filled_out"
                                                name="application_document_filled_out"
                                                value="{{ $applicationInfo ? $applicationInfo->application_document_filled_out : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="5photoValidationMessage5"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->application_document_filled_out : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->application_document_filled_out) }}"
                                                        alt="" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->application_document_filled_out) }}"
                                                        alt="" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row" id="additionalFields9">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.certificate_of_loss')<span
                                                aria-hidden="true" class="required"></span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="certificate_of_loss"
                                                name="certificate_of_loss"
                                                value="{{ $applicationInfo ? $applicationInfo->certificate_of_loss : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="5photoValidationMessage6"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->certificate_of_loss : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->certificate_of_loss) }}"
                                                        alt="" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->certificate_of_loss) }}"
                                                        alt="" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row" id="additionalFields10">
                                        <label for="copyconsulatecard"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.expired_consulate_Card_renewal')<span
                                                aria-hidden="true" class="required"></span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="copyconsulatecard"
                                                name="copyconsulatecard" value="{{ $application->copyconsulatecard }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage10"
                                                style="display: none;">Please upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->copyconsulatecard, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copyconsulatecard) }}"
                                                        alt="copyconsulatecard"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copyconsulatecard) }}"
                                                        alt="copyconsulatecard" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Minor fields -->
                                    <div class="form-group row d-none" id="additionalFields11">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.birth_certificate_supplementary_judgment')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required
                                                id="birth_certificate_supplementary_judgment"
                                                name="birth_certificate_supplementary_judgment"
                                                value="{{ $applicationInfo ? $applicationInfo->birth_certificate_supplementary_judgment : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="5photoValidationMessage7"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->birth_certificate_supplementary_judgment : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->birth_certificate_supplementary_judgment) }}"
                                                        alt="" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->birth_certificate_supplementary_judgment) }}"
                                                        alt="" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row d-none" id="additionalFields12">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.parental_authorization_fathermother_identity')<span
                                                aria-hidden="true" class="required"></span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control"
                                                id="parental_authorization_fathermother_identity"
                                                name="parental_authorization_fathermother_identity"
                                                value="{{ $applicationInfo ? $applicationInfo->parental_authorization_fathermother_identity : '' }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="5photoValidationMessage7"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">

                                                @if (pathinfo($applicationInfo ? $applicationInfo->parental_authorization_fathermother_identity : '', PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $applicationInfo->parental_authorization_fathermother_identity) }}"
                                                        alt="" style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $applicationInfo->parental_authorization_fathermother_identity) }}"
                                                        alt="" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>

                                    <!-- show nd hide script -->
                                    <script>
                                        document.addEventListener('DOMContentLoaded', function() {
                                            var adultFieldValue = document.querySelector('input[name="adult_minor"]:checked').value;
                                            switchAdultFields(adultFieldValue);
                                            document.querySelectorAll('input[type=radio][name=adult_minor]').forEach(function(radio) {
                                                radio.addEventListener('change', function() {
                                                    switchAdultFields(this.value);
                                                });
                                            });

                                            function switchAdultFields(value) {
                                                if (value === 'Adult Resident') {
                                                    // show field
                                                    document.getElementById('additionalFields').classList.remove('d-none');
                                                    document.getElementById('additionalFields2').classList.remove('d-none');
                                                    document.getElementById('additionalFields3').classList.remove('d-none');
                                                    document.getElementById('additionalFields4').classList.remove('d-none');
                                                    document.getElementById('additionalFields5').classList.remove('d-none');
                                                    document.getElementById('additionalFields6').classList.remove('d-none');
                                                    document.getElementById('additionalFields7').classList.remove('d-none');
                                                    document.getElementById('additionalFields8').classList.remove('d-none');
                                                    document.getElementById('additionalFields9').classList.remove('d-none');
                                                    document.getElementById('additionalFields10').classList.remove('d-none');

                                                    // hide field 
                                                    document.getElementById('additionalFields11').classList.add('d-none');
                                                    document.getElementById('additionalFields12').classList.add('d-none');

                                                } else if (value === 'Minor') {
                                                    // show field
                                                    document.getElementById('additionalFields8').classList.remove('d-none');
                                                    document.getElementById('additionalFields').classList.remove('d-none');
                                                    document.getElementById('additionalFields11').classList.remove('d-none');
                                                    document.getElementById('additionalFields12').classList.remove('d-none');
                                                    document.getElementById('additionalFields6').classList.remove('d-none');
                                                    document.getElementById('additionalFields9').classList.remove('d-none');
                                                    document.getElementById('additionalFields10').classList.remove('d-none');


                                                    // hide field
                                                    document.getElementById('additionalFields2').classList.add('d-none');
                                                    document.getElementById('additionalFields3').classList.add('d-none');
                                                    document.getElementById('additionalFields4').classList.add('d-none');
                                                    document.getElementById('additionalFields5').classList.add('d-none');
                                                    document.getElementById('additionalFields7').classList.add('d-none');


                                                } else if (value === 'Minor Accompanied by Association') {
                                                    // show field
                                                    document.getElementById('additionalFields8').classList.remove('d-none');
                                                    document.getElementById('additionalFields').classList.remove('d-none');
                                                    document.getElementById('additionalFields11').classList.remove('d-none');
                                                    document.getElementById('additionalFields12').classList.remove('d-none');
                                                    document.getElementById('additionalFields6').classList.remove('d-none');
                                                    document.getElementById('additionalFields9').classList.remove('d-none');
                                                    document.getElementById('additionalFields10').classList.remove('d-none');

                                                    // hide field
                                                    document.getElementById('additionalFields2').classList.add('d-none');
                                                    document.getElementById('additionalFields3').classList.add('d-none');
                                                    document.getElementById('additionalFields4').classList.add('d-none');
                                                    document.getElementById('additionalFields5').classList.add('d-none');
                                                    document.getElementById('additionalFields7').classList.add('d-none');
                                                }
                                            }
                                        });
                                    </script>
                                @else --}}
                                @else
                                    @if ($application->embassies == 35 || $application->embassies == 36)
                                        <div class="form-group row">
                                            <label for=""
                                                class="col-sm-4 col-form-label text-end">@lang('messages.proof_of_residency')<span
                                                    aria-hidden="true" class="required">*</span> :</label>
                                            <div class="col-sm-6">
                                                <input type="file" class="form-control" required
                                                    id="proof_of_residency" name="proof_of_residency"
                                                    value="{{ $applicationInfo ? $applicationInfo->proof_of_residency : '' }}"
                                                    accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <small class="text-danger" id="36photoValidationMessage35"
                                                    style="display: none;">Please upload a valid file.</small>
                                                <div class="col-sm-3">
                                                    @if (pathinfo($applicationInfo ? $applicationInfo->proof_of_residency : '', PATHINFO_EXTENSION) == 'pdf')
                                                        <iframe
                                                            src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 50%; height: 100px;"></iframe>
                                                    @else
                                                        <img src="{{ asset('/storage/' . $applicationInfo->proof_of_residency) }}"
                                                            alt="proof_of_residency"
                                                            style="width: 100px; height: 100px;">
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.passportphoto')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="photopassportformat"
                                                name="photoofpassport" value="{{ $application->photoofpassport }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                                <input type="hidden" id="aspectRatio" name="aspectRatio">
                                                <input type="hidden" id="croppedImage" name="photopassportformat">
                                                <canvas id="cropperCanvas" style="display: none;"></canvas>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->photoofpassport, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->photoofpassport) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                      <!-- Modal -->
                                      <div class="modal fade" id="cropImageModal" data-bs-backdrop="false"
                                      tabindex="-1" role="dialog" aria-labelledby="cropImageModalLabel"
                                      aria-hidden="true">
                                      <div class="modal-dialog modal-lg" role="document">
                                          <div class="modal-content">
                                              <div class="modal-header">
                                                  <h5 class="modal-title" id="cropImageModalLabel">Crop Image</h5>
                                                  <button type="button" class="close" data-dismiss="modal"
                                                      aria-label="Close">
                                                      <span aria-hidden="true">&times;</span>
                                                  </button>
                                              </div>
                                              <div class="modal-body">
                                                  <div class="img-container">
                                                      <img id="imageToCrop" src="" alt="Image for cropping">
                                                  </div>
                                              </div>
                                              <div class="modal-footer">
                                                  <button type="button" class="btn btn-secondary"
                                                      data-dismiss="modal">Cancel</button>
                                                  <button type="button" class="btn btn-primary"
                                                      id="cropButton">Crop</button>
                                              </div>
                                          </div>
                                      </div>
                                  </div>



                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copyofpassport')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="copyofpassport"
                                                name="copyofpassport" value="{{ $application->copyofpassport }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage2"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->copyofpassport, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copyofpassport) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copyofpassport) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif

                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.birthextract')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="birthextract"
                                                name="birthextract" value="{{ $application->birthextract }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage3"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->birthextract, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe src="{{ asset('/storage/' . $application->birthextract) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->birthextract) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif

                                            </div>
                                        </div>
                                    </div>

                                    <div class="form-group row">
                                        <label for=""
                                            class="col-sm-4 col-form-label text-end">@lang('messages.proofofaddress')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="proofofaddress"
                                                name="proofofaddress" value="{{ $application->proofofaddress }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="photoValidationMessage4"
                                                style="display: none;">Please
                                                upload a valid file.</small>
                                            <div class="col-sm-3">
                                                @if (pathinfo($application->proofofaddress, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->proofofaddress) }}"
                                                        alt="Passport Photo"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->proofofaddress) }}"
                                                        alt="Passport Photo" style="width: 100px; height: 100px;">
                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                @endif
                                <!--consulate card upload document field to show all services -->
                                @if ($application->service_selected != 1 && $application->service_selected != 5)
                                    <div class="form-group row">
                                        <label for="copyconsulatecard"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_consulate_card')<span
                                                aria-hidden="true" class="required">*</span> :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" required id="copyconsulatecard"
                                                name="copyconsulatecard" value="{{ $application->copyconsulatecard }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage10"
                                                style="display: none;">Please upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->copyconsulatecard, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copyconsulatecard) }}"
                                                        alt="copyconsulatecard"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copyconsulatecard) }}"
                                                        alt="copyconsulatecard" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endif


                                <!-- hide Only one time when select service is 5 and sub service is 52 consulate card -->
                                {{-- @if ($application->sub_service == 52)
                                    <div class="form-group row">
                                        <label for="copyconsulatecard"
                                            class="col-sm-4 col-form-label text-end">@lang('messages.copy_consulate_card') :</label>
                                        <div class="col-sm-6">
                                            <input type="file" class="form-control" id="copyconsulatecard"
                                                name="copyconsulatecard" value="{{ $application->copyconsulatecard }}"
                                                accept=".png, .jpg, .jpeg, .gif, .pdf, .PNG, .JPG, .JPEG, .GIF, .PDF">
                                            <small class="text-danger" id="7photoValidationMessage10"
                                                style="display: none;">Please upload a valid file.</small>

                                            <div class="col-sm-3">
                                                @if (pathinfo($application->copyconsulatecard, PATHINFO_EXTENSION) == 'pdf')
                                                    <iframe
                                                        src="{{ asset('/storage/' . $application->copyconsulatecard) }}"
                                                        alt="copyconsulatecard"
                                                        style="width: 50%; height: 100px;"></iframe>
                                                @else
                                                    <img src="{{ asset('/storage/' . $application->copyconsulatecard) }}"
                                                        alt="copyconsulatecard" style="width: 100px; height: 100px;">
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                @endif --}}

                                <!-- when user select visa service and sub service is officail visa  -->
                                @if ($application->sub_service != '72' && $application->sub_service != '67')

                                    <div class="paymentsec">
                                        <center>
                                            <h3 class="text-decoration-underline">@lang('messages.payment')</h3>
                                            <p>@lang('messages.sconqrcode') <br>@lang('messages.paymentcomplete')</p>
                                        </center>
                                        <br>

                                        <div class="form-group row">
                                            <div
                                                class="col-sm-12"style="display: flex;align-items: center;justify-content: center;width: 100%;">
                                                <div
                                                    class="col-md-6"style="display: flex;justify-content: space-evenly;align-items: center">

                                                    {{-- <img src="{{ asset('/assets/image/qrcode.png') }}" alt="qrcode"
                                                    class="qrimage">
                                                <h5><a href="https://www.ci-embassyepay.org/"
                                                        target="_blank">https://www.ci-embassyepay.org/</a></h5> --}}

                                                    @if ($application->service_selected == 7)
                                                        <img src="{{ asset('/assets/image/passport_QR.png') }}"
                                                            alt="" class="qrimage">
                                                        <h5><a href="https://www.monpasseport.ci/inscription"
                                                                target="_blank">https://www.monpasseport.ci/inscription</a>
                                                        </h5>
                                                    @elseif (($application->service_selected == 1 && $application->embassies == 35) || $application->embassies == 36)
                                                        <img src="{{ asset('/assets/image/qrcode_paris.png') }}"
                                                            alt="" class="qrimage">
                                                        <h5><a href="https://snedai.com/paiementFastraceFR"
                                                                target="_blank">https://snedai.com/paiementFastraceFR</a>
                                                        </h5>
                                                    @else
                                                        <img src="{{ asset('/assets/image/qrcode.png') }}"
                                                            alt="" class="qrimage">
                                                        <h5><a href="https://www.ci-embassyepay.org/"
                                                                target="_blank">https://www.ci-embassyepay.org/</a></h5>
                                                    @endif

                                                </div>
                                            </div>
                                        </div>
                                        <br>

                                        @if ($application->service_selected == 7 && $application->sub_service == '54')
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-end">@lang('messages.receiptupload')<span
                                                        aria-hidden="true" class="required">*</span> :<br>
                                                    <p>(PDF Only)</p>
                                                </label>
                                                <div class="col-sm-6">
                                                    <input type="file" class="form-control" required
                                                        id="uploadFile" name="uploadFile" accept=".pdf"
                                                        value="{{ $application->uploadFile }}">
                                                    <small class="text-danger" id="pdfValidationMessage"
                                                        style="display: none;">Please
                                                        upload a valid PDF file.</small>
                                                    <a href="{{ asset('/storage/' . $application->uploadFile) }}"
                                                        target="_blank" title="click to view">
                                                        <i class="fa-regular fa-eye"></i>@lang('messages.viewreciept')
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="pdfValidationMessage1"
                                                    class="col-sm-4 col-form-label text-end">@lang('messages.appointment_confirmation')<span
                                                        aria-hidden="true" class="required">*</span> :<br>
                                                    <p>(PDF Only)</p>
                                                </label>

                                                <div class="col-sm-6">
                                                    <input type="file" class="form-control" required
                                                        id="appointmentconfirmation" name="appointmentconfirmation"
                                                        value="{{ $application->appointmentconfirmation }}"
                                                        accept=".pdf" title="Only upload pdf">
                                                    <small class="text-danger" id="pdfValidationMessage1"
                                                        style="display: none;">Please upload a valid PDF
                                                        file.</small>
                                                    <a href="{{ asset('/storage/' . $application->appointmentconfirmation) }}"
                                                        target="_blank" title="click to view">
                                                        <i class="fa-regular fa-eye"></i>@lang('messages.viewreciept')
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="pdfValidationMessage2"
                                                    class="col-sm-4 col-form-label text-end">@lang('messages.pre_enrolment_fill')<span
                                                        aria-hidden="true" class="required">*</span> :<br>
                                                    <p>(PDF Only)</p>
                                                </label>

                                                <div class="col-sm-6">
                                                    <input type="file" class="form-control" required
                                                        id="preenrolmentfill" name="preenrolmentfill"
                                                        value="{{ $application->preenrolmentfill }}" accept=".pdf"
                                                        title="Only upload pdf" required>
                                                    <small class="text-danger" id="pdfValidationMessage2"
                                                        style="display: none;">Please upload a valid PDF file.</small>
                                                    <a href="{{ asset('/storage/' . $application->preenrolmentfill) }}"
                                                        target="_blank" title="click to view">
                                                        <i class="fa-regular fa-eye"></i>@lang('messages.viewreciept')
                                                    </a>
                                                </div>
                                                <div class="col-md-2"></div>
                                            </div>
                                        @elseif ($application->service_selected == 7 && $application->sub_service == '64')
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-end">@lang('messages.receiptupload')<span
                                                        aria-hidden="true" class="required">*</span> :<br>
                                                    <p>(PDF Only)</p>
                                                </label>
                                                <div class="col-sm-6">
                                                    <input type="file" class="form-control" required
                                                        id="uploadFile" name="uploadFile" accept=".pdf"
                                                        value="{{ $application->uploadFile }}">
                                                    <small class="text-danger" id="pdfValidationMessage"
                                                        style="display: none;">Please
                                                        upload a valid PDF file.</small>
                                                    <a href="{{ asset('/storage/' . $application->uploadFile) }}"
                                                        target="_blank" title="click to view">
                                                        <i class="fa-regular fa-eye"></i>@lang('messages.viewreciept')
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="pdfValidationMessage1"
                                                    class="col-sm-4 col-form-label text-end">@lang('messages.appointment_confirmation')<span
                                                        aria-hidden="true" class="required">*</span> :<br>
                                                    <p>(PDF Only)</p>
                                                </label>

                                                <div class="col-sm-6">
                                                    <input type="file" class="form-control" required
                                                        id="appointmentconfirmation" name="appointmentconfirmation"
                                                        value="{{ $application->appointmentconfirmation }}"
                                                        accept=".pdf" title="Only upload pdf">
                                                    <small class="text-danger" id="pdfValidationMessage1"
                                                        style="display: none;">Please upload a valid PDF
                                                        file.</small>
                                                    <a href="{{ asset('/storage/' . $application->appointmentconfirmation) }}"
                                                        target="_blank" title="click to view">
                                                        <i class="fa-regular fa-eye"></i>@lang('messages.viewreciept')
                                                    </a>
                                                </div>
                                            </div>

                                            <div class="form-group row">
                                                <label for="pdfValidationMessage2"
                                                    class="col-sm-4 col-form-label text-end">@lang('messages.pre_enrolment_fill')<span
                                                        aria-hidden="true" class="required">*</span> :<br>
                                                    <p>(PDF Only)</p>
                                                </label>

                                                <div class="col-sm-6">
                                                    <input type="file" class="form-control" required
                                                        id="preenrolmentfill" name="preenrolmentfill"
                                                        value="{{ $application->preenrolmentfill }}" accept=".pdf"
                                                        title="Only upload pdf" required>
                                                    <small class="text-danger" id="pdfValidationMessage2"
                                                        style="display: none;">Please upload a valid PDF file.</small>
                                                    <a href="{{ asset('/storage/' . $application->preenrolmentfill) }}"
                                                        target="_blank" title="click to view">
                                                        <i class="fa-regular fa-eye"></i>@lang('messages.viewreciept')
                                                    </a>
                                                </div>
                                                <div class="col-md-2"></div>
                                            </div>
                                        @else
                                            <div class="form-group row">
                                                <label class="col-sm-4 col-form-label text-end">@lang('messages.receiptupload')<span
                                                        aria-hidden="true" class="required">*</span> :<br>
                                                    <p>(PDF Only)</p>
                                                </label>

                                                <div class="col-sm-6">
                                                    <input type="file" class="form-control" required
                                                        id="uploadFile" name="uploadFile" accept=".pdf"
                                                        value="{{ $application->uploadFile }}">
                                                    <small class="text-danger" id="pdfValidationMessage"
                                                        style="display: none;">Please
                                                        upload a valid PDF file.</small>
                                                    <a href="{{ asset('/storage/' . $application->uploadFile) }}"
                                                        target="_blank" title="click to view">
                                                        <i class="fa-regular fa-eye"></i>@lang('messages.viewreciept')
                                                    </a>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                @endif <br>

                                <script>
                                    $(document).ready(function() {
                                        // File validation for PNG files
                                        function validatePNGFile(inputId, messageId) {
                                            $(inputId).on("change", function() {
                                                const fileInput = this;
                                                const validationMessage = $(messageId);
                                                const allowedExtensions = ['.png', '.jpg', '.jpeg', '.gif', '.pdf'];
                                                if (fileInput.files.length > 0) {

                                                    const fileName = fileInput.files[0].name;
                                                    // if (fileName.endsWith(".png" || ".pdf")) {
                                                    if (allowedExtensions.some(ext => fileName.endsWith(ext))) {
                                                        validationMessage.hide();
                                                    } else {
                                                        fileInput.value = ''; // Clear the file 
                                                        validationMessage.show();
                                                    }
                                                } else {
                                                    validationMessage.hide();
                                                }
                                            });
                                        }

                                        // function validatePassportFormatFile() {
                                        //     const inputId = "#photopassportformat";
                                        //     const messageId = "#6photoValidationMessage6";
                                        //     const aspectRatioInput = "#aspectRatio";

                                        //     $(inputId).on("change", function() {
                                        //         const fileInput = this;
                                        //         const validationMessage = $(messageId);
                                        //         const allowedExtensions = ['.jpeg', '.jpg', '.png'];

                                        //         if (fileInput.files.length > 0) {
                                        //             const file = fileInput.files[0];
                                        //             const fileType = file.type.split('/').pop(); // Get the file extension

                                        //             if (!allowedExtensions.includes('.' + fileType.toLowerCase())) {
                                        //                 // Show error message and clear file input
                                        //                 validationMessage.text("Please upload a PNG, JPG, or JPEG image.").show();
                                        //                 $(inputId).val('');
                                        //                 return;
                                        //             }

                                        //             const img = new Image();
                                        //             img.src = URL.createObjectURL(file);

                                        //             img.onload = function() {
                                        //                 const width = this.width;
                                        //                 const height = this.height;
                                        //                 const aspectRatio = width / height;
                                        //                 $(aspectRatioInput).val(aspectRatio.toFixed(2));

                                        //                 if (Math.abs(aspectRatio - 1) > 0.01) {
                                        //                     validationMessage.text(
                                        //                         "Please upload an image with a 2x2 aspect ratio.").show();
                                        //                     $(inputId).val('');
                                        //                 } else {
                                        //                     validationMessage.hide();
                                        //                 }
                                        //             };
                                        //         } else {
                                        //             validationMessage.hide();
                                        //         }
                                        //     });
                                        // }

                                        validatePNGFile("#proof_of_residency", "#36photoValidationMessage35");
                                        // Call validatePNGFile for each PNG file input
                                        validatePNGFile("#photoofpassport", "#photoValidationMessage1");
                                        validatePNGFile("#copyofpassport", "#photoValidationMessage2");
                                        validatePNGFile("#birthextract", "#photoValidationMessage3");
                                        validatePNGFile("#proofofaddress", "#photoValidationMessage4");
                                        // service id 7
                                        validatePNGFile("#copynationalidentitycard", "#7photoValidationMessage1");
                                        validatePNGFile("#birth_certificate", "#7photoValidationMessage2");
                                        validatePNGFile("#identity_certificate", "#7photoValidationMessage3");
                                        validatePNGFile("#enrolment_certificate_national_identity", "#7photoValidationMessage4");
                                        validatePNGFile("#national_identity_cardone_parent", "#7photoValidationMessage5");
                                        validatePNGFile("#parental_authorization_legalized", "#7photoValidationMessage6");
                                        validatePNGFile("#national_identity_card_parental_authorization_author", "#7photoValidationMessage7");
                                        validatePNGFile("#marriagecertificatenamechanging", "#7photoValidationMessage9");
                                        validatePNGFile("#copyconsulatecard", "#7photoValidationMessage10");


                                        validatePNGFile("#greencardcopy", "#6photoValidationMessage2");
                                        validatePNGFile("#copyflightticket", "#6photoValidationMessage4");
                                        validatePNGFile("#laisserpasserinquiry", "#6photoValidationMessage5");
                                        // validatePNGFile("#photopassportformat", "#6photoValidationMessage6");
                                        // validatePassportFormatFile();

                                        // service id 1 and child service is 65
                                        validatePNGFile("#passport6monthsvalidity", "#1photoValidationMessage1");
                                        validatePNGFile("#copygreencardnoncitizen", "#1photoValidationMessage2");
                                        validatePNGFile("#uploadcopyvaccincertificate", "#1photoValidationMessage3");
                                        validatePNGFile("#copyflightitinerary", "#1photoValidationMessage4");
                                        validatePNGFile("#certifiedparentalauthorization", "#1photoValidationMessage5");
                                        validatePNGFile("#copycustodydocument", "#1photoValidationMessage6");
                                        validatePNGFile("#businessinvitationletter", "#1photoValidationMessage7");
                                        validatePNGFile("#uploadyellowcard", "#1photoValidationMessage8");
                                        validatePNGFile("#passportgreenvisa", "#1photoValidationMessage9");

                                        // selectedserviceid is 1 and child serviceid is 65
                                        validatePNGFile("#verbalnote", "#67photoValidationMessage1");
                                        validatePNGFile("#missionorder", "#67photoValidationMessage2");

                                        // select service is 4 consular service and sub service is 74 humana-remain
                                        validatePNGFile("#deathcertificate", "#74photoValidationMessage1");
                                        validatePNGFile("#translateddeathcertificate", "#74photoValidationMessage2");
                                        validatePNGFile("#affidavitofembalming", "#74photoValidationMessage3");
                                        validatePNGFile("#letterfrommedicaldoctorthedeath", "#74photoValidationMessage4");
                                        validatePNGFile("#idcard", "#74photoValidationMessage5");
                                        validatePNGFile("#letterauthorizingembassyshipremainscard", "#74photoValidationMessage6");
                                        validatePNGFile("#departuredateabidjan", "#74photoValidationMessage7");
                                        validatePNGFile("#flightreservation", "#74photoValidationMessage8");
                                        validatePNGFile("#validpassport", "#74photoValidationMessage9");
                                        validatePNGFile("#visanecessary", "#74photoValidationMessage10");
                                        validatePNGFile("#birthcertificateidcard", "#74photoValidationMessage11");

                                        //  when user select consulate_services and sub service io Life Certificate id is 38 
                                        validatePNGFile("#retirementenrolementcertificate", "#38photoValidationMessage1");
                                        validatePNGFile("#letterofretirement", "#38photoValidationMessage2");
                                        validatePNGFile("#cnpsbook", "#38photoValidationMessage3");
                                        validatePNGFile("#proofoccupationbeforeretirement", "#38photoValidationMessage4");
                                        validatePNGFile("#spousedeathcertificate", "#38photoValidationMessage5");

                                        // when user select consulate_services 4 and sub service io Life Certificate id nd 76
                                        validatePNGFile("#copyofpassportIDcardwitness1", "#76photoValidationMessage1");
                                        validatePNGFile("#proofofresidencewitness1", "#76photoValidationMessage2");
                                        validatePNGFile("#copyofpassportIDcardwitness2", "#76photoValidationMessage3");
                                        validatePNGFile("#proofofresidencewitness2", "#76photoValidationMessage4");

                                        // when user select Civil Document 2 and sub service io transcript Birth Certificate  id 61
                                        validatePNGFile("#copybirthcertificatechildversion", "#61photoValidationMessage1");
                                        validatePNGFile("#ivorianparentcopiespassportbirthcertificate", "#61photoValidationMessage2");
                                        validatePNGFile("#nonivorianparentscopiespassportbirthcertificate", "#61photoValidationMessage3");
                                        validatePNGFile("#familybookonlyforspouses", "#61photoValidationMessage4");
                                        validatePNGFile("#nationalitycertificateivorianparent", "#61photoValidationMessage5");

                                        // when user select Civil Document 2 and sub service io Transcript Marriage Certificate  id 15
                                        validatePNGFile("#temoin1passportuptodate", "#15photoValidationMessage1");
                                        validatePNGFile("#temoin2passportuptodate", "#15photoValidationMessage2");
                                        validatePNGFile("#copymarriagecertificatenotorizedtranslatedfrenchversion",
                                            "#15photoValidationMessage3");
                                        validatePNGFile("#ivorianspousepassportuptodatebirthcertificate", "#15photoValidationMessage4");
                                        validatePNGFile("#nonivorianspousepassportuptodatebirthcertificate", "#15photoValidationMessage5");



                                        // File validation for PDF files
                                        function validatePDFFile(inputId, messageId) {
                                            $(inputId).on("change", function() {
                                                const fileInput = this;
                                                const validationMessage = $(messageId);

                                                if (fileInput.files.length > 0) {
                                                    const fileName = fileInput.files[0].name;
                                                    if (fileName.endsWith(".pdf")) {
                                                        validationMessage.hide();
                                                    } else {
                                                        fileInput.value = ''; // Clear the file 
                                                        validationMessage.show();
                                                    }
                                                } else {
                                                    validationMessage.hide();
                                                }
                                            });
                                        }

                                        // Call validatePDFFile for each PDF upload field
                                        validatePDFFile("#uploadFile", "#pdfValidationMessage");
                                        validatePDFFile("#appointmentconfirmation", "#pdfValidationMessage1");
                                        validatePDFFile("#preenrolmentfill", "#pdfValidationMessage2");
                                        validatePDFFile("#signedvisadoc", "#signedvisadocmessage");
                                    });
                                </script>

{{-- <script>
    console.log('11');
    let cropper;
    const input = document.getElementById('photopassportformat');
    const image = document.getElementById('imageToCrop');
    const cropButton = document.getElementById('cropButton');

    const closeButton = document.querySelector('#cropImageModal .close');
    const cancelButton = document.querySelector('#cropImageModal .btn-secondary');

    function isImage2x2(image) {
        const inchesToPixels = 300; // 1 inch = 300 pixels at 300 DPI
        return image.width === 2 * inchesToPixels && image.height === 2 * inchesToPixels;
        console.log('11122');
    }

    input.addEventListener('change', function (event) {
        const file = event.target.files[0];
        if (file) {

            const reader = new FileReader();
            reader.onload = function (e) {
                const img = new Image();
                // img.onload = function() {
                // if (!isImage2x2(img)) {
                image.src = e.target.result;
                $('#cropImageModal').modal('show');
                // }
                // };
            };
            reader.readAsDataURL(file);
        }
    });

    $('#cropImageModal').on('shown.bs.modal', function () {
        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 2,
            autoCropArea: 1,
            movable: false,
            cropBoxResizable: false
        });
    }).on('hidden.bs.modal', function () {
        // if (cropper) {
        cropper.destroy();
        cropper = null;
        // input.value = '';
        // }
    });

    cropButton.addEventListener('click', function () {
        const canvas = cropper.getCroppedCanvas({
            width: 600, // 2 inches * 300 DPI
            height: 600, // 2 inches * 300 DPI
        });
        uploadImage(canvas);
    });

    function uploadImage(canvas) {
        console.log('12345');
        canvas.toBlob(function (blob) {
            const url = URL.createObjectURL(blob);
            const reader = new FileReader();
            reader.readAsDataURL(blob);

            reader.onloadend = function () {
                const base64data = reader.result;
                $('#cropImageModal').modal('hide');
                console.log(base64data);

                const img = new Image();
                img.src = base64data;
                img.onload = function () {
                    const imageContainer = document.getElementById('imageContainer');
                    // imageContainer.appendChild(img);
                };
                document.getElementById('croppedImage').value = base64data;
                console.log(img);

                const file = new File([blob], 'croppedImage.png', {
                    type: 'image/png'
                });
                const dataTransfer = new DataTransfer();
                dataTransfer.items.add(file);
                const input = document.getElementById('photopassportformat');
                input.files = dataTransfer.files;
            };
        });
    }


    // Close the modal without uploading the image
    closeButton.addEventListener('click', function () {
        input.value = '';
        $('#cropImageModal').modal('hide');
    });

    // Close the modal without uploading the image
    cancelButton.addEventListener('click', function () {
        input.value = '';
        $('#cropImageModal').modal('hide');

    });
</script> --}}

                                <button type="button" name="previous"
                                    class="btn rounded-pill btn-lg px-3 previous action-button-previous"
                                    value="Previous" style="background: {{ $colorCode }};"
                                    onmouseover="this.style.background='{{ $hovercolor }}';"
                                    onmouseout="this.style.background='{{ $colorCode }}';"><i
                                        class="fas fa-thin fa-angle-left"></i>
                                    @lang('messages.previous')</button>


                                <button type="button" name="next"
                                    class="btn rounded-pill btn-lg px-3 next action-button" value="Next"
                                    id="nextButton" style="background: {{ $colorCode }};"
                                    onmouseover="this.style.background='{{ $hovercolor }}';"
                                    onmouseout="this.style.background='{{ $colorCode }}';">@lang('messages.next')
                                    <i class="fas fa-thin fa-angle-right"></i>
                                </button>
                            </fieldset>


                            <fieldset>
                                <div class="container">
                                    <div class="row custom-row">
                                        <div class="col-md-3 p-5 servicecol" id="normalService" style="background: {{ $colorCode }};"
                                            onmouseover="this.style.background='{{ $hovercolor }}';"
                                            onmouseout="this.style.background='{{ $colorCode }}';">
                                            <a href="#" class="linkdecoration">
                                                <p class="text-white">@lang('messages.normal')</p>
                                                {{-- @if ($application->service_selected == 1)
                                                <p class="text-white">@lang('messages.30days')</p>
                                                @endif --}}

                                            </a>
                                        </div>

                                        @if ($application->service_selected != 7)
                                            <div class="col-md-3 p-5 servicecol" id="expediteService" 
                                            style="background: {{ $colorCode }};"
                                            onmouseover="this.style.background='{{ $hovercolor }}';"
                                            onmouseout="this.style.background='{{ $colorCode }}';">
                                                <a href="#" class="linkdecoration">
                                                    <p class="text-white">@lang('messages.expedite')</p>
                                                    {{-- @if ($application->service_selected == 1)
                                                      <p class="text-white">@lang('messages.72hours')</p>
                                                     @endif --}}
                                                </a>
                                            </div>
                                        @endif

                                    </div>
                                </div>
                                <input type="hidden" name="selectedService" id="selectedService"
                                    value="{{ $application->speed }}">

                                <button type="button" name="previous"
                                    class="btn rounded-pill btn-lg px-3 previous action-button-previous"
                                    value="Previous" style="background: {{ $colorCode }};"
                                    onmouseover="this.style.background='{{ $hovercolor }}';"
                                    onmouseout="this.style.background='{{ $colorCode }}';"><i
                                        class="fas fa-thin fa-angle-left"></i>
                                    @lang('messages.previous')</button>

                                <button type="button" name="next"
                                    class="btn rounded-pill btn-lg px-3 next action-button" value="Next"
                                    id="nextButton4" style="background: {{ $colorCode }};"
                                    onmouseover="this.style.background='{{ $hovercolor }}';"
                                    onmouseout="this.style.background='{{ $colorCode }}';">@lang('messages.next')
                                    <i class="fas fa-thin fa-angle-right"></i>
                                </button>

                                <script>
                                    document.addEventListener('DOMContentLoaded', function() {
                                        // Initial state of the "Next" button
                                        const nextButton = document.getElementById('nextButton4');
                                        nextButton.disabled = true;

                                        // Function to enable the "Next" button when a service is selected
                                        function toggleNextButton() {
                                            const selectedServiceInput = document.getElementById('selectedService');
                                            if (selectedServiceInput.value !== "") {
                                                nextButton.disabled = false;
                                            } else {
                                                nextButton.disabled = true;
                                            }
                                        }

                                        function updateprice() {
                                            const selectedServiceInput = document.getElementById('selectedService').value;
                                            const parentServiceId = document.getElementById('parentServiceId').value;

                                            const platformFeeDisplay = 9.99;
                                            var serviceFee = 0;
                                            var serviceFeeDisplay = 0;
                                            var totalfee = 0;

                                            if (selectedServiceInput == 'Expedite') {
                                                if (parentServiceId == 1) {
                                                    serviceFeeDisplay = 50.00;
                                                    serviceFee = 50.00 + serviceFee;
                                                } else if (parentServiceId == 5) {
                                                    serviceFeeDisplay = 15;
                                                    serviceFee = 15 + serviceFee;
                                                } else {
                                                    serviceFeeDisplay = 15;
                                                    serviceFee = 15 + serviceFee;
                                                }
                                            } else {
                                                serviceFeeDisplay = 1;
                                                serviceFee = 1;
                                            }

                                            totalfee = parseFloat(serviceFee) + parseFloat(platformFeeDisplay);

                                            document.getElementById('servicefee_show').innerHTML = serviceFee;
                                            document.getElementById('platform_fee_show').innerHTML = platformFeeDisplay;
                                            document.getElementById('shipping_charges_show').innerHTML = 0;
                                            document.getElementById('total_amount_show').innerHTML = totalfee.toFixed(2);

                                        }


                                        // Event listeners for service selection
                                        const normalService = document.getElementById('normalService');
                                        const expediteService = document.getElementById('expediteService');
                                        const selectedServiceInput = document.getElementById('selectedService');

                                        // normalService.addEventListener('click', () => {
                                        //     normalService.classList.add('selected-service');
                                        //     expediteService.classList.remove('selected-service');
                                        //     selectedServiceInput.value = 'Normal';
                                        //     toggleNextButton();
                                        // });

                                        normalService.addEventListener('click', () => {
                                            normalService.classList.add('selected-service');
                                            if (expediteService) {
                                                expediteService.classList.remove('selected-service');
                                            }
                                            selectedServiceInput.value = 'Normal';
                                            toggleNextButton();
                                            updateprice();
                                        })

                                        expediteService && expediteService.addEventListener('click', () => {
                                            expediteService.classList.add('selected-service');
                                            normalService.classList.remove('selected-service');
                                            selectedServiceInput.value = 'Expedite';
                                            toggleNextButton();
                                            updateprice();
                                        });

                                        // Call the toggleNextButton function on page load
                                        toggleNextButton();
                                    });
                                </script>
                            </fieldset>

                            <fieldset>
                                <div class="form-group row">
                                    <label for=""
                                        class="col-sm-4 col-form-label p-3 text-end">@lang('messages.selectdeliverymethod')<span
                                            aria-hidden="true" class="required">*</span> :</label>
                                    <div class="col-sm-6">
                                        <select class="form-select" name="deliveryMethod" id="deliveryMethod">
                                            <option value="pickup">@lang('messages.pickup')</option>
                                            @if (
                                                !empty($embassiesdetails->account_no) &&
                                                    !empty($embassiesdetails->client_id) &&
                                                    !empty($embassiesdetails->client_secret))
                                                @if ($application->embassies != 35)
                                                    <option value="delivery">@lang('messages.deliverycharges')</option>
                                                @endif
                                            @endif

                                        </select>
                                    </div>

                                    <script>
                                        $(document).ready(function() {
                                            // Function to show/hide address fields based on the selected delivery method
                                            function toggleAddressFields() {
                                                var deliveryMethod = $('#deliveryMethod').val();
                                                var addressFields = $('#addressFields');
                                                var countryCode = $('#countrySelect').val();
                                                var postalCode = $('#zip_code').val();

                                                var serviceFee = $('#servicefee_show').html();
                                                var platformFee = $('#platform_fee_show').html();
                                                var shippingFee = $('#shipping_charges_show').html();
                                                var total = 0;

                                                if (deliveryMethod === 'delivery') {
                                                    addressFields.show();
                                                    $.ajax({
                                                        type: 'POST',
                                                        url: '/posts/store',
                                                        headers: {
                                                            'X-CSRF-TOKEN': '