@extends('adminlte::page')
@section('title', $title)
@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-2">
                            <div class="form-group" align="center">
                                <label>HQs</label>
                                <select class="form-control select2 direct-sel" name="" id="select_hq">
                                    <option value="">-- Select HQ --</option>
                                    @foreach ($list_hqs as $row)
                                        <option value="{{ $row->id }}">{{ $row->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    <!-- /.row -->
                    <!-- Filter Product -->
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group" align="center">
                                <label>Product</label>
                                <select class="form-control select2" id="select_product">
                                    <option value="">-- Select Product --</option>
                                    @foreach ($list_products as $row)
                                        <option value="{{ $row->id }}">{{ $row->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group" align="center">
                                <label>Speciality</label>
                                <select class="form-control select2" id="select_speciality">
                                    <option value="">-- Select Speciality --</option>
                                    @foreach ($list_specialities as $row)
                                        <option value="{{ $row->id }}">{{ $row->speciallity_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group m-t-35">
                                <a href="{{ url('admin/potential-vs-support') }}" class="btn btn-primary btn-sm">Clear</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
            <!-- Chart -->
            <div class="row">
                <!-- BAR CHART -->
                <div class="col-lg-9 col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Potentail Vs Actual Support</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="potentailVsActualSupportChart"></canvas>
                        </div>
                        <!-- /.card-body -->
                    </div>
                    <!-- /.card -->
                </div>
                <!-- /.row -->
                <div class="col-lg-3 col-12" align="center">
                    <div class="col-lg-12 col-12">
                        <h3>Average No of Doctors</h3>
                        <div class="small-box" style="background-color: #4285F4">
                            <div class="inner" align="center">
                                <h3 style="font-size: xx-large; color: white" id="noOfDrs">{{ @$tot_doctors }}</h3>
                            </div>
                        </div>
                    </div>
                    <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="averagePotentail">
                                    <i class="fas fa-rupee-sign"></i> {{ @$avg_potential }}
                                </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="averageSupport">
                                    <i class="fas fa-rupee-sign"></i> {{ @$avg_support }}
                                </h3>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /.container-fluid -->
    </section>
@stop
@section('adminlte_js')
    <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>
        var dataValuesPot = ;
        var dataValuesSup = ;
        var docCount = ;
        var doctorsTextTemp = ' | Doctors : ';

        $(document).ready(function() {
            var ctx = document.getElementById('potentailVsActualSupportChart').getContext('2d');
            var productSupportChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    datasets: [{
                        label: 'Monthly Support',
                        data: dataValuesSup,
                        // this dataset is drawn below
                        order: 2,
                        backgroundColor: '#3366cc',
                    }, {
                        label: 'Potential',
                        data: dataValuesPot,
                        type: 'line',
                        // this dataset is drawn on top
                        order: 1,
                        backgroundColor: '#dc3912',
                        fill: false,
                        borderColor: '#dc3912',
                    }],
                    labels: ['APR' + doctorsTextTemp + docCount.apr, 'MAY' + doctorsTextTemp + docCount.may,
                        'JUN' + doctorsTextTemp + docCount.jun, 'JUL' + doctorsTextTemp + docCount.jul,
                        'AUG' + doctorsTextTemp + docCount.aug, 'SEP' + doctorsTextTemp + docCount.sep,
                        'OCT' + doctorsTextTemp + docCount.oct, 'NOV' + doctorsTextTemp + docCount.nov,
                        'DEC' + doctorsTextTemp + docCount.dec, 'JAN' + doctorsTextTemp + docCount.jan,
                        'FEB' + doctorsTextTemp + docCount.feb, 'MAR' + doctorsTextTemp + docCount.mar
                    ]
                },
            });
            // FUNCTION TO FILTER PRODUCT VS SUPPORT PAGE 
            $(document).on('change',
                '#select_sm,#select_rbm,#select_abm,#select_be,#select_product,#select_speciality,#select_hq',
                function(e) {
                    e.preventDefault();
                    //$(document).find('.loader-process').addClass('show');
                    cmnPreloaderPopup('');
                    var that = $(this);
                    var type = '';
                    var isDirect = 0;

                    var form_data = new FormData();
                    if (that.attr('id') == 'select_product' || that.attr('id') == 'select_speciality' || that
                        .attr('id') == 'select_hq') {
                        if ($(document).find('#select_be').val() != '') {
                            var type = 'BE';
                            var id = $(document).find('#select_be').val();
                        } else if ($(document).find('#select_abm').val() != '') {
                            var type = 'ABM';
                            var id = $(document).find('#select_abm').val();
                        } else if ($(document).find('#select_rbm').val() != '') {
                            var type = 'RBM';
                            var id = $(document).find('#select_rbm').val();
                        } else if ($(document).find('#select_sm').val() != '') {
                            var type = 'SM';
                            var id = $(document).find('#select_sm').val();
                        } else {
                            var type = '';
                            var id = '';
                        }
                        var productId = $(document).find('#select_product').val();
                        var specialityId = $(document).find('#select_speciality').val();
                        var hqId = $(document).find('#select_hq').val();
                    } else {
                        if (that.val() != '') {
                            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';
                            }
                            if (that.hasClass('direct-sel')) {
                                isDirect = 1;
                            }
                            var id = that.val();
                            var productId = $(document).find('#select_product').val();
                            var specialityId = $(document).find('#select_speciality').val();
                            var hqId = $(document).find('#select_hq').val();
                        } else {
                            if (that.attr('id') == 'select_sm') {
                                var type = '';
                                var id = '';
                            } else if (that.attr('id') == 'select_rbm') {
                                var type = 'SM';
                                var id = $(document).find('#select_sm').val();
                            } else if (that.attr('id') == 'select_abm') {
                                var type = 'RBM';
                                var id = $(document).find('#select_rbm').val();
                            } else if (that.attr('id') == 'select_be') {
                                var type = 'ABM';
                                var id = $(document).find('#select_abm').val();
                            }
                            if (id == '') {
                                type = '';
                            }
                            var productId = $(document).find('#select_product').val();
                            var specialityId = $(document).find('#select_speciality').val();
                            var hqId = $(document).find('#select_hq').val();
                        }
                    }
                    form_data.append('id', id);
                    form_data.append('productId', productId);
                    form_data.append('specialityId', specialityId);
                    form_data.append('hqId', hqId);
                    form_data.append('type', type);
                    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 + '/potential-vs-support/filter-records',
                        success: function(obj) {
                            //$(document).find('.loader-process').removeClass('show');
                            cmnPreloaderPopup('hide');
                            if (obj.code == 1) {
                                var suppDataSet = jQuery.parseJSON(obj.support_dataset);
                                var potDataSet = jQuery.parseJSON(obj.potential_dataset);
                                var docCountData = jQuery.parseJSON(obj.doc_count);
                                productSupportChart.data = {
                                    type: 'bar',
                                    datasets: [{
                                        label: 'Monthly Support',
                                        data: suppDataSet,
                                        order: 2,
                                        backgroundColor: '#3366cc',
                                    }, {
                                        label: 'Potential',
                                        data: potDataSet,
                                        type: 'line',
                                        order: 1,
                                        backgroundColor: '#dc3912',
                                        fill: false,
                                        borderColor: '#dc3912',
                                    }],
                                    labels: ['APR' + doctorsTextTemp + docCountData.apr, 'MAY' +
                                        doctorsTextTemp + docCountData.may, 'JUN' +
                                        doctorsTextTemp + docCountData.jun, 'JUL' +
                                        doctorsTextTemp + docCountData.jul, 'AUG' +
                                        doctorsTextTemp + docCountData.aug, 'SEP' +
                                        doctorsTextTemp + docCountData.sep, 'OCT' +
                                        doctorsTextTemp + docCountData.oct, 'NOV' +
                                        doctorsTextTemp + docCountData.nov, 'DEC' +
                                        doctorsTextTemp + docCountData.dec, 'JAN' +
                                        doctorsTextTemp + docCountData.jan, 'FEB' +
                                        doctorsTextTemp + docCountData.feb, 'MAR' +
                                        doctorsTextTemp + docCountData.mar
                                    ]
                                };
                                productSupportChart.update();

                                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');
                                    }
                                }

                                $(document).find('#noOfDrs').text(obj.tot_doctors);
                                $(document).find('#averagePotentail').text(obj.avg_potential);
                                $(document).find('#averageSupport').text(obj.avg_support);
                            } else {

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