MINI Sh3ll

@extends('layouts.main')
@section('title', 'Dashboard')
@section('content')
@section('style')
<link href="{{ asset('css/charts.css')}}" rel="stylesheet"/>
<style type="text/css">
    .plant_names{
        font-size: 15px;
        font-weight: 400;
    }
</style>
@endsection
<div class="m-content">
    <div class="row m-portlet " >
        <div class="m-portlet--mobile filter_row m-form m-form--fit m-form--label-align-right">
            <div class="m-portlet__body">
                <form class="m-form m-form--fit m-form--label-align-right" autocomplete="off" data-parsley-validate="parsley">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group m-form__group">
                                <label class="show_status">  Company </label>
                                <select class="form-control m-select2" id="m_select2_1" name="param" required>
                                    <option value=""> select company </option>
                                    @foreach($companies as $company)
                                    <option value="{{$company->id}}"  data-company="{{$company->id}}" >
                                        {{$company->company_name}}
                                    </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                         <div class="col-md-6">
                            <div class="form-group m-form__group">
                                <label class="">
                                    Select Plant 
                                </label><br>
                                <select class="form-control" id="m_select2_5" name="plant[]" disabled
                                multiple="multiple">
                                <option value="">Select Plant</option>
                                 </select>
                                <span class="m-form__help"></span>
                            </div>
                         </div>
                    </div>
                    <div style="padding-left: 30px;margin-top: 20px;">
                        <button type="submit"  class="btn btn-sm btn-accent m-btn m-btn--custom m-btn--icon m-btn--air  search_plant">
                            Get Details 
                        </button>
                        <a href="{{route('home')}}">
                            <button type="button"  class="btn btn-sm btn-accent m-btn m-btn--custom m-btn--icon m-btn--air">
                                Reset
                            </button>
                        </a>
                    </div>
                </form>
              
            </div>
            <div class="m-portlet__foot m-portlet__foot--fit">
                <div class="m-form__actions">
                    <!-- @if(\Auth::user()->role_id != config('constants.role.portal_support.id') && \Auth::user()->role_id != config('constants.role.user.id'))
                    <a href="{{ route('addPanel') }}" class="btn btn-sm btn-accent m-btn m-btn--custom m-btn--icon m-btn--air" style="float: right">
                        <span>
                            <span>
                                Add Panel
                            </span>
                        </span>
                    </a> -->
                    <!-- @endif -->
                    <!-- <h5 class="display-title details" style="display: none;">Plant Details</h5>
 -->
                    <div class="parentClass">
                        <div class="plant_names"></div>
                    </div>
                     

                    <!--begin:: Widgets/Stats2-1 -->
                    <div class="m-portlet__body">
                       
                        <!--begin: Datatable -->
                        <div class="row">
                            @foreach($numericAPI as $api)
                            <div class="col-md-12 col-lg-6 col-xl-3 card graph-numeric" data-api="{{$api}}">
                                    <!--begin::Total Profit-->
                                    <div class="m-widget24">
                                            <div class="m-widget24__item">
                                                    <h4 class="m-widget24__title">
                                                            {{ucfirst($api->register_api->name)}}
                                                            
                                                    </h4> 
                                                    <br>
                                                    <span class="m-widget24__desc m--font-success" id="numeric_{{$api->id}}">
                                                          -  
                                                    </span>
                                                    <b id="numeric_unit_{{$api->id}}"></b>
                                                   
                                                    <div class="m--space-10"></div>
                                            </div>
                                    </div>
                                    <!--end::Total Profit-->
                            </div>
                            @endforeach
                        </div>
                    </div>
                    <!--end:: Widgets/Stats2-1 -->
                </div>
            </div>
        </div> 
    </div>
    @foreach($graphicalAPI as $api)
     <div class="row graph-graphical" data-api="{{$api}}" data-charttype = "{{$api->chart_type}}" data-id = {{$api->id}}>
        <div class="col-md-12 m-portlet m-row--col-separator-xl" >
            <!--begin:: Widgets/St ats2-1 -->
            <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">
                           {{ucfirst($api->register_api->name)}}&nbsp;&nbsp;<b id='date_palcceholder_{{$api->id}}'></b>
                        </h3>
                    </div>
                </div>

                <div class="col-lg-4 col-md-9 col-sm-12 m-input-icon m-input-icon--right graph_datepicker graph_datepicker_{{$api->id}}" style="float:right;">
                    <input type='text' class="form-control" id="graph_datepicker_{{$api->id}}" 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_{{$api->id}}" class="text-center">
                    <img src="{{asset('image/loader.gif')}}"></img>
                </div>
                <div id="no-response_{{$api->id}}" style="display: none;">
                    <span>No Record Found</span>
                </div>
                <div id="container_graphical_{{$api->id}}">
                    <canvas id="graphical_{{$api->id}}" height="280" width="500"></canvas>
                </div>
            </div>
            <!--end:: Widgets/Stats2-1 -->
        </div>
    </div>
    @endforeach
