@extends('layouts.app')

@section('content')
<style>
    .ui-datepicker-calendar {
    display: none;
    }
</style>
    <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 comparison with WQ</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-2 mb-3">
                        <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 class="col-md-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-2 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 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-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-2 mb-3 ">
                        <label for="exampleSelect1">Date1<span class="red">*</span> </label>
                        <input id="date1" name="date1" type="text" class="form-control date-picker" autocomplete="off">
                    </div>

                    <div class="col-md-2 mb-3 ">
                        <label for="exampleSelect1">Date2<span class="red">*</span> </label>
                        <input id="date2" name="date2" type="text" class="form-control date-picker" autocomplete="off">
                    </div>

                    <div class="col-md-2 mb-3 ">
                        <label for="exampleSelect1">Date3<span class="red">*</span> </label>
                        <input id="date3" name="date3" type="text" class="form-control date-picker" autocomplete="off">
                    </div>

                    <div class="col-md-2 mb-3 ">
                        <label for="exampleSelect1">Date4<span class="red">*</span> </label>
                        <input id="date4" name="date4" type="text" class="form-control date-picker" autocomplete="off">
                    </div>

                    <div class="col-md-2 ">
                        <label for="validationCustom02">Water Quality<span class="red">*</span></label>
                        <select class="form-control" name="water_quality" id="water_quality">
                            <option value="">--Select--</option>
                            @foreach($WQ_cont_lists as $WQ_cont_list)
                            <option value="{{ $WQ_cont_list }}">{{ $WQ_cont_list }}</option>

                            @endforeach
                        </select>
                    </div>

                    <div class="col-md-4 mt-4 ">
                            <button type="bttton" class="btn btn-primary text-white filter" name="Search">Filter  </button>
                                
                    </div>
                </div>
            </div>
        </div> 
        <div class="row">
            <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>
                                        <th>District</th>
                                        <th>Mandal</th>
                                        <th>Village</th>
                                        <th>RF Normal</th>
                                        <th>RF Actual</th>
                                        <th>RF Deviation</th>
                                        <th>Decadal</th>
                                        <th>Annual Jan 2019</th>
                                        <th>Seasonal May 2019</th>
                                        <th>Actual Jan 2020</th>
                                        <th>Decadal Diff</th>
                                        <th>Annual Diff</th>
                                        <th>Seasonal Diff</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>


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

            $(".filter").click(function() {
                var stateCode = $("#StateCode").val();
                var RegionID = $("#RegionID").val();
                var date1 = $("#date1").val();
                var date2 = $("#date2").val();
                var date3 = $("#date3").val();
                var date4 = $("#date4").val();
                var water_quality = $("#water_quality").val();

                if(RegionID == ''){
                    bootbox.alert('Please select reason');
                }else if (stateCode == '') {
                    bootbox.alert('Please select state');
                }else if (date1 == '') {
                    bootbox.alert('Please select date1');
                }else if (date2 == '') {
                    bootbox.alert('Please select date2');
                }else if (date3 == '') {
                    bootbox.alert('Please select date3');
                }else if (date4 == '') {
                    bootbox.alert('Please select date4');
                }else if (water_quality == '') {
                    bootbox.alert('Please select water quality');
                }else if(stateCode != ''){
                    getResults();
                } 
            });

            $('.date-picker').datepicker({
                dateFormat: "mm/yy",
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                yearRange: "1969:" + new Date().getFullYear(),
                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();
                    }
                }
            });

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

           
            
        });

        

        function getResults()
        {

            var data = {};
            var FirstFilter = $('input[name="ord"]:checked').val();
            var Basin = $('#basin').val();
            var SubBasin = $('#subBasin').val();
            var RegionID = $("#RegionID").val();
            var State = $('#StateCode').val();
            var Dist = $('#DistrictCode').val();
            var date1 = $("#date1").val();
            var date2 = $("#date2").val();
            var date3 = $("#date3").val();
            var date4 = $("#date4").val();
            var water_quality = $("#water_quality").val();
        
            if (FirstFilter == "1") {
                data =  {"FilterVal": FirstFilter,"RegionID":RegionID, "state": State, "district": Dist, "date1": date1, "date2": date2,"date3": date3,"date4": date4,"water_quality":water_quality};
            }
            else if (FirstFilter == "2") {
                data =  {"FilterVal": FirstFilter,"RegionID":RegionID, "state": Basin, "district": SubBasin, "date1": date1, "date2": date2,"date3": date3,"date4": date4,"water_quality":water_quality};
            }
            

            var columns = [];

            $.ajax({
                url: "{{ route('RPt_WL_Comparision_DecadalAnnualSeasonal') }}",
                method: 'GET',
                "data" : data,
                success: function(response) {
                    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
                        });
                    });

                    var table = $('#simpletable').DataTable({
                        "bDestroy": true,
                        "destroy": true,
                        "data": jsonObject.data,
                        "columns": columns
                    });
                    
                }
            });

            
            
        }
    </script>
@endsection