@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 comparison with WQ</h4>
                    </div>
                </div>
            </div>
           
        </div>
    </div>
    <!-- Page-header end -->

    <!-- 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 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 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<span class="red">*</span></label>
                        <select class="form-control" name="basin" id="basin">
                            @foreach ($states as $state)
                                <option value="{{ $state->StateCode }}">{{ $state->StateName }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 hydrological" style="display:none">
                        <label for="validationCustom02">Sub Basin<span class="red">*</span></label>
                        <select class="form-control subbasin" name="subBasin" id="subBasin" >
                        <option value="">--Select--</option>
                        </select>
                    </div>
                    <div class="col-md-2 ">
                        <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 ">
                        <label class="col-md-12" for="exampleSelect1">Month </label>
                        <select id="month" class="form-control">
                            <option value="">--Select--</option>
                            @for($month=1; $month < 13; $month++)  
                                <option value="1" @if(date('m') == $month) selected="selected" @endif>{{ date("M", mktime(0, 0, 0, $month, 1)) }}</option>
                            @endfor
                        </select>
                    </div>
                     
                    <div class="col-md-4 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 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(){            

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

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

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


            $(".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 State = $('#stateCode').val();
            var Dist = $('#DistrictCode').val();
            var Year = $('#year').val();
            var Month = $('#month').val();
        
            if (FirstFilter == "1") {
                data =  {"FilterVal": FirstFilter, "state": State, "district": Dist, "year": Year, "month": Month};
            }
            else if (FirstFilter == "2") {
                data =  {"FilterVal": FirstFilter, "state": Basin, "district": SubBasin, "year": Year, "month": Month};
            }
            

            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
                        });
                    });

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

            
            
        }
    </script>
@endsection