@extends('fronted.layout.main')
@section('adcontent')
<link rel="stylesheet" href="{{asset('assets/css/registrationForm.css')}}">
<div class="container-fluid">
    @if(session()->has('StudentRegisterSuccess'))
    <script>
        Swal.fire({
            icon: "success",
            title: "Student Register",
            text: "{{session('StudentRegisterSuccess')}}",
        })
    </script>
    @endif
    <div class="container-fluid">
        <div class="card mt-3 p-0">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="adminhostel">
                        <h4 class="mx-2">{{$businessDetails['bussinessName']}}</h4>
                        <div class="d-flex justify-content-start align-items-center mb-2">
                            <span class="mx-2">
                                <i class="fa-solid fa-envelope fa-sm me-2"></i>{{$businessDetails['bussinessemail']}}
                            </span>
                            <span class="mx-2">
                                <i class="fa-solid fa-phone-volume fa-sm me-1"></i>{{$businessDetails['mobile1']}} {{ $businessDetails['mobile2'] }}
                            </span>
                        </div>
                        <p class="mx-2"><i class="fa-solid fa-house fa-sm me-1"></i>{{$businessDetails['address']}}</p>
                    </div>
                    <div class="adminhostel">
                        <img class="img-responsive object-fit-contain" src="{{$businessDetails['imgPath']}}" style="width:200px; height:100px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid my-2">
        <form id="registrationForm" action="{{route('registerstudentupdate',$candidateDetails->id)}}" method="post" enctype="multipart/form-data" novalidate>
            @csrf
            <div class="roomSeatAndFormNoDetail my-2">
                <div class="d-flex justify-content-between align-items-center flex-wrap g-1 gap-2">
                    <div class="form-no flex-fill">
                        <div class="input-group flex-nowrap">
                            <label for="formNo" class="input-group-text">
                                Registration No
                            </label>
                            <input type="number" min="0" value="{{ $candidateDetails->formno }}" name="formNo" id="formNo" class="form-control requiredReadonly" required aria-readonly="true" readonly>
                        </div>
                    </div>
                    <div class="room-no flex-fill">
                        <div class="input-group flex-nowrap">
                            <label for="roomNo" class="input-group-text">
                                Room No
                            </label>
                            <select class="form-select " name="roomNo" id="roomNo" value="{{$candidateDetails->roomno}}" disabled required>
                                <option value="">Select</option>
                                @foreach($roomNoList as $roomNo)
                                @if($roomNo == $candidateDetails->roomno)
                                <option selected value="{{$roomNo}}">{{$roomNo}}</option>
                                @else
                                <option value="{{$roomNo}}">{{$roomNo}}</option>
                                @endif
                                @endforeach
                            </select>
                        </div>

                    </div>
                    <div class="seat-no flex-fill">
                        <div class="input-group flex-nowrap">
                            <label for="seatNo" class="input-group-text">
                                Seat No
                            </label>
                            <select class="form-select" name="seatNo" id="seatNo" value="{{$candidateDetails->seetno}}" disabled required>
                                <option selected value="{{$candidateDetails->seetno}}">{{$candidateDetails->seetno}}</option>
                            </select>
                        </div>
                    </div>
                    <div class="reg-date flex-fill flex-nowrap ">
                        <div class="input-group flex-nowrap">
                            <label for="regDate" class="input-group-text">
                                Date
                            </label>
                            <select class="fa disabled-false" name="" id="multipleDateShow" style="font-size:0.6rem !important;width:100%;">
                                @foreach ($totalRegisterDates as $dates)
                                {!! $dates !!}
                                @endforeach
                            </select>
                            <input type="date" class="form-control" name="regDate" id="registrationDate" value="{{$candidateDetails->date}}" style="display:none;" required readonly>
                        </div>
                    </div>
                </div>
            </div>
            <div class="personal-candidateImgDiv">
                <div class="heading flex-fill w-100">
                    <h6 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase w-100">Personal Details</h6>
                </div>
                <div class="d-flex justify-content-between align-items-start align-items-md-start flex-md-wrap flex-lg-nowrap">
                    <div class="personal-detail flex-fill">
                        <div class="d-flex justify-content-between align-items-center flex-wrap g-2 gap-2">
                            <div class="candidateName flex-fill">
                                <div class="input-group">
                                    <label for="candidateName" class="input-group-text">Candidate Name</label>
                                    <input type="text" class="form-control characterRequired" name="candidateName" value="{{$candidateDetails->candidatename}}" id="candidateName" placeholder="Full Name" required>
                                </div>
                            </div>
                            <div class="dateOfBirht flex-fill">
                                <div class="input-group">
                                    <label for="dateOfBirth" class="input-group-text">Birth Date(mm/dd/yyyy)</label>
                                    <input type="date" class="form-control dateRequired" name="dateOfBirth" value="{{ $candidateDetails->dob }}" id="dateOfBirth" required>
                                </div>
                            </div>
                            <div class="proofId flex-fill">
                                <div class="input-group">
                                    <label for="proofId" class="input-group-text">Aadhar/VT/Dl/Id Proof</label>
                                    <input type="text" class="form-control numberRequired" value="{{$candidateDetails->valid}}" name="proofId" maxlength="12" id="proofId" placeholded="Aadhar/VT/Dl/Id Proof" required>
                                </div>
                            </div>
                            <div class="mobile-number flex-fill">
                                <div class="input-group">
                                    <label for="mobileNumber" class="input-group-text">Mobile Number</label>
                                    <input type="tel" class="form-control numberRequired" value="{{$candidateDetails->phone}}" name="mobileNumber" id="mobileNumber" placeholder="Mobile Number" required>
                                </div>
                            </div>
                            <div class="flex-fill">
                                <div class="input-group">
                                    <label for="email" class="input-group-text">Email</label>
                                    <input type="email" class="form-control" value="{{$candidateDetails->email}}" name="email" id="email" placeholder="Email" required>
                                </div>
                            </div>
                            <div class="flex-fill">
                                <div class="input-group">
                                    <label for="bloodGroup" class="input-group-text">Blood Group</label>
                                    <select name="blood" value="{{$candidateDetails->blood}}" id="bloodGroup" class="form-control" required>
                                        <option class="text-grey" disabled {{ !$candidateDetails->blood ? 'selected' : '' }}>--Select Blood Group--</option>
                                        @php
                                        $bloodGroups = ['O+', 'O-', 'A+', 'A-', 'B+', 'B-', 'AB+', 'AB-'];
                                        @endphp
                                        @foreach($bloodGroups as $group)
                                        <option value="{{ $group }}" {{ $candidateDetails->blood == $group ? 'selected' : '' }}>{{ $group }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="flex-fill">
                                <div class="input-group flex-nowrap">
                                    <label for="courseJobSelected" class="input-group-text">Course/Job Type</label>
                                    <div class="input-group-text">
                                        <input class="form-check-input mt-0" type="radio" name="courseJobSelect" value="coursetype" id="courseSelectRadio" data-bs-toggle="tooltip" {{ $candidateDetails->coursename === "coursetype" ? 'checked' : '' }} aria-label="Course Type" data-bs-placement="left" data-bs-original-title="Course Type">
                                    </div>
                                    <div class="input-group-text">
                                        <input class="form-check-input mt-0" type="radio" name="courseJobSelect" value="jobtype" id="jobSelectRadio" data-bs-toggle="tooltip" {{ $candidateDetails->coursename === "jobtype" ? 'checked' : '' }} aria-label="Job Type" data-bs-placement="right" data-bs-original-title="Job Type">
                                    </div>
                                    <input
                                        type="text"
                                        class="form-control"
                                        maxlength="50"
                                        name="courseDetail"
                                        id="courseDetailInput"
                                        placeholder="Course Details"
                                        value="{{ $candidateDetails->coursedetails }}"
                                        style="display: {{ $candidateDetails->coursename === 'coursetype' ? 'block' : 'none' }}"
                                        {{ $candidateDetails->coursename === 'coursetype' ? 'required' : '' }}>
                                    <input
                                        type="text"
                                        class="form-control"
                                        maxlength="50"
                                        name="jobDetail"
                                        id="jobDetailInput"
                                        placeholder="Job Details"
                                        value="{{ $candidateDetails->jobdetails }}"
                                        style="display: {{ $candidateDetails->coursename === 'jobtype' ? 'block' : 'none' }}"
                                        {{ $candidateDetails->coursename === 'jobtype' ? 'required' : '' }}>
                                </div>
                            </div>
                            <div class="flex-fill">
                                <div class="input-group flex-nowrap">
                                    <label for="instititeCompanySelect" class="input-group-text">Institute/Company Name</label>
                                    <div class="input-group-text">
                                        <input class="form-check-input mt-0" type="radio" value="institute Name" name="instituteComanyRadio" id="instituteSelectRadio" data-bs-toggle="tooltip" {{ $candidateDetails->institute === "institute Name" ? 'checked' : '' }} aria-label="Institute Name" data-bs-placement="left" data-bs-original-title="Institute Name">
                                    </div>
                                    <div class="input-group-text">
                                        <input class="form-check-input mt-0" type="radio" value="Company Name" name="instituteComanyRadio" id="CompanySelectRadio" data-bs-toggle="tooltip" {{ $candidateDetails->institute === "Company Name" ? 'checked' : '' }} aria-label="Company Name" data-bs-placement="right" data-bs-original-title="Company Name">
                                    </div>
                                    <input
                                        type="text"
                                        class="form-control"
                                        maxlength="100"
                                        name="instituteDetail"
                                        id="instituteDetailInput"
                                        placeholder="Institute Details"
                                        value="{{ $candidateDetails->institutename }}"
                                        style="display: {{ $candidateDetails->institute === 'institute Name' ? 'block' : 'none' }}"
                                        {{ $candidateDetails->institute === 'institute Name' ? 'required' : '' }}>

                                    <input
                                        type="text"
                                        class="form-control"
                                        maxlength="100"
                                        name="companyDetail"
                                        id="companyDetailInput"
                                        placeholder="Company Details"
                                        value="{{ $candidateDetails->companyname }}"
                                        style="display: {{ $candidateDetails->institute === 'Company Name' ? 'block' : 'none' }}"
                                        {{ $candidateDetails->institute === 'Company Name' ? 'required' : '' }}>
                                </div>
                            </div>
                            <div class="flex-fill">
                                <div class="input-group">
                                    <label for="statDuration" class="input-group-text">Lock-In Period(Month)</label>
                                    <input type="text" name="stayDuration" class="form-control" maxlength="10" value="{{$candidateDetails->stydrt}}" id="stayDuration" placeholder="Stay Duration" required>
                                </div>
                            </div>
                            <div class="flex-fill">
                                <div class="input-group flex-nowrap">
                                    <label for="healthIssueSelect" class="input-group-text">Any Health Issue</label>
                                    <div class="input-group-text">
                                        <input class="form-check-input mt-0" type="radio" value="Yes" name="healthIssue" id="healthIssueYesRadio" data-bs-toggle="tooltip" {{ strtolower($candidateDetails->healthissue) == "yes" ? 'checked' : '' }} aria-label="Yes" data-bs-placement="left" data-bs-original-title="Yes">
                                    </div>
                                    <div class="input-group-text">
                                        <input class="form-check-input mt-0" type="radio" Value="No" name="healthIssue" id="healthIssueNoRadio" data-bs-toggle="tooltip" {{ strtolower($candidateDetails->healthissue) == "no" ? 'checked' : '' }} aria-label="No" data-bs-placement="right" data-bs-original-title="No">
                                    </div>
                                    <input
                                        type="text"
                                        class="form-control"
                                        name="helthIssuDescription"
                                        maxlength="100" id="helthIssuDescription"
                                        placeholder="Describe helth issue"
                                        value="{{$candidateDetails->health_description}}"
                                        style="display: {{  strtolower($candidateDetails->healthissue) === 'yes' ? 'block' : 'none' }}"
                                        {{ strtolower($candidateDetails->healthissue) === 'yes' ? 'required' : '' }}>
                                </div>
                            </div>
                            <div class="flex-fill">
                                <div class="input-group flex-nowrap">
                                    <label for="vehi" class="input-group-text">Vehicle Number</label>
                                    <div class="input-group-text">
                                        <input class="form-check-input mt-0" type="radio" value="Yes" name="vehicalSelected" id="vehicalYesRadio" data-bs-toggle="tooltip" {{ strtolower($candidateDetails->vehicalno) == "yes" ? 'checked' : '' }} aria-label="Yes" data-bs-placement="left" data-bs-original-title="Yes">
                                    </div>
                                    <div class="input-group-text">
                                        <input class="form-check-input mt-0" type="radio" Value="No" name="vehicalSelected" id="vehicalNoRadio" data-bs-toggle="tooltip" {{ strtolower($candidateDetails->vehicalno) == "no" ? 'checked' : '' }} aria-label="No" data-bs-placement="right" data-bs-original-title="No">
                                    </div>
                                    <input
                                        type="text"
                                        class="form-control"
                                        name="vehicalNumber"
                                        id="vehicalSelectedDescription"
                                        maxlength="15"
                                        placeholder="Describe helth issue"
                                        value="{{$candidateDetails->health_description}}"
                                        style="display: {{  strtolower($candidateDetails->vehicalno) === 'yes' ? 'block' : 'none' }}"
                                        {{ strtolower($candidateDetails->vehicalno) === 'yes' ? 'required' : '' }}>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="candidate-img flex-fill">
                        <div class="img" style="width:200px;height:200px;">
                            <img class="img-thumbnail object-fit-contain" style="width:100%; height:90%" src="{{$candidateDetails->upload_img_url}}" alt="candidate image">
                        </div>
                    </div>
                </div>
            </div>
            <div class="guardian-detail py-2">
                <h6 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase">PARENT'S DETAILS</h6>
                <div class="d-flex justify-content-between align-items-center flex-wrap g-2 gap-2">
                    <div class="flex-fill">
                        <div class="input-group">
                            <label for="fatherName" class="input-group-text">Father Name</label>
                            <input type="text" class="form-control characterRequired" name="fatherName" value="{{$candidateDetails->fathername}}" id="fatherName" placeholder="Father Name" required>
                        </div>
                    </div>
                    <div class="flex-fill">
                        <div class="input-group">
                            <label for="fatherOccupation" class="input-group-text">Occupation</label>
                            <input type="text" class="form-control characterRequired" name="fatherOccupation" value="{{$candidateDetails->fatheroocc}}" id="fatherOccupation" placeholder="Father Occupation" required>
                        </div>
                    </div>
                    <div class="flex-fill">
                        <div class="input-group">
                            <label for="motherName" class="input-group-text">Mother Name</label>
                            <input type="text" class="form-control characterRequired" name="motherName" value="{{$candidateDetails->mothername}}" id="motherName" placeholded="Mother Name" required>
                        </div>
                    </div>
                    <div class="flex-fill">
                        <div class="input-group">
                            <label for="motherOccupation" class="input-group-text">Mothers's Occupation</label>
                            <input type="text" class="form-control characterRequired" name="motherOccupation" value="{{$candidateDetails->motheroocc}}" id="motherOccupation" placeholder="Mothers's Occupation" required>
                        </div>
                    </div>
                    <div class="mobile-number flex-fill">
                        <div class="input-group">
                            <label for="fatherMobileNumber" class="input-group-text">Father Mobile Number</label>
                            <input type="tel" class="form-control numberRequired" name="fatherMobileNumber" value="{{$candidateDetails->tel}}" maxlength="10" minlength="10" id="fatherMobileNumber" placeholder="Mobile Number" required>
                        </div>
                    </div>
                    <div class="mobile-number flex-fill">
                        <div class="input-group">
                            <label for="MotherMobileNumber" class="input-group-text">Mother Mobile Number</label>
                            <input type="tel" class="form-control numberRequired" name="MotherMobileNumber" value="{{$candidateDetails->mobilenumber}}" id="MotherMobileNumber" placeholder="Mobile Number">
                        </div>
                    </div>
                    <div class="flex-fill">
                        <div class="input-group">
                            <label for="parent Email" class="input-group-text">Parent Email</label>
                            <input type="email" class="form-control" name="parentEmail" id="parent Email" value="{{$candidateDetails->pemail}}" placeholder="parent Email">
                        </div>
                    </div>
                    <div class="flex-fill">
                        <div class="input-group">
                            <label for="parentAddressPincode" class="input-group-text">
                                Pincode
                            </label>
                            <input type="text" maxlength="6" minlength="6" class="form-control numberRequired" value="{{$candidateDetails->pinno}}" name="parentAddressPincode" id="parentAddressPincode" required>
                        </div>
                        <span class="parent-town-city text-warning ps-2" style="font-size:0.6rem;display:none"></span>
                    </div>
                    <div class="flex-fill parentAddressSelection">
                        <div class="country-city-state">
                            <div class="d-flex justify-content-between align-items-center gap-2 g-2">
                                <div class="flex-fill">
                                    <div class="input-group">
                                        <label for="parentAddressCountry" class="input-group-text">Country</label>
                                        <input type="text" name="parentAddressCountry" id="parentAddressCountry" value="{{$candidateDetails->country}}" class="form-control requiredReadonly" readonly required>
                                    </div>
                                </div>
                                <div class="flex-fill">
                                    <div class="input-group">
                                        <label for="parentAddressState" class="input-group-text">State</label>
                                        <input type="text" name="parentAddressState" id="parentAddressState" class="form-control requiredReadonly" value="{{$candidateDetails->state}}" readonly required>
                                    </div>
                                </div>
                                <div class="flex-fill">
                                    <div class="input-group">
                                        <label for="parentAddressDistrict" class="input-group-text">District</label>
                                        <input type="text" name="parentAddressDistrict" id="parentAddressDistrict" value="{{$candidateDetails->district}}" class="form-control characterRequired" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-fill w-100 parentAddressSelection">
                        <div class="input-group">
                            <label for="parentAddress" class="input-group-text">Address</label>
                            <input type="text" class="form-control" name="parentAddress" maxlength="100" value="{{$candidateDetails->fullAddress}}" placeholder="House No,Street,Landmark" id="addressInput" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="parent-detail py-2">
                <h6 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase">GUARDIAN'S DETAILS</h6>
                <div class="d-flex justify-content-between align-items-center flex-wrap g-2 gap-2">
                    <div class="flex-fill">
                        <div class="input-group">
                            <label for="guardianName" class="input-group-text">Guardian Name</label>
                            <input type="text" class="form-control characterRequired" name="guardianName" value="{{$candidateDetails->guardianname}}" id="guardianName" placeholder="Guardian Name" required>
                        </div>
                    </div>
                    <div class="mobile-number flex-fill">
                        <div class="input-group">
                            <label for="guardianContactNumber" class="input-group-text">Contact Number</label>
                            <input type="tel" class="form-control numberRequired" name="guardianContactNumber" value="{{$candidateDetails->guardiannumber}}" id="guardianContactNumber" placeholder="Mobile Number" required>
                        </div>
                    </div>
                    <div class="flex-fill">
                        <div class="input-group">
                            <label for="guardianAddressPincode" class="input-group-text">
                                Pincode
                            </label>
                            <input type="text" maxlength="6" minlength="6" class="form-control numberRequired" value="{{$candidateDetails->guardianPincode}}" name="guardianAddressPincode" id="guardianAddressPincode" required>
                        </div>
                        <span class="guardian-town-city text-warning w-100 ps-2" style="font-size:0.6rem;display:none"></span>
                    </div>
                    <div class="flex-fill guardianAddressSelection">
                        <div class="country-city-state">
                            <div class="d-flex justify-content-between align-items-center gap-2 g-2">
                                <div class="flex-fill">
                                    <div class="input-group">
                                        <label for="guardianAddressCountry" class="input-group-text">Country</label>
                                        <input type="text" name="guardianAddressCountry" id="guardianAddressCountry" value="{{$candidateDetails->guardianCountry}}" class="form-control requiredReadonly" readonly required>
                                    </div>
                                </div>
                                <div class="flex-fill">
                                    <div class="input-group">
                                        <label for="guardianAddressState" class="input-group-text">State</label>
                                        <input type="text" name="guardianAddressState" id="guardianAddressState" value="{{$candidateDetails->guardianState}}" class="form-control requiredReadonly" readonly required>
                                    </div>
                                </div>
                                <div class="flex-fill">
                                    <div class="input-group">
                                        <label for="guardianAddressDistrict" class="input-group-text">District</label>
                                        <input type="text" name="guardianAddressDistrict" id="guardianAddressDistrict" value="{{$candidateDetails->guardianDistrict}}" class="form-control characterRequired" required>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex-fill w-100 guardianAddressSelection">
                        <div class="input-group">
                            <label for="guardianAddress" class="input-group-text">Address</label>
                            <input type="text" class="form-control" name="guardianAddress" maxlength="100" value="{{$candidateDetails->guardianaddress}}" id="addressInput" placeholder="House No,Street,Landmark" required>
                        </div>
                    </div>
                </div>
            </div>
            <div class="documents py-2">
                <h6 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase">DOCUMENTS</h6>
                <div class="candidate-img-doc">
                    <div class="d-flex justify-content-between align-items-center flex-wrap g-2">
                        <div class="img-cantainer bg-body d-flex flex-column justify-content-between" style="width:200px;height:200px;">
                            <img src="{{$candidateDetails->upload_aadhar_front_url}}" class="img-thumbnail object-fit-contain" alt="Aadhar front image" style="max-width:100%;height:80%;">
                            <h6 class="text-center" style="font-size:0.6rem;">Aadhar front</h6>
                        </div>
                        <div class="img-cantainer bg-body d-flex flex-column justify-content-between" style="width:200px;height:200px;">
                            <img src="{{$candidateDetails->upload_aadhar_back_url}}" class="img-thumbnail object-fit-contain" alt="Aadhar back image" style="max-width:100%;height:80%;">
                            <h6 class="text-center" style="font-size:0.6rem;">Aadhar back</h6>

                        </div>
                        <div class="img-cantainer bg-body d-flex flex-column justify-content-between" style="width:200px;height:200px;">
                            <img src="{{$candidateDetails->upload_parentsing_url}}" class="img-thumbnail object-fit-contain" alt="parent signature image" style="max-width:100%;height:80%;">
                            <h6 class="text-center" style="font-size:0.6rem;">Parent/Guardian Sign </h6>

                        </div>

                        <div class="img-cantainer bg-body d-flex flex-column justify-content-between" style="width:200px;height:200px;">
                            <img src="{{$candidateDetails->upload_candidatesing_url}}" class="img-thumbnail object-fit-contain" alt="candidate signature image" style="max-width:100%;height:80%;">
                            <h6 class="text-center" style="font-size:0.6rem;">Candidate Sign</h6>

                        </div>
                        <div class="img-cantainer bg-body d-flex flex-column justify-content-between" style="width:200px;height:200px;">
                            <img src="{{ $businessDetails['signaturePath']}}" class="img-thumbnail object-fit-contain" alt="stamp with singnature" style="max-width:100%;height:80%;">
                            <h6 class="text-center" style="font-size:0.6rem;">Rector/Warden & Sign</h6>

                        </div>
                    </div>
                </div>
                <div class="candidate-img-upload-input" style="display:none;">
                    <div class="d-flex justify-content-between align-items-center flex-wrap g-2 gap-2">
                        <div class="flex-fill">
                            <div class="input-group">
                                <label for="candidateImage" class="input-group-text">
                                    Candidate Image
                                </label>
                                <input type="file" id="candidateImageInput" class="form-control" accept="image/png, image/jpg, image/jpeg">
                                <button class="btn btn-success showImageBtn" type="button" id="showcandidateImageShowBtn" data-uploadImage="{{ basename($candidateDetails->upload_img_url) !== 'backgroundImg.jpeg' ? $candidateDetails->upload_img_url : '' }}" data-imgsrc="candidateImage" data-docname="Candidate Image">View</button>
                            </div>
                        </div>
                        <div class="flex-fill">
                            <div class="input-group">
                                <label for="aadharFront" class="input-group-text">
                                    Aadhar front
                                </label>
                                <input type="file" id="aadharFrontInput" class="form-control" accept="image/png, image/jpg, image/jpeg">
                                <button class="btn btn-success showImageBtn" type="button" id="showaadharFrontShowBtn" data-uploadImage="{{ basename($candidateDetails->upload_aadhar_front_url) !== 'backgroundImg.jpeg' ? $candidateDetails->upload_aadhar_front_url : '' }}" data-imgsrc="aadharFront" data-docname="Aadhar front Image">View</button>
                            </div>
                        </div>
                        <div class="flex-fill">
                            <div class="input-group">
                                <label for="aadharBack" class="input-group-text">
                                    Aadhar Back
                                </label>
                                <input type="file" id="aadharBackInput" class="form-control" accept="image/png, image/jpg, image/jpeg">
                                <button class="btn btn-success showImageBtn" type="button" id="showaadharBackShowBtn" data-uploadImage="{{  basename($candidateDetails->upload_aadhar_back_url) !== 'backgroundImg.jpeg' ? $candidateDetails->upload_aadhar_back_url : ''}}" data-imgsrc="aadharBack" data-docname="Aadhar Back Image">View</button>
                            </div>
                        </div>
                        <div class="flex-fill">
                            <div class="input-group">
                                <label for="candidateSignature" class="input-group-text">
                                    Candidate Signature
                                </label>
                                <input type="file" id="candidateSignatureInput" class="form-control" accept="image/png, image/jpg, image/jpeg">
                                <button class="btn btn-success showImageBtn" type="button" id="showcandidateSignatureShowBtn" data-uploadImage="{{ basename($candidateDetails->upload_candidatesing_url) !== 'backgroundImg.jpeg' ? $candidateDetails->upload_candidatesing_url : '' }}" data-imgsrc="candidateSignature" data-docname="Candidate Signature">View</button>
                            </div>
                        </div>
                        <div class="flex-fill">
                            <div class="input-group">
                                <label for="parentSignature" class="input-group-text">
                                    Parent Signature
                                </label>
                                <input type="file" id="parentSignatureInput" class="form-control" accept="image/png, image/jpg, image/jpeg">
                                <button class="btn btn-success showImageBtn" type="button" id="showparentSignatureShowBtn" data-uploadImage="{{ basename($candidateDetails->upload_parentsing_url) !== 'backgroundImg.jpeg' ? $candidateDetails->upload_parentsing_url : '' }}" data-imgsrc="parentSignature" data-docname="Parent Signature">View</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="other py-2">
                <h6 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase">OTHER</h6>
                <div class="form-group mb-3">
                    <label for="user_remark" class="form-label">
                        Admin Note
                    </label>
                    <textarea name="remark" id="user_remark" class="form-control" readonly>{{ trim($candidateDetails->user_remark) }}</textarea>
                </div>
            </div>
            <div class="disclaimer py-2">
                <h6 class="sub-heading text-start fw-normal p-1 text-white bg-info text-uppercase">DISCLAIMER</h6>
                <div class="form-check">
                    <input type="checkbox" checked class="form-check-input" id="ternAndConditionAccept" name="termAndConditionAccept" />
                    <label class="text-dark  align-self-center form-check-label">I DECLARE THAT THE INFORMATION GIVEN ABOVE IS TRUE
                        TO THE BEST OF MY
                        KNOWLEDGE. I AGREE THAT IF
                        ANY INFORMATION FURNISHED ABOVE FOUND INCORRECT MY ADMISSION IS LIABLE TO BE
                        CANCELLED.
                        I HAVE READ AND ACCEPTED ALL TERMS & CONDITIONS.
                    </label>
                </div>
            </div>
            <div class="container-fluid m-0 p-0 mt-2">
                <div class="headings d-flex justify-content-center">
                    <button class="btn btn-sm p-0 flex-fill bg-dark" type="button" id="rulesShow" data-bs-toggle="tooltip" title="Rules And Regulation"><i class="fa-solid fa-angle-down fa-xs" style="color:orange"></i></button>
                </div>
                <div id="rules" class="bg-white rounded container" style="display:none;">
                    <div id="pdf-container" class="d-flex flex-column justify-content-center align-items-center" style="width:100%"></div>
                </div>
            </div>
            <div class="d-flex justify-content-center align-itmes-center mt-1">
                <select name="items" id="DownloadItems" class="disabled-false">
                    <option selected disabled>Select</option>
                    <option value="1">
                        Download From
                    </option>
                    @if($businessDetails['termAndConditionPdf'])
                    <option value="2">
                        <a href="#" class="">Terms And Condition</a>
                    </option>
                    @endif
                    <option value="3">
                        <a href="#" class="">Documents</a>
                    </option>
                </select>
            </div>
            <div class="form-btn py-2">
                <div class="d-flex justify-content-center align-items-center gap-2">
                    <button id="DownloadDocumentsBtn" class="btn btn-warning btn-sm" type="button">
                        Download
                    </button>
                    <button class="btn btn-success btn-sm ms-2" type="button" id="registrationFormActiveBtn">Edit</button>
                    <button id="shareRegistrationForm" class="btn btn-warning text-white btn-sm" type="button">Share</button>
                    <button id="formSubmitBtn" class="btn btn-sm btn-warning text-white" type="submit" style="display:none;">Update</button>
                </div>
            </div>
        </form>
    </div>
    <!-- croper modal -->
    <div class="modal fade" id="ImgCropModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="ImgCropModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Image Croper</h5>
                </div>
                <div class="modal-body">
                    <button id="modalLoader" class="btn border-0 m-auto" type="button" disabled style="display:block">
                        <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
                        <span class="">Loading...</span>
                    </button>
                    <div class="container w-100 object-fit-contain" style="max-height:500px">
                        <div class="result w-100" style="max-height:400px"></div>
                    </div>
                </div>
                <div class="container modal-footer options">
                    <input type="hidden" class="img-w" value="150" min="100" max="200" readonly />
                    <button type="button" class="btn btn-sm btn-warning save">Save</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Image Preview Modal -->
    <div class="modal fade" id="imagePreviewModal" tabindex="-1" aria-labelledby="imagePreviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="imagePreviewModalLabel">Image Preview</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <img id="imagePreview" src="" class="w-100" alt="Preview">
                </div>
            </div>
        </div>
    </div>
    <!-- share modal -->
    <div class="modal fade" tabindex="-1" id="shareregistrionformModal">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Registration</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="shareRegForm" action="{{route('registration.form.share.post')}}" method="post">
                    <div class="modal-body">
                        @csrf
                        <input type="hidden" name="studentId" value="{{$candidateDetails->id}}">
                        <div class="mb-3">
                            <label for="shareType" class="form-label">Share Options</label>
                            <select name="shareType" id="ShareTypeInput" class="form-control" required>
                                <option value="mobile" selected>Mobile</option>
                                <option value="email">Email</option>
                            </select>
                        </div>
                        <div class="mb-3 shareoptionEmail d-none">
                            <label class="form-label" for="ShareEmail">Email</label>
                            <input class="form-control" type="email" value="{{$candidateDetails->email}}" id="ShareEmail" name="shareEmail" placeholder="Email">
                        </div>
                        <div class="mb-3 shareoptionMobile">
                            <label class="form-label" for="ShareMobile">Mobile</label>
                            <input class="form-control numberRequired" value="{{$candidateDetails->phone}}" type="text" id="ShareMobile" oninput="validateNumber(this)" pattern="[0-9]{10}" minlength="10" maxlength="10" name="Sharemobile" placeholder="Mobile no">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-warning" id="shareFormBtn">Share</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const url = "{{$businessDetails['termAndConditionPdf']}}";
        const loadingTask = pdfjsLib.getDocument(url);

        loadingTask.promise.then(function(pdf) {
            const container = document.getElementById("pdf-container");
            const totalPages = pdf.numPages;

            function renderPage(pageNumber) {
                pdf.getPage(pageNumber).then(function(page) {
                    const scale = 1.5;
                    const viewport = page.getViewport({
                        scale
                    });

                    const canvas = document.createElement("canvas");
                    const context = canvas.getContext("2d");
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    const renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };

                    page.render(renderContext).promise.then(function() {
                        container.appendChild(canvas);
                        canvas.classList.add("pdf-page");

                        if (pageNumber < totalPages) {
                            renderPage(pageNumber + 1);
                        } else {
                            adjustContainerHeight();
                        }
                    });
                });
            }

            renderPage(1);
        });

        function adjustContainerHeight() {
            const pdfPages = document.getElementsByClassName("pdf-page");
            let totalHeight = 0;

            for (let i = 0; i < pdfPages.length; i++) {
                totalHeight += pdfPages[i].offsetHeight;
            }

            document.getElementById("pdf-container").style.height = totalHeight + "%";
        }
    });
