@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 Recording</h4>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- Page-header end -->
@php $user = Auth::user(); @endphp
    @if(session()->has('message'))
        <div class="alert alert-success">
            {{ session()->get('message') }}
        </div>
    @endif

    @if(session()->has('error'))
        <div class="alert alert-danger">
            {{ session()->get('error') }}
        </div>
    @endif
    <!-- Page-body start -->
    <div class="page-body">
        <div class="card mb-2">
            <div class="card-block">
                
                <div class="row">
                    <div class="col-md-2 mb-3">
                        <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 class="col-md-2 mb-0 ">
                        <label for="validationCustom02">State<span class="red">*</span></label>
                        <select class="form-control StateCodeFilter" name="StateCode" id="StateCode">
                            <option value="">--select--</option>                            
                        </select>
                    </div>

                    <div class="col-md-2 mb-0 ">
                        <label for="validationCustom02">District<span class="red">*</span></label>
                        <select class="form-control district_id DistrictCodeFilter" name="DistrictCode" id="DistrictCode">
                            <option value="">--All--</option>
                        </select>
                    </div>

                    <div class="col-md-2 mb-0">
                        <label for="validationCustom02">Block<span class="red">*</span></label>
                        <select class="form-control mandal" name="BlockCode" id="BlockCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>

                    <div class="col-md-2 mb-3 ">
                        <label for="exampleSelect1">Month/ Year<span class="red">*</span> </label>
                        <input id="year" name="year" type="text" class="form-control date-picker" autocomplete="off">
                    </div>

                    <div class="col-md-2 mt-4 ">
                        
                        <button type="bttton" class="btn btn-sm btn-primary text-white filter_btn filter" name="Search" value="Filter">Filter</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" id="geowisereport" style="display:none">
            <div class="col-sm-12">
                <!-- Zero config.table start -->
                <form action="{{ route('UpdateWaterLevelReading') }}" method="POST">
                    @csrf
                    <input type="hidden" name="PostRegionID" id="PostRegionID">
                    <input type="hidden" name="PostStateCode" id="PostStateCode">
                    <input type="hidden" name="PostYear" id="PostYear">
                    <div class="border-top pt-3" id="save_btn_div">
                        <div class="row align-items-end mb-3">
                            <div class="col-lg-12 text-right">
                                <button class="btn btn-primary btn_submit mr-2" type="submit">Save</button>
                            </div>
                        </div>
                        
                    </div>
                    <div class="card">
                        <div class="card-block">

                            <div class="">
                                <table id="simpletable" class="table table-striped table-bordered nowrap">
                                    <thead>

                                        <tr role="row">
                                            <th>WellNo</th>
                                            <th>Block</th>
                                            <th>Village</th>
                                            <th>Well_Type</th>
                                            <th>Well Total Depth</th>
                                            <th>Depth to WL(m-bgl) <span id="pre_curr_month"></span> / <span id="prev_year"></span></th>
                                            <th>Depth to WL(m-bgl) <span id="pre_month"></span> / <span id="pre_curr_year"></span></th>
                                            <th>Depth to WL(m-bgl) <span id="curr_month"></span> / <span id="curr_year"></span></th>
                                            <th>Fluctutation wrt Previous year</th>
                                            <th class="custom-width">Time</th>
                                            <th>DateofCollection </th>
                                            <th>Remarks</th>
                                            <th>Latitude</th>
                                            <th>Longitude</th>
                                            <th>Geology</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>

                                </table>
                                
                            </div>
                        </div>
                    </div>
                </form>
            </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 src="{{ asset('bower_components\data_table\jquery.dateandtime.js') }}"></script>
    
    
    <script>
        $(function() {
            $('.dateandtime').dateAndTime();
            $(".filter").click(function() {
                var stateCode = $("#StateCode").val();
                var RegionID = $("#RegionID").val();
                var DistrictCode = $("#DistrictCode").val();
                var BlockCode = $("#BlockCode").val();
                var year = $("#year").val();

                if(RegionID == ''){
                    bootbox.alert('Please select reason');
                }else if (stateCode == '') {
                    bootbox.alert('Please select state');
                }else if (DistrictCode == '') {
                    bootbox.alert('Please select district');
                }else if (BlockCode == '') {
                    bootbox.alert('Please select block');
                }else if (year == '') {
                    bootbox.alert('Please select year');
                }else if(stateCode != ''){
                    getResults();
                }
            });

            

            $('.date-picker').datepicker({
                dateFormat: "M-yy",
                changeMonth: true,
                changeYear: true,
                showButtonPanel: true,
                yearRange: "1969:" + new Date().getFullYear(), // Show years from 1969 to the current year
                maxDate: new Date(), // Restrict to the current date or earlier
                onClose: function(dateText, inst) {
                    setTimeout(function() {
                        inst.dpDiv.find('.ui-datepicker-calendar').hide();
                    }, 1);
                    function isDonePressed(){
                        
                        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
                    }

                    if (isDonePressed()){
                        
                        var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                        var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                        $(this).datepicker('setDate', new Date(year, month, 1)).trigger('change');
                        
                         $('.date-picker').focusout()//Added to remove focus from datepicker input box on selecting date
                    }

                },
                beforeShow : function(input, inst) {

                    inst.dpDiv.addClass('month_year_datepicker')

                    if ((datestr = $(this).val()).length > 0) {
                        year = datestr.substring(datestr.length-4, datestr.length);
                        month = datestr.substring(0, 2);
                        $(this).datepicker('option', 'defaultDate', new Date(year, month-1, 1));
                        $(this).datepicker('setDate', new Date(year, month-1, 1));
                        $(".ui-datepicker-calendar").hide();
                    }
                    setTimeout(function() {
                        inst.dpDiv.find('.ui-datepicker-calendar').hide();
                    }, 1);
                },
                onChangeMonthYear: function(year, month, inst) {
                    // Hide the calendar for the first datepicker when month/year is changed
                    setTimeout(function() {
                        inst.dpDiv.find('.ui-datepicker-calendar').hide();
                    }, 1);
                }
            });


        });

        function getResults() {
            
            data = {};
            ord = $('.ord:checked').val();
            RegionID = $("#RegionID").val();
            State = $('#StateCode').val();
            Dist = $('#DistrictCode').val();
            Block = $('#BlockCode').val();
            Year = $('#year').val();
            var data = {
                ord: ord,
                RegionID: RegionID,
                state: State,
                district: Dist,
                block: Block,
                year: Year
            };

            var table = $('#simpletable').DataTable({
                "processing": false,
                "serverSide": false, //Feature control DataTables' servermside processing mode.
                "bFilter": true,
                "bLengthChange": false,
                "ordering": false,
                "iDisplayLength": 25,
                "responsive": true,
                "scrollX": true,
                "fixedColumns": {
                    "leftColumns": 5
                },
                
                "bDestroy": true,
                "ajax": {
                    "url": "{{ route('WaterLevelReading') }}",
                    "type": "GET",
                    "data": data,
                    "dataType": "json",
                    "dataSrc": function(jsonData) {
                        $('#geowisereport').show();
                        $('#PostRegionID').val(RegionID);
                        $('#PostStateCode').val(State);
                        $('#PostYear').val(Year);
                        $('#pre_curr_month').text(jsonData.curr_month);
                        $('#prev_year').text(jsonData.prev_year);

                        $('#pre_month').text(jsonData.prev_month);
                        $('#pre_curr_year').text(jsonData.current_year);

                        $('#curr_month').text(jsonData.curr_month);
                        $('#curr_year').text(jsonData.post_current_year);
                        return jsonData.data;
                    },
                    "complete": function() {
                        // Reinitialize datepicker on new elements after table data is appended
                        $('.dateandtime').dateAndTime();
                        // Get current date
                        
                        let dateString = Year;
        
                        // Split the string by "-"
                        let dateArray = dateString.split("-");
                        
                        // Convert the elements to integers (optional)
                        //let currentMonth = parseInt(dateArray[0], 10) - 1;
                        let currentMonth = new Date(dateArray[0]+'-1-01').getMonth()+1-1;
                        let currentYear = parseInt(dateArray[1], 10);
                       
                        // Calculate the first day of the current month
                        var firstDayOfMonth = new Date(currentYear, currentMonth, 1);

                        // Calculate the last day of the current month
                        var lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0);

                        // Calculate the current date
                        let currentDate = new Date();

                        // Calculate the start and end of the range
                        //let startDate = new Date(currentYear, currentMonth, 1, -1); // Start date (last of the given month)
                        let Month = new Date(dateArray[0]+'-1-01').getMonth()+1;
                        let startDate = new Date(currentYear, Month - 1, 0);
                        //let endDate = new Date(currentYear, currentMonth + 1, 30); // End date (15th of the next month)
                        let endDate = new Date(currentYear, Month - 1, 30); // Month is zero-based
                       
                        // Check if the current date is greater than the date after adding 15 days
                        if (currentDate >= startDate && currentDate <= endDate) {
                            $('.input_field').attr('disabled',false);
                            $('#save_btn_div').show();
                        } else {
                            $('.input_field').attr('disabled',true);
                            $('#save_btn_div').hide();
                        }

                        $('.date-picker-year').each(function(index, el){
                            var val = $(this).val(); 
                            $(this).datepicker({
                                dateFormat: "dd-mm-yy",
                                todayHighlight: false,
                                minDate: firstDayOfMonth, // Set minimum date to the first day of the current month
                                maxDate: (val !='') ? val :lastDayOfMonth, // Set maximum date to the last day of the current month
                            });
                         });
                        


                        
                    }
                }
            });


        }

        function check_well_depth(elem,WL_Well_Depth){
            var water_level = $(elem).closest('tr').find(".water_level").val();
            if(water_level > WL_Well_Depth){
                bootbox.alert('Water level value can not be greater than  WL Well Depth value');
                $(elem).closest('tr').find(".water_level").focus();
                $(elem).closest('tr').find(".water_level").val(0);
            }
        }
    </script>
@endsection