@extends('layouts.app')

@section('content')
    <style>
        /* table.dataTable th.dt-type-numeric,
        table.dataTable th.dt-type-date,
        table.dataTable td.dt-type-numeric,
        table.dataTable td.dt-type-date {
            text-align: left !important;
        } */

        /* Adjust the table container */
        .table-responsive {
            overflow-x: auto;
        }

        /* Adjust the table width to fit the container */
        .dataTables_wrapper .dataTables_scroll {
            overflow: auto;
        }

        .dataTables_scrollBody {
            overflow-x: scroll !important;
            overflow-y: hidden;
        }
    </style>
    <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 Reading</h4>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- Page-header end -->
    @php $user = Auth::user(); @endphp
    
        <div class="alert alert-success d-none" id="SuccessMsg"></div>
        <div class="alert alert-danger d-none" id="ErrorMsg"></div>
    
    <!-- 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>
                        <div class="date-container w-100">
                            <input id="year" name="year" type="text" class="form-control date-picker"
                                autocomplete="off" placeholder="mm-yyyy"><span
                                class="material-symbols-outlined">calendar_month
                            </span>
                        </div>
                    </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" id="main_form">
                    @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="button" id="save_button">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 <br> Depth</th>
                                            <th>Depth to <br> WL(m-bgl) <span id="pre_curr_month"></span> / <span
                                                    id="prev_year"></span></th>
                                            <th>Depth to<br>WL(m-bgl) <span id="pre_month"></span> / <span
                                                    id="pre_curr_year"></span></th>
                                            <th>Depth to<br>WL(m-bgl) <span id="curr_month"></span> / <span
                                                    id="curr_year"></span></th>
                                            <th>Fluctutation wrt<br> Previous year</th>
                                            <th>Time</th>
                                            <th>Date of Collection</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" type="text/css" href="https://cdn.datatables.net/fixedheader/3.3.2/css/fixedHeader.dataTables.min.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 src="https://cdn.datatables.net/fixedheader/3.3.2/js/dataTables.fixedHeader.min.js"></script>


    <script>
        $(document).ready(function () {
            $('#save_button').on('click', function (e) {
                e.preventDefault(); // Prevent default form submission
                var formData = $('#main_form').serialize();
                $('#SuccessMsg, #ErrorMsg').addClass('d-none').text('');
                $.ajax({
                    url: "{{ route('UpdateWaterLevelReading') }}", // Form action URL
                    method: "POST", // HTTP method
                    data: formData, // Serialized form data
                    success: function (response) {
                        if(response.status == 1){
                           $('#SuccessMsg').removeClass('d-none').text(response.message);
                        } else if(response.status == 0){
                            $('#ErrorMsg').removeClass('d-none').text(response.errors);
                        }
                    },
                    error: function (xhr) {
                        let errorMessage = 'An error occurred.';
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            errorMessage = Object.values(xhr.responseJSON.errors).join(', ');
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }

                        $('#ErrorMsg').removeClass('d-none').text(errorMessage);
                    }
                });
            });
        });
        $(function() {

            @if($user->RoleID == 2)
                $(".RegionFilter").css({"pointer-events": "none","touch-action": "none","background": "#e9ecef"});
                $(".RegionFilter").trigger('change');
            @endif
            $('.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 Region');
                } 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() {
            $('.dateandtime').dateAndTime();
            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,
                stateCode: State,
                districtCode: Dist,
                block: Block,
                year: Year,
                "_token": "{{ csrf_token() }}"
            };

            var table = $('#simpletable').DataTable({
                "fixedHeader": true,
                "scrollY": '500px', // Set the height of the table
                "scrollCollapse": true,
                "processing": false,
                "serverSide": false, //Feature control DataTables' server-side processing mode.
                "bFilter": true,
                "bLengthChange": true,
                "ordering": false,
                "iDisplayLength": 10,
                "responsive": true,
                "scrollX": true,
                "fixedColumns": {
                    "leftColumns": 5
                },
                "bDestroy": true,
                "ajax": {
                    "url": "{{ route('WaterLevelReading') }}",
                    "type": "POST",
                    "data": data,
                    "dataType": "json",
                    beforeSend: function() {
                        $(".loaderpk").css("display", "block");
                    },
                    complete: function() {
                        $(".loaderpk").css("display", "none");
                    },
                    "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;
                    }
                },
                "drawCallback": function(settings) {
                    $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
                    // Reinitialize datepicker and dateAndTime on new elements after table data is appended
                    $('.dateandtime').dateAndTime();
                    
                    let dateString = Year;
                    let dateArray = dateString.split("-");
                    let currentMonth = new Date(dateArray[0] + '-1-01').getMonth() + 1 - 1;
                    let currentYear = parseInt(dateArray[1], 10);

                    var firstDayOfMonth = new Date(currentYear, currentMonth, 1);
                    var lastDayOfMonth = new Date(currentYear, currentMonth + 1, 0);
                    let currentDate = new Date();
                    let Month = new Date(dateArray[0] + '-1-01').getMonth() + 1;
                    let startDate = new Date(currentYear, Month - 1, 0);
                    let endDate = new Date(currentYear, Month - 1, 30);

                    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",
                            changeMonth: true,
                            changeYear: true,
                            todayHighlight: false,
                            yearRange: "1969:" + new Date().getFullYear(),
                            minDate: firstDayOfMonth,
                            maxDate: new Date(),
                        });
                    });
                }
            });
        }

        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('');
            }
        }
    </script>
@endsection