@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" style="color: #c10202;">{{ 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">{{ 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="daily" selected>{{ trans('language.daily') }}</option>
                        <option value="weekly">{{ 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="day">
                        <div class="form-group">
                        <label> {{ trans('language.day') }} </label>
                        <input type="date" onkeydown="return false" class="form-control" id="date" name="date" value="2026-05-24" required="required">
                        </div>
                      </div>
                      <div class="col-md-3" id="year" style="display:none;">
                        <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" style="display:none;">
                        <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" style="display:none;">
            <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">
                      <br>
                      <button type="button" id="submit-button-2" name="button_2" value="clicked" class="btn btn-primary" 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_unit_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 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.initial_usage_unit_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="initial_usage_count">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.excess_usage_unit_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="excess_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 winLocation;
      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").hide();
        $('#day_of_the_week').val('');
        var type = $(this).val();
          if(type=="daily"){
            $("#year").hide();
            $("#day").show();
            $("#weeks").hide();
            $("#month").hide();
            $("#day_of_the_week_div").show();
          }else if(type=="weekly"){
            $("#year").show();
            $("#month").hide();
            $("#day").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');
                  },
            });
            $("#day_of_the_week_div").show();
          }else if(type=="monthly"){
            $("#year").show();
            $("#day").hide();
            $("#weeks").hide();
            $("#month").show();
          }else{
            $("#year").show();
            $("#day").hide();
            $("#weeks").hide();
            $("#month").hide();
          }

      });

      $("#year-id").change(function () {
        $('#day_of_the_week').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('');
        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 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>';
                      });
                      $("#landmark").html(htmlAppend2);
                      reinitializeSumoSelect('landmark');
                    }
                  },
                  error: function (responseData, textStatus, errorThrown) {
                    console.log('Something went wrong');
                  },
                });
      });

      $("#area").change(function () {
        $('#day_of_the_week').val('');
        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>';
                      $.each(responseData.locations, function (index, value) {
                        htmlAppend += '<option value="' + value.location_id + '">' + value.location +'</option>';
                      });
                      $.each(responseData.landmarks, function (index, value) {
                        htmlAppend2 += '<option value="' + value.landmark + '">' + value.landmark +'</option>';
                      });
                      $("#landmark").html(htmlAppend2);
                      $("#location").html(htmlAppend);
                      reinitializeSumoSelect('location');
                      reinitializeSumoSelect('landmark');
                    }
                  },
                  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 = "";
    var date_1 = $("#date").val();
    var start_date_1 = "";
    var end_date_1 = "";
    var week_1 = "";
    var month_1 = "";

    $.ajax({
        method: 'GET',
        url:'{{url('/operating_unit_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, date : 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);
            $("#initial_usage_count").html(responseData.initial_transaction_count);
            $("#excess_usage_count").html(responseData.excess_transaction_count);
            window.chartData = responseData.data;
            window.subtitle = responseData.subtitle;
            google.charts.setOnLoadCallback(drawBarChart);
          }
        },
        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 date = $("#date").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=="daily"){
            if(date.length == 0){
              swal('{{trans('language.choose_a_day_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('/operating_unit_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, date : date, week : week, month : month},
              dataType: 'json',
              success: function (responseData, textStatus, jqXHR) {
                 showorhideloader('hide');
                 $('#day_of_the_week').val('');
                 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);
                    $("#initial_usage_count").html(responseData.initial_transaction_count);
                    $("#excess_usage_count").html(responseData.excess_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 date = $("#date").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();

          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=="daily"){
            if(date.length == 0){
              swal('{{trans('language.choose_a_day_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('/operating_unit_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, date : date, week : week, month : month, button_2: button_2, day_of_the_week: day_of_the_week},
              dataType: 'json',
              success: function (responseData, textStatus, jqXHR) {
                showorhideloader('hide');
                // $('#day_of_the_week').val('');
                if(responseData.session == ""){
                  window.location = "{{url('/login')}}";
                }
                if (responseData.status == true) {
                    $("#total_usage_count").html(responseData.total_transaction_count);
                    $("#initial_usage_count").html(responseData.initial_transaction_count);
                    $("#excess_usage_count").html(responseData.excess_transaction_count);              
                }
              },
              error: function (responseData, textStatus, errorThrown) {
                console.log('Something went wrong');
              },
          });          

    });   
</script>

@endsection