@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>Average Comparision Report</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 mb-3">
                    <label for="validationCustom02">State<span class="red">*</span></label>
                    <select class="form-control StateCodeFilter" name="StateCode" id="StateCode"
                        onchange="showSeason(this.value)">
                        <option value="">--Select--</option>
                    </select>
                </div>
                <div class="col-md-2 mb-3 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 mb-3 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 mb-3 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">Filter Type<span class="red">*</span></label>
                    <select id="FilterType" class="form-control">
                        <option value="1">Season</option>
                        <option value="2">Month</option>
                    </select>
                </div>

                <div class="col-md-2 mb-3 type" id="type1">
                    <label for="exampleSelect1">Season<span class="red">*</span></label>
                    <select id="season" class="form-control">
                        <option value="">--select--</option>
                        @foreach ($season_list as $row)
                        <option value="{{ $row->combo_value }}">{{ $row->combo_text }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2 mb-3 type" id="type2" style="display:none">
                    <label for="exampleSelect1">Month<span class="red">*</span></label>
                    <select id="month" class="form-control" required="">
                        <option value="">-- Select --</option>
                        <option value="1">Jan</option>
                        <option value="5">May</option>
                        <option value="8">Aug</option>
                        <option value="11">Nov</option>
                    </select>
                </div>

                <div class="col-md-2 mb-3">
                    <label for="exampleSelect1">Year From<span class="red">*</span></label>
                    <select id="from_year" class="form-control" required="">
                        @for ($i = date('Y'); $i >= 1969 ; $i--)
                        <option value="{{ $i }}">{{ $i }}</option>
                        @endfor
                    </select>
                </div>

                <div class="col-md-2 mb-3">
                    <label for="exampleSelect1">Year To<span class="red">*</span></label>
                    <select id="to_year" class="form-control" required="">
                        @for ($i = date('Y'); $i >= 1969 ; $i--)
                        <option value="{{ $i }}">{{ $i }}</option>
                        @endfor
                    </select>
                </div>

                <div class="col-md-2 mt-4 ">
                    <div class="form-group">
                        <div class="d-flex">
                            <button type="bttton" class="btn btn-sm btn-primary text-white filter_btn mr-2"
                                name="Search">Filter</button>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
    <div class="row" id="geowisereport" 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>WellNo</th>
                                    <th>State</th>
                                    <th>District</th>
                                    <th>Block</th>
                                    <th>year</th>
                                    <th>DWLR</th>
                                    <th>Manual</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>

    </div>

</div>
<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 () {

        $("#season").css({ "pointer-events": "none", "touch-action": "none", "background": "#e9ecef" });

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


        $('#FilterType').change(function(){
             var objVal = $(this).val();
             /* if(objVal == 1){
                $("").show();
                $("").hide();
             }
             if(objVal == 2){
                $("").show();
                $("").hide();
             } */
             $(".type").hide();
             $('#type'+objVal).show();
         })

        function getResults() {

            var data = {};
            var ord = $('.ord:checked').val();
            var regionID = $("#RegionID").val();
            var stateCode = $('#StateCode').val();
            var districtCode = $('#DistrictCode').val();
            var basin = $("#BasinCode").val();
            var subBasin = $("#SubBasinCode").val();
            var from_year = $('#from_year').val();
            var to_year = $('#to_year').val();
            var type = $('#FilterType').val();
            var season = $('#season').val();
            var month = $('#month').val();

            if (ord == 1) {
                data = { "ord": ord, "regionID": regionID, "stateCode": stateCode, "districtCode": districtCode, "from_year": from_year, "to_year": to_year, "filter_type": type, "season": season, "month": month,"_token": "{{ csrf_token() }}" };
            } else if (ord == 2) {
                data = { "ord": ord, "regionID": regionID, "stateCode": stateCode, "districtCode": districtCode, "from_year": from_year, "to_year": to_year, "filter_type": type, "season": season, "basin": basin, "subbasin": subBasin, "month": month,"_token": "{{ csrf_token() }}" };
            }

            if ($.fn.DataTable.isDataTable('#simpletable')) {
                $('#simpletable').DataTable().destroy();
            }

            // console.log(data);
            var table = $('#simpletable').DataTable({
                "processing": false,
                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,
                "searching": true,
                "ordering": true,
                "iDisplayLength": 10,
                "responsive": true,
                "bDestroy": true,
                "ajax": {
                    "url": "{{ route('AvgComparisionReport') }}",
                    "type": "POST",
                    "data": data,
                    "dataType": "json",
                    beforeSend: function() {
                        $(".loaderpk").css("display", "block");
                    },
                    complete: function() {
                        $(".loaderpk").css("display", "none");
                    }, 
                    "dataSrc": function (jsonData) {
                        $('#geowisereport').show();
                        return jsonData.data;
                    }
                },
                "columnDefs": [
                    {
                        "targets": [4,5, 6],
                        "className": "text-right"
                    }
                ]
            });
        }

        $(".filter_btn").click(function () {
            var RegionID = $("#RegionID").val();
            var stateCode = $("#StateCode").val();
            var DistrictCode = $("#DistrictCode").val();
            var type = $('#FilterType').val();
            var season = $('#season').val();
            var month = $('#month').val();
            if (RegionID == '') {
                bootbox.alert('Please select Region');
                return false;
            } else if (stateCode == '') {
                bootbox.alert('Please select state');
                return false;
            }
            if (type == '') {
                bootbox.alert('Please select Filter type');
                return false;
            }

            if ((type == 1) && (season == '')) {
                bootbox.alert('Please select season');
                return false;
            }
            if ((type == 2) && (month == '')) {
                bootbox.alert('Please select month');
                return false;
            }
            getResults();
        });




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

        $('#season').change(function () {
            seasonId = $(this).val();

            var regionID = $("#RegionID").val();
            var stateCode = $('#StateCode').val();
            var districtCode = $('#DistrictCode').val();

            $.get("{{ route('getSeasonDate') }}", {
                regionID: regionID, stateCode: stateCode, districtCode: districtCode, seasonID: seasonId, reportType: "WL", type: "season"
            }, function (response) {
                var json_obj = jQuery.parseJSON(response);
                // console.log(json_obj.endDate);
                $('#fDate').val(json_obj.startDate);
                $('#tDate').val(json_obj.endDate);
            });
        });

        $('#month').change(function () {
            month = $(this).val();

            var regionID = $("#RegionID").val();
            var stateCode = $('#StateCode').val();
            var districtCode = $('#DistrictCode').val();

            $.get("{{ route('getSeasonDate') }}", {
                regionID: regionID, stateCode: stateCode, districtCode: districtCode, month: month, reportType: "WL", type: "month"
            }, function (response) {
                var json_obj = jQuery.parseJSON(response);
                // console.log(json_obj.endDate);
                $('#fDate').val(json_obj.startDate);
                $('#tDate').val(json_obj.endDate);
            });



        });

        // getSeasons();
    });

    function getSeasons() {
        $.get("{{ route('getSeasons') }}", {}, function (data) {
            result = jQuery.parseJSON(data);
            $('#season').append($("<option></option>")
                .attr("value", '')
                .text('--Select--'));
            $.each(result, function (key, item) {
                // alert(JSON.stringify(item));
                $('#season').append($("<option></option>")
                    .attr("value", item.SeasonID)
                    .text(item.SeasonName));
            });
        });
    }

    function showSeason(state_id) {
        if (parseInt(state_id) > 0) {
            $("#season").css({ "pointer-events": "revert", "touch-action": "auto", "background": "white" });
        } else {
            $("#season").val('');
            $("#season").css({ "pointer-events": "none", "touch-action": "none", "background": "#e9ecef" });
        }
    }




</script>
@endsection