@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" style="color: #c10202;">{{ 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">{{ 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">
                        <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">
                        <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">
                        <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.contract_company_name') }} </label>
                        <select class="form-control" name="contract_user" id="contract_user">
                        <option value="">{{ trans('language.all') }}</option>
                        @foreach($contract_users as $contract_user)
                        <option value="{{$contract_user->id}}">{{$contract_user->name}}</option>
                        @endforeach
                        </select>
                        </div>
                      </div>
                      
                      <div class="col-md-3" id="device-id" style="display:none;">
                        <div class="form-group">
                        <label> {{ trans('language.device_name') }} </label>
                        <select class="form-control" name="device_id" id="device">
                        <option value="">{{ trans('language.all') }}</option>
                        @foreach($devices as $device)
                        <option value="{{$device->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>
                        <option value="yearly">{{ trans('language.yearly') }}</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>
            <br>
          <div class="row" id="day_of_the_week_div">
            <div class="col-md-12">
              <form method="POST" id="chart-form" action="">
                      @csrf
                <div class="row">
                      <div class="col-md-2">
                        <div class="form-group">
                        <label> {{ trans('language.day_of_the_week') }} </label>
                        <select class="form-control" name="day_of_the_week" id="day_of_the_week">
                        <option value="">{{ trans('language.all') }}</option>
                        <option value="0">{{ trans('language.monday') }}</option>
                        <option value="1">{{ trans('language.tuesday') }}</option>
                        <option value="2">{{ trans('language.wednesday') }}</option>
                        <option value="3">{{ trans('language.thursday') }}</option>
                        <option value="4">{{ trans('language.friday') }}</option>
                        <option value="5">{{ trans('language.saturday') }}</option>
                        <option value="6">{{ trans('language.sunday') }}</option>
                        </select>
                        </div>
                      </div>
                      <div class="col-md-2">
                        <div class="form-group">
                        <label> {{ trans('language.duration') }} </label>
                        <select class="form-control" name="duration" id="duration">
                        <option value="">{{ trans('language.all') }}</option>
                        <option value="30">~30</option>
                        <option value="60">~60</option>
                        <option value="90">~90</option>
                        <option value="120">~120</option>
                        <option value="150">~150</option>
                        <option value="180">~180</option>
                        <option value="210">~210</option>
                        <option value="240">~240</option>
                        </select>
                        </div>
                      </div>
                    <div class="col-md-2">
                      <br>
                      <button type="button" id="submit-button-2" class="btn btn-primary" name="button_2" value="clicked" style="margin-top: 15px;">
                              {{ trans('language.submit') }}
                      </button>
                    </div>
                </div>
              </form>
            </div>
          </div>
            <div class="row">
            <div class="col-md-12">
              <div class="row">
            <div class="col-md-3 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex">
                  <img src="{{url('/')}}/images/fa-lock.png" class="icon-style" height="18" width="20">
                  <p class="card-title text-md-center text-xl-left">{{ trans('language.total_devices') }}</p>
                  </div>
                  <div class="d-flex flex-wrap justify-content-between justify-content-md-center justify-content-xl-between align-items-center">
                    <h2 class="mb-0 mb-md-2 mb-xl-0 order-md-1 order-xl-0" id="total_devices">0</h2>
                  </div>    
                  
                </div>
              </div>
            </div>
            
            <div class="col-md-3 grid-margin stretch-card">
              <div class="card">
                <div class="card-body">
                  <div class="d-flex">
                  <img src="{{url('/')}}/images/fa-lock.png" class="icon-style" height="18" width="20">
                  <p class="card-title text-md-center text-xl-left">{{ trans('language.total_usage_count') }}</p>
                  </div>
                  <div class="d-flex flex-wrap justify-content-between justify-content-md-center justify-content-xl-between align-items-center">
                    <h2 class="mb-0 mb-md-2 mb-xl-0 order-md-1 order-xl-0" id="total_usage_count">0</h2>
                  </div>    
                  
                </div>
              </div>
            </div>
          </div>
          </div>
          </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>
        <!-- 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;
      var winDevice;
      var winLandmark;
      var winLocation;
      var winArea;
      var winStartDate;
      var winEndDate;
      var winYear;


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

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

        var options = {
          width: 900,
          vAxis: {
              viewWindow: {
                  min: 0
              }
          },
          legend: { position: 'top' },
          chart: {
            title: '使用時間グラフ',
            subtitle: window.subtitle,
          }
        };

        var chart = new google.charts.Bar(document.getElementById('chart-div'));

        chart.draw(data, google.charts.Bar.convertOptions(options));
      }

    
    </script>