</script>
<script>
    $(document).ready(() => {
        $("#rulesShow").click(() => {
            $("#rules").toggle();
        });
        $("#TermsShow").click(() => {
            $("#Terms").toggle();
        });
        $("#editForm").click(() => {
            $('input,textarea').prop('readonly', function(index, oldValue) {
                return !oldValue;
            });
            $("#HealthCheckDiv").toggleClass("d-none");
            $("#multipleDateShow").toggleClass('d-none');
            if ($("#multipleDateShow").hasClass('d-none')) {
                $("#Date").attr('type', 'date');
            } else {
                $("#Date").attr('type', 'hidden');
            }
            $("#VehicalCheckDiv").toggleClass("d-none");
            $("#UpdateUserRegistration").toggleClass("d-none");
            $('input[type="file"]').toggleClass('d-none');
            // $("#Date").prop("readonly", true);
            $("#formNo").prop("readonly", true);
        });
    });
</script>
<script>
    $(document).ready(() => {
        function showHealthIssue() {
            $("#health-issue").removeClass("d-none");
            $("#healthLabel").removeClass("d-none");
        }

        // Handler function to hide the health issue
        function hideHealthIssue() {
            $("#health-issue").addClass("d-none");
            $("#healthLabel").addClass("d-none");
        }


        function showVehical() {
            $("#vehical").removeClass("d-none");
            $("#vehicalLabel").removeClass("d-none");
        }

        function hideVehical() {
            $("#vehical").addClass("d-none");
            $("#vehicalLabel").addClass("d-none");
        }
        // Attach event handlers to the radio buttons
        $("#HealthCheckYes").on("click", showHealthIssue);
        $("#HealthCheckNo").on("click", hideHealthIssue);
        $("#VehicalCheckYes").on("click", showVehical);
        $("#VehicalCheckNo").on("click", hideVehical);

    });

    function checkCharacterLimit(inputType, wordErrorshow, totalCharacters) {
        var input = $(inputType);
        var wordCountElement = $(wordErrorshow);
        var characterLimit = totalCharacters;
        var characters = input.val().length;

        if (characters > characterLimit) {
            wordCountElement.text('Character limit exceeded. Maximum ' + characterLimit + ' characters allowed.');
            input.addClass("is-invalid");
        } else {
            wordCountElement.text('');
            input.removeClass("is-invalid");
        }
    }

    function scrollToInvalidInput() {
        var invalidInput = $("#candidateUpdateForm").find(".is-invalid");
        $('html, body').animate({
            scrollTop: invalidInput.first().offset().top - 50
        }, 500);
    }