</div>
<!--end::Portlet-->
@endsection
@section('style')
<style>
    .numeric_data{
        margin-top: 25px;
    }
</style>
@endsection


@section('script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js" integrity="sha256-VeNaFBVDhoX3H+gJ37DpT/nTuZTdjYro9yBruHjVmoQ=" crossorigin="anonymous"></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 >
    $(document).ready(initGraph);
    var COMPANY_ID = '{{$companyID}}';
    var API_URL = '{{route("numericData")}}';
    var Graph_URL = '{{route("getGraphData")}}';
    var OLD_PLANT = @json($plants);

    function getSelectedPlantIds() {
        if(OLD_PLANT){
            if(OLD_PLANT.length != 0){ 
            }
            return OLD_PLANT.join();
        } 
        return $("#m_select2_5").val().join();
    }

    function getCompanyID() {
        if(COMPANY_ID){
            return COMPANY_ID;
        }
       return $("#m_select2_1").val();
    }

    function initGraph() {
        $('.details').hide();
        setTimeout(function(){
            $("#m_select2_1").val(COMPANY_ID).trigger('change');
            COMPANY_ID = null;  
        },10);
        var $numericData = $(".graph-numeric");

        $numericData.each(function(index,item){
            var $this = $(item);
            var data = $this.data("api");
            plotNumericGraph($this,data);
        });

        var $graphicalData = $(".graph-graphical");

        $graphicalData.each(function(index,item){
            var $this = $(item);
            var data = $this.data("api");
            var chart_type = $this.data("charttype");
            var id = $this.data("id");
            
            plotGraphicalGraph($this,data,chart_type,id);

            var api = data;
            var apiDetails = data.register_api;
            if(apiDetails.graph_duration==4) {
                $(".graph_datepicker_"+api.id).hide();
            } else {
                $(".graph_datepicker_"+api.id).show();
            }
            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);

            $(".graph_datepicker_"+api.id).on('changeDate', function(selected) {
                //Update Graph when date changes
    
                var  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');
                plotGraphicalGraph($this,data,chart_type,id,extraParams);
                $(this).datepicker("hide");
                $(".datepicker-inline").remove();

            });
        });

    }

    function plotNumericGraph(element,data,extra) {
            if(!extra){
                extra = {};
            }
            var status = 1;
            var page = 'dashboard';
    
            if(getCompanyID().lenght === 0 && getSelectedPlantIds().length === 0 ){
              status = 0;  
            }
            var ajaxInput = Object.assign({},data.register_api,{
                company_id:getCompanyID(),
                plant_id:getSelectedPlantIds(),
                status:status ,page:page},extra);
            element.find("#numeric_"+data.id).text('-');
            $.ajax({
                url: API_URL,
                type: "GET",
                dataType:'json',
                data: ajaxInput,
                success: function(response) { 
                     $('.plant_names').remove();
                    $('.parentClass').append('<div class="plant_names mt-3"> <h4 class="font-weight-bold">Plant Details</h4> </br>'+response.plants+'</div>');
                    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 status = 1;
            var page = 'dashboard';

            if(getCompanyID().lenght === 0 && getSelectedPlantIds().length === 0){
              status = 0;  
            }

            var ajaxInput = Object.assign({},data.register_api,{
                company_id:getCompanyID(),
                plant_id:getSelectedPlantIds(),
                status:status,
                page:page
            },extra);
            
            $.ajax({
                'async' : false,
                url: Graph_URL,
                type: "GET",
                dataType:'json',
                data: ajaxInput,
                success: function(response) {
                    $('.plant_names').remove();
                    $('.parentClass').append('<div class="plant_names mt-3"> <h4 class="font-weight-bold">Plant Details</h4> </br>'+response.url.plants+'</div>');
                    plotChart(response,id,ajaxInput,chart_type);
                },
                error: globalErrorHandler
            });
    }

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

</script>


<script>
$(document).ready(function () {

    $('#m_select2_1').change(function () {
        $('#m_select2_5').prop('disabled', true);
        var company_id = $(this).find(':selected').data('company')
        $.ajax({
            data: {'company_id': company_id},
            type: 'get',
            url: "{{route('getCompanyPlants')}}",
            dataType: "json",
            success: function (response) {
                $('#m_select2_5').prop('disabled', false);
                $('#m_select2_5').empty();
                $('#m_select2_5').append('<option value="">Please choose one</option>');
                $.each(response, function (index, plantObj) {
                    $('#m_select2_5').append('<option value="' + plantObj.id + '">' + plantObj.plant_name + '</option>');
                });
                if(OLD_PLANT && OLD_PLANT.length>0){
                    $("#m_select2_5").select2().val(OLD_PLANT).trigger("change");
                    OLD_PLANT=null;
                }
            }
        });
    });

});

function formatDate(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();

  return monthNames[monthIndex] + ' ' + year;
}
</script>
@endsection