@include('../bd_section/layouts.header')
@include('../bd_section/layouts.sidebar')
      
          @php
            $r_status = "";
            if(isset($_GET['status'])) {
              $r_status = $_GET['status'];
            }
          @endphp
          <meta name="csrf-token" content="{{ csrf_token() }}">
<input type="hidden" value="{{ URL::to('/') }}" id="urlBase" />
          <div class="_admin_inner_box">
            <div class="_sub_title_main d-flex align-items-center justify-content-start gap-3 mb-3 mt-2">
              <div class="_left">
                <h1 class="mb-1">Application Documents</h1>
                <ul class="d-flex align-items-center justify-content-start _breadcrumb"> 
                  <li><a href="dashboard.html">Dashboard</a></li>
                  <li><a href="user-details.html">Application</a></li>
                  <li class="active">Application Documents</li>
                </ul>
              </div>
            </div>
            
            <ul class="nav nav-tabs border-0 m-0 _tabs_nav gap-3 mt-4" id="myTab" role="tablist">

              @if(!empty($nri_user))
                @php 
                  $i = 0;
                  $n = 1;
                @endphp
                @foreach($nri_user as $res) 
                  <li @if($i == 0) class="nav-item m-0" @else class="nav-item" @endif role="presentation">
                    <button @if($i == 0) class="nav-link active" @else class="nav-link" @endif id="home-tab-{{$res->id}}" data-bs-toggle="tab" data-bs-target="#home-tab-pane-{{$res->id}}" type="button" role="tab" aria-controls="home-tab-pane-{{$res->id}}" @if($i == 0) aria-selected="true" @else aria-selected="false" @endif>{{$res['user_details']['appli_nm']}}</button>
                  </li>
                  @php
                    $i++;
                    $n++;
                  @endphp
                @endforeach
              @endif

              <!--<li class="nav-item m-0" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Person 1</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Person 2</button>
              </li>
              <li class="nav-item" role="presentation">
                <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Person 3</button>
              </li>-->
            </ul>
            <div class="tab-content mt-4" id="myTabContent">
            @if(!empty($nri_user))
                @php 
                  $i = 0;
                  $n = 1;  
                @endphp
                @foreach($nri_user as $res)
              <div @if($i == 0) class="tab-pane fade show active" @else class="tab-pane fade" @endif id="home-tab-pane-{{$res->id}}" role="tabpanel" aria-labelledby="home-tab-{{$res->id}}" tabindex="0">
                <div class="accordion _new_accrodion" id="accordionExample">
                  <div class="accordion-item">
                    <h2 class="accordion-header">
                      <button class="accordion-button" type="button" data-bs-toggle="collapse" id="secinfo1" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        Upload Documents ({{$res['user_details']['appli_nm']}})
                      </button>
                    </h2>
                    <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                      <div class="accordion-body">
                        <!--Desktop view start -->
                        <div class="_desktop_box">
                            
                            @if(!empty($reason_docIdsdata))
                              @foreach($reason_docIdsdata as $key => $reason_docIds)
                                @php  
                                  $docTypeId = $reason_docIds->id;
                                  $frontDocs = $res['user_docs'][$docTypeId] ?? []; 
                                @endphp
                                <div class="_upload_docs_box d-flex align-items-center justify-content-start gap-2" id="req_desk_{{$docTypeId}}_{{ $res->id }}"> 
                                  <div class="_left_title">{{$key+1}}. {{ $reason_docIds->name }}</div>
                                  <div class="_right_upload_box d-flex align-items-center justify-content-end gap-3">
                                    <ul class="_upload_photo d-flex align-items-center justify-content-end gap-3" id="preview_{{ $res->id }}_{{ $docTypeId }}">
                                          @if(isset($res['user_docs'][$docTypeId])) 
                                            @foreach($res['user_docs'][$docTypeId] as $docimg)   
                                              @php $file_nm = $docimg['file_path']; 
                                                $f_arr = explode(".",$file_nm); 
                                                $arr_sz = sizeof($f_arr);
                                                $file_ext = $f_arr[$arr_sz - 1]; 
                                                if($file_ext == "pdf"){
                                                  $img_nm = "uploads/checkout_docs/document/pdf_icon.png";
                                                }
                                                else {
                                                  $img_nm = $docimg['file_path'];
                                                }
                                                $img_href = env('FRONT_BASE_URL').$docimg['file_path'];
                                              @endphp
                                              <li class="position-relative" id="tgimg_{{$docimg['id']}}">
                                                <a href="{{route('visament.nri.download')}}?url={{$img_href}}" target="_blank">
                                                <img width="40" height="40" src="@php echo env('FRONT_BASE_URL').$img_nm @endphp"></a>
                                                
                                                <!--<sup onclick="rmv_ele({{$docimg['id']}});"><i class="fa-solid fa-circle-xmark"></i></sup> -->
                                              </li>
                                            @endforeach
                                          @endif
                                          </ul>
                                          <div class="_right_btn">    
                                            <a href="javascript:void(0)" class="btn btn_gridaint">
                                              <i class="fa-solid fa-cloud-arrow-up"></i> 
                                              <input type="file" name="documents[{{ $res->id }}][{{ $docTypeId }}][]" style="cursor:pointer" accept=".jpg,.png,.pdf,.jpeg" multiple="multiple" class="form-control mt-1" id="fileinpt_{{ $res->id }}_{{ $docTypeId }}" /> 
                                              Upload Document 
                                            </a>
                                          </div>
                                        </div>
                                      </div>
                              @endforeach
                            @endif
                            
                            
                          <div class="oci_btn mt-4" style="display:none;">
                            <a href="javascript:void(0)" onclick="sv_nridocs();" class="btn btn_gridaint">Continue</a>
                          </div>  
                        </div>  
                        <!---   desktop view end  ------------> 
                      </div>
                    </div>
                  </div>
                </div>  
                
                @if($section_show->category_id == '1')
                  <div class="accordion _new_accrodion" id="ociAccordion">
                    <div class="accordion-item">
                      <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" id="secinfo2" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
                          Applicant Personal Details
                        </button>  
                      </h2>
                      <div id="panelsStayOpen-collapseTwo" class="accordion-collapse collapse">
                        <div class="accordion-body">
                          <div class="alert alert-success mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="pinfo_succ_msg" style="display:none;"></div>
                          <div class="alert alert-danger mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="pinfo_err_msg" style="display:none;"></div>
                          <ul class="_oci_form_tab"> 
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Name of Applicant</label>
                                <input type="text" id="appli_nm" class="form-control" placeholder="Enter Applicant Name" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" value="{{$res['user_details']->appli_nm}}">
                              </div>
                            </li>
                            @php $u_mob = $traveller->mobile_number;  $u_email = $traveller->email;
                            if($u_mob == "" or $u_mob == null) { $u_mob = $userdata->mobile_no; }
                            if($u_email == "" or $u_email == null) { $u_email = $userdata->email_addr; }
                            @endphp
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2"> 
                                <label class="required">Mobile Number</label>
                                <input type="text" id="appli_mob" class="form-control" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="20" placeholder="Mobile Number" value="{{$res['user_details']->mob_no}}" @if($u_mob != "") disabled @endif>
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Email id</label>
                                <input type="email" id="appli_email" class="form-control" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" placeholder="Email id" value="{{$res['user_details']->appli_email}}" disabled>
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Is there any name change of applicant?</label>
                                <ul class="d-flex align-items-center justify-content-start gap-5">
                                  <li  class="d-flex align-items-center justify-content-start gap-2"><input type="radio" id="is_nmchngYes" name="is_nmchange" value="yes" @if($res['user_details']->isthere_nm_change == "yes") checked @endif><label for="is_nmchngYes" class="mb-0">Yes</label></li>
                                  <li  class="d-flex align-items-center justify-content-start gap-2"><input type="radio" id="is_nmchngNo" name="is_nmchange" value="no" @if($res['user_details']->isthere_nm_change == "no") checked @endif><label for="is_nmchngNo" id="is_nmchngNo_err" class="mb-0">No</label></li>
                                </ul>
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Visible distinguishing mark </label>
                                <input name="distinguishing_mark" id="distinguishing_mark" onblur="fn_ocipersonal({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="250" type="text" class="form-control" value="{{$res['user_details']->distinguishing_mark}}" placeholder="Visible distinguishing mark">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">  
                                <label class="required">Marital Status</label>
                                <select name="marital_status" id="marital_status" class="form-select" onblur="fn_ocipersonal({{$res->id}});">
                                  <option value="">Select Marital Status</option>
                                  @if($marital_status_data)
                                    @foreach($marital_status_data as $key=> $val)
                                      <option value="{{$key}}" @if($key == $res['user_details']->marital_status) selected @endif>{{$val}}</option>
                                    @endforeach
                                  @endif
                                </select>
                              </div>
                            </li>
                          </ul>
                          <div class="oci_btn mt-4 " style="display:none;">
                            <a href="javascript:void(0)" id="oci_pinfo" class="btn btn_gridaint">Continue</a>    
                          </div>    
                        </div>
                      </div>
                    </div>
                    <div class="accordion-item">
                      <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" id="secinfo3" data-bs-target="#familyDetails">
                          Family & Nationality Details
                        </button>
                      </h2>
                      <div id="familyDetails" class="accordion-collapse collapse">
                        <div class="accordion-body">
                          <!-- Father's info -->
                          <div class="alert alert-success mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="ocif_succ_msg" style="display:none;"></div>
                          <div class="alert alert-danger mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="ocif_err_msg" style="display:none;"></div>
                          <ul class="_oci_form_tab">
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Father's Nationality</label>
                                <input name="father_nationality" id="father_nationality" placeholder="Father's Nationality" onblur="fn_ocifamily({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" type="text" value="{{$res['user_details']->father_nationality}}" class="form-control">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Father's Profession</label>
                                <input name="father_profession" id="father_profession" placeholder="Father's Profession" onblur="fn_ocifamily({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" type="text" value="{{$res['user_details']->father_profession}}" class="form-control">
                              </div>
                            </li>
                            <!-- Mother's info -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Mother's Nationality</label>
                                <input name="mother_nationality" id="mother_nationality" placeholder="Mother's Nationality" onblur="fn_ocifamily({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" type="text" value="{{$res['user_details']->mother_nationality}}" class="form-control">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Mother's Profession</label>
                                <input name="mother_profession" id="mother_profession" placeholder="Mother's Profession" onblur="fn_ocifamily({{$res->id}});" type="text" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" value="{{$res['user_details']->mother_profession}}" class="form-control">
                              </div>
                            </li>
                            <!-- OCI & Dual Nationality --> 
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Does anyone in your family already have an OCI card?</label>
                                <ul class="d-flex align-items-center justify-content-start gap-5">
                                  <li class="d-flex align-items-center justify-content-start gap-2"><input type="radio" id="hv_ociyes" name="hv_ocicard" value="yes" @if($res['user_details']->already_have_oci_card == "yes") checked @endif> <label for="hv_ociyes"  class="mb-0">Yes</label></li>
                                  <li class="d-flex align-items-center justify-content-start gap-2"><input type="radio" id="hv_ocino" name="hv_ocicard" value="no" @if($res['user_details']->already_have_oci_card == "no") checked @endif><label for="hv_ocino" id="hv_ocicard_err" class="mb-0">No</label></li>
                                </ul>
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Do you hold dual nationality?</label>
                                <ul class="d-flex align-items-center justify-content-start gap-5">
                                  <li class="d-flex align-items-center justify-content-start gap-2"><input type="radio" id="dual_nationyes" name="have_dual_nationality" value="yes" @if($res['user_details']->have_dual_nationality == "yes") checked @endif> <label for="dual_nationyes" class="mb-0">Yes</label></li>
                                  <li class="d-flex align-items-center justify-content-start gap-2"><input type="radio" id="dual_nationno" name="have_dual_nationality" value="no" @if($res['user_details']->have_dual_nationality == "no") checked @endif><label for="dual_nationno" id="dual_nationality_err" class="mb-0">No</label></li>
                                </ul>
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Do you have a relative in India?</label>
                                <ul class="d-flex align-items-center justify-content-start gap-5">
                                  <li class="d-flex align-items-center justify-content-start gap-2"><input type="radio" id="hv_relativeInyes" name="hv_relativeIn" value="yes" @if($res['user_details']->relative_in_india == "yes") checked @endif><label for="hv_relativeInyes" class="mb-0">Yes</label></li>
                                  <li class="d-flex align-items-center justify-content-start gap-2"><input type="radio" name="hv_relativeIn" id="hv_relativeInno" value="no" @if($res['user_details']->relative_in_india == "no") checked @endif><label for="hv_relativeInno" id="hv_relativeIn_err" class="mb-0">No</label></li>
                                </ul>
                              </div>
                            </li>
                          </ul> 
                          <div class="oci_btn mt-4 " style="display:none;">
                            <a href="javascript:void(0)" id="oci_familysv" class="btn btn_gridaint">Continue</a>  
                          </div>
                        </div>         
                      </div>
                    </div>
                    <div class="accordion-item">
                      <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" id="secinfo4" data-bs-target="#occupationDetails">
                          Occupation & Indian Relative Information
                        </button>
                      </h2>
                      <div id="occupationDetails" class="accordion-collapse collapse">
                        <div class="accordion-body">
                          <!-- Occupation Info -->
                          <div class="alert alert-success mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="ocioc_succ_msg" style="display:none;"></div>
                          <div class="alert alert-danger mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="ocioc_err_msg" style="display:none;"></div>
                          <ul class="_oci_form_tab">
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Occupation Details</label>
                                <select name="occupation" id="occupation" class="form-select select2"> 
                                  <option value="">Select</option>
                                  @foreach($occupations as $key => $val)
                                    <option value="{{$key}}" @if($key == $res['user_details']->occupation) selected @endif>{{$val}}</option>
                                  @endforeach
                                </select>
                              </div>
                            </li>
                            <li> 
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Name of Employer <br/> If applicant is minor you can write NA</label>
                                <input name="name_of_employer" id="name_of_employer" onblur="oci_occu({{$res->id}});" type="text" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" placeholder="Name of Employer" class="form-control" value="{{$res['user_details']->name_of_employer}}" @if($res['user_details']->occupation == "Na being minor") readonly @endif >
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Address of Employer <br/> If applicant is minor you can write NA</label>
                                <input name="address_of_employer" id="address_of_employer" onblur="oci_occu({{$res->id}});" type="text" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="250" placeholder="Address of Employer" class="form-control" value="{{$res['user_details']->address_of_employer}}" @if($res['user_details']->occupation == "Na being minor") readonly @endif>
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Employer Contact No <br/> If applicant is minor you can write NA</label>
                                <input name="employer_contact_no" id="employer_contact_no" onblur="oci_occu({{$res->id}});" placeholder="Employer Contact No" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="30" type="text" class="form-control" value="{{$res['user_details']->employer_contact_no}}" @if($res['user_details']->occupation == "Na being minor") readonly @endif>
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Spouse profession if Married/Separated/Widow or Widower.</br> If applicant is minor then please mentioned Na being minor</label>
                                <input name="spouse_profession" id="spouse_profession" onblur="fn_ocipersonal({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="150" type="text" class="form-control" value="{{$res['user_details']->spouse_profession}}" placeholder="Spouse profession if Married/Separated/Widow or Widower" @if($res['user_details']->occupation == "Na being minor") readonly @endif>
                              </div>
                            </li> 
                            <!-- Relative Info -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Name of relative in India</label>
                                <input name="nm_relative_in_india" id="nm_relative_in_india" onblur="oci_occu({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" type="text" placeholder="Name of relative in India" class="form-control" value="{{$res['user_details']->nm_relative_in_india}}">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Address of relative in India</label>
                                <input name="addr_relative_in_india" id="addr_relative_in_india" onblur="oci_occu({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="250" placeholder="Address of relative in India" type="text" class="form-control" value="{{$res['user_details']->addr_relative_in_india}}">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Relationship with the applicant</label>
                                <input name="relationship_with_appli" id="relationship_with_appli" onblur="oci_occu({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" placeholder="Relationship with the applicant" type="text" class="form-control" value="{{$res['user_details']->relationship_with_appli}}">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Age of relative in India</label>
                                <input name="age_of_relative" id="age_of_relative" onblur="oci_occu({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="3" placeholder="Age of relative in India" type="number" class="form-control" value="{{$res['user_details']->age_of_relative}}">
                              </div>
                            </li>
                          </ul> 
                          <div class="oci_btn mt-4 " style="display:none;">
                            <a href="javascript:void(0)" id="oci_occupation" class="btn btn_gridaint">Save</a>  
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  @elseif($section_show->category_id == '2')
                  <!-- Accordion Start -->
                  <div class="accordion _new_accrodion" id="passportAccordion">
                    <!-- 1. Personal Details (Passport) -->
                    <div class="accordion-item">
                      <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" id="secinfo2" data-bs-target="#personalDetails">
                          1. Personal Details (Passport)
                        </button>
                      </h2>
                      <div id="personalDetails" class="accordion-collapse collapse" data-bs-parent="#passportAccordion">
                        <div class="accordion-body">
                          <!-- Previous Name -->
                          <div class="alert alert-success mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="passinfo_succ" style="display:none;"></div>
                          <div class="alert alert-danger mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="passinfo_err" style="display:none;"></div>
                          <ul class="_oci_form_tab">
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Name of Applicant</label>
                                <input type="text" id="appli_nm" class="form-control" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="90" placeholder="Enter Applicant Name" value="{{$traveller->name}}">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Mobile Number</label>
                                <input type="number" id="appli_mob" class="form-control" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="30" placeholder="Enter Mobile Number" value="{{$traveller->mobile_number}}" @if($traveller->mobile_number != "") disabled @endif>
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Email id</label>
                                <input type="email" id="appli_email" class="form-control" placeholder="Enter Email id" value="{{$traveller->email}}" disabled>
                              </div>
                            </li> 
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Previous Name if Any</label>
                                <ul class="d-flex align-items-center justify-content-start gap-5">
                                  <li class="d-flex align-items-center gap-2">
                                    <input type="radio" id="pre_nmYes" name="pre_nmIfAny" value="yes" @if($res['user_details']->pre_nm_ifany == "yes") checked @endif>
                                    <label for="hv_ociyes" class="mb-0">Yes</label>
                                  </li>
                                  <li class="d-flex align-items-center gap-2">
                                    <input type="radio" id="pre_nmNo" name="pre_nmIfAny" value="no" @if($res['user_details']->pre_nm_ifany == "no") checked @endif>
                                    <label for="hv_ocino" id="pre_nmIfAny_err" class="mb-0">No</label>
                                  </li>
                                </ul>
                              </div>
                            </li>
                            <!-- Marital Status -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Marital Status</label>
                                <select class="form-select" name="marital_status" id="marital_status">
                                  <option value="">Select Marital Status</option>
                                  @foreach($marital_status_data as $key => $val)
                                    <option value="{{$key}}" @if($key == $res['user_details']->marital_status) selected @endif>{{$val}}</option>
                                  @endforeach
                                </select>
                              </div>
                            </li>
                            <!-- Educational Qualification -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Educational Qualification</label>
                                <select name="educational_qualification" id="educational_qualification" onblur="info_passblur({{$res->id}});" class="form-select">
                                  <option value="">Select Educational Qualification</option>
                                  @foreach($edu_qua as $key => $val)
                                    <option value="{{$key}}" @if($key == $res['user_details']->educational_qualification) selected @endif>{{$val}}</option>
                                  @endforeach
                                </select>
                              </div>
                            </li>
                            <!-- Visible Distinguishing Mark -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Visible Distinguishing Mark</label>
                                <input name="distinguishing_mark" id="distinguishing_mark" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="250" onblur="info_passblur({{$res->id}});" value="{{$res['user_details']->distinguishing_mark}}" type="text" class="form-control" placeholder="Enter Distinguishing Mark">
                              </div>
                            </li>
                            <!-- Indian Mobile Number -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Indian Mobile Number</label>
                                <input name="indian_mobile_no" onblur="info_passblur({{$res->id}});" id="indian_mobile_no" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="30" value="{{$res['user_details']->indian_mobile_no}}" type="text" class="form-control" placeholder="Enter Mobile Number">
                              </div>
                            </li>
                          </ul>  
                          <div class="oci_btn mt-4 " style="display:none;">
                            <a href="javascript:void(0)" id="pass_infosv" class="btn btn_gridaint">Continue</a>  
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 2. Passport Application Details -->
                    <div class="accordion-item">
                      <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" id="secinfo3" data-bs-target="#passportDetails">
                          2. Passport Application Details
                        </button>
                      </h2>
                      <div id="passportDetails" class="accordion-collapse collapse" data-bs-parent="#passportAccordion">
                        <div class="accordion-body">
                          <div class="alert alert-success mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="passapp_succ" style="display:none;"></div>
                          <div class="alert alert-danger mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="passapp_err" style="display:none;"></div> 
                          <!-- Type of Application -->
                          <ul class="_oci_form_tab">
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Type of Application</label>  
                                <ul class="d-flex align-items-center gap-5">
                                  <li class="d-flex align-items-center gap-2">
                                    <input type="radio" id="appli_typenormal" name="application_type" value="normal" @if($res['user_details']->application_type == "normal") checked @endif>
                                    <label for="appli_typenormal" class="mb-0">Normal</label>
                                  </li>
                                  <li class="d-flex align-items-center gap-2">
                                    <input type="radio" id="appli_typetatkaal" name="application_type" value="tatkal" @if($res['user_details']->application_type == "tatkal") checked @endif>
                                    <label for="appli_typetatkaal" id="application_type_err" class="mb-0">Tatkaal</label>
                                  </li>
                                </ul>
                              </div>
                            </li>
                            <!-- Type of Passport Booklet -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Type of Passport Booklet</label>
                                <ul class="d-flex align-items-center gap-5">
                                  <li class="d-flex align-items-center gap-2">
                                    <input type="radio" id="pBooklet36" name="passport_booklet" value="36" @if($res['user_details']->passport_booklet == "36") checked @endif>
                                    <label for="pBooklet36" class="mb-0">36 Pages</label>
                                  </li>
                                  <li class="d-flex align-items-center gap-2">
                                    <input type="radio" id="pBooklet60" name="passport_booklet" value="60" @if($res['user_details']->passport_booklet == "60") checked @endif>
                                    <label for="pBooklet60" class="mb-0" id="passport_booklet_err">60 Pages</label>
                                  </li>
                                </ul>
                              </div>
                            </li>
                            <!-- Address to be Printed -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Which address do you want to print on the passport?</label>
                                <ul class="d-flex align-items-center gap-5">
                                  <li class="d-flex align-items-center gap-2">
                                    <input type="radio" id="pass_addrIn" name="passport_address" value="Indian Address" @if($res['user_details']->passport_address == "Indian Address") checked @endif>
                                    <label for="pass_addrIn" class="mb-0">Indian Address</label>
                                  </li>
                                  <li class="d-flex align-items-center gap-2">
                                    <input type="radio" id="pass_addrUkUs" name="passport_address" value="UK/USA address" @if($res['user_details']->passport_address == "UK/USA address") checked @endif>
                                    <label for="pass_addrUkUs" class="mb-0" id="passport_address_err">UK/USA address</label>
                                  </li>
                                </ul>
                              </div>
                            </li>
                            <!-- Police Station -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Police Station <a href="https://www.passportindia.gov.in/AppOnlineProject/online/LocatePoliceStation" target="_blank"> (link)</a></label>
                                <input name="police_station" id="police_station" onblur="appli_passblur({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="250" value="{{$res['user_details']->police_station}}" type="text" class="form-control" placeholder="Enter Police Station">
                              </div>
                            </li>
                          </ul>
                          <div class="oci_btn mt-4 " style="display:none;">
                            <a href="javascript:void(0)" id="pass_applisv" class="btn btn_gridaint">Continue</a>  
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 3. Emergency Contact Details -->
                    <div class="accordion-item">
                      <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" id="secinfo4" data-bs-target="#emergencyContactDetails">
                          3. Emergency Contact Details
                        </button>
                      </h2>
                      <div id="emergencyContactDetails" class="accordion-collapse collapse" data-bs-parent="#passportAccordion">
                        <div class="accordion-body">
                          <div class="alert alert-success mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="passeme_succ" style="display:none;"></div>
                          <div class="alert alert-danger mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="passeme_err" style="display:none;"></div>
                          <ul class="_oci_form_tab">
                            <!-- Emergency Name -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Name of Emergency Contact</label>
                                <input name="emergency_contact_name" onblur="emergency_passblur({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" value="{{$res['user_details']->emergency_contact_name}}" id="emergency_contact_name" type="text" class="form-control" placeholder="Enter Emergency Contact Name">
                              </div>
                            </li>
                            <!-- Emergency Address -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Address of Emergency Contact</label>
                                <input name="emergency_contact_address" onblur="emergency_passblur({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="250" value="{{$res['user_details']->emergency_contact_address}}" id="emergency_contact_address" type="text" class="form-control" placeholder="Enter Emergency Address">
                              </div>
                            </li>
                            <!-- Emergency Mobile -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Mobile Number of Emergency Contact</label>
                                <input name="emergency_contact_mobile_no" onblur="emergency_passblur({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="30" value="{{$res['user_details']->emergency_contact_mobile_no}}" id="emergency_contact_mobile_no" type="text" class="form-control" placeholder="Enter Emergency Contact Number">
                              </div>
                            </li>
                            <!-- Emergency Email -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Email ID of Emergency Contact</label>
                                <input name="emergency_contact_email" onblur="emergency_passblur({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" value="{{$res['user_details']->emergency_contact_email}}" id="emergency_contact_email" type="text" class="form-control" placeholder="Enter Emergency Email ID">
                              </div>
                            </li>
                          </ul>
                          <div class="oci_btn mt-4 " style="display:none;">
                            <a href="javascript:void(0)" id="pass_emergencysv" class="btn btn_gridaint">Save</a>  
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  @elseif($section_show->category_id == '3' or $section_show->category_id == '5')

                  @php //echo "<pre>"; print_r($res); exit; @endphp
                  <div class="accordion _new_accrodion" id="visaAccordion">
                    <!-- 1. Applicant & Travel Information -->
                    <div class="accordion-item">
                      <h2 class="accordion-header" id="headingApplicant">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" id="secinfo2" data-bs-target="#collapseApplicant" aria-expanded="true">
                          1. Applicant & Travel Information
                        </button>
                      </h2>
                      <div id="collapseApplicant" class="accordion-collapse collapse" data-bs-parent="#visaAccordion">
                        <div class="accordion-body">
                          <div class="alert alert-success mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="visainfo_succ" style="display:none;"></div>
                          <div class="alert alert-danger mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="visainfo_err" style="display:none;"></div> 
                          <ul class="_oci_form_tab">
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Name of Applicant</label>
                                <input type="text" id="appli_nm" class="form-control" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" placeholder="Enter Applicant Name" value="{{$traveller->name}}">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Mobile Number</label>
                                <input type="number" id="appli_mob" class="form-control" placeholder="Enter Mobile Number" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="30" value="{{$traveller->mobile_number}}" @if($traveller->mobile_number != "") disabled @endif>
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Email id</label>
                                <input type="email" id="appli_email" class="form-control" placeholder="Enter Email id" value="{{$traveller->email}}" disabled>
                              </div>
                            </li>  
                            <!-- Port of Arrival -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Port of Arrival</label>
                                <input name="arrival_port" id="arrival_port" value="{{$res['user_details']->arrival_port}}" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="150" onblur="visaappli_travinfo();" type="text" class="form-control" placeholder="Enter Answer">
                              </div>
                            </li>
                            <!-- Expected Date of Arrival -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Expected Date of Arrival</label>
                                <input name="arrival_date" id="arrival_date" onclick="this.showPicker && this.showPicker();" onblur="visaappli_travinfo({{$res->id}});" placeholder="Expected Date of Arrival" value="{{$res['user_details']->arrival_date}}" type="date" class="form-control">
                              </div>
                            </li>
                            <!-- Educational Qualification -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Educational Qualification</label>
                                <input name="education_qualification" onblur="visaappli_travinfo({{$res->id}});" id="education_qualification" value="{{$res['user_details']->education_qualification}}" type="text" class="form-control" placeholder="Enter Educational Qualification">
                              </div>
                            </li>
                            <!-- Marital Status -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Marital Status</label>
                                <select name="marital_status" id="marital_status" class="form-select">
                                  <option value="">Select Marital Status</option>
                                  @if($marital_status_data)
                                    @foreach($marital_status_data as $key => $val)
                                      <option value="{{$key}}" @if($key == $res['user_details']->marital_status) selected @endif>{{$val}}</option>
                                    @endforeach
                                  @endif
                                </select>
                              </div>
                            </li>
                            <!-- Visited India -->
                            <li >
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Have you ever visited India before?</label>
                                <ul class="d-flex align-items-center gap-5">
                                  <li class="d-flex align-items-center gap-2"><input type="radio" id="visite_inYes" name="visited_india" value="yes" @if($res['user_details']->visited_india == "yes") checked @endif> <label for="visite_inYes">Yes</label></li>
                                  <li class="d-flex align-items-center gap-2"><input type="radio" id="visite_inNo" name="visited_india" value="no" @if($res['user_details']->visited_india == "no") checked @endif> <label id="visited_india_err" for="visite_inNo">No</label></li>
                                </ul>
                              </div>
                            </li>
                            <!-- Countries Visited -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Countries visited in last 10 years</label>
                                <input name="countries_visited" id="countries_visited" onblur="visaappli_travinfo({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="250" type="text" value="{{$res['user_details']->countries_visited}}" class="form-control" placeholder="Enter countries">
                              </div>
                            </li>
                          </ul>
                          <div class="oci_btn mt-4 " style="display:none;">
                            <a href="javascript:void(0)" id="visainfo_sv" class="btn btn_gridaint">Continue</a>  
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 2. Family Background -->
                    <div class="accordion-item">
                      <h2 class="accordion-header" id="headingFamily">
                        <button class="accordion-button collapsed" type="button" id="secinfo3" data-bs-toggle="collapse" data-bs-target="#collapseFamily" aria-expanded="false">
                          2. Family Background
                        </button>
                      </h2>
                      <div id="collapseFamily" class="accordion-collapse collapse" data-bs-parent="#visaAccordion">
                        <div class="accordion-body">

                          <!-- Father's Info -->
                          <div class="alert alert-success mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="visafamily_succ" style="display:none;"></div>
                          <div class="alert alert-danger mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="visafamily_err" style="display:none;"></div>
                          <ul class="_oci_form_tab"> 
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Father Name</label>
                                <input name="father_name" id="father_name" type="text" onblur="visafamily_background({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" value="{{$res['user_details']->father_name}}" class="form-control" placeholder="Enter Father name">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Father Nationality</label>
                                <input name="father_nationality" id="father_nationality" onblur="visafamily_background({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" type="text" value="{{$res['user_details']->father_nationality}}" class="form-control" placeholder="Enter Father nationality">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Father Place of Birth</label>
                                <input name="father_birth_place" id="father_birth_place" onblur="visafamily_background({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" type="text" value="{{$res['user_details']->father_birth_place}}" class="form-control" placeholder="Father place of birth">
                              </div>
                            </li>
                            <!-- Mother's Info -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Mother Name</label>
                                <input name="mother_name" id="mother_name" onblur="visafamily_background({{$res->id}});" type="text" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" value="{{$res['user_details']->mother_name}}" class="form-control" placeholder="Enter Mother name">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Mother Nationality</label>
                                <input name="mother_nationality" id="mother_nationality" onblur="visafamily_background({{$res->id}});" value="{{$res['user_details']->mother_nationality}}" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" type="text" class="form-control" placeholder="Enter Mother nationality">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Mother Place of Birth</label>
                                <input name="mother_birth_place" id="mother_birth_place" onblur="visafamily_background({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" value="{{$res['user_details']->mother_birth_place}}" type="text" class="form-control" placeholder="Enter Mother place of birth">
                              </div>
                            </li>
                          </ul>
                          <div class="oci_btn mt-4 " style="display:none;">
                            <a href="javascript:void(0)" id="visafamily_sv" class="btn btn_gridaint">Continue</a>  
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- 3. References for Contact -->
                    <div class="accordion-item">
                      <h2 class="accordion-header" id="headingReference">
                        <button class="accordion-button collapsed" type="button" id="secinfo4" data-bs-toggle="collapse" data-bs-target="#collapseReference" aria-expanded="false">
                          3. References for Contact
                        </button>
                      </h2>
                      <div id="collapseReference" class="accordion-collapse collapse" data-bs-parent="#visaAccordion">
                        <div class="accordion-body">
                          <!-- Reference in India -->
                          <div class="alert alert-success mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="visaref_succ" style="display:none;"></div>
                          <div class="alert alert-danger mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="visaref_err" style="display:none;"></div>
                          <ul class="_oci_form_tab">
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Reference Name in India</label>
                                <input name="ref_india_name" id="ref_india_name" type="text" onblur="visa_refandcontact({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="150" value="{{$res['user_details']->ref_india_name}}" class="form-control" placeholder="Reference name in India">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Reference Person Address in India</label>
                                <input name="ref_india_address" id="ref_india_address" type="text" onblur="visa_refandcontact({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="250" value="{{$res['user_details']->ref_india_address}}" class="form-control" placeholder="Reference person address in India">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Reference Person Phone No in India</label>
                                <input name="ref_india_phone" id="ref_india_phone" type="text" onblur="visa_refandcontact({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="30" value="{{$res['user_details']->ref_india_phone}}" class="form-control" placeholder="Reference person phone no in India">
                              </div>
                            </li>
                            <!-- Reference in Home Country -->
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2"> 
                                <label class="required">Reference Name in Home Country</label>
                                <input name="ref_home_name" id="ref_home_name" type="text" onblur="visa_refandcontact({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="100" value="{{$res['user_details']->ref_home_name}}" class="form-control" placeholder="Reference name in home country">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Reference Person Address in Home Country</label>
                                <input name="ref_home_address" id="ref_home_address" type="text" onblur="visa_refandcontact({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="250" value="{{$res['user_details']->ref_home_address}}" class="form-control" placeholder="Reference address in home country">
                              </div>
                            </li>
                            <li>
                              <div class="form-group d-flex align-items-center justify-content-start gap-2">
                                <label class="required">Reference Person Phone No in Home Country</label>
                                <input name="ref_home_phone" id="ref_home_phone" type="text" onblur="visa_refandcontact({{$res->id}});" oninput="this.value = this.value.replace(/^\s+/, '')" maxlength="30" value="{{$res['user_details']->ref_home_phone}}" class="form-control" placeholder="Reference phone in home country">
                              </div>
                            </li>
                          </ul>
                          <div class="oci_btn mt-4" style="display:none;">
                            <a href="javascript:void(0)" id="visarefrence_sv" class="btn btn_gridaint">Save</a>   
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  @endif

                <div class="oci_btn mt-4 text-end me-4" style="display:none;">
                  <div class="alert alert-success mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="al_appdata_succ" style="display:none;"></div> 
                  <div class="alert alert-danger mt-0 mb-4 pt-1 pb-1 pe-3 ps-3" id="al_appdata_err" style="display:none;"></div>
                  <a href="javascript:void(0)" class="btn btn_gridaint" onclick="hidpop();" data-bs-toggle="modal" data-bs-target="#exampleModal1">Submit</a>    
                </div>
              </div>

                  @php
                    $i++;
                    $n++;
                  @endphp
                @endforeach
              @endif


            </div>


          </div>
          
          @include('../bd_section/layouts.footer')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> 
    <script src="{{ asset('/bd_assest/js/add.js') }}"></script>
    <script>
      var sec_show = '{{$section_show->category_id}}'; 
      var app_num = '';
      var baseurl = '{{ url('/') }}';
      {{--function nri_filter(){ 
        var filter = $("#data_filter").val();
        if(filter != "") {
          window.location.href=baseurl+"/admin/visament/app_nri?status="+filter;
        }
        else {
          window.location.href=baseurl+"/admin/visament/app_nri";
        }

      }--}}
    </script>


