@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">
                            @php
                            for($year=date('Y'); $year>=2007; $year--)
                            {
                            @endphp
                            <option value="{{$year}}">{{$year}}</option>
                            @php
                            }
                            @endphp
                        </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>
                            <option value="1" @if(date('m') == 1) selected="selected" @endif>Jan</option>
                            <option value="2" @if(date('m') == 2) selected="selected" @endif>Feb</option>
                            <option value="3" @if(date('m') == 3) selected="selected" @endif>Mar</option>
                            <option value="4" @if(date('m') == 4) selected="selected" @endif>Apr</option>
                            <option value="5" @if(date('m') == 5) selected="selected" @endif>May</option>
                            <option value="6" @if(date('m') == 6) selected="selected" @endif>Jun</option>
                            <option value="7" @if(date('m') == 7) selected="selected" @endif>Jul</option>
                            <option value="8" @if(date('m') == 8) selected="selected" @endif>Aug</option>
                            <option value="9" @if(date('m') == 9) selected="selected" @endif>Sep</option>
                            <option value="10" @if(date('m') == 10) selected="selected" @endif>Oct</option>
                            <option value="11" @if(date('m') == 11) selected="selected" @endif>Nov</option>
                            <option value="12" @if(date('m') == 12) selected="selected" @endif>Dec</option>
                        </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>WellNo</th>
                                        <th>Geology</th>
                                        <th>Well_Type</th>
                                        <th>Latitude</th>
                                        <th>Longitude</th>
                                        <th>RL</th>
                                        <th>Well_Depth</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 table = $('#simpletable').DataTable({
                "processing":false,
                "serverSide": false, //Feature control DataTables' servermside processing mode.
                "bFilter" : true,
                "bLengthChange": false,
                "ordering"  : false,
                "iDisplayLength" : 25,
                "responsive"  :true,
                "destroy": true,
                "ajax": {
                    "url": "{{ route('RPt_WL_Comparision_DecadalAnnualSeasonal') }}",
                    "type": "GET",
                    "data" : data,
                    "dataType": "json",
                    "dataSrc": function (jsonData) {
                        // alert(JSON.Stringify(jsonData.data));
                        return jsonData.data;
                    }
                }
            });
        }
    </script>
@endsection