@extends('layouts.parents.master') 
@section('title')
    {{studentCommonName(auth()->guard('student')->user()->username).__(' | Port Folio')}}
@endsection
@section('headerTitle')
  {{__('Port Folio')}}
@endsection
<style>
    .bs-stepper-content .form-validation img {
        object-fit: cover;
        width: 100px !important;
        height: 100px !important;
        border-radius: 10px;
        margin-top: 9px;
        margin-left: auto;
        float: right;
    }

    @media (max-width:767px)
    {
        .bs-stepper-header {
            flex-wrap: wrap;
            margin: 18px 0px 10px;
        }
        .bs-stepper .line, .bs-stepper-line {
            display: none;
        }
        .bs-stepper-header .step {
            width: 100%;
        }
        .dstepper-block form {
            padding: 0 15px;
        }
        .dstepper-block form button.btn.btn-primary {
            padding: 8px 7px;
            font-size: 15px;
            border: 0;
        }
    }
    
</style>

@section('content')
 <!-- Content Wrapper. Contains page content -->
 <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
     <!--  <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href=""{{route('student.parent.dashboard')}}">Home</a></li>
              <li class="breadcrumb-item active">Change Password</li>
            </ol>
          </div>
        </div>
      </div> -->
    </section>
    <section class="content">
      <div class="container-fluid">
        <a href="{{route('student.parent.student-document')}}" class="btn btn-primary btn-sm">Go to Documents Section</a>
        <a href="{{route('student.parent.viewportfolio')}}" class="btn btn-primary btn-sm">Go to My Self</a>
        <div class="row">
		    <div class="col-md-12"> 
            <div class="card card-primary">
              <div class="card-body p-0">
                <div class="bs-stepper">
                  <div class="bs-stepper-header" role="tablist">
                    <div class="step" data-target="#student-information-part">
                      <button type="button" class="step-trigger" role="tab" aria-controls="student-information-part" id="student-information-part-trigger" onclick="stepper.to(1)">
                        <span class="bs-stepper-circle">1</span>
                        <span class="bs-stepper-label">Student`s Information</span>
                      </button>
                    </div>
                    <div class="line"></div>
                    <div class="step" data-target="#father-information-part">
                      <button type="button" class="step-trigger" role="tab" aria-controls="father-information-part" id="father-information-part-trigger" onclick="stepper.to(2)">
                        <span class="bs-stepper-circle">2</span>
                        <span class="bs-stepper-label">Father`s Information</span>
                      </button>
                    </div>
                    <div class="line"></div>
                    <div class="step" data-target="#mother-information-part">
                      <button type="button" class="step-trigger" role="tab" aria-controls="mother-information-part" id="mother-information-part-trigger" onclick="stepper.to(3)">
                        <span class="bs-stepper-circle">3</span>
                        <span class="bs-stepper-label">Mother`s Information</span>
                      </button>
                    </div>
                    <div class="line"></div>
                    <div class="step" data-target="#information-part">
                      <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger" onclick="stepper.to(4)">
                        <span class="bs-stepper-circle">4</span>
                        <span class="bs-stepper-label">Guardian's Information</span>
                      </button>
                    </div>
                  </div>
                  <div class="bs-stepper-content">
                    <div id="student-information-part" class="content" role="tabpanel" aria-labelledby="student-information-part-trigger">
                      <form id="studentInformation" action="{{route('student.parent.update-portfolio')}}" method="post" enctype="multipart/form-data">
                          <input type="hidden" name="actionType" value="1">
                            <div class="form-group row">
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">Name</label>
                                  <input type="text" name="name" class="form-control" placeholder="Name" aria-label="Name" required value="{{$studentDetail->name}}" readonly/>
                              </div>
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">Class</label>
                                  <input type="text" class="form-control" placeholder="Class" aria-label="Name" required value="{{$studentDetail->class}}" readonly />
                              </div>
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">Section</label>
                                  <input type="text" class="form-control" placeholder="Class" aria-label="Name" required  value="{{$studentDetail->sec}}" readonly />
                              </div>
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">Stream</label>
                                  <input type="text" name="stream" class="form-control" placeholder="Stream" aria-label="Caste" required value="{{$studentDetail->stream}}" readonly oninput="this.value = this.value.toUpperCase();" />
                              </div>
                            </div>  
                            <div class="form-group row">
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">Date of Birth</label>
                                  <input type="text" name="dob" class="form-control" placeholder="Section" aria-label="Section" required readonly value="{{date('d-m-Y', strtotime($studentDetail->dob))}}" />
                              </div>
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">Whatsapp Mobile</label>
                                  <input type="text" name="phn" class="form-control" placeholder="Section" aria-label="Section" required readonly  value="{{$studentDetail->phn}}" />
                              </div>
                          </div>
                          <div class="form-group row">
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">Pen Number</label>
                                  <input type="text" name="pen_number" class="form-control" placeholder="Pen Number" aria-label="Name" required value="{{$studentDetail->pen_number}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                              </div>
                             <!--  <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">SRN Number</label>
                                  <input type="text" name="srn_number" class="form-control" placeholder="SRN Number" aria-label="Name" required  value="{{$studentDetail->srn_number}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} />
                              </div> -->
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">Caste(Gen.,BC,OBC,SC Other)</label>
                                  <input type="text" name="caste" class="form-control" placeholder="Caste" aria-label="Caste" required value="{{$studentDetail->caste}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                          </div>
                          <div class="form-group row">
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">House</label>
                                  <input type="text" name="house" class="form-control" placeholder="House" aria-label="Name" required value="{{$studentDetail->house}}" readonly />
                              </div>
                              <div class="col-sm-6 form-validation">
                                  <label class="col-form-label">Dorm</label>
                                  <input type="text" name="dorm" class="form-control" placeholder="Dorm" aria-label="Name" required  value="{{$studentDetail->dorm}}" readonly />
                              </div>
                          </div>
                          <div class="form-group row">
                                <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Blood Group</label>
                                  <input type="text" name="blood_group" class="form-control" placeholder="Blood Group" aria-label="Name" required value="{{$studentDetail->blood_group}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                                </div>
                                <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Weight(Kg.)</label>
                                  <input type="text" name="weight" class="form-control" placeholder="Weight" aria-label="Name" required value="{{$studentDetail->weight}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                                </div>
                                <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Height(cm)</label>
                                  <input type="text" name="height" class="form-control" placeholder="Weight" aria-label="Name" required value="{{$studentDetail->height}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                                </div>
                          </div>
                          <div class="form-group row">
                              <div class="col-sm-12 form-validation">
                                  <label class="col-form-label">Allergy</label>
                                  <input type="text" name="allergy" class="form-control" placeholder="Allergy" aria-label="Name" required value="{{$studentDetail->allergy}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                          </div>
                          <div class="form-group row">
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Apaar ID</label>
                                  <input type="text" name="apaar_id" class="form-control" placeholder="Apaar ID" aria-label="Name" required value="{{$studentDetail->apaar_id}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Bank Account Number</label>
                                  <input type="text" name="bank_ac" class="form-control" placeholder="Bank Account Number" aria-label="Name" required value="{{$studentDetail->bank_ac}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Family ID.(Must for Haryana Domicile)</label>
                                  <input type="text" name="srn" class="form-control" placeholder="Family ID.(Must for Haryana Domicile)" aria-label="Name" value="{{$studentDetail->srn}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                          </div>
                          <div class="form-group row">
                              <div class="col-sm-12 form-validation">
                                  <label class="col-form-label">Address</label>
                                  <input type="text" name="ad1" class="form-control" placeholder="Name" aria-label="Name" required value="{{$studentDetail->ad1}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                          </div>
                          <div class="form-group row">
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">City</label>
                                  <input type="text" name="city" class="form-control" placeholder="City" aria-label="Name" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} value="{{$studentDetail->city}}" oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">Pin</label>
                                  <input type="text" name="pin" class="form-control" placeholder="Pin" aria-label="Section" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} value="{{$studentDetail->pin}}" oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">State</label>
                                  <input type="text" name="state" class="form-control" placeholder="State" aria-label="Section" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} value="{{$studentDetail->state}}" oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">Country</label>
                                  <input type="text" name="country" class="form-control" placeholder="Country" aria-label="Section" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} value="{{$studentDetail->country}}" oninput="this.value = this.value.toUpperCase();" />
                              </div>
                          </div>
                        
                          <div class="form-group row">    
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Adhaar No.</label>
                                  <input type="text" name="std_adhar" class="form-control" placeholder="Class" aria-label="Name" required value="{{$studentDetail->std_adhar}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                              </div>

                              @php 
                                    $expiresAt = now()->addHours(24); // Expiration time (for example, 10 minutes)
                                    $student_image = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'Pic.jpg'; 
                              @endphp
                              <div class="col-sm-4 form-validation">
                                @if(!Storage::disk('s3')->exists($student_image))
                                    <label class="col-form-label">Student Photo(jpg Only)</label>
                                    <input type="file" name="student_profile_image" class="form-control" id="student_profile_image_input" accept=".jpg, .jpeg, .png" />
                                    <a href="{{Storage::disk('s3')->exists($student_image) ? Storage::disk('s3')->temporaryUrl($student_image, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($student_image) ? Storage::disk('s3')->temporaryUrl($student_image, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="student_profile_image"></a>
                                @else
                                    <a href="{{Storage::disk('s3')->exists($student_image) ? Storage::disk('s3')->temporaryUrl($student_image, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($student_image) ? Storage::disk('s3')->temporaryUrl($student_image, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="student_profile_image"></a>
                                @endif
                                </div>
                          </div>

                          <div cs="form-group row">
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">Sibling Details</label>
                              </div>
                          </div>  
                          @php
                            if($studentDetail->siblings != '') {
                                $siblingDetail = json_decode($studentDetail->siblings);
                            } else {
                               $siblingDetail = [];
                            }
                          @endphp  
                          <div class="form-group row">
                               <div class="col-sm-2 form-validation">
                                  <label class="col-form-label">Sibling 1</label>
                               </div>
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">Name</label>
                                  <input type="text" name="sibling_name[]" class="form-control" placeholder="Sibling 1 Name" aria-label="Name" value="{{$siblingDetail[0]->name??''}}" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              <div class="col-sm-2 form-validation">
                                  <label class="col-form-label">Married/Unmarried</label>
                                  <select name="sibling_status[]" class="form-control" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }}>
                                    @if(isset($siblingDetail[0]->merrital_statis) && $siblingDetail[0]->merrital_statis == 'Married')
                                      <option value="Married" selected>Married</option>
                                      <option value="Unmarried">Unmarried</option>
                                    @else
                                        <option value="Married">Married</option>
                                        <option value="Unmarried" selected>Unmarried</option>
                                    @endif  
                                  </select> 
                              </div>
                              <div class="col-sm-2 form-validation">
                                  <label class="col-form-label">DOB</label>
                                  <input type="date" name="sibling_dob[]" class="form-control" placeholder="DOB" aria-label="Caste" value="{{$siblingDetail[0]->dob??''}}" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }}/>
                              </div>
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">Occupation</label>
                                  <input type="text" name="sibling_occupation[]" class="form-control" placeholder="Occupation" aria-label="Caste" value="{{$siblingDetail[0]->occupation??''}}" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                           </div>
                           <div class="form-group row"> 
                               <div class="col-sm-2 form-validation">
                                  <label class="col-form-label">Sibling 2</label>
                               </div>
                              <div class="col-sm-3 form-validation">
                                  <label class="col-form-label">Name</label>
                                  <input type="text" name="sibling_name[]" class="form-control" placeholder="Sibling 2 Name" aria-label="Name"  value="{{$siblingDetail[1]->name??''}}" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              <div class="col-sm-2 form-validation">
                                  <label class="col-form-label">Married/Unmarried</label>
                                  <select name="sibling_status[]" class="form-control" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }}>
                                    @if(isset($siblingDetail[1]->merrital_statis) && $siblingDetail[1]->merrital_statis == 'Married')
                                      <option value="Married" selected>Married</option>
                                      <option value="Unmarried">Unmarried</option>
                                    @else
                                        <option value="Married">Married</option>
                                        <option value="Unmarried" selected>Unmarried</option>
                                    @endif  
                                  </select> 
                              </div>
                              <div class="col-sm-2 form-validation">
                                  <label class="col-form-label">DOB</label>
                                  <input type="date" name="sibling_dob[]" class="form-control" placeholder="DOB" aria-label="Caste" value="{{$siblingDetail[1]->dob??''}}" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }} />
                              </div>
                              <div class="col-sm-3 form-validation">
                              <label class="col-form-label">Occupation</label>
                                  <input type="text" name="sibling_occupation[]" class="form-control" placeholder="Occupation" aria-label="Caste" value="{{$siblingDetail[1]->occupation??''}}" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                            </div>
                            <div class="form-group row">   
                                <div class="col-sm-2 form-validation">
                                  <label class="col-form-label">Sibling 3</label>
                               </div>
                              <div class="col-sm-3 form-validation">
                              <label class="col-form-label">Name</label>
                                  <input type="text" name="sibling_name[]" class="form-control" placeholder="Sibling 3 Name" aria-label="Name" value="{{$siblingDetail[2]->name??''}}" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              <div class="col-sm-2 form-validation">
                              <label class="col-form-label">Married/Unmarried</label>
                                  <select name="sibling_status[]" class="form-control" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }}>
                                    @if(isset($siblingDetail[1]->merrital_statis) && $siblingDetail[2]->merrital_statis == 'Married')
                                      <option value="Married" selected>Married</option>
                                      <option value="Unmarried">Unmarried</option>
                                    @else
                                        <option value="Married">Married</option>
                                        <option value="Unmarried" selected>Unmarried</option>
                                    @endif  
                                  </select> 
                              </div>
                              <div class="col-sm-2 form-validation">
                              <label class="col-form-label">DOB</label>
                                  <input type="date" name="sibling_dob[]" class="form-control" placeholder="DOB" aria-label="Caste" value="{{$siblingDetail[2]->dob??''}}" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }} />
                              </div>
                              <div class="col-sm-3 form-validation">
                                   <label class="col-form-label">Occupation</label>
                                  <input type="text" name="sibling_occupation[]" class="form-control" placeholder="Occupation" aria-label="Caste" value="{{$siblingDetail[2]->occupation??''}}" {{ $studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                          </div>
                          @if($studentDetail->admin_open == 'N')
                            <button type="button" class="btn btn-success" onclick="stepper.next()">Next</button>
                          @else
                            <button id="studentInformationButton" type="button" class="btn btn-success" onclick="return saveAndNext(1);">Next</button>
                            <button type="button" class="btn btn-primary" onclick="stepper.next()" style="float:right;">Next Without Save</button>
                          @endif 
                      </form>   
                     <br/><br/><br/><br/>
                    </div>
                    <div id="father-information-part" class="content" role="tabpanel" aria-labelledby="father-information-part-trigger">
                        <form id="fatherInformation" action="{{route('student.parent.update-portfolio')}}" method="post" enctype="multipart/form-data">
                          <input type="hidden" name="actionType" value="2">
                          <div class="form-group row">
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Name</label>
                                  <input type="text" name="fname" class="form-control" placeholder="Name" aria-label="Name" required value="{{$studentDetail->fname}}" readonly />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Email</label>
                                  <input type="email" name="f_email" class="form-control" placeholder="Email" aria-label="Name" required  value="{{$studentDetail->f_email}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Qualification</label>
                                  <input type="text" name="f_qua" class="form-control" placeholder="Qualification" aria-label="Section" required value="{{$studentDetail->f_qua}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                          </div>
                          <div class="form-group row">    
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Mobile Number</label>
                                  <input type="text" name="no1" minlength="10" maxlength="10" class="form-control" placeholder="Mobile Number" aria-label="Section" required value="{{$studentDetail->no1}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Adhaar Number</label>
                                  <input type="text" name="f_adhar" minlength="12" maxlength="12" class="form-control" placeholder="Adhaar Number" aria-label="Section" required value="{{$studentDetail->f_adhar}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Occupation</label>
                                  <input type="text" name="f_occupation" class="form-control" placeholder="Occupation" aria-label="Section" required value="{{$studentDetail->f_occupation}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Marriage Date</label>
                                  <input type="date" name="fm_doa" class="form-control" placeholder="" aria-label="Section" required value="{{$studentDetail->fm_doa}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  @php 
                                    $f_dob = $studentDetail->f_dob;
                                    if ($f_dob == 0) { 
                                        $f_dob = '';
                                    }
                                  @endphp
                                  <label class="col-form-label">Date of Birth</label>
                                  <input type="date" name="f_dob" class="form-control" placeholder="Date of Birth" aria-label="Section" required value="{{$studentDetail->f_dob}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }}/>
                              </div>
                              @php 
                                  $expiresAt = now()->addHours(24); // Expiration time (for example, 10 minutes)
                                  $father_image = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'FPic.jpg';
                              @endphp
                              <div class="col-sm-4 form-validation">
                               
                                  <label class="col-form-label">Image(jpg Only)</label>
                                  <input type="file" name="father_profile_image" class="form-control" id="father_profile_image_input" accept=".jpg, .jpeg, .png" />
                              
                                  <a href="{{Storage::disk('s3')->exists($father_image) ? Storage::disk('s3')->temporaryUrl($father_image, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($father_image) ? Storage::disk('s3')->temporaryUrl($father_image, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="father_profile_image"></a>
                              </div>
                          </div>
                          <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                          @if($studentDetail->admin_open == 'N')
                            <button type="button" class="btn btn-success" onclick="stepper.next()">Next</button>
                          @else
                            <button id="fatherInformationButton" type="button" class="btn btn-success" onclick="return saveAndNext(2);">Next</button>
                            <button type="button" class="btn btn-primary" onclick="stepper.next()" style="float:right;">Next Without Save</button>
                          @endif  
                        </form>  
                        <br/><br/><br/><br/>
                    </div>
                    <div id="mother-information-part" class="content" role="tabpanel" aria-labelledby="mother-information-part-trigger">
                      <form id="motherInformation" action="{{route('student.parent.update-portfolio')}}" method="post" enctype="multipart/form-data">
                          <input type="hidden" name="actionType" value="3">
                          <div class="form-group row">
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Name</label>
                                  <input type="text" name="mname" class="form-control" placeholder="Name" aria-label="Name" required value="{{$studentDetail->mname}}" readonly />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Email</label>
                                  <input type="email" name="m_email" class="form-control" placeholder="Email" aria-label="Name" required  value="{{$studentDetail->m_email}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Qualification</label>
                                  <input type="text" name="m_qua" class="form-control" placeholder="Qualification" aria-label="Section" required value="{{$studentDetail->m_qua}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                          </div>
                          <div class="form-group row">    
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Mobile Number</label>
                                  <input type="text" name="no2" minlength="10" maxlength="10" class="form-control" placeholder="Mobile Number" aria-label="Section" required value="{{$studentDetail->no2}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Adhaar Number</label>
                                  <input type="text" name="m_adhar" minlength="12" maxlength="12" class="form-control" placeholder="Adhaar Number" aria-label="Section" required value="{{$studentDetail->m_adhar}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  <label class="col-form-label">Occupation</label>
                                  <input type="text" name="m_occupation" class="form-control" placeholder="Occupation" aria-label="Section" required value="{{$studentDetail->m_occupation}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                              </div>
                              <div class="col-sm-4 form-validation">
                                  @php 
                                    $m_dob = $studentDetail->m_dob;
                                    if ($m_dob == 0) { 
                                        $m_dob = '';
                                    }
                                  @endphp
                                  <label class="col-form-label">Date of Birth</label>
                                  <input type="date" name="m_dob" class="form-control" placeholder="Date of Birth" aria-label="Section" required value="{{$studentDetail->m_dob}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} />
                              </div>
                              @php 
                                  $expiresAt = now()->addHours(24); // Expiration time (for example, 10 minutes)
                                  $mother_image = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'MPic.jpg';
                              @endphp
                              <div class="col-sm-4 form-validation">
                               
                                  <label class="col-form-label">Image(jpg Only)</label>
                                  <input type="file" name="mother_profile_image" class="form-control" id="mother_profile_image_input" accept=".jpg, .jpeg, .png" />
                               
                                  <a href="{{Storage::disk('s3')->exists($mother_image) ? Storage::disk('s3')->temporaryUrl($mother_image, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($mother_image) ? Storage::disk('s3')->temporaryUrl($mother_image, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="mother_profile_image"></a>
                              </div>
                          </div>
                          <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                          @if($studentDetail->admin_open == 'N')
                            <button type="button" class="btn btn-success" onclick="stepper.next()">Next</button>
                          @else
                            <button id="motherInformationButton" type="button" class="btn btn-success" onclick="return saveAndNext(3);">Next</button>
                            <button type="button" class="btn btn-primary" onclick="stepper.next()" style="float:right;">Next Without Save</button>
                          @endif  
                      </form>  
                      <br/><br/><br/><br/>
                    </div>
                    <div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger">
                      <form id="guardianInformation" action="{{route('student.parent.update-portfolio')}}" method="post" enctype="multipart/form-data">
                            <input type="hidden" name="actionType" value="4">
                            <h3>Guardian 1</h3>
                            <div class="form-group row">
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Name</label>
                                    <input type="text" name="guardian" class="form-control" placeholder="Name" aria-label="Name" required value="{{$studentDetail->guardian}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                                </div>
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Email</label>
                                    <input type="email" name="email_guardian" class="form-control" placeholder="Email" aria-label="Name" required  value="{{$studentDetail->email_guardian}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                                </div>
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Address</label>
                                    <input type="text" name="add_guardian" class="form-control" placeholder="Address" aria-label="Section" required value="{{$studentDetail->add_guardian}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                                </div>
                            </div>
                            <div class="form-group row">    
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Mobile Number</label>
                                    <input type="text" name="mobile_guardian" minlength="10" maxlength="10" class="form-control" placeholder="Mobile Number" aria-label="Section" required value="{{$studentDetail->mobile_guardian}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                                </div>
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Adhaar Number</label>
                                    <input type="text" name="ad_guardian" minlength="12" maxlength="12" class="form-control" placeholder="Adhaar Number" aria-label="Section" required value="{{$studentDetail->ad_guardian}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                                </div>
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Occupation</label>
                                    <input type="text" name="gd_occupation" class="form-control" placeholder="Occupation" aria-label="Section" required value="{{$studentDetail->gd_occupation}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                                </div>
                                @php 
                                    $expiresAt = now()->addHours(24);
                                    $guardian_image = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'GPic.jpg';
                                @endphp
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Image(jpg Only)</label>
                                    <input type="file" name="guardian_profile_image" class="form-control" id="guardian_profile_image_input" accept=".jpg, .jpeg, .png" />
                                    <a href="{{Storage::disk('s3')->exists($guardian_image) ? Storage::disk('s3')->temporaryUrl($guardian_image, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($guardian_image) ? Storage::disk('s3')->temporaryUrl($guardian_image, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="guardian_profile_image"></a>
                                </div>
                            </div>
                            <h3>Guardian 2</h3>
                            <div class="form-group row">
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Name</label>
                                    <input type="text" name="guardian_one" class="form-control" placeholder="Name" aria-label="Name" required value="{{$studentDetail->guardian_one}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                                </div>
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Email</label>
                                    <input type="email" name="email_guardian_one" class="form-control" placeholder="Email" aria-label="Name" required  value="{{$studentDetail->email_guardian_one}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                                </div>
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Address</label>
                                    <input type="text" name="add_guardian_one" class="form-control" placeholder="Address" aria-label="Section" required value="{{$studentDetail->add_guardian_one}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                                </div>
                            </div>
                            <div class="form-group row">    
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Mobile Number</label>
                                    <input type="text" name="mobile_guardian_one" minlength="10" maxlength="10" class="form-control" placeholder="Mobile Number" aria-label="Section" required value="{{$studentDetail->mobile_guardian_one}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                                </div>
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Adhaar Number</label>
                                    <input type="text" name="ad_guardian_one" minlength="12" maxlength="12" class="form-control" placeholder="Adhaar Number" aria-label="Section" required value="{{$studentDetail->ad_guardian_one}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.replace(/[^0-9]+/g, '');" />
                                </div>
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Occupation</label>
                                    <input type="text" name="gd_occupation_one" class="form-control" placeholder="Occupation" aria-label="Section" required value="{{$studentDetail->gd_occupation_one}}" {{$studentDetail->admin_open == 'N' ? 'readonly' : '' }} oninput="this.value = this.value.toUpperCase();" />
                                </div>
                                @php 
                                    $expiresAt = now()->addHours(24);
                                    $guardian_image = schoolRedisDetail()['code'].'/live-students/'.$studentDetail->admno.'GOnePic.jpg';
                                @endphp
                                <div class="col-sm-4 form-validation">
                                    <label class="col-form-label">Image(jpg Only)</label>
                                    <input type="file" name="guardian_one_profile_image" class="form-control" id="guardian_one_profile_image_input" accept=".jpg, .jpeg, .png" />
                                    <a href="{{Storage::disk('s3')->exists($guardian_image) ? Storage::disk('s3')->temporaryUrl($guardian_image, $expiresAt) : asset('students/images/no-image.jpg')}}" target="_blank"><img src="{{Storage::disk('s3')->exists($guardian_image) ? Storage::disk('s3')->temporaryUrl($guardian_image, $expiresAt) : asset('students/images/no-image.jpg')}}" style="width:200px;height:100px;" id="guardian_one_profile_image"></a>
                                </div>
                            </div>
                            <button type="button" class="btn btn-primary" onclick="stepper.previous()">Previous</button>
                            @if($studentDetail->admin_open != 'N')
                                <button id="guardianInformationButton" type="button" class="btn btn-success" onclick="return saveAndNext(4);">Save</button>
                            @endif  
                            
                      </form>  
                      <br/><br/><br/><br/>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            </div>			
		</div>
	  </div>
    </section>
 </div>
 @include("parents.modal")
@endsection
@push('web-scripts')
<script src="{{asset('adminlte/plugins/bs-stepper/js/bs-stepper.min.js')}}"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/cropperjs/dist/cropper.min.js"></script> -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script> -->
<script src="{{asset('js/cropper.min.js')}}"></script>
<script>
    let cropper, cropper_one, cropper_two, cropper_three, cropper_four, viewImage, hideModal; // Declare cropper instances globally
    let imagePreview = '';
    var fatherImage, motherImage, guardianImage, guardianOneImage, studentImage; // Declare cropper instances globally
    const cropSaveButton = document.getElementById('crop-save');
    const imageTypeInput = document.getElementById('image_type');

    function resizeAndCompressImage(canvas, maxWidth = 800, maxHeight = 800, quality = 0.7) {
        const ratio = Math.min(maxWidth / canvas.width, maxHeight / canvas.height); // Calculate ratio for resizing
        const newWidth = canvas.width * ratio;
        const newHeight = canvas.height * ratio;
        
        // Create a new canvas for the resized image
        const resizedCanvas = document.createElement('canvas');
        const resizedContext = resizedCanvas.getContext('2d');
        
        // Set new canvas dimensions
        resizedCanvas.width = newWidth;
        resizedCanvas.height = newHeight;
        
        // Draw the resized image onto the new canvas
        resizedContext.drawImage(canvas, 0, 0, newWidth, newHeight);

        // Compress the image with quality setting (0-1 range)
        const compressedImage = resizedCanvas.toDataURL('image/jpeg', quality); // Using 'image/jpeg' for compression
        
        return compressedImage;
    }

    function initializeCropper(imageSrc, type) {

        if (type === 'Father' && cropper) {
            cropper.destroy();
        }

        if (type === 'Mother' && cropper_one) {
            cropper_one.destroy();
        }

        if (type === 'Guardian' && cropper_two) {
            cropper_two.destroy();
        }

        if (type === 'GuardianOne' && cropper_three) {
            cropper_three.destroy();
        }

        if (type === 'Student' && cropper_four) {
            cropper_four.destroy();
        }
        
        if (type === 'Father') {
            imagePreview = document.getElementById('father-image-preview');
            imagePreview.src = imageSrc;
            cropper = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        } else if(type == 'Mother') {
            imagePreview = document.getElementById('mother-image-preview');
            imagePreview.src = imageSrc;
            cropper_one = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        } else if(type == 'Guardian') {
            imagePreview = document.getElementById('guardian-image-preview');
            imagePreview.src = imageSrc;
            cropper_two = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        } else if(type == 'GuardianOne') {
            imagePreview = document.getElementById('guardian-one-image-preview');
            imagePreview.src = imageSrc;
            cropper_three = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        } else if(type == 'Student') {
            imagePreview = document.getElementById('student-image-preview');
            imagePreview.src = imageSrc;
            cropper_four = new Cropper(imagePreview, {
                aspectRatio: NaN,
                viewMode: 0,
                autoCropArea: 0.8,
                responsive: true,
                cropBoxResizable: true,
                cropBoxMovable: true,
            });
        }     
    }
    document.addEventListener('DOMContentLoaded', function () {
        window.stepper = new Stepper(document.querySelector('.bs-stepper'))

         // Add event listener to each step button to toggle content visibility
        const stepButtons = document.querySelectorAll('.step-trigger');

        stepButtons.forEach(button => {
            button.addEventListener('click', function () {
                // Get the target content section
                const targetContent = document.querySelector(this.getAttribute('aria-controls'));

                // Toggle the visibility of the target content
                if (targetContent.style.display === 'none') {
                    targetContent.style.display = 'block';
                } else {
                    targetContent.style.display = 'none';
                }
            });
        });
    });

    async function saveAndNext(i) {
        let form;
        let formData;
        let submitButton;
        let originalText;
        let messageText;
        let actionType;
        switch(i) {
            case 1:
              form = document.getElementById('studentInformation');
              formData = new FormData(form);
              formData.append('studentImage', studentImage);
              submitButton = $("#studentInformationButton");
              originalText = submitButton.text();
              messageText = 'Stident informations has been updated';
              actionType = false;
              break;
            // Repeat this for other steps (Father, Mother, Guardian)
            case 2:
              // Collect father info
              form = document.getElementById('fatherInformation');
              formData = new FormData(form);
              formData.append('fatherImage', fatherImage);
              submitButton = $("#fatherInformationButton");
              originalText = submitButton.text();
              messageText = 'Father information has been updated';
              actionType = false;
              break;
            case 3:
              // Collect mother info
              form = document.getElementById('motherInformation');
              formData = new FormData(form);
              formData.append('motherImage', motherImage);
              submitButton = $("#motherInformationButton");
              originalText = submitButton.text();
              messageText = 'Mother information has been updated';
              actionType = false;
              break;
            case 4:
              // Collect guardian info
              form = document.getElementById('guardianInformation');
              formData = new FormData(form);
              formData.append('guardianImage', guardianImage);
              formData.append('guardianOneImage', guardianOneImage);
              submitButton = $("#guardianInformationButton");
              originalText = submitButton.text();
              messageText = 'Guardian information has been updated';
              actionType = false;
              break;
        }

        // AJAX request options
        const options = {
            type:  'POST',
            data: formData,
            url:  "{{ route('student.parent.update-portfolio') }}",  // Your route
            headers: { Accept: "application/json" },
            dataType: 'json',
            processData: false,  // Necessary for sending FormData
            contentType: false,  // Necessary for sending FormData
            beforeSend: function () {
                submitButton.prop('disabled', true).text('Updating...');  // Disable button
            },
            complete: function () {
                submitButton.prop('disabled', false).text(originalText);  // Re-enable button
            }
        };

        try {
            if(i == 4) {
                Swal.fire({
                    title: 'Warning!',
                    text: 'After Saving no changes can be done later, Make sure all information are correct',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#d33',
                    cancelButtonColor: '#3085d6',
                    cancelButtonText: 'Re-Verify',
                    confirmButtonText: 'OK'
                }).then(async (result) => {
                    if (result.isConfirmed) {
                        const response = await ajaxRequest(options);  // Make the AJAX request
                        if(response.success) {
                            Swal.fire({
                                title: 'Success!',
                                text: response.message,
                                icon: 'success',
                                timer: 1000,
                                timerProgressBar: true,
                                willClose: () => {
                                    window.location.href = "{{route('student.parent.student-document')}}"; //Will take you to Google.
                                }
                            })
                        }
                    }
                });
            } else {
                const response = await ajaxRequest(options);  // Make the AJAX request
                if(response.success) {
                    Swal.fire({
                        title: 'Success!',
                        text: response.message,
                        icon: 'success',
                        timer: 1000,
                        timerProgressBar: true,
                        willClose: () => {
                            window.stepper.next();
                        }
                    })
                }
            }
        } catch (error) {
            console.log(error);
            if (error.status === 'error') {
                const errors = error.xhr.responseJSON.errors;  // Handle validation errors
                await renderErrors(errors);  // Use a common function to render errors
            } else {
                alert('An error occurred. Please try again.');  // Generic error message
            }
        }
    }

     // Function to handle the image preview update
    /* function handleImagePreview(inputId, imageId) {
        const inputElement = document.getElementById(inputId);
        const imageElement = document.getElementById(imageId);
        inputElement.addEventListener('change', function(event) {
        const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    imageElement.src = e.target.result; // Update the image preview
                };
                reader.readAsDataURL(file); // Read the selected file as a data URL (base64 encoded)
            }
        });
    } */

    $(document).on("change", "#father_profile_image_input", function(e) {
       /*  let imageElement = document.getElementById('father_profile_image');
        let file = event.target.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function(e) {
                imageElement.src = e.target.result; // Update the image preview
            };
            reader.readAsDataURL(file); // Read the selected file as a data URL (base64 encoded)
        } */
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'Father'; // Set image type
            initializeCropper(event.target.result, 'Father');
            $('#imageFatherCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });

    $(document).on("change", "#mother_profile_image_input", function(e) {
        /* let imageElement = document.getElementById('mother_profile_image');
        let file = event.target.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function(e) {
                imageElement.src = e.target.result; // Update the image preview
            };
            reader.readAsDataURL(file); // Read the selected file as a data URL (base64 encoded)
        } */
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'Mother'; // Set image type
            initializeCropper(event.target.result, 'Mother');
            $('#imageMotherCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });

    $(document).on("change", "#guardian_profile_image_input", function(e) {
      /*   let imageElement = document.getElementById('guardian_profile_image');
        let file = event.target.files[0];
        if (file) {
            let reader = new FileReader();
            reader.onload = function(e) {
                imageElement.src = e.target.result; // Update the image preview
            };
            reader.readAsDataURL(file); // Read the selected file as a data URL (base64 encoded)
        } */
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'Guardian'; // Set image type
            initializeCropper(event.target.result, 'Guardian');
            $('#imageGuardianCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });

    $(document).on("change", "#guardian_one_profile_image_input", function(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'GuardianOne'; // Set image type
            initializeCropper(event.target.result, 'GuardianOne');
            $('#imageGuardianOneCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });

    $(document).on("change", "#student_profile_image_input", function(e) {
        var reader = new FileReader();
        reader.onload = function (event) {
            imageTypeInput.value = 'Student'; // Set image type
            initializeCropper(event.target.result, 'Student');
            $('#imageStudentCropModal').modal('show');
        };
        reader.readAsDataURL(e.target.files[0]);
    });


    $(document).on("click", "#father-crop-save, #mother-crop-save,  #guardian-crop-save,  #guardian-one-crop-save, #student-crop-save", function(e) {
        e.preventDefault();
        let canvas;
        if (imageTypeInput.value === 'Father' && cropper) {
            canvas = cropper.getCroppedCanvas();
            fatherImage = resizeAndCompressImage(canvas); 
            viewImage = document.getElementById('father_profile_image');
            hideModal = $("#imageFatherCropModal");
        } else if (imageTypeInput.value === 'Mother' && cropper_one) {
            canvas = cropper_one.getCroppedCanvas();
            motherImage = resizeAndCompressImage(canvas); 
            viewImage = document.getElementById('mother_profile_image');
            hideModal = $("#imageMotherCropModal");
        } else if (imageTypeInput.value === 'Guardian' && cropper_two) {
            canvas = cropper_two.getCroppedCanvas();
            guardianImage = resizeAndCompressImage(canvas);  
            viewImage = document.getElementById('guardian_profile_image');
            hideModal = $("#imageGuardianCropModal");
        } else if (imageTypeInput.value === 'GuardianOne' && cropper_three) {
            canvas = cropper_three.getCroppedCanvas();
            guardianOneImage = resizeAndCompressImage(canvas);  
            viewImage = document.getElementById('guardian_one_profile_image');
            hideModal = $("#imageGuardianOneCropModal");
        } else if (imageTypeInput.value === 'Student' && cropper_four) {
            canvas = cropper_four.getCroppedCanvas();
            studentImage = resizeAndCompressImage(canvas);  
            viewImage = document.getElementById('student_profile_image');
            hideModal = $("#imageStudentCropModal");
        } 

        if (canvas) {
            const croppedImage = canvas.toDataURL('image/png');
            viewImage.src = croppedImage;
            viewImage.style.display = 'block';
            hideModal.modal('hide');
        }
    });


   /*  handleImagePreview('adhaarInput', 'adhaar_image');
    handleImagePreview('dob_certificate_input', 'dob_certificate_image');
    handleImagePreview('mark_sheet_input', 'mark_sheet_image');
    handleImagePreview('transfer_certificate_input', 'transfer_certificate_image');
    handleImagePreview('school_living_certificate_input', 'school_living_certificate_image');
    handleImagePreview('character_certificate_input', 'character_certificate_image');
    handleImagePreview('pb_certificate_input', 'pb_certificate_image');
    handleImagePreview('pass_book_input', 'pass_book_image'); */
   /*  handleImagePreview('father_profile_image_input', 'father_profile_image');
    handleImagePreview('mother_profile_image_input', 'mother_profile_image');
    handleImagePreview('guardian_profile_image_input', 'guardian_profile_image'); */
</script>
@endpush