MINI Sh3ll

@extends('layouts.main')
@section('title', 'Panel')
@section('content')
@section('style')
<link href="{{ asset('css/charts.css')}}" rel="stylesheet"/>
@endsection
<!--begin::Portlet-->
<div class="m-content">
    <div class="row">
        <div class="m-portlet m-portlet--mobile filter_row">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon m--hide">
                            <i class="la la-gear"></i>
                        </span>
                        <h3 class="m-portlet__head-text">
                            Add Panel
                        </h3>
                    </div>
                </div>
                <div class="m-portlet__head-tools">
                    <a href="{{ route('panels.index') }}" class="btn btn-sm btn-accent m-btn m-btn--custom m-btn--icon m-btn--air">
                        <span>
                            <i class="la la-arrow-left"></i>
                            <span>
                                Back
                            </span>
                        </span>
                    </a>
                </div>
            </div>
            <form class="m-form m-form--fit m-form--label-align-right" method="POST" autocomplete="off" role="form">
                {{ csrf_field() }}
                <div class="m-portlet__body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group m-form__group">
                                <label for="exampleInputEmail1">
                                    Company Name
                                </label>
                                <select class="form-control" name="company_id" id="company_id">
                                    <option value="">Select Company</option>
                                   @foreach($companies as $company)
                                    <option value="{{$company->id}}">
                                        {{$company->company_name}}
                                    </option>
                                    @endforeach
                                </select>
                                <span class="m-form__help"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                            <div class="form-group m-form__group">
                                <label class="">
                                    Select Plant 
                                </label><br>
                                <select class="form-control" id="plants" name="plant" disabled
                                data-parsley-required="required"
                                data-parsley-required-message='Please select plant user' required>
                                <option value="">Select Plant</option>
                                 </select>
                                <span class="m-form__help"></span>
                            </div>
                         </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group m-form__group">
                                <label for="exampleInputEmail1">
                                    API
                                </label>
                                <select class="form-control" name="panel" id='panel'>
                                    <option value="">Select Panel</option>
                                   @foreach($registerAPI as $api)
                                    <option value="{{$api->id}}" data-api="{{$api}}">
                                        {{ucfirst($api->name)}}
                                    </option>
                                    @endforeach
                                </select>
                                <span class="m-form__help"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="container-chart">
                        <div class="col-md-6">
                            <div class="form-group m-form__group">
                                <label for="exampleInputEmail1">
                                    Display Type
                                </label>
                                <select class="form-control" name="chart" id='chart'>
                                    <option value="">Select Display Type</option>
                                    @foreach($chartTypes as $chart)
                                    <option value="{{$chart['key']}}">
                                        {{ucfirst($chart['name'])}}
                                    </option>
                                    @endforeach
                                </select>
                                <span class="m-form__help"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row" id="container-date" >
                        <div class="col-md-6">
                            <div class="form-group m-form__group">
                                <label class="show_status"> Select Date </label>
                                <div class="m-input-icon m-input-icon--right" >
                                    <input type="text" class="form-control m-input" name="from_date" id="graph_datepicker_3" class = "graph_datepicker_3"placeholder="MM/DD/YYYY">
                                    <span class="m-input-icon__icon m-input-icon__icon--right">
                                        <span>
                                            <i class="la la-calendar"></i>
                                        </span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="m-portlet__foot m-portlet__foot--fit">
                    <div class="m-form__actions">
                        <button type="button" class="btn btn-warning" id="preview" disabled>
                            Preview
                        </button>
                        <button type="button" class="btn btn-primary" id="submit" disabled>
                            Submit
                        </button>
                        <button type="reset" class="btn btn-secondary">
                            Cancel
                        </button>
                    </div>
                </div>
            </form>
            
        </div> 
    </div>
    <div class="row graph-graphical"  id="graph_numeric_container_1">
        <div class="col-md-12 m-portlet m-row--col-separator-xl" >
            <div class="m-portlet__body">
                <div class="row">
                    <div class="col-md-12 col-lg-6 col-xl-3 card graph-numeric">
                        <div class="m-widget24">
                            <div class="m-widget24__item">
                                <h4 class="m-widget24__title" id="numeric_title_1"></h4> 
                                <br>
                                <span class="m-widget24__desc m--font-success" id="numeric_1">
                                    -  
                                </span>
                                <b id="numeric_unit_1"></b>
                                <div class="m--space-10"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row graph-graphical" id="graph_numeric_container_2">
        <div class="col-md-12 m-portlet m-row--col-separator-xl" >
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <span class="m-portlet__head-icon m--hide">
                            <i class="la la-gear"></i>
                        </span>
                        <h3 class="m-portlet__head-text api_name" id="numeric_title_2"></h3><span class="date">&nbsp;&nbsp;<b></b></span>
                    </div>
                </div>
                <div class="col-lg-4 col-md-9 col-sm-12 m-input-icon m-input-icon--right graph_datepicker graph_datepicker_2" style="float:right;">
                    <input type='text' class="form-control" id="graph_datepicker_2" readonly placeholder="Select month" style="margin-top: 15px;">
                    <span class="m-input-icon__icon m-input-icon__icon--right">
                        <span>
                            <i class="la la-calendar"></i>
                        </span>
                    </span>
                </div>
            </div>
            <div class="m-widget1 m-portlet__body">
                <div id="loader_2" class="text-center">
                    <img src="{{asset('image/loader.gif')}}">
                </div>
                <div id="no-response_2" style="display: none;">
                    <span>No Record Found</span>
                </div>
                <div id="container_graphical_2">
                    <canvas id="graphical_2" height="280" width="500"></canvas>
                </div>
            </div>
        </div>
    </div>