</script>
<script>
    $(document).ready(function() {
        $("#DownloadDocumentsBtn").on("click", function() {
            let value = $("#DownloadItems").val();
            if (value === "1") {
                window.location.href = "{{ route('candidateDetails.pdf',$candidateDetails->id) }}";
            } else if (value === "2") {
                var pdfUrl = "{{$businessDetails['termAndConditionPdf']}}";
                var link = document.createElement('a');
                link.href = pdfUrl;
                link.download = 'terms_and_conditions.pdf';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } else if (value === "3") {
                window.location.href = "{{ route('CandidateDocument',$candidateDetails->id) }}";

            }
        });
    });
</script>
<script>
    $(document).ready(function() {
        const roomNoSelector = $("#roomNo");
        const seatNoSelector = $("#seatNo");
        const candidateNameInput = $("#candidateName");
        const dateOfBirthInput = $("#dateOfBirth");
        const proofId = $("#proofId");
        const showCandidateReviewsBtn = $("#showCandidateReviews");
        const candidateMobileNumber = $("#mobileNumber");
        const courseSelectRadio = $("#courseSelectRadio");
        const jobSelectRadio = $("#jobSelectRadio");
        const courseDetailInput = $("#courseDetailInput");
        const jobDetailInput = $("#jobDetailInput");
        const instituteSelectRadio = $("#instituteSelectRadio");
        const CompanySelectRadio = $("#CompanySelectRadio");
        const instituteDetailInput = $("#instituteDetailInput");
        const companyDetailInput = $("#companyDetailInput");
        const stayDurationInput = $("#stayDuration");
        const healthIssueYesRadio = $("#healthIssueYesRadio");
        const healthIssueNoRadio = $("#healthIssueNoRadio");
        const healthIssuDescription = $("#helthIssuDescription");
        const vehicalYesRadio = $("#vehicalYesRadio");
        const vehicalNoRadio = $("#vehicalNoRadio");
        const vehicalSelectedDescription = $("#vehicalSelectedDescription");
        const showImageBtn = $(".showImageBtn");
        const referCodeBtn = $("#referCodeBtn");
        const ShareMobileInput = $("#ShareMobile");
        const ShareEmailInput = $("#ShareEmail");
        const ShareTypeInput = $("#ShareTypeInput");
        const shareFormBtn = $("#shareFormBtn");
        const shareRegForm = $("#shareRegForm");
        const guardianAddressPincode = $("#guardianAddressPincode");
        const guardianAddressDistrict = $("#guardianAddressDistrict");
        const guardianAddressState = $("#guardianAddressState");
        const guardianAddressCountry = $("#guardianAddressCountry");
        const guardianAddressSelection = $(".guardianAddressSelection");
        const guardianCityTownLabel = $(".guardian-town-city");

        const parentAddressPincode = $("#parentAddressPincode");
        const parentAddressDistrict = $("#parentAddressDistrict");
        const parentAddressState = $("#parentAddressState");
        const parentAddressCountry = $("#parentAddressCountry");
        const parentAddressSelection = $(".parentAddressSelection");
        const parentCityTownLabel = $(".parent-town-city");

        const ternAndConditionAccept = $("#ternAndConditionAccept");
        const formSubmitBtn = $("#formSubmitBtn");
        const registrationForm = $("#registrationForm");
        const registrationFormActiveBtn = $("#registrationFormActiveBtn");
        const multipleDateShow = $("#multipleDateShow");
        const candidateImgUploadInput = $(".candidate-img-upload-input");
        const candidateImgDoc = $(".candidate-img-doc");
        const registrationDate = $("#registrationDate");

        let croppedImages = {};
        let uploadedImages = {};

        registrationForm.find('input,select,textare').each(function() {
            if ($(this).is('input')) {
                if ($(this).attr('type') === 'radio' || $(this).attr('type') === 'checkbox') {
                    $(this).prop('disabled', true);
                } else {
                    $(this).prop('readonly', true);
                }
            } else if ($(this).is('select') && !$(this).hasClass('disabled-false')) {
                $(this).prop('disabled', true);
            } else if ($(this).is('textarea')) {
                $(this).prop('readonly', true);
            }
        });

        registrationFormActiveBtn.on('click', function() {

            multipleDateShow.toggle();
            registrationDate.toggle();
            candidateImgDoc.toggle();
            candidateImgUploadInput.toggle();
            formSubmitBtn.toggle();

            registrationForm.find('input, select, textarea').each(function() {
                if ($(this).is('input') && !$(this).hasClass('requiredReadonly')) {
                    if ($(this).attr('type') === 'radio' || $(this).attr('type') === 'checkbox') {
                        $(this).prop('disabled', !$(this).prop('disabled')); // Toggle disabled state for radio and checkbox
                    } else {
                        $(this).prop('readonly', !$(this).prop('readonly')); // Toggle readonly state for other inputs
                    }
                } else if ($(this).is('select') && !$(this).hasClass('disabled-false')) {
                    $(this).prop('disabled', !$(this).prop('disabled')); // Toggle disabled state for select elements
                } else if ($(this).is('textarea')) {
                    $(this).prop('readonly', !$(this).prop('readonly')); // Toggle readonly state for textarea elements
                }
            });
        });

        var today = new Date().toISOString().split('T')[0];
        $('.dateRequired').attr('max', today);


        function messageShow(title, message) {
            Swal.fire({
                icon: title,
                text: message,
                timer: 2000,
                timerProgressBar: true,
                showConfirmButton: false,
            });
        }

        function errorHandler(error) {
            let errorMessage = '';

            // Check for network error (if no response available)
            if (error.status === 0) {
                errorMessage = 'Network error: Please check your internet connection.';
            } else {
                // Check if the error has a response and status code
                const status = error.status || null;
                const response = error.responseJSON || {};
                const statusText = response.message || error.statusText || 'Unknown error';

                // Handle client-side and server-side errors
                if (status >= 400 && status < 500) {
                    errorMessage = `Client error ${status}: ${statusText}`;
                } else if (status >= 500) {
                    errorMessage = `Server error ${status}: ${statusText}`;
                } else {
                    errorMessage = `Unexpected error: ${statusText}`;
                }
            }
            // Display the error message
            messageShow('error', errorMessage);
        }

        function fetchData(url, data = null) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    type: "get",
                    dataType: "json",
                    url: url,
                    data: data,
                    success: function(response) {
                        resolve(response);
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });
            });
        }

        function storData(url, data = null) {
            return new Promise((resolve, reject) => {
                // Detect if the data is FormData
                let isFormData = data instanceof FormData;
                activeModel();
                $.ajax({
                    type: "post",
                    url: url,
                    data: data,
                    processData: !isFormData, // Automatically handle for non-FormData
                    contentType: isFormData ? false : 'application/x-www-form-urlencoded; charset=UTF-8',
                    dataType: "json",
                    success: function(response) {
                        hideLoaderModal();
                        resolve(response);
                    },
                    error: function(error) {
                        hideLoaderModal();
                        reject(error);
                    }
                });
            });
        }


        function deleteData(url, data = null) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    type: "delete",
                    url: url,
                    data: data,
                    success: function(response) {
                        resolve(response);
                    },
                    error: function(xhr, status, error) {
                        reject(error);
                    }
                });

            })
        }

        async function CheckReview(value) {
            // if (!checkPermission('verification.tenant verification')) {
            //     return;
            // }
            try {
                const url = "{{route('condidate.reviews')}}";
                const data = {
                    "aadharValue": value,
                }
                if (value.length !== 12) {
                    return;
                }
                const responseData = await fetchData(url, data);
                if (!responseData.status) {
                    showCandidateReviewsBtn.hide();
                    return;
                }
                showReviewModal(responseData.personalInfo);
                showRatingData(responseData.reviewInfo);
                showCandidateReviewsBtn.fadeIn();
            } catch (error) {
                errorHandler(error);
            }
        }

        function showReviewModal(data) {
            $("#NameShow").text(data.name);
            $("#MobileShow").text(data.mobile);
            $("#EmailShow").text(data.email);
            $("#AadhareShow").text(data.aadhaar);
            $("#PaymentTerms").html(getStarRating(data.payment_terms));
            $("#TenantBehavior").html(getStarRating(data.tenant_behavior));
            $("#Responsibilities").html(getStarRating(data.responsibilities));
            if (data.additional !== null) {
                $("#AdditionalComment").text(data.additional);
            }
            $('#CandidateReview').modal('show');
        }

        function showRatingData(data) {
            var ratingDataDiv = $('.Ratingdata');
            ratingDataDiv.empty();
            $.each(data, function(index, review) {
                var cardHtml = `
         <div class="card border-0 mt-1 p-0" style="width: 100%;">
            <div class="card-body shadow-sm">
               <div class="row">
                  <h1 class="text-center">${review.hostelname}</h1>
                  <div class="col-lg-12 col-md-12 col-sm-12">
                     <p class="text-show">Payment Terms: <span class="RatingValueShow">${getStarRating(review.payment_terms)}</span></p>
                     <p class="text-show">Tenant Behavior: <span class="RatingValueShow">${getStarRating(review.tenant_behavior)}</span> </p>
                     <p class="text-show">Responsibilities: <span class="RatingValueShow">${getStarRating(review.responsibilities)}</span> </p>
                  </div>
                  <div class="col-lg-12 col-md-12 col-sm-12">
                     <p class="text-show">${review.additional ?? ''}</p>
                  </div>
               </div>
            </div>
         </div>`;
                ratingDataDiv.append(cardHtml);
            });
        }

        function getStarRating(rating) {
            var stars = '';
            for (var i = 1; i <= 5; i++) {
                if (i <= rating) {
                    stars += '<span class="golden-star">&#9733;</span>';
                } else {
                    stars += '<span class="empty-star">&#9734;</span>';
                }
            }
            return stars;
        }

        function enforceNumberInput(element, maxLength = 0) {
            let value = $(element).val();

            // Check for numberRequired class (only numbers allowed)
            if ($(element).hasClass('numberRequired')) {
                value = value.replace(/[^0-9]/g, ''); // Allow only numbers
            }

            // Check for characterRequired class (only A-Z, a-z, and spaces allowed)
            if ($(element).hasClass('characterRequired')) {
                value = value.replace(/[^A-Za-z\s]/g, ''); // Allow only letters and spaces
                value = value.replace(/\s{2,}/g, ' '); // Replace multiple spaces with a single space
            }

            // Enforce max length
            if (maxLength > 0 && value.length > maxLength) {
                value = value.slice(0, maxLength);
            }

            $(element).val(value);
        }


        function debounce(fn, delay) {
            let timer;
            return function(...args) {
                clearTimeout(timer);
                timer = setTimeout(() => {
                    fn.apply(this, args);
                }, delay);
            };
        }

        function handleInputValidationWithDebounce(selector, maxLength, errorMessage, delay = 300) {
            $(selector).on('input', function() {
                // Call enforceNumberInput before debouncing
                enforceNumberInput(selector, maxLength);

                // Apply debouncing logic
                debounce(function() {
                    const inputField = $(this);
                    // Find or create the invalid-feedback div
                    let feedbackDiv = inputField.closest('.input-group').next('.invalid-feedback');
                    if (feedbackDiv.length === 0) {
                        feedbackDiv = $('<span class="invalid-feedback" style="font-size:0.6rem"></span>').insertAfter(inputField.closest('.input-group'));
                    }

                    // Validate input length
                    const inputLength = inputField.val().length;

                    if (inputLength === 0) {
                        inputField.removeClass('is-invalid is-valid'); // Remove invalid state
                        feedbackDiv.hide(); // Hide error message
                    } else if (maxLength !== 0 && inputLength !== maxLength) {
                        inputField.addClass('is-invalid'); // Mark input as invalid
                        feedbackDiv.text(errorMessage); // Set custom error message
                        feedbackDiv.show(); // Show error message
                    } else {
                        inputField.removeClass('is-invalid').addClass('is-valid'); // Mark input as valid
                        feedbackDiv.hide(); // Hide error message
                    }
                }.bind(this), delay)(); // Immediately invoke the debounced function
            });
        }
        // Initialize Cropper and handle Save event
        function initializeCropper(inputId, inputName, event) {
            const result = $('.result');
            const save = $('.save');
            const Cropermodal = $('#ImgCropModal');
            const modalLoader = $('#modalLoader');

            let cropper;

            modalLoader.show();
            result.hide();
            save.attr('disabled', true);

            if (event.target.files.length) {
                const file = event.target.files[0];
                const reader = new FileReader();

                reader.onload = function(e) {
                    Cropermodal.modal("show");
                    setTimeout(function() {
                        if (e.target.result) {
                            const img = new Image();
                            img.id = 'cropperImgShow';
                            img.src = e.target.result;

                            img.onload = function() {
                                result.empty();
                                result.append(img);

                                save.removeClass('hide');
                                if (cropper) {
                                    cropper.destroy();
                                    cropper = null;
                                }
                                if (inputName === "aadharFront" || inputName === "aadharBack") {
                                    cropper = new Cropper(img, {
                                        aspectRatio: 4.5 / 3.5,
                                        viewMode: 1,
                                        dragMode: 'move',
                                        autoCropArea: 1,
                                        cropBoxResizable: false,
                                    });
                                } else if (inputName == "candidateSignature" || inputName == "parentSignature") {
                                    cropper = new Cropper(img, {
                                        aspectRatio: 4 / 1,
                                        viewMode: 1,
                                        dragMode: 'move',
                                        autoCropArea: 1,
                                        cropBoxResizable: false,
                                    });
                                } else {
                                    cropper = new Cropper(img, {
                                        aspectRatio: 1,
                                        viewMode: 1,
                                        dragMode: 'move',
                                        autoCropArea: 1,
                                        cropBoxResizable: false,
                                    });
                                }
                                // Hide loader and show the result container
                                modalLoader.hide();
                                result.show();
                                save.attr('disabled', false);

                            };
                        }
                    }, 2000);
                };
                reader.readAsDataURL(file);
            }

            // Unbind any previous click events to prevent multiple bindings
            save.off('click');

            // Save button event
            let isDeletingImage = false;

            save.on('click', function(e) {
                e.preventDefault();
                handleSave(e);
            });

            function handleSave(e) {
                e.preventDefault();
                $('#ImgCropModal').modal('hide');

                // Get the cropped image as a Blob
                cropper.getCroppedCanvas().toBlob(function(blob) {
                    resizeImage(blob, inputId, cropper, function(file) {
                        // Assign the final file (resized or not) to croppedImages
                        croppedImages[inputName] = file;
                        // Check if this input already has an uploaded image
                        if (uploadedImages[inputName] && !isDeletingImage) {
                            isDeletingImage = true; // Set the flag to true to prevent duplicate calls

                            // Delete the previous image before uploading a new one
                            deletePreviousImage(uploadedImages[inputName], function() {
                                delete uploadedImages[inputName]; // Remove the previous image entry
                                uploadImage(inputName, file, inputId);
                                isDeletingImage = false; // Reset the flag after the process is complete
                            });
                        } else if (!isDeletingImage) {
                            // No previous image, directly upload the new image
                            uploadImage(inputName, file, inputId);

                        }
                    });
                }, 'image/jpeg', 0.8); // Adjust quality here (0.8 is 80% quality)
            }
        }

        function resizeImage(blob, inputId, cropper, callback) {
            let quality = 1; // Default quality
            const maxSizeInMB = 1; // Target size in MB (1MB)
            const sizeInMB = blob.size / (1024 * 1024); // Convert size to MB

            // Adjust quality based on file size
            if (sizeInMB > 10) {
                quality = 0.1; // 10% quality for images larger than 10MB
            } else if (sizeInMB > 5) {
                quality = 0.3; // 30% quality for images larger than 5MB
            } else if (sizeInMB > 2) {
                quality = 0.4; // 40% quality for images larger than 2MB
            } else {
                quality = 0.5; // Default to 50% quality
            }

            const canvas = cropper.getCroppedCanvas();

            // Function to resize dimensions if needed
            function resizeDimensions() {
                const ratio = Math.sqrt(maxSizeInMB / sizeInMB); // Calculate resize ratio
                const newWidth = canvas.width * ratio;
                const newHeight = canvas.height * ratio;
                const resizedCanvas = document.createElement('canvas');
                resizedCanvas.width = newWidth;
                resizedCanvas.height = newHeight;
                const ctx = resizedCanvas.getContext('2d');
                ctx.drawImage(canvas, 0, 0, newWidth, newHeight);
                return resizedCanvas;
            }

            // Resize and compress the image to ensure it's below 1MB
            function compressAndResizeImage(currentCanvas, currentQuality) {
                currentCanvas.toBlob(function(resizedBlob) {
                    const newSizeInMB = resizedBlob.size / (1024 * 1024); // Size after compression
                    // If the compressed image is still larger than 1MB, resize the dimensions further
                    if (newSizeInMB > maxSizeInMB) {
                        const resizedCanvas = resizeDimensions(); // Resize dimensions
                        compressAndResizeImage(resizedCanvas, currentQuality * 0.8); // Further reduce quality if needed
                    } else {
                        const resizedFile = new File([resizedBlob], `${inputId}.jpg`, {
                            type: 'image/jpeg'
                        });
                        callback(resizedFile); // Return the resized and compressed image
                    }
                }, 'image/jpeg', currentQuality);
            }

            // Start the resizing and compression process
            compressAndResizeImage(canvas, quality);
        }
        // AJAX Function to Upload the Image
        async function uploadImage(inputName, file, inputId) {
            const formData = new FormData();
            formData.append('image', file);
            formData.append('_token', "{{ csrf_token() }}");
            try {
                const url = "{{ route('upload.image') }}";
                const response = await storData(url, formData);
                uploadedImages[inputName] = response.fileName;
                $(inputId).addClass('is-valid').removeClass('is-invalid');
            } catch (error) {
                $(inputId).removeClass('is-valid').addClass('is-invalid');
                errorHandler(error);
            }
        }

        // AJAX Function to Delete the Previous Image
        async function deletePreviousImage(imagePath, callback) {
            try {
                const url = "{{ route('delete.image') }}";
                const data = {
                    imageName: imagePath,
                    _token: "{{ csrf_token() }}"
                };
                const response = await deleteData(url, data);
                if (response.status) {
                    callback(); // Ensure callback is executed only once
                }
            } catch (error) {
                errorHandler(error);
            }
        }

        function WhatsAppNotInstalled() {
            Swal.fire({
                icon: 'warning',
                title: 'WhatsApp Permission',
                html: 'Our system supports WhatsApp desktop. Please install it by using the download link here 👇 <br>' +
                    '<a class="btn btn-success btn-sm" href="https://www.whatsapp.com/download" target="_blank">Download Link</a>' +
                    '<br>If you have already installed it, click on Give Permission button to add permission.',
                showCloseButton: true,
                showCancelButton: true,
                cancelButtonText: 'Close',
                confirmButtonText: 'Give Permission',
                focusConfirm: false,
                preConfirm: () => {
                    return new Promise((resolve, reject) => {
                        $.ajax({
                            type: "POST",
                            url: "{{ route('whatsapp.permission.grant') }}",
                            success: function(response) {
                                // Show success message
                                Swal.fire({
                                    icon: 'success',
                                    title: 'Permission Granted',
                                    text: 'WhatsApp permission has been granted successfully!',
                                    showConfirmButton: true,
                                });
                                resolve(response);
                            },
                            error: function(error) {
                                // Show error message
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: 'Failed to grant WhatsApp permission. Please try again.',
                                    showConfirmButton: true,
                                });
                                reject(error);
                            }
                        });
                    });
                }
            });
        }
        handleInputValidationWithDebounce('#candidateName', 0, 'Name is required');
        handleInputValidationWithDebounce('#mobileNumber', 10, 'Maximun 10 number is required')
        handleInputValidationWithDebounce('#fatherName', 0, 'Father Name is required');
        handleInputValidationWithDebounce('#fatherOccupation', 0, 'Father   is required');
        handleInputValidationWithDebounce('#motherName', 0, 'Mother Name is required');
        handleInputValidationWithDebounce('#motherOccupation', 0, 'Mother Occupation is required');
        handleInputValidationWithDebounce('#fatherMobileNumber', 10, 'Maximun 10 number is required');
        handleInputValidationWithDebounce('#MotherMobileNumber', 10, 'Maximun 10 number is required');
        handleInputValidationWithDebounce('#guardianName', 0, 'Guardian Name Name is required');
        handleInputValidationWithDebounce('#guardianContactNumber', 10, 'Maximun 10 number is required');
        handleInputValidationWithDebounce('#guardianAddressDistrict', 0, 'only chrecter allowed');
        handleInputValidationWithDebounce('#parentAddressDistrict', 0, 'only chrecter allowed');

        handleInputValidationWithDebounce('#courseDetailInput', 0, 'only chrecter allowed');
        handleInputValidationWithDebounce('#jobDetailInput', 0, 'only chrecter allowed');

        handleInputValidationWithDebounce(instituteDetailInput, 0, 'only chrecter allowed');
        handleInputValidationWithDebounce(companyDetailInput, 0, 'only chrecter allowed');
        handleInputValidationWithDebounce(stayDurationInput, 0, 'only chrecter allowed');
        handleInputValidationWithDebounce(healthIssuDescription, 0, 'only chrecter allowed');
        handleInputValidationWithDebounce(vehicalSelectedDescription, 0, 'only chrecter allowed');

        ternAndConditionAccept.on('click', function() {
            if ($(this).is(':checked')) {
                formSubmitBtn.attr('disabled', false);
            } else {
                formSubmitBtn.attr('disabled', true);
            }
        });

        roomNoSelector.on('change', async function() {
            const roomNo = $(this).val();
            const url = '{{route("empty.room.no.seats")}}';
            const data = {
                roomNo: roomNo
            }
            let availableSeats = [];
            if (roomNo) {
                availableSeats = await fetchData(url, data);
            }
            if (availableSeats.numberSeats.length === 0) {
                seatNoSelector.empty();
                seatNoSelector.append('<option value="" selected disabled>Seat not available</option>');
            } else {
                seatNoSelector.find('option[value="no-seats"]').remove();
                seatNoSelector.empty();
                seatNoSelector.append('<option value="" selected disabled>Select</option>');
                $.each(availableSeats.numberSeats, function(indexInArray, valueOfElement) {
                    seatNoSelector.append(`<option value="${valueOfElement}">${valueOfElement}</option>`);
                });

            }
        });

        proofId.on('input', function() {
            enforceNumberInput($(this), 12);
            handleInputValidationWithDebounce(proofId, 12, 'Invalid aadhar number. Must be 12 digits.', 300);
            if ($(this).val().length === 12) {
                CheckReview($(this).val());
            }
        });
        courseSelectRadio.on('change', function() {
            if ($(this).is(':checked')) {
                courseDetailInput.show().attr('required', true);;
                jobDetailInput.val('').hide().removeAttr('required');;
            }
        });

        jobSelectRadio.on('change', function() {
            if ($(this).is(':checked')) {
                courseDetailInput.val('').hide().removeAttr('required');;
                jobDetailInput.show().attr('required', true);;
            }
        });

        instituteSelectRadio.on('change', function() {
            if ($(this).is(':checked')) {
                instituteDetailInput.show().attr('required', true);;
                companyDetailInput.val('').hide().removeAttr('required');;
            }
        });

        // Toggle visibility and add/remove required attributes based on selection
        CompanySelectRadio.on('change', function() {
            if ($(this).is(':checked')) {
                instituteDetailInput.val('').hide().removeAttr('required');
                companyDetailInput.show().attr('required', true);
            }
        });
        // Toggle visibility and add/remove required attributes based on health issue selection
        healthIssueYesRadio.on('change', function() {
            if ($(this).is(':checked')) {
                healthIssuDescription.show().attr('required', true);
            }
        });

        healthIssueNoRadio.on('change', function() {
            if ($(this).is(':checked')) {
                healthIssuDescription.fadeOut(500).removeAttr('required');
            }
        });

        // Toggle visibility and add/remove required attributes based on vehicle selection
        vehicalYesRadio.on('change', function() {
            if ($(this).is(':checked')) {
                vehicalSelectedDescription.show().attr('required', true);
            }
        });

        vehicalNoRadio.on('change', function() {
            if ($(this).is(':checked')) {
                vehicalSelectedDescription.hide().removeAttr('required');
            }
        });

        // address
        guardianAddressPincode.on('input', async function() {
            handleInputValidationWithDebounce("#guardianAddressPincode", 6, 'Invalid Pincode');
            const pincode = $(this).val();
            guardianCityTownLabel.hide();
            guardianAddressSelection.fadeOut(300);
            guardianAddressDistrict.val("");
            guardianAddressState.val("");
            guardianAddressCountry.val("");
            if (pincode.length === 6 && !isNaN(pincode)) {
                try {
                    const url = "{{route('address.detail.by.pincode')}}";
                    const data = {
                        pincode: pincode
                    };
                    const response = await fetchData(url, data);
                    const responseData = response.data;
                    if (response.status) {
                        guardianAddressSelection.fadeIn(300);
                        guardianCityTownLabel.show().text(`Town/Area : ${responseData.areaName}`);
                        guardianAddressDistrict.val(responseData.district);
                        guardianAddressState.val(responseData.state);
                        guardianAddressCountry.val(responseData.country);
                    } else {
                        $(this).removeClass('is-valid').addClass('is-invalid');
                    }
                } catch (error) {
                    errorHandler(error);
                }
            }
        });

        parentAddressPincode.on('input', async function() {
            handleInputValidationWithDebounce("#parentAddressPincode", 6, 'Invalid Pincode');
            const pincode = $(this).val();
            parentAddressSelection.fadeOut(300);
            parentCityTownLabel.hide();
            parentAddressDistrict.val("");
            parentAddressState.val("");
            parentAddressCountry.val("");
            if (pincode.length === 6 && !isNaN(pincode)) {
                try {
                    const url = "{{route('address.detail.by.pincode')}}";
                    const data = {
                        pincode: pincode
                    };
                    const response = await fetchData(url, data);
                    const responseData = response.data;
                    if (response.status) {
                        parentAddressSelection.fadeIn(300);
                        parentCityTownLabel.show().text(`Town/Area : ${responseData.areaName}`);
                        parentAddressDistrict.val(responseData.district);
                        parentAddressState.val(responseData.state);
                        parentAddressCountry.val(responseData.country);
                    } else {
                        $(this).removeClass('is-valid').addClass('is-invalid');
                    }
                } catch (error) {
                    errorHandler(error);
                }
            }
        });


        // Trigger image selection and cropping
        $('#candidateImageInput').on('change', function(e) {
            initializeCropper('#candidateImageInput', 'candidateImage', e);
        });

        $('#aadharFrontInput').on('change', function(e) {
            initializeCropper('#aadharFrontInput', 'aadharFront', e);
        });

        $('#aadharBackInput').on('change', function(e) {
            initializeCropper('#aadharBackInput', 'aadharBack', e);
        });

        $('#candidateSignatureInput').on('change', function(e) {
            initializeCropper('#candidateSignatureInput', 'candidateSignature', e);
        });

        $('#parentSignatureInput').on('change', function(e) {
            initializeCropper('#parentSignatureInput', 'parentSignature', e);
        });


        showImageBtn.on('click', function() {
            const inputId = $(this).data('imgsrc'); // Get the input ID from the this's data attribute
            const docname = $(this).data('docname'); // Get the document name
            const uploadDoc = $(this).data('uploadimage');
            // Check if the cropped image exists
            if (croppedImages[inputId]) {
                const imgSrc = URL.createObjectURL(croppedImages[inputId]); // Get the blob URL
                // Set the image src in the preview modal
                $('#imagePreview').attr('src', imgSrc);
                // Open the image preview modal
                $('#imagePreviewModal').modal('show');
            } else if (uploadDoc) {
                $('#imagePreview').attr('src', uploadDoc);
                $('#imagePreviewModal').modal('show');
            } else {
                messageShow('error', "No image has been cropped yet. Please select and crop an image first.");
            }
        });

        referCodeBtn.on('change', function() {
            if ($(this).is(":checked")) {
                $(".referCodeInput").fadeIn(200);
            } else {
                $(".referCodeInput").fadeOut(200);
            }
        });

        // share modal

        $("#shareRegistrationForm").on("click", function() {
            $("#shareregistrionformModal").modal("show");
        });

        ShareMobileInput.on('input', function() {
            enforceNumberInput($(this), 10);
        });

        ShareTypeInput.change(function() {
            if ($(this).val() === 'email') {
                $('.shareoptionEmail').removeClass('d-none');
                $('.shareoptionMobile').addClass('d-none');
            } else {
                $('.shareoptionMobile').removeClass('d-none');
                $('.shareoptionEmail').addClass('d-none');
            }
        });

        shareRegForm.on('submit', async function(event) {
            event.preventDefault();

            const formData = $(this).serialize();
            const url = "{{ route('registration.form.share.post') }}";

            // check validation 
            if (ShareTypeInput === "email" && !ShareEmailInput.val()) {
                ShareEmailInput.addClass('is-invalid');
            } else {
                ShareEmailInput.removeClass('is-invalid');
            }
            if (ShareTypeInput === "mobile" && !ShareMobileInput.val()) {
                ShareMobileInput.addClass('is-invalid');
            } else {
                ShareMobileInput.removeClass('is-invalid');
            }
            try {
                const responsData = await storData(url, formData);
                const data = responsData.data;
                // Close the modal
                $("#shareregistrionformModal").modal('hide');

                if (data && Object.keys(data).length > 0) {
                    const registrationFormLink = data.shareOnMobile;
                    const whatsAppPermission = data.whatsAppPermission;
                    const hostelName = "{{ session('hostel') }}";

                    // Parse the message JSON string
                    const messageTemplate = JSON.parse(data.message);

                    // Check if messageTemplate exists
                    if (!messageTemplate) {
                        messageShow('error', 'Please add a message for this in Permission Setting -> Message Manager.');
                        return;
                    }

                    // Constructing the WhatsApp message
                    const message = `${messageTemplate.title} ${messageTemplate.tagline} %0A %0A ${messageTemplate.body} %0A ${registrationFormLink} %0A ${messageTemplate.quotes} %0A Thank You %0A %0A *Best Regards* %0A ${messageTemplate.regards} %0A *${hostelName}*`;

                    const mobile = data.Mobileno;
                    const whatsappLink = 'whatsapp://send?phone=+91' + mobile + '&text=' + message;

                    // Check WhatsApp permission
                    if (whatsAppPermission) {
                        window.location.href = whatsappLink;
                    } else {
                        WhatsAppNotInstalled(); // Ensure this function handles the case when WhatsApp is not installed
                    }

                } else {
                    messageShow('success', responsData.message);
                }
                this.reset();

            } catch (error) {
                errorHandler(error);
            }
        });

        $("#addReferralCodeBtn").on('click', function() {
            const referCode = $("#referCodeInput").val();
            const referMobileNo = $("#mobileNumber").val();
            if (referCode !== "") {
                $.ajax({
                    type: "get",
                    url: "{{route('refer.code.check')}}",
                    data: {
                        'referCode': referCode,
                        'referMobileNo': referMobileNo,
                    },
                    success: function(response) {
                        let referInput = $("#referCodeInput");
                        let referInfoBtn = $('#referCodeDetails');
                        let message = "";
                        if (response.refer_code_is_valid) {
                            $("#referCodeHidden").val(referCode);
                            message = `Refer by: ${response.data.studentName}<br>Refer To: ${response.data.refered_name}`;
                            referInput.addClass('is-valid');
                        } else {
                            referInput.val('');
                            referInput.addClass('is-invalid');
                            message = "Invalid refer code";
                        }
                        referInfoBtn.attr('data-bs-content', message);
                        // Update popover content
                        var popover = new bootstrap.Popover(referInfoBtn, {
                            html: true
                        });

                        popover.update();
                    }
                });
            }
        });

        $("#registrationForm").on('submit', async function(e) {
            e.preventDefault();

            let isValid = true;
            // Validate the form fields
            $(this).find('input,select,textarea').each(function() {
                if ($(this).is(':required') && !$(this).val()) {
                    $(this).addClass('is-invalid');
                    isValid = false; // Form is invalid if any required field is empty
                    console.log(isValid, $(this));
                } else {
                    $(this).removeClass('is-invalid');
                }
            });

            // If form is valid, proceed with submission
            if (isValid) {
                let formData = new FormData(this);
                for (let inputName in uploadedImages) {
                    if (uploadedImages.hasOwnProperty(inputName)) {
                        formData.append(inputName, uploadedImages[inputName]); // Append uploaded images
                    }
                }
                const url = $(this).attr('action');
                try {
                    const response = await storData(url, formData);
                    if (response.statusCode === 200) {
                        messageShow('success', response.message);
                        // reload the page
                        setTimeout(function() {
                            window.location.reload();
                        }, 2000)
                    } else {
                        throw new Error(`Unexpected status code: ${response.status}`);
                    }
                } catch (error) {
                    if (error.responseJSON && error.responseJSON.statusCode) {
                        switch (error.responseJSON.statusCode) {
                            case 422:
                                const errors = error.responseJSON.error; // Assuming errors are in response.data.error
                                $(this).find('.is-invalid-feedback').remove();
                                $(this).find('.is-invalid').removeClass('is-invalid');

                                for (const [field, messages] of Object.entries(errors)) {
                                    const input = $(this).find(`[name="${field}"]`);
                                    input.addClass('is-invalid');
                                    let errorContainer = $('<span class="invalid-feedback" style="font-size:0.6rem"></span>').insertAfter(input.closest('.input-group'));
                                    errorContainer.text(messages.join('<br>'));
                                    errorContainer.show();
                                }
                                break;
                            case 404:
                                messageShow('error', 'Resource not found. Please check the URL and try again.');
                                break;
                            case 500:
                                messageShow('error', 'Server error. Please try again later.');
                                break;
                            default:
                                messageShow('error', 'An unexpected error occurred. Please try again later.');
                        }
                    } else {
                        messageShow('error', 'An unexpected error occurred. Please try again later.');
                    }
                }
            }
        });

    })
</script>
</div>

@endsection