@extends('layouts.guest')

@section('content')
    <section class="water_scenario">
        <div class="container">
            @if (session()->has('login_error'))
                <div class="alert alert-danger">
                    {{ session()->get('login_error') }}
                </div>
            @endif

            <div class="card">
                @if($dtype == '2')
                    <h4 style="text-align: center;">Ground Water Quality</h4>
                @endif
                @if($dtype == '0')
                    <h4 style="text-align: center;">Manual Water Level Measurement</h4>
                @endif
                @if($dtype == '1')
                    <h4 style="text-align: center;">Digital Water Level Recorders with Telemetry </h4>
                @endif
                <div class="card-block">
                    <div class="row">

                        <div class="col-md-2 mb-3">
                            <label for="validationCustom02">State<span class="red">*</span></label>
                            <select class="form-control" name="StateCode" id="StateCode">
                                <option value="">--Select--</option>
                                @foreach ($states as $item)
                                    <option value="{{ $item->StateCode }}">{{ $item->StateName }}</option>
                                @endforeach
                            </select>
                        </div>

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

                        <div class="col-md-2 mb-3 administrative">
                            <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 ">
                            @php $today = date('d-m-Y'); $seven_days_ago = date('d-m-Y', strtotime($today . ' -7 day')); @endphp
                            <label for="exampleSelect1">From Date<span class="red">*</span> </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" value="{{ $seven_days_ago }}"><span
                                    class="material-symbols-outlined">calendar_month
                                </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<span class="red">*</span> </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" value="{{ $today }}"><span
                                    class="material-symbols-outlined">calendar_month
                                </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-2 mt-3 ">
                            <div class="form-group">
                                <button type="bttton" class="btn btn-sm btn-primary text-white filter_btn"
                                    name="Search">Filter</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>




            <div class="row mt-4" id="listhydro" 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></th>
                                            <th>WellNo</th>
                                            <!--<th>Well Type</th>--->
                                            <th>Village</th>
                                            <!---<th>Block</th>
                                            <th>Dates</th>--->
                                            <th>Lat</th>
                                            <th>Long</th>
                                            <th>Data Availability (From - To) </th>
                                            
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if($dtype == 0)
            <div class="row mt-4" id="charthydro" style="display:none">
                <div class="col-sm-12">
                    <div class="card">
                        <div class="card-block">
                            <div class="d-flex ">
                                <button type="button" class="btn btn-primary btn-list mr-3">
                                    <i class="feather icon-menu"></i>
                                </button>

                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">Graph View</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Tabular View</a>
                                    </li>
                                </ul>

                            </div>
                            
                            <!-- Tab panes -->
                            <div class="tab-content">
                                <div class="tab-pane fade show active" id="tabs-1" role="tabpanel">
                                    <div id="div_pdfcanvas">
                                        <canvas id="canvas" style="width:100%; height:500px"></canvas>
                                        <div id="dvgraph"></div>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="tabs-2" role="tabpanel">
                                    <div class="table-responsive">
                                        <table id="grid_view" class="table table-striped table-bordered nowrap" style="width: 100% !important;">
                                            <thead>
                                                <tr role="row">
                                                    <th>SR.</th>
                                                    <th>WL</th>
                                                    <th>Date</th>
                                                    
                                                </tr>
                                            </thead>
                                            <tbody></tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @endif

            @if($dtype == 1)
                <div class="row mt-4" id="charthydro" style="display:none">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-block">
                                <button type="button" class="btn btn-primary btn-list">
                                    <i class="feather icon-menu"></i>
                                </button>
                                <div id="div_pdfcanvas">
                                    <canvas id="canvas" style="width:100%; height:500px"></canvas>
                                    <div id="dvgraph"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            @if($dtype == 2)
                <div class="row mt-4" id="main_wq_list_table" style="display:none">
                    <div class="col-sm-12">
                        <div class="card">
                            <div class="card-block">
                                <button type="button" class="btn btn-primary btn-list">
                                    <i class="feather icon-menu"></i>
                                </button>
                                <div class="table-responsive">
                                    <table id="wq_list" class="table table-striped table-bordered nowrap">
                                        <thead>
                                            <tr role="row">
                                                <th>SR.</th>
                                                <th>Year</th>
                                                <th>pH</th>
                                                <th>EC</th>
                                                <th>HCO3</th>
                                                <th>CO3</th>
                                                <th>Cl</th>
                                                <th>SO4</th>
                                                <th>NO3</th>
                                                <th>Ca</th>
                                                <th>Mg</th>
                                                <th>Na</th>
                                                <th>K</th>
                                                <th>F</th>
                                                <th>Fe</th>
                                                <th>As</th>
                                                
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endif


            <input type="hidden" id="isDWLR" name="isDWLR" value="{{ $dtype }}">

        </div>
    </section>


    <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('assets\js\moment.min.js') }}"></script>


    <script src="{{ asset('bower_components/teechart/teechart.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/teechart/teechart-extras.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/teechart/date.format.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/teechart/teechart-maps.js') }}" type="text/javascript"></script>
    <script src="{{ asset('bower_components/teechart/teechart-editor.js') }}" type="text/javascript"></script>

    <script>
        $(document).ready(function() {
            $('#StateCode').on('change', function(e) {
                var StateCode = $(this).val();
                var DistrictCode = ''; // Assuming this is empty initially
                var dtype = '{{ $dtype }}';
                $.ajax({
                    type: 'GET',
                    url: "/getDistrict",
                    data: { StateCode: StateCode, DistrictCode: DistrictCode, type: 'public',urlType:dtype },
                    success: function(data) {
                        if (data) {
                            $('#DistrictCode').html(data);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error: ", status, error);
                    }
                });
            });

            $('#DistrictCode').on('change', function(e) {
                var StateCode = $('#StateCode').val();
                var DistrictCode = $(this).val();
                var BlockCode = '';
                var dtype = '{{ $dtype }}';
                $.ajax({
                    type: 'GET',
                    url: "/getBlock",
                    data: { StateCode: StateCode, DistrictCode: DistrictCode,BlockCode:BlockCode, type: 'public',urlType:dtype },
                    success: function(data) {
                        if (data) {
                            $('#BlockCode').html(data);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("AJAX Error: ", status, error);
                    }
                });
            });
        });

        $(function() {

            var WellNo = '';
            var fDate = '';
            var tDate = '';
            var eqn = '';

            var today = new Date();
            var yearRange = "1969:" + today.getFullYear();

            // Initialize the "from" datepicker
            $("#fDate").datepicker({
                autoclose: true,
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                endDate: today,
                orientation: "bottom",
                yearRange: yearRange,
                maxDate: today,
                onSelect: function(selectedDate) {
                    var fromDate = $(this).datepicker('getDate');
                    if (fromDate) {
                        var oneYearLater = new Date(fromDate.getFullYear() + 1, fromDate.getMonth(),
                            fromDate.getDate());
                        $("#tDate").datepicker("option", "minDate", fromDate);
                        $("#tDate").datepicker("option", "maxDate", oneYearLater);
                    }
                }
            });

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






            $(".filter_btn").click(function() {
                var stateCode = $("#StateCode").val();
                var DistrictCode = $("#DistrictCode").val();
                var BlockCode = $("#BlockCode").val();
                //var fDate = $("#fDate").val();
                //var tDate = $("#tDate").val();

                if (stateCode == '') {
                    bootbox.alert('Please select State');
                    return false;
                } else if (DistrictCode == '') {
                    bootbox.alert('Please select District');
                    return false;
                } else if(BlockCode == ''){
                    bootbox.alert('Please select Block');
                    return false;
                }
                /*
                else if (fDate == '') {
                    bootbox.alert('Please select From Date');
                    return false;
                } else if (tDate == '') {
                    bootbox.alert('Please select To Date');
                    return false;
                }*/
                getResults();
            });



            $('.btn-list').click(function() {
                $('#listhydro').show();
                $('#charthydro').hide();
                $('#graph_toolbar').hide();
                $('#main_wq_list_table').hide();
                $('.nav-tabs .nav-link').removeClass('active');
                $('#tabs-2').removeClass('active');
                $('#tabs-1').addClass('active');
            });


        });

        function getResults() {
            $('#graph_toolbar').hide();
            $('#charthydro').hide();
            var data = {};
            var ord = $('.ord:checked').val();
            var stateCode = $('#StateCode').val();
            var districtCode = $('#DistrictCode').val();
            var blockCode = $("#BlockCode").val();
            
            //var fDate = $('#fDate').val();
            //var tDate = $('#tDate').val();

            data = {
                "stateCode": stateCode,
                "districtCode": districtCode,
                "blockCode":blockCode
                //"fdate": fDate,
                //"tdate": tDate
            };

            if ($.fn.DataTable.isDataTable('#simpletable')) {
                $('#simpletable').DataTable().destroy();
            }
            var parameter = '{{ Request::segment(2) }}';
            //var parameter = 'DWLR';

            $('#listhydro').show();
            // console.log(data);
            var table = $('#simpletable').DataTable({
                "processing": false,
                retrieve: true,
                
                "serverSide": true,
                "bFilter": true,
                "bLengthChange": true,
                "ordering": true,
                "iDisplayLength": 10,
                "responsive": true,
                "bDestroy": true,
                "ajax": {
                    "url": "{{ url('/WaterLevel') }}/" + parameter,
                    "type": "GET",
                    "data": data,
                    "dataType": "json",
                    beforeSend: function() {
                        $(".loaderpk").css("display", "block");
                    },
                    complete: function() {
                        $(".loaderpk").css("display", "none");
                    },
                    "dataSrc": function(jsonData) {
                        
                        return jsonData.data;
                    }
                },
                "columnDefs": [
                    {
                        "targets": 0, // Target the first column
                        "orderable": false // Disable ordering on the first column
                    }
                ]
            });

        }



        function GetGraph(type, wl,wt, fd, td,list_from_date) {

            if(list_from_date == '' ){
                bootbox.alert('No record found.');
                return false;
            }

            var wqp = '';
            var wellType = wt;
            $('#tabs-1').addClass('active');
            if (type == 'check') {
                WellNo = wl;
                fdate = fd;
                tdate = td;
                $('#listhydro').hide();
                $('#charthydro').show();
                $('#graph_toolbar').show();

                // Activate tabs-1 and ensure tabs-2 is inactive
                $('.nav-tabs .nav-link').removeClass('active');
                $('#tabs-1').addClass('active');
                $('#tabs-2').removeClass('active');
                
                // Set active class for the tab link
                $('.nav-tabs a[href="#tabs-1"]').addClass('active');
                $('#tabs-1').addClass('active show');
                $('.nav-tabs a[href="#tabs-2"]').removeClass('active');
                $('#tabs-2').removeClass('active show');

            }
           
            wqp = $('#wqp').val();



            var isDWLR = $('#isDWLR').val();



            var data = {
                WellNo: WellNo,
                fdate: fdate,
                tdate: tdate,
                isDWLR: isDWLR
            };

            var fdateObj = new Date(fdate);
            var formattedFdate = ('0' + fdateObj.getDate()).slice(-2) + '-' + 
                         ('0' + (fdateObj.getMonth() + 1)).slice(-2) + '-' + 
                         fdateObj.getFullYear();

            var tdateObj = new Date(tdate);
            var formattedTdate = ('0' + tdateObj.getDate()).slice(-2) + '-' + 
                ('0' + (tdateObj.getMonth() + 1)).slice(-2) + '-' + 
                tdateObj.getFullYear();

            $.ajax({
                url: "{{ route('GetGraphGuest') }}",
                type: 'GET',
                data: data,
                contenttype: "application/x-www-form-urlencoded",
                datatype: "html",
                success: function(result) {
                    $('#charthydro').show();
                    result = jQuery.parseJSON(result);
                    // ShowGRPDownload('canvas', 'div_pdfcanvas', 'Hydrograph');

                    

                    Chart1 = new Tee.Chart('canvas');
                    Chart1.panel.margins.top = 8;
                    Chart1.panel.margins.bottom = 8;

                    Chart1.title.text = 'WellNo -'+WellNo+ ', '+wellType+' ('+ formattedFdate +' to '+formattedTdate+')';
                    Chart1.title.format.font.fill = 'rgb(0,0,0)';
                    Chart1.title.format.font.style = '18px calibri';
                    Chart1.title.format.font.shadow.visible = false;
                    var WL = new Tee.Line();
                    WL.pointer.height = 1;
                    WL.pointer.width = 1;
                    // eval("var WL" + i + "Values = [" + result.Data + "]");
                    // eval("var WL" + i + "_labels = [" + result.xAxis + "]; ");
                    // var WLValues = [-85.8000,-85.8500,-88.8500,-86.6600,-86.9000,-87.5000,-88.5500,-89.2000,-89.6500,-89.5000,-88.8200,-88.3200,-87.9500,-88.2000,-89.1500,-89.6500,-89.0500,-89.6000,-88.9500,-88.2500,-88.8500,-88.5500,-88.5000,-88.0500,-88.3500,-88.7000,-88.6000,-88.1000,-87.8500,-88.3500,-87.7500,-87.8500,-87.6000,-86.4500,-86.3500,-86.5000,-86.2500,-86.1500,-86.2500,-85.1500,-84.4500,-84.5500,-84.4500,-83.6500,-83.1500,-83.1000,-82.7500,-82.2500,-82.5500,-82.1500,-82.8500,-81.2500,-80.9500,-81.2500,-80.0500,-79.1000,-78.6500,-78.3500,-77.9500,-78.0500,-78.2000,-77.1000,-76.3500,-75.6000,-75.0500,-74.4000,-74.2500,-73.3500,-73.4500,-72.5000,-71.8500,-72.3500,-72.7500,-73.3500,-72.9500,-72.4000,-73.2500,-73.3000,-72.5500,-72.7500,-72.0500,-71.9000,-72.1500,-72.8000,-73.0500,-72.9500,-72.0500,-71.6500,-72.7500,-72.3500,-69.5500,-69.4500,-72.1500,-72.0500,-71.3500,-68.5500,-68.7500,-70.0500,-68.8000,-71.2000,-67.3500,-68.7500,-64.0500,-66.5500,-66.0500,-66.5500,-65.2500,-67.1500,-66.3500,-65.0500,-65.5500,-67.0500,-66.7500,-65.8500,-66.4500,-67.0500,-67.8500,-65.7500,-68.3500,-71.7100,-71.5200,-67.9100,-66.9800,-78.7000,-67.0700,-67.9500,null,-64.7800,-65.8400,-128.3500,-64.4000,-124.6500,-69.8500,-64.8500,-63.3500,-63.9500,-125.7500]; 
                    // var x_labels = ['12/11/2001 00:00' ,'02/05/2002 00:00' ,'05/01/2002 00:00' ,'07/29/2002 00:00' ,'08/14/2002 00:00' ,'10/01/2002 00:00' ,'01/08/2003 00:00' ,'03/10/2003 00:00' ,'05/01/2003 00:00' ,'07/08/2003 00:00' ,'08/13/2003 00:00' ,'09/11/2003 00:00' ,'10/01/2003 00:00' ,'12/01/2003 00:00' ,'01/09/2004 00:00' ,'02/25/2004 00:00' ,'03/24/2004 00:00' ,'05/01/2004 00:00' ,'07/26/2004 00:00' ,'09/01/2004 00:00' ,'10/01/2004 00:00' ,'12/07/2004 00:00' ,'02/04/2005 00:00' ,'02/23/2005 00:00' ,'03/24/2005 00:00' ,'04/26/2005 00:00' ,'05/01/2005 00:00' ,'06/30/2005 00:00' ,'07/25/2005 00:00' ,'08/18/2005 00:00' ,'09/26/2005 00:00' ,'10/01/2005 00:00' ,'11/30/2005 00:00' ,'12/26/2005 00:00' ,'01/25/2006 00:00' ,'02/23/2006 00:00' ,'03/27/2006 00:00' ,'04/29/2006 00:00' ,'05/01/2006 00:00' ,'07/11/2006 00:00' ,'08/21/2006 00:00' ,'09/23/2006 00:00' ,'10/01/2006 00:00' ,'11/28/2006 00:00' ,'12/17/2006 00:00' ,'01/11/2007 00:00' ,'02/21/2007 00:00' ,'03/19/2007 00:00' ,'04/23/2007 00:00' ,'05/01/2007 00:00' ,'06/22/2007 00:00' ,'07/26/2007 00:00' ,'08/25/2007 00:00' ,'09/26/2007 00:00' ,'10/01/2007 00:00' ,'11/26/2007 00:00' ,'12/25/2007 00:00' ,'01/24/2008 00:00' ,'02/20/2008 00:00' ,'03/25/2008 00:00' ,'04/15/2008 00:00' ,'05/01/2008 00:00' ,'06/21/2008 00:00' ,'07/25/2008 00:00' ,'08/12/2008 00:00' ,'09/17/2008 00:00' ,'10/01/2008 00:00' ,'11/21/2008 00:00' ,'12/26/2008 00:00' ,'01/21/2009 00:00' ,'02/27/2009 00:00' ,'03/22/2009 00:00' ,'04/15/2009 00:00' ,'05/01/2009 00:00' ,'06/23/2009 00:00' ,'07/20/2009 00:00' ,'08/21/2009 00:00' ,'09/20/2009 00:00' ,'10/01/2009 00:00' ,'11/01/2009 00:00' ,'12/01/2009 00:00' ,'01/01/2010 00:00' ,'02/01/2010 00:00' ,'03/01/2010 00:00' ,'04/01/2010 00:00' ,'05/01/2010 00:00' ,'08/01/2010 00:00' ,'10/01/2010 00:00' ,'01/01/2011 00:00' ,'05/01/2011 00:00' ,'08/01/2011 00:00' ,'10/01/2011 00:00' ,'01/01/2012 00:00' ,'05/01/2012 00:00' ,'08/01/2012 00:00' ,'10/01/2012 00:00' ,'01/01/2013 00:00' ,'05/01/2013 00:00' ,'10/01/2013 00:00' ,'05/01/2014 00:00' ,'08/01/2014 00:00' ,'10/01/2014 00:00' ,'01/01/2015 00:00' ,'05/01/2015 00:00' ,'08/01/2015 00:00' ,'10/01/2015 00:00' ,'01/01/2016 00:00' ,'05/01/2016 00:00' ,'08/01/2016 00:00' ,'10/01/2016 00:00' ,'01/01/2017 00:00' ,'05/01/2017 00:00' ,'08/01/2017 00:00' ,'10/01/2017 00:00' ,'01/01/2018 00:00' ,'05/01/2018 00:00' ,'08/01/2018 00:00' ,'10/01/2018 00:00' ,'01/01/2019 00:00' ,'05/01/2019 00:00' ,'08/01/2019 00:00' ,'10/01/2019 00:00' ,'01/01/2020 00:00' ,'05/01/2020 00:00' ,'08/01/2020 00:00' ,'10/01/2020 00:00' ,'10/15/2020 00:00' ,'01/01/2021 00:00' ,'05/01/2021 00:00' ,'08/01/2021 00:00' ,'10/01/2021 00:00' ,'01/01/2022 00:00' ,'05/01/2022 00:00' ,'08/01/2022 00:00' ,'10/01/2022 00:00' ,'01/01/2023 00:00' ,'05/01/2023 00:00' ]; 
                    WLValues = result.Data;
                    x_labels = result.xAxis;
                    // console.log(WLValues);
                    // console.log(x_labels);
                    var DWLR_labels = result.DWLRDates;
                    var x2_labels = result.SPRDates;
                    var x3_labels = result.SPSDates;
                    var x4_labels = result.TAllDates;
                    var x5_labels = result.TPRDates;
                    var x6_labels = result.TPSDates;
                    var x7_labels = [];
                    var x8_labels = [];
                    var x9_labels = result.WQDates;

                    if (result.DWLRValues.length > 0) {

                        var DWLR = new Tee.Line();
                        var DWLRValues = result.DWLRValues;
                        DWLR.data.values = [];
                        DWLR.data.x = [];

                        for (var i = 0; i < DWLRValues.length; i++) {
                            DWLR.data.values[i] = DWLRValues[i]*(-1);
                            // DWLR.data.x[i] = new Date(DWLR_labels[i]);
                            DWLR.data.x[i] = new Date(Date.parse(DWLR_labels[i].replace(/'/g, '')));
                        }
                        DWLR.format.stroke.dash = [4, 4];
                        Chart1.addSeries(DWLR);
                    }

                    


                    WL.data.values = [];
                    WL.data.x = [];
                    for (var i = 0; i < WLValues.length; i++) {
                        WL.data.values[i] = WLValues[i]*(-1);
                        WL.data.x[i] = new Date(x_labels[i]);
                    }
                    var axis1 = Chart1.axes.left;
                    axis1.title.text = 'Water Level in mbgl';
                    axis1.title.format.font.fill = 'rgb(0,0,0)';
                    axis1.title.format.font.style = '15px calibri';
                    Chart1.addSeries(WL).pointer.visible = false;
                    if (result.eqntxt != '') {
                        Chart1.axes.bottom.title.text = result.eqntxt;
                    }
                    Chart1.axes.bottom.labels.ongetlabel = function(value, s) {
                        this.format.font.fill = 'black';
                        this.rotation = 45;
                        return s;
                    }
                    Chart1.axes.bottom.labels.dateFormat = 'dd-mm-yyyy';
                    Chart1.axes.bottom.labels.Angle = 90;
                    Chart1.axes.bottom.labels.rotation = 45;
                    Chart1.panel.format.gradient.visible = false;
                    Chart1.panel.format.fill = '#FFF';
                    Chart1.axes.left.format.stroke.size = 0.5;

                    Chart1.axes.bottom.title.format.font.fill = 'rgb(0,0,0)';
                    Chart1.axes.bottom.labels.format.font.fill = 'rgb(0,0,0)';
                    Chart1.axes.left.inverted = true;
                    Chart1.axes.right.inverted = true;
                    Chart1.zoom.allow = true
                    Chart1.walls.visible = false;
                    Chart1.legend.visible = false;
                    Chart1.footer.transparent = true;
                    Chart1.panel.format.shadow.visible = false;
                    Chart1.panel.format.stroke.fill = 'rgba(255,255,255,1)';
                    Chart1.panel.format.round.x = 0;
                    Chart1.panel.format.round.y = 0;

                    ////Annotation ; 
                    // annotation (alternative title) ; 
                    a1 = new Tee.Annotation(Chart1);
                    a1.format.fill = 'rgba(0,0,0,0.0)';
                    a1.format.stroke.fill = 'rgba(0,0,0,0.0)';
                    a1.format.font.style = '16px Arial';
                    a1.format.font.fill = 'rgba(60, 179, 113)';
                    a1.text = '';
                    Chart1.draw();
                    //get position ; 
                    a1.position.x = 5 //Chart1.axes.bottom.calc(Chart1.axes.bottom.minimum) ; 
                    a1.position.y = 5;
                    Chart1.tools.add(a1);


                    ////tooltip 
                    tip = new Tee.ToolTip(Chart1);
                    tip.render = 'dom';
                    tip.autoHide = false;
                    tip.domStyle =
                        'padding-left:8px;padding-right:8px;padding-top:0px;padding-bottom:4px;margin-left:5px;margin-top:0px; ';
                    tip.domStyle = tip.domStyle + 'background-color:#FCFCFC;border-radius:4px 4px;color:#FFF;;';
                    tip.domStyle = tip.domStyle +
                        'border-style:solid;border-color:#A3A3AF;border-width:1px;z-index:1000; ';
                    Chart1.tools.add(tip);
                    tip.onhide = function() {
                        scaling = 0;
                        poindex = -1;
                    }
                    tip.ongettext = function(tool, text, series, index) {
                        var s = '';
                        var sTxt = text.split(' ');
                        var txtLbl = '';
                        if (sTxt.length > 1) {
                            for (var z = 1; z < sTxt.length; z++) {
                                txtLbl = txtLbl + sTxt[z] + ' ';
                            }
                            txtLbl = txtLbl.trim();
                        }
                        if (tool.chart.series.items[0].barStyle == 'bar') {
                            s = '<font face="verdana" color="' + series.format.fill +
                                '" size="1"><strong>' + txtLbl + '</strong></font> <br/>'
                        };
                        s = s + '<font face="verdana" color="' + series.format.fill + '" size="1">Date:' +
                            moment(series.data.x[index]).format('DD/MM/YYYY HH:mm') + ', Value:' + Math.abs(series
                            .data.values[index].toFixed(2)) + '</font>';
                        return s;
                    };
                    Chart1.draw();
                    grid_view(type, wl,wt, fd, td);

                }

            });
        }

        function GetWQList(type, wl,wt, fd, td,list_from_date){
            if(list_from_date == '' ){
                bootbox.alert('No record found.');
                return false;
            } else {

                if (type == 'check') {
                    $('#listhydro').hide();
                    $('#charthydro').hide();
                    $('#graph_toolbar').hide();
                    $('#main_wq_list_table').show();
                }
                var data = {
                    WellNo: wl,
                    fdate: fd,
                    tdate: td,
                    "_token": "{{ csrf_token() }}"
                };

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

                var table = $('#wq_list').DataTable({
                        "processing": false,
                         retrieve: true,
                        "serverSide": true,
                        "bFilter": true,
                        "bLengthChange": true,
                        "ordering": true,
                        "iDisplayLength": 10,
                        "responsive": true,
                        "bDestroy": true,
                        "ajax": {
                            "url": "{{ route('guest_wq_list') }}" ,
                            "type": "POST",
                            "data": data,
                            "dataType": "json",
                            beforeSend: function() {
                                $(".loaderpk").css("display", "block");
                            },
                            complete: function() {
                                $(".loaderpk").css("display", "none");
                            },
                            "dataSrc": function(jsonData) {
                                
                                return jsonData.data;
                            }
                        },
                        "columnDefs": [
                            {
                                "targets": 0, // Target the first column
                                "orderable": false // Disable ordering on the first column
                            }
                        ]
                    });
            }
        }

        function grid_view(type, wl,wt, fd, td){
            var isDWLR = $('#isDWLR').val();
            var data = {
                WellNo: wl,
                fdate: fd,
                tdate: td,
                isDWLR: isDWLR,
                "_token": "{{ csrf_token() }}"
            };
            // Check if DataTable is already initialized and destroy it
            if ($.fn.DataTable.isDataTable('#grid_view')) {
                $('#grid_view').DataTable().clear().destroy();
            }
            var table = $('#grid_view').DataTable({
                "processing": false,
                retrieve: true,
                
                "serverSide": true,
                "bFilter": true,
                "bLengthChange": true,
                "ordering": false,
                "iDisplayLength": 10,
                "responsive": true,
                "bDestroy": true,
                "ajax": {
                    "url": "{{ route('grid_view') }}" ,
                    "type": "POST",
                    "data": data,
                    "dataType": "json",
                    "dataSrc": function(jsonData) {
                        
                        return jsonData.data;
                    }
                }
            });

           $('#grid_view').DataTable().columns.adjust().responsive.recalc();
        }

        $('.nav-tabs a').on('shown.bs.tab', function(e) {
            if ($(e.target).attr('href') === '#tabs-2') {
                
                // Force DataTable to redraw and resize when tab is shown
                $('#grid_view').DataTable().columns.adjust().responsive.recalc();
            }
        });
    </script>
@endsection