@extends('layouts.app')

@section('content')
    <div class="page-header">
        <div class="row align-items-end">
            <div class="col-lg-8">

                <div class="page-header-title">
                    <div class="d-inline">
                        <h4>WL Fluctuation Summary</h4>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- Page-header end -->
    @php $user = Auth::user(); @endphp
    <!-- Page-body start -->
    <div class="page-body">
        <div class="card mb-2">
            <div class="card-block">
                <div class="row">
                    <div class="col-md-4 mb-0">
                        <div class="form-check form-check-inline">
                            <label class="form-check-label">
                                <input class="form-check-input ord" type="radio" name="ord" value="1" checked>
                                Administrative
                            </label>
                        </div>
                        {{-- <div class="form-check form-check-inline">
                            <label class="form-check-label">
                                <input class="form-check-input ord" type="radio" name="ord" value="2">
                                Hydrological
                            </label>
                        </div> --}}
                    </div>

                </div>

                <div class="row">

                    <div class="col-md-6 col-lg-2">
                        <div class="form-group">
                            <label for="validationCustom02">Region</label>
                            <select class="form-control RegionFilter" name="RegionID" id="RegionID">
                                <option value="">--select--</option>
                                @foreach ($t_Master_Region as $row)
                                    <option value="{{ $row->RegionID }}"
                                        @if ($user->RoleID == 2 && $row->RegionID == $user->RegionID) selected = "selected" @endif>
                                        {{ $row->RegionName }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-6 col-lg-2">
                        <label for="validationCustom02">State</label>
                        <select class="form-control StateCodeFilter" name="StateCode" id="StateCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>
                    <div class="col-md-6 col-lg-2 administrative">
                        <label for="validationCustom02">District</label>
                        <select class="form-control district_id DistrictCodeFilter" name="DistrictCode" id="DistrictCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>

                    <div class="col-md-6 col-lg-2 hydrological" style="display:none">
                        <label for="validationCustom02">Basin</label>
                        <select class="form-control BasinCodeFilter" name="BasinCode" id="BasinCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>
                    <div class="col-md-6 col-lg-2 hydrological" style="display:none">
                        <label for="validationCustom02">Sub Basin</label>
                        <select class="form-control SubBasinCode" name="SubBasinCode" id="SubBasinCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>

                    <div class="col-md-6 col-lg-2">
                        <label for="exampleSelect1">Month/Year<span class="red">*</span> </label>
                        <div class="date-container w-100">
                            <input id="year_month" name="year_month" type="text" class="form-control date-picker"
                                autocomplete="off" placeholder="mm-yyyy"><span class="material-symbols-outlined">calendar_month
                            </span>
                        </div>
                    </div>


                    <div class="col-md-6 col-lg-2 ">
                        <label for="exampleSelect1">Report Type<span class="red">*</span></label>
                        <select id="reportType" class="form-control RPT">
                            <option value="1">Annual fluctuation range(m)</option>
                            <option value="2">Seasonal fluctuation range(m)</option>
                            <option value="3">Decadal Comparision</option>
                            {{-- <option value="4">Date-Range</option> --}}
                        </select>
                    </div>

                    <div class="col-md-2 mb-3 date-range" style="display:none">
                        <label for="exampleSelect1">From Date </label>
                        {{-- <input id="fDate" type="date" class="form-control" autocomplete="off"> --}}
                        <div class="date-container w-100">
                            <input type="text" pattern="\d{1,2}-\d{1,2}-\d{4}" title="Enter in dd-mm-yyyy format"
                                class="form-control datepicker" id="fromDate" name="fromDate" placeholder="dd-mm-yyyy"
                                autocomplete="off" maxlength="255">
                            <span class="date-text"></span>
                            <i class="date-icon fa fa-calendar" aria-hidden="true"></i>
                        </div>
                    </div>
                    <div class="col-md-2 mb-3 date-range" style="display:none">
                        <label for="exampleSelect1">To Date </label>
                        <div class="date-container w-100">
                            <input type="text" pattern="\d{1,2}-\d{1,2}-\d{4}" title="Enter in dd-mm-yyyy format"
                                class="form-control datepicker" id="toDate" name="toDate" placeholder="dd-mm-yyyy"
                                autocomplete="off" maxlength="255">
                            <span class="date-text"></span>
                            <i class="date-icon fa fa-calendar" aria-hidden="true"></i>
                        </div>
                        {{-- <input id="tDate" type="date" class="form-control" autocomplete="off"> --}}
                    </div>


                    <div class="col-md-2 mb-0">
                        <div class="form-group">
                            <label for="validationCustom02">Well Type</label>
                            <select class="form-control WellType" name="WellType" id="WellType">
                                <option value="">--Select--</option>
                                @foreach ($well_type_list as $row)
                                    <option value="{{ $row->combo_value }}">{{ $row->combo_text }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>


                    <div class="col-md-2 mb-0">
                        <div class="form-group">
                            <label for="validationCustom02">Aquifer</label>
                            <select class="form-control AqTap" name="AqTap" id="AqTap">
                                <option value="">--Select--</option>
                                @foreach ($AqTap_list as $row)
                                    <option value="{{ $row->combo_value }}">{{ $row->combo_text }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    {{-- <div class="col-md-6 col-lg-2 date-range" style="display:none">
                        <label for="exampleSelect1">Date From</label>
                        <input type="date" class="form-control" id="fromDate" name="fromDate">
                    </div>
                    <div class="col-md-6 col-lg-2 date-range" style="display:none">
                        <label for="exampleSelect1">Date To</label>
                        <input type="date" class="form-control" id="toDate" name="toDate">
                    </div> --}}

                    <div class="col-md-6 col-lg-2 ">
                        <label for="exampleSelect1">Show Percentage<span class="red">*</span></label>
                        <select id="showper" class="form-control RPT">
                            <option value="0">No</option>
                            <option value="1">Yes</option>
                        </select>
                    </div>


                    <div class="col-md-6 col-lg-2">
                        <div class="form-group">
                            <label for="validationCustom02">Project</label>
                            <select class="form-control ProjectID" name="ProjectID" id="ProjectID">
                                <option value="">--select--</option>
                                @foreach ($mst_project as $row)
                                    <option value="{{ $row->id }}">{{ $row->project_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="col-md-2 mt-3">
                        <div class="form-group">
                            <div class="d-flex">
                                <button type="bttton" class="btn btn-sm btn-primary text-white filter_btn mr-2"
                                    name="Search">Filter</button>
                                <form action="/DownloadRPTFluctuationRange" method="POST">
                                    @csrf
                                    <input type="hidden" name="FilterVal" id="post_FilterVal">
                                    <input type="hidden" name="regionID" id="post_regionID">
                                    <input type="hidden" name="stateCode" id="post_stateCode">
                                    <input type="hidden" name="districtCode" id="post_districtCode">
                                    <input type="hidden" name="year_month" id="post_year_month">
                                    <input type="hidden" name="Basin" id="post_basinCode">
                                    <input type="hidden" name="SubBasin" id="post_subBasinCode">
                                    <input type="hidden" name="fdate" id="post_fdate">
                                    <input type="hidden" name="tdate" id="post_tdate">
                                    <input type="hidden" name="reporttype" id="post_reporttype">
                                    <input type="hidden" name="WellType" id="post_WellType">
                                    <input type="hidden" name="AqTap" id="post_AqTap">
                                    <input type="hidden" name="showper" id="post_showper">
                                    <input type="hidden" name="ProjectID" id="post_ProjectID">
                                    <button type="submit" class="btn btn-sm btn-primary text-white"
                                        name="Search">Download</button>
                                </form>
                            </div>
                        </div>
                    </div>

                </div>


            </div>
        </div>
        <div class="row card_data" style="display: none">
            <div class="col-sm-12">
                <!-- Zero config.table start -->
                <div class="card">
                    <div class="card-block">
                        <div class="table-responsive">
                            <table id="simpletable" class="table table-striped table-bordered nowrap">
                                <thead>
                                    {{-- <tr role="row">
                                        <th>District</th>
                                        <th>No of Wells</th>
                                        <th>No Wells Fall</th>
                                        <th>%Wells Fall</th>
                                        <th>Min Fall</th>
                                        <th>Max Fall</th>
                                        <th>Avg Fall</th>
                                        <th>0-2 m</th>
                                        <th>0-2 % Wells</th>
                                        <th>2-4 m</th>
                                        <th>2-4 % Wells</th>
                                        <th>4-8 m</th>
                                        <th>4-8 % Wells</th>
                                        <th>> 8 m</th>
                                        <th>> 8 % Wells</th>
                                        <th>No of Wells Rise</th>
                                        <th>%Wells Rise</th>
                                        <th>Min Rise</th>
                                        <th>Max Rise</th>
                                        <th>Avg Rise</th>
                                        <th>0-2 m1</th>
                                        <th>0-2 % Wells1</th>
                                        <th>2-4 m1</th>
                                        <th>2-4 % Wells1</th>
                                        <th>4-8 m1</th>
                                        <th>4-8 % Wells1</th>
                                        <th>> 8 m1</th>
                                        <th>> 8 % Wells1</th>
                                    </tr> --}}
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        {{-- <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">

                <div id="container1"></div>
            </div>

            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12">

                <div id="container2"></div>
            </div>
        </div>
        <div class="row">
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">

                <div id="container3"></div>
            </div>
        </div> --}}
    </div>

    <link rel="stylesheet" href="{{ asset('bower_components\data_table\dataTables.dataTables.css') }}">
    <link rel="stylesheet" href="{{ asset('bower_components\data_table\fixedColumns.dataTables.css') }}">
    <link rel="stylesheet" href="{{ asset('bower_components\data_table\buttons.dataTables.css') }}">
    <script src="{{ asset('bower_components\data_table\dataTables.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\dataTables.fixedColumns.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\fixedColumns.dataTables.js') }}"></script>

    {{-- <script src="{{ asset('bower_components\data_table\dataTables.buttons.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\buttons.dataTables.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\buttons.colVis.min.js') }}"></script> --}}

    {{-- <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-3d.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script> --}}
    <script>
        $(function() {

            @if ($user->RoleID == 2)
                $(".RegionFilter").css({
                    "pointer-events": "none",
                    "touch-action": "none",
                    "background": "#e9ecef"
                });

                $(".RegionFilter").trigger('change');
            @endif

            var data = {};
            var FirstFilter = "";
            var Basin = "";
            var SubBasin = "";
            var RegionID = "";
            var State = "";
            var Dist = "";
            var V1 = "";
            var V2 = "";
            var V3 = "";
            var V4 = "";
            var year_month = "";

            var fdate = "";
            var tdate = "";
            var reporttype = "";
            var Cond = "";

            $(".filter_btn").click(function() {
                /* var RegionID = $("#RegionID").val();
                var year_month = $('#year_month').val();

                if(year_month == ''){
                    bootbox.alert('Please select month/year');
                    return false;
                }

                if (RegionID == '') {
                    bootbox.alert('Please select region');
                    return false;
                } */
                $(".loaderpk").css("display", "block");
                getResults();
            });
            // getResults();


            $(".ord").click(function() {
                val = $(this).val();
                if (val == '1') {
                    $('.hydrological').hide();
                    $('.administrative').show();
                } else {
                    $('.administrative').hide();
                    $('.hydrological').show();
                }
            })

            $('#reportType').change(function() {
                curValue = $(this).val();
                if (curValue == 4) {
                    $('.date-range').show();
                } else {
                    $('.date-range').hide();
                }
            });


            $('.date-picker').datepicker({
                dateFormat: "mm-yy",
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                yearRange: "1969:" + new Date().getFullYear(), // Show years from 1969 to the current year
                maxDate: new Date(), // Restrict to the current date or earlier
                onClose: function(dateText, inst) {
                    setTimeout(function() {
                        inst.dpDiv.find('.ui-datepicker-calendar').hide();
                    }, 1);

                    function isDonePressed() {

                        return ($('#ui-datepicker-div').html().indexOf(
                            'ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover'
                        ) > -1);
                    }

                    if (isDonePressed()) {

                        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                        $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');

                        $('.date-picker')
                            .focusout() //Added to remove focus from datepicker input box on selecting date
                    }

                },
                beforeShow: function(input, inst) {

                    inst.dpDiv.addClass('month_year_datepicker')

                    if ((datestr = $(this).val()).length > 0) {
                        year = datestr.substring(datestr.length - 4, datestr.length);
                        month = datestr.substring(0, 2);
                        $(this).datepicker('option', 'defaultDate', new Date(year, month - 1, 1));
                        $(this).datepicker('setDate', new Date(year, month - 1, 1));
                        $(".ui-datepicker-calendar").hide();
                    }
                    setTimeout(function() {
                        inst.dpDiv.find('.ui-datepicker-calendar').hide();
                    }, 1);
                },
                onChangeMonthYear: function(year, month, inst) {
                    // Hide the calendar for the first datepicker when month/year is changed
                    setTimeout(function() {
                        inst.dpDiv.find('.ui-datepicker-calendar').hide();
                    }, 1);
                }
            });

            var today = new Date();
            $("#fromDate").datepicker({
                autoclose: true,
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                endDate: today,
                orientation: "bottom",
                yearRange: "1969:" + new Date().getFullYear(),
            });


            $("#toDate").datepicker({
                autoclose: true,
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                endDate: today,
                orientation: "bottom",
                yearRange: "1969:" + new Date().getFullYear(),
            });


        });

        function getResults() {

            data = {};
            FirstFilter = $('input[name="ord"]:checked').val();
            Basin = $('#BasinCode').val();
            SubBasin = $('#SubBasinCode').val();
            RegionID = $('#RegionID').val();
            State = $('#StateCode').val();
            Dist = $('#DistrictCode').val();
            V1 = "";
            V2 = "";
            V3 = "";
            V4 = "";
            year_month = $('#year_month').val();
            var WellType = $("#WellType").val();
            var AqTap = $("#AqTap").val();
            var showper = $("#showper").val();
            var ProjectID = $("#ProjectID").val();
            // Month = $('#month').val();



            fdate = $('#fromDate').val();
            tdate = $('#toDate').val();
            reporttype = $('#reportType').val();
            Cond = "";

            /* if(RegionID == ''){
                bootbox.alert('Please select region');
                return false;
            }

            if(State == ''){
                bootbox.alert('Please select state');
                return false;
            } */

            /* if(Dist == ''){
                bootbox.alert('Please select district');
                return false;
            } */

            if (year_month == '') {
                $(".loaderpk").css("display", "none");
                bootbox.alert('Please select year/month');
                return false;
            }

            if (FirstFilter == "1") {
                data = {
                    "FilterVal": FirstFilter,
                    "regionID": RegionID,
                    "stateCode": State,
                    "districtCode": Dist,
                    "year_month": year_month,
                    "fdate": fdate,
                    "tdate": tdate,
                    "reporttype": reporttype,
                    "WellType": WellType,
                    "AqTap": AqTap,
                    "showper": showper,
                    "ProjectID": ProjectID,
                    "_token": "{{ csrf_token() }}"
                };
            } else if (FirstFilter == "2") {
                data = {
                    "FilterVal": FirstFilter,
                    "regionID": RegionID,
                    "stateCode": State,
                    "Basin": Basin,
                    "SubBasin": SubBasin,
                    "year_month": year_month,
                    "fdate": fdate,
                    "tdate": tdate,
                    "reporttype": reporttype,
                    "WellType": WellType,
                    "AqTap": AqTap,
                    "showper": showper,
                    "ProjectID": ProjectID,
                    "_token": "{{ csrf_token() }}"
                };
            }

            $('#post_FilterVal').val(FirstFilter);
            $('#post_regionID').val(RegionID);
            $('#post_stateCode').val(State);
            $('#post_districtCode').val(Dist);
            $('#post_basinCode').val(Basin);
            $('#post_subBasinCode').val(SubBasin);
            $('#post_year_month').val(year_month);
            $('#post_fdate').val(fdate);
            $('#post_tdate').val(tdate);
            $('#post_reporttype').val(reporttype);
            $('#post_WellType').val(WellType);
            $('#post_AqTap').val(AqTap);
            $('#post_showper').val(showper);
            $('#post_ProjectID').val(ProjectID);
            // var columns = [];
            // $.get("{{ route('RPT_NoOfWellsInDifferentFluctuationRange') }}", data, function(result){
            //     obj = jQuery.parseJSON(result);
            //     // console.log(obj.data[0]);

            //     columnNames = Object.keys(obj.data[0]);
            //     $.each(columnNames, function(key, item ) {
            //         columns.push({
            //             data: item,
            //             title: item
            //         });
            //     });



            //     $('#simpletable').DataTable({
            //         "bDestroy": true,
            //         "data": obj.data,
            //         "columns": columns
            //     });

            // })

            var columns = [];

            $.ajax({
                url: "{{ route('RPT_NoOfWellsInDifferentFluctuationRange') }}",
                method: 'POST',
                "data": data,
                success: function(response) {
                    $(".card_data").show();
                    var jsonObject = $.parseJSON(response);
                    var keysorder = jsonObject.keysorder;
                    // Initialize DataTable with server-side processing

                    $.each(jsonObject.keysorder, function(key, item) {
                        columns.push({
                            data: item,
                            title: item
                        });
                    });

                    // Destroy the existing DataTable if it exists
                    if ($.fn.DataTable.isDataTable('#simpletable')) {
                        $('#simpletable').DataTable().clear().destroy();
                    }

                    $('#simpletable').find('thead').remove();
                    $('#simpletable').append('<thead><tr id="table-header"></tr></thead>');


                    columns.forEach(function(column) {
                        $('#table-header').append('<th>' + column.title + '</th>');
                    });


                    var table = $('#simpletable').DataTable({
                        "processing": false,
                        retrieve: true,
                        /*
                        "language": {
                            'processing': '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading..n.</span>'
                        },*/
                        "serverSide": true,
                        "bFilter": true,
                        "bLengthChange": true,
                        "searching": true,
                        "ordering": true,
                        "iDisplayLength": 10,
                        "responsive": true,
                        "bDestroy": true,
                        "scrollX": true,
                        "fixedColumns": {
                            "leftColumns": 2
                        },
                        "ajax": {
                            "url": "{{ route('RPT_NoOfWellsInDifferentFluctuationRange') }}",
                            "type": "POST",
                            "data": data,
                            "dataType": "json",
                            beforeSend: function() {
                                $(".loaderpk").css("display", "block");
                            },
                            complete: function() {
                                $(".loaderpk").css("display", "none");
                            },
                            "dataSrc": function(jsonData) {
                                // alert(JSON.Stringify(jsonData.data));

                                return jsonData.data;
                            }
                        },
                        "columns": columns,
                        "columnDefs": [
                            {
                                "targets": [1,2,3,4,5, 6,7,8,9,10,11,12,13,14,15,16,17],
                                "className": "text-right"
                            }
                        ]
                    });

                }
            });

            //NoOfWellsColumnchart();
            //NoOfWellsDoughnutcharts();
            //NoOfWellsStackedColumns();
        }

        function NoOfWellsColumnchart() {

            $.ajax({
                url: '/RPT_NoOfWellsInDifferentFluctuationRange/NoOfWellsColumnchart',
                type: 'Get',
                // data: { FilterVal: FirstFilter, Cond: Cond, state: State, district: Dist, V1: V1, V2: V2, V3: v3, v4: v4, FromDate: dtfrm, ToDate: dtto},
                data: {
                    FilterVal: FirstFilter,
                    Cond: Cond,
                    state: State,
                    district: Dist,
                    V1: V1,
                    V2: V2,
                    V3: V3,
                    V4: V4,
                    FromDate: fdate,
                    ToDate: tdate,
                    year_month: year_month,
                    reporttype: reporttype
                },
                contenttype: "application/x-www-form-urlencoded",
                datatype: "html",
                success: function(result) {
                    result = jQuery.parseJSON(result);
                    // Build the chart
                    // alert(result.xAxis);
                    Highcharts.chart('container1', {
                        chart: {
                            type: 'column',
                            scrollablePlotArea: {
                                minWidth: 700,
                                scrollPositionX: 1
                            }
                        },
                        title: {
                            text: 'Depth to ground water level by % (Fall and Rise)'
                        },

                        xAxis: {
                            categories: result.xAxis,
                            crosshair: true
                        },
                        yAxis: {
                            min: 0,
                            title: {
                                text: '% of well'
                            },
                            labels: {
                                overflow: 'justify'
                            }
                        },
                        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} mm</b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                pointPadding: 0.2,
                                borderWidth: 0
                            }
                        },
                        series: result.Data
                    });

                    RemoveHighchartsCredits();
                }
            });
            //$.get("/RPT_DepthToWL_percentage_inDiffDeptRange/DepthToWLColumnchart" , function (result) {



            function RemoveHighchartsCredits() {
                const elements = document.getElementsByClassName('highcharts-credits');
                elements[0].remove()
            }
            //});
        }

        function NoOfWellsDoughnutcharts() {
            // debugger;
            $.ajax({
                url: '/RPT_NoOfWellsInDifferentFluctuationRange/NoOfWellsDoughnutchart',
                type: 'Get',
                // data: { FilterVal: FirstFilter, Cond: Cond, state: State, district: Dist, V1: V1, V2: V2, V3: v3, v4: v4, FromDate: dtfrm, ToDate: dtto},
                data: {
                    FilterVal: FirstFilter,
                    Cond: Cond,
                    state: State,
                    district: Dist,
                    V1: V1,
                    V2: V2,
                    V3: V3,
                    V4: V4,
                    FromDate: fdate,
                    ToDate: tdate,
                    year_month: year_month,
                    reporttype: reporttype
                },
                contenttype: "application/x-www-form-urlencoded",
                datatype: "html",
                success: function(result) {

                    result = jQuery.parseJSON(result);
                    var plots = [];
                    for (var item in result.Data[0].data) {
                        // debugger
                        plots.push([result.Data[0].data[item].Key, result.Data[0].data[item].Value]);
                    }
                    console.log(plots);
                    console.log(result.Data);
                    Highcharts.chart('container2', {
                        chart: {
                            type: 'pie',
                            options3d: {
                                enabled: true,
                                alpha: 45
                            }
                        },
                        title: {
                            text: 'Depth to ground water level by % (Fall and Rise)'
                        },

                        plotOptions: {
                            pie: {
                                innerSize: 100,
                                depth: 45
                            },
                            showInLegend: true
                        },
                        series: [{
                            name: result.Data[0].name,
                            data: plots
                        }]
                    });
                    RemoveHighchartsCredits();
                }
            });

            function RemoveHighchartsCredits() {
                const elements = document.getElementsByClassName('highcharts-credits');
                elements[0].remove()
            }
        }

        function NoOfWellsStackedColumns() {
            $.ajax({
                url: '/RPT_NoOfWellsInDifferentFluctuationRange/NoOfWellsStackedColumn',
                type: 'Get',
                // data: { FilterVal: FirstFilter, Cond: Cond, state: State, district: Dist, V1: V1, V2: V2, V3: v3, v4: v4, FromDate: dtfrm, ToDate: dtto},
                data: {
                    FilterVal: FirstFilter,
                    Cond: Cond,
                    state: State,
                    district: Dist,
                    V1: V1,
                    V2: V2,
                    V3: V3,
                    V4: V4,
                    FromDate: fdate,
                    ToDate: tdate,
                    year_month: year_month,
                    reporttype: reporttype
                },
                contenttype: "application/x-www-form-urlencoded",
                datatype: "html",
                success: function(result) {
                    result = jQuery.parseJSON(result);
                    Highcharts.chart('container3', {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: 'Depth to Water Level in District by Percentage'
                        },
                        xAxis: [{
                            categories: result.xAxis,
                            crosshair: true
                        }],
                        yAxis: {
                            min: 0,
                            title: {
                                text: ''
                            },
                            stackLabels: {
                                enabled: true,
                                style: {
                                    fontWeight: 'bold',
                                    color: ( // theme
                                        Highcharts.defaultOptions.title.style &&
                                        Highcharts.defaultOptions.title.style.color
                                    ) || 'gray',
                                    textOutline: 'none'
                                }
                            }
                        },
                        legend: {
                            align: 'center',
                            x: 0,
                            verticalAlign: 'bottom',
                            y: 0,
                            floating: false,
                            backgroundColor: Highcharts.defaultOptions.legend.backgroundColor ||
                                'white',
                            borderColor: '#CCC',
                            borderWidth: 1,
                            shadow: false
                        },
                        tooltip: {
                            headerFormat: '<b>{point.x}</b><br/>',
                            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
                        },
                        plotOptions: {
                            column: {
                                stacking: 'normal',
                                dataLabels: {
                                    enabled: false
                                }
                            }
                        },
                        series: result.Data
                    });
                    RemoveHighchartsCredits();
                }
            });

            function RemoveHighchartsCredits() {
                const elements = document.getElementsByClassName('highcharts-credits');
                elements[0].remove()
            }
        }
    </script>
@endsection