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

<style>
    @media (max-width: 575px) {
        .me-5 {
            margin-right: 1rem!important;
        }
        .form-check-inline{
            margin-right: 0.6rem;
        }
    }

    @media (max-width: 767px) {
        .my-4 {
            margin-top: 0.5rem!important;
            margin-bottom: 0.5rem!important;
        }
    }

    input[type="radio"][name="form_type"] {
        display: none;
    }

    button#btnSave {
        width: 150px;
        height: 39px;
        line-height: 14px;
    }

    input[type="radio"][name="form_type"]+label {
        display: inline-block;
        padding: 5px 10px;
        background-color: #f1f5fe;
        border-radius: 4px;
        cursor: pointer;
    }

    input[type="radio"][name="form_type"]:checked+label {
        background-color: #2762e4;
        color: #fff;
    }

    .wizard .steps ul li:first-child a{
        border-radius: 0.8rem 0 0 0.8rem;
    }

    .wizard .steps ul li:last-child a{
        border-radius: 0 0.8rem 0.8rem 0;
    }
</style>

<div class="page-content">
    <div class="container-fluid">
        @include('../reachassuree_agent/master/comman/header')

        <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 (getSpacesFolder() == 'Localhost')
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <form action="{{ route('investment.save') }}" accept-charset="utf-8" method="POST" id="formAddInvestment" class="needs-validation" novalidate>
                            @csrf
                            <input type="hidden" id="form_type" name="form_type" class="form-control">
                            <input type="hidden" id="investment_id" name="investment_id" class="form-control">

                            <div id="basic-example">
                                <h3>Step 1</h3>
                                <section class="wizard-step">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="investment_transaction_date" class="form-label">Transaction Date<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="investment_transaction_date" id="investment_transaction_date" value="{{ date('d-m-Y') }}" required autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="document_number" class="form-label">Document Number<span class="text-danger">*</span></label>
                                                <input type="text" class="form-control" name="document_number" id="document_number" readonly value="" required>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="mb-3">
                                                <label for="investment_family_id" class="form-label">Family Group<span class="text-danger">*</span></label>
                                                <select class="form-control select2-ajax" id="investment_family_id" name="investment_family_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()" id="addHeadButton" type="button"><span>Add</span></button>
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="mb-3">
                                                <label for="investment_client_id" class="form-label">Investment Holder Name<span class="text-danger">*</span></label>
                                                <select class="form-control select2-ajax" id="investment_client_id" name="investment_client_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 extra_space">&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-4" id="first_name_div">
                                            <div class="mb-3">
                                                <label for="head_first_name" class="form-label" id="head_first_name_lable">First Name</label>
                                                <input type="text" class="form-control" name="head_first_name" id="head_first_name" disabled placeholder="First name" value="">
                                            </div>
                                        </div>
                                        <div class="col-md-4" id="middle_name_div">
                                            <div class="mb-3">
                                                <label for="head_middle_name" class="form-label">Middle Name</label>
                                                <input type="text" class="form-control" name="head_middle_name" id="head_middle_name" disabled placeholder="Middle name" value="">
                                            </div>
                                        </div>
                                        <div class="col-md-4" id="last_name_div">
                                            <div class="mb-3">
                                                <label for="head_last_name" class="form-label">Last Name</label>
                                                <input type="text" class="form-control" name="head_last_name" id="head_last_name" disabled placeholder="Last name" value="">
                                            </div>
                                        </div>
                                    </div>
        
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="head_address_line1" class="form-label">Address Line1</label>
                                                <input type="text" class="form-control" name="head_address_line1" id="head_address_line1" disabled placeholder="Address line 1" value="">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="head_address_line2" class="form-label">Address Line2</label>
                                                <input type="text" class="form-control" name="head_address_line2" id="head_address_line2" disabled placeholder="Address line 2" value="">
                                            </div>
                                        </div>
                                    </div>
        
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="city" class="form-label">City</label>
                                                <input type="text" class="form-control" name="city" id="city" placeholder="City" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="area" class="form-label">Area</label>
                                                <input type="text" class="form-control" name="area" id="area" placeholder="Area" disabled value="">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="head_mobile_number" class="form-label">Mobile Number</label>
                                                <input type="text" class="form-control" disabled name="head_mobile_number" id="head_mobile_number" placeholder="Mobile number" value="">
                                            </div>
                                        </div>
                                    </div>
        
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="head_email" class="form-label">Email Address</label>
                                                <input type="text" class="form-control" name="head_email" id="head_email" disabled placeholder="Email address" value="">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="gender" class="form-label">Gender</label>
                                                <input type="text" class="form-control" name="gender" disabled id="gender" placeholder="Gender" value="">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="head_dob" class="form-label">DOB</label>
                                                <input type="text" class="form-control" name="head_dob" disabled id="head_dob" placeholder="dd-mm-yyyy" value="">
                                            </div>
                                        </div>
                                    </div>
        
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="family_head_name" class="form-label">Family Head Name</label>
                                                <input type="text" class="form-control" name="family_head_name" disabled id="family_head_name" value="" placeholder="Family Head">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="relation_with_head" class="form-label">Relation With Head</label>
                                                <input type="text" class="form-control" name="relation_with_head" disabled id="relation_with_head" value="" placeholder="Relation with head">
                                            </div>
                                        </div>
                                    </div>
                                </section>

                                <h3>Step 2</h3>
                                <section class="wizard-step">
                                    <div class="row">
                                        <div class="col-md-6 mt-4">
                                            <div class="mb-3 ">
                                                <div class="form-check-inline">
                                                    <input class="form-check-inline form-check-input" type="radio" name="investment_select" id="mutual_fund" value="Mutual Fund" checked>
                                                    <label class="form-check-label me-3" for="mutual_fund">Mutual Fund</label>
                                                </div>
                                                <div class="form-check-inline">
                                                    <input class="form-check-inline form-check-input" type="radio" name="investment_select" id="fix_deposit" value="Fix Deposit">
                                                    <label class="form-check-label me-3" for="fix_deposit">Fix Deposit</label>
                                                </div>
                                                <div class="form-check-inline">
                                                    <input class="form-check-inline form-check-input" type="radio" name="investment_select" id="other_investment" value="Other Investment">
                                                    <label class="form-check-label me-3" for="other_investment">Other Investment</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="investment_company_id" class="form-label">Select Investment Company</label>
                                                <select class="form-control select2-ajax" id="investment_company_id" name="investment_company_id"></select>
                                            </div>
                                        </div>
                                        {{-- <div class="col-md-1">
                                            <div class="mb-3">
                                                <label  class="form-label extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                <button class="btn btn-primary px-4 form-control" onclick="return addInvestmentCompany();" type="button"><span>Add</span></button>
                                            </div>
                                        </div> --}}
                                    </div>
        
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="mb-3">
                                                <label for="investment_type_id" class="form-label">Investment Type<span class="text-danger">*</span></label>
                                                <select class="form-control select2-ajax" id="investment_type_id" name="investment_type_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 extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                <button class="btn btn-primary px-4 form-control" onclick="return addInvestmentType();" type="button"><span>Add</span></button>
                                            </div>
                                        </div>
                                        <div class="col-md-5">
                                            <div class="mb-3">
                                                <label for="investment_invested_party_id" class="form-label">Invested Party Name<span class="text-danger">*</span></label>
                                                <select class="form-control select2-ajax" id="investment_invested_party_id" name="investment_invested_party_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 extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                <button class="btn btn-primary px-4 form-control" onclick="return addInvestedParty();" type="button"><span>Add</span></button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="investment_document_number" class="form-label">Investment Document Number<span class="text-danger">*</span></label>
                                                <input type="text" id="investment_document_number" name="investment_document_number" class="form-control" placeholder="Enter investment document number" value="" required autocomplete="off" maxlength="25">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="investment_document_date" class="form-label">Document Date<span class="text-danger">*</span></label>
                                                <input type="text" id="investment_document_date" name="investment_document_date" class="form-control" placeholder="Select document date" value="" required autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="investment_nominee" class="form-label">Nominee Name</label>
                                                <select class="form-control select2-ajax" id="investment_nominee" name="investment_nominee"></select>
                                            </div>
                                        </div>
                                    </div>
        
                                    <div class="row">
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="investment_invested_amount" class="form-label">Investment Amount<span class="text-danger">*</span></label>
                                                <input type="text" id="investment_invested_amount" name="investment_invested_amount" class="form-control digitLimit" onkeypress="return isNumber(event);" placeholder="Enter investment amount" value="" required autocomplete="off" maxlength="12">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="investment_rate_of_interest" class="form-label">Rate Of Interest<span class="text-danger">*</span></label>
                                                <input type="text" id="investment_rate_of_interest" name="investment_rate_of_interest" class="form-control NumericValidation" placeholder="Rate of interest in %" value="" onkeyup="if (/[^0-9\.]/g.test(this.value)) this.value = this.value.replace(/[^0-9\.]/g,'')" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-4">
                                            <div class="mb-3">
                                                <label for="investment_growth_rate" class="form-label">Growth Rate(Apx)</label>
                                                <input type="text" id="investment_growth_rate" name="investment_growth_rate" class="form-control" placeholder="Enter growth rate" value="" onkeyup="if (/[^0-9\.]/g.test(this.value)) this.value = this.value.replace(/[^0-9\.]/g,'')" autocomplete="off" maxlength="12">
                                            </div>
                                        </div>
                                    </div>
        
                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="investment_mode_id" class="form-label">Select Mode<span class="text-danger">*</span></label>
                                                <select class="form-control select2-ajax" id="investment_mode_id" name="investment_mode_id" ></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 extra_space" id="investment_mode_button">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                <button class="btn btn-primary px-4 form-control" onclick="return addMode();" id="investment_mode_button" type="button"><span>Add</span></button>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                            <div class="mb-3">
                                                <label for="investment_term" class="form-label">Term (Yearly)</label>
                                                <input type="text" id="investment_term" name="investment_term" class="form-control" placeholder="Enter investment term" value="" autocomplete="off" maxlength="3">
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="investment_mature_value" class="form-label">Mature Value(Apx)</label>
                                                <input type="text" id="investment_mature_value" name="investment_mature_value" class="form-control digitLimit" onkeypress="return isNumber(event);" placeholder="Enter mature value" value="" autocomplete="off">
                                            </div>
                                        </div>
                                       
                                    </div>

                                    <div class="row">
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="investment_from_date" class="form-label">Payment Start Date<span class="text-danger">*</span></label>
                                                <input type="text" id="investment_from_date" name="investment_from_date" class="form-control" placeholder="dd-mm-yyyy" value="" required autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="investment_to_date" class="form-label">Payment End Date<span class="text-danger">*</span></label>
                                                <input type="text" id="investment_to_date" name="investment_to_date" class="form-control" placeholder="dd-mm-yyyy" value="" autocomplete="off">                                
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="investment_mature_date" class="form-label">Mature Date</label>
                                                <input type="text" id="investment_mature_date" name="investment_mature_date" class="form-control" placeholder="dd-mm-yyyy" autocomplete="off">
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="mb-3">
                                                <label for="investment_next_due_date" class="form-label">Next Premium Due Date</label>
                                                <input type="text" id="investment_next_due_date" name="investment_next_due_date" class="form-control" placeholder="dd-mm-yyyy" value="" autocomplete="off">                                
                                            </div>
                                        </div>
                                    </div>
                                </section>
                                
                                <h3>Step 3</h3>
                                <section class="wizard-step">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <label for="investment_remark" class="form-label">Remarks</label>
                                                <input type="text" class="form-control" name="investment_remark" id="investment_remark" placeholder="Remarks" maxlength="120" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
        
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="mb-3">
                                                <div class="fallback" enctype="multipart/form-data">
                                                    <input type="hidden" class="form-control" id="policy_document_names" name="policy_document_names">
                                                    @if ($data['can_edit'] == 1)
                                                        @if ($data['data']['image'] == "Found")
                                                            <label for="policy_document" class="form-label">Reset Policy Documents<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                                            <a id="download" href="" class="text text-primary ms-2">Download</a>
                                                            <input type="file" name="policy_document[]" multiple="multiple" id="policy_document" class="form-control" accept="image/jpeg,image/png,application/pdf">
                                                        @else
                                                            <label for="policy_document" class="form-label">Policy Documents<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                                            <input type="file" name="policy_document[]" multiple="multiple" id="policy_document" class="form-control" accept="image/jpeg,image/png,application/pdf">
                                                        @endif
                                                    @else
                                                        <label for="policy_document" class="form-label">Policy Documents<span style="font-size: 12px;color: #808080bd;">(JPG, PNG, JPEG or PDF)</span></label>
                                                        <input type="file" name="policy_document[]" multiple="multiple" id="policy_document" class="form-control" accept="image/jpeg,image/png,application/pdf">
                                                    @endif
                                                </div>
                                            </div>
                                        </div>
                                    </div>
        
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="mb-3">
                                                <label for="investment_paid_by_party_id" class="form-label">Paid By Client</label>
                                                <select class="form-control select2-ajax" id="investment_paid_by_party_id" name="investment_paid_by_party_id"></select>
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="mb-3">
                                                <label  class="form-label extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                <button class="btn btn-primary px-4 form-control" onclick="return addPaymentModeParty();" type="button"><span>Add</span></button>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="investment_party_payout_amount" class="form-label">Amount</label>
                                                <input type="text" class="form-control digitLimit" onkeypress="return isNumber(event)" name="investment_party_payout_amount" id="investment_party_payout_amount" value="" placeholder="Amount" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
        
                                    <div class="row">
                                        <div class="col-md-5">
                                            <div class="mb-3">
                                                <label for="investment_paid_by_us_id" class="form-label">Paid By Agent</label>
                                                <select class="form-control select2-ajax " id="investment_paid_by_us_id" name="investment_paid_by_us_id"></select>
                                            </div>
                                        </div>
                                        <div class="col-md-1">
                                            <div class="mb-3">
                                                <label  class="form-label extra_space" id="spaceRemove">&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                <button class="btn btn-primary px-4 form-control" onclick="return addPaymentModeUs();" type="button"><span>Add</span></button>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-3">
                                                <label for="investment_byus_payout_amount" class="form-label">Amount</label>
                                                <input type="text" class="form-control digitLimit" onkeypress="return isNumber(event)" name="investment_byus_payout_amount" id="investment_byus_payout_amount" value="" placeholder="Amount" autocomplete="off">
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @else
                         <div class="row">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="text-center">
                                            <div class="row justify-content-center mt-1">
                                                <div class="col-sm-3">
                                                    <div class="maintenance-img">
                                                        <img src="{{ asset('assets/images/coming-soon.svg') }}" alt="" class="img-fluid mx-auto d-block">
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <div class="row justify-content-center">
                                                <div class="col-md-8">
                                                    <h4>Coming Soon...!</h4>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
     @endif
    </div>