</div>
<!--end::Portlet-->
@endsection

@section('style')
<style type="text/css">
    
</style>
@endsection
@section('script')
<script src="{{asset('js/Chart.bundle.js')}}" charset="utf-8"></script>
<script src="{{asset('js/Chart.min.js')}}"></script>
<script src="{{asset('js/utils.js')}}"></script>
<script src="{{asset('js/graphCharts.js')}}" type="text/javascript"></script>

<script type="text/javascript">
    var API_URL = '{{route("numericData")}}';
    var Graph_URL = '{{route("getGraphData")}}';
$(document).ready(function(){
    
    $('#chart').prop('disabled', true);
    $("#container-chart").hide();
    $("#container-date").hide();
    $("#graph_numeric_container_1,#graph_numeric_container_2").hide();
       
    $('#panel').on('change',function(){
        var data = $('#panel').find(":selected").data('api');
        if(data && data.plot_type==1){
            $("#container-chart").show();
            $("#container-date").show();
            $('#chart').prop('disabled', false);
            
        }else{
            $('#chart').prop('disabled', true);
            $("#container-chart").hide();
             $("#container-date").hide();
        }
        enabledButton();

        var api = {
            id:3
        };  
        var apiDetails = data;
        if(apiDetails.graph_duration==4 || apiDetails.graph_duration==5 ) {
            $(".graph_datepicker_"+api.id).hide();
        } else {
            $(".graph_datepicker_"+api.id).show();

        }
        $('#graph_datepicker_3').val('');
        intialiseDatePicker(api,apiDetails);
        // var datePickerOption = {
        //     todayHighlight:!0,
        //     setDate:new Date(),
        //     endDate: new Date(),
        //     format: "yyyy-mm-dd",
        //     viewMode: "days", 
        //     minViewMode: "days",
        //     orientation:"bottom left", 
        //     autoclose:true,
        //     inline: false,
        // };
        // var placeHolder = 'Select Month';
        // if(apiDetails.graph_duration == 1){
        //     datePickerOption.format = 'd MM, yyyy';
        //     datePickerOption.dateFormat = 'd MM, yyyy';
        //     datePickerOption.minViewMode = 'days';
        //     placeHolder = 'Select Days';
        // }
        // else if(apiDetails.graph_duration == 2 ) {
        //     datePickerOption.format = 'MM, yyyy';
        //     datePickerOption.dateFormat = 'MM, yyyy';
        //     datePickerOption.minViewMode = 'months';
        // }else if(apiDetails.graph_duration == 3 ) {
        //     datePickerOption.format = 'yyyy';
        //     datePickerOption.dateFormat = 'yyyy';
        //     datePickerOption.minViewMode = 'years';
        //     placeHolder='Select year';
        // }

        // //Set placeholder for input
        // $("#graph_datepicker_"+api.id).attr('placeholder',placeHolder);

        // //Setup Datepicker
        // $("#graph_datepicker_"+api.id).datepicker('remove');
        // $("#graph_datepicker_"+api.id).datepicker(datePickerOption);
        var api = {
                id:2
            }; 
        var $this = $("#graph_numeric_container_"+api.id);
        $(".graph_datepicker_"+api.id).on('changeDate', function(selected) {
            //Update Graph when date changes
            var api = {
                id:2
            }; 

            var m = '';
            m = moment($("#graph_datepicker_"+api.id).datepicker("getDate"));
            var extraParams = {};
            extraParams.date = m.format('YYYY-MM');
            extraParams.day = m.format('YYYY-MM-DD');
            extraParams.year = m.format('YYYY');
             var graphData = {
                register_api:data,
                id:2
            };
            
            //intialiseDatePicker(api,data);
            plotGraphicalGraph($this,graphData,$('#chart').val(),api.id,extraParams);
            $(this).datepicker("hide");
            $('#graph_datepicker_2').val('');
            $(".datepicker-inline").remove();

        });
    });


    $("#preview").on("click",function(){
        var api = {
                id:3
            }; 
        var m = '';
        m = moment($("#graph_datepicker_"+api.id).datepicker("getDate"));
        if(m.isValid()){
            var extraParams = {};
            extraParams.date = m.format('YYYY-MM');
            extraParams.day = m.format('YYYY-MM-DD');
            extraParams.year = m.format('YYYY');
        } else{
                var extraParams = {};
                m = moment(new Date());
                var extraParams = {};
                extraParams.date = m.format('YYYY-MM');
                extraParams.day = m.format('YYYY-MM-DD');
                extraParams.year = m.format('YYYY');
        }
        $('.api_name').html('');
        $('#graph_datepicker_2').val('');
        var api = {
            id:2
        }; 
        var data = $('#panel').find(":selected").data('api');
        $('.api_name').html(data.name);

        intialiseDatePicker(api,data);
        
        if(data && data.plot_type==1){
            $("#graph_numeric_container_1").hide();
            $("#graph_numeric_container_2").show();
            var graphData = {
                register_api:data,
                id:2,
                type:'preview'
            };
            if($("#start_val").val()){}
            plotGraphicalGraph($("#graph_numeric_container_2"),graphData,$("#chart").val(),2, extraParams);
        }else{
            $("#graph_numeric_container_1").show();
            $("#graph_numeric_container_2").hide();
            $("#numeric_title_1").text(data.name);
            plotNumericGraph($("#graph_numeric_container_1"),{
                register_api:data,
                id:1
            });
        }
    });

     $('#company_id').change(function () {
        $('#plants').prop('disabled', true);
        var company_id = this.value;
        $.ajax({
            data: {'company_id': company_id},
            type: 'get',
            url: "{{route('getCompanyPlants')}}",
            dataType: "json",
            success: function (response) {
                $('#plants').prop('disabled', false);
                $('#plants').empty();
                $('#plants').append('<option value="">Please choose one</option>');
                $.each(response, function (index, plantObj) {
                    $('#plants').append('<option value="' + plantObj.id + '">' + plantObj.plant_name + '</option>');
                });
                if(OLD_PLANT && OLD_PLANT.length>0){
                    $("#plants").select2().val(OLD_PLANT).trigger("change");
                    OLD_PLANT=null;
                }
            }
        });
    });
});
$('#submit').on('click',function(){
     
    var company_id = $('#company_id').val();
    var plant_id = $('#plants').val();
    var panel = $('#panel').val();
    var chart_type = $('#chart').val();
     $.ajax({
        data: {'company_id': company_id,'plant_id':plant_id,'panel':panel,status:1,'chart_type':chart_type,"_token": "{{ csrf_token() }}"},
        type: 'POST',
        url: "{{route('panels.store')}}",
        dataType: "json",
        beforeSend: function() {   
        },
        success: function (response) { 
            if(response.success == true){
                swal("Done!", "Panel added successfully!", "success");
            }
            else{
                swal("Done!", "Something Went Wrong !!!", "error");
            }
        }
    });
});
$('#company_id').on('change',function(){
    enabledButton();
});

