@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>WQ Box Whisker</h4>
                    </div>
                </div>
            </div>

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

                    <div class="col-md-6 col-lg-2">
                        <div class="form-group">
                            <label for="validationCustom02">Param<span class="red">*</span></label>
                            <select class="form-control" id="WQParam" name="WQParam">
                                @foreach ($params as $param)
                                    <option value="{{ $param->para_name }}">{{ $param->para_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <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-6 col-lg-2 StateCodeDiv">
                        <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">
                        <label>Group By<span class="red">*</span></label>
                        <select class="form-control group_by" name="groupBy" id="groupBy">
                            <option value="">--Select--</option>
                            <option value="1">District</option>
                            <option value="2">Block</option>
                            <option value="3">Basin</option>
                            <option value="4">SubBasin</option>
                            <option value="5">Well</option>
                        </select>
                    </div>

                    <div class="col-md-2 mb-3 extra DistrictCodeDiv" style="display: none">
                        <label for="validationCustom02">District</label>
                        <select class="form-control district_id DistrictCodeFilter" name="DistrictCode" id="DistrictCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>

                    <div class="col-md-2 mb-3 extra BlockCodeDiv" style="display: none">
                        <label for="validationCustom02">Block</label>
                        <select class="form-control BlockCodeFilter" name="BlockCode" id="BlockCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>

                    <div class="col-md-2 mb-3 extra BasinCodeDiv" style="display: none">
                        <label for="validationCustom02">Basin</label>
                        <select class="form-control BasinCodeFilter" name="BasinCode" id="BasinCode">
                            <option value="">--Select--</option>
                        </select>
                    </div>



                    <div class="col-md-2 mb-0 ">
                        <label for="exampleSelect1">From Date<span class="red">*</span></label>
                        <div class="date-container w-100">
                            <input type="text" name="fromDate" pattern="\d{1,2}-\d{1,2}-\d{4}"
                                title="Enter in dd-mm-yyyy format" class="form-control datepicker" id="fromDate"
                                placeholder="dd-mm-yyyy" autocomplete="off" maxlength="255" value="{{ date('d-m-Y') }}">
                            <span class="material-symbols-outlined">calendar_month
                            </span>
                        </div>
                    </div>
                    <div class="col-md-2 mb-0 ">
                        <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="toDate" name="toDate" placeholder="dd-mm-yyyy"
                                autocomplete="off" maxlength="255" value="{{ date('d-m-Y') }}"><span
                                class="material-symbols-outlined">calendar_month
                            </span>
                        </div>
                    </div>

                    <div class="col-md-2 mt-3 ">
                        <button type="bttton" class="btn btn-primary text-white filterBtn" style="cursor:pointer;"
                            name="Search">Plot</button>
                    </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" id="check-list-box-div"
                                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">
                                <div id="dvgraph" style="width:100%;"></div>

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


        {{-- <div id='TimeSeries_div'>Chart...</div> --}}


    </div>

    <script type="text/javascript" src="{{ asset('bower_components\fusioncharts\fusioncharts.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bower_components\fusioncharts\fusioncharts.charts.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bower_components\fusioncharts\fusioncharts.theme.fint.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bower_components\fusioncharts\fusioncharts.theme.ocean.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bower_components\fusioncharts\fusioncharts.powercharts.js') }}"></script>



    <script>
        $(function() {

            @if ($user->RoleID == 2)
                $(".RegionFilter").css({
                    "pointer-events": "none",
                    "touch-action": "none",
                    "background": "#e9ecef"
                });

                $(".RegionFilter").trigger('change');
            @endif

            $("#check-list-box-div").hide();

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


            $("#toDate").datepicker({
                autoclose: true,
                dateFormat: "dd-mm-yy",
                changeMonth: true,
                changeYear: true,
                endDate: today,
                orientation: "bottom",
                yearRange: "1969:" + new Date().getFullYear()
            });

            $(".filterBtn").click(function() {
                var WQParam = $("#WQParam").val();
                var RegionID = $("#RegionID").val();
                var stateCode = $("#StateCode").val();
                var DistrictCode = $("#DistrictCode").val();
                var filterType = $("#filterType").val();
                var groupBy = $('#groupBy').val();

                if (WQParam == '') {
                    bootbox.alert('Please select Param');
                    return false;
                } else if (RegionID == '') {
                    bootbox.alert('Please select Region');
                    return false;
                } else if (stateCode == '') {
                    bootbox.alert('Please select State');
                    return false;
                } else if (groupBy == '') {
                    bootbox.alert('Please select Group By');
                    return false;
                }

                var fromDate = $("#fromDate").val();
                var toDate = $("#toDate").val();


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

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

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

                data = {};
                filterVal = $.map($('input[type=checkbox]:checked'), function(n, i) {
                    return n.value;
                }).join(',');

                var data = {
                    groupBy: groupBy,
                    filterVal: filterVal,
                    fromDate: fromDate,
                    toDate: toDate,
                    WQParam: WQParam,
                    "_token": "{{ csrf_token() }}"

                };
                $.ajax({
                    url: "{{ route('WaterQualityBoxWhisker') }}",
                    type: 'POST',
                    data: data,
                    contenttype: "application/x-www-form-urlencoded",
                    datatype: "html",
                    success: function(result) {
                        fusion_chart(result);
                    }
                });


            });

            $('#groupBy').change(function() {
                var groupby = $(this).val();
                $(".extra").hide();
                $("#check-list-box-div").hide();
                $("#check-list-box").html("");

                var stateCode = $("#StateCode").val();
                var stateName = $('#StateCode :selected').text();

                if (groupby == 1) {

                    $(".extra").hide();
                    $('.StateCodeDiv').show();

                    $("#check-list-box-div").show();
                    $('#check-list-box li').remove();

                    $.ajax({
                        type: 'GET',
                        url: "/getDistrictArray",
                        data: 'StateCode=' + stateCode + '&DistrictCode=' + DistrictCode,

                        success: function(data) {
                            if (data != '') {
                                $("#check-list-box").append(
                                    '<li style="display:flex;padding:5px;"><div class="chk-option"><label style="margin:0px" class="check-task"></label></div>Select District</li>'
                                );
                                $.each(data, function(i, district) {
                                    $("#check-list-box").append(
                                        '<li style="display:flex;padding:5px;"><div class="chk-option"><div class="checkbox-fade fade-in-primary"><label style="margin:0px" class="check-task"><input type="checkbox" value="' +
                                        district.DistrictCode +
                                        '"><span class="cr"><i class="cr-icon feather icon-check txt-default"></i></span></label></div></div>' +
                                        district.DistrictName + '</li>');
                                });
                            }
                        }
                    });
                }

                if (groupby == 2) {
                    $(".extra").hide();
                    $('.DistrictCodeDiv').show();
                }

                if (groupby == 3) {

                    $.ajax({
                        type: 'GET',
                        url: "/getBasinByState",
                        data: 'StateCode=' + stateCode,

                        success: function(data) {
                            data = $.parseJSON(data);

                            if (data != '') {
                                $("#check-list-box-div").show();

                                $('#check-list-box li').remove();
                                $("#check-list-box").append(
                                    '<li style="display:flex;padding:5px;"><div class="chk-option"><label style="margin:0px" class="check-task"></label></div>Select Block</li>'
                                );
                                $.each(data, function(i, value) {
                                    $("#check-list-box").append(
                                        '<li style="display:flex;padding:5px;"><div class="chk-option"><div class="checkbox-fade fade-in-primary"><label style="margin:0px" class="check-task"><input type="checkbox" value="' +
                                        value.BasinCode +
                                        '"><span class="cr"><i class="cr-icon feather icon-check txt-default"></i></span></label></div></div>' +
                                        value.BasinName + '</li>');
                                });
                            }

                        }
                    });
                }

                if (groupby == 4) {
                    $(".extra").hide();
                    $('.BasinCodeDiv').show();
                    $('#BasinCode').empty();

                    $.ajax({
                        type: 'GET',
                        url: "/getBasin",
                        data: 'StateCode=' + stateCode,

                        success: function(data) {
                            if (data != '') {
                                $('#BasinCode').html(data);
                            }
                        }
                    });
                }



                if (groupby == 5) {
                    $(".extra").hide();
                    $('.DistrictCodeDiv').show();
                    $('.BlockCodeDiv').show();
                }

            });



            $('#StateCode').on('change', function(e) {
                var StateCode = $(this).val();
                var DistrictCode = '';
                //$('#groupBy').val("");
                //$("#check-list-box").html("");


                $.ajax({
                    type: 'GET',
                    url: "/getDistrict",
                    data: '_token =