@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-9 mb-3">
                        <div class="row">

                            <div class="col-md-6 col-lg-2">
                                <div class="form-group">
                                    <label for="validationCustom02">Region<span class="red">*</span></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<span class="red">*</span></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>
                                <input id="year_month" name="year_month" type="text" class="form-control date-picker" autocomplete="off">
                            </div>

                            {{-- <div class="col-md-6 col-lg-2 ">
                                <label for="exampleSelect1">Year<span class="red">*</span></label>
                                <select id="year" class="form-control">
                                    @for ($year = date('Y'); $year >= 2007; $year--)
                                        <option value="{{ $year }}" @if (date('Y') == $year) selected="selected" @endif>{{ $year }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-md-6 col-lg-2 ">
                                <label for="exampleSelect1">Month<span class="red">*</span></label>
                                <select id="month" class="form-control">
                                    @for($i=1; $i <13; $i++)
                                        <option value="{{ $i }}" @if (date('m') == $i) selected="selected" @endif>{{ date('M', mktime(0, 0, 0, $i, 10)) }}</option>
                                    @endfor
                                </select>
                            </div> --}}
                            {{-- <div class="col-md-12 mb-2 "></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-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>

                    </div>


                    <div class="col-md-6 col-lg-2 mt-4 ">
                        <div class="form-group">
                            <div>
                            <button type="bttton" class="btn btn-sm btn-primary text-white filter_btn" name="Search">Filter</button> </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>

    <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"});
                $(".RegionFilter").trigger('change');
            @endif

            var data = {};
            var FirstFilter = "";
            var Basin = "";
            var SubBasin = "";
            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 StateCode = $("#StateCode").val();

                if (RegionID == '') {
                    bootbox.alert('Please select region');
                    return false;
                }else if(StateCode == ''){
                    bootbox.alert('Please select state');
                    return false;
                }

                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,
                onClose: function(dateText, inst) {
                    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();
                    }
                }
            });

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


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


        });

        function getResults() {

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

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

            if (FirstFilter == "1") {
                data = {"FilterVal": FirstFilter,"state": State,"district": Dist,"year_month": year_month,"fdate": fdate,"tdate": tdate,"reporttype": reporttype,};


            } else if (FirstFilter == "2") {
                data = {"FilterVal": FirstFilter,"state": State,"Basin": Basin,"Basin": Basin,"year_month": year_month,"fdate": fdate,
                    "tdate": tdate,"reporttype": reporttype,};
            }
            // 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 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('RPT_NoOfWellsInDifferentFluctuationRange') }}",
                    "type": "GET",
                    "data": data,
                    "dataType": "json",
                    "dataSrc": function(jsonData) {
                        // alert(JSON.Stringify(jsonData.data));

                        return jsonData.data;
                    }
                }
            });

            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