$('#chart').on('change',function(){
    enabledButton();
})
function enabledButton() {
    var company_id = $('#company_id').val();
    var panel = $('#panel').val();
    var chart_type = $('#chart').val();
    var data = $('#panel').find(":selected").data('api');
    if(company_id!='' && panel !=''&& ((data && data.plot_type==2) || (data && data.plot_type==1  && chart_type !=''))) {
        $('#preview').prop('disabled', false);
        $('#submit').prop('disabled', false);
    } else {
        $('#preview').prop('disabled', true);
        $('#submit').prop('disabled', true);
    }
}
function plotNumericGraph(element,data) {
            var ajaxInput = Object.assign({},data.register_api,{
                company_id:$('#company_id').val(),
                plant_id:$('#plants').val(),
                status:1});
            element.find("#numeric_"+data.id).text('-');
            $.ajax({
                url: API_URL,
                type: "GET",
                dataType:'json',
                data: ajaxInput,
                success: function(response) {
                    element.find("#numeric_"+data.id).text(response.value);
                    element.find("#numeric_unit_"+data.id).text(response.unit);
                },
                error: globalErrorHandler
            });

}
function plotGraphicalGraph(element,data,chart_type,id,extra) {
            if(!extra){
                extra = {};
            }
            var ajaxInput = Object.assign({},data.register_api,{
                company_id:$('#company_id').val(),
                plant_id:$('#plants').val(),
                status:1,
                type:data.type
            },extra);
            if(ajaxInput.graph_duration==1){
                var date = formatDate(ajaxInput,new Date(extra.day));
                $('.date').html('<b>'+'('+date+')'+'</b>');
            } else if(ajaxInput.graph_duration==2){
                var month = formatDate(ajaxInput,new Date(extra.date));
                $('.date').html('<b>'+'('+month+')'+'</b>');
            } else if(ajaxInput.graph_duration==3){
                $('.date').html('<b>'+'('+extra.year+')'+'</b>');
            }
           
            $.ajax({
                'async' : false,
                url: Graph_URL,
                type: "GET",
                dataType:'json',
                data: ajaxInput,
                success: function(response) {

                    plotChart(response,id,ajaxInput,chart_type)
                    
                },
                error: globalErrorHandler
            });
}