<script type="text/javascript">

  $(document).ready(function () {
    
    initializeSumoSelect('area');
    initializeSumoSelect('location');
    initializeSumoSelect('landmark');
    initializeSumoSelect('contract_user');

    $("#day_of_the_week_div").show();
 
      $("#type").change(function () {
        $("#day_of_the_week_div").show();
        $('#day_of_the_week').val('');
        $('#duration').val('');
        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();
            $("#day_of_the_week_div").hide();
          }else{
            $("#year").show();
            $("#weeks").hide();
            $("#month").hide();
            $("#day_of_the_week_div").hide();
          }

      });

      $("#year-id").change(function () {
        $('#day_of_the_week').val('');
        $('#duration').val('');
        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 () {
        $('#day_of_the_week').val('');
        $('#duration').val('');
        showorhideloader();
              var location = $(this).val();
              if(location.length==0){
                location = null;
                // $("#device-id").hide();
              }else{
                // $("#device-id").show();
              }

              var area = $('#area').val();
              if(area.length==0){
                area = null;
              }

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

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


  });

  //loading default chart

    var location_1 = "";
    var device_1 = "";
    var type_1 = $("#type").val();
    var year_1 = $("#year-id").val();
    var start_date_1 = "";
    var end_date_1 = "";
    var month_1 = ""; 

    $.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);
            var week_1 = $("#week").val();
            $.ajax({
              method: 'GET',
              url:'{{url('/usage_time_chart_view')}}',
              data:{location : location_1,  device : device_1,  type : type_1,  year : year_1,  start_date : start_date_1, end_date :end_date_1, week : week_1, month : month_1},
              dataType: 'json',
              success: function (responseData, textStatus, jqXHR) {
              console.log(responseData);
              if(responseData.session == ""){
                  window.location = "{{url('/login')}}";
                }
                if (responseData.status == true) {
                  $("#total_devices").html(responseData.total_devices_count);
                  $("#total_usage_count").html(responseData.total_transaction_count);
                  window.chartData = responseData.data;
                  window.subtitle = responseData.subtitle;
                  google.charts.setOnLoadCallback(drawBarChart);
                }
              },
              error: function (responseData, textStatus, errorThrown) {
                console.log('Something went wrong');
              },
          });
          }
        },
        error: function (responseData, textStatus, errorThrown) {
          console.log('Something went wrong');
        },
    }); 

  //default chart ends          

  $("#submit-button").click(function () {
          var area = $("#area").val();
          var location = $("#location").val();
          var landmark = $("#landmark").val();
          var device = $("#device").val();
          var contract_user = $("#contract_user").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.winContractUser = contract_user;
          window.winStartDate = start_date;
          window.winEndDate = end_date;
          window.winYear = year;

          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('/usage_time_chart_view')}}',
              data:{area : area, location : location, landmark : landmark,  device : device, contract_user : contract_user,  type : type,  year : year,  start_date : start_date, end_date :end_date, week : week, month : month},
              dataType: 'json',
              success: function (responseData, textStatus, jqXHR) {
                $('#day_of_the_week').val('');
        $('#duration').val('');
                showorhideloader('hide');
                console.log(responseData);
                if(responseData.session == ""){
                  window.location = "{{url('/login')}}";
                }
                if (responseData.status == true) {
                    $("#total_devices").html(responseData.total_devices_count);
                    $("#total_usage_count").html(responseData.total_transaction_count);
                    if(type=="yearly"){
                      $("#chart-div").css("height", "920px");
                    }else{
                      $("#chart-div").css("height", "600px");
                    }
                    window.chartData = responseData.data;
                    window.subtitle = responseData.subtitle;
                    google.charts.setOnLoadCallback(drawBarChart);              
                }
              },
              error: function (responseData, textStatus, errorThrown) {
                console.log('Something went wrong');
              },
          });          

    });

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

          var area = $("#area").val();
          var location = $("#location").val();
          var landmark = $("#landmark").val();
          var device = $("#device").val();
          var contract_user = $("#contract_user").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();
          var day_of_the_week = $("#day_of_the_week").val();
          var button_2 = $("#submit-button-2").val();
          var duration = $("#duration").val();

          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('/usage_time_chart_view')}}',
              data:{area : area, location : location, landmark : landmark,  device : device, contract_user : contract_user,  type : type,  year : year,  start_date : start_date, end_date :end_date, week : week, month : month, button_2: button_2, day_of_the_week: day_of_the_week, duration: duration},
              dataType: 'json',
              success: function (responseData, textStatus, jqXHR) {
                showorhideloader('hide');
                // $('#day_of_the_week').val('');
        // $('#duration').val('');
                console.log(responseData);
                if(responseData.session == ""){
                  window.location = "{{url('/login')}}";
                }
                if (responseData.status == true) {
                    $("#total_usage_count").html(responseData.total_transaction_count);             
                }
              },
              error: function (responseData, textStatus, errorThrown) {
                console.log('Something went wrong');
              },
          });          

    });
 
</script>


@endsection