@extends('adminlte::page')
@section('title', $title)
@section('adminlte_css_pre')
@stop
@section('content_header')
    <h1 class="page-title">{{ @$title }}</h1>
    <a class="page-btn" href="{{ url('admin/doctors/') }}"><button
            class="btn btn-block btn-default import-btn">Back</button></a>
@stop

@section('content')
    @include('admin.includes.notification')
    <section class="content">
        <div class="container-fluid">
            <!-- Filter User -->
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-2">
                            <div class="form-group" align="center">
                                <label>SM</label>
                                <select class="form-control select2" name="" id="select_sm" multiple
                                    data-live-search="true">
                                    @foreach ($list_sm as $row)
                                        <option value="{{ $row->id }}">{{ $row->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group" align="center">
                                <label>RBM</label>
                                <select class="form-control select2 direct-sel" name="" id="select_rbm" multiple
                                    data-live-search="true">
                                    @foreach ($list_rbm as $row)
                                        <option value="{{ $row->id }}">{{ $row->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group" align="center">
                                <label>ABM</label>
                                <select class="form-control select2 direct-sel" name="" id="select_abm" multiple
                                    data-live-search="true">
                                    @foreach ($list_abm as $row)
                                        <option value="{{ $row->id }}">{{ $row->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group" align="center">
                                <label>BE</label>
                                <select class="form-control select2 direct-sel" name="" id="select_be" multiple
                                    data-live-search="true">
                                    @foreach ($list_be as $row)
                                        <option value="{{ $row->id }}">{{ $row->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group  m-t-35">
                                <a href="{{ url('admin/doctor-wise-report') }}" class="btn btn-primary btn-sm">Clear</a>
                            </div>
                        </div>
                    </div>
                    <!-- /.row -->
                    <!-- Filter Product -->
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3" align="center">
                            <div class="form-group" style="width: 100%;">
                                <label>Select Doctor</label>
                                <select class="form-control" name="" id="filter_doctor_detail">
                                    <option value="">-- Select Doctor Name --</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="col-12 col-sm-12 col-md-12 align-items-stretch">
                                <div class="card bg-light">
                                    <div class="card-header text-muted border-bottom-0">
                                        Doctor Deatils
                                    </div>
                                    <div class="card-body pt-0">
                                        <div class="row">
                                            <div class="col-7">
                                                <h2 class="lead">
                                                    <b id="doctorName"></b>
                                                </h2>
                                                <p class="text-muted text-sm">
                                                    <b>BE Name: </b>
                                                    <i id="beName"></i>
                                                </p>
                                                <p class="text-muted text-sm">
                                                    <b>Postion Code: </b>
                                                    <i id="bePostionCode"></i>
                                                </p>
                                                <p class="text-muted text-sm">
                                                    <b>Speciality: </b>
                                                    <i id="doctorSpeciality"></i>
                                                </p>
                                                <p class="text-muted text-sm">
                                                    <b>Chemist: </b>
                                                    <i id="doctorChemists"></i>
                                                </p>
                                            </div>
                                            <div class="col-5 text-center" id="doctorImage">

                                            </div>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <div class="text-right"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.row -->
                        <div class="col-lg-3 col-12" align="center">
                            <div class="col-lg-12 col-12">
                                <h3>Average Monthly Potential</h3>
                                <div class="small-box" style="background-color: #4285F4">
                                    <div class="inner" align="center">
                                        <h3 style="font-size: xx-large; color: white" id="monthlyPotentail">
                                            <i class="fas fa-rupee-sign"></i> 0
                                        </h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-12">
                                <h3>Average Monthly Support</h3>
                                <div class="small-box" style="background-color: #4285F4">
                                    <div class="inner" align="center">
                                        <h3 style="font-size: xx-large; color: white" id="monthlySupport">
                                            <i class="fas fa-rupee-sign"></i> 0
                                        </h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-12">
                                <h3>YTD Support</h3>
                                <div class="small-box" style="background-color: #4285F4">
                                    <div class="inner" align="center">
                                        <h3 style="font-size: xx-large; color: white" id="averageSupport">
                                            <i class="fas fa-rupee-sign"></i> 0
                                        </h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- /.row -->
                    </div>
                    <!-- /.row -->
                </div>
            </div>
            <!-- /.row -->
            <!-- Chart -->
            <div class="row">
                <!-- BAR CHART -->
                <div class="col-lg-12 col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Top 5 Products Yearly</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus" style="color: #686869"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="top5YearlyProducts"></canvas>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.row -->
            <!-- Chart -->
            <div class="row">
                <!-- PIE CHART -->
                <div class="col-lg-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Top 5 Products Y2D</h3>
                            <div class="card-tools">
                                <button type="button" class="btn btn-tool" data-card-widget="collapse">
                                    <i class="fas fa-minus" style="color: #686869"></i>
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <canvas id="pieTop5Products"></canvas>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
            </div>
            <!-- /.row -->
        </div>
        <div class="card">
            <!-- /.card-header -->
            <div class="card-body table-responsive p-0">
                <table class="table table-hover text-nowrap tbl-dpm-card">
                    <thead></thead>
                    <tbody></tbody>
                </table>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.container-fluid -->
    </section>
@stop
@section('adminlte_js')
    <script src="{{ asset('js/admin/select2.min.js') }}"></script>
    <script src="{{ asset('js/admin/chart.js') }}"></script>
    <script>
        $("#master_division_id").on('change', function() {
            $.ajax({
                url: "{{ route('masterDivisionSet') }}",
                type: "POST",
                data: {
                    master_division_id: $("#master_division_id").val(),
                    _token: "{{ csrf_token() }}"
                },
                dataType: "json",
                success: function(response, textStatus, xhr) {
                    if (response.status == 1) {
                        location.reload(); // Reload the page
                    } else {

                    }
                },
                error: function(jqXHR, textStatus, errorThrown) {},
            }); //ajax
        });
    </script>
    <script>
        $(document).ready(function() {
            var ctx = document.getElementById('top5YearlyProducts').getContext('2d');
            var top5YearlyProducts = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: ['APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC', 'JAN', 'FEB',
                        'MAR'
                    ],
                    datasets: []
                },
                options: {
                    tooltips: {
                        mode: 'index',
                        intersect: false
                    },
                    responsive: true,
                    scales: {
                        xAxes: [{
                            stacked: true,
                        }],
                        yAxes: [{
                            stacked: true
                        }]
                    }
                }
            });
            var ctx1 = document.getElementById('pieTop5Products').getContext('2d');
            var pieTop5Products = new Chart(ctx1, {
                type: 'pie',
                data: {
                    datasets: [{
                        data: [],
                        backgroundColor: [],
                    }],
                    labels: [],
                },

            });
            $('#filter_doctor_detail').select2();
            // FUNCTION TO RESET DETAILS
            function detailsReset() {
                top5YearlyProducts.data = {
                    labels: ['APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC', 'JAN', 'FEB',
                        'MAR'],
                    datasets: []
                };
                top5YearlyProducts.update();
                pieTop5Products.data = {
                    datasets: [{
                        data: [],
                        backgroundColor: [],
                    }],
                    labels: [],
                };
                pieTop5Products.update();

                // EMPTY NUMERICS
                $(document).find('#monthlyPotentail').empty();
                $(document).find('#monthlySupport').empty();
                $(document).find('#averageSupport').empty();

                $(document).find('#monthlyPotentail').append('<i class="fas fa-rupee-sign"></i> 0');
                $(document).find('#monthlySupport').append('<i class="fas fa-rupee-sign"></i> 0');
                $(document).find('#averageSupport').append('<i class="fas fa-rupee-sign"></i> 0');
                $(document).find('#doctorSpeciality').text('');
                $(document).find('#doctorChemists').text('');
                $(document).find('#doctorName').text('');
                $(document).find('#beName').text('');
                $(document).find('#bePostionCode').text('');
            }
            // FUNCTION TO FILTER PRODUCT VS SUPPORT PAGE 
            $(document).on('change', '#select_sm,#select_rbm,#select_abm', function(e) {
                e.preventDefault();
                //$(document).find('.loader-process').addClass('show');
                cmnPreloaderPopup('');
                var that = $(this);
                var type = '';

                var form_data = new FormData();
                if (that.attr('id') == 'select_sm') {
                    var type = 'SM';
                } else if (that.attr('id') == 'select_rbm') {
                    var type = 'RBM';
                } else if (that.attr('id') == 'select_abm') {
                    var type = 'ABM';
                } else if (that.attr('id') == 'select_be') {
                    var type = 'BE';
                }
                var id = that.val();
                var isDirect = 0;
                if (that.hasClass('direct-sel')) {
                    isDirect = 1;
                }

                form_data.append('type', type);
                form_data.append('id', id);
                form_data.append('isDirect', isDirect);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    dataType: 'json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,
                    type: 'post',
                    async: true,
                    url: SITE_URL + '/doctor-wise-report/filter-records',
                    success: function(obj) {
                        //$(document).find('.loader-process').removeClass('show');
                        cmnPreloaderPopup('hide');
                        if (obj.code == 1) {
                            detailsReset();
                            $('#filter_doctor_detail').empty();
                            $(document).find('#filter_doctor_detail').append(
                                '<option value="">-- Select Doctors  --</option>');

                            if (that.attr('id') == 'select_sm' || that.attr('id') ==
                                'select_rbm' || that.attr('id') == 'select_abm' || that.attr(
                                    'id') == 'select_be') {
                                $('#' + that.attr('id')).selectpicker('toggle');
                            }

                            if (type == 'SM') {
                                $(document).find('#select_abm').empty();
                                $(document).find('#select_be').empty();
                                $(document).find('#select_rbm').empty();
                                obj.rbm_users.forEach(function(v, k) {
                                    $(document).find('#select_rbm').append(
                                        '<option value="' + v.id + '">' + v.name +
                                        '</option>');
                                });
                                $('#select_rbm').selectpicker('refresh');
                                obj.abm_users.forEach(function(v, k) {
                                    $(document).find('#select_abm').append(
                                        '<option value="' + v.id + '">' + v.name +
                                        '</option>');
                                });
                                $('#select_abm').selectpicker('refresh');
                                obj.be_users.forEach(function(v, k) {
                                    $(document).find('#select_be').append(
                                        '<option value="' + v.id + '">' + v.name +
                                        '</option>');
                                });
                                $('#select_be').selectpicker('refresh');
                                $(document).find('#select_rbm').removeClass('direct-sel');
                                $(document).find('#select_abm').removeClass('direct-sel');
                                $(document).find('#select_rm').removeClass('direct-sel');
                            } else if (type == 'RBM') {
                                $(document).find('#select_abm').empty();
                                $(document).find('#select_be').empty();
                                obj.abm_users.forEach(function(v, k) {
                                    $(document).find('#select_abm').append(
                                        '<option value="' + v.id + '">' + v.name +
                                        '</option>');
                                });
                                $('#select_abm').selectpicker('refresh');
                                obj.be_users.forEach(function(v, k) {
                                    $(document).find('#select_be').append(
                                        '<option value="' + v.id + '">' + v.name +
                                        '</option>');
                                });
                                $('#select_be').selectpicker('refresh');
                                // SHOW PREFILLED PARENTS
                                if (isDirect == 1) {
                                    $(document).find('#select_sm').empty();
                                    obj.pre_sm_users.forEach(function(v, k) {
                                        $(document).find('#select_sm').append(
                                            '<option value="' + v.id + '">' + v
                                            .name + '</option>');
                                    });
                                    $('#select_sm').selectpicker('refresh');
                                }

                                $(document).find('#select_abm').removeClass('direct-sel');
                                $(document).find('#select_rm').removeClass('direct-sel');
                            } else if (type == 'ABM') {
                                $(document).find('#select_be').empty();
                                obj.be_users.forEach(function(v, k) {
                                    $(document).find('#select_be').append(
                                        '<option value="' + v.id + '">' + v.name +
                                        '</option>');
                                });
                                $('#select_be').selectpicker('refresh');
                                // SHOW PREFILLED PARENTS
                                if (isDirect == 1) {
                                    $(document).find('#select_sm').empty();
                                    obj.pre_sm_users.forEach(function(v, k) {
                                        $(document).find('#select_sm').append(
                                            '<option value="' + v.id + '">' + v
                                            .name + '</option>');
                                    });
                                    $('#select_sm').selectpicker('refresh');
                                    $(document).find('#select_rbm').empty();
                                    obj.pre_rbm_users.forEach(function(v, k) {
                                        $(document).find('#select_rbm').append(
                                            '<option value="' + v.id + '">' + v
                                            .name + '</option>');
                                    });
                                    $('#select_rbm').selectpicker('refresh');
                                }

                                $(document).find('#select_rm').removeClass('direct-sel');
                            } else if (type == 'BE') {
                                // SHOW PREFILLED PARENTS
                                if (isDirect == 1) {
                                    $(document).find('#select_sm').empty();
                                    obj.pre_sm_users.forEach(function(v, k) {
                                        $(document).find('#select_sm').append(
                                            '<option value="' + v.id + '">' + v
                                            .name + '</option>');
                                    });
                                    $('#select_sm').selectpicker('refresh');
                                    $(document).find('#select_rbm').empty();
                                    obj.pre_rbm_users.forEach(function(v, k) {
                                        $(document).find('#select_rbm').append(
                                            '<option value="' + v.id + '">' + v
                                            .name + '</option>');
                                    });
                                    $('#select_rbm').selectpicker('refresh');
                                    $(document).find('#select_abm').empty();
                                    obj.pre_abm_users.forEach(function(v, k) {
                                        $(document).find('#select_abm').append(
                                            '<option value="' + v.id + '">' + v
                                            .name + '</option>');
                                    });
                                    $('#select_abm').selectpicker('refresh');
                                }
                            }
                        } else {

                        }
                    },
                    error: function(obj) {
                        //
                    },
                });
            });
            $(document).on('change', '#select_be', function(e) {
                e.preventDefault();
                //$(document).find('.loader-process').addClass('show');
                cmnPreloaderPopup('');
                var that = $(this);
                var form_data = new FormData();
                var id = that.val();

                // RESET DATA IF BE IS BLANK
                if (id == '') {
                    detailsReset();
                    $('#filter_doctor_detail').empty();
                    $(document).find('#filter_doctor_detail').append(
                        '<option value="">-- Select Doctors  --</option>');
                    cmnPreloaderPopup('hide');
                    alert();
                    return false;
                }

                form_data.append('id', id);
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    dataType: 'json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,
                    type: 'post',
                    async: true,
                    url: SITE_URL + '/doctor-wise-report/list-doctors',
                    success: function(obj) {
                        $('#' + that.attr('id')).selectpicker('toggle');
                        //$(document).find('.loader-process').removeClass('show');
                        cmnPreloaderPopup('hide');
                        if (obj.code == 1) {
                            $(document).find('#filter_doctor_detail').empty();
                            $(document).find('#filter_doctor_detail').append(
                                '<option value="">-- Select Doctors  --</option>');
                            obj.doctos.forEach(function(v, k) {
                                $(document).find('#filter_doctor_detail').append(
                                    '<option value="' + v.id + '">' + v.name +
                                    '</option>');
                            });
                        } else {

                        }
                    },
                    error: function(obj) {
                        //
                    },
                });
            });
            // FUNCTION TO FILTER PRODUCT VS SUPPORT PAGE 
            $(document).on('change', '#filter_doctor_detail', function(e) {
                e.preventDefault();
                //$(document).find('.loader-process').addClass('show');
                //cmnPreloaderPopup('');
                var that = $(this);
                var type = '';

                // RESET DATA IF BE IS BLANK
                if ($('#filter_doctor_detail').val() == '') {
                    detailsReset();
                    return false;
                }

                var form_data = new FormData();
                form_data.append('id', $('#filter_doctor_detail').val());
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                $.ajax({
                    dataType: 'json',
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,
                    type: 'post',
                    async: true,
                    url: SITE_URL + '/doctor-wise-report/doctor-details',
                    success: function(obj) {
                        //$(document).find('.loader-process').removeClass('show');
                        cmnPreloaderPopup('hide');
                        if (obj.code == 1) {

                            var datasetProduct1 = obj.dataset_product_1;
                            var datasetProduct2 = obj.dataset_product_2;
                            var datasetProduct3 = obj.dataset_product_3;
                            var datasetProduct4 = obj.dataset_product_4;
                            var datasetProduct5 = obj.dataset_product_5;
                            top5YearlyProducts.data = {
                                labels: ['APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT',
                                    'NOV', 'DEC', 'JAN', 'FEB', 'MAR'
                                ],
                                datasets: [{
                                    label: obj.product_1_name,
                                    backgroundColor: 'red',
                                    data: datasetProduct1
                                }, {
                                    label: obj.product_2_name,
                                    backgroundColor: 'blue',
                                    data: datasetProduct2
                                }, {
                                    label: obj.product_3_name,
                                    backgroundColor: 'green',
                                    data: datasetProduct3
                                }, {
                                    label: obj.product_4_name,
                                    backgroundColor: 'orange',
                                    data: datasetProduct4
                                }, {
                                    label: obj.product_5_name,
                                    backgroundColor: '#6610f2',
                                    data: datasetProduct5
                                }]
                            };
                            top5YearlyProducts.update();

                            var topProductValDataSet = obj.dataset_top_product_val_arr;
                            var topProductNameDataSet = obj.dataset_top_product_name_arr;
                            pieTop5Products.data = {
                                datasets: [{
                                    label: 'Top 5 Products',
                                    data: topProductValDataSet,
                                    backgroundColor: ['red', 'blue', 'green',
                                        'orange', '#6610f2'
                                    ],
                                }],
                                labels: topProductNameDataSet
                            };
                            pieTop5Products.update();

                            // EMPTY NUMERICS
                            $(document).find('#monthlyPotentail').empty();
                            $(document).find('#monthlySupport').empty();
                            $(document).find('#averageSupport').empty();

                            $(document).find('#monthlyPotentail').append(
                                '<i class="fas fa-rupee-sign"></i> ' + obj.avg_potential);
                            $(document).find('#monthlySupport').append(
                                '<i class="fas fa-rupee-sign"></i> ' + obj.avg_support);
                            $(document).find('#averageSupport').append(
                                '<i class="fas fa-rupee-sign"></i> ' + obj.tot_support);
                            $(document).find('#doctorSpeciality').text(obj.spacility_str);
                            $(document).find('#doctorChemists').text(obj.chemists_str);
                            $(document).find('#doctorName').text(obj.doctor_name);
                            $(document).find('#beName').text($('#select_be').find(":selected")
                                .text());
                            $(document).find('#bePostionCode').text(obj.doctor_pos_code);

                            // DPM CARD TABLE
                            console.log(obj.dpm_response);
                            $(document).find('.tbl-dpm-card thead').find('tr').remove();
                            $(document).find('.tbl-dpm-card tbody').find('tr').remove();
                            $(document).find('.tbl-dpm-card thead').append(
                                '<tr><th>Mo</th></tr>')
                            obj.dpm_response.productList.forEach(function(v, k) {
                                $(document).find('.tbl-dpm-card thead tr').append(
                                    '<th>' + v.productName + '</th>');
                            });

                            var suppList = obj.dpm_response.supportList;
                            var suppListValue = obj.dpm_response.supportValueList;

                            // FIRST PART
                            var firstRowHtml = '';
                            obj.dpm_response.potentialList.first.forEach(function(v, k) {
                                if (k == 0) {
                                    firstRowHtml = (firstRowHtml != '') ? firstRowHtml +
                                        '' + '<td>' + v + '</td>' : '<td>' + v +
                                        '</td>';
                                } else {
                                    firstRowHtml = (firstRowHtml != '') ? firstRowHtml +
                                        '' + '<td>' + v + '<br>(' + obj.dpm_response
                                        .potentialValueList.first[k] + ')</td>' :
                                        '<td>' + v + '<br>(' + obj.dpm_response
                                        .potentialValueList.first[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody').append(
                                '<tr class="bg-lightblue">' + firstRowHtml + '</tr>');

                            var mon1html = '';
                            suppList.apr.forEach(function(v, k) {
                                if (k == 0) {
                                    mon1html = (mon1html != '') ? mon1html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon1html = (mon1html != '') ? mon1html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.apr[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .apr[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon1html + '</tr>');
                            var mon2html = '';
                            suppList.may.forEach(function(v, k) {
                                if (k == 0) {
                                    mon2html = (mon2html != '') ? mon2html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon2html = (mon2html != '') ? mon2html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.may[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .may[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon2html + '</tr>');
                            var mon3html = '';
                            suppList.jun.forEach(function(v, k) {
                                if (k == 0) {
                                    mon3html = (mon3html != '') ? mon3html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon3html = (mon3html != '') ? mon3html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.jun[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .jun[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon3html + '</tr>');
                            var mon4html = '';
                            suppList.jul.forEach(function(v, k) {
                                if (k == 0) {
                                    mon4html = (mon4html != '') ? mon4html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon4html = (mon4html != '') ? mon4html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.jul[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .jul[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon4html + '</tr>');
                            var mon5html = '';
                            suppList.aug.forEach(function(v, k) {
                                if (k == 0) {
                                    mon5html = (mon5html != '') ? mon5html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon5html = (mon5html != '') ? mon5html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.aug[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .aug[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon5html + '</tr>');
                            var mon6html = '';
                            suppList.sep.forEach(function(v, k) {
                                if (k == 0) {
                                    mon6html = (mon6html != '') ? mon6html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon6html = (mon6html != '') ? mon6html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.sep[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .sep[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon6html + '</tr>');

                            var firstRowTotHtml = '';
                            obj.dpm_response.totSupportList.first.forEach(function(v, k) {
                                if (k == 0) {
                                    firstRowTotHtml = (firstRowTotHtml != '') ?
                                        firstRowTotHtml + '' + '<td>' + v + '</td>' :
                                        '<td>' + v + '</td>';
                                } else {
                                    firstRowTotHtml = (firstRowTotHtml != '') ?
                                        firstRowTotHtml + '' + '<td>' + v + '<br>(' +
                                        obj.dpm_response.totValueSupportList.first[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + obj
                                        .dpm_response.totValueSupportList.first[k] +
                                        ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after(
                                '<tr class="bg-lightpink">' + firstRowTotHtml + '</tr>');

                            // SECOND PART
                            var secondRowHtml = '';
                            obj.dpm_response.potentialList.second.forEach(function(v, k) {
                                if (k == 0) {
                                    secondRowHtml = (secondRowHtml != '') ?
                                        secondRowHtml + '' + '<td>' + v + '</td>' :
                                        '<td>' + v + '</td>';
                                } else {
                                    secondRowHtml = (secondRowHtml != '') ?
                                        secondRowHtml + '' + '<td>' + v + '<br>(' + obj
                                        .dpm_response.potentialValueList.second[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + obj
                                        .dpm_response.potentialValueList.second[k] +
                                        ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody').append(
                                '<tr class="bg-lightblue">' + secondRowHtml + '</tr>');

                            var mon7html = '';
                            suppList.oct.forEach(function(v, k) {
                                if (k == 0) {
                                    mon7html = (mon7html != '') ? mon7html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon7html = (mon7html != '') ? mon7html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.oct[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .oct[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon7html + '</tr>');
                            var mon8html = '';
                            suppList.nov.forEach(function(v, k) {
                                if (k == 0) {
                                    mon8html = (mon8html != '') ? mon8html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon8html = (mon8html != '') ? mon8html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.nov[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .nov[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon8html + '</tr>');
                            var mon9html = '';
                            suppList.dec.forEach(function(v, k) {
                                if (k == 0) {
                                    mon9html = (mon9html != '') ? mon9html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon9html = (mon9html != '') ? mon9html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.dec[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .dec[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon9html + '</tr>');
                            var mon10html = '';
                            suppList.jan.forEach(function(v, k) {
                                if (k == 0) {
                                    mon10html = (mon10html != '') ? mon10html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon10html = (mon10html != '') ? mon10html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.jan[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .jan[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon10html + '</tr>');
                            var mon11html = '';
                            suppList.feb.forEach(function(v, k) {
                                if (k == 0) {
                                    mon11html = (mon11html != '') ? mon11html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon11html = (mon11html != '') ? mon11html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.feb[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .feb[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon11html + '</tr>');
                            var mon12html = '';
                            suppList.mar.forEach(function(v, k) {
                                if (k == 0) {
                                    mon12html = (mon12html != '') ? mon12html + '' +
                                        '<td>' + v + '</td>' : '<td>' + v + '</td>';
                                } else {
                                    mon12html = (mon12html != '') ? mon12html + '' +
                                        '<td>' + v + '<br>(' + suppListValue.mar[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + suppListValue
                                        .mar[k] + ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after('<tr>' +
                                mon12html + '</tr>');

                            var secondRowTotHtml = '';
                            obj.dpm_response.totSupportList.second.forEach(function(v, k) {
                                if (k == 0) {
                                    secondRowTotHtml = (secondRowTotHtml != '') ?
                                        secondRowTotHtml + '' + '<td>' + v + '</td>' :
                                        '<td>' + v + '</td>';
                                } else {
                                    secondRowTotHtml = (secondRowTotHtml != '') ?
                                        secondRowTotHtml + '' + '<td>' + v + '<br>(' +
                                        obj.dpm_response.totValueSupportList.second[k] +
                                        ')</td>' : '<td>' + v + '<br>(' + obj
                                        .dpm_response.totValueSupportList.second[k] +
                                        ')</td>';
                                }
                            });
                            $(document).find('.tbl-dpm-card tbody tr').last().after(
                                '<tr class="bg-lightpink">' + secondRowTotHtml + '</tr>');
                        } else {

                        }
                    },
                    error: function(obj) {
                        //
                    },
                });
            });
        });
    </script>
@stop