<div class="container-fluid">
  <div class="block-header">
    <!-- <h2><%= t :dashboard %></h2> -->
    <h2><%= t :date_time %> : <%= Time.zone.now.strftime("%Y-%m-%d %I:%M %p") %></h2>
  </div>
  <!-- Widgets -->
  <div class="row clearfix">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-mbl-view">
      <div class="info-box bg-cyan hover-expand-effect">
        <div class="icon">
          <i class="material-icons">help</i>
        </div>
        <div class="content">
          <div class="text"><%= t :sale_count %></div>
          <% if !@total_trans[0].nil? %>
            <div class="number count-to" data-from="0" data-to="<%= @total_trans[0].total_count%>" data-speed="1000" data-fresh-interval="20"></div>
          <% end %>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-mbl-view">
      <div class="info-box bg-pink hover-expand-effect">
        <div class="icon">
          <i class="material-icons">attach_money</i>
        </div>
        <div class="content">
          <div class="text"><%= t :total_sale %></div>
          <% if !@total_trans[0].nil? %>
            <div class="number count-to" data-from="0" data-to="<%= @total_trans[0].total_sale%>" data-speed="15" data-fresh-interval="20"></div>
          <% end %>
        </div>
      </div>
    </div>

    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-mbl-view">
      <div class="info-box bg-light-green hover-expand-effect">
        <div class="icon">
          <i class="material-icons">person_add</i>
        </div>
        <div class="content">
          <div class="text"><%= t :total_credit %></div>
          <% if !@total_credit.nil? %>
          <div class="number count-to" data-from="0" data-to="<%= @total_credit rescue "0" %>" data-speed="1000" data-fresh-interval="20"></div>
          <% end %>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 col-mbl-view">
      <div class="info-box bg-orange hover-expand-effect">
        <div class="icon">
          <i class="material-icons">credit_card</i>
        </div>
        <div class="content">
          <div class="text"><%= t :total_card %></div>
          <% if !@total_card.nil? %>
          <div class="number count-to" data-from="0" data-to="<%= @total_card rescue "0" %>" data-speed="1000" data-fresh-interval="20"></div>
          <% end %>
        </div>
      </div>
    </div>
  </div>
  <!-- #END# Widgets -->
  <!-- CPU Usage -->

  <!-- Date range for dashboard -->
  <% if current_user.role == 'administrator' || current_user.role == 'manager' || current_user.role == 'account' %>
  <div class="row clearfix">
    <%
      if !@from.nil? && @from != ""
        from_date = @from.strftime("%d-%m-%Y")
        from_time = @from.strftime("%H:%M") if @from.strftime("%H:%M") != "00:00"
      else
        from_date = Time.current.strftime('%d-%m-%Y')
      end
      if !@to.nil? && @to != ""
        to_date = @to.strftime("%d-%m-%Y")
        to_time = @to.strftime("%H:%M") if @to.strftime("%H:%M") != "23:59"
      else
        to_date = Time.current.strftime('%d-%m-%Y')
      end
    %>
    <div class="col-lg-3 col-md-3 col-sm-3 col-mbl-view mbl-style">
      <label class="font-14 mbl_lbl"><%= t("views.right_panel.detail.from") %></label>
      <input data-behaviour='datepicker' class="form-control datepicker" name="from" id="from" type="text" value="<%= from_date %>" placeholder="From date" style="height: 35px;">
      <span id="fromErr" style="color:red;"></span>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-mbl-view mbl-style">
      <label class="font-14 mbl_lbl"><%= t("views.right_panel.detail.to") %></label>
      <input data-behaviour='datepicker' class="form-control datepicker" name="to" id="to" type="text" value="<%= to_date %>" placeholder="To date" style="height: 35px;">
      <span id="toErr" style="color:red;"></span>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-mbl-view mbl-style">
      <label class="font-14 mbl_lbl"><%= t("views.right_panel.detail.from_time") %></label>
      <input data-behaviour='timepicker' class="form-control timepicker" name="from_time" id="from_time" type="text" value="<%= from_time %>" placeholder="From Time" style="height: 35px;">
      <span id="from_timeErr" style="color:red;"></span>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 col-mbl-view mbl-style">
      <label class="font-14 mbl_lbl"><%= t("views.right_panel.detail.to_time") %></label>
      <input data-behaviour='timepicker' class="form-control timepicker" name="to_time" id="to_time" type="text" value="<%= to_time %>" placeholder="To time" style="height: 35px;">
      <span id="to_timeErr" style="color:red;"></span>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-2 toggle_mbl">
      <label></label><br>
      <input type="button" value="Generate" class='btn btn-primary btn_generate'>
    </div>
  </div>
  <br>
  <% end %>
  <!-- Date range for dashboard -->

  <div class="row">
    <% if current_user.role == 'administrator' || current_user.role == 'manager' || current_user.role == 'account' %>
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <% isMobile = request.user_agent %>
      <% if !isMobile.include? "Mobile" %>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 ">
            <div class="card">
              <div class="body">
                <h4><i class="material-icons md-24">dashboard</i><%= (t :top) + " " + (t :products) %></h4>
                <!-- <canvas id="top_products" class="col-md-12"></canvas> -->
                <%= pie_chart @top_products %>
              </div>
            </div>
          </div>
          <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 ">
            <div class="card">
              <div class="body">
                <h4><i class="material-icons md-24">dashboard</i><%= (t :bottom) + " " + (t :products) %></h4>
                <!-- <canvas id="top_products" class="col-md-12"></canvas> -->
                <%= pie_chart @bottom_products %>
              </div>
            </div>
          </div>
        </div>
      <% end %>
          <!-- <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="card">
              <div class="body">
                <h4><i class="material-icons md-24">store</i><%= t :inventory %></h4>
                <canvas id="inventory" class="col-md-12"></canvas>
              </div>
            </div>
          </div>
        </div> -->
        <br />
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
           <div class="card">
            <div class="body">
              <h4><i class="material-icons md-24">av_timer</i><%= (t :hourly) + " " + (t :sale) %></h4>
              <!-- <canvas id="hourly_sales" class="col-md-12"></canvas> -->
              <%= column_chart @hourly_sales %>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <div class="card">
            <div class="body">
              <h4><i class="material-icons md-24">assignment_ind</i><%= (t :staff) + " " + (t :sale) %></h4>
              <!-- <canvas id="employee_sales" class="col-md-12"></canvas> -->
              <%= column_chart @employee_sales %>
            </div>
          </div>
        </div>
      </div>
    </div>
    <% end %>
    <% if current_user.role == 'administrator' || current_user.role == 'manager' || current_user.role == 'account' || current_user.role == 'cashier' %>
    <% if !@summ_sale.nil? %>
      <% if current_user.role == 'administrator' || current_user.role == 'manager' || current_user.role == 'account' %>
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <% else %>
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="row">
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <% end %>
          <div class="card">
            <div class="body">
              <h6><%= t :sale %></h6>
              <table class="table">
                <tr>
                  <td><%= t("views.right_panel.detail.total") %> <%= t("views.right_panel.detail.receipt") %> : </td>
                  <td align="right"><%= @summ_sale.total_receipt %></td>
                </tr>
                <tr>
                <% revenue = @summ_sale.grand_total - @summ_sale.total_discount - @summ_sale.total_tax %>
                  <td><%= t("views.right_panel.detail.sale") %> <%= t :revenue %> : </td>
                  <td align="right"><%= number_format( revenue, precision: precision.to_i ,delimiter: delimiter) %></td>
                </tr>
                <tr>
                  <td><%= t("views.right_panel.detail.total") %> <%= t("views.right_panel.detail.discount") %> : </td>
                  <td align="right"><%= number_format( @summ_sale.total_discount, precision: precision.to_i ,delimiter: delimiter) rescue number_format(0, precision: precision.to_i ,delimiter: delimiter) %></td>
                </tr>
                <tr>
                  <td><%= t("views.right_panel.detail.total") %> <%= t("views.right_panel.detail.tax") %> : </td>
                  <td align="right"><%= number_format( @summ_sale.total_tax , precision: precision.to_i ,delimiter: delimiter) rescue number_format(0, precision: precision.to_i ,delimiter: delimiter) %></td>
                </tr>
                <tr>
                  <td><%= t("views.right_panel.detail.total_sale") %> : </td>
                  <td align="right"><%= number_format( @summ_sale.grand_total , precision: precision.to_i ,delimiter: delimiter)%></td>
                </tr>
              </table>
              <table class="table">
                <% if !(@total_payment_methods.nil?) %>
                  <% @total_payment_methods.each do |payment| %>
                    <% if !@sale_data[0].empty? %>
                      <% if payment.payment_method != 'mpu' && payment.payment_method != 'visa' && payment.payment_method != 'master' && payment.payment_method != 'jcb' %>
                        <tr>
                        <% if payment.payment_method == 'paypar' %>
                          <td>Redeem Sale : </td>
                        <% elsif payment.payment_method == 'paymal' %>
                          <td>Card Sales : </td>
                        <% else %>
                          <td><%= payment.payment_method.to_s.capitalize %> Sale : </td>
                        <% end %>
                          <td align="right">
                            <% @sale_data.each do |data| %>
                              <% pay_mth = payment.payment_method %>
                              <%= data[pay_mth] %>
                            <% end %>
                          </td>
                        </tr>
                      <% end %>
                    <% end %>
                  <% end %>

                  <% total_card = @sale_data.select { |hash| hash["card"]!=nil } %>
                  <% if !total_card.nil? %>
                    <tr>
                      <td><%= t("views.right_panel.detail.other_payment") %> : </td>
                      <td align="right">
                        <% total_other_amt = 0 %>
                        <% @sale_data.map { |k,v| k.map{|meth,amt| meth != 'cash' && meth != 'foc' && meth != 'creditnote' ? total_other_amt += amt : meth }} %>
                        <%= total_other_amt %>
                      </td>
                    </tr>
                  <% end %>
                <% end %>
              </table>
            </div>
          </div>
        </div>
        <% if current_user.role == 'administrator' || current_user.role == 'manager' || current_user.role == 'account' %>
      </div>
    <% end %>
  <% end %>

      <% if current_user.role == 'administrator' || current_user.role == 'manager' || current_user.role == 'account' %>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <% else %>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <% end %>
        <% if !@total_customer.nil? && @total_customer.to_i > 0 %>
          <div class="card">
            <div class="body">
              <h6><%= t :customer %></h6>
              <table class="table">
                  <tr>
                    <td><%= t("views.right_panel.detail.total") %> <%= t :customer %> : </td>
                    <td align="right"><%= @total_customer %></td>
                  </tr>
                <% if !@total_dinein.nil? %>
                  <tr>
                    <td><%= t("views.right_panel.detail.dine_in") %> : </td>
                    <td align="right"><%= @total_dinein %></td>
                  </tr>
                <% end %>
                <% if !@total_takeaway.nil? %>
                  <tr>
                    <td><%= t("views.right_panel.detail.takeaway") %> : </td>
                    <td align="right"><%= @total_takeaway %></td>
                  </tr>
                <% end %>
                <!-- <% if !@total_other_customer.nil? %>
                  <tr>
                    <td><%= t :customer %> : </td>
                    <td align="right"><%= @total_other_customer.total_cus %></td>
                  </tr>
                <% end %> -->
                <% if !@total_membership.nil? %>
                  <tr>
                    <td><%= t("views.right_panel.detail.membership") %> : </td>
                    <td align="right"><%= @total_membership %></td>
                  </tr>
                <% end %>
              </table>
            </div>
          </div>
          <% end %>
        </div>
        <% if current_user.role == 'administrator' || current_user.role == 'manager' || current_user.role == 'account' %>
      </div>
      <% end %>

      <% if current_user.role == 'administrator' || current_user.role == 'manager' || current_user.role == 'account' %>
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <% else %>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <% end %>
          <div class="card">
            <div class="body">
              <h6><%= t("views.right_panel.detail.order") %></h6>
              <table class="table">
                <% if !@total_order.nil? %>
                  <tr>
                    <td width="40px"><%= t("views.right_panel.detail.total") %> <%= t("views.right_panel.detail.order") %> : </td>
                    <td align="right" width="60px"><%= @total_order.total_order %></td>
                  </tr>
                <% end %>

                <% if !@total_accounts.nil? %>
                  <% @total_accounts.each do |account| %>
                    <tr>
                      <td width="40px"><%= account.title %> (Account) : </td>
                      <td align="right" width="60px">
                        <% @account_data.each do |data| %>
                          <% acc = account.title %>
                          <%= data[""+acc+""] %> <% if !data[''+acc+''].nil? %> ( <%= data[''+acc+'_amount'] %> ) <% end %>
                        <% end %>
                      </td>
                    </tr>
                  <% end %>
                <% end %>
                <% if !@top_items.nil? %>
                <tr>
                  <td width="40px"><%= t :top %> <%= t("views.right_panel.detail.item") %> : </td>
                  <td align="right" width="60px"><%= @top_items.item_name %>
                  <br>(<%= @top_items.item_total_price %>)</td>
                </tr>
                <% end %>
                <% if !@total_foc_items.nil? %>
                  <tr>
                    <td width="40px"><%= t("views.right_panel.detail.total") %> <%= t("views.btn.foc") %> <%= t("views.right_panel.detail.item") %> : </td>
                    <td align="right" width="60px"><%= @total_foc_items.to_int %></td>
                  </tr>
                <% end %>
              </table>
            </div>
          </div>
        </div>
    <% if current_user.role == 'administrator' || current_user.role == 'manager' || current_user.role == 'account' %>
      </div>
    <% end %>
    <% end %>
  </div>
  <% if current_user.role == 'administrator' || current_user.role == 'manager' || current_user.role == 'account' %>
  <% if isMobile.include? "Mobile" %>
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 ">
        <div class="card">
          <div class="body">
            <h4><i class="material-icons md-24">dashboard</i><%= (t :top) + " " + (t :products) %></h4>
            <!-- <canvas id="top_products" class="col-md-12"></canvas> -->
            <%= pie_chart @top_products %>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 ">
        <div class="card">
          <div class="body">
            <h4><i class="material-icons md-24">dashboard</i><%= (t :bottom) + " " + (t :products) %></h4>
            <!-- <canvas id="top_products" class="col-md-12"></canvas> -->
            <%= pie_chart @bottom_products %>
          </div>
        </div>
      </div>
    </div>
  <% end %>
  <% end %>
