@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;
        }
    </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>WQ Alert</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-2 mb-0 ">
                        <label for="exampleSelect1">From 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="fDate" placeholder="dd-mm-yyyy" autocomplete="off"
                                value="{{ $from_date }}" maxlength="255" readonly1>
                            <span class="date-text"></span>
                            <i class="date-icon fa fa-calendar" aria-hidden="true"></i>
                        </div>
                    </div>

                    <div class="col-md-2 mb-0 ">
                        <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"
                                value="{{ $to_date }}" maxlength="255" readonly1>
                            <span class="date-text"></span>
                            <i class="date-icon fa fa-calendar" aria-hidden="true"></i>
                        </div>
                    </div>

                    <div class="col-md-2 mt-4 ">

                        <button type="bttton" class="btn btn-sm btn-primary text-white filter_btn" name="Search"
                            value="Filter">Filter</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <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>Well Type</th>
                                        <th>Date</th>
                                        <th>pH</th>
                                        <th>EC</th>
                                        <th>TDS</th>
                                        <th>Na</th>
                                        <th>K</th>
                                        <th>CA</th>
                                        <th>Mg</th>
                                        <th>CO3</th>
                                        <th>HCO3</th>
                                        <th>Cl</th>
                                        <th>SO4</th>
                                        <th>NO3</th>
                                        <th>F</th>
                                        <th>Alkalinity</th>
                                        <th>Pesticide</th>
                                        <th>SAR</th>
                                        <th>SARclassification</th>
                                        <th>RSC</th>
                                        <th>RSCClassification</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 src="{{ asset('bower_components\data_table\jquery.dateandtime.js') }}"></script> --}}


    <script>
        $(function() {

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

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


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

            $(".filter_btn").click(function() {
                var fDate = $("#fDate").val();
                var tDate = $("#tDate").val();

                if (fDate == '') {
                    bootbox.alert('Please select from date');
                    return false;
                } else if (tDate == '') {
                    bootbox.alert('Please select to date');
                    return false;
                }
                getResults();

            });

            getResults();


        });

        function getResults() {
            console.log('working');
            // $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
            data = {};

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

            var fDate = $("#fDate").val();
            var tDate = $("#tDate").val();
            var data = {
                fDate: fDate,
                tDate: tDate,
            };

            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,
                    "scrollX": true,
                    processData: false,
                    contentType: false,
                    "ajax": {
                        "url": "{{ route('wq_alert_report') }}",
                        "type": "GET",
                        "data": data,
                        "dataType": "json",
                        "dataSrc": function(jsonData) {
                            $('#report').show();
                            return jsonData.data;
                        }
                    }
                });


        }

        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