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

<style>
    .modal-dialog.modal-xxl {
        max-width: calc(90% - 1rem);
        width: calc(90% - 1rem);
        margin: 0.5rem;
    }
   
    input[type="radio"] {
        display: none;
    }

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

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

    .highcharts-menu-item:nth-child(7),
    .highcharts-menu-item:nth-child(8),
    .highcharts-menu-item:nth-child(9),
    .highcharts-menu-item:nth-child(10) {
        display: none;
    }

    .highcharts-data-table {
        margin: 0px 30px;
    }

    .highcharts-data-table table {
        width: 100%;
        outline: none;
    }
   
    @media (max-width: 1200px) {
        .radiobtn {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            margin-left: 55px !important;
        }
    }

    @media (max-width: 767px) {
        .radiobtn {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            margin-left: 180px !important;
        }
    }

    @media (max-width: 575px) {
        .radiobtn {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            margin-left: 100px !important;
        }
    }

    @media (max-width: 345px) {
        .radiobtn {
            display: flex !important;
            flex-wrap: wrap !important;
            justify-content: center !important;
            margin-left: 60px !important;
        }
    }
</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>

        @php
            $privileges = getPrivileges();
            $highchartData = HighchartsNames();
        @endphp

        @if(Auth::user()->type == 1 || (!empty($privileges) && array_key_exists(1, $privileges) && array_key_exists(10, $privileges[1])))
            <div class="row pt-1 radiobtn">
                <div class="col-md-6 mt-2">
                    <div class="mb-3">
                        <input class="form-check-inline" type="radio" name="year" id="financial-year" value="financial" checked>
                        <label class="form-check-label me-3" for="financial-year">Financial Year</label>
                        <input class="form-check-inline" type="radio" name="year" id="calender-year" value="calander">
                        <label class="form-check-label me-3" for="calender-year">Calendar Year</label>
                    </div>
                </div>
            </div>

            <div class="row pt-2 d-flex align-items-center justify-content-center">
                @foreach($highchartData as $chart)
                    <div class="col-xl-4 col-sm-8">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="{{ $chart['id'] }}" class="chart-container"></div>
                                        </figure>
                                    </div>
                                    <button class="btn btn-primary px-4 form-control" onclick="return {{ $chart['function'] }}();" type="button">View More</button>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>

<!-- CLIENT BASE SUB CHARTS MODEL -->
<div class="modal fade" id="client_base_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_client_base_Label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_client_base_Label"> User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="row d-flex align-items-center justify-content-center">
                    {{-- GEN INS. --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container1_1"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- LIFE INS(NEW) --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container1_2"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- OTH.INVESTMENT --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container1_3"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

<!--GENERAL INS. SUB CHARTS MODEL -->
<div class="modal fade" id="general_ins_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_gen_ins_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_gen_ins_lable"> User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="row d-flex align-items-center justify-content-center">
                    {{-- HELTH INS. --}}
                    <div class="col-xl-3 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <figure class="highcharts-figure">
                                                <div id="container2_1"></div>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- VEHICLE INS. --}}
                    <div class="col-xl-3 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <figure class="highcharts-figure">
                                                <div id="container2_2"></div>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- WC INS. --}}
                    <div class="col-xl-3 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <figure class="highcharts-figure">
                                                <div id="container2_3"></div>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- OTHER DIVISION --}}
                    {{-- <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <figure class="highcharts-figure">
                                                <div id="container2_4"></div>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div> --}}

                    {{-- OTHER GENERAL INSURANCE --}}
                    <div class="col-xl-3 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <figure class="highcharts-figure">
                                                <div id="container2_5"></div>
                                            </figure>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

<!-- LIFE INS. SUB CHARTS MODEL -->
<div class="modal fade" id="life_ins_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_life_ins_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_life_ins_lable"> User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="row d-flex align-items-center justify-content-center">
                    @php
                        $countLifeIns = countLifeIns();
                        $length=1;

                        if($countLifeIns>=1){
                            $length=$countLifeIns;
                        }

                        use App\Models\Agent\InsuranceCompany;

                        function countLifeIns(){

                            $record=InsuranceCompany::where('company_type',"Life")->where('status',1)->count();
                            return $record;
                        }
                    @endphp

                    {{-- @if($length == 0)
                        @for($i=1;$i<=$length;$i++)
                            <div class="col-xl-4 col-sm-8 mt-4">
                                <a href="javascript: void(0);">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <figure class="highcharts-figure">
                                                        <div id="container3_{{$i}}"></div>
                                                    </figure>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            @for($j=1;$j<=$length;$j++)
                                <div class="col-xl-4 col-sm-8 mt-4">
                                    <a href="javascript: void(0);">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <figure class="highcharts-figure">
                                                            <div id="container3_{{$i}}_{{$j}}"></div>
                                                        </figure>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                @for($k=1;$k<=$length;$k++)
                                    <div class="col-xl-4 col-sm-8 mt-4">
                                        <a href="javascript: void(0);">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <figure class="highcharts-figure">
                                                                <div id="container3_{{$i}}_{{$j}}_{{$k}}"></div>
                                                            </figure>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endfor
                            @endfor
                        @endfor
                    @else --}}
                        @for($i=1;$i<=$length;$i++) 
                            <div class="col-xl-4 col-sm-8 mt-4">
                                <a href="javascript: void(0);">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <figure class="highcharts-figure">
                                                        <div id="container3_{{$i}}"></div>
                                                    </figure>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            @for($j=1;$j<=$length-$length+1;$j++)
                                <div class="col-xl-4 col-sm-8 mt-4">
                                    <a href="javascript: void(0);">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <figure class="highcharts-figure">
                                                            <div id="container3_{{$i}}_{{$j}}"></div>
                                                        </figure>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                @for($k=1;$k<=$length-$length+1;$k++)
                                    <div class="col-xl-4 col-sm-8 mt-4">
                                        <a href="javascript: void(0);">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <figure class="highcharts-figure">
                                                                <div id="container3_{{$i}}_{{$j}}_{{$k}}"></div>
                                                            </figure>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endfor
                            @endfor
                        @endfor
                    {{-- @endif --}}
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

