@extends('_version_02.utility_charges.mobile_apps_light.layouts_home.main')
@section('content')
@include('_version_02.utility_charges.mobile_apps_light.home.ios_toggle_css')
<input type="hidden" id='account_data' value="{{$account_data['is_created']}}">
<section class="hk-sec-wrapper fullscreen" style="height:100%;">
       
        
            <!-- CATEGORY -->
            <div class="section home-category  flex-ppal-setup" style="margin:2% 2% -35% 2%;">
              <!-- <div class="container"> -->
              <div> 
                 <!-- padding-top:0px; -->
                 <div class="row slick-product" style="margin-bottom:5px;">
                      <div class="col s12"  >
                         <div class="featured-product">
                            <div>
                               <div class="col-slick-product">
                                  <div class="box-product shadow-hover-lg" style="padding-bottom:10px;">
                                    

                                    
                                             <div class="bp-top" style="padding-top:15px;">
                                                  <h5 class="text-center" style="display: inline;"> <i style="padding-bottom:2px; margin-right: :3px;" class="fas fa-house-user"></i> {{ $house_room_name }}<!-- Account Status -->  </h5> 
                                                  <span style="display: inline; margin-left:3px;padding-bottom:2px;" class="badge badge-soft-{{$account_data['power_supply_class']}}">{{$account_data['power_supply_state']}}</span>
                                              <hr>
                                   
                                        <!-- <div class="bp-top" style="padding-top:15px;">
                                            <h5 class="text-center" style="display: inline; margin-right: 8px;">
                                                <i style="padding-bottom:2px; margin-right:3px;" class="fas fa-house-user"></i> {{ $house_room_name }}
                                            </h5>
                                            <span style="display: inline; margin-left:3px; padding-bottom:2px;" class="badge badge-soft-{{$account_data['power_supply_class']}}">
                                                {{$account_data['power_supply_state']}}
                                            </span>
                                             
                                                <div class="switch-team-button" style="display: inline;display: inline;float:right;margin-top:-7px;"">
                                                    <button onclick="toggleArea()" class="button-switch" style="background-color: #ffffff; color: #007aff; border: 1px solid #007aff; font-size: 16px; border-radius: 20px; display: inline-flex; align-items: center; cursor: pointer; transition: background-color 0.3s;">
                                                        <span></span>
                                                        <i class="fa fa-users" style="margin-left: 5px;"></i>
                                                    </button>
                                                </div>
                                            <hr> -->

                                      

                                      <!-- <div class="price">
                                         <strong>{{App\Language::trans('Balance amount')}} :</strong> <span> RM {{ $account_data['current_credit_amount']}} <label id="balance_amount"></label>: {{ $account_data['current_balance_kwh']}}  {{App\Language::trans('kWh')}} </span>
                                      </div> -->

                                       
                                      <!-- <div class="price" style="margin-bottom:15px;">
                                        <strong>{{App\Setting::get_month_in_word(date('m'))}} {{App\Language::trans('usage')}} : </strong> <span> RM {{ $account_data['current_usage_amount']}}<label id="current_usage"></label>: {{ $account_data['current_usage_kwh']}}  {{App\Language::trans('kWh')}} </span>
                                      </div> -->

                                      <div class="price" >
                                        <strong>{{App\Setting::get_month_in_word(date('m'))}} {{App\Language::trans('usage')}} : </strong> <span> RM {{  $account_data->getDouble($account_data['current_usage_amount']) }}<label id="current_usage"></label>: {{ $account_data['current_usage_kwh']}}  {{App\Language::trans('kWh')}} </span>
                                      </div>

                                    @if($user_profile['id'] == 11 || $user_profile['id'] == 2270)
                                      <div class="price" >
                                        <strong style="margin-left:-22px;">{{App\Language::trans('Common Area Usage')}} : </strong> <span> RM {{  $account_data->getDouble($account_data['current_usage_amount']) }}<label id="current_usage"></label>: {{ $account_data['current_usage_kwh']}}  {{App\Language::trans('kWh')}} </span>
                                      </div>
                                    @endif

                                      <div class="price" style="margin-bottom:15px;">
                                         <strong>{{App\Language::trans('Balance amount')}} :</strong> <span> RM {{ $account_data->getDouble($account_data['current_credit_amount'])}} <label id="balance_amount"></label>: {{ $account_data['current_balance_kwh']}}  {{App\Language::trans('kWh')}} </span>
                                      </div>

                                      

                                       <div class="in-content">
                                       <div class="in-in-content">
                                      <div class="chart" style="position: relative; height:40vh; width:80vw">
                                         <canvas id="barChart" style="position: relative; height:40vh; width:80vw"></canvas>
                                      </div>
                                    </div>
                                  </div>

                                       <h7 style="text-align: left;"><br> Last update at : {{$account_data['last_meter_reading']}} </h7>

                                  </div>
                                </div>
                              </div>
                          </div>
                        </div>
                      </div>
                  </div> 
                  
                <div class="row slick-product">

                    <div class="col s4 m4 l2"><a class="icon-content shadow-bottom shadow-hover-lg" onclick="initialize_usage_line_chart('barChart');">
                      <div class="content fadetransition">
                        <div class="in-content">
                          <div class="in-in-content">
                            <img src="{{asset('leaf_acconting_mobile/img/icon/transaction.png')}}" alt="category">
                            <h5><br> Daily Usage </h5>
                          </div>
                        </div>
                      </div></a>
                    </div>

                    <div class="col s4 m4 l2"><a class="icon-content  shadow-bottom shadow-hover-lg" onclick="initialize_mobile_app_report('barChart');">
                      <div class="content fadetransition">
                        <div class="in-content">
                          <div class="in-in-content">
                            <img src="{{asset('leaf_acconting_mobile/img/icon/statistic.png')}}" alt="category">
              
                            <h5><br> Summary  </h5>
                          </div>
                        </div>
                      </div></a>
                    </div>
                    
                    <div class="col s4 m4 l2"><a class="icon-content shadow-right shadow-hover-lg" onclick=" init_loading_overlay();" href="{{action('AppsUtilityChargesController@getTopUp')}}?amount={{$power_meter_operational_setting->top_up_min_amount}}&session_token={{$session_token}}">
                      <div class="content fadetransition">
                        <div class="in-content">
                          <div class="in-in-content">
                            <img src="{{asset('leaf_acconting_mobile/img/icon/top_up_electric.png')}}" alt="category">
                            <h5><br> Top Up </h5>
                          </div>
                        </div>
                      </div></a>
                    </div>

                   
                </div>
              </div>

            </div>
            <!-- END CATEGORY -->
    </section>

@endsection
@section('script')


$( document ).ready(function() {

  initialize_mobile_app_report('barChart');
});

@endsection