@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-2">
                            <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-2">
                            <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-2">
                            <div class="form-group" align="center">
                                <label>Rxbers Category</label>
                                <select class="form-control select2" id="select_rxbers">
                                    <option value="green">Heavy Rxbers</option>
                                    <option value="orange">Low Rxbers</option>
                                    <option value="red">Non Rxbers</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <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 class="col-md-4">
                            <br>
                            <div class="row" align="center">
                                <div class="col-md-4 js-rxbers-color-div green">
                                    <div style="height: 20px; width: 20px; background-color: #008000;"></div>
                                    &gt;= <span>{{ config('custom_config.rxbers_category_colors.green') }}</span>
                                </div>
                                <div class="col-md-4 js-rxbers-color-div orange">
                                    <div style="height: 20px; width: 20px; background-color: #FFA500;"></div>
                                    <span>{{ config('custom_config.rxbers_category_colors.green') - 1 }} To
                                        {{ config('custom_config.rxbers_category_colors.red') + 1 }}</span>
                                </div>
                                <div class="col-md-4 js-rxbers-color-div red">
                                    <div style="height: 20px; width: 20px; background-color: #FF0000;"></div>
                                    &lt;= <span>{{ config('custom_config.rxbers_category_colors.red') }}</span>
                                </div>
                            </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 side-info green-bg">
                            <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 side-info green-bg">
                            <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 side-info green-bg">
                            <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>
    <div class="modal fade" id="rxbers_cat_popup" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Set color values here</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="javascript:;" id="frm_rxber_range">
                        <input type="text" class="form-control" name="rxbers_value_green" id="rxbers_value_green"
                            placeholder="Enter value for Green"
                            value="{{ config('custom_config.rxbers_category_colors.green') }}" />
                        <input type="text" class="form-control m-t-15" name="rxbers_value_red" id="rxbers_value_red"
                            placeholder="Enter value for Red"
                            value="{{ config('custom_config.rxbers_category_colors.red') }}" />
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary confirm">Ok</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@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 js_green_val =