</div>

<!-- add family group -->
<div class="modal fade" id="modalFamilyGroup" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalFamilyGroupLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalFamilyGroupLabel">Family Group</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formFamilyGroup" action="{{ route('family.group.save') }}" method="POST" class="needs-validation" novalidate>
                @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>

<!-- add Investment company -->
<div class="modal fade" id="modalInvestmentCompany" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalInvestmentCompanyLabel" 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="modalInvestmentCompanyLabel">Investment Company</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formInvestmentCompany" action="{{ route('master.insurance.company.save') }}" method="POST" class="needs-validation" novalidate>
                @csrf
                <input class="form-check-inline" type="hidden" name="insurance_company_type" value="Investment">

                <div class="modal-body pb-1">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="insurance_company_name"  class="form-label">Company Short Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="insurance_company_name" name="insurance_company_name" placeholder="Enter company short name" value="" required autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="insurance_company_full_name"  class="form-label">Company Full Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="insurance_company_full_name" name="insurance_company_full_name" placeholder="Enter company full name" value="" required autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- add Investment company end-->

<!-- add investment type -->
<div class="modal fade" id="modalInvestmentType" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalInvestmentTypeLabel" 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="modalInvestmentTypeLabel">Investment Type</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formInvestmentType" action="{{ route('master.investment.type.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="investment_type_name" class="form-label">Investment Type Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="investment_type_name" name="investment_type_name" placeholder="Investment Type name" value="" required autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="my-2">
                            <div class="col-md-9">
                                <div class="form-check">
                                    <div class="form-check-inline">
                                        <input class="form-check-inline form-check-input" type="radio" name="investment_type" id="investment_type1" value="Mutual Fund" checked>
                                        <label class="form-check-label font-size-16 me-5" for="investment_type1">Mutual Fund</label>
                                    </div>
                                    <div class="form-check-inline">
                                        <input class="form-check-inline form-check-input" type="radio" name="investment_type" id="investment_type2" value="Fix Deposit">
                                        <label class="form-check-label font-size-16 me-5" for="investment_type2">Fix Deposit</label>
                                    </div>
                                    <div class="form-check-inline">
                                        <input class="form-check-inline form-check-input" type="radio" name="investment_type" id="investment_type3" value="Other Investment">
                                        <label class="form-check-label font-size-16" for="investment_type3">Other Investment</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- add investment type end-->