<!-- COMMISION SUB CHARTS MODEL -->
<div class="modal fade" id="commision_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_commision_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_commision_lable"> User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="row d-flex align-items-center justify-content-center">
                    {{-- FRESH / NEW BUSS. COMMISSION --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container4_1"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- RENEWAL BUSS.  COMMISSION   --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container4_2"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- PROMOTIONAL COMMISSION   --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container4_3"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

<!-- INVESTMENT SUB CHARTS MODEL -->
<div class="modal fade" id="investment_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_investment_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_investment_lable"> User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="row d-flex align-items-center justify-content-center">
                    @php
                        $countInvestment = countInvestment();
                        $length=1;

                        if($countInvestment>=1){
                            $length=$countInvestment;
                        }

                        function countInvestment(){
                            $record=InsuranceCompany::where('company_type',"Investment")->where('status',1)->count();
                            return $record;
                        }
                    @endphp

                    {{-- @if($countInvestment == 0)
                        @for($i=1;$i<=$length;$i++) 
                            <div class="col-xl-4 col-sm-8 mt-4">
                                <a href="javascript: void(0);">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <figure class="highcharts-figure">
                                                        <div id="container5_{{$i}}"></div>
                                                    </figure>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            @for($j=1;$j<=$length;$j++) 
                                <div class="col-xl-4 col-sm-8 mt-4">
                                    <a href="javascript: void(0);">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <figure class="highcharts-figure">
                                                            <div id="container5_{{$i}}_{{$j}}"></div>
                                                        </figure>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                @for($k=1;$k<=$length;$k++)
                                    <div class="col-xl-4 col-sm-8 mt-4">
                                        <a href="javascript: void(0);">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <figure class="highcharts-figure">
                                                                <div id="container5_{{$i}}_{{$j}}_{{$k}}"></div>
                                                            </figure>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endfor

                            @endfor
                        @endfor
                    @else --}}
                        @for($i=1;$i<=$length;$i++)
                            <div class="col-xl-4 col-sm-8 mt-4">
                                <a href="javascript: void(0);">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="row">
                                                <div class="col-lg-12">
                                                    <figure class="highcharts-figure">
                                                        <div id="container5_{{$i}}"></div>
                                                    </figure>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </a>
                            </div>

                            @for($j=1;$j<=$length-$length+1;$j++)
                                <div class="col-xl-4 col-sm-8 mt-4">
                                    <a href="javascript: void(0);">
                                        <div class="card">
                                            <div class="card-body">
                                                <div class="row">
                                                    <div class="col-lg-12">
                                                        <figure class="highcharts-figure">
                                                            <div id="container5_{{$i}}_{{$j}}"></div>
                                                        </figure>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>

                                @for($k=1;$k<=$length-$length+1;$k++)
                                    <div class="col-xl-4 col-sm-8 mt-4">
                                        <a href="javascript: void(0);">
                                            <div class="card">
                                                <div class="card-body">
                                                    <div class="row">
                                                        <div class="col-lg-12">
                                                            <figure class="highcharts-figure">
                                                                <div id="container5_{{$i}}_{{$j}}_{{$k}}"></div>
                                                            </figure>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                @endfor
                            @endfor
                        @endfor
                    {{-- @endif --}}
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

<!-- CLIAM SUB CHARTS MODEL -->
<div class="modal fade" id="claim_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_claim_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_claim_lable"> User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="row d-flex align-items-center justify-content-center">
                    {{-- MEDICLAIM CLAIM DATA --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container6_1"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- DEATH CLAIM DATA --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container6_2"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- VEHICLE CLAIM DATA --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container6_3"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- DISABILITY CLAIM DATA --}}
                    <div class="col-xl-4 col-sm-8">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container6_4"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- OTHER CLAIM DATA --}}
                    <div class="col-xl-4 col-sm-8">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container6_5"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                     {{-- CASHLESS CLAIM DATA --}}
                     <div class="col-xl-4 col-sm-8">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container6_6"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

<!-- DOCUMENT UPLOAD SUB CHARTS MODEL -->
<div class="modal fade" id="document_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_document_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_document_lable">User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="row d-flex align-items-center justify-content-center">
                    {{-- CLIENT DOCUMENT UPLOAD --}}
                    <div class="col-xl-5 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container7_1"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- CLIENT PERSONAL DOCUMENT UPLOAD --}}
                    <div class="col-xl-5 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container7_2"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

<!-- TARGET SUB CHARTS MODEL -->
<div class="modal fade" id="target_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_target_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_target_lable">Target Sub Charts</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="row d-flex align-items-center justify-content-center">
                    {{-- General Insurance --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_1"></div>
                                        </figure>
                                    </div>
                                    <button class="btn btn-primary px-4 form-control" onclick="return generalTargetSubChart();" type="button">View More</button>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- Life Insaurance --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_2"></div>
                                        </figure>
                                    </div>
                                    <button class="btn btn-primary px-4 form-control" onclick="return lifeTargetSubChart();" type="button">View More</button>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- Investment --}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_3"></div>
                                        </figure>
                                    </div>
                                    <button class="btn btn-primary px-4 form-control" onclick="return investmentTargetSubChart();" type="button">View More</button>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

<!-- General Ins. TARGET SUB CHARTS MODEL -->
<div class="modal fade" id="general_target_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_general_target_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_general_target_lable">Target Sub Charts</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="return TargetSubChart();"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="row d-flex align-items-center justify-content-center">
                    {{-- General Insurance (New)--}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_1_1"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- General Insaurance (Renew)--}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_1_2"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- General Insaurance (Expense)--}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_1_3"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal" onclick="return TargetSubChart();">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

<!-- Life Ins. TARGET SUB CHARTS MODEL -->
<div class="modal fade" id="life_target_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_life_target_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_life_target_lable">Target Sub Charts</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="return TargetSubChart();"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="row d-flex align-items-center justify-content-center">
                    {{-- Life Insurance (New)--}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_2_1"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- Life Insaurance (Renew)--}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_2_2"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- Life Insaurance (expense)--}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_2_3"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal" onclick="return TargetSubChart();">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

<!-- Invesment TARGET SUB CHARTS MODEL -->
<div class="modal fade" id="investment_target_modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="modal_investment_target_lable" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xxl mx-auto" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal_investment_target_lable">Target Sub Charts</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" onclick="return TargetSubChart();"></button>
            </div>

            <div class="modal-body" style="background-color: #f1f5fe">
                <div class="row d-flex align-items-center justify-content-center">
                    {{-- Investment  (mf-sip)--}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_3_1"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- Investment (mf-single)--}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_3_2"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    {{-- Investment (expense)--}}
                    <div class="col-xl-4 col-sm-8 mt-4">
                        <a href="javascript: void(0);">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-lg-12">
                                        <figure class="highcharts-figure">
                                            <div id="container8_3_3"></div>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal" onclick="return TargetSubChart();">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- End modal -->

@endsection

@section('custom-scripts')
<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/js/pages/kendo.all.min.js') }}"></script>
<script src="{{ asset('assets/js/pages/jquery.form.js') }}"></script>

<script src="{{ asset('assets/libs/moment/min/moment.min.js') }}"></script>
<script src="{{ asset('assets/libs/chance/chance.min.js') }}"></script>

<!-- for Highcharts -->
<script src="{{ asset('assets/js/highchart/highcharts.js') }}"></script>
<script src="{{ asset('assets/js/highchart/highcharts-more.js') }}"></script>
<script src="{{ asset('assets/js/highchart/solid-gauge.js') }}"></script>
<script src="{{ asset('assets/js/highchart/data.js') }}"></script>
<script src="{{ asset('assets/js/highchart/drilldown.js') }}"></script>
<script src="{{ asset('assets/js/highchart/exporting.js') }}"></script>
<script src="{{ asset('assets/js/highchart/offline-exporting.js') }}"></script>
<script src="{{ asset('assets/js/highchart/export-data.js') }}"></script>
<script src="{{ asset('assets/js/highchart/accessibility.js') }}"></script>

<script type="text/javascript">  
    var clientBaseSubChartAJAX = "{{route('client.base.sub.chart')}}";
    var genInsSubChartAJAX = "{{route('gen.ins.sub.charts')}}";
    var lifeInsSubChartAJAX = "{{route('life.ins.sub.charts')}}";
    var commissionSubChartAJAX = "{{route('commission.sub.charts')}}";
    var investMentSubChartAJAX = "{{route('investment.sub.charts')}}";
    var claimSubChartAJAX = "{{route('claim.sub.charts')}}";
    var documentSubChartAJAX = "{{route('document.sub.charts')}}";
    var targetSubChartAJAX = "{{route('target.sub.charts')}}";
    var currentDate = new Date();
    var csrfToken = $("[name=_token]").val();
   
    Highcharts.setOptions({
        lang: { thousandsSep: ""}
    });

    //- HIGHCHARTS 
    var removeButtons = document.querySelectorAll("#financial-year");

    if (removeButtons.length >= 1) {
        if (document.getElementById("financial-year").checked = true) {
            var newUrl = "{{route('dashboard.higcharts.data')}}";
            HighChartsAjax(newUrl);           
        }
    }

    $("#financial-year").on('click', function() {
        $(".highcharts-data-table").hide();

        var newUrl = "{{route('dashboard.higcharts.data')}}";
        HighChartsAjax(newUrl);

        clientBaseSubChartAJAX = "{{route('client.base.sub.chart')}}";
        genInsSubChartAJAX = "{{route('gen.ins.sub.charts')}}";
        lifeInsSubChartAJAX = "{{route('life.ins.sub.charts')}}";
        commissionSubChartAJAX = "{{route('commission.sub.charts')}}";
        investMentSubChartAJAX = "{{route('investment.sub.charts')}}";
        claimSubChartAJAX = "{{route('claim.sub.charts')}}";
        documentSubChartAJAX = "{{route('document.sub.charts')}}";
        targetSubChartAJAX = "{{route('target.sub.charts')}}";
    });

    $("#calender-year").on('click', function() {
        $(".highcharts-data-table").hide();

        var newUrl = "{{route('dashboard.higcharts.data')}}" + "?type=" + "calender_year";
        HighChartsAjax(newUrl);

        clientBaseSubChartAJAX = "{{route('client.base.sub.chart')}}"+ "?type=" + "calender_year";
        genInsSubChartAJAX = "{{route('gen.ins.sub.charts')}}"+ "?type=" + "calender_year";
        lifeInsSubChartAJAX = "{{route('life.ins.sub.charts')}}"+ "?type=" + "calender_year";
        commissionSubChartAJAX = "{{route('commission.sub.charts')}}"+ "?type=" + "calender_year";
        investMentSubChartAJAX = "{{route('investment.sub.charts')}}"+ "?type=" + "calender_year";
        claimSubChartAJAX = "{{route('claim.sub.charts')}}"+ "?type=" + "calender_year";
        documentSubChartAJAX = "{{route('document.sub.charts')}}"+ "?type=" + "calender_year";
        targetSubChartAJAX = "{{route('target.sub.charts')}}"+ "?type=" + "calender_year";
    });

    function HighChartsAjax(newUrl) {
        $.ajax({
            url: newUrl,
            type: 'GET',
            success: function(response) {
                HighCharts(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(textStatus, errorThrown);
            }
        });
    }

    // main page chart data
    function HighCharts(response) {
        // CLIENT BASE
        Highcharts.chart('container1', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.client_base.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Family (Nos)",
                    "Member (Nos)",
                    "Firm (Nos)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.client_base.previous_family, response.client_base.previous_member, response.client_base.previous_firm]
            }, {
                name: "Current",
                data: [response.client_base.current_family, response.client_base.current_member, response.client_base.current_firm]
            }]
        });

        // GENERAL INSURANCE
        Highcharts.chart('container2', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.general_ins.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Member (Nos)",
                    "Risk Amt. (Lakh)",
                    "Prem. Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.general_ins.previous_member, response.general_ins.previous_risk_amount, response.general_ins.previous_prem_amount]
            }, {
                name: "Current",
                data: [response.general_ins.current_member, response.general_ins.current_risk_amount, response.general_ins.current_prem_amount]
            }]
        });      

        // LIFE INSURANCE
        Highcharts.chart('container3', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.life_ins.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Member (Nos)",
                    "Risk Amt. (Lakh)",
                    "Prem. Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.life_ins.previous_member, response.life_ins.previous_risk_amount, response.life_ins.previous_prem_amount]
            }, {
                name: "Current",
                data: [response.life_ins.current_member, response.life_ins.current_risk_amount, response.life_ins.current_prem_amount]
            }]
        });      

        // COMMISSION
        Highcharts.chart('container4', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.commission.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Gen.Ins.Comm. Amt. (Lakh)",
                    "Life.Ins. Comm. Amt. (Lakh)",
                    "Investment Comm. Amt. (Lakh)",
                    "Other Comm. Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.commission.previous_gen_ins_comm_amt, response.commission.previous_life_ins_comm_amt, response.commission.previous_investment_ins_comm_amt, response.commission.previous_other_ins_comm_amt]
            }, {
                name: "Current",
                data: [response.commission.current_gen_ins_comm_amt, response.commission.current_life_ins_comm_amt, response.commission.current_investment_ins_comm_amt, response.commission.current_other_ins_comm_amt]
            }]
        });

        // INVESTMENT
        Highcharts.chart('container5', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.investment.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Member (Nos)",
                    "Mutual Fund (Lakh)",
                    "Fix Deposit (Lakh)",
                    "Other (Lakh)"
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.investment.previous_member, response.investment.previous_mutual_fund_amount, response.investment.previous_fix_deposit_amount, response.investment.previous_other_amount]
            }, {
                name: "Current",
                data: [response.investment.current_member, response.investment.current_mutual_fund_amount, response.investment.current_fix_deposit_amount , response.investment.current_other_amount]
            }]
        });

        // CLIAM DATA
        Highcharts.chart('container6', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.claim_data.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Claim (Nos)",
                    "Claim Amt. (Lakh)",
                    "Claim Settled Amt. (Lakh)",
                    "Claim Pending Nos.",
                    "Claim Pending Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.claim_data.previous_claim_nos, response.claim_data.previous_claim_amt, response.claim_data.previous_claim_settled_amt, response.claim_data.previous_claim_pending_nos, response.claim_data.previous_claim_pending_amt]
            }, {
                name: "Current",
                data: [response.claim_data.current_claim_nos, response.claim_data.current_claim_amt, response.claim_data.current_claim_settled_amt, response.claim_data.current_claim_pending_nos, response.claim_data.current_claim_pending_amt]
            }]
        });       

        // DOCUMENT UPLOAD
        Highcharts.chart('container7', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.docs_upload.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Gen.Ins. Docs.",
                    "Life Ins. Docs.",
                    "Investment Docs.",
                    "Claim Docs.",
                    "Client Docs.",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values (Nos)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.docs_upload.previous_gen_ins_docs, response.docs_upload.previous_life_ins_docs, response.docs_upload.previous_investment_amount, response.docs_upload.previous_claim_docs, response.docs_upload.previous_client_amount]
            }, {
                name: "Current",
                data: [response.docs_upload.current_gen_ins_docs, response.docs_upload.current_life_ins_docs, response.docs_upload.current_investment_docs, response.docs_upload.current_claim_docs, response.docs_upload.current_client_docs]
            }]
        });

        // TARGET
        Highcharts.chart('container8', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.total_achived_ammount_previous, response.target.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.total_target_ammount_previous, response.target.total_target_ammount_currrent]
            }]
        });
    }

    // view more click event handle
    function ClientBaseSubChart() {
        $("#modal_client_base_Label").html("Client Base Sub Charts");
        $("#client_base_modal").modal('show');

        $.ajax({
            url: clientBaseSubChartAJAX,
            type: 'GET',
            success: function(response) {
                clientBaseSubChartsData(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(textStatus, errorThrown);
            }
        });        
    }

    function GenInsSubChart() {
        $("#modal_gen_ins_lable").html("General Insurance Sub Charts");
        $("#general_ins_modal").modal('show');

        $.ajax({
            url: genInsSubChartAJAX,
            type: 'GET',
            success: function(response) {
                genInsSubChartsData(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(textStatus, errorThrown);
            }
        });
    }

    function LifeInsSubChart() {
        $("#modal_life_ins_lable").html("Life Insurance Sub Charts");
        $("#life_ins_modal").modal('show');

        $.ajax({
            url: lifeInsSubChartAJAX,
            type: 'GET',
            success: function(response) {
                lifeInsSubChartsData(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(textStatus, errorThrown);
            }
        });
    }

    function CommisionSubChart() {
        $("#modal_commision_lable").html("Commision Sub Charts");
        $("#commision_modal").modal('show');

        $.ajax({
            url: commissionSubChartAJAX,
            type: 'GET',
            success: function(response) {
                commissionSubChartsData(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(textStatus, errorThrown);
            }
        });
    }

    function InvestmentSubChart() {
        $("#modal_investment_lable").html("Investment Sub Charts");
        $("#investment_modal").modal('show');

        $.ajax({
            url: investMentSubChartAJAX,
            type: 'GET',
            success: function(response) {
                investMentSubChartsData(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(textStatus, errorThrown);
            }
        });
    }

    function ClaimSubChart() {
        $("#modal_claim_lable").html("Claim Sub Charts");
        $("#claim_modal").modal('show');

        $.ajax({
            url: claimSubChartAJAX,
            type: 'GET',
            success: function(response) {
                claimSubChartsData(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(textStatus, errorThrown);
            }
        });
    }

    function DocumentSubChart() {
        $("#modal_document_lable").html("Document Upload Sub Charts");
        $("#document_modal").modal('show');

        $.ajax({
            url: documentSubChartAJAX,
            type: 'GET',
            success: function(response) {
                documentSubChartsData(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(textStatus, errorThrown);
            }
        });
    }

    function TargetSubChart() {
        $("#modal_target_lable").html("Target Sub Charts");
        $("#target_modal").modal('show');

        $.ajax({
            url: targetSubChartAJAX,
            type: 'GET',
            success: function(response) {
                targetSubChartsData(response);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error(textStatus, errorThrown);
            }
        });
    }

    // sub charts data
    function clientBaseSubChartsData(response){
        // gen. ins.
        Highcharts.chart('container1_1', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.client_base.gen_ins.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Family (Nos)",
                    "Member (Nos)",
                    "Firm (Nos)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.client_base.gen_ins.previous_family, response.client_base.gen_ins.previous_member, response.client_base.gen_ins.previous_firm]
            }, {
                name: "Current",
                data: [response.client_base.gen_ins.current_family, response.client_base.gen_ins.current_member, response.client_base.gen_ins.current_firm]
            }]
        });

        // life ins.
        Highcharts.chart('container1_2', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.client_base.life_ins.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Family (Nos)",
                    "Member (Nos)",
                    "Firm (Nos)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.client_base.life_ins.previous_family, response.client_base.life_ins.previous_member, response.client_base.life_ins.previous_firm]
            }, {
                name: "Current",
                data: [response.client_base.life_ins.current_family, response.client_base.life_ins.current_member, response.client_base.life_ins.current_firm]
            }]
        });

        // investment.
        Highcharts.chart('container1_3', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.client_base.investment.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Family (Nos)",
                    "Member (Nos)",
                    "Firm (Nos)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.client_base.investment.previous_family, response.client_base.investment.previous_member, response.client_base.investment.previous_firm]
            }, {
                name: "Current",
                data: [response.client_base.investment.current_family, response.client_base.investment.current_member, response.client_base.investment.current_firm]
            }]
        });
    }

    function genInsSubChartsData(response){
        // health ins.
        Highcharts.chart('container2_1', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.general_ins.health.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Member (Nos)",
                    "Risk Amt. (Lakh)",
                    "Prem. Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.general_ins.health.previous_member, response.general_ins.health.previous_risk_amount, response.general_ins.health.previous_prem_amount]
            }, {
                name: "Current",
                data: [response.general_ins.health.current_member, response.general_ins.health.current_risk_amount, response.general_ins.health.current_prem_amount]
            }]
        });

        // vehicle ins.
        Highcharts.chart('container2_2', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.general_ins.vehicle.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Member (Nos)",
                    "Risk Amt. (Lakh)",
                    "Prem. Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.general_ins.vehicle.previous_member, response.general_ins.vehicle.previous_risk_amount, response.general_ins.vehicle.previous_prem_amount]
            }, {
                name: "Current",
                data: [response.general_ins.vehicle.current_member, response.general_ins.vehicle.current_risk_amount, response.general_ins.vehicle.current_prem_amount]
            }]
        });

        // wc ins.
        Highcharts.chart('container2_3', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.general_ins.wc.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Member (Nos)",
                    "Risk Amt. (Lakh)",
                    "Prem. Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.general_ins.wc.previous_member, response.general_ins.wc.previous_risk_amount, response.general_ins.wc.previous_prem_amount]
            }, {
                name: "Current",
                data: [response.general_ins.wc.current_member, response.general_ins.wc.current_risk_amount, response.general_ins.wc.current_prem_amount]
            }]
        });

        // other division.
        // Highcharts.chart('container2_4', {
        //     chart: {
        //         type: 'column'
        //     },
        //     title: {
        //         text: response.general_ins.other.title,
        //         style: {
        //             fontSize: '15px',
        //             fontWeight: 'bold',
        //             color: '#f1b44c',
        //             textAlign: 'center'
        //         }
        //     },
        //     xAxis: {
        //         categories: [
        //             "Member (Nos)",
        //             "Risk Amt. (Lakh)",
        //             "Prem. Amt. (Lakh)",
        //         ],
        //         crosshair: true
        //     },
        //     yAxis: {
        //         min: 0,
        //         title: {
        //             text: 'values'
        //         }
        //     },
        //     tooltip: {
        //         headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
        //         pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
        //             '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
        //         footerFormat: '</table>',
        //         shared: true,
        //         useHTML: true
        //     },
        //     plotOptions: {
        //         column: {
        //             pointPadding: 0.2,
        //             borderWidth: 0,
        //             dataLabels: {
        //                 enabled: true
        //             }
        //         },
        //     },
        //     colors: ['#1565C0', '#1E88E5'],
        //     series: [{
        //         name: "Previous",
        //         data: [response.general_ins.other.previous_member, response.general_ins.other.previous_risk_amount, response.general_ins.other.previous_prem_amount]
        //     }, {
        //         name: "Current",
        //         data: [response.general_ins.other.current_member, response.general_ins.other.current_risk_amount, response.general_ins.other.current_prem_amount]
        //     }]
        // });

        // other general insurance
        Highcharts.chart('container2_5', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.general_ins.other_gen.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Member (Nos)",
                    "Risk Amt. (Lakh)",
                    "Prem. Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.general_ins.other_gen.previous_member, response.general_ins.other_gen.previous_risk_amount, response.general_ins.other_gen.previous_prem_amount]
            }, {
                name: "Current",
                data: [response.general_ins.other_gen.current_member, response.general_ins.other_gen.current_risk_amount, response.general_ins.other_gen.current_prem_amount]
            }]
        });
    }

    function lifeInsSubChartsData(response){
        if (response.life_ins.company.length == 0) {
            for (var i = 1; i <= 1; i++) {
                var containerId = 'container3_' + i;

                Highcharts.chart(containerId, {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: "EX: Life Insurance Company Name(NEW)",
                        style: {
                            fontSize: '15px',
                            fontWeight: 'bold',
                            color: '#f1b44c',
                            textAlign: 'center'
                        }
                    },
                    xAxis: {
                        categories: [
                            "Member (Nos)",
                            "Risk Amt. (Lakh)",
                            "Prem. Amt. (Lakh)",
                        ],
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'values'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true
                            }
                        },
                    },
                    colors: ['#1565C0', '#1E88E5'],
                    series: [{
                        name: "Previous",
                        data: [response.life_ins.sub_new.previous_member, response.life_ins.sub_new.previous_risk_amount, response.life_ins.sub_new.previous_prem_amount]
                    }, {
                        name: "Current",
                        data: [response.life_ins.sub_new.current_member, response.life_ins.sub_new.current_risk_amount, response.life_ins.sub_new.current_prem_amount]
                    }]
                });

                for (var j = 1; j <= 1; j++) {
                    var containerId = 'container3_' + i + '_' + j;

                    Highcharts.chart(containerId, {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: "EX: Life Insurance Company Name(TOTAL)",
                            style: {
                                fontSize: '15px',
                                fontWeight: 'bold',
                                color: '#f1b44c',
                                textAlign: 'center'
                            }
                        },
                        xAxis: {
                            categories: [
                                "Member (Nos)",
                                "Risk Amt. (Lakh)",
                                "Prem. Amt. (Lakh)",
                            ],
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'values'
                            }
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0,
                                dataLabels: {
                                    enabled: true
                                }
                            },
                        },
                        colors: ['#1565C0', '#1E88E5'],
                        series: [{
                            name: "Previous",
                            data: [response.life_ins.sub_new.previous_member, response.life_ins.sub_new.previous_risk_amount, response.life_ins.sub_new.previous_prem_amount]
                        }, {
                            name: "Current",
                            data: [response.life_ins.sub_new.current_member, response.life_ins.sub_new.current_risk_amount, response.life_ins.sub_new.current_prem_amount]
                        }]
                    });

                    for (var k = 1; k <= 1; k++) {
                        var containerId = 'container3_' + i + '_' + j + '_' + k;

                        Highcharts.chart(containerId, {
                            chart: {
                                type: 'column'
                            },
                            title: {
                                text: "EX: Life Insurance Company Name(RENEWAL)",
                                style: {
                                    fontSize: '15px',
                                    fontWeight: 'bold',
                                    color: '#f1b44c',
                                    textAlign: 'center'
                                }
                            },
                            xAxis: {
                                categories: [
                                    "Member (Nos)",
                                    "Risk Amt. (Lakh)",
                                    "Prem. Amt. (Lakh)",
                                ],
                                crosshair: true
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'values'
                                }
                            },
                            tooltip: {
                                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                                footerFormat: '</table>',
                                shared: true,
                                useHTML: true
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0,
                                    dataLabels: {
                                        enabled: true
                                    }
                                },
                            },
                            colors: ['#1565C0', '#1E88E5'],
                            series: [{
                                name: "Previous",
                                data: [response.life_ins.sub_new.previous_member, response.life_ins.sub_new.previous_risk_amount, response.life_ins.sub_new.previous_prem_amount]
                            }, {
                                name: "Current",
                                data: [response.life_ins.sub_new.current_member, response.life_ins.sub_new.current_risk_amount, response.life_ins.sub_new.current_prem_amount]
                            }]
                        });
                    }
                }
            }
        } else {
            var length = response.life_ins.company.length;
            
            for (var i = 1; i <= length; i++) {
                var containerId = 'container3_' + i;

                Highcharts.chart(containerId, {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: response.life_ins.sub.title[i - 1] + " " + "(NEW)",
                        style: {
                            fontSize: '15px',
                            fontWeight: 'bold',
                            color: '#f1b44c',
                            textAlign: 'center'
                        }
                    },
                    xAxis: {
                        categories: [
                            "Member (Nos)",
                            "Risk Amt. (Lakh)",
                            "Prem. Amt. (Lakh)",
                        ],
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'values'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true
                            }
                        },
                    },
                    colors: ['#1565C0', '#1E88E5'],
                    series: [{
                        name: "Previous",
                        data: [response.life_ins.sub_new.previous_member[i - 1], response.life_ins.sub_new.previous_risk_amount[i - 1], response.life_ins.sub_new.previous_prem_amount[i - 1]]
                    }, {
                        name: "Current",
                        data: [response.life_ins.sub_new.current_member[i - 1], response.life_ins.sub_new.current_risk_amount[i - 1], response.life_ins.sub_new.current_prem_amount[i - 1]]
                    }]
                });

                for (var j = 1; j <= length - length + 1; j++) {
                    var containerId = 'container3_' + i + '_' + j;

                    Highcharts.chart(containerId, {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: response.life_ins.sub.title[i - 1] + " " + "(TOTAL)",
                            style: {
                                fontSize: '15px',
                                fontWeight: 'bold',
                                color: '#f1b44c',
                                textAlign: 'center'
                            }
                        },
                        xAxis: {
                            categories: [
                                "Member (Nos)",
                                "Risk Amt. (Lakh)",
                                "Prem. Amt. (Lakh)",
                            ],
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'values'
                            }
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0,
                                dataLabels: {
                                    enabled: true
                                }
                            },
                        },
                        colors: ['#1565C0', '#1E88E5'],
                        series: [{
                            name: "Previous",
                            data: [response.life_ins.sub_total.previous_member[i - 1], response.life_ins.sub_total.previous_risk_amount[i - 1], response.life_ins.sub_total.previous_prem_amount[i - 1]]
                        }, {
                            name: "Current",
                            data: [response.life_ins.sub_total.current_member[i - 1], response.life_ins.sub_total.current_risk_amount[i - 1], response.life_ins.sub_total.current_prem_amount[i - 1]]
                        }]
                    });

                    for (var k = 1; k <= length - length + 1; k++) {
                        var containerId = 'container3_' + i + '_' + j + '_' + k;

                        Highcharts.chart(containerId, {
                            chart: {
                                type: 'column'
                            },
                            title: {
                                text: response.life_ins.sub.title[i - 1] + " " + "(RENEWAL)",
                                style: {
                                    fontSize: '15px',
                                    fontWeight: 'bold',
                                    color: '#f1b44c',
                                    textAlign: 'center'
                                }
                            },
                            xAxis: {
                                categories: [
                                    "Member (Nos)",
                                    "Risk Amt. (Lakh)",
                                    "Prem. Amt. (Lakh)",
                                ],
                                crosshair: true
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'values'
                                }
                            },
                            tooltip: {
                                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                                footerFormat: '</table>',
                                shared: true,
                                useHTML: true
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0,
                                    dataLabels: {
                                        enabled: true
                                    }
                                },
                            },
                            colors: ['#1565C0', '#1E88E5'],
                            series: [{
                                name: "Previous",
                                data: [response.life_ins.sub_renewal.previous_member[i - 1], response.life_ins.sub_renewal.previous_risk_amount[i - 1], response.life_ins.sub_renewal.previous_prem_amount[i - 1]]
                            }, {
                                name: "Current",
                                data: [response.life_ins.sub_renewal.current_member[i - 1], response.life_ins.sub_renewal.current_risk_amount[i - 1], response.life_ins.sub_renewal.current_prem_amount[i - 1]]
                            }]
                        });
                    }
                }
            }
        }
    }

    function commissionSubChartsData(response){
        // fresh
        Highcharts.chart('container4_1', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.commission.fresh.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Gen.Ins.Comm. Amt. (Lakh)",
                    "Life.Ins. Comm. Amt. (Lakh)",
                    "Investment Comm. Amt. (Lakh)",
                    "Other Comm. Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.commission.fresh.previous_gen_ins_comm_amt, response.commission.fresh.previous_life_ins_comm_amt, response.commission.fresh.previous_investment_ins_comm_amt, response.commission.fresh.previous_other_ins_comm_amt]
            }, {
                name: "Current",
                data: [response.commission.fresh.current_gen_ins_comm_amt, response.commission.fresh.current_life_ins_comm_amt, response.commission.fresh.current_investment_ins_comm_amt, response.commission.fresh.current_other_ins_comm_amt]
            }]
        });

        // renewal 
        Highcharts.chart('container4_2', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.commission.renewal.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Gen.Ins.Comm. Amt. (Lakh)",
                    "Life.Ins. Comm. Amt. (Lakh)",
                    "Investment Comm. Amt. (Lakh)",
                    "Other Comm. Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.commission.renewal.previous_gen_ins_comm_amt, response.commission.renewal.previous_life_ins_comm_amt, response.commission.renewal.previous_investment_ins_comm_amt, response.commission.renewal.previous_other_ins_comm_amt]
            }, {
                name: "Current",
                data: [response.commission.renewal.current_gen_ins_comm_amt, response.commission.renewal.current_life_ins_comm_amt, response.commission.renewal.current_investment_ins_comm_amt, response.commission.renewal.current_other_ins_comm_amt]
            }]
        });

         // promotional 
        Highcharts.chart('container4_3', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.commission.promotional.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Gen.Ins.Comm. Amt. (Lakh)",
                    "Life.Ins. Comm. Amt. (Lakh)",
                    "Investment Comm. Amt. (Lakh)",
                    "Other Comm. Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.commission.promotional.previous_gen_ins_comm_amt, response.commission.promotional.previous_life_ins_comm_amt, response.commission.promotional.previous_investment_ins_comm_amt, response.commission.promotional.previous_other_ins_comm_amt]
            }, {
                name: "Current",
                data: [response.commission.promotional.current_gen_ins_comm_amt, response.commission.promotional.current_life_ins_comm_amt, response.commission.promotional.current_investment_ins_comm_amt, response.commission.promotional.current_other_ins_comm_amt]
            }]
        });
    }

    function investMentSubChartsData(response){
        if (response.investment.company.length == 0) {
            for (var i = 1; i <= 1; i++) {
                var containerId = 'container5_' + i;

                Highcharts.chart(containerId, {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: "Ex:Investment Company Name (NEW)",
                        style: {
                            fontSize: '15px',
                            fontWeight: 'bold',
                            color: '#f1b44c',
                            textAlign: 'center'
                        }
                    },
                    xAxis: {
                        categories: [
                            "Member (Nos)",
                            "Mutual Fund (Lakh)",
                            "Fix Deposit (Lakh)",
                            "Other (Lakh)"
                        ],
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'values'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true
                            }
                        },
                    },
                    colors: ['#1565C0', '#1E88E5'],
                    series: [{
                        name: "Previous",
                        data: [response.investment.sub.previous_member, response.investment.sub.previous_mutual_fund_amount, response.investment.sub.previous_fix_deposit_amount , response.investment.sub.previous_other_amount]
                    }, {
                        name: "Current",
                        data: [response.investment.sub.current_member, response.investment.sub.current_mutual_fund_amount, response.investment.sub.current_fix_deposit_amount , response.investment.sub.current_other_amount]
                    }]
                });

                for (var j = 1; j <= 1; j++) {
                    var containerId = 'container5_' + i + '_' + j;

                    Highcharts.chart(containerId, {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: "Ex:Investment Company Name (TOTAL)",
                            style: {
                                fontSize: '15px',
                                fontWeight: 'bold',
                                color: '#f1b44c',
                                textAlign: 'center'
                            }
                        },
                        xAxis: {
                            categories: [
                                "Member (Nos)",
                                "Mutual Fund (Lakh)",
                                "Fix Deposit (Lakh)",
                                "Other (Lakh)"
                            ],
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'values'
                            }
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0,
                                dataLabels: {
                                    enabled: true
                                }
                            },
                        },
                        colors: ['#1565C0', '#1E88E5'],
                        series: [{
                            name: "Previous",
                            data: [response.investment.sub.previous_member, response.investment.sub.previous_mutual_fund_amount, response.investment.sub.previous_fix_deposit_amount , response.investment.sub.previous_other_amount]
                        }, {
                            name: "Current",
                            data: [response.investment.sub.current_member, response.investment.sub.current_mutual_fund_amount, response.investment.sub.current_fix_deposit_amount , response.investment.sub.current_other_amount]
                        }]
                    });

                    for (var k = 1; k <= 1; k++) {
                        var containerId = 'container5_' + i + '_' + j + '_' + k;

                        Highcharts.chart(containerId, {
                            chart: {
                                type: 'column'
                            },
                            title: {
                                text: "Ex:Investment Company Name (REGULAR)",
                                style: {
                                    fontSize: '15px',
                                    fontWeight: 'bold',
                                    color: '#f1b44c',
                                    textAlign: 'center'
                                }
                            },
                            xAxis: {
                                categories: [
                                    "Member (Nos)",
                                    "Mutual Fund (Lakh)",
                                    "Fix Deposit (Lakh)",
                                    "Other (Lakh)"
                                ],
                                crosshair: true
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'values'
                                }
                            },
                            tooltip: {
                                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                                footerFormat: '</table>',
                                shared: true,
                                useHTML: true
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0,
                                    dataLabels: {
                                        enabled: true
                                    }
                                },
                            },
                            colors: ['#1565C0', '#1E88E5'],
                            series: [{
                                name: "Previous",
                                data: [response.investment.sub.previous_member, response.investment.sub.previous_mutual_fund_amount, response.investment.sub.previous_fix_deposit_amount , response.investment.sub.previous_other_amount]
                            }, {
                                name: "Current",
                                data: [response.investment.sub.current_member, response.investment.sub.current_mutual_fund_amount, response.investment.sub.current_fix_deposit_amount , response.investment.sub.current_other_amount]
                            }]
                        });
                    }
                }
            }
        } else {
            var length = response.investment.company.length;

            for (var i = 1; i <= length; i++) {
                var containerId = 'container5_' + i;

                Highcharts.chart(containerId, {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: response.investment.sub.title[i - 1] + " " + "(NEW)",
                        style: {
                            fontSize: '15px',
                            fontWeight: 'bold',
                            color: '#f1b44c',
                            textAlign: 'center'
                        }
                    },
                    xAxis: {
                        categories: [
                            "Member (Nos)",
                            "Mutual Fund (Lakh)",
                            "Fix Deposit (Lakh)",
                            "Other (Lakh)"
                        ],
                        crosshair: true
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'values'
                        }
                    },
                    tooltip: {
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    },
                    plotOptions: {
                        column: {
                            pointPadding: 0.2,
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true
                            }
                        },
                    },
                    colors: ['#1565C0', '#1E88E5'],
                    series: [{
                        name: "Previous",
                        data: [response.investment.sub_new.previous_member[i - 1], response.investment.sub_new.previous_mutual_fund_amount[i - 1], response.investment.sub_new.previous_fix_deposit_amount[i - 1] , response.investment.sub_new.previous_other_amount[i - 1]]
                    }, {
                        name: "Current",
                        data: [response.investment.sub_new.current_member[i - 1], response.investment.sub_new.current_mutual_fund_amount[i - 1], response.investment.sub_new.current_fix_deposit_amount[i - 1] , response.investment.sub_new.current_other_amount[i - 1]]
                    }]
                });

                for (var j = 1; j <= length - length + 1; j++) {
                    var containerId = 'container5_' + i + '_' + j;

                    Highcharts.chart(containerId, {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: response.investment.sub.title[i - 1] + " " + "(TOTAL)",
                            style: {
                                fontSize: '15px',
                                fontWeight: 'bold',
                                color: '#f1b44c',
                                textAlign: 'center'
                            }
                        },
                        xAxis: {
                            categories: [
                                "Member (Nos)",
                                "Mutual Fund (Lakh)",
                                "Fix Deposit (Lakh)",
                                "Other (Lakh)"
                            ],
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: 'values'
                            }
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0,
                                dataLabels: {
                                    enabled: true
                                }
                            },
                        },
                        colors: ['#1565C0', '#1E88E5'],
                        series: [{
                            name: "Previous",
                            data: [response.investment.sub_total.previous_member[i - 1], response.investment.sub_total.previous_mutual_fund_amount[i - 1], response.investment.sub_total.previous_fix_deposit_amount[i - 1] , response.investment.sub_total.previous_other_amount[i - 1]]
                        }, {
                            name: "Current",
                            data: [response.investment.sub_total.current_member[i - 1], response.investment.sub_total.current_mutual_fund_amount[i - 1], response.investment.sub_total.current_fix_deposit_amount[i - 1] , response.investment.sub_total.current_other_amount[i - 1]]
                        }]
                    });

                    for (var k = 1; k <= length - length + 1; k++) {
                        var containerId = 'container5_' + i + '_' + j + '_' + k;

                        Highcharts.chart(containerId, {
                            chart: {
                                type: 'column'
                            },
                            title: {
                                text: response.investment.sub.title[i - 1] + " " + "(REGULAR)",
                                style: {
                                    fontSize: '15px',
                                    fontWeight: 'bold',
                                    color: '#f1b44c',
                                    textAlign: 'center'
                                }
                            },
                            xAxis: {
                                categories: [
                                    "Member (Nos)",
                                    "Mutual Fund (Lakh)",
                                    "Fix Deposit (Lakh)",
                                    "Other (Lakh)"
                                ],
                                crosshair: true
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: 'values'
                                }
                            },
                            tooltip: {
                                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                                footerFormat: '</table>',
                                shared: true,
                                useHTML: true
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0,
                                    dataLabels: {
                                        enabled: true
                                    }
                                },
                            },
                            colors: ['#1565C0', '#1E88E5'],
                            series: [{
                                name: "Previous",
                                data: [response.investment.sub_regular.previous_member[i - 1], response.investment.sub_regular.previous_mutual_fund_amount[i - 1], response.investment.sub_regular.previous_fix_deposit_amount[i - 1] , response.investment.sub_regular.previous_other_amount[i - 1]]
                            }, {
                                name: "Current",
                                data: [response.investment.sub_regular.current_member[i - 1], response.investment.sub_regular.current_mutual_fund_amount[i - 1], response.investment.sub_regular.current_fix_deposit_amount[i - 1] , response.investment.sub_regular.current_other_amount[i - 1]]
                            }]
                        });
                    }
                }
            }
        }
    }

    function claimSubChartsData(response){
        // MEDICLAIM DATA
        Highcharts.chart('container6_1', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.claim_data.mediclaim.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Claim (Nos)",
                    "Claim Amt. (Lakh)",
                    "Claim Settled Amt. (Lakh)",
                    "Claim Pending Nos.",
                    "Claim Pending Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.claim_data.mediclaim.previous_claim_nos, response.claim_data.mediclaim.previous_claim_amt, response.claim_data.mediclaim.previous_claim_settled_amt, response.claim_data.mediclaim.previous_claim_pending_nos, response.claim_data.mediclaim.previous_claim_pending_amt]
            }, {
                name: "Current",
                data: [response.claim_data.mediclaim.current_claim_nos, response.claim_data.mediclaim.current_claim_amt, response.claim_data.mediclaim.current_claim_settled_amt, response.claim_data.mediclaim.current_claim_pending_nos, response.claim_data.mediclaim.current_claim_pending_amt]
            }]
        });

        // DEATH CLAIM DATA
        Highcharts.chart('container6_2', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.claim_data.death.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Claim (Nos)",
                    "Claim Amt. (Lakh)",
                    "Claim Settled Amt. (Lakh)",
                    "Claim Pending Nos.",
                    "Claim Pending Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.claim_data.death.previous_claim_nos, response.claim_data.death.previous_claim_amt, response.claim_data.death.previous_claim_settled_amt, response.claim_data.death.previous_claim_pending_nos, response.claim_data.death.previous_claim_pending_amt]
            }, {
                name: "Current",
                data: [response.claim_data.death.current_claim_nos, response.claim_data.death.current_claim_amt, response.claim_data.death.current_claim_settled_amt, response.claim_data.death.current_claim_pending_nos, response.claim_data.death.current_claim_pending_amt]
            }]
        });

        // VEHICLE CLAIM DATA
        Highcharts.chart('container6_3', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.claim_data.vehicle.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Claim (Nos)",
                    "Claim Amt. (Lakh)",
                    "Claim Settled Amt. (Lakh)",
                    "Claim Pending Nos.",
                    "Claim Pending Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.claim_data.vehicle.previous_claim_nos, response.claim_data.vehicle.previous_claim_amt, response.claim_data.vehicle.previous_claim_settled_amt, response.claim_data.vehicle.previous_claim_pending_nos, response.claim_data.vehicle.previous_claim_pending_amt]
            }, {
                name: "Current",
                data: [response.claim_data.vehicle.current_claim_nos, response.claim_data.vehicle.current_claim_amt, response.claim_data.vehicle.current_claim_settled_amt, response.claim_data.vehicle.current_claim_pending_nos, response.claim_data.vehicle.current_claim_pending_amt]
            }]
        });

        // DISABILITY CLAIM DATA
        Highcharts.chart('container6_4', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.claim_data.disability.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Claim (Nos)",
                    "Claim Amt. (Lakh)",
                    "Claim Settled Amt. (Lakh)",
                    "Claim Pending Nos.",
                    "Claim Pending Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.claim_data.disability.previous_claim_nos, response.claim_data.disability.previous_claim_amt, response.claim_data.disability.previous_claim_settled_amt, response.claim_data.disability.previous_claim_pending_nos, response.claim_data.disability.previous_claim_pending_amt]
            }, {
                name: "Current",
                data: [response.claim_data.disability.current_claim_nos, response.claim_data.disability.current_claim_amt, response.claim_data.disability.current_claim_settled_amt, response.claim_data.disability.current_claim_pending_nos, response.claim_data.disability.current_claim_pending_amt]
            }]
        });

        // OTHER CLAIM DATA
        Highcharts.chart('container6_5', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.claim_data.other.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Claim (Nos)",
                    "Claim Amt. (Lakh)",
                    "Claim Settled Amt. (Lakh)",
                    "Claim Pending Nos.",
                    "Claim Pending Amt. (Lakh)",
                ],
                crosshair: true
            },
            yAxis: {
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.claim_data.other.previous_claim_nos, response.claim_data.other.previous_claim_amt, response.claim_data.other.previous_claim_settled_amt, response.claim_data.other.previous_claim_pending_nos, response.claim_data.other.previous_claim_pending_amt]
            }, {
                name: "Current",
                data: [response.claim_data.other.current_claim_nos, response.claim_data.other.current_claim_amt, response.claim_data.other.current_claim_settled_amt, response.claim_data.other.current_claim_pending_nos, response.claim_data.other.current_claim_pending_amt]
            }]
        });

         // CASHLESS CLAIM DATA
         Highcharts.chart('container6_6', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.cashless_claim.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Claim (Nos)",
                    "Claim Amt. (Lakh)",
                    "Claim Settled Amt. (Lakh)",                    
                ],
                crosshair: true
            },
            yAxis: {
                title: {
                    text: 'values'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.cashless_claim.previous_claim_nos, response.cashless_claim.previous_claim_amt , response.cashless_claim.previous_claim_settled_amt]
            }, {
                name: "Current",
                data: [response.cashless_claim.current_claim_nos, response.cashless_claim.current_claim_amt, response.cashless_claim.current_claim_settled_amt]
            }]
        });
    }

    function documentSubChartsData(response){
        // client document
        Highcharts.chart('container7_1', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.docs_upload.client_docs.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "KYC Docs.",
                    "Bussiness Docs.",
                    "Claims Docs.",
                    "Educational Docs.",
                    "Other Docs."
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values (Nos)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.docs_upload.client_docs.previous_kyc_docs, response.docs_upload.client_docs.previous_bussiness_docs, response.docs_upload.client_docs.previous_claim_docs,response.docs_upload.client_docs.previous_educational_docs, response.docs_upload.client_docs.previous_other_docs]
            }, {
                name: "Current",
                data: [response.docs_upload.client_docs.current_kyc_docs, response.docs_upload.client_docs.current_bussiness_docs, response.docs_upload.client_docs.current_claim_docs, response.docs_upload.client_docs.current_educational_docs, response.docs_upload.client_docs.current_other_docs]
            }]
        });

        // Documnet Upload Sub Charts
        Highcharts.chart('container7_2', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.docs_upload.client_personal_docs.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Legal Docs.",
                    "Assets Docs.",
                    "Vehicle Docs.",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'values (Nos)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Previous",
                data: [response.docs_upload.client_personal_docs.previous_legal_docs, response.docs_upload.client_personal_docs.previous_assets_docs, response.docs_upload.client_personal_docs.previous_vehicle_docs]
            }, {
                name: "Current",
                data: [response.docs_upload.client_personal_docs.current_legal_docs, response.docs_upload.client_personal_docs.current_assets_docs, response.docs_upload.client_personal_docs.current_vehicle_docs]
            }]
        });
    }

    function targetSubChartsData(response){
        // general target
        Highcharts.chart('container8_1', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.general.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.general.total_achived_ammount_previous, response.target.general.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.general.total_target_ammount_previous, response.target.general.total_target_ammount_currrent]
            }]
        });

        // general (new) target
        Highcharts.chart('container8_1_1', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.general.new.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.general.new.total_achived_ammount_previous, response.target.general.new.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.general.new.total_target_ammount_previous, response.target.general.new.total_target_ammount_currrent]
            }]
        });

        // general (renew) target
        Highcharts.chart('container8_1_2', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.general.renewal.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.general.renewal.total_achived_ammount_previous, response.target.general.renewal.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.general.renewal.total_target_ammount_previous, response.target.general.renewal.total_target_ammount_currrent]
            }]
        });

        // general (expense) target
        Highcharts.chart('container8_1_3', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.general.expense.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: ["Previous", "Current", ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.general.expense.total_achived_ammount_previous, response.target.general.expense.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.general.expense.total_target_ammount_previous, response.target.general.expense.total_target_ammount_currrent]
            }]
        });

        // life target
        Highcharts.chart('container8_2', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.life.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.life.total_achived_ammount_previous, response.target.life.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.life.total_target_ammount_previous, response.target.life.total_target_ammount_currrent]
            }]
        });

        // life (new) target
        Highcharts.chart('container8_2_1', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.life.new.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.life.new.total_achived_ammount_previous, response.target.life.new.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.life.new.total_target_ammount_previous, response.target.life.new.total_target_ammount_currrent]
            }]
        });

        // life (renew) target
        Highcharts.chart('container8_2_2', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.life.renewal.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.life.renewal.total_achived_ammount_previous, response.target.life.renewal.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.life.renewal.total_target_ammount_previous, response.target.life.renewal.total_target_ammount_currrent]
            }]
        });

        // life (expense) target
        Highcharts.chart('container8_2_3', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.life.expense.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.life.expense.total_achived_ammount_previous, response.target.life.expense.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.life.expense.total_target_ammount_previous, response.target.life.expense.total_target_ammount_currrent]
            }]
        });

        // investment target
        Highcharts.chart('container8_3', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.investment.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.investment.total_achived_ammount_previous, response.target.investment.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.investment.total_target_ammount_previous, response.target.investment.total_target_ammount_currrent]
            }]
        });

        // investment (mf-sip(new))target
        Highcharts.chart('container8_3_1', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.investment.sip.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.investment.sip.total_achived_ammount_previous, response.target.investment.sip.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.investment.sip.total_target_ammount_previous, response.target.investment.sip.total_target_ammount_currrent]
            }]
        });

        // investment (mf-single(new))target
        Highcharts.chart('container8_3_2', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.investment.single.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.investment.single.total_achived_ammount_previous, response.target.investment.single.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.investment.single.total_target_ammount_previous, response.target.investment.single.total_target_ammount_currrent]
            }]
        });

        // investment (expense)target
        Highcharts.chart('container8_3_3', {
            chart: {
                type: 'column'
            },
            title: {
                text: response.target.investment.expense.title,
                style: {
                    fontSize: '15px',
                    fontWeight: 'bold',
                    color: '#f1b44c',
                    textAlign: 'center'
                }
            },
            xAxis: {
                categories: [
                    "Previous",
                    "Current",
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Amount (Lakh)'
                }
            },
            tooltip: {
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                    '<td style="padding:0"><b>{point.y:.1f}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true
                    }
                },
            },
            colors: ['#1565C0', '#1E88E5'],
            series: [{
                name: "Achieved Amount",
                data: [response.target.investment.expense.total_achived_ammount_previous, response.target.investment.expense.total_achived_ammount_current]
            }, {
                name: "Target Amount",
                data: [response.target.investment.expense.total_target_ammount_previous, response.target.investment.expense.total_target_ammount_currrent]
            }]
        });
    }

    function generalTargetSubChart() {
        $("#modal_general_target_lable").html("General Insurance Target Sub Charts");
        $("#general_target_modal").modal('show');
        $("#target_modal").modal('hide');
    }

    function lifeTargetSubChart() {
        $("#modal_life_target_lable").html("Life Insurance Target Sub Charts");
        $("#life_target_modal").modal('show');
        $("#target_modal").modal('hide');
    }

    function investmentTargetSubChart() {
        $("#modal_invetment_target_lable").html("Life Insurance Target Sub Charts");
        $("#investment_target_modal").modal('show');
        $("#target_modal").modal('hide');
    }
</script>
@endsection