@extends('reachassuree_agent/layouts.main')
@section('title', $data['title'])
@section('content')

<style>
    #errorshow p {
        margin: 0 0 5px 0;
        border-bottom: 1px solid;
        display: table;
    }

    #join_with_us_id {
        display: flex;
        flex-wrap: nowrap;
        text-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
    }

    input#firm_pan_number::placeholder,
    input#firm_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('import.index') }}" 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>

         <div class="modal-body">
            <div class="row">
                <div class="col-md-12">
                    <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="0">
                            <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="1">
                            <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="2">
                            <label class="form-check-label" for="add_firm">Firm</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">                            
                        <form action="{{ route('import.family.firm.save') }}" accept-charset="utf-8" method="POST" id="formAddFirm" class="needs-validation" novalidate>
                            @csrf
                            <input type="hidden" class="form-control" name="client_id" id="client_id" value="">
                            <input type="hidden" class="form-control" name="import_client_id" id="import_client_id" value="">
                            <div id="basic-example">
                                <h3>Step 1</h3>
                                <section class="wizard-step">
                                    <div class="row">
                                        <div class="col-xl-4">
                                            <div class="mb-3">
                                                <label for="firm_name" class="form-label">Firm Full Name<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="firm_name" id="firm_name" placeholder="Firm full name" value="" required autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-xl-3">
                                            <div class="mb-3">
                                                <label for="select_firm_type_id" class="form-label">Select Firm Type</label>
                                                <select class="form-control select2-ajax" id="select_firm_type_id" name="select_firm_type_id"></select>
                                            </div>
                                        </div>
                                        <div class="col-xl-5">
                                            <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-xl-3 d-flex justify-content-right">
                                            <div class="mb-3">
                                                <label class="form-label" for="new_group">Group Type<span class="text-danger">*</span></label>
                                                <div class="form-check">
                                                    <div class="form-check-inline">
                                                        <input class="form-check-inline form-check-input" type="radio" name="family_group_type" id="new_group" value="New Group" checked>
                                                        <label class="form-check-label me-5" for="new_group">New Group</label>
                                                    </div>
                                                    <div class="form-check-inline">
                                                        <input class="form-check-inline form-check-input" type="radio" name="family_group_type" id="select_existing" value="Select Existing">
                                                        <label class="form-check-label me-5" for="select_existing">Select Existing</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xl-9" id="new_family_group">
                                            <div class="mb-3">
                                                <label for="family_group_name_1" class="form-label">Family Group<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" id="family_group_name_1" name="family_group_name" placeholder="Family group name" value="" required autocomplete="off">
                                                <ul class="list-group position-absolute w-100 mt-1" id="group_suggestions" style="z-index: 9999; display: none;"></ul>
                                            </div>
                                        </div>
                                        <div class="col-xl-3" id="select_family_group">
                                            <div class="mb-3">
                                                <label for="family_group_id" class="form-label">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-1">
                                            <div class="mb-3">
                                                <label  class="form-label spaceRemove" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                <button class="btn btn-primary px-4 form-control" onclick="return addFamilyGroup()" type="button"><span>Add</span></button>
                                            </div>
                                        </div> --}}
                                        <div class="col-xl-5" id="select_family_member">
                                            <div class="mb-3">
                                                <label for="family_member_id" class="form-label">Select Family Member</label>
                                                <select class="form-control select2-ajax" id="family_member_id" name="family_member_id"></select>
                                                {{-- <div class="invalid-feedback">This value is required.</div> --}}
                                            </div>
                                        </div>
                                        <div class="col-xl-1" id="add_family_member_with_new_tab">
                                            <div class="mb-3">
                                                <label  class="form-label spaceRemove" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                <a href="javascript:void(0);" id="addFamilyMemberWithNewTab" class="btn btn-primary px-4 form-control"><span>Add</span></a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firm_address_line1" class="form-label">Firm address Line1<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="firm_address_line1" id="firm_address_line1" placeholder="Firm address line 1" value="" required autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firm_address_line2" class="form-label">Firm address Line2</label>
                                                <input type="text" class="form-control" name="firm_address_line2" id="firm_address_line2" placeholder="Firm 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="firm_city_id" class="form-label">Select City<span class="text-danger">*</span></label>
                                                        <select class="form-control select2-ajax" id="firm_city_id" name="firm_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>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="firm_mobile_number" class="form-label">Firm Mobile Number</label>
                                                <input type="text" class="form-control" maxlength="10" minlength="10" onkeypress="isNumber(event)" name="firm_mobile_number" id="firm_mobile_number" placeholder="Firm mobile number" value="" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="firm_whatsapp_number" class="form-label">Firm Whatsapp Number</label>
                                                <input type="text" class="form-control" maxlength="10" minlength="10" onkeypress="isNumber(event)" name="firm_whatsapp_number" id="firm_whatsapp_number" placeholder="Firm whatsapp number" value="" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="firm_email" class="form-label">Firm Email Address</label>
                                                {{-- <input type="email" class="form-control" name="firm_email" id="firm_email" placeholder="Email address" value="" onkeyup="if (/[^a-zA-Z0-9.@-]/g.test(this.value)) this.value = this.value.replace(/[^a-zA-Z0-9.@-]/g,'')" autocomplete="off"> --}}
                                                <input type="email" class="form-control" id="firm_email" name="firm_email" placeholder="Firm Email address" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-xl-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="firm_client_join_with_us_id[]" id="firm_client_join_with_us_id{{ $value->id }}" value="{{ $value->id }}">
                                                        <label class="form-check-label me-5 mb-3" for="firm_client_join_with_us_id{{ $value->id }}">{{ $value->name }}</label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                
                                <h3>Step 2</h3>
                                <section class="wizard-step">
                                    @if($data['can_edit'] == 0)
                                        <div class="row row-item">
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                     <label for="contact_person_mobile_no" class="form-label">Contact person name <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="contact_person_name[]" id="contact_person_name" placeholder="Enter contact person name" autocomplete="off"  required>
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="mb-3">
                                                    <label for="contact_person_mobile_no" class="form-label">Contact person mobile no <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="contact_person_mobile_no[]" id="contact_person_mobile_no" maxlength="10" minlength="10" onkeypress="isNumber(event)" placeholder="Enter contact person mobile no" autocomplete="off" required>
                                                </div>
                                            </div>
                                            <div class="col-md-3" id="new_contact_person_designation">
                                                <div class="mb-3">
                                                    <label for="contact_person_designation" class="form-label">Designation <span class="text-danger">*</span></label>
                                                    <input type="text" class="form-control" name="contact_person_designation[]" id="contact_person_designation" placeholder="Enter contact person designation" autocomplete="off" required>
                                                    <ul class="list-group position-absolute w-100 mt-1" id="designation_suggestions" style="z-index: 9999; display: none;"></ul>
                                                </div>
                                            </div>
                                            <div class="col-md-1">
                                                <div class="mb-3">
                                                    <label for="add_row" class="form-label mb-4"></label>
                                                    <button type="button" class="btn btn-primary form-control stopAdd" name="add_row" id="add_row" onclick="return AddNewRowFirst();">
                                                        <i class="bx bx-plus"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div id="add_new_row"></div>

                               

                                    @if($data['can_edit'] == 0)
                                    <div class="row row-item">
                                        <div class="col-xxl-3 col-xl-6">
                                            <div class="mb-3">
                                                <label for="firm_document_type_1" class="form-label">Firm Document Type</label>
                                                <select class="form-control select2-ajax" name="firm_document_type_1" id="firm_document_type_1"></select>
                                                {{-- <div class="invalid-feedback">This value is required.</div> --}}
                                            </div>
                                        </div>
                                        <div class="col-xxl-3 col-xl-6">
                                            <div class="mb-3">
                                                <label for="firm_document_name_1" class="form-label">Firm Document Name</label>
                                                <select class="form-control select2-ajax" id="firm_document_name_1" name="firm_document_name_1"></select>
                                                {{-- <div class="invalid-feedback">This value is required.</div> --}}
                                            </div>
                                        </div>
                                        <div class="col-xxl-3 col-xl-6">
                                            <div class="mb-3">
                                                <label for="document_name_1" class="form-label">Upload Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                                {{-- <input type="file" class="form-control" name="document_name_1[]" multiple id="document_name_1" accept="image/jpeg,image/png,application/pdf"> --}}
                                                <div class="input-group">
                                                    <input type="file" name="document_name_1[]" id="document_name_1" multiple class="form-control" accept="image/jpeg, image/png, application/pdf">
                                                    <button type="button" class="btn btn-secondary clear-photo">Clear</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-xxl-2 col-xl-6">
                                            <div class="mb-3">
                                                <label for="nos_1" class="form-label">Nos</label>
                                                <input type="text" class="form-control" name="nos_1" id="nos_1" placeholder="Enter nos">
                                            </div>
                                        </div>
                                        <div class="col-xxl-1 justify-content-md-end">
                                            <div class="mb-3">
                                                <input type="button" class="btn btn-primary form-control" name="add_row" id="add_row" value="+" style="margin-top: 25px;" onclick="return AddNewRowDocumentUpload();">
                                            </div>
                                        </div>
                                    </div>
                                    @endif
                                    <div id="add_new_row_document_upload"></div>

                                  
                                    <div class="row">
                                        {{-- <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="firm_aadhaar_number" class="form-label">Aadhar card Number</label>
                                                <input type="text" class="form-control" name="firm_aadhaar_number" id="firm_aadhaar_number" placeholder="Aadhar card number" onkeypress="isNumber(event);" maxLength="14" value="" autocomplete="off">
                                            </div>
                                        </div> --}}
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firm_pan_number" class="form-label">Pan Card Number</label>
                                                <input type="text" class="form-control" name="firm_pan_number" id="firm_pan_number" placeholder="Pan card number" value="" maxlength="10" style="text-transform:uppercase" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="firm_gst_number" class="form-label">GST Number</label>
                                                <input type="text" class="form-control" name="firm_gst_number" id="firm_gst_number" placeholder="GST number" maxLength="15" value="" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                
                                    <!-- <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <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">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <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">
                                            </div>
                                        </div>
                                    </div> -->
                                    {{-- <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <div class="fallback" enctype="multipart/form-data">
                                                    <label id="photo" class="form-label">Upload Your 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>
                                            </div>
                                        </div>
                                    </div> --}}
                                </section>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<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>
                @csrf
                <div class="modal-body">
                    <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>

