@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')
<style>
    #join_with_us_id {
        display: flex;
        flex-wrap: nowrap;
        text-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
    }
    
    input#member_pan_number::placeholder,
    input#member_gst_number::placeholder {
        text-transform: capitalize !important;
    }

</style>

<div class="page-content">
    <div class="container-fluid">
        <div class="row">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <h4 class="mb-sm-0 font-size-18">
                    <a href="{{ route('clients') }}" class="btn btn-primary px-3 waves-effect waves-light btn-sm backToButton" title="Back Button" id="backToButton"><i class="mdi mdi-arrow-left font-size-20"></i></a>&nbsp;&nbsp;&nbsp; {{$data['title']}}
                </h4>
                <!-- <div class="col-md-1">
                    <div class="page-title-right">
                        <button class="btn btn-primary px-4 form-control" onclick="return importClients();" type="button"><span>+ Import</span></button>
                    </div>
                </div> -->
            </div>
        </div>

        <div class="row justify-content-end">
            <a href="javascript:void(0);" onclick="return learningVideo()" class="btn-youtube-pulse btn-youtube-pulse-border">
                <i class="mdi mdi-youtube"></i>
            </a>
        </div>

        @if($data['can_edit'] == 0)
          <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <form id="formPolicyHolderName">
                            <div class="mb-3 d-flex align-items-center justify-content-center">
                                <div class="form-check me-3">
                                    <input type="radio" class="form-check-input" id="add_family_head" name="selection"
                                        value="family_head_id" checked>
                                    <label class="form-check-label" for="add_family_head">Family Head</label>
                                </div>
                                <div class="form-check me-3">
                                    <input type="radio" class="form-check-input" id="add_family_member" name="selection"
                                        value="family_member">
                                    <label class="form-check-label" for="add_family_member">Family Member</label>
                                </div>
                                <div class="form-check">
                                    <input type="radio" class="form-check-input" id="add_firm" name="selection"
                                        value="firm">
                                    <label class="form-check-label" for="add_firm">Firm</label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @endif

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">       
                        <form action="{{ route('family.member.save') }}" accept-charset="utf-8" method="POST" id="formAddFamilyMember" class="needs-validation" novalidate>
                            @csrf
                            <input type="hidden" id="form_type" name="form_type" class="form-control">
                            <input type="hidden" class="form-control" name="client_id" id="client_id" value="">
                             <input type="hidden" name="action_type" id="action_type" value="">

                            <div id="basic-example">
                                <h3>Step 1</h3>
                                <section class="wizard-step">
                                    <div class="row">
                                        <div class="col-xl-4">
                                            <div class="row">
                                                <div class="col-md-10">
                                                    <div class="mb-3">
                                                        <label for="family_group_id" class="form-label">Select Family Group<span class="text-danger">*</span></label>
                                                        <select class="form-control select2-ajax" id="family_group_id" name="family_group_id" required></select>
                                                        <div class="invalid-feedback">This value is required.</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="mb-3">
                                                        <label class="form-label spaceRemove" for="hideGroupButton">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                        <button class="btn btn-primary px-4 form-control" onclick="return addFamilyGroup()" id="hideGroupButton" type="button"><span>Add</span></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-4">
                                            <div class="row">
                                                <div class="col-md-10">
                                                    <div class="mb-3">
                                                        <label for="family_head_id" class="form-label">Select Family Head<span class="text-danger">*</span></label>
                                                        <select class="form-control select2-ajax" id="family_head_id" name="family_head_id" required></select>
                                                        <div class="invalid-feedback">This value is required.</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="mb-3">
                                                        <label class="form-label spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                        <a href="javascript:void(0);" id="addFamilyHeadWithNewTab" class="btn btn-primary px-4 form-control"><span>Add</span></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-xl-4">
                                            <div class="mb-3">
                                                <label for="relation_with_head_id" class="form-label">Select Relation With Family Head</label>
                                                <select class="form-control select2-ajax" id="relation_with_head_id" name="relation_with_head_id"></select>
                                            </div>
                                        </div>

                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="member_first_name" class="form-label">First Name<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="member_first_name" id="member_first_name" placeholder="First name" value="" required autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="member_middle_name" class="form-label">Middle Name</label>
                                                <input type="text" class="form-control" name="member_middle_name" id="member_middle_name" placeholder="Middle name" value="" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="member_last_name" class="form-label">Last Name<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="member_last_name" id="member_last_name" placeholder="Last name" value="" required autocomplete="off">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="member_address_line1" class="form-label">Address Line1<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="member_address_line1" id="member_address_line1" placeholder="Address line 1" value="" required autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="member_address_line2" class="form-label">Address Line2</label>
                                                <input type="text" class="form-control" name="member_address_line2" id="member_address_line2" placeholder="Address line 2" value="" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-xl-6">
                                            <div class="row">
                                                <div class="col-md-10">
                                                    <div class="mb-3">
                                                        <label for="member_city_id" class="form-label">Select City<span class="text-danger">*</span></label>
                                                        <select class="form-control select2-ajax" id="member_city_id" name="member_city_id" required></select>
                                                        <div class="invalid-feedback">This value is required.</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="mb-3">
                                                        <label  class="form-label spaceRemove" for="addCityBtn">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                        <button class="btn btn-primary px-4 form-control" id="addCityBtn" onclick="return addCity();" type="button"><span>Add</span></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-6">
                                            <div class="row">
                                                <div class="col-md-10">
                                                    <div class="mb-3">
                                                        <label for="area_id" class="form-label">Select Area</label>
                                                        <select class="form-control select2-ajax" id="area_id" name="area_id"></select>                                                
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="mb-3">
                                                        <label  class="form-label spaceRemove" for="addAreaBtn">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                        <button class="btn btn-primary px-4 form-control" id="addAreaBtn" onclick="return addArea();" type="button"><span>Add</span></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                
                                <h3>Step 2</h3>
                                <section class="wizard-step">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="member_mobile_number" class="form-label">Mobile Number</label>
                                                <input type="text" class="form-control" maxlength="10" minlength="10" onkeypress="isNumber(event)" name="member_mobile_number" id="member_mobile_number" placeholder="Mobile number" value="" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="member_whatsapp_number" class="form-label">Whatsapp Number</label>
                                                <input type="text" class="form-control" maxlength="10" minlength="10" onkeypress="isNumber(event)" name="member_whatsapp_number" id="member_whatsapp_number" placeholder="Whatsapp number" value="" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="gender_id" class="form-label">Select Gender<span class="text-danger">*</span></label>
                                                <select class="form-control select2-ajax" id="gender_id" name="gender_id" required></select>
                                                <div class="invalid-feedback">This value is required.</div>
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="member_dob" class="form-label">DOB<!--<span class="text-danger">*</span><span style="font-size: 12px;color: #808080bd; margin-right:4px;" class="age">--></label>
                                                <input type="text" class="form-control" name="member_dob" id="member_dob" placeholder="dd-mm-yyyy" value="" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="member_anniversary_date" class="form-label">Anniversary Date</label>
                                                <input type="text" class="form-control" name="member_anniversary_date" id="member_anniversary_date" placeholder="dd-mm-yyyy" value="" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-xl-12">
                                            <div class="row">
                                                <div class="col-md-10">
                                                    <div class="mb-3">
                                                        <label for="business_type_id" class="form-label">Select Business Type<span class="text-danger">*</span></label>
                                                        <select class="form-control select2-ajax" id="business_type_id" name="business_type_id" required></select>
                                                        <div class="invalid-feedback">This value is required.</div>
                                                    </div>
                                                </div>
                                                <div class="col-md-2">
                                                    <div class="mb-3">
                                                        <label  class="form-label spaceRemove" for="addBusinessBtn">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                        <button class="btn btn-primary px-4 form-control" id="addBusinessBtn" onclick="return addBusiness();" type="button"><span>Add</span></button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        
                                    </div>
                                        
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="member_aadhaar_number" class="form-label">Aadhar card Number</label>
                                                <input type="text" class="form-control" name="member_aadhaar_number" id="member_aadhaar_number" placeholder="Aadhar card number" maxLength="14" value="" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="member_pan_number" class="form-label">Pan Card Number</label>
                                                <input type="text" class="form-control" name="member_pan_number" id="member_pan_number" placeholder="Pan card number" value="" maxlength="10" style="text-transform:uppercase" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="member_gst_number" class="form-label">GST Number</label>
                                                <input type="text" class="form-control" name="member_gst_number" id="member_gst_number" placeholder="GST number" maxLength="15" value="" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                    @if ($data['can_edit'] == 1)
                                        @php
                                            $aadhaarDoc = collect($data['documentDetails'])->firstWhere('document_name', 'Aadhar Card');
                                            $panDoc = collect($data['documentDetails'])->firstWhere('document_name', 'PAN Card');
                                            $gstDoc = collect($data['documentDetails'])->firstWhere('document_name', 'GST Certificate');
                                        @endphp
                                    @endif
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                            @if ($data['can_edit'] == 1 && !empty($aadhaarDoc))
                                                <label for="aadhaar_document_name" class="form-label">Upload Aadhar Card Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                                <a href="{{ route('download.client.document', ['id' => $aadhaarDoc['id'],'client_id' => $aadhaarDoc['client_id'], 'document' => $aadhaarDoc['name']]) }}" target="_blank" class="text text-primary ms-2">Download</a>
                                                <input type="file" class="form-control" multiple name="aadhaar_document_name[]" id="aadhaar_document_name" accept="image/jpeg,image/png,application/pdf">
                                            @else
                                                <label for="aadhaar_document_name" class="form-label">Upload Aadhar Card Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                                <input type="file" class="form-control" multiple name="aadhaar_document_name[]" id="aadhaar_document_name" accept="image/jpeg,image/png,application/pdf">
                                            @endif
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                            @if ($data['can_edit'] == 1 && !empty($panDoc))
                                                <label for="pan_document_name" class="form-label">Upload Pan Card Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                                <a href="{{ route('download.client.document', ['id' => $panDoc['id'],'client_id' => $panDoc['client_id'], 'document' => $panDoc['name']]) }}" target="_blank" class="text text-primary ms-2">Download</a>
                                                <input type="file" class="form-control" multiple name="pan_document_name[]" id="pan_document_name" accept="image/jpeg,image/png,application/pdf">
                                            @else
                                                <label for="pan_document_name" class="form-label">Upload Pan Card Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                                <input type="file" class="form-control" multiple name="pan_document_name[]" id="pan_document_name" accept="image/jpeg,image/png,application/pdf">
                                            @endif
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                            @if ($data['can_edit'] == 1 && !empty($gstDoc))
                                                <label for="gst_document_name" class="form-label">Upload GST Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                                <a href="{{ route('download.client.document', ['id' => $gstDoc['id'],'client_id' => $gstDoc['client_id'], 'document' => $gstDoc['name']]) }}" target="_blank" class="text text-primary ms-2">Download</a>
                                                <input type="file" class="form-control" multiple name="gst_document_name[]" id="gst_document_name" accept="image/jpeg,image/png,application/pdf">
                                            @else
                                                <label for="gst_document_name" class="form-label">Upload GST Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                                <input type="file" class="form-control" multiple name="gst_document_name[]" id="gst_document_name" accept="image/jpeg,image/png,application/pdf">
                                            @endif
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <div class="fallback" enctype="multipart/form-data">
                                                    <label for="photo" class="form-label">Upload Profile Photo
                                                        <span style="font-size: 12px;color: #808080bd;">(JPG, PNG, or JPEG)</span> 
                                                        @if (isset($data['data']['photo']) && $data['data']['photos'] != '')
                                                            <a target="_blank" href="{{ $data['data']['photos'] }}">View Photo</a>                                                            
                                                        @endif
                                                    </label>
                                                    {{-- <input type="file" name="photo" id="photo" class="form-control" accept="image/jpeg, image/png, image/jpg"> --}}
                                                    <div class="input-group">
                                                        <input type="file" name="photo" id="photo" class="form-control" accept="image/jpeg, image/png, image/jpg">
                                                        <button type="button" id="clear-photo" class="btn btn-secondary">Clear</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-12">
                                            <label class="form-label">Marriage Status<span class="text-danger">*</span></label>
                                            <div class="form-check">
                                                @foreach ($data['marriage_status'] as $key => $value)
                                                    <div class="form-check-inline">
                                                        <input class="form-check-input" type="radio" name="member_marriage_status_id" id="member_marriage_status_id{{ $value->id }}" value="{{ $value->id }}" required>
                                                        <label class="form-check-label me-5" for="member_marriage_status_id{{ $value->id }}">{{ $value->name }}</label>
                                                    </div>
                                                @endforeach
                                                <div class="invalid-feedback">This value is required.</div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row mt-3">
                                        <div class="col-md-12">
                                            <label class="form-label">Client Join With Us</label>
                                            <div class="form-check" id="join_with_us_id">
                                                @foreach ($data['join_with_us'] as $key => $value)
                                                    <div class="form-check-inline">
                                                        <input class="form-check-input" type="checkbox" name="member_client_join_with_us_id[]" id="member_client_join_with_us_id{{ $value->id }}" value="{{ $value->id }}">
                                                        <label class="form-check-label me-5 mb-3" for="member_client_join_with_us_id{{ $value->id }}">{{ $value->name }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- add family group -->
<div class="modal fade" id="modalFamilyGroup" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalFamilyGroupLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFamilyGroupLabel">Family Group</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formFamilyGroup" action="{{ route('family.group.save') }}" method="POST" class="needs-validation" novalidate>
                <div class="modal-body">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="family_group_name" class="form-label">Family Group Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="family_group_name" name="family_group_name" placeholder="Family group name" value="" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- add family group end-->

<!-- add city -->
<div class="modal fade" id="modalCity" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalCityLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCityLabel">City</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formCity" action="{{ route('master.city.save') }}" method="POST" class="needs-validation" novalidate>
                <div class="modal-body">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="city_name" class="form-label">City Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="city_name" name="city_name" placeholder="City name" value="" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- add city end-->

<!-- add area -->
<div class="modal fade" id="modalArea" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalAreaLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalAreaLabel">Area</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formArea" action="{{ route('master.area.save') }}" method="POST" class="needs-validation" novalidate>
                <div class="modal-body">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="city_id" class="form-label">Select City<span class="text-danger">*</span></label>
                                <select class="form-control select2-ajax" id="city_id" name="city_id" required></select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="area_name" class="form-label">Area Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="area_name" name="area_name" placeholder="Area name" value="" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- add area end-->

<!-- add business type -->
<div class="modal fade" id="modalBusiness" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalBusinessLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalBusinessLabel">Business</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formBusiness" action="{{ route('master.business.save') }}" method="POST" class="needs-validation" novalidate>
                <div class="modal-body">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="business_name" class="form-label">Business Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="business_name" name="business_name" placeholder="Business name" value="" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- add business type end-->

<!-- add relation -->
<div class="modal fade" id="modalRelation" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalRelationLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalRelationLabel">Relation</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formRelation" action="{{ route('master.relation.save') }}" method="POST" class="needs-validation" novalidate>
                <div class="modal-body">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="relation_name" class="form-label">Relation Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="relation_name" name="relation_name" placeholder="Relation name" value="" required>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- add relation end-->

@include('../reachassuree_agent/client/import-modal')
@include('../reachassuree_agent/master/comman/expiry-popup')
@include('../reachassuree_agent/master/comman/remaining-popup')

@endsection

@section('custom-scripts')
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>
<script src="{{ asset('assets/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/libs/parsleyjs/parsley.min.js') }}"></script>
<script src="{{ asset('assets/js/import/import-clients.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-validation.init.js') }}?v=2"></script>
<script src="{{ asset('assets/libs/jquery-steps/build/jquery.steps.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/form-wizard.init.js') }}"></script>

<script type="text/javascript">
    var redirectToUploadDoc = "{{ route('redirect.to.upload.client.doc') }}";
    var ajaxSearchFamilyGroup = "{{ route('search.family.group') }}";
    var ajaxSearchFamilyHead = "{{ route('search.family.head') }}";
    var ajaxSearchBusiness = "{{ route('search.business') }}";
    var ajaxSearchRelation = "{{ route('search.relation') }}";
    var ajaxSearchGender = "{{ route('search.gender') }}";
    var ajaxClientDetail = "{{ route('client.detail') }}";
    var ajaxSearchCity = "{{ route('search.city') }}";
    var ajaxSearchArea = "{{ route('search.area') }}";
    var is_expired = "{{ $data['is_expired'] }}";
    var ajaxClients = "{{ route('clients') }}";
    var ajaxSubAgentClients = "{{route('subagent.clients')}}";
    var canEdit = "{{ $data['can_edit'] }}";
    var remaining_units;
    var remaining_title;
    var percentage;
    var ajaxRelationSpouse = "{{ route('ajax.relation.pouse') }}";

    document.getElementById('clear-photo').addEventListener('click', function() {
        var fileInput = document.getElementById('photo');
        fileInput.value = ''; // Clear the selected file
    });


    // window.addEventListener('DOMContentLoaded', function () {
    //     const currentUrl = window.location.href;

    //     // Map routes to radio values
    //     const routeMap = {
    //         '{{ route("add.family.head") }}': 'family_head_id',
    //         '{{ route("add.family.member") }}': 'family_member',
    //         '{{ route("add.firm") }}': 'firm'
    //     };

    //     // Find which radio should be checked
    //     for (const [route, value] of Object.entries(routeMap)) {
    //         if (currentUrl.includes(route)) {
    //             document.querySelector(`input[name="selection"][value="${value}"]`).checked = true;
    //             break;
    //         }
    //     }

    //     // Handle clicks to change page
    //     const radios = document.querySelectorAll('input[name="selection"]');
    //     radios.forEach(function (radio) {
    //         radio.addEventListener('change', function () {
    //             let route = '';

    //             switch (this.value) {
    //                 case 'family_head_id':
    //                     route = '{{ route("add.family.head") }}';
    //                     break;
    //                 case 'family_member':
    //                     route = '{{ route("add.family.member") }}';
    //                     break;
    //                 case 'firm':
    //                     route = '{{ route("add.firm") }}';
    //                     break;
    //             }

    //             // Open the selected route in the same tab
    //             window.location.href = route;
    //         });
    //     });
    // });


       (function () {
        // ---- Laravel routes (safe JSON) ----
        const HOME   = @json(route('clients'));
        const HEAD   = @json(route('add.family.head'));
        const MEMBER = @json(route('add.family.member'));
        const FIRM   = @json(route('add.firm'));

        // Helper to normalize to pathname (works when route() returns full absolute URL)
        const toPath = (u) => {
            try { return new URL(u, window.location.origin).pathname; }
            catch (e) { return u; }
        };

        const PATH_HEAD   = toPath(HEAD);
        const PATH_MEMBER = toPath(MEMBER);
        const PATH_FIRM   = toPath(FIRM);
        const PATH_HOME   = toPath(HOME);
        const CURRENT_PATH = window.location.pathname;

        console.log('radio-back:init', { PATH_HEAD, PATH_MEMBER, PATH_FIRM, PATH_HOME, CURRENT_PATH });

        // --- Preselect radio (callable because modal might open later) ---
        function preselectRadio() {
            const map = {
            [PATH_HEAD]: 'family_head_id',
            [PATH_MEMBER]: 'family_member',
            [PATH_FIRM]: 'firm'
            };
            const value = map[CURRENT_PATH];
            if (!value) return;
            const el = document.querySelector(`input[name="selection"][value="${value}"]`);
            if (el) {
            el.checked = true;
            console.log('radio-back:preselected', value);
            } else {
            console.warn('radio-back: radio element not found yet in DOM');
            }
        }

        // run on load and for bfcache 'pageshow'
        document.addEventListener('DOMContentLoaded', preselectRadio);
        window.addEventListener('pageshow', (e) => { if (e.persisted) preselectRadio(); });

        // --- Trap back button to HOME for these pages ---
        const TRAP_PATHS = [PATH_HEAD, PATH_MEMBER, PATH_FIRM];
        if (TRAP_PATHS.includes(CURRENT_PATH)) {
            // ensure a state exists so popstate fires when Back is clicked
            history.replaceState({trap:false}, "");
            history.pushState({trap:true}, "");
            window.addEventListener('popstate', (e) => {
            try {
                // redirect to clients (HOME). use replace() to avoid extra entries
                window.location.replace(HOME);
            } catch (err) {
                window.location.href = HOME;
            }
            });

            // handle pageshow bfcache edge-cases
            window.addEventListener('pageshow', (e) => {
            if (e.persisted) {
                history.replaceState({trap:false}, "");
                history.pushState({trap:true}, "");
            }
            });
        }

        // --- Delegate radio change (works even if radios are inside modal inserted later) ---
        document.addEventListener('change', function (evt) {
            const t = evt.target;
            if (!t || !t.matches || !t.matches('input[name="selection"]')) return;

            if (t.value === 'family_head_id')   window.location.assign(HEAD);
            if (t.value === 'family_member')    window.location.assign(MEMBER);
            if (t.value === 'firm')             window.location.assign(FIRM);
        });

        })();

    $(document).ready(function() {
        var options = {
            beforeSubmit: showRequest, 
            success: showResponse 
        };

        $('#formAddFamilyMember , #formFamilyGroup , #formCity , #formArea , #formBusiness , #formRelation').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });

        $('#family_group_name , #member_first_name, #member_middle_name, #member_last_name, #member_address_line1, #relation_name, #member_address_line2, #city_name , #area_name, #business_name').on('input', function() {
            var inputValue = $(this).val();
            var capitalizedValue = capitalizeString(inputValue);
            $(this).val(capitalizedValue);
        });

        var currentUrl = window.location.href;
        var url = new URL(currentUrl);
        var type = url.searchParams.get("type");
        var id = url.searchParams.get("id");

        if(id > 0){
            var family_group = `{!! $data['family_group'] !!}`;

            if(family_group){
                const ajaxData = JSON.parse(family_group);
                
                var newOption = new Option(ajaxData.name, ajaxData.id, false, false);
                $('#family_group_id').append(newOption).trigger('change');
                
                $('#hideGroupButton , #family_group_id').attr('disabled', true);
                
                const newInput = $('<input type="hidden" name="family_group_id" value="'+ajaxData.id+'">');
                $('#formAddFamilyMember').prepend(newInput);
            }
        }

        $("#modalIsExpired , #remainMessageModal").hide();

        if(is_expired == 1){

            if(canEdit == 0){
                $('#formAddFamilyMember').css("cursor", "not-allowed");
                $("#formAddFamilyMember :input").prop("disabled", true);
            }

            $("#modalIsExpired").modal('show');
            $("#submitDiv").hide();
        }
        
        $('#member_first_name, #member_middle_name, #member_last_name, #area_name').bind('keypress', testInput);
       
        $('#relation_with_head_id').change(function() {
            var changeId = $(this).val();

            
            if(changeId == 2 || changeId == 5 || changeId == 6){ // Spouse
                $("#member_marriage_status_id1").prop("checked", true);
            }else if(changeId == 9 || changeId == 10 || changeId == 12 || changeId == 14){ // Firm-Malik, Partner, Maliki Firm, HUF Firm
                $("#member_marriage_status_id4").prop("checked", true);
            }else if(changeId == 12){ // X-Relation
                $("#member_marriage_status_id5").prop("checked", true);
            }else{
                $("#member_marriage_status_id1, #member_marriage_status_id4, #member_marriage_status_id5").prop("checked", false);
            }
        });


        // function setAnniversaryDate(value) {
        //     // Set visible readonly field
        //     $('#member_anniversary_date').val(value);

        //     // Also set hidden field for controller
        //     $('#member_anniversary_date_hidden').val(value);
        // }


        //  $('#relation_with_head_id').change(function() {
        //     var selectedText = $("#relation_with_head_id option:selected").text();
        //     var clientId = $("#family_head_id").val();

        //     if (selectedText === 'Spouse' && clientId) {
        //         $.ajax({
        //             type: 'GET',
        //             url: ajaxRelationSpouse + "?id=" + clientId,
        //             success: function(resultData) {
        //                 if (resultData.status === 1 && resultData.data) {
        //                     let annivDate = resultData.data.anniversary_date;

        //                     if (annivDate) {
        //                         // ✅ Keep spouse's anniversary from DB
        //                         // $('#member_anniversary_date')
        //                         //     .prop('disabled', false)
        //                         //     .datepicker('setDate', annivDate);

        //                         setAnniversaryDate(annivDate);

        //                         // 🔥 validate with current DOB if exists
        //                         if ($('#member_dob').val()) {
        //                             validateAnniversary();
        //                         }

        //                     } else {
        //                         // No DB date → allow selection but apply DOB+18 rule
        //                         $('#member_anniversary_date').prop('disabled', false).val('');
        //                         checkAndToggleAnniversary($('#member_dob').val());
        //                         setAnniversaryDate('');
        //                     }
        //                 } else {
        //                     $('#member_anniversary_date').prop('disabled', true).val('');
        //                 }
        //             }
        //         });
        //     } else {
        //         // Not Spouse → anniversary follows DOB rule
        //         $('#member_anniversary_date').prop('disabled', true).val('');
        //         checkAndToggleAnniversary($('#member_dob').val());
        //     }
        // });



        $('#family_head_id').change(function() {
            var id = $(this).val();

            if (id != null) {
                $.ajax({
                    type: 'GET',
                    url: ajaxClientDetail + "?id=" + id,
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
                            if(id != '-1' && canEdit != 1){
                                $("#member_last_name").val("" + resultData['data']['last_name'] + "");
                                $("#member_address_line1").val("" + resultData['data']['address1'] +"");
                                $("#member_address_line2").val("" + resultData['data']['address2'] +"");
                                $("#member_mobile_number").val("" + resultData['data']['mobile_number'] + "");
                                $("#member_whatsapp_number").val("" + resultData['data']['whatsapp_number'] + "");
                                $("#member_email").val("" + resultData['data']['email'] + "");

                                var newOption = new Option("" + resultData['data']['city_name'] + "","" + resultData['data']['city_id'] + "", false, false);
                                $('#member_city_id').append(newOption).trigger('change');
                                
                                if(resultData['data']['area_id'] != 0){
                                    var newOption = new Option("" + resultData['data']['area_name'] + "","" + resultData['data']['area_id'] + "", false, false);
                                    $('#area_id').append(newOption).trigger('change');
                                }
                            }
                        } else {
                            if(id != '-1' && canEdit != 1){
                                toastr["error"](resultData['msg']);
                            }
                        }
                    }
                });
            }

            callRelationFunction();

        });

        
        $("#family_group_id").select2({
            ajax: {
                url: ajaxSearchFamilyGroup,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for family group',
        });

        $("#family_head_id").select2({
            ajax: {
                url: ajaxSearchFamilyHead,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "group_id": function() {
                            return $("#family_group_id").val()
                        },
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    if (canEdit == 1) {
                        var selfOption = { id: -1, text: "Self" };
                        data.results.unshift(selfOption);
                    }
                    
                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        },
                    };
                },
                cache: false
            },
            placeholder: 'Search for family head',
        });

                    $("#family_group_id").on("change", function() {
                $("#family_head_id, #member_city_id, #area_id").empty();

                $("#member_first_name, #member_middle_name, #member_last_name, #member_address_line1, #member_address_line2").val("");
                $("#member_mobile_number, #member_whatsapp_number, #member_email").val("");
            });
        
        $("#family_head_id").on("select2:open", function(e) {
            if (!$("#family_group_id option:selected").length) {
                toastr.error("Please select a family group first.");
            }
        });

        $('#addFamilyHeadWithNewTab').on("click", function(e) {
            if (!$("#family_group_id option:selected").length) {
                toastr.error("Please select a family group first.");

            }else{
                const group_id = $('#family_group_id').val();
                var baseUrl = "{{ route('add.family.head') }}";
                var url = baseUrl + "?type=member&id=" + group_id;
                window.open(url, '_blank');
            }
        });

        $("#member_city_id").select2({
            ajax: {
                url: ajaxSearchCity,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for city',
        });

        $("#city_id").select2({
            ajax: {
                url: ajaxSearchCity,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for city',
            dropdownParent: $("#modalArea .modal-body")
        });

        $("#area_id").select2({
            ajax: {
                url: ajaxSearchArea,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "city_id": function() {
                            return $("#member_city_id").val()
                        },
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for area',
            allowClear: true,
        });

        $("#member_city_id").on("change", function() {
            $("#area_id").empty();
        });

        $("#area_id").on("select2:open", function(e) {
            if (!$("#member_city_id option:selected").length) {
                toastr.error("Please select a city first.");
            }
        });

        $("#gender_id").select2({
            ajax: {
                url: ajaxSearchGender,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "gender_id": -1,
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for gender',
        });

        $("#business_type_id").select2({
            ajax: {
                url: ajaxSearchBusiness,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for business type',
        });

        $("#relation_with_head_id").select2({
            ajax: {
                url: ajaxSearchRelation,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term,
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    // Filter out "Self" option (ID 1) when this form exists (family member form)
                    var results = data.results;
                    if ($('#formAddFamilyMember').length > 0) {
                        results = results.filter(function(item) {
                            return item.id != 1;
                        });
                    }

                    return {
                        results: results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for relation with family head',
            allowClear: true
        });

        $('#family_group_name').on('input', function() {
            var node = $(this);
            node.val(node.val().replace(/[^a-zA-Z\s-]/g, ''));
        });
    
        $('#city_name').on('input', function() {
            var node = $(this);
            node.val(node.val().replace(/[^a-zA-Z\s]/g, ''));
        });

        $('#business_name').on('input', function() {
            var node = $(this);
            node.val(node.val().replace(/[^a-zA-Z\s,&\-|/]/g, ''));
        });

        

        var currentDate = new Date();

            // Function to calculate age
            function calculateAge(dob) {
                const today = new Date();
                let age = today.getFullYear() - dob.getFullYear();
                const m = today.getMonth() - dob.getMonth();
                if (m < 0 || (m === 0 && today.getDate() < dob.getDate())) {
                    age--;
                }
                return age;
            }

            function checkAndToggleAnniversary(dobStr) {
                if (!dobStr) {
                    $('#member_anniversary_date').prop('disabled', true).val('');
                    return;
                }

                const parts = dobStr.split("-");
                if (parts.length !== 3) {
                    $('#member_anniversary_date').prop('disabled', true).val('');
                    return;
                }

                const dob = new Date(parts[2], parts[1] - 1, parts[0]); // dd-mm-yyyy
                if (isNaN(dob.getTime())) {
                    $('#member_anniversary_date').prop('disabled', true).val('');
                    return;
                }

                const age = calculateAge(dob);

                if (age < 18) {
                    $('#member_anniversary_date').prop('disabled', true).val('');
                } else {
                    $('#member_anniversary_date').prop('disabled', false);

                    // Set min anniversary = DOB + 18 years
                    let minAnnivDate = new Date(dob);
                    minAnnivDate.setFullYear(minAnnivDate.getFullYear() + 18);

                    $('#member_anniversary_date').datepicker('setStartDate', minAnnivDate);
                    $('#member_anniversary_date').datepicker('setEndDate', currentDate);
                }
            }

            // ✅ Validate Anniversary when selected
            // function validateAnniversary() {
            //     const dobStr = $('#member_dob').val();
            //     const annivStr = $('#member_anniversary_date').val();

            //     if (!dobStr || !annivStr) return true;

            //     const dobParts = dobStr.split("-");
            //     const annivParts = annivStr.split("-");

            //     if (dobParts.length !== 3 || annivParts.length !== 3) return true;

            //     const dob = new Date(dobParts[2], dobParts[1] - 1, dobParts[0]);
            //     const anniv = new Date(annivParts[2], annivParts[1] - 1, annivParts[0]);

            //     let minAnnivDate = new Date(dob);
            //     minAnnivDate.setFullYear(minAnnivDate.getFullYear() + 18);

            //     let today = new Date();
            //     today.setHours(0, 0, 0, 0);

            //     // ❌ if anniv < min allowed OR anniv > today
            //     if (anniv < minAnnivDate) {
            //         toastr.error("Anniversary date must be at least 18 years after DOB.");
            //         $('#member_dob').val('');
            //         return false; // ✅ don't clear, just show error

            //     }
            //     // ❌ if anniv > today
            //     if (anniv > today) {
            //         toastr.error("Future anniversary date is not allowed.");
            //         $('#member_dob').val('');
            //         return false;
            //     }
            //     return true;
            // }

            // ✅ Validate Anniversary when selected
            function validateAnniversary() {
                const dobStr = $('#member_dob').val();
                const annivStr = $('#member_anniversary_date').val();

                if (!dobStr || !annivStr) return true;

                const dobParts = dobStr.split("-");
                const annivParts = annivStr.split("-");

                if (dobParts.length !== 3 || annivParts.length !== 3) return true;

                const dob = new Date(dobParts[2], dobParts[1] - 1, dobParts[0]);
                const anniv = new Date(annivParts[2], annivParts[1] - 1, annivParts[0]);

                let minAnnivDate = new Date(dob);
                minAnnivDate.setFullYear(minAnnivDate.getFullYear() + 18);

                let today = new Date();
                today.setHours(0, 0, 0, 0);

                // ❌ if anniv < min allowed OR anniv > today
                if (anniv < minAnnivDate) {
                    toastr.error("Anniversary date must be at least 18 years older than DOB.");
                    $('#member_anniversary_date').val('');
                    return false;
                }

                if(anniv > today){
                    toastr.error("Future date not allowed.");
                     $('#member_anniversary_date').val('');
                    return false;
                }
                return true;
            }

            $("#member_dob").datepicker({
                format: "dd-mm-yyyy",
                endDate: currentDate,
                autoclose: true
            }).on('changeDate', function(e) {
                $('.datepicker').hide();
                const dob = e.format(0, "dd-mm-yyyy");
                checkAndToggleAnniversary(dob);
            });

            $('#member_dob').on('input change', function() {
                checkAndToggleAnniversary($(this).val());
            });



            // DOB datepicker
            // $("#member_dob").datepicker({
            //     format: "dd-mm-yyyy",
            //     endDate: currentDate,
            //     autoclose: true
            // }).on('changeDate', function(e) {
            //     $('.datepicker').hide();
            //     const dob = e.format(0, "dd-mm-yyyy");

            //     // If NOT spouse → toggle anniversary
            //     if ($("#relation_with_head_id option:selected").text() !== 'Spouse') {
            //         checkAndToggleAnniversary(dob);
            //     } else {
            //         // If spouse + anniversary already exists → validate only
            //         validateAnniversary();
            //     }
            // });

            $('#member_dob').on('input change', function() {
                if ($("#relation_with_head_id option:selected").text() !== 'Spouse') {
                    checkAndToggleAnniversary($(this).val());
                } else {
                    validateAnniversary();
                }
            });


            $(document).ready(function() {
                checkAndToggleAnniversary($('#member_dob').val());
            });

            $("#member_anniversary_date").datepicker({
                format: "dd-mm-yyyy",
                endDate: currentDate,
                autoclose: true
            }).on('changeDate', function() {
                $('.datepicker').hide();
                validateAnniversary(); // 🔥 validate when selected
            });

            $('#member_anniversary_date').on('change', function() {
                validateAnniversary(); // 🔥 also validate manual input
            });


        Inputmask("9{2}-9{2}-9{4}", {
            definitions: {
                "C": {
                validator: "[C,S,c,s]",
                cardinality: 1,
                }
            },
            insertMode: false
        }).mask($('#member_dob , #member_anniversary_date'));


        // dateValidations($('#member_dob, #member_anniversary_date'));

        $('#member_mobile_number, #member_whatsapp_number').on('keyup blur', function (e) {

            $("#formAddFamilyMember").removeClass('was-validated');

            var value = $(this).val();
            var isWhatsappNumber = e.target.id === 'member_whatsapp_number';

            if (e.type === 'keyup') {
                var numericValue = parseFloat(value);

                if (isNaN(numericValue)) {
                    $('#member_whatsapp_number').val('').removeClass("is-invalid");
                } else {
                    if (value.length === 10) {
                        $('#member_whatsapp_number').removeClass("is-invalid");
                    }else{
                        $('#member_whatsapp_number').addClass("is-invalid");
                    }
                    $('#member_whatsapp_number').val(numericValue);
                }
            }

            if (value.length !== '' && value.length !== 0) {
                if (value.length === 10) {
                    if(e.target.id === 'member_whatsapp_number'){
                        $('#member_whatsapp_number').removeClass("is-invalid");
                    }else{
                        $('#member_mobile_number').removeClass("is-invalid");
                    }
                } else {
                    $(this).addClass("is-invalid").removeClass("is-valid");
                }
            } else {               
                $(this).removeClass("is-invalid");
            }
        });

        $('#member_mobile_number , #member_whatsapp_number').on('change',function(e) {
            var mobile = $(this).val();

            if (mobile.length > 10) {
                e.preventDefault();
            }

            if(mobile.length != ''){
                if (e.target.value.length === 10) {
                    $(this).removeClass("is-invalid");
        
                }else{
                    $(this).addClass("is-invalid").removeClass("is-valid");

                    var errorMessage = (e.target.id === 'member_mobile_number') ? "Mobile number length must be 10 digits" : "Whatsapp number length must be 10 digits";
                    toastr['error'](errorMessage);
                }
            }else{
                $(this).removeClass("is-invalid");
            }
        });

        $("#member_mobile_number , #member_whatsapp_number").on('paste', function (evt) {
            var input = $(this);

            setTimeout(function () {
                var inputValues = input.val();

                var sanitizedValue = inputValues.replace(/[^0-9]/g, "");

                input.val(sanitizedValue);
            }, 0);
        });

        $('#export_pdf , #btnReset').prop('disabled', true);
    
        $('#family_group_id').change(function() {
            $('#export_pdf , #btnReset').prop('disabled', false);
        });

        var emailErrorShown = false;

        $("#member_email").bind("keyup blur", function() {
            var email = $(this).val();
            var lowercaseValue = email.toLowerCase();
            $(this).val(lowercaseValue);

            if (email.trim() === "") {
                $(this).removeClass("is-invalid");
                emailErrorShown = false;
            } else {

                if (validateEmail(email)) {
                    $(this).removeClass("is-invalid");
                    emailErrorShown = false;
                } else {
                    if (!emailErrorShown) {
                        $(this).addClass("is-invalid");
                        emailErrorShown = true;
                    }
                }
            }
        });

        $('#member_email').on('change',function(e) {
            var email = $(this).val();

            if(email.length != ''){
                if (!validateEmail(email)) {
                    $(this).addClass("is-invalid").removeClass("is-valid");
                    toastr['error']("Please enter a valid email address");
                }
            }else{
                $(this).removeClass("is-invalid");
            }
        });

        $("#member_pan_number").attr({
            "style": "text-transform:uppercase",
            "maxlength": 10,
        });

        $("#member_pan_number").change(function() {
            var inputvalues = $(this).val();
            var regex = /[A-Z]{5}[0-9]{4}[A-Z]{1}$/;

            if (regex.test(inputvalues.toUpperCase())) {
                toastr["success"]('PAN number is valid');
            } else {
                $("#member_pan_number").val('');
                toastr["error"]('Invalid PAN Number');
            }
        });

        $("#member_gst_number").attr({
            "style": "text-transform:uppercase",
            "maxlength": 16,
        });

        $("#member_gst_number").change(function() {
            var inputvalues = $(this).val();
            var regex = /\d{2}[A-Z]{5}\d{4}[A-Z]{1}[A-Z\d]{1}[Z]{1}[A-Z\d]{1}/;

            if (regex.test(inputvalues.toUpperCase())) {
                toastr["success"]('GST Number is valid');
            } else {
                $("#member_gst_number").val('');
                toastr["error"]('Invalid GST Number');
            }
        });

        // $('#member_aadhaar_number').on('input', function(event) {
        //     let input = event.target;
        //     let value = input.value.replace(/\D/g, '');
        //     let cursorPosition = input.selectionStart;

        //     if (value.trim().length > 4 && value.trim().length < 9) {
        //         value = value.replace(/(\d{4})(\d)/, '$1 $2');
        //         if (cursorPosition === 5) {
        //             cursorPosition = cursorPosition + 1;
        //         }
        //     } else if (value.trim().length >= 9) {
        //         if (cursorPosition === 10 && value.trim().length <= 9) {
        //             value = value.replace(/(\d{4})(\d{4})(\d{0,2})/, '$1 $2 $3');
        //             cursorPosition = cursorPosition + 2;
        //         } else {
        //             value = value.replace(/(\d{4})(\d{4})(\d)/, '$1 $2 $3');
        //         }
        //     }
        //     input.value = value;
        //     input.setSelectionRange(cursorPosition, cursorPosition);
        // });

        // $('#member_aadhaar_number').on('paste', function (event) {
        //     var input = $(this);

        //     setTimeout(function () {
        //         var inputValues = input.val();

        //         var sanitizedValue = inputValues.substring(0, 14);

        //         input.val(sanitizedValue);
        //     }, 0);
        // });

        // $("#member_aadhaar_number").change(function() {
        //     var inputvalues = $(this).val();
        //     var regex = /[0-9]{4}[0-9]{4}[0-9]{4}$/;

        //     if (regex.test(inputvalues.replace(/ /g, ""))) {
        //         toastr["success"]('Valid Aadhar number!');
        //         $("#member_aadhaar_number").removeClass('is-invalid');
        //     } else {
        //         $("#member_aadhaar_number").val('');
        //         if(inputvalues != ''){
        //             toastr["error"]('Aadhar Card number is wrong please enter correct number..!');
        //             $("#member_aadhaar_number").addClass('is-invalid');
        //         }else{
        //             $("#member_aadhaar_number").addClass('is-invalid');
        //         }
        //     }
        // });

        setupAadhaarValidation('#member_aadhaar_number'); //in agent_validation.js

        $('a').click(function() {
            if ($('.actions li:eq(1)').hasClass('disabled')) {
                disabledFinish();
            }
            if ($('.actions li:eq(1)').attr('class') == '') {
                $('.actions li:last-child').hide();
            }
        });

        const radioInputs = document.querySelectorAll('input[type="radio"][name="member_marriage_status_id"]');

        radioInputs.forEach(input => {
            input.addEventListener('change', function() {
                radioInputs.forEach(otherInput => {
                    if (!otherInput.checked) {
                        otherInput.classList.remove('is-valid');
                    }
                });

                if (this.checked) {
                    this.classList.add('is-valid');
                }
            });
        });

        // $("form input").on("keyup change", function() {
        //     var form = $(this).closest("form");

        //     if (form.find("input.is-invalid").length > 0) {
        //         $("#btnSave").attr("disabled",true);                
        //     } else {
        //         $("#btnSave").attr("disabled",false);
        //     }
        // });

        $(".actions ul li:contains('Next') a").on('click',function(){
            $(".wizard-step input:required, .wizard-step select:required").on("change keyup", function() {
                var fieldValue = $(this).val();

                if (!fieldValue || fieldValue.trim() === '') {
                    $(this).addClass("is-invalid").removeClass("is-valid"); 
                } else {
                    $(this).addClass("is-valid").removeClass("is-invalid");
                }
            });
        });

        // localStorage.clear();
        window.addEventListener('storage', handleStorageChange);
    });

    $(document).keydown(function(e) {
        var code = e.keyCode || e.which;

        if (code == 27) {
            $("#modalFamilyGroup , #modalCity , #modalArea , #modalBusiness , #modalRelation").modal('hide');
        }
    });

    function testInput(event) {
        var value = String.fromCharCode(event.which);
        var pattern = new RegExp(/[a-zåäö ]/i);
        return pattern.test(value);
    }

    function downloadPDF() {
        var name = $('#member_first_name').val();
        var dob = $('#member_dob').val();

        kendo.drawing.drawDOM($(".container-fluid")).then(function(group) {
            return kendo.drawing.exportPDF(group, {
                paperSize: "auto",
                margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
            });
        }).done(function(data) {
            kendo.saveAs({dataURI: data, fileName: name + "_" + dob + ".pdf"});
        });
    }

    function resetInputForm() {
        var form = document.getElementById('formAddFamilyMember');

        if (form) {
            form.classList.remove('was-validated');
        }

        $('#formAddFamilyMember, #formFamilyGroup, #formCity, #formArea, #formBusiness, #formRelation').trigger("reset");
        $("#member_city_id, #family_group_id, #family_head_id, #city_id, #area_id, #gender_id, #business_type_id, #relation_with_head_id").empty();
    }

    function showRequest(formData, jqForm, options) {
        
        let isValid = true;
        
        // Check all Aadhaar fields in the form
        $(jqForm).find('input[name="member_aadhaar_number"]').each(function() {
            if (!setupAadhaarValidation($(this), true)) {
                isValid = false;
            }
        });
        
        if (!isValid) {
            hideLoader();
            return false;
        }

        showLoader();

        var queryString = $.param(formData);
        return true;
    }

    function showResponse(responseText, statusText, xhr, $form) {
        hideLoader();

        if (responseText['status'] == 1) {

            var currentUrl = window.location.href;
            var url = new URL(currentUrl);
            var type = url.searchParams.get("type");
            
            if(type == "firm" || type == "general" || type == "life" || type == "investment"){

                if(type == "firm"){
                    var data = {
                        firm_member_id: responseText['data']['client_id'],
                        firm_member_name: responseText['data']['client_name'],
                    };

                }else if(type == "general"){
                    var data = {
                        general_member_id: responseText['data']['client_id'],
                        general_member_name: responseText['data']['client_name'],
                    };
                }else if(type == "life"){
                    var data = {
                        life_member_id: responseText['data']['client_id'],
                        life_member_name: responseText['data']['client_name'],
                    };
                }else if(type == "investment"){
                    var data = {
                        investment_member_id: responseText['data']['client_id'],
                        investment_member_name: responseText['data']['client_name'],
                    };
                }

                for (const key in data) {
                    if (data.hasOwnProperty(key)) {
                        localStorage.setItem(key, data[key]);
                    }
                }
            }

            toastr["success"](responseText['msg']);
           
            $("#" + $form[0].id + "").removeClass('was-validated');

            var modalName = $form[0].id.split('form');
            $("#modal" + modalName[1] + "").modal('hide');

            if ("#" + $form[0].id + "" == "#formFamilyGroup") {
                $('#family_group_id').empty();
                
                var newOption = new Option("" + responseText['data']['text'] + "", "" + responseText['data']['id'] + "", false, false);
                $('#family_group_id').append(newOption).trigger('change');

            } else if ("#" + $form[0].id + "" == "#formCity") {
                $('#member_city_id').empty();
                
                var newOption = new Option("" + responseText['data']['text'] + "", "" + responseText['data']['id'] + "", false, false);
                $('#member_city_id').append(newOption).trigger('change');

            } else if ("#" + $form[0].id + "" == "#formArea") {
                
                if ($("#member_city_id").val() == responseText['data']['city_id']) {
                    $('#area_id').empty();
                    
                    var newOption = new Option("" + responseText['data']['text'] + "", "" + responseText['data']['id'] + "", false, false);
                    $('#area_id').append(newOption).trigger('change');
                }
            } else if ("#" + $form[0].id + "" == "#formBusiness") {
                $('#business_type_id').empty();
                
                var newOption = new Option("" + responseText['data']['text'] + "", "" + responseText['data']['id'] + "", false, false);
                $('#business_type_id').append(newOption).trigger('change');
                
            } else if ("#" + $form[0].id + "" == "#formRelation") {
                $('#relation_with_head_id').empty();

                var newOption = new Option("" + responseText['data']['text'] + "", "" + responseText['data']['id'] + "", false, false);
                $('#relation_with_head_id').append(newOption).trigger('change');

            } else {

                 if (responseText['action_type'] == 'add_member') {
                    
                    var client_id = responseText['data']['client_id'];

                    window.location.href = "{{ route('import.add.member') }}" + "?client_id=" + client_id;
                    // }

                } else {
                    // percentage = responseText['percentage'];

                    // if(percentage != '' && percentage != 100){
                    //     remaining_title = responseText['remaining_title'];
                    //     remaining_message = responseText['remaining_message'];
                    // }

                    // forUploadDoc(responseText['data']['client_id'],responseText['group_id']);
                    window.location = ajaxClients;
                }
                // if (canEdit == 1) {
                //     if(type == 'sub-agent'){
                //         window.location = ajaxSubAgentClients;
                //     }else{
                //         window.location = ajaxClients;
                //     }
                // } else {
                //     percentage = responseText['percentage'];
                    
                //     if(percentage != '' && percentage != 100){
                //         remaining_title = responseText['remaining_title'];
                //         remaining_message = responseText['remaining_message'];
                //     }
                    
                //     window.location = ajaxClients;
                //     // forUploadDoc();
                // }
            }
        } else if (responseText['status'] == 0) {

            if (typeof responseText['data'] !== "undefined") {
                var size = Object.keys(responseText['data']).length;
                if (size > 0) {
                    for (var [key, value] of Object.entries(responseText['data'])) {
                        toastr["error"](value);

                        if (key === 'member_mobile_number'){
                            $("#" + $form[0].id + "").removeClass('was-validated');
                            $("#member_mobile_number").addClass('is-invalid').removeClass('is-valid');
                        }else if (key === 'member_whatsapp_number') {
                            $("#" + $form[0].id + "").removeClass('was-validated');
                            $("#member_whatsapp_number").addClass('is-invalid').removeClass('is-valid');
                        }else if (key === 'member_email') {
                            $("#" + $form[0].id + "").removeClass('was-validated');
                            $("#member_email").addClass('is-invalid').removeClass('is-valid');
                        }  
                    }
                }
            } else {
                toastr["error"](responseText['msg']);
            }
        }
    }

    function addFamilyGroup() {
        $('#formFamilyGroup').trigger("reset").removeClass('was-validated');
        $("#modalFamilyGroup").modal('show');        
    }

    function addCity() {
        $('#formCity').trigger("reset").removeClass('was-validated');
        $("#modalCity").modal('show');        
    }

    function addArea() {
        $('#formArea').trigger("reset").removeClass('was-validated');
        $("#city_id").empty();
        $("#modalArea").modal('show');        

        var city_id = $("#member_city_id").val();
        var city_name = $("#select2-member_city_id-container").text();

        if(city_id != null && city_name !=null){
            var newOption = new Option(city_name, city_id, false, false);
            $('#city_id').append(newOption).trigger('change');
        }
    }

    function addBusiness() {
        $('#formBusiness').trigger("reset").removeClass('was-validated');
        $("#modalBusiness").modal('show');        
    }

    function addRelation() {
        $('#formRelation').trigger("reset").removeClass('was-validated');
        $("#modalRelation").modal('show');
    }

    function expireMessage() {
        $('#remainMessageModal').modal('show');
        $('#remainHeading').text(remaining_title);
        $('#remainContent').text(remaining_message);
    }

    function forUploadDoc() {
        swal.fire({
            title: "Do you want to upload document ?",
            showCancelButton: true,
            confirmButtonColor: "#526BDF",
            cancelButtonColor: "#EC6767",
            confirmButtonText: "Yes, I want",
            cancelButtonText: "No, cancel it!",
        }).then((result) => {
            if (result.isConfirmed) {
                var groupId = $("#family_group_id").val();
                var clientId = $("#family_head_id").val();
                resetInputForm();
                window.location = redirectToUploadDoc + "?group_id=" + groupId + "&client_id=" + clientId;

            } else {
                var currentUrl = window.location.href;
                var url = new URL(currentUrl);
                var type = url.searchParams.get("type");

                if(type == "firm" || type == "general" || type == "life" || type == "investment"){
                    setTimeout(function() {
                        window.close();
                    }, 1000);
                }

                resetInputForm();
                
                if(percentage != '' && percentage != 100 && percentage != undefined){
                    setTimeout(function() {
                        expireMessage();
                    }, 2000);
                }else{
                    setTimeout(function() {
                        window.location = "{{route('clients')}}";
                    }, 2000);
                }
            }
        });
    }

    function disabledFinish(){
        $('#btnSave').remove();
        $('.actions li:last-child').show();
        $('.actions li:last-child a').remove();
        $('.actions li:last-child button').remove();

        if(is_expired == 0){
            if (canEdit != 1) {
                // $(".actions li:last").append("<button type='submit' class='btn btn-primary form-control stepsForm' id='btnSave'>Save & Continue</button>");
                 $(".actions li:last").append("<button type='button' class='btn btn-primary me-2 stepsForm' name='action_type' value='add_member' id='btnSaveTestMember'>Add Member</button>");
                $(".actions li:last").append("<button type='submit' class='btn btn-primary stepsForm' name='action_type' value='confirm_save' id='btnSave'>Confirm & Save</button>");
            }else{
                $(".actions li:last").append("<button type='submit' class='btn btn-primary form-control stepsForm' id='btnSave'>Update & Exit</button>");
            }
        }else{
            if (canEdit == 1) {
                $(".actions li:last").append("<button type='submit' class='btn btn-primary form-control stepsForm' id='btnSave'>Update & Exit</button>");
            }
            $('.actions li:last').css('margin', 'unset');
        }
    }
    
    function handleStorageChange(event) {
        const head_id = localStorage.getItem('member_head_id');
        const head_name = localStorage.getItem('member_head_name');

        if(head_id !== null && head_name !== null){
            $('#family_head_id').empty();

            var newOption = new Option(head_name, head_id, false, false);
            $('#family_head_id').append(newOption).trigger('change');

            var currentUrl = window.location.href;
            var url = new URL(currentUrl);
            var type = url.searchParams.get("type");

            if(type == "firm"){
                setTimeout(function() {
                    window.close();
                }, 1000);
            }
        }
    }

    $(document).ready(function() {
        $(document).on('click', '#btnSaveTestMember', function(e) {
            e.preventDefault(); // Prevent default form submission
            
            $('input[name="action_type"]').val('add_member');
            $('#formAddFamilyMember').submit();
        });

        $('#formAddFamilyMember').on('change', 'input[type="file"]', function() {
            const fileInput = $(this);

            const maxFiles = 5;

            if (fileInput[0].files.length > maxFiles) {
                toastr["error"](`You can only upload ${maxFiles} files.`);
                fileInput.val(''); // reset the file input
            }
        });

    });


    function callRelationFunction(){
        var id = $('#family_head_id').val();
    
        if(id == '-1'){
            $('#relation_with_head_id').empty();

            var newOption = new Option("Self", "1", false, false);
            $('#relation_with_head_id').append(newOption).trigger('change');
        }
    }
</script>
@endsection