@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 -->
    @php $user = Auth::user(); @endphp
    <!-- Page-body start -->
    <div class="page-body">
        <div class="card mb-2">
            <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-6 col-lg-2">
                        <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="3">State</option>
                            <option value="1">District</option>
                            <option value="6">WellNo</option>
                            <option value="2">Block</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" 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" style="display: none">
                        <label for="validationCustom02">Well Type</label>
                        <select class="form-control Well_Type" name="Well_Type" id="Well_Type">
                            <option value="">--Select--</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-2 mb-3">
                        <label>Filter By <span class="red">*</span> </label>
                        <select class="form-control filterType " name="filterType" id="filterType">
                            <option value="">--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 season_div" style="display:none">
                        <label>Season</label>
                        <select class="form-control" name="season" id="season">
                            <option value="">--Select--</option>
                            <option value="1">Postmonsoon</option>
                            <option value="2">Premonsoon</option>
                        </select>
                    </div>

                    <div class="col-md-2 mb-0 filter month_div" style="display:none">
                        <label>Month<span class="red">*</span></label>
                        <select class="form-control" name="month" id="month">
                            <option value="">--Select--</option>
                            @for ($month = 1; $month <= 12; $month++)
                                @php $monthName = date("M", mktime(0, 0, 0, $month, 1)); @endphp
                                <option value='{{ $month }}'>{{ $monthName }}</option>
                            @endfor
                        </select>
                    </div>

                    <div class="col-md-2 mb-0 filter from_year_div" style="display:none">
                        <label>From Year<span class="red">*</span></label>
                        <select class="form-control" name="fromYear" id="fromYear">
                            <option value="">--Select--</option>
                            @for ($year = date('Y'); $year >= 1953; $year--)
                                <option value='{{ $year }}'>{{ $year }}</option>
                            @endfor
                        </select>
                    </div>

                    <div class="col-md-2 mb-0 filter from_date_div" style="display:none">
                        <label for="exampleSelect1">From Date </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">
                            <span class="date-text"></span>
                            <i class="date-icon fa fa-calendar" aria-hidden="true"></i>
                        </div>
                    </div>
                    <div class="col-md-2 mb-0 filter to_date_div" style="display:none">
                        <label for="exampleSelect1">To Date </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">
                            <span class="date-text"></span>
                            <i class="date-icon fa fa-calendar" aria-hidden="true"></i>
                        </div>
                    </div>

                    {{-- <div class="col-md-2 mb-0 filter from_date_div" style="display:none">
                        <label>From Date</label>
                        @php $previous_year_date = date('Y-m-d', strtotime('-1 year')); $current_date = date('Y-m-d'); @endphp
                        <input id="fromDate" name="fromDate" type="date" class="form-control" value="{{ $previous_year_date }}" autocomplete="off">
                    </div>

                    <div class="col-md-2 mb-0 filter to_date_div" style="display:none">
                        <label>To Date</label>
                        <input id="toDate" name="toDate" type="date" class="form-control" value="{{ $current_date }}" autocomplete="off">
                    </div> --}}

                    <div class="col-md-2 mt-3 ">
                        <button type="bttton" class="btn btn-primary text-white filterBtn" style="cursor:pointer;"
                            name="Search">Filter</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>
        $(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",
            });


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

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

                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;
                } else if (filterType == '') {
                    bootbox.alert('Please select Filter By');
                    return false;
                }

                var month = $("#month").val();
                var fromYear = $("#fromYear").val();
                var season = $("#season").val();
                var fromDate = $("#fromDate").val();
                var toDate = $("#toDate").val();
                if (filterType == 1) {
                    if (month == '') {
                        bootbox.alert('Please select month');
                        return false;
                    }

                    if (fromYear == '') {
                        bootbox.alert('Please select year');
                        return false;
                    }
                }

                if (filterType == 2) {
                    if (season == '') {
                        bootbox.alert('Please select season');
                        return false;
                    }

                    if (fromYear == '') {
                        bootbox.alert('Please select year');
                        return false;
                    }
                }

                if (filterType == 3) {
                    if (fromDate == '') {
                        bootbox.alert('Please select from date');
                        return false;
                    }

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

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

                StackEQOverlay = '';
                if (filterVal == '') {
                    bootbox.alert('Please select Check box filter');
                    return false;
                }

                var data = {
                    regionID: RegionID,
                    stateCode: stateCode,
                    districtCode: DistrictCode,
                    groupBy: groupBy,
                    filterType: filterType,
                    filterVal: filterVal,
                    year1: year1,
                    month: month,
                    season: season,
                    fromDate: fromDate,
                    toDate: toDate,
                    "_token": "{{ csrf_token() }}"
                };
                var month = parseInt($('#month').val());
                $.ajax({
                    url: "{{ route('HydrographMultiSelect') }}",
                    type: 'POST',
                    data: data,
                    contenttype: "application/x-www-form-urlencoded",
                    datatype: "html",
                    beforeSend: function() {
                        $(".loaderpk").css("display", "block");
                    },
                    complete: function() {
                        $(".loaderpk").css("display", "none");
                    },
                    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) {
                    $("#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) {


                    $("#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 State</li><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="' +
                        stateCode +
                        '"><span class="cr"><i class="cr-icon feather icon-check txt-default"></i></span></label></div></div>' +
                        stateName + '</li>');
                }

                if (groupby == 6) {
                    $(".extra").show();
                }

            });

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

                if (filterType == '2') {
                    $('.season_div').show();
                    $('.from_year_div').show();
                    $('.to_year_div').show();
                }

                if (filterType == '3') {
                    $('.from_date_div').show();
                    $('.to_date_div').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 =