@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>Water Level Yearly</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-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-2">
                        <label for="validationCustom02">State</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">
                        <label for="validationCustom02">From Year<span class="red">*</span></label>
                        <select class="form-control" name="fromYear" id="fromYear">

                            @for ($year = date('Y'); $year >= 2007; $year--)
                                <option value="{{ $year }}">{{ $year }}</option>
                            @endfor
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label for="validationCustom02">To Year<span class="red">*</span></label>
                        <select class="form-control" name="toYear" id="toYear">
                            @for ($year = date('Y'); $year >= 2007; $year--)
                                <option value="{{ $year }}">{{ $year }}</option>
                            @endfor
                        </select>
                    </div>

                    <div class="col-md-6 col-lg-2">
                        <div class="form-group">
                            <label for="validationCustom02">Well Type</label>
                            <select class="form-control WellType" name="WellType" id="WellType">
                                <option value="">--Select--</option>
                                @foreach ($well_type_list as $row)                                
                                <option value="{{ $row->combo_value }}">{{ $row->combo_text }}</option>
                                @endforeach
                            </select>
                        </div> 
                    </div> 
    
    
                    <div class="col-md-6 col-lg-2">
                        <div class="form-group">
                            <label for="validationCustom02">Aquifer</label>
                            <select class="form-control AqTap" name="AqTap" id="AqTap">
                                <option value="">--Select--</option>
                                @foreach ($AqTap_list as $row)                                
                                <option value="{{ $row->combo_value }}">{{ $row->combo_text }}</option>
                                @endforeach
                            </select>
                        </div> 
                    </div> 

                    <div class="col-md-2 col-lg-2">
                        <div class="form-group">
                            <label class="visibility-hidden">Filter</label>
                            <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">
            <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>
                                        <th>District</th>
                                        <th>Block</th>
                                        <th>Village</th>
                                        <th>Basin</th>
                                        <th>SubBasin</th>
                                        <th>WellNo</th>
                                        <th>Year</th>
                                        <th>Jan</th>
                                        <th>Feb</th>
                                        <th>Mar</th>
                                        <th>Apr</th>
                                        <th>May</th>
                                        <th>Jun</th>
                                        <th>Jul</th>
                                        <th>Aug</th>
                                        <th>Sep</th>
                                        <th>Oct</th>
                                        <th>Nov</th>
                                        <th>Dec</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> --}}

    <link rel="stylesheet" href="{{ asset('bower_components\data_table\dataTables.dataTables.css') }}" >
    <link rel="stylesheet" href="{{ asset('bower_components\data_table\fixedColumns.dataTables.css') }}" >
    <link rel="stylesheet" href="{{ asset('bower_components\data_table\buttons.dataTables.css') }}" >
    <script src="{{ asset('bower_components\data_table\dataTables.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\dataTables.fixedColumns.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\fixedColumns.dataTables.js') }}"></script>

    <script src="{{ asset('bower_components\data_table\dataTables.buttons.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\buttons.dataTables.js') }}"></script>
    <script src="{{ asset('bower_components\data_table\buttons.colVis.min.js') }}"></script>

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

            function getResults() {
                $('.card_data').show();
                if ($.fn.DataTable.isDataTable('#simpletable')) {
                    $('#simpletable').DataTable().destroy();
                }

                var data = {};
                ord = $('.ord:checked').val();
                // alert(ord);

                var regionID = $("#RegionID").val();
                var stateCode = $("#StateCode").val();
                var districtCode = $("#DistrictCode").val();
                var basin = $("#BasinCode").val();
                var subBasin = $("#SubBasinCode").val();
                var fromYear = $("#fromYear").val();
                var toYear = $("#toYear").val();
                var WellType = $("#WellType").val();
                var AqTap = $("#AqTap").val();

                if(ord == 1){
                    data ={"ord": ord, "regionID": regionID, "stateCode": stateCode, "districtCode": districtCode,  "fromYear": fromYear, "toYear": toYear ,"WellType":WellType, "AqTap":AqTap };
                }else if(ord == 2){
                    data ={"ord": ord, "regionID": regionID, "stateCode": stateCode, "districtCode": districtCode, "basinCode": basin, "subBasinCode": subBasin, "fromYear": fromYear, "toYear": toYear ,"WellType":WellType, "AqTap":AqTap };
                }

                console.log(data);
                var table = $('#simpletable').DataTable({
                    "processing": true, // for show progress bar,
                    retrieve: true,
                    "language": {
                        'processing': '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading..n.</span>'
                    },
                    "serverSide": true,
                    "bFilter": true,
                    "bLengthChange": true,
                    "ordering": false,
                    "iDisplayLength": 25,
                    "bDestroy": true,
                    "responsive": true,
                    "scrollX": true,
                    "fixedColumns": {"leftColumns": 7},
                    // "dom": 'Bfrtip',
                    // "buttons": [{"extend": 'colvis'}],
                    
                    "ajax": {
                        "url": "{{ route('RPT_WaterLevelWellWiseYearly') }}",
                        "type": "GET",
                        "data": data,
                        "dataType": "json",                        
                        "dataSrc": function(jsonData) {
                            console.log(jsonData);
                            // alert(JSON.Stringify(jsonData.data));
                            return jsonData.data;
                        }
                    }
                });
                }

            $(".filter_btn").click(function() {
                var RegionID = $("#RegionID").val();
                var stateCode = $("#StateCode").val();
                var DistrictCode = $("#DistrictCode").val();

                if (RegionID == '') {
                    bootbox.alert('Please select Region');
                    return false;
                }

                getResults();
            });


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


        });


        
        $( window ).on("load", function() {
            $('.card_data').hide();
        });

        
    </script>
@endsection