@extends('loader')
@extends('layouts.app')
@extends('layouts.master')
@section('content')
      <style type="text/css">
        .font-change{
          font-size: 13px;
          font-weight: 600;
        }
      </style>
      <div class="main-panel dashboard"> 
        <div class="content-wrapper">
          <div class="card" style="padding:10px;background: #f2f2f4;-webkit-box-shadow: 4px 8px 9px -2px rgb(156 156 156 / 30%);">
          <div class="row">
            <div class="col-md-2 font-change">
            {{ trans('language.bar_chart') }}
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/frequency_chart')}}" class="chart-link">{{ trans('language.frequency_chart') }}</a>
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/operating_unit_chart')}}" class="chart-link">{{ trans('language.operating_unit_chart') }}</a>
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/usage_time_chart')}}" class="chart-link">{{ trans('language.usage_time_chart') }}</a>
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/usage_amount_chart')}}" class="chart-link">{{ trans('language.usage_amount_chart') }}</a>
            </div>
          </div>
          <hr>
          <div class="row">
            <div class="col-md-2 font-change">
            {{ trans('language.line_chart') }}
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/operation_status_line_chart')}}" class="chart-link">{{ trans('language.operation_status_line_chart') }}</a>
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/usage_time_line_chart')}}" class="chart-link">{{ trans('language.usage_time_chart') }}</a>
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/usage_amount_line_chart')}}" class="chart-link">{{ trans('language.usage_amount_chart') }}</a>
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/revenue_based_line_chart')}}" class="chart-link">{{ trans('language.revenue_based_chart') }}</a>
            </div> 
          </div>
          <hr>
          <div class="row">
            <div class="col-md-2 font-change">
            {{ trans('language.pie_chart') }}
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/usage_hour_pie_chart')}}" class="chart-link">{{ trans('language.usage_hr_based') }}</a>
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/revenue_based_pie_chart')}}" class="chart-link">{{ trans('language.revenue_based_chart') }}</a>
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/contract_company_revenue_chart')}}" class="chart-link">{{ trans('language.contract_company') }}</a>
            </div>
          </div>
          <hr>
          <div class="row">
            <div class="col-md-2 font-change">
            {{ trans('language.battery_chart') }}
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/battery_level_transition_chart')}}" class="chart-link">{{ trans('language.battery_level_chart') }}</a>
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/battery_replacement_chart')}}" class="chart-link">{{ trans('language.battery_replacement_chart') }}</a>
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/battery_and_usage_chart')}}" class="chart-link" style="color: #c10202;">{{ trans('language.battery_and_usage_chart') }}</a>
            </div>
            <div class="col-md-2 font-change">
              <a href="{{url('/battery_consumption_chart')}}" class="chart-link">{{ trans('language.battery_consumption_chart') }}</a>
            </div>
          </div>
          </div>
          <br>
          <div class="row">
            <div class="col-md-12">
              <form method="POST" id="chart-form" action="{{url('/usage_count_chart_view')}}">
                      @csrf
                <div class="row">
                      <div class="col-md-3">
                        <div class="form-group">
                        <label> {{ trans('language.area') }} </label>
                        <select class="form-control area" name="area" id="area" required="">
                        <option value="">{{ trans('language.all') }}</option>
                        @foreach($areas as $area)
                        <option value="{{$area->id}}">{{$area->area}}</option>
                        @endforeach
                        </select>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                        <label> {{ trans('language.location') }} </label>
                        <select class="form-control location" name="location_id" id="location" required="">
                        <option value="">{{ trans('language.all') }}</option>
                        @foreach($locations as $location)
                        <option value="{{$location->location_id}}">{{$location->location}}</option>
                        @endforeach
                        </select>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                        <label> {{ trans('language.landmark') }} </label>
                        <select class="form-control landmark" name="landmark" id="landmark" required="">
                        <option value="">{{ trans('language.all') }}</option>
                        @foreach($landmarks as $landmark)
                        <option value="{{$landmark->landmark}}">{{$landmark->landmark}}</option>
                        @endforeach
                        </select>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                        <label> {{ trans('language.device_name') }} </label>
                        <select class="form-control" name="device" id="device" required="">
                        <option value="">{{ trans('language.all') }}</option>
                        @foreach($devices as $device)
                        <option value="{{$device->id}}">{{$device->device_name}}</option>
                        ?>
                        @endforeach
                        </select>
                        </div>
                      </div>
                      <div class="col-md-3">
                        <div class="form-group">
                        <label> {{ trans('language.type') }} </label>
                        <select class="form-control" name="type" id="type" required="required">
                        <option value="">{{ trans('language.select_type') }}</option>
                        <option value="weekly" selected>{{ trans('language.weekly') }}</option>
                        <option value="monthly">{{ trans('language.monthly') }}</option>
                        </select>
                        </div>
                      </div>
                      <div class="col-md-3" id="year">
                        <div class="form-group">
                        <label> {{ trans('language.year') }} </label>
                        <select class="form-control" name="year" id="year-id">
                        <option value="2020" >2020</option>
                        <option value="2021" >2021</option>
                        <option value="2022" >2022</option>
                        <option value="2023" >2023</option>
                        <option value="2024" >2024</option>
                        <option value="2025" >2025</option>
                        <option value="2026" selected>2026</option>
                        <option value="2027" >2027</option>
                        <option value="2028" >2028</option>
                        <option value="2029" >2029</option>
                        <option value="2030" >2030</option>
                        <option value="2031" >2031</option>
                        <option value="2032" >2032</option>
                        <option value="2033" >2033</option>
                        <option value="2034" >2034</option>
                        <option value="2035" >2035</option>
                        </select>
                        </div>
                      </div>
                      <div class="col-md-3" id="month" style="display:none;">
                        <div class="form-group">
                        <label> {{ trans('language.month') }} </label>
                        <select class="form-control" name="month" id="month-id">
                        <option value="1" >{{ trans('language.january') }}</option>
                        <option value="2" >{{ trans('language.february') }}</option>
                        <option value="3" >{{ trans('language.march') }}</option>
                        <option value="4" >{{ trans('language.april') }}</option>
                        <option value="5" selected>{{ trans('language.may') }}</option>
                        <option value="6" >{{ trans('language.june') }}</option>
                        <option value="7" >{{ trans('language.july') }}</option>
                        <option value="8" >{{ trans('language.aug') }}</option>
                        <option value="9" >{{ trans('language.sept') }}</option>
                        <option value="10" >{{ trans('language.oct') }}</option>
                        <option value="11" >{{ trans('language.nov') }}</option>
                        <option value="12" >{{ trans('language.dec') }}</option>                        
                        </select>
                        </div>
                      </div>
                      <div class="col-md-3" id="weeks">
                        <div class="form-group">
                        <label> {{ trans('language.week') }} </label>
                        <select class="form-control" name="week" id="week">
                        </select>
                        </div>
                      </div>
                     <div class="col-md-2">
                      <br>
                          <button type="button" id="submit-button" class="btn btn-primary" style="margin-top: 15px;">
                              {{ trans('language.submit') }}
                            </button>
                      </div>
                    
                </div>
              </form>
            </div>


            <div class="col-lg-12 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                <div id="chart-div" style="width: 800px; height: 600px;"></div>  
                </div>
              </div>
            </div>
 
          </div>
  
  
    

        </div>
        <!-- content-wrapper ends -->
        <!-- partial:partials/_footer.html -->

        <!-- partial -->
      </div>
      <!-- main-panel ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script type="text/javascript">

      var chartData;
      var subtitle;

      google.charts.load('current', {'packages':['corechart']});
      //google.charts.setOnLoadCallback(drawLineChart);

      function drawChart() {
        //var data = google.visualization.arrayToDataTable(window.chartData);
        var data = google.visualization.arrayToDataTable(window.chartData);


        var options = {
          focusTarget: 'category',
          title : '{{trans('language.battery_and_usage_chart')}}',
          vAxis: {title: '{{trans('language.no_of_uses')}}'},
          hAxis: {title: '{{trans('language.date')}}'},
          width: 900,
          seriesType: 'bars',
          series: {1: {type: 'line'}}
        };

        var chart = new google.visualization.ComboChart(document.getElementById('chart-div'));

        google.visualization.events.addListener(chart, 'error', function (googleError) {
            google.visualization.errors.removeError(googleError.id);
            //here you can write your custom message or nothing if you want remove
            swal('{{trans('language.no_data_to_show')}}');
        });
        chart.draw(data, options);
      }

    
    </script>

