@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;
    }

    .hr-text {
        line-height: 1em;
        position: relative;
        outline: 0;
        border: 0;
        color: black;
        text-align: center;
        height: 1.5em !important;
        opacity: unset !important;
        background-color: unset !important;
        &:before {
            content: '';
            background: linear-gradient(to right, transparent, #818078, transparent);
            position: absolute;
            left: 0;
            top: 50%;
            width: 100%;
            height: 1px;
        }
        &:after {
            content: attr(data-content);
            position: relative;
            display: inline-block;
            color: black;

            padding: 0 .5em;
            line-height: 1.5em;
            color: #818078;
            background-color: #fcfcfa;
        }
    }

</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">
                                <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('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="">
                            <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">&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();">
                                                        Add Row
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div id="add_new_row"></div>

                                    <div class="row ">

                                        <hr class="hr-text" data-content="Document Upload">

                                        <div class="col d-flex justify-content-end">
                                            <button type="button"
                                                class="btn btn-primary" style="padding-inline : 1.5rem !important"
                                                id="add_doc_row"
                                                onclick="AddNewRowDocumentUpload()">
                                                Add Row
                                            </button>
                                        </div>
                                    </div>

                                    <div id="add_new_row_document_upload"></div>

                                
                                    <div class="row">
                                    
                                        <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>
                                
                                </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>

<!-- similer clinet model -->
<div class="modal fade" id="similarClientModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="similarClientModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="similarClientModalLabel">Similar Clients</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div id="similarClientList">
                    <div class="text-center text-muted py-4">No data found</div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="btnSimilarContinue">Continue</button>
            </div>
        </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/document_upload/restore_doc_modal')
@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 ajaxCheckDeletedDocument = "{{ route('check.deleted.document') }}";
    var ajaxPermanentlyDeleteDocument = "{{ route('permanent.delete.document') }}";
    var downloadRouteTemplate = "{{ route('download.client.document') }}";
    var ajaxRestoreDocument = "{{ route('restore.document') }}";
    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);

    const CONFIG = {
        prefix: 'firm_document_',
        container: '#add_new_row_document_upload',
        addButton: '#add_doc_row',
        maxRows: 29
    };

    // Check if row should be hidden
    function shouldHideRow(doc) {
        if (!doc) return false;
        if (doc.is_deleted) return true;
        
        return false;
    }

    // Consolidated row template function
    function rowTemplate(i, doc = null) {
        const isHidden = shouldHideRow(doc) ? 'd-none' : '';

        return `
            <div class="row row-item-document ${isHidden}" data-row-index="${i}">
                ${doc ? `<input type="hidden" name="hidden_doc_id_${i}" value="${doc.id}">` : ''}
                <div class="col-xxl-3 col-xl-6">
                    <div class="mb-3">
                        <label class="form-label">Firm Document Type</label>
                        <select class="form-control select2-ajax" id="firm_document_type_${i}" name="firm_document_type_${i}"></select>
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-6">
                    <div class="mb-3">
                        <label class="form-label">Firm Document Name</label>
                        <select class="form-control select2-ajax document_name_row" id="firm_document_name_${i}" name="firm_document_name_${i}"></select>
                    </div>
                </div>
                <div class="col-xxl-3 col-xl-6">
                    <div class="mb-3">
                        <label class="form-label">Upload Document<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                        ${doc && doc.name ? `<a href="javascript:void(0)" data-document-name="${doc.name}" data-client-id="${doc.client_id}" class="download-client-document-btn text text-primary ms-2">Download</a>` : ''}
                        <div class="input-group">
                            <input type="file" name="document_name_${i}[]" id="document_name_${i}" multiple class="form-control" accept="image/jpeg, image/png, application/pdf">
                        </div>
                    </div>
                </div>
                <div class="col-xxl-2 col-xl-6">
                    <div class="mb-3">
                        <label class="form-label">Nos</label>
                        <input type="text" class="form-control" name="nos_${i}" id="nos_${i}" 
                            value="${doc?.document_number ?? ''}" placeholder="Enter nos">
                    </div>
                </div>
                <div class="col-xxl-1 justify-content-md-end">
                    <div class="mt-2">
                        <label class="form-label"></label>
                        <button type="button" class="btn btn-danger docRemove form-control" 
                            onclick="removeRowDocs(this)" 
                            data-document-id="${doc?.id ?? ''}" 
                            value="-">Remove</button>
                        
                    </div>
                </div>
            </div>
        `;
    }

    // Get visible rows helper
    function getVisibleRows() {
        return $(`${CONFIG.container} .row-item-document`).not('.d-none');
    }

    // Get next row index
    function getNextRowIndex() {
        let maxIndex = 0;
        $(`${CONFIG.container} .row-item-document`).each(function() {
            const idx = parseInt($(this).attr('data-row-index')) || 0;
            if (idx > maxIndex) maxIndex = idx;
        });
        return maxIndex + 1;
    }

        // Initialize row (select2, events)
    function initializeRow(index, doc = null) {
        const clientId = $("#client_id").val();
        const $row = $(`div.row-item-document[data-row-index="${index}"]`);

        // Set select2 values if doc exists
        if (doc) {
            $(`#firm_document_type_${index}`)
                .append(new Option(doc.document_type, doc.document_type_id, true, true))
                .trigger('change');
            $(`#firm_document_name_${index}`)
                .append(new Option(doc.document_name, doc.document_name_id, true, true))
                .trigger('change');

             // ⭐ CRITICAL: Store original values as data attributes
            $row.data({
                originalType: String(doc.document_type_id), // Convert to string for comparison
                originalName: String(doc.document_name_id)  // Convert to string for comparison
            });
        }
        
        // Initialize select2
        DocumentSelect2(index, clientId, 'firm_document_');
        
        // Capitalize nos field
        $(`#nos_${index}`).on('input', function() {
            $(this).val(capitalizeString($(this).val()));
        });

    }

    // Universal add row function
    function addRow(doc = null) {
        if (getVisibleRows().length >= CONFIG.maxRows) {
            $(CONFIG.addButton).prop('disabled', true);
            return;
        }
        
        rowCounter = getNextRowIndex();
        $(CONFIG.container).append(rowTemplate(rowCounter, doc));
        initializeRow(rowCounter, doc);
        updateRowControls();
    }

    function AddNewRowDocumentUpload() {
        addRow();
    }

    function removeRowDocs(button) {
        const $row = $(button).closest(".row-item-document");
        const DocId = $(button).data('document-id');

        // Helper to handle removal
        const performRemoval = () => {
            $row.addClass("d-none").attr("data-deleted", "1");
            if (getVisibleRows().length === 0) addRow();
            else updateRowControls();
        };

        // For existing records, show confirmation
        if (DocId) {
            Swal.fire({
                title: "Are you sure want to delete this?",
                text: "It will be moved to Trash and can be restored later.",
                showCancelButton: true,
                confirmButtonColor: "#526BDF",
                cancelButtonColor: "#EC6767",
                confirmButtonText: "Yes, delete it!",
                cancelButtonText: "No, cancel it!"
            }).then((result) => {
                if (result.isConfirmed) {
                    showLoader();
                    
                    $.ajax({
                        url: "{{ route('delete.client.document') }}",
                        method: "GET",
                        data: {
                            _token: "{{ csrf_token() }}",
                            id: DocId,
                        },
                        success: function(response) {
                            hideLoader();
                            if (response.status === 1) {
                                toastr["success"](response.msg);
                                performRemoval();
                            } else {
                                toastr["error"](response.msg || "Failed to delete record.");
                            }
                        },
                        error: function(xhr) {
                            hideLoader();
                            toastr["error"](xhr.responseJSON?.message || "Error deleting record.");
                        }
                    });
                }
            });
        } else {
            // New row - just remove
            $row.remove();
            if (getVisibleRows().length === 0) addRow();
            else updateRowControls();
        }
    }

    function updateRowControls() {
        const prefix = 'firm_document_';
        var visibleRows = getVisibleRows();
        var visibleCount = visibleRows.length;
        
         // Check for incomplete rows
        let hasIncomplete = false;
        visibleRows.each(function(index) {
            const $row = $(this);
            const rowId = $row.data('row-index');
            const complete = isRowComplete($row, prefix);
                    
            if (!complete) {
                hasIncomplete = true;
                return false; // break loop
            }
        });

        $(CONFIG.addButton).prop('disabled',  visibleCount >= 29 || hasIncomplete);

        if (visibleCount <= 1) {
            visibleRows.each(function () {
                const removeBtn = $(this).find(".docRemove");
                removeBtn.prop('disabled', !removeBtn.data('document-id'));
            });
        } else {
            visibleRows.find(".docRemove").prop('disabled', false);
        }
    }

    // Load existing documents on page load or client change
    function loadExistingDocuments(documents) {
        $(CONFIG.container).empty();
        rowCounter = 0;

        if (!documents?.length) {
            addRow();
            return;
        }

        let hasVisible = false;
        documents.forEach((doc, i) => {
            rowCounter++;
            if (!shouldHideRow(doc)) hasVisible = true;
            
            $(CONFIG.container).append(rowTemplate(rowCounter, doc));
            initializeRow(rowCounter, doc);
        });

        if (!hasVisible) addRow();
        updateRowControls(); // important: run after rows exist
    }

   (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;


        // --- 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() {

        updateRowControls();
         // Initialize first row for new entries
        DocumentSelect2(1, $("#client_id").val(), 'firm_document_');

        var options = {
            beforeSubmit: showRequest,
            success: showResponse
        };

// ==================================================================================================

/* =========================================================
   FIRM NAME SIMILAR SEARCH
========================================================= */

$("#firm_name").on("blur", function () {

    let firmName = $(this).val().trim();
    if (!firmName) return;

    $.ajax({
        url: "/admin/search-firm-similar",
        type: "GET",
        data: { first_name: firmName },
        beforeSend: function () {
            $("#similarClientList").html('');
        },
        success: function (res) {

            if (res.success && res.total_count > 0) {

                renderSimilarFirms(res.data);

                $("#similarClientList").show();
                $("#noSimilarClients").addClass("d-none");

                $("#btnSimilarContinue")
                    .prop("disabled", true)
                    .show();

                $("#similarClientModal").modal("show");

            } else {
                $("#similarClientList").hide().empty();
                $("#btnSimilarContinue").hide();
            }
        },
        error: function () {
            toastr.error("Error loading similar firms");
        }
    });
});


/* =========================================================
   RENDER SIMILAR FIRMS
========================================================= */

function renderSimilarFirms(data) {

    let activeFirms = [];
    let deletedFirms = [];

    data.forEach(item => {
        if (item.is_deleted == 1) {
            deletedFirms.push(item);
        } else {
            activeFirms.push(item);
        }
    });

    let html = '';

    /* ================= ACTIVE FIRMS ================= */

    if (activeFirms.length > 0) {

        html += `
        <div class="card mb-4">
            <div class="card-body">
                <div class="row fw-bold border-bottom pb-2 mb-2">
                    <div class="col-md-2">Select</div>
                    <div class="col-md-4">Firm Name</div>
                    <div class="col-md-3">Mobile</div>
                    <div class="col-md-3">Group</div>
                </div>
        `;

        activeFirms.forEach(item => {

            html += `
            <div class="row mb-2 align-items-center border-bottom pb-2">

                <div class="col-md-2">
                    <input type="checkbox"
                           class="form-check-input similar-client-checkbox"
                           value="${item.id}">
                </div>

                <div class="col-md-4">
                    <a href="/admin/view-client?id=${item.id}&button=close"
                       target="_blank"
                       class="fw-semibold text-primary text-decoration-none">
                        ${item.first_name}
                    </a>
                </div>

                <div class="col-md-3">
                    <input type="text" class="form-control"
                           value="${item.mobile_number || 'N/A'}" readonly>
                </div>

                <div class="col-md-3">
                    <input type="text" class="form-control"
                           value="${item.group_name || '—'}" readonly>
                </div>
            </div>
            `;
        });

        html += `
            </div>
        </div>
        `;
    }

    /* ================= DELETED FIRMS ================= */

    if (deletedFirms.length > 0) {

        html += `
        <div class="card">
            <div class="col-12">
                <h5 class="text-danger">
                    <i class="mdi mdi-trash-can-outline me-2"></i>Trash Management
                </h5>
            </div>

            <div class="card-body">
                <div class="row fw-bold border-bottom pb-2 mb-2">
                    <div class="col-md-3">Action</div>
                    <div class="col-md-3">Firm Name</div>
                    <div class="col-md-3">Mobile</div>
                    <div class="col-md-3">Group</div>
                </div>
        `;

        deletedFirms.forEach(item => {

            html += `
            <div class="row mb-2 align-items-center border-bottom pb-2">

                <div class="col-md-3">
                    <button type="button"
                            class="btn btn-sm btn-warning restore-client-btn"
                            data-client-id="${item.id}&button=close">
                        <i class="mdi mdi-restore me-1"></i>Restore
                    </button>
                </div>

                <div class="col-md-3">
                    <a href="/admin/view-client?id=${item.id}&button=close"
                       target="_blank"
                       class="fw-semibold text-primary text-decoration-none">
                        ${item.first_name}
                    </a>
                </div>

                <div class="col-md-3">
                    <input type="text" class="form-control"
                           value="${item.mobile_number || 'N/A'}" readonly>
                </div>

                <div class="col-md-3">
                    <input type="text" class="form-control"
                           value="${item.group_name || '—'}" readonly>
                </div>
            </div>
            `;
        });

        html += `
            </div>
        </div>
        `;
    }

    $("#similarClientList").html(html);
}


/* =========================================================
   SINGLE SELECT LOGIC
========================================================= */

$(document).on("change", ".similar-client-checkbox", function () {

    if (this.checked) {
        $(".similar-client-checkbox").not(this).prop("checked", false);
        $("#btnSimilarContinue").prop("disabled", false);
    } else {
        $("#btnSimilarContinue").prop("disabled", true);
    }
});


/* =========================================================
   RESTORE CLIENT (ADDED ONLY)
========================================================= */

// CSRF token (must exist in blade meta)
const csrfToken = $('meta[name="csrf-token"]').attr('content');

$(document).on("click", ".restore-client-btn", function (e) {
    e.preventDefault();

    let clientId = $(this).data('client-id');
    const $btn = $(this);

    $btn.prop("disabled", true)
        .html('<span class="spinner-border spinner-border-sm me-2"></span>Restoring...');

    $.ajax({
        url: '/admin/restoreClientwithimportmodules',
        type: 'POST',
        data: {
            client_id: clientId,
            _token: csrfToken
        },
        success: function (res) {
            toastr.success(res.msg || 'Firm restored successfully');
            setTimeout(() => {
                window.location.href = '/admin/manage-clients';
            }, 1200);
        },
        error: function () {
            toastr.error('❌ Restore failed!');
            $btn.prop("disabled", false)
                .html('<i class="mdi mdi-restore me-1"></i>Restore');
        }
    });
});


/* =========================================================
   CONTINUE BUTTON
========================================================= */

$("#btnSimilarContinue").on("click", function () {

    let selected = $(".similar-client-checkbox:checked");

    if (selected.length === 0) {
        toastr.warning("⚠️ Please select a firm!");
        return;
    }

    let firmId = selected.val();
    console.log("Selected Firm ID:", firmId);

    $("#similarClientModal").modal("hide");
    window.location.href = "/admin/manage-clients";
});


// ==================================================================================================
        $('#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 = '';
        $("#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);

                    // For new entries, add one empty row
            loadExistingDocuments([]);
        
        var newOption = new Option("Firm", "3", false, false);
        $('#gender_id').append(newOption).trigger('change').select2({disabled: 'readonly'});