</div>

<script type="text/javascript">
  $(document).ready(function(){
    var from = '<%= @from.strftime('%d-%m-%Y') rescue '' %>';
    var to = '<%= @to.strftime('%d-%m-%Y') rescue '' %>';

    if((from!=undefined) && (from != null) && (from != '')){
      $('#from').val(from);
    }
    if((to!=undefined) && (to != null) && (to != '')){
      $('#to').val(to);
    }
  });

  $('.btn_generate').on('click',function(){
    var from = $("#from").val();
    var to = $("#to").val();
    var from_time = $("#from_time").val();
    var to_time = $("#to_time").val();
    if(check(from,to,from_time,to_time)){
      var params = '?';
      if((from!='' && to!='') && (from_time!='' && to_time!='')){
        params += 'from='+from+'&to='+to+'&from_time='+from_time+'&to_time='+to_time;
      }else{
        params += 'from='+from+'&to='+to;
      }
      window.location.href = '/dashboard'+params;
    }
  });

  function check(from,to,from_time,to_time){
    var status = false;
    var t_status = false;

    if((from=='') && (to=='')){
      status = false;
      $('#fromErr').html("can't be blank");
      $('#toErr').html("can't be blank");
    }else if((from!='') && (to=='')){
      status = false;
      $('#fromErr').html("");
      $('#toErr').html("can't be blank");
    }else if((from=='') && (to!='')){
      status = false;
      $('#fromErr').html("can't be blank");
      $('#toErr').html("");
    }else{
      status = true;
      $('#fromErr').html("");
      $('#toErr').html("");
    }

    if(((from_time=='') && (to_time=='')) || ((from_time!='') && (to_time!=''))){
      t_status = true;
      $('#from_timeErr').html("");
      $('#to_timeErr').html("");
    }else if((from_time!='') && (to_time=='')){
      t_status = false;
      $('#from_timeErr').html("");
      $('#to_timeErr').html("can't be blank");
    }else if((from_time=='') && (to_time!='')){
      t_status = false;
      $('#from_timeErr').html("can't be blank");
      $('#to_timeErr').html("");
    }
    if(status && t_status) status = true;
    return status;
  }
</script>
