@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>GEC Resource Assessment</h4>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- Page-header end -->

    <!-- Page-body start -->
    <div class="page-body">
        <div class="card">
            <div class="card-block">

                <div class="row">
                    <div class="col-md-2 mb-0 administrative">
                        <label for="validationCustom02">State<span class="red">*</span></label>
                        <select class="form-control StateCodeFilter" name="stateCode" id="stateCode">
                            <option value="">--Select--</option>
                            @foreach ($states as $state)
                                <option value="{{ $state->StateCode }}">{{ $state->StateName }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-0 administrative">
                        <label for="validationCustom02">District</label>
                        <select class="form-control district_id" name="DistrictCode" id="DistrictCode">
                            <option value="">--All--</option>
                        </select>
                    </div>

                    <div class="col-md-2 mb-0 ">
                        <label for="exampleSelect1">Mandal</label>
                        <select id="mandal" class="form-control">
                            <option value="">--All--</option>
                        </select>
                    </div>
                    <div class="col-md-2 mb-0 ">
                        <label for="exampleSelect1">Water Shed</label>
                        <select id="watershed" class="form-control">
                            <option value="">--All--</option>
                        </select>
                    </div>
                    <div class="col-md-2 mb-0 ">
                        <label for="exampleSelect1">Year </label>
                        <select class="form-control" name="year" id="year">
                            @foreach ($years as $year)
                                <option value="{{ $year->Value }}">{{ $year->Text }}</option>
                            @endforeach

                        </select>
                    </div>


                    <div class="col-md-2 mt-4 ">
                        <input type="bttton" class="form-control btn btn-primary text-white filter" name="Search"
                            value="Filter">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <!-- Zero config.table start -->
                <div class="card">
                    <div class="card-block">

                        <div class="">
                            @include('common.error')
                            <table id="simpletable" class="table table-striped table-bordered nowrap">
                                <thead>

                                    <tr role="row">
                                        <th>District</th>
                                        <th>Annual GW Recharge (ha.m)</th>
                                        <th>Annual Extractable GWResource (ha.m)</th>
                                        <th>GW Extraction foralluses (ha.m)</th>
                                        <th>Stage of GroundWater Extraction (%)</th>
                                        <th>Net Annual GW Availability for FutureUse (ha.m)</th>
                                    </tr>
                                </thead>
                                <tbody>

                                </tbody>

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

            </div>

        </div>
        <div class="row">
            <div class="col-sm-12">
                <!-- Zero config.table start -->
                <div class="card">
                    <div class="card-block">
                        <div id="well-data-available"> Loading data for chart...</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/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>
        $(function() {

            $(".filter").click(function() {
                var stateCode = $("#stateCode").val();
                var DistrictCode = $("#DistrictCode").val();

                if (stateCode == '') {
                    bootbox.alert('Please select state');
                }

                else if(stateCode != ''){
                    getResults();
                }
            });


            $('#DistrictCode').change(function() {
                districtCode = $(this).val();
                if (districtCode != '') {
                    $.get("{{ route('getMandalByDistrict') }}", {
                        'districtCode': districtCode
                    }, function(data) {
                        result = jQuery.parseJSON(data);
                        $('#mandal').html('');
                        $('#mandal').append($("<option></option>")
                            .attr("value", '')
                            .text('--All--'));
                        $.each(result, function(key, item) {
                            // alert(JSON.stringify(item));

                            $('#mandal').append($("<option></option>")
                                .attr("value", item.BlockCode)
                                .text(item.Block_Taluk));
                        });
                    })
                }
            });

            $('#mandal').change(function() {
                districtCode = $('#DistrictCode').val();
                mandalCode = $(this).val();
                if ((districtCode != '') && (mandalCode != '')) {
                    $.get("{{ route('getWaterShed') }}", {
                        'districtCode': districtCode,
                        'mandalCode': mandalCode
                    }, function(data) {
                        result = jQuery.parseJSON(data);
                        $('#watershed').html('');
                        $('#watershed').append($("<option></option>")
                            .attr("value", '')
                            .text('--All--'));
                        $.each(result, function(key, item) {
                            // alert(JSON.stringify(item));

                            $('#watershed').append($("<option></option>")
                                .attr("value", item.Value)
                                .text(item.Text));
                        });
                    })
                }
            });



            getResults();


        });




        function getResults() {
            data = {};
            stateCode = $('#stateCode').val();
            districtCode = $('#DistrictCode').val();
            mandal = $('#mandal').val();
            watershed = $('#watershed').val();
            year = $('#year').val();

            var data = {
                stateCode: stateCode,
                districtCode: districtCode,
                mandal: mandal,
                watershed: watershed,
                year: year
            };

            var table = $('#simpletable').DataTable({
                "processing": false,
                "serverSide": false, //Feature control DataTables' servermside processing mode.
                "bFilter": true,
                "bLengthChange": false,
                "ordering": false,
                "iDisplayLength": 25,
                "responsive": true,
                "bDestroy": true,
                "ajax": {
                    "url": "{{ route('GEC') }}",
                    "type": "GET",
                    "data": data,
                    "dataType": "json",
                    "dataSrc": function(jsonData) {
                        $('#report').show();


                        result = jQuery.parseJSON(jsonData.chart)



                        Highcharts.chart('well-data-available', {
                            chart: {
                                type: 'column'
                            },
                            title: {
                                text: 'GEC Resource Assessment',
                                align: 'center'
                            },
                            subtitle: {
                                text: 'District/Mandal wise',
                                align: 'center'
                            },
                            xAxis: {
                                categories: result.xAxis,
                                crosshair: true,
                                accessibility: {
                                    description: 'Countries'
                                }
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: '(ha.m)'
                                }
                            },
                            tooltip: {
                                valueSuffix: ''
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                            },
                            series: result.Data
                        });


                        return jsonData.data;
                    }
                }
            });


        }
    </script>
@endsection