<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>
                @csrf
                <div class="modal-body">
                    <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>

<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>
                @csrf
                <div class="modal-body">
                    <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>

<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>
                @csrf
                <div class="modal-body">
                    <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>

<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>
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="relation_name" class="form-label">Relation Name</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>


@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 ajaxSearchFamilyMember = "{{ route('search.family.member') }}";
    var ajaxSearchFamilyGroup = "{{ route('search.family.group') }}";
    var ajaxSearchBusiness = "{{ route('search.business') }}";
    var ajaxSearchRelation = "{{ route('search.firm.relation') }}";
    var ajaxSearchFirmType = "{{ route('search.firm.type') }}";
    var ajaxSearchGender = "{{ route('search.gender') }}";
    var ajaxClientDetail = "{{ route('client.detail') }}";
    var ajaxSearchDocumentType = "{{ route('search.document.type') }}";
    var ajaxSearchDocumentName = "{{ route('search.document.name') }}";
    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 rowCounter = 1;
    var rowCounterContact = 1;

    setTimeout(function() {
        var clearPhotoElements = document.getElementsByClassName('clear-photo');
        for (var i = 0; i < clearPhotoElements.length; i++) {
            clearPhotoElements[i].addEventListener('click', function() {
                var fileInput = document.getElementById('document_name_' + i);
                fileInput.value = ''; // Clear the selected file
            });
        }
    }, 500);

    // $(document).ready(function () {
    // // restore previously selected radio
    //     const urlParams = new URLSearchParams(window.location.search);
    //     const formType = urlParams.get("form_type");

    //     if (formType !== null) {
    //         $("input[name='selection'][value='" + formType + "']").prop("checked", true);
    //     }

    //     // on change, redirect
    //     $("input[name='selection']").on("change", function () {
    //         let uid = "{{ $data['data']['id'] }}";
    //         let selectedType = $("input[name='selection']:checked").val();

    //         window.location.href = "/admin/import-update?form_type=" + selectedType + "&client_id=" + uid;
    //     });
    // });

     $(document).ready(function () {
        function setSelectedRadioFromUrl() {
            const urlParams = new URLSearchParams(window.location.search);
            const formType = urlParams.get("form_type");

            if (formType !== null) {
                $("input[name='selection'][value='" + formType + "']").prop("checked", true);
            }
        }

        // Run on page load
        setSelectedRadioFromUrl();

        // Run also when page is restored from Chrome's back/forward cache
        window.addEventListener("pageshow", function () {
            setSelectedRadioFromUrl();
        });

        // On change → redirect with new form_type
        $("input[name='selection']").on("change", function () {
            let uid = "{{ $data['data']['id'] }}";
            let selectedType = $("input[name='selection']:checked").val();
            window.location.href =
                "/admin/import-update?form_type=" + selectedType + "&client_id=" + uid;
        });
    });

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

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

        $('#family_group_name , #firm_name, #firm_address_line1, #firm_address_line2 , #city_name , #area_name , #business_name, #relation_name').on('input', function() {
            var inputValue = $(this).val();
            var capitalizedValue = capitalizeString(inputValue);
            $(this).val(capitalizedValue);
        });

        $("#modalIsExpired , #remainMessageModal").hide();
        
        if(is_expired == 1){

            if(canEdit == 0){
                $('#formAddFirm').css("cursor", "not-allowed");
                $("#formAddFirm :input").prop("disabled", true);
            }
                
            $("#modalIsExpired").modal('show');
            $("#submitDiv").hide();
        }
        
        $("#select_family_group, #select_family_member, #add_family_member_with_new_tab").hide();
        
        $("input[type=radio][name=family_group_type]").on("change", function() {
            var value = $("input[type=radio][name=family_group_type]:checked").val();

            if(value == "New Group"){
                $("#new_family_group").show();
                $("#select_family_group, #select_family_member, #add_family_member_with_new_tab").hide();
            }else{
                $("#new_family_group").hide();
                $("#select_family_group, #select_family_member, #add_family_member_with_new_tab").show();
            }
        });
 
        var firm_name = '';
        $("#family_group_name_1").val("{{ $data['data']['first_name'] }} {{ $data['data']['middle_name'] }} {{ $data['data']['last_name'] }}");
        $("#firm_name").on('input',function(e){

            if(e.target.id == "firm_name"){
                firm_name = capitalizeString(this.value);
            }
            if(firm_name != ''){
                $("#family_group_name_1").val(firm_name);
            }else{
                $("#family_group_name_1").val('');
            }
        });
 
        var contact_person_name = '';
        $("#contact_person_name").on('input',function(e){

            if(e.target.id == "contact_person_name"){
                contact_person_name = capitalizeString(this.value);
            }
            if(contact_person_name != ''){
                $("#contact_person_name").val(contact_person_name);
            }else{
                $("#contact_person_name").val('');
            }
        });

        var contact_person_designation = '';
        $("#contact_person_designation").on('input',function(e){

            if(e.target.id == "contact_person_designation"){
                contact_person_designation = capitalizeString(this.value);
            }
            if(contact_person_designation != ''){
                $("#contact_person_designation").val(contact_person_designation);
            }else{
                $("#contact_person_designation").val('');
            }
        });
        $('#firm_name , #area_name , #family_group_name').bind('keypress', testInput);

        
        var newOption = new Option("Firm", "3", false, false);
        $('#gender_id').append(newOption).trigger('change').select2({disabled: 'readonly'});