<script>
  const BASE_URL = '{{ URL::to('/') }}';
  const IMG_URL = "{{ env('FRONT_BASE_URL') }}"; 
  document.addEventListener('DOMContentLoaded', function () {
    var k=0;
    document.querySelectorAll("input[type='file']").forEach(input => { 
      input.addEventListener('change', function () {   
        var fileLength = this.files.length;
        for(var i=0; i<fileLength; i++) {  
          const file = this.files[i];
          //console.log(this.files); 
          var inptId = this.id;
          //const parentBox = this.closest('._box');
          const myArray = inptId.split("_");
          //let existingPreview = parentBox.querySelector('.file-preview');
          /*if (existingPreview) {
            existingPreview.remove(); 
          }*/
          $(".fill_err").remove();
          var parntId = myArray[1];
          var docId = myArray[2]; 

          if (file) { 
            let previewElement;
            const fileType = file.type;

            if (fileType.startsWith('image/')) {
              const imgURL = URL.createObjectURL(file);
              previewElement = document.createElement('img');
              previewElement.src = imgURL;
              previewElement.alt = file.name;
              previewElement.style.maxWidth = '100px';
              previewElement.style.height = '80px';
              previewElement.style.display = 'block';
              previewElement.style.marginTop = '8px';
            } else if (fileType === 'application/pdf') {
              previewElement = document.createElement('div');
              previewElement.innerHTML = `<i class="fa-solid fa-file-pdf text-danger me-1"></i> ${file.name}`;
              previewElement.style.fontSize = '14px';
              previewElement.style.marginTop = '8px';
            }

            var form_data = new FormData();                  
            form_data.append('imgfile', file);
            form_data.append('chkoutId', parntId);
            form_data.append('docId', docId);
            $.ajax({
                url: BASE_URL+'/admin/oci-draftstore', // <-- point to server-side PHP script 
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                dataType: 'json',  // <-- what to expect back from the PHP script, if anything
                processData: false,
                cache:false,
                data: form_data,
                contentType:false,                         
                type: 'post',
                success: function(obj_res){  
                    //const obj = JSON.parse(obj_res); 

                    if(obj_res.result == "true") {
                      if(fileType === 'application/pdf') {  
                        $("#preview_"+parntId+'_'+docId).append('<li class="position-relative" id="tgimg_'+obj_res.insertId+'"><img width="40" height="40" src="'+IMG_URL+'/uploads/checkout_docs/document/pdf_icon.png" alt="user image 1" ><sup onclick="rmv_ele('+obj_res.insertId+');"><i class="fa-solid fa-circle-xmark"></i></sup></li>');  
                      
                        {{--$("#mobpreview_"+parntId+'_'+docId).append('<li class="d-flex align-items-center justify-content-start gap-3" id="mobtgimg_'+obj_res.insertId+'"><div class="_left"><img width="36" height="36" src="'+IMG_URL+'/uploads/checkout_docs/document/pdf_icon.png" alt="user image 1"><span></span></div><div class="_right d-flex align-items-center gap-2"><a href="javascript:void(0)" class="_view_photo"><i class="fa-regular fa-eye"></i></a><a href="javascript:void(0)" onclick="rmv_ele('+obj_res.insertId+');" class="_delete_photo"><i class="fa-solid fa-trash-can"></i></a></div></li>'); 
                        $("#mobpreview_" + parntId + "_" + docId).parent().addClass("show"); --}}
                      }
                      else { 
                        $("#preview_"+parntId+'_'+docId).append('<li class="position-relative" id="tgimg_'+obj_res.insertId+'"><img width="40" height="40" src="'+obj_res.docPath+'" alt="user image 1" data-bs-toggle="modal" data-bs-target="#exampleModal" ><sup onclick="rmv_ele('+obj_res.insertId+');"><i class="fa-solid fa-circle-xmark"></i></sup></li>');
                      
                        {{--$("#mobpreview_"+parntId+'_'+docId).append('<li class="d-flex align-items-center justify-content-start gap-3" id="mobtgimg_'+obj_res.insertId+'"><div class="_left"><img width="36" height="36" src="'+BASE_URL+'/'+obj_res.docPath+'" alt="user image 1"><span></span></div><div class="_right d-flex align-items-center gap-2"><a href="javascript:void(0)" class="_view_photo" data-bs-toggle="modal" onclick=magnifireimg("'+BASE_URL+'/'+obj_res.docPath+'"); data-bs-target="#exampleModal"><i class="fa-regular fa-eye"></i></a><a href="javascript:void(0)" onclick="rmv_ele('+obj_res.insertId+');" class="_delete_photo"><i class="fa-solid fa-trash-can"></i></a></div></li>');
                        $("#mobpreview_" + parntId + "_" + docId).parent().addClass("show");--}}   
                      }

                    }
                },
                error: function (response) {
                    console.log(response);
                  }
            });
            
          }
        }
      });
      k++;
    });
  });
</script>