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


<!-- Page-header end -->

<!-- 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>State</label>
                    <select class="form-control state_id" name="stateCode" id="stateCode">
                        <option value="">--Select State--</option>
                        @foreach ($states as $state)
                        <option value="{{ $state->StateCode }}">{{ $state->StateName }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="col-md-2 mb-0">
                    <label>Group By</label>
                    <select class="form-control group_by" name="groupBy" id="groupBy">
                        <option value="0">--Select--</option>
                        <option value="3">State</option>
                        <option value="1">District</option>
                        <option value="6">WellNo</option>
                        <option value="2">Mandal</option>
                    </select>
                </div>

                <div class="col-md-2 mb-0 extra div_district" style="display:none">
                    <label>District</label>
                    <select class="form-control district_id" name="districtCode" id="districtCode">
                        <option value="">--Select District--</option>
                        @foreach ($districts as $district)
                        <option value="{{ $district->id }}">{{ $district->District }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="col-md-2 mb-0">
                    <label>Filter By</label>
                    <select class="form-control filterType " name="filterType" id="filterType">
                        <option value="0">--Select--</option>
                        <option value="1">Decadal</option>
                        <option value="2">Season</option>
                        <option value="3">Date range</option>
                    </select>
                </div>


                <div class="col-md-2 mb-0  filter div_decadal" style="display:none">
                    <label>Month</label>
                    <select class="form-control" name="month" id="month">
                        <option value="0">--Select Month--</option>
                        <option value="1">Jan</option>
                        <option value="2">Feb</option>
                        <option value="3">Mar</option>
                        <option value="4">Apr</option>
                        <option value="5">May</option>
                        <option value="6">Jun</option>
                        <option value="7">Jul</option>
                        <option value="8">Aug</option>
                        <option value="9">Sep</option>
                        <option value="10">Oct</option>
                        <option value="11">Nov</option>
                        <option value="12">Dec</option>
                    </select>
                </div>
                <div class="col-md-2 mb-0 filter div_decadal" style="display:none">
                    <label>From Year</label>
                    <select class="form-control" name="fromYear" id="fromYear">
                        <option value="0">--Select Month--</option>
                        <option value="1">Jan</option>
                        <option value="2">Feb</option>
                        <option value="3">Mar</option>
                        <option value="4">Apr</option>
                        <option value="5">May</option>
                        <option value="6">Jun</option>
                        <option value="7">Jul</option>
                        <option value="8">Aug</option>
                        <option value="9">Sep</option>
                        <option value="10">Oct</option>
                        <option value="11">Nov</option>
                        <option value="12">Dec</option>
                    </select>
                </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-12 col-lg-12 col-sm-12 col-xs-12 px-2">
            <div class="tile p-1  tile-min-height-full">
                <div class="row">
                    <div class="col-lg-2">
                        <div class="well" style="max-height: 498px;overflow: auto;padding:5px">
                            <ul id="check-list-box" class="list-group checked-list-box">

                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-10">
                        <div id="div_pdfcanvas">
                            <canvas id="canvas" style="width:100%; height:700px"></canvas>
                            <div id="dvgraph">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</div>

<script src="{{ asset('bower_components\datatables.net\js\jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('bower_components\datatables.net-buttons\js\dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('bower_components\datatables.net-bs4\js\dataTables.bootstrap4.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>
    $(function () {

        $('#groupBy').change(function () {
            var groupby = $(this).val();
            $(".extra").hide();
            if (groupby == 2) {
                $('.div_district').show();
            }

        });
        $('#filterType').change(function () {
            var groupby = $(this).val();
            $(".filter").hide();
            if (groupby == 1) {
                $('.div_decadal').show();
            }

        });

    });



</script>
<div id='TimeSeries_div'>Chart...
</div>
<script type="text/javascript">
    FusionCharts && FusionCharts.ready(function () {
        if (FusionCharts("TimeSeries"))
            FusionCharts("TimeSeries").dispose();
        var chart_TimeSeries = new FusionCharts({
            "width": "100%",
            "height": "500",
            "id": "TimeSeries",
            "type": "msline",
            "dataSource": {
                'chart': {
                    'theme': 'ocean',
                    'caption': 'Hydrograph State wise',
                    'legendBorderAlpha': '0',
                    'legendShadow': '1',
                    'legendPosition': 'left',
                    'showValues': '0',
                    'toolTipColor': '#ffffff',
                    'toolTipBorderThickness': '0',
                    'toolTipBgColor': '#000000',
                    'toolTipBgAlpha': '80',
                    'toolTipBorderRadius': '2',
                    'toolTipPadding': '5',
                    'exportEnabled': '1',
                    'labelDisplay': 'rotate',
                    'slantLabel': '1',
                    'baseFontSize': '11',
                    'formatNumberScale': '0',
                    'thousandSeparator': ',',
                    'yAxisValueDecimals': '2',
                    'exportFileName': 'Time Series (Quality)',
                    'forceDecimals': '1',
                    'forceYAxisValueDecimals': '1'
                },
                'categories': [{
                    'category': [{
                        'label': '01-01-2012'
                    }, {
                        'label': '03-01-2012'
                    }, {
                        'label': '05-01-2012'
                    }, {
                        'label': '10-01-2012'
                    }, {
                        'label': '16-01-2012'
                    }]
                }],
                'dataset': [{
                    'seriesname': 'Gujarat',
                    'data': [{
                        'value': '20.87'
                    }, {
                        'value': '55.01'
                    }, {
                        'value': '14.47'
                    }, {
                        'value': '7.55'
                    }, {
                        'value': '9.57'
                    }]
                }],
                'trendlines': [{
                    'line': [{
                        'startvalue': '18.938156939211045',
                        'color': '#1aaf5d',
                        'displayvalue': '18.94',
                        'valueOnRight': '1',
                        'thickness': '2'
                    }]
                }]
            },
            "dataFormat": "json",
            "renderAt": "TimeSeries_div",
        }).render();
    });
</script>
@endsection