<!-- add invested party -->
<div class="modal fade" id="modalInvestedParty" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalInvestedPartyLabel" 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="modalInvestedPartyLabel">Invested Party</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formInvestedParty" action="{{ route('master.invested.party.save') }}" method="POST" class="needs-validation" novalidate>
                @csrf
                <input type="hidden" class="form-control" id="invested_party_id" name="invested_party_id" value="">

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label  class="form-label">Party Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="invested_party_name" name="invested_party_name" placeholder="Name of party to invest" value="" required autocomplete="off">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="city_id" class="form-label">Select City</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>

                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label  class="form-label">Remark</label>
                                <input type="text" class="form-control" id="invested_party_remark" name="invested_party_remark" placeholder="Remark" value="" autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- add invested party end-->

<!-- add mode -->
<div class="modal fade" id="modalMode" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalModeLabel" 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="modalModeLabel">Mode</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formMode" action="{{ route('master.mode.save') }}" method="POST" class="needs-validation" novalidate>
                @csrf
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="mode_name" class="form-label">Mode Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="mode_name" name="mode_name" placeholder="Mode name" value="" required autocomplete="off">
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for='mode_type' class='form-label'>Mode Duration Type<span class="text-danger">*</span></label>
                                <select class='form-control select2-ajax' name='mode_type' id='mode_type' required>
                                    <option></option>
                                    <option value='Days' id='Days'>Days</option>
                                    <option value='Month' id='Month'>Month</option>
                                    <option value='Year' id='Year'>Year</option>
                                    <option value='None' id='None'>None</option>
                                </select>
                                <div class="invalid-feedback">This value is required.</div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="mb-3">
                                <label for="mode_duration" class="form-label">Mode Duration<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="mode_duration" name="mode_duration" placeholder="Enter mode duration" value="" required autocomplete="off" maxlength="4" onkeypress="return isNumber(event)" value="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- add mode end-->