<script type="text/javascript">

  $(document).ready(function () {

    initializeSumoSelect('area');
    initializeSumoSelect('location');
    initializeSumoSelect('landmark');
    initializeSumoSelect('device');
 
      $("#type").change(function () {

        var type = $(this).val();
          if(type=="weekly"){
            $("#year").show();
            $("#month").hide();
            var year = $("#year-id").val();

            $.ajax({
                  method: 'GET',
                  url:'{{url('/getWeeks')}}',
                  data:{year : year },
                  dataType: 'json',
                  success: function (responseData, textStatus, jqXHR) {
                    if (responseData.status == true) {
                      $("#weeks").show();
                      $("#week").html(responseData.weeks);
                    }
                  },
                  error: function (responseData, textStatus, errorThrown) {
                    console.log('Something went wrong');
                  },
            });
          }else if(type=="monthly"){
            $("#year").show();
            $("#weeks").hide();
            $("#month").show();
          }else{
            $("#year").show();
            $("#weeks").hide();
            $("#month").hide();
          }

      });

      $("#year-id").change(function () {
        var year = $(this).val();
        var type = $("#type").val();
        if(type == 'weekly'){
          $.ajax({
                  method: 'GET',
                  url:'{{url('/getWeeks')}}',
                  data:{year : year },
                  dataType: 'json',
                  success: function (responseData, textStatus, jqXHR) {
                    if (responseData.status == true) {
                      $("#week").html(responseData.weeks);
                    }
                  },
                  error: function (responseData, textStatus, errorThrown) {
                    console.log('Something went wrong');
                  },
          });
        }

      });

      $("#location").change(function () {
        showorhideloader();
              var location = $(this).val();
              if(location.length==0){
                location = null;
              }
                $.ajax({
                  method: 'GET',
                  url:'{{url('/getDevicesList')}}',
                  data:{location : location },
                  dataType: 'json',
                  success: function (responseData, textStatus, jqXHR) {
                    showorhideloader('hide');
                    if (responseData.status == true) {
                      var htmlAppend = '<option value="">{{trans('language.all')}}</option>';
                      var htmlAppend2 = '<option value="">{{trans('language.all')}}</option>';
                      $.each(responseData.devices, function (index, value) {
                        htmlAppend += '<option value="' + value.id + '">' + value.device_name +'</option>';
                      });
                      $.each(responseData.landmarks, function (index, value) {
                        htmlAppend2 += '<option value="' + value.landmark + '">' + value.landmark +'</option>';
                      });
                      console.log(htmlAppend2);
                      $("#device").html(htmlAppend);
                      $("#landmark").html(htmlAppend2);
                      reinitializeSumoSelect('device');
                      reinitializeSumoSelect('landmark');
                    }
                  },
                  error: function (responseData, textStatus, errorThrown) {
                    console.log('Something went wrong');
                  },
                });
      });

      $("#area").change(function () {
        showorhideloader();
              var area = $(this).val();
              if(area.length==0){
                area = null;
              }
                $.ajax({
                  method: 'GET',
                  url:'{{url('/getDevicesList')}}',
                  data:{area : area },
                  dataType: 'json',
                  success: function (responseData, textStatus, jqXHR) {
                    showorhideloader('hide');
                    if (responseData.status == true) {
                      var htmlAppend = '<option value="">{{trans('language.all')}}</option>';
                      var htmlAppend2 = '<option value="">{{trans('language.all')}}</option>';
                      var htmlAppend3 = '<option value="">{{trans('language.all')}}</option>';
                      $.each(responseData.locations, function (index, value) {
                        htmlAppend += '<option value="' + value.location_id + '">' + value.location +'</option>';
                      });
                      $.each(responseData.devices, function (index, value) {
                        htmlAppend2 += '<option value="' + value.id + '">' + value.device_name +'</option>';
                      });
                      $.each(responseData.landmarks, function (index, value) {
                        htmlAppend3 += '<option value="' + value.landmark + '">' + value.landmark +'</option>';
                      });
                      $("#location").html(htmlAppend);
                      $("#device").html(htmlAppend2);
                      $("#landmark").html(htmlAppend3);
                      reinitializeSumoSelect('location');
                      reinitializeSumoSelect('landmark');
                      reinitializeSumoSelect('device');
                    }
                  },
                  error: function (responseData, textStatus, errorThrown) {
                    console.log('Something went wrong');
                  },
                });
      });

      $("#landmark").change(function () {
        showorhideloader();
              var landmark = $(this).val();
              if(landmark.length==0){
                landmark = null;
              }
                $.ajax({
                  method: 'GET',
                  url:'{{url('/getDevicesList')}}',
                  data:{landmark : landmark },
                  dataType: 'json',
                  success: function (responseData, textStatus, jqXHR) {
                    showorhideloader('hide');
                    if (responseData.status == true) {
                      var htmlAppend = '<option value="">{{trans('language.all')}}</option>';
                      $.each(responseData.devices, function (index, value) {
                        htmlAppend += '<option value="' + value.id + '">' + value.device_name +'</option>';
                      });
                      $("#device").html(htmlAppend);
                      reinitializeSumoSelect('device');
                    }
                  },
                  error: function (responseData, textStatus, errorThrown) {
                    console.log('Something went wrong');
                  },
                });
      });

  });

 //loading default chart

    var year_1 = $("#year-id").val();

    $.ajax({
        method: 'GET',
        url:'{{url('/getWeeks')}}',
        data:{year : year_1 },
        dataType: 'json',
        async: true,
        success: function (responseData, textStatus, jqXHR) {
          if (responseData.status == true) {
            $("#week").html(responseData.weeks);
          }
        },
        error: function (responseData, textStatus, errorThrown) {
          console.log('Something went wrong');
        },
    }); 
        

  $("#submit-button").click(function () {

          var area = $("#area").val();
          var location = $("#location").val();
          var landmark = $("#landmark").val();
          var device = $("#device").val();
          var type = $("#type").val();
          var year = $("#year-id").val();
          var start_date = $("#start_date").val();
          var end_date = $("#end_date").val();
          var week = $("#week").val();
          var month = $("#month-id").val();

          window.winLocation = location;
          window.winLandmark = landmark;
          window.winArea = area;
          window.winDevice = device;
          window.winStartDate = start_date;
          window.winEndDate = end_date;
          window.winYear = year;

          if(device.length == 0){
            swal('{{trans('language.device_is_required')}}');
            return;
          }

          if(type.length == 0){
            swal('{{trans('language.choose_a_type_to_continue')}}');
            return;
          }

          if(type=="monthly"){
            if(year.length == 0){
              swal('{{trans('language.choose_a_year_to_continue')}}');
              return;
            }
          }else if(type=="weekly"){
            if(week.length == 0){
              swal('{{trans('language.choose_a_week_to_continue')}}');
              return;
            }
          }else{
            if(year.length == 0){
              swal('{{trans('language.choose_a_year_to_continue')}}');
              return;
            }
          }

          showorhideloader();
          $.ajax({
              method: 'GET',
              url:'{{url('/battery_and_usage_chart_data')}}',
              data:{device : device,  type : type,  year : year,  start_date : start_date, end_date :end_date, week : week, month : month},
              dataType: 'json',
              success: function (responseData, textStatus, jqXHR) {
                showorhideloader('hide');
                if(responseData.session == ""){
                  window.location = "{{url('/login')}}";
                }
                if (responseData.status == true) {
                    window.chartData = responseData.data;
                    google.charts.setOnLoadCallback(drawChart);              
                }
              },
              error: function (responseData, textStatus, errorThrown) {
                console.log('Something went wrong');
              },
          });          

    });  
</script>


@endsection