function globalErrorHandler(xhr) {
    //TODO:: Handle error for ajax error
    //IF required show toaster message
}

function intialiseDatePicker(api,apiDetails) {
    $("#graph_datepicker_"+api.id).datepicker('remove');
            var datePickerOption = {
            todayHighlight:!0,
            setDate:new Date(),
            endDate: new Date(),
            format: "yyyy-mm-dd",
            viewMode: "days", 
            minViewMode: "days",
            orientation:"bottom left", 
            autoclose:true,
            inline: false,
        };
        var placeHolder = 'Select Month';
        if(apiDetails.graph_duration == 1){
            datePickerOption.format = 'd MM, yyyy';
            datePickerOption.dateFormat = 'd MM, yyyy';
            datePickerOption.minViewMode = 'days';
            placeHolder = 'Select Days';
        }
        else if(apiDetails.graph_duration == 2 ) {
            datePickerOption.format = 'MM, yyyy';
            datePickerOption.dateFormat = 'MM, yyyy';
            datePickerOption.minViewMode = 'months';
        }else if(apiDetails.graph_duration == 3 ) {
            datePickerOption.format = 'yyyy';
            datePickerOption.dateFormat = 'yyyy';
            datePickerOption.minViewMode = 'years';
            placeHolder='Select year';
        }

        //Set placeholder for input
        $("#graph_datepicker_"+api.id).attr('placeholder',placeHolder);

        //Setup Datepicker
        
        $("#graph_datepicker_"+api.id).datepicker(datePickerOption);
}
function formatDate(ajaxInput,date) {
  var monthNames = [
    "Jan", "Feb", "Mar",
    "Apr", "May", "Jun", "Jul",
    "Aug", "Sep", "Oct",
    "Nov", "Dec"
  ];

  var day = date.getDate();
  var monthIndex = date.getMonth();
  var year = date.getFullYear();

  if(ajaxInput.graph_duration==1){
    return  day +' '+ monthNames[monthIndex] + ' ' + year;
  }else{
    return monthNames[monthIndex] + ' ' + year;
  }
}
</script>
@endsection