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

        </div>
    </div>
    <!-- Page-header end -->
    @php $user = Auth::user(); @endphp
    <!-- Page-body start -->
    <div class="page-body">
        <div class="card">
            <div class="card-block">

                <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">
                            <option value="">--Select--</option>
                        </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 ">
                        <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">
                            <span class="material-symbols-outlined">calendar_month
                            </span>
                        </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"><span class="material-symbols-outlined">calendar_month
                            </span>
                        </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>
                            <a href="#" id="downloadReport">
                            <img src="{{ asset('assets\images\excel.png') }}" data-toggle="tooltip" title="" alt="Excel Export" style="height: 35px;" data-original-title="Excel Export">
                        </a>
                        </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>WL</th>
                                        <th>DWLR</th>
                                        <th>WQ</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <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>
        <div class="row mt-4" id="graph_toolbar" style="display:none">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-block">
                        <div class="row">
                            <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 px-2">
                                <div class="tab-content">
                                    <div class="tab-pane active" id="tabs-1" role="tabpanel">
                                        <div class="row ">
                                            <div class="col-md-4">
                                                <p>Water Level</p>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="check1"
                                                        name="option1" value="something" checked> Manual
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" id="isDWLR"
                                                        name="isDWLR" value="1"> DWLR
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-5">
                                            <div class="col-md-12">
                                                <button type="button" onclick="javascript:GetGraph('btn')"
                                                    class="btn btn-primary btn-lg btn-block">Plot</button>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tabs-2" role="tabpanel">
                                        <div class="row ">
                                            <div class="col-md-3">
                                                <p>Season</p>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" name="season"
                                                        value="1"> All
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" name="season"
                                                        value="2"> Pre-monsoon
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" name="season"
                                                        value="3"> Post-monsoon
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row ">
                                            <div class="col-md-3">
                                                <p>Trend</p>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" name="trend"
                                                        value="1"> All
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" name="trend"
                                                        value="2"> Pre-monsoon
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" name="trend"
                                                        value="3"> Post-monsoon
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-5">
                                            <div class="col-md-12">
                                                <button type="button" onclick="javascript:GetGraph('btn')"
                                                    class="btn btn-primary btn-lg btn-block">Plot</button>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tabs-3" role="tabpanel">
                                        <div class="row ">
                                            <div class="col-md-3">
                                                <p>EQN</p>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" name="eqn"
                                                        value="1"> All
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" name="eqn"
                                                        value="2"> Pre-monsoon
                                                </div>
                                            </div>
                                            <div class="col-md-3">
                                                <div class="form-check">
                                                    <input type="checkbox" class="form-check-input" name="eqn"
                                                        value="3"> Post-monsoon
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mb-5">
                                            <div class="col-md-12">
                                                <button type="button" onclick="javascript:GetGraph('btn')"
                                                    class="btn btn-primary btn-lg btn-block">Plot</button>

                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane" id="tabs-4" role="tabpanel">
                                        <div class="row ">
                                            <!-- <div class="col-md-2">
                                                <div class="form-check">
                                                  <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something"> Rainfall
                                                </div>
                                            </div>
                                            <div class="col-md-2">
                                                <div class="form-check">
                                                  <input type="radio" class="form-check-input" id="check1" name="option1" value="something"> Right Axis
                                                </div>
                                            </div> -->
                                            <div class="col-md-2">
                                                <div class="form-check">
                                                    <!-- <input type="checkbox" class="form-check-input" id="check1" name="option1" value="something">  -->
                                                    Water Quality
                                                </div>
                                            </div>
                                            @php
                                                $params = getParam();
                                            @endphp
                                            <div class="col-md-3">
                                                <div class="form-check">
                                                    <select class="form-control" id="wqp" name="wqp">
                                                        <option value="">-- Select --</option>
                                                        @foreach ($params as $param)
                                                            <option value="{{ $param->para_name }}">{{ $param->para_name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                            <!-- <div class="col-md-3">
                                                <div class="form-check">
                                                  <input type="radio" class="form-check-input" id="check1" name="option1" value="something"> Right Axis
                                                </div>
                                            </div> -->
                                        </div>
                                        <div class="row mb-5">
                                            <div class="col-md-12">
                                                <button type="button" onclick="javascript:GetGraph('btn')"
                                                    class="btn btn-primary btn-lg btn-block">Plot</button>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 px-2">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">WATER
                                            LEVEL</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">SEASON</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">EQN</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#tabs-4" role="tab">WQ</a>
                                    </li>
                                </ul><!-- Tab panes -->
                            </div>
                        </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('assets\js\moment.min.js') }}"></script>

    <!-- <script src="https://code.highcharts.com/highcharts.js"></script>
            <script src="https://code.highcharts.com/modules/series-label.js"></script>
            <script src="https://code.highcharts.com/highcharts-3d.js"></script>
            <script src="https://code.highcharts.com/modules/exporting.js"></script>
            <script src="https://code.highcharts.com/modules/export-data.js"></script>
            <script src="https://code.highcharts.com/modules/accessibility.js"></script> -->

    {{-- <script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script>
    <script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-extras.js" type="text/javascript">
    </script>
    <script src="https://www.steema.com/files/public/teechart/html5/latest/src/date.format.js" type="text/javascript">
    </script>
    <script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-maps.js" type="text/javascript">
    </script>
    <script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-editor.js" type="text/javascript">
    </script> --}}
    {{-- <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.17/jquery-ui.min.js" type="text/javascript"></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>
        $(function() {

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

            var today = new Date();


            @if($user->RoleID == 2)
                $(".RegionFilter").css({"pointer-events": "none","touch-action": "none","background": "#e9ecef"});
                $(".RegionFilter").trigger('change');
            @endif
        
            $("#fDate").datepicker({
                autoclose: true,
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                endDate: today,
                orientation: "bottom",
                yearRange: "1969:" + new Date().getFullYear(),
                maxDate: new Date(),
                onSelect: function(selectedDate) {
                    $("#tDate").datepicker("option", "minDate", selectedDate);
                }
            });


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

                    if (endDate < startDate) {
                        bootbox.alert("End date must be greater than start date.");
                        $("#tDate").val(''); // Clear the tDate field
                    }
                }
            });

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

                if (RegionID == '') {
                    bootbox.alert('Please select Region');
                    return false;
                } else if (stateCode == '') {
                    bootbox.alert('Please select State');
                    return false;
                } else if (DistrictCode == '') {
                    bootbox.alert('Please select District');
                    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();
            });

            $("#downloadReport").click(function() {
                var RegionID = $("#RegionID").val();
                var stateCode = $("#StateCode").val();
                var DistrictCode = $("#DistrictCode").val();
                var fromDate = $("#fDate").val();
                var toDate = $("#tDate").val();

                if (RegionID == '') {
                    bootbox.alert('Please select Region');
                    return false;
                } else if (stateCode == '') {
                    bootbox.alert('Please select State');
                    return false;
                }else if (DistrictCode == '') {
                    bootbox.alert('Please select District');
                    return false;
                }

                if (fromDate == '') {
                    bootbox.alert('Please select From Date');
                    return false;
                }

                if (toDate == '') {
                    bootbox.alert('Please select To Date');
                    return false;
                }
                var data = {
                    RegionID: RegionID,
                    stateCode: stateCode,
                    DistrictCode: DistrictCode,
                    fromDate: fromDate,
                    toDate: toDate,
                };

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                
                $.ajax({
                    type: 'POST',
                    url: "/Hydrograph/Hydrograph_Download",
                    data: data,
                    xhrFields: {
                        responseType: 'blob'
                    },

                    success: function(data, status, xhr) {
                        var filename = "";
                        var disposition = xhr.getResponseHeader('Content-Disposition');
                        if (disposition && disposition.indexOf('attachment') !== -1) {
                            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                            var matches = filenameRegex.exec(disposition);
                            if (matches != null && matches[1]) {
                                filename = matches[1].replace(/['"]/g, '');
                            }
                        }
                        var a = document.createElement('a');
                        var url = window.URL.createObjectURL(data);
                        a.href = url;
                         a.download = filename || 'DWLR_Text_Files.zip';
                        document.body.append(a);
                        a.click();
                        a.remove();
                        window.URL.revokeObjectURL(url);
                    }
                });
            });

        });

        $('.btn-list').click(function() {
            $('#listhydro').show();
            $('#charthydro').hide();
            $('#graph_toolbar').hide();
        })


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

            data = {
                "regionID": regionID,
                "stateCode": stateCode,
                "districtCode": districtCode,
                "fdate": fDate,
                "tdate": tDate,
                "_token": "{{ csrf_token() }}"
            };

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

            // console.log(data);
            var table = $('#simpletable').DataTable({
                "processing": false,
                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": true,
                "iDisplayLength": 10,
                "responsive": true,
                "bDestroy": true,
                "ajax": {
                    "url": "{{ route('Hydrograph') }}",
                    "type": "POST",
                    "data": data,
                    "dataType": "json",
                    beforeSend: function() {
                        $(".loaderpk").css("display", "block");
                    },
                    complete: function() {
                        $(".loaderpk").css("display", "none");
                    },
                    "dataSrc": function(jsonData) {
                        $('#listhydro').show();
                        return jsonData.data;
                    }
                },
                "columnDefs": [
                    {
                        "targets": [0, 8],  
                        "orderable": false 
                    }
                ]
            });

        }



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

            var wqp = '';

            if (type == 'check') {
                WellNo = wl;
                fdate = fd;
                tdate = td;
                $('#listhydro').hide();
                $('#charthydro').show();
                $('#graph_toolbar').show();
            }

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

            var eqnval = $('input:checkbox[name="eqn"]:checked')
                .map(function() {
                    return $(this).val();
                }).get().join();

            var seasonval = $('input:checkbox[name="season"]:checked')
                .map(function() {
                    return $(this).val();
                }).get().join();

            var trend = $('input:checkbox[name="trend"]:checked')
                .map(function() {
                    return $(this).val();
                }).get().join();

            var isDWLR = 0;

            if ($('#isDWLR').is(":checked")) {
                isDWLR = 1;
            }

            var data = {
                WellNo: WellNo,
                fdate: fdate,
                tdate: tdate,
                eqn: eqnval,
                wqp: wqp,
                season: seasonval,
                trend: trend,
                isDWLR: isDWLR,
                "_token": "{{ csrf_token() }}"
            };

            $.ajax({
                url: "{{ route('GetGraph') }}",
                type: 'POST',
                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 = '';
                    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;
                    WLValues = result.Data.map(Math.abs); 
                    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 = [];
                        // alert(DWLRValues.length);
                        for (var i = 0; i < DWLRValues.length; i++) {
                            DWLR.data.values[i] = DWLRValues[i];
                            // DWLR.data.x[i] = new Date(DWLR_labels[i]);
                            // console.log(DWLR_labels[i]);
                            DWLR.data.x[i] = new Date(Date.parse(DWLR_labels[i].replace(/'/g, '')));
                            
                            // console.log(DWLR.data.x[i]);
                        }
                        DWLR.format.stroke.dash = [4, 4];
                        Chart1.addSeries(DWLR);
                    }

                    if (result.WQValues.length > 0) {

                        var WQ = new Tee.Line();
                        var WQValues = result.WQValues;
                        WQ.data.values = [];
                        WQ.data.x = [];

                        WQ.vertAxis = 'right';
                        Chart1.axes.right.title.text = $('#wqp').val() + ' (mg/l)';
                        // left axis css//
                        Chart1.axes.right.title.format.font.fill = 'rgb(0,0,0)';
                        Chart1.axes.right.title.format.font.style = '15px calibri';

                        for (var i = 0; i < WQValues.length; i++) {
                            WQ.data.values[i] = WQValues[i];
                            WQ.data.x[i] = new Date(x9_labels[i]);
                        }
                        Chart1.addSeries(WQ);
                    }

                    if (result.SPRDates.length > 0) {

                        var SPR = new Tee.Line();
                        var SPRValues = result.SPRValues;
                        SPR.data.values = [];
                        SPR.data.x = [];

                        for (var i = 0; i < SPRValues.length; i++) {
                            SPR.data.values[i] = SPRValues[i];
                            SPR.data.x[i] = new Date(x2_labels[i]);
                        }
                        SPR.format.stroke.dash = [4, 4];
                        Chart1.addSeries(SPR);
                    }

                    if (result.SPSDates.length > 0) {

                        var SPS = new Tee.Line();
                        var SPSValues = result.SPSValues;
                        SPS.data.values = [];
                        SPS.data.x = [];

                        for (var i = 0; i < SPSValues.length; i++) {
                            SPS.data.values[i] = SPSValues[i];
                            SPS.data.x[i] = new Date(x3_labels[i]);
                        }
                        SPS.format.stroke.dash = [4, 4];
                        Chart1.addSeries(SPS);
                    }

                    if (result.TAllDates.length > 0) {
                        var TRA = new Tee.Line();
                        var TRAValues = result.TAllValues;
                        TRA.data.values = [];
                        TRA.data.x = [];

                        for (var i = 0; i < TRAValues.length; i++) {
                            TRA.data.values[i] = TRAValues[i];
                            TRA.data.x[i] = new Date(x4_labels[i]);
                            console.log(TRAValues[i]);
                        }
                        // TRA.format.stroke.dash = [4, 4];
                        Chart1.addSeries(TRA);
                    }

                    ////Trend PR ///
                    if (result.TPRDates.length > 0) {
                        var TRPR = new Tee.Line();
                        var TRPRValues = result.TPRValues;
                        TRPR.data.values = [];
                        TRPR.data.x = [];

                        for (var i = 0; i < TRPRValues.length; i++) {
                            TRPR.data.values[i] = TRPRValues[i];
                            TRPR.data.x[i] = new Date(x5_labels[i]);
                        }
                        // TRA.format.stroke.dash = [4, 4];
                        Chart1.addSeries(TRPR);
                    }

                    ////Trend PS ///
                    if (result.TPSDates.length > 0) {
                        var TRPS = new Tee.Line();
                        var TRPSValues = result.TPSValues;
                        TRPS.data.values = [];
                        TRPS.data.x = [];

                        for (var i = 0; i < TRPSValues.length; i++) {
                            TRPS.data.values[i] = TRPSValues[i];
                            TRPS.data.x[i] = new Date(x6_labels[i]);
                        }
                        // TRA.format.stroke.dash = [4, 4];
                        Chart1.addSeries(TRPS);
                    }


                    WL.data.values = [];
                    WL.data.x = [];
                    for (var i = 0; i < WLValues.length; i++) {
                        WL.data.values[i] = WLValues[i];
                        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 = false;
                    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();


                }

            });
        }

        function WellNoWiseDownload(WellNo,fdate,tdate){
            if (WellNo === '' || fdate === '' || tdate === '') {
                return false; 
            }

            var data = {
                    WellNo: WellNo,
                    fromDate: fdate,
                    toDate: tdate,
                };

                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                
                $.ajax({
                    type: 'POST',
                    url: "/Hydrograph/Hydrograph_WellNo_Wise_Download",
                    data: data,
                    xhrFields: {
                        responseType: 'blob'
                    },

                    success: function(data, status, xhr) {
                        var filename = "";
                        var disposition = xhr.getResponseHeader('Content-Disposition');
                        if (disposition && disposition.indexOf('attachment') !== -1) {
                            var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                            var matches = filenameRegex.exec(disposition);
                            if (matches != null && matches[1]) {
                                filename = matches[1].replace(/['"]/g, '');
                            }
                        }
                        var a = document.createElement('a');
                        var url = window.URL.createObjectURL(data);
                        a.href = url;
                         a.download = filename || 'DWLR_Text_Files.zip';
                        document.body.append(a);
                        a.click();
                        a.remove();
                        window.URL.revokeObjectURL(url);
                    }
                });
        }
    </script>
@endsection