@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 Trend</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">Type<span class="red">*</span></label>
                        <select id="type" 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">
                        </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="2">Feb</option>
                            <option value="3">Mar</option>
                            <option value="4">Apr</option>
                            <option value="5">May</option>
                            <option value="6">Jun</option>
                            <option value="7">Jul</option>
                            <option value="8">Aug</option>
                            <option value="9">Sep</option>
                            <option value="10">Oct</option>
                            <option value="11">Nov</option>
                            <option value="12">Dec</option>
                        </select>
                    </div>



                    <div class="col-md-2 mb-3 ">
                        <label for="exampleSelect1">From Date </label>
                        {{-- <input id="fDate" type="date" class="form-control" autocomplete="off"> --}}
                        <div class="date-container w-100">
                            <input type="text" pattern="\d{1,2}-\d{1,2}-\d{4}" title="Enter in dd-mm-yyyy format" class="form-control datepicker" id="fDate" placeholder="dd-mm-yyyy"  autocomplete="off" maxlength="255" >
                            <span class="date-text"></span>
                            <i class="date-icon fa fa-calendar" aria-hidden="true"></i>
                        </div>
                    </div>
                    <div class="col-md-2 mb-3 ">
                        <label for="exampleSelect1">To Date </label>
                        <div class="date-container w-100">
                            <input type="text" pattern="\d{1,2}-\d{1,2}-\d{4}" title="Enter in dd-mm-yyyy format" class="form-control datepicker" id="tDate" placeholder="dd-mm-yyyy"  autocomplete="off" maxlength="255" >
                            <span class="date-text"></span>
                            <i class="date-icon fa fa-calendar" aria-hidden="true"></i>
                        </div>
                        {{-- <input id="tDate" type="date" class="form-control" autocomplete="off"> --}}
                    </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 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>
                            <form action="/DownloadWaterLevelTrend" method="POST"> 
                                @csrf
                                <input type="hidden" name="ord" id="post_ord" >
                                <input type="hidden" name="regionID" id="post_regionID" >
                                <input type="hidden" name="stateCode" id="post_stateCode" >
                                <input type="hidden" name="districtCode" id="post_districtCode" >
                                <input type="hidden" name="basinCode" id="post_basinCode" >
                                <input type="hidden" name="subBasinCode" id="post_subBasinCode">
                                <input type="hidden" name="fromYear" id="post_fromYear" >
                                <input type="hidden" name="fdate" id="post_fdate">
                                <input type="hidden" name="tdate" id="post_tdate">
                                <input type="hidden" name="WellType" id="post_WellType">
                                <input type="hidden" name="AqTap" id="post_AqTap">
                                <button type="submit" class="btn btn-sm btn-primary text-white" name="Search">Download</button> 
                                                   
                               
                            </form>
                        </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>District</th>
                                        <th>Block</th>
                                        <th>Village</th>
                                        <th>Rec</th>
                                        <th>Rise</th>
                                        <th>Fall</th>
                                        <th>Intercept</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"});
            @endif

            var today = new Date();  
            $("#fDate").datepicker({
                autoclose: true,
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                endDate: today,
                orientation: "bottom",
                yearRange: "1969:" + new Date().getFullYear(),
            });


            $("#tDate").datepicker({
                autoclose: true,
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                endDate: today,
                orientation: "bottom",
                yearRange: "1969:" + new Date().getFullYear(),
            });


            $('#type').change(function(){
                var objVal = $(this).val();
                $('.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 fDate = $('#fDate').val();
                var tDate = $('#tDate').val();
                var WellType = $("#WellType").val();
                var AqTap = $("#AqTap").val();

                if(ord == 1){
                    data ={"ord": ord, "regionID": regionID, "state": stateCode, "district": districtCode,  "fdate": fDate, "tdate": tDate,  "WellType": WellType, "AqTap": AqTap };
                }else if(ord == 2){
                    data ={"ord": ord, "regionID": regionID, "state": stateCode, "district": districtCode, "basin": basin, "subbasin": subBasin, "fdate": fDate, "tdate": tDate,  "WellType": WellType, "AqTap": AqTap };
                }

                $('#post_ord').val(ord);
                $('#post_regionID').val(regionID);
                $('#post_stateCode').val(stateCode);
                $('#post_districtCode').val(districtCode);
                $('#post_basinCode').val(basin);
                $('#post_subBasinCode').val(subBasin);
                $('#post_fdate').val(fDate);
                $('#post_tdate').val(tDate);
                $('#post_WellType').val(WellType);
                $('#post_AqTap').val(AqTap);

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

                // console.log(data);
                var table = $('#simpletable').DataTable({
                    "processing": true,
                    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": 10,
                    "responsive": true,
                    "bDestroy": true,
                    "ajax": {
                        "url": "{{ route('WaterLevelTrend') }}",
                        "type": "GET",
                        "data": data,
                        "dataType": "json",
                        "dataSrc": function(jsonData) {
                            $('#geowisereport').show();
                            return jsonData.data;
                        }
                    }
                });
            }

            $(".filter_btn").click(function() {
                var RegionID = $("#RegionID").val();
                var stateCode = $("#StateCode").val();
                var DistrictCode = $("#DistrictCode").val();
                var type = $('#type').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 Trend 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();
            });

            

            $("#Operator").change(function() {
                curValue = $(this).val();
                if (curValue == 'between') {
                    $('#div_operatorvalue2').show();
                } else {
                    $('#div_operatorvalue2').hide();
                    $('#Operator2').val('');
                }
            });

            $(".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);
                });


               /*  $.get("{{ route('getSeasonDetailsById') }}", {
                    seasonID: seasonId
                }, function(data) {
                    result = jQuery.parseJSON(data);

                    console.log(result[0]);
                    var d = new Date(2008, parseInt(result[0].SeasonStartMo) - 1, result[0]
                            .SeasonStartDt),
                        month = '' + (d.getMonth() + 1),
                        day = '' + d.getDate(),
                        year = d.getFullYear();
                    if (month.length < 2)
                        month = '0' + month;
                    if (day.length < 2)
                        day = '0' + day;

                    $('#fDate').val([day, month, year].join('-'));

                    var d = new Date(2018, parseInt(result[0].SeasonEndMo) - 1, result[0]
                            .SeasonEndDt),
                        month = '' + (d.getMonth() + 1),
                        day = '' + d.getDate(),
                        year = d.getFullYear();
                    if (month.length < 2)
                        month = '0' + month;
                    if (day.length < 2)
                        day = '0' + day;
                    $('#tDate').val([day, month, year].join('-'));
                }); */
            });

            $('#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