@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>Normal And Actual Cumulative Rainfall</h4>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- Page-header end -->
    @php $user = Auth::user(); @endphp
    <!-- Page-body start -->
    <div class="page-body">
        <div class="card">
            <div class="card-block">

                <div class="row">
                    <div class="col-md-2 mb-0 administrative">
                        <label for="validationCustom02">State<span class="red">*</span></label>
                        <select class="form-control StateCodeFilter" name="stateCode" id="stateCode">
                            <option value="">--Select--</option>
                            @foreach ($states as $state)
                                <option value="{{ $state->StateCode }}">{{ $state->StateName }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-0 administrative">
                        <label for="validationCustom02">District</label>
                        <select class="form-control district_id" name="DistrictCode" id="DistrictCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>


                    <div class="col-md-2 mb-0 ">
                        <label for="exampleSelect1">Year</label>
                        <select id="year" class="form-control">
                            @for ($year = date('Y'); $year >= 2007; $year--)
                                <option value="{{ $year }}">{{ $year }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-md-2 mb-0 ">
                        <label for="exampleSelect1">Month </label>
                        <select id="month" class="form-control">
                            <option value="0">--All--</option>
                            <option value="1">Jan</option>
                            <option value="2">Feb</option>
                            <option value="3">Mar</option>
                            <option value="4">Apr</option>
                            <option value="5">May</option>
                            <option value="6">Jun</option>
                            <option value="7">Jul</option>
                            <option value="8">Aug</option>
                            <option value="9">Sep</option>
                            <option value="10">Oct</option>
                            <option value="11">Nov</option>
                            <option value="12">Dec</option>
                        </select>
                    </div>


                    <div class="col-md-2 mt-4 ">
                        <input type="bttton" class="btn btn-primary text-white filter" name="Search" value="Filter">

                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <!-- Zero config.table start -->
                <div class="card">
                    <div class="card-block">
                        <div id="container"></div>
                    </div>
                </div>

            </div>
            <div class="col-sm-12">
                <!-- Zero config.table start -->
                <div class="card">
                    <div class="card-block">

                        <div class="">
                            @include('common.error')
                            <table id="simpletable" class="table table-striped table-bordered nowrap">
                                <thead>

                                    <tr role="row">
                                        <th>SNo</th>
                                        <th>District</th>
                                        <th>Mandal</th>
                                        <th>Normal(mm)</th>
                                        <th>Actual(mm)</th>
                                        <th>DecadalDiff</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>

                            </table>
                        </div>
                    </div>
                </div>

            </div>

        </div>


    </div>

    <script src="{{ asset('bower_components\datatables.net\js\jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('bower_components\datatables.net-buttons\js\dataTables.buttons.min.js') }}"></script>
    <script src="{{ asset('bower_components\datatables.net-bs4\js\dataTables.bootstrap4.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"});
            @endif

            $(".filter").click(function() {
                var stateCode = $("#stateCode").val();
                var DistrictCode = $("#DistrictCode").val();

                if (stateCode == '') {
                    bootbox.alert('Please select state');
                }

                else if(stateCode != ''){
                    getResults();
                }
            });

        });

        function getResults() {

            data = {};

            State = $('#stateCode').val();
            Dist = $('#DistrictCode').val();

            Year = $('#year').val();
            Month = $('#month').val();
            // $('#col-mandal').show();
            // if(Dist != '')
            // {
            //     $('#col-mandal').hide();
            // }


            var data = {
                state: State,
                district: Dist,
                year: Year,
                month: Month
            };

            var table = $('#simpletable').DataTable({
                "processing": false,
                "serverSide": false, //Feature control DataTables' servermside processing mode.
                "bFilter": true,
                "bLengthChange": false,
                "ordering": false,
                "iDisplayLength": 25,
                "responsive": true,
                "bDestroy": true,
                "ajax": {
                    "url": "{{ route('NormalandActualCumulativeRainfall') }}",
                    "type": "GET",
                    "data": data,
                    "dataType": "json",
                    "dataSrc": function(jsonData) {
                        // $('#geowisereport').show();  
                        result = jQuery.parseJSON(jsonData.chart)
                        Highcharts.chart('container', {
                            chart: {
                                zoomType: 'xy'
                            },
                            colors: ['#42d2f5', '#4679f6', '#1fca40', '#f1a649', '#c13018', '#f36f13'],
                            title: {
                                text: 'Normal and Actual Rainfall',
                                align: 'left'
                            },
                            //subtitle: {
                            //    text: 'Source: WorldClimate.com',
                            //    align: 'left'
                            //},
                            xAxis: [{
                                categories: result.xAxis,
                                crosshair: true
                            }],
                            yAxis: [{ // Primary yAxis
                                labels: {
                                    format: '{value}',
                                    style: {
                                        color: Highcharts.getOptions().colors[2]
                                    }
                                },
                                title: {
                                    text: '% Deviation',
                                    style: {
                                        color: Highcharts.getOptions().colors[2]
                                    }
                                },
                                opposite: true

                            }, { // Secondary yAxis
                                gridLineWidth: 0,
                                title: {
                                    text: 'Rainfall (mm)',
                                    style: {
                                        color: Highcharts.getOptions().colors[0]
                                    }
                                },
                                labels: {
                                    format: '{value} mm',
                                    style: {
                                        color: Highcharts.getOptions().colors[0]
                                    }
                                }

                            }],
                            tooltip: {
                                shared: true
                            },
                            legend: {
                                layout: 'horizontal',
                                align: 'center',
                                x: 0,
                                verticalAlign: 'bottom',
                                y: 0,
                                //floating: true,
                                backgroundColor: Highcharts.defaultOptions.legend.backgroundColor ||
                                    // theme
                                    'rgba(255,255,255,0.25)'


                                //align: 'center',
                                //verticalAlign: 'bottom',
                                //x: 0,
                                //y: 0
                            },
                            series: result.Data,
                            responsive: {
                                rules: [{
                                    condition: {
                                        maxWidth: 500
                                    },
                                    chartOptions: {
                                        legend: {
                                            floating: false,
                                            layout: 'horizontal',
                                            align: 'center',
                                            verticalAlign: 'bottom',
                                            x: 0,
                                            y: 0
                                        },
                                        yAxis: [{
                                            labels: {
                                                align: 'right',
                                                x: 0,
                                                y: -6
                                            },
                                            showLastLabel: false
                                        }, {
                                            labels: {
                                                align: 'left',
                                                x: 0,
                                                y: -6
                                            },
                                            showLastLabel: false
                                        }, {
                                            visible: false
                                        }]
                                    }
                                }]
                            }
                        });
                        RemoveHighchartsCredits();
                        return jsonData.data;
                    }
                }
            });

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

            // var data = { state: State, district: Dist, year: Year, month: Month, reporttype: 'chart' }; 

            // $.ajax({
            //     url: "{{ route('GeologyWiseWaterLevel') }}",
            //     type: 'Get',
            //     data: data,
            //     contenttype: "application/x-www-form-urlencoded", datatype: "html",
            //     success: function (result) {
            //         result = jQuery.parseJSON(result);
            //         Highcharts.chart('container', {

            //             title: {
            //                 text: 'Formation wise minimum, maximum and average groundwater level',
            //                 font: '10px'
            //             },
            //             //subtitle: {
            //             //    text: 'According to geology'
            //             //},
            //             xAxis: {
            //                 categories: result.xAxis,
            //                 crosshair: true
            //             },
            //             yAxis: {
            //                 title: {

            //                     text: 'Depth to water level in'
            //                 }
            //             },

            //             legend: {
            //                 layout: 'vertical',
            //                 align: 'right',
            //                 verticalAlign: 'middle'
            //             },

            //             plotOptions: {

            //                 column: {
            //                     pointPadding: 0.2,
            //                     borderWidth: 0
            //                 }
            //             },

            //             series: result.Data,

            //             responsive: {
            //                 rules: [{
            //                     condition: {
            //                         maxWidth: 500
            //                     },
            //                     chartOptions: {
            //                         legend: {
            //                             layout: 'horizontal',
            //                             align: 'center',
            //                             verticalAlign: 'bottom'
            //                         }
            //                     }
            //                 }]
            //             }

            //         });

            //     }
            // });


        }

        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: Year,
                    month: 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: Year,
                    month: 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: Year,
                    month: 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