<!-- add payment mode party -->
<div class="modal fade" id="modalPaymentModeParty" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalPaymentModePartyLabel" 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="modalPaymentModePartyLabel">Payment Mode</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formPaymentModeParty" action="{{ route('master.payment.mode.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="payment_mode_name" class="form-label">Payment Mode Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="payment_mode_name" name="payment_mode_name" placeholder="Mode name" value="" required autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- add payment mode party end-->

<!-- add payment mode us -->
<div class="modal fade" id="modalPaymentModeUs" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modalPaymentModeUsLabel" 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="modalPaymentModeUsLabel">Payment Mode</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <form id="formPaymentModeUs" action="{{ route('master.payment.mode.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="payment_mode_name" class="form-label">Payment Mode Name<span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="payment_mode_name" name="payment_mode_name" placeholder="Mode name" value="" required autocomplete="off">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary px-3">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- add payment mode us end-->

@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/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 ajaxSearchFamilyGroup = "{{route('search.family.group')}}";
    var ajaxSearchInsuranceCompany = "{{ route('search.insurance.company') }}";
    var ajaxSearchInvestmentType = "{{ route('search.investment.type') }}";
    var ajaxSearchInvestedParty = "{{ route('search.invested.party') }}";
    var ajaxSearchPaymentMode = "{{ route('search.payment.mode') }}";
    var ajaxURLModeDetail = "{{ route('master.mode.detail') }}";
    var ajaxSearchClients = "{{ route('search.clients') }}";
    var isActualExpired = "{{ $data['isActualExpired'] }}";
    var ajaxClientDetail = "{{ route('client.detail') }}";
    var ajaxSearchFamilyNominee = "{{ route('search.family.nominee') }}";
    var ajaxInvestments = "{{ route('investments') }}";
    var ajaxSearchCity = "{{ route('search.city') }}";
    var ajaxSearchMode = "{{ route('search.mode') }}";
    var is_expired = "{{ $data['is_expired'] }}";
    var canEdit = "{{ $data['can_edit'] }}";
    var currentDate = new Date();
    var isEditModeLoading = 0;
    var remaining_units;
    var remaining_title;
    var percentage;
    var authType = "{{ Auth::user()->type }}";

    $(document).ready(function() {
        $("#document_number").val("" + generateUniqueIdentifier() + "");
        $("#mode_type").select2({placeholder: 'Search for mode duration type'});

        $('#mode_type').change(function () {
            if ($(this).val() === 'None') {
                $('#mode_duration').val('None').prop('readonly', true);
            } else {
                $('#mode_duration').val('').prop('readonly', false);
            }
        });

        $('.NumericValidation').on('input', function() {
            var elementId = $(this).attr('id');
            var NumericValidation = $(this);
            var numericValue = NumericValidation.val().replace(/[^\d.]/g, '');
            var parts = numericValue.split('.');
            
            if (parts.length > 1) {
                parts[1] = parts[1].substring(0, 2);
                numericValue = parts.join('.');
            }

            if (parseFloat(numericValue) > 100) {
                numericValue = '';
            }

            NumericValidation.val(numericValue);
        });

        $('#insurance_company_name, #insurance_company_full_name, #investment_type_name, #invested_party_name, #invested_party_remark, #investment_remark, #payment_mode_name, #mode_name').on('input', function() {
            var inputValue = $(this).val();
            var capitalizedValue = capitalizeString(inputValue);
            $(this).val(capitalizedValue);
        });   

        dateValidations($('#investment_transaction_date, #investment_document_date, #investment_from_date, #investment_to_date, #investment_mature_date, #investment_next_due_date'));

        if(isActualExpired == 1){
            $('.actions ul').remove();

            $(".actions").append("<p class='text-center text-danger font-size-14 fw-bold m-0 p-3'>Your current plan has expired. To resume disabled operations, you have the option to renew your existing plan or upgrade to a new one. Simply visit our 'Renew' or 'Upgrade' tab to proceed.</p>");
        }

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

        $('#formFamilyGroup, #formInvestmentCompany, #formAddInvestment, #formInvestmentType, #formInvestedParty, #formMode, #formPaymentModeParty, #formPaymentModeUs').submit(function() {
            $(this).ajaxSubmit(options);
            return false;
        });

        $('#addFamilyMemberWithNewTab').on("click", function(e) {
            if (!$("#investment_family_id option:selected").length) {
                toastr.error("Please select a family group first.");
            }else{
                const group_id = $('#investment_family_id').val();

                var baseUrl = "{{ route('add.family.member') }}";
                var url = baseUrl + "?type=investment&id=" + group_id;
                window.open(url, '_blank');
            }
        });

        $('a').click(function() {
            if ($('.actions li:eq(1)').hasClass('disabled')) {
                disabledFinish();
            }

            if ($('.actions li:eq(1)').attr('class') == '') {
                $('.actions li:last-child').hide();
            }
        });

        $(".actions ul li:contains('Next') a").on('click',function(){
            $(".wizard-step input:required, .wizard-step select:required").on("keyup change", function() {
                var fieldValue = $(this).val();
                
                if (!fieldValue || fieldValue.trim() === '') {
                    $(this).addClass("is-invalid").removeClass("is-valid");
                } else {
                    $(this).addClass("is-valid").removeClass("is-invalid");
                }
            });
        });

        $('#insurance_company_name').bind('keyup blur', function() {
            var node = $(this);
            node.val(node.val().replace(/[^a-zA-Z\s-]/g, ''));
        });
        
        $('#remainMessageModal, #modalIsExpired').hide();

        if(is_expired == 1){
            $('#formAddInvestment').css("cursor", "not-allowed");
            $("#formAddInvestment :input").prop("disabled", true);

            $("#modalIsExpired").modal('show');
        }

        $("#investment_mode_id, #investment_to_date, #investment_rate_of_interest, #investment_mode_button").attr('required', false).attr('disabled', true);

        $("#investment_transaction_date").datepicker({
            format: "dd-mm-yyyy",
            autoclose: true,
            endDate: currentDate,
            orientation: "bottom",
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });

        $("#investment_document_date, #investment_from_date, #investment_to_date, #investment_mature_date, #investment_next_due_date").datepicker({
            format: "dd-mm-yyyy",
        }).on('changeDate', function() {
            $('.datepicker').hide();
        });
        
        $("#investment_family_id").select2({
            ajax: {
                url: ajaxSearchFamilyGroup,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

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

        $("#investment_client_id").on("select2:open", function(e) {
            if (!$("#investment_family_id option:selected").length) {
                toastr.error("Please select a family group first.");
            }
        });

        $("#investment_client_id").select2({
            ajax: {
                url: ajaxSearchClients,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "get_all_client": function() { return 0; },
                        "group_id": function() { return $("#investment_family_id").val(); },
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        },
                    };
                },
                cache: false
            },
            placeholder: 'Search for policy holder name',
        });
        
        $("#investment_company_id").select2({
            ajax: {
                url: ajaxSearchInsuranceCompany,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "company_type": function() {
                            return "Investment"
                        },
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for Investment company ',
            allowClear: true
        });
        
        var radioButtons = document.getElementsByName("investment_select");
        for (var i = 0; i < radioButtons.length; i++) {
            radioButtons[i].addEventListener("change", handleRadioButtonChange);
        }
        
        $("#investment_type_id").select2({
            ajax: {
                url: ajaxSearchInvestmentType,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "investment_type": function() {
                            return getCheckedRadioButtonValue();
                        },
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

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

        $("#investment_type_id").on('change',function(){
            var value = $(this).val();
            
            if(value == 2 || value == 8 || value == 6 || value == 10){
                $("#investment_to_date, #investment_mode_id, #investment_mode_button, #investment_rate_of_interest").attr('disabled', false);
                $("#investment_growth_rate").attr('disabled',true).attr('required',false);
                $("#investment_rate_of_interest, #investment_to_date, #investment_mode_id").attr('required', true);                
            }else{
                $("#investment_to_date, #investment_mode_id, #investment_mode_button, #investment_rate_of_interest").attr('disabled', true);
                $("#investment_growth_rate").attr('disabled',false);
                $("#investment_rate_of_interest, #investment_to_date, #investment_mode_id").attr('required', false).removeClass('is-valid, is-invalid');                
            }
        });
        
        $("#investment_invested_party_id").select2({
            ajax: {
                url: ajaxSearchInvestedParty,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for Investment Party Name',
        });
        
        $("#city_id").select2({
            ajax: {
                url: ajaxSearchCity,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

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

        $("#investment_nominee").select2({
            ajax: {
                url: ajaxSearchFamilyNominee,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        "group_id": function() {return $("#investment_family_id").val()},
                        "client_id": function() {return $("#investment_client_id").val()},
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for Nominee',
            allowClear: true
        });
        
        $("#investment_mode_id").select2({
            ajax: {
                url: ajaxSearchMode,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        }
                    };
                },
                cache: false
            },
            placeholder: 'Search for mode',
        });
        
        $("#investment_paid_by_party_id").select2({
            ajax: {
                url: ajaxSearchPaymentMode,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

                    return {
                        results: data.results,
                        pagination: {
                            more: (params.page * 30) < data.total_count
                        },
                    };
                },
                cache: false
            },
            placeholder: 'Search for payment mode',
            allowClear: true
        });
        
        $("#investment_paid_by_us_id").select2({
            ajax: {
                url: ajaxSearchPaymentMode,
                dataType: 'json',
                delay: 0,
                data: function(params) {
                    return {
                        search_value: params.term, // search term
                        page: params.page
                    };
                },
                processResults: function(data, params) {
                    params.page = params.page || 1;

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

        $('.digitLimit').keyup(function() {
            var inputValue = $(this).val();

            if (inputValue.length > 12) {
                $(this).val(inputValue.slice(0, 8));
            }
        });
                
        $('#investment_client_id').change(function() {
            var id = $("#investment_client_id").val();
            
            if (id != null) {
                $.ajax({
                    type: 'GET',
                    url: ajaxClientDetail + "?id=" + id,
                    success: function(resultData) {
                        if (resultData['status'] == 1) {
                            if(resultData['data']['form_type'] == 2){
                                // For Firm User
                                $('#last_name_div, #middle_name_div').hide();
                                $('#first_name_div').removeClass('col-md-4').addClass('col-md-12');
                                $('#head_first_name_lable').text("Full name");
                            }else{
                                $('#last_name_div, #middle_name_div').show();
                                $('#first_name_div').removeClass('col-md-12').addClass('col-md-4');
                                $('#head_first_name_lable').text("First Name");
                                
                                $("#head_middle_name").val("" + resultData['data']['middle_name'] + "");
                                $("#head_last_name").val("" + resultData['data']['last_name'] + "");
                            }

                            $("#head_first_name").val("" + resultData['data']['first_name'] + "");
                            $("#head_address_line1").val("" + resultData['data']['address1'] + "");
                            $("#head_address_line2").val("" + resultData['data']['address2'] + "");
                            $("#head_mobile_number").val("" + resultData['data']['mobile_number'] +"");
                            $("#head_whatsapp_number").val("" + resultData['data']['whatsapp_number'] + "");
                            $("#head_email").val("" + resultData['data']['email'] + "");
                            $("#city").val("" + resultData['data']['city_name'] + "");
                            $("#area").val("" + resultData['data']['area_name'] + "");
                            $("#gender").val("" + resultData['data']['gender'] + "");
                            $("#head_dob").val("" + resultData['data']['dob'] + "");                    
                            $("#family_head_name").val("" + resultData['data']['family_head_name'] +"");
                            $("#relation_with_head").val("" + resultData['data']['relation_with_head'] + "");

                        } else {
                            toastr["error"](resultData['msg']);
                        }
                    }
                });
            }
        });
        
        $("#investment_mode_id, #investment_term, #investment_from_date").change(function() {
            modeAjax();
        });
        
        $('#mutual_fund').on('click', function() {
            if ($(this).is(':checked')) {
                $('#investment_mode_id').val(null).trigger('change');
                $('#investment_to_date').val('').trigger('change');

                $("#investment_mode_id, #investment_to_date, #investment_mode_button").attr('disabled', true).attr('required', false);
                $("#investment_rate_of_interest").val('').attr('disabled', true).attr('required', false);
                $("#investment_growth_rate").attr('disabled', false);
                
                removeExitingClass();
            }
        });

        $('#fix_deposit').on('click', function() {
            if ($(this).is(':checked')) {
                $('#investment_mode_id').val(null).trigger('change');
                $('#investment_to_date').val('').trigger('change');
                
                $('#investment_growth_rate').val('').attr('disabled', true);
                $('#investment_mode_button').attr('disabled', true);
                $("#investment_mode_id, #investment_to_date").attr('disabled', true).attr('required', false);
                $("#investment_rate_of_interest").attr('required', true).attr('disabled', false);                              

                removeExitingClass();
            }
        });

        $('#other_investment').on('click', function() {
            if ($(this).is(':checked')) {
                $("#investment_growth_rate").val('').attr('disabled', true);
                $("#investment_to_date, #investment_mode_id").attr('disabled', false).attr('required', true);
                $("#investment_mode_button").attr('disabled', false);
                $("#investment_rate_of_interest").attr('disabled', false).attr('required', true);
                
                removeExitingClass();
            }
        });

        $('#export_pdf').prop('disabled', true);

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

        $('#investment_company_name').bind('keyup blur', function() {
            var node = $(this);
            node.val(node.val().replace(/[^a-zA-Z\s-]/g, ''));
        });

        $("#mutual_fund, #fix_deposit, #other_investment").on("change", function() {
            $("#investment_type_id").val("").trigger("change");
        });

        if(percentage != '' && percentage != 100  && percentage != undefined){
            setTimeout(function() {
                expireMessage();
            }, 1000);
        }

        
        // localStorage.clear();
        window.addEventListener('storage', handleStorageChange);
    });
    
    $(document).keydown(function(e) {
        var code = e.keyCode || e.which;

        if (code == 27) {
            $("#modalMode, #modalPaymentModeParty, #modalPaymentModeUs").modal('hide');
        }
    });

    function modeAjax(){
        var value = $("#investment_type_id").val();

        if(value == 2 || value == 8 || value == 6 || value == 10){
            $("#investment_to_date, #investment_mature_date").attr('disabled', false);
            $("#investment_to_date").attr('required', true);
        }else{
            $("#investment_to_date, #investment_mature_date").attr('disabled', true);
            $("#investment_to_date").attr('required', false);
        }

        var modeId = $('#investment_mode_id').val();
        if(modeId != '' && modeId != null){
            $.ajax({
                type: 'GET',
                url: ajaxURLModeDetail + "?id=" + modeId,
                success: function(resultData) {
                    if (resultData['status'] == 1) {
                        var name = resultData['data']['name'];
                        var type = resultData['data']['type'];
                        var duration = resultData['data']['duration'];
    
                        var investmentTerm = $('#investment_term').val();
                        var riskFromDate = $("#investment_from_date").val();
                        riskFromDate = riskFromDate.split('-');
                        var investToDate = new Date(riskFromDate[2], riskFromDate[1] - 1, riskFromDate[0]);
                        
                        if(investToDate != "Invalid Date"){

                            var riskFromDates = $("#investment_from_date").val();
                            riskFromDates = riskFromDates.split('-');
                            var maturity_date = new Date(riskFromDates[2], riskFromDates[1] - 1, riskFromDates[0]);
                            maturity_date.setFullYear(maturity_date.getFullYear() + parseInt(investmentTerm));
                            setConvertedModeMaturity(maturity_date);
                    
                            if (type == "Year") {
                                investToDate.setFullYear(investToDate.getFullYear() + (parseInt(investmentTerm) - parseInt(duration)));
                                setConvertedDate(investToDate);
                            } else if (type == "Month") {
                                investToDate.setFullYear(investToDate.getFullYear() + parseInt(investmentTerm));
                                investToDate.setMonth(investToDate.getMonth() - parseInt(duration));
                                setConvertedDate(investToDate);
                            } else if (type == "Days") {
                                investToDate.setFullYear(investToDate.getFullYear() + parseInt(investmentTerm));
                                investToDate.setDate(investToDate.getDate() - parseInt(duration));
                                setConvertedDate(investToDate);
                            } else {
                                setBlankToDate();
                            }
                    
                            if (name == "Till Tremination") {
                                $('#investment_mature_date').datepicker('setDate', maturity_date);
                                $("#investment_to_date").val('').attr('required', false);
                            } else if (name == "Single") {
                                $("#investment_term").val("1");
                                $('#investment_mature_date').datepicker('setDate', maturity_date);
                                $("#investment_to_date").attr('disabled', true).attr('required', false);
                            }
                        }
                    }
                }
            });
        }
    }

    function showRequest(formData, jqForm, options) {
        showLoader();
       
        var queryString = $.param(formData);
        return true;
    }
    
    function showResponse(responseText, statusText, xhr, $form) {
       hideLoader();
       
        if (responseText['status'] == 1) {
            toastr["success"](responseText['msg']);
       
            $("#" + $form[0].id + "").removeClass('was-validated');
       
            var modalName = $form[0].id.split('form');
            $("#modal" + modalName[1] + "").modal('hide');
       
            if ("#" + $form[0].id + "" == "#formAddInvestment") {
                window.location = ajaxInvestments;
                resetInputForm();

                percentage = responseText['percentage'];
                if(percentage != '' && percentage != 100){
                    remaining_title = responseText['remaining_title'];
                    remaining_message = responseText['remaining_message'];
                }
            } else if ("#" + $form[0].id + "" == "#formFamilyGroup") {
                $("#investment_family_id").empty();

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

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

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

            } else if ("#" + $form[0].id + "" == "#formInvestedParty") {
                $('#investment_invested_party_id').empty();

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

            } else if ("#" + $form[0].id + "" == "#formMode") {
                $('#investment_mode_id').empty();

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

            } else if ("#" + $form[0].id + "" == "#formPaymentModeParty") {
                $('#investment_paid_by_party_id').empty();

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

            } else if ("#" + $form[0].id + "" == "#formPaymentModeUs") {
                $('#investment_paid_by_us_id').empty();

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

            } else if ("#" + $form[0].id + "" == "#formPolicyDocumentUpload") {
                console.log(responseText);
            } else {
                resetInputForm();
            }

        } else if (responseText['status'] == 0) {

            if (typeof responseText['data'] !== "undefined") {

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

                if(authType == 1 && responseText['flag'] == "Document"){
                    $('#modelPlanName').text('');
                    $('#modelPlanName').text("Document");
                    $('.forPlanUpgrade').hide();
                    $('.forPlanPurchase').show();
                    $('#upgradePurchaseModal').modal('show');
                }

                if(authType == 1 && responseText['flag'] == "Policy"){
                    $('#modelPlanName').text('');
                    $('#modelPlanName').text("Policy entery");
                    $('.forPlanUpgrade').show();
                    $('.forPlanPurchase').hide();
                    $('#upgradePurchaseModal').modal('show');
                }
            }
        }
    }
    
    function expireMessage() {
        $('#remainMessageModal').modal('show');
        $('#remainHeading').text(remaining_title);
        $('#remainContent').text(remaining_message);
    }
    
    function setConvertedDate(investToDate) {
        datepicker = $('#investment_to_date');
        datepicker.datepicker();
        datepicker.datepicker('setDate', investToDate);
    }

    function setConvertedModeMaturity(maturity_date) {
        datepicker = $('#investment_mature_date');
        datepicker.datepicker();
        datepicker.datepicker('setDate', maturity_date);
    }

    function setBlankToDate(investToDate) {
        $('#investment_to_date').val('').datepicker('destroy');

        $("#investment_to_date").datepicker({
            format: "dd-mm-yyyy",
        }).on('changeDate input', function() {
            $('.datepicker').hide();
        });
    }

    function setConvertedStartToDate(investToDate) {
        datepicker = $('#investment_to_date');
        datepicker.datepicker();
        datepicker.datepicker('setDate', investToDate);
    }

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

    function addInvestmentType() {
        $('#formInvestmentType').trigger("reset").removeClass('was-validated');
        $("#modalInvestmentType").modal('show');
        var value =getCheckedRadioButtonValue();

        if(value == "Mutual Fund"){
            $("#investment_type1").attr('checked',true);
            $("#investment_type2, #investment_type3").attr('checked',false);
        }else if(value == "Fix Deposit"){
            $("#investment_type2").attr('checked',true);
            $("#investment_type1, #investment_type3").attr('checked',false);
        }else if(value == "Other Investment"){
            $("#investment_type3").attr('checked',true);
            $("#investment_type1, #investment_type2").attr('checked',false);           
        }
    }

    function addInvestedParty() {
        $('#formInvestedParty').trigger("reset").removeClass('was-validated');
        $("#city_id").empty().trigger("change");
        $("#modalInvestedParty").modal('show');        
    }

    function addMode() {
        $('#mode_type').val('').trigger('change');
        $('#formMode').trigger("reset").removeClass('was-validated');
        $("#modalMode").modal('show');
    }

    function addPaymentModeParty() {
        $('#formPaymentModeParty').trigger("reset").removeClass('was-validated');
        $("#modalPaymentModeParty").modal('show');
    }

    function addPaymentModeUs() {
        $('#formPaymentModeUs').trigger("reset").removeClass('was-validated');
        $("#modalPaymentModeUs").modal('show');
    }

    function resetInputForm() {
        $('#formAddInvestment').trigger("reset");
        $("#investment_client_id, #investment_company_id, #investment_type_id, #investment_invested_party_id, #investment_mode_id, #investment_paid_by_party_id, #investment_paid_by_us_id, #city_id").empty();

        $("#document_number").val("" + generateUniqueIdentifier() + "");
    }

    function downloadPDF() {
        var dn = $('#document_number').val();
        kendo.drawing.drawDOM($(".container-fluid")).then(function(group) {
            return kendo.drawing.exportPDF(group, { paperSize: "auto", margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }});
        }).done(function(data) {
            kendo.saveAs({dataURI: data,fileName: dn + ".pdf",});
        });
    }

    function getCheckedRadioButtonValue() {
        var selectedValue = document.querySelector('input[name="investment_select"]:checked');
        if (selectedValue) {
            return selectedValue.value;
        }

        return null;
    }

    function handleRadioButtonChange() {
        var selectedValue = getCheckedRadioButtonValue();
    }

    function removeExitingClass(){
        $("#investment_growth_rate, #investment_to_date, #investment_mode_id, #investment_rate_of_interest").removeClass('is-invalid, is-valid');
    }

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

        if(is_expired != 1){
            if (canEdit == 0) {
                $(".actions li:last").append("<button type='submit' class='btn btn-primary form-control stepsForm' id='btnSave'>Save</button>");
            }else{
                $(".actions li:last").append("<button type='submit' class='btn btn-primary form-control stepsForm' id='btnSave'>Update</button>");
            }
        }else{
            $('.actions li:last').css('margin', 'unset');       
        }
    }

    function handleStorageChange(event) {
        const investment_member_id = localStorage.getItem('investment_member_id');
        const investment_member_name = localStorage.getItem('investment_member_name');
        if(investment_member_id !== null && investment_member_name !== null){
            $('#investment_client_id').empty();

            var newOption = new Option(investment_member_name, investment_member_id, false, false);
            $('#investment_client_id').append(newOption).trigger('change');
        }
    }
</script>
@endsection