{% extends "base.html" %}
{% load static %}

{% block 'head' %}
<link rel="stylesheet" href="{% static 'home/css/home.css' %}">
{% endblock %}

{% block 'title' %}
RRB&C - DashBoard
{% endblock %}

{% block 'body' %}
<body>
  <div class="grid-container">
    <h1>DashBoard</h1>
      <div class="grid-container" style="grid-template-columns: repeat(2, 2fr); align-items: center; margin: 0px;">
        <input id="data-start" name="data-start" oninput="mediaCuisine()" type="date">
        <input id="data-end" name="data-end" oninput="mediaCuisine()" type="date">
      </div>
      <h4 id="30-days">Últimos 30 dias</h4>
  </div>
  
  <div class="grid-container">
    <div class="card-resumo">
      <div>
        <p> Faturamento </p>
        <h2 id="total-pagamentos">Carregando... </h2>
      </div>
      <img src="{% static 'midia/icons/money-bag.svg' %}" >
    </div>
    <div class="card-resumo">
      <div>
        <p>Total de Vendas</p>
        <h2 id="qtd-pagamentos">Carregando... </h2>
      </div>
      <img src="{% static 'midia/icons/cart.svg' %}" >
    </div>
    <div class="card-resumo">
      <div>
        <p>Ticket médio</p>
        <h2 id="ticket-medio">Carregando... </h2>
      </div>
      <img src="{% static 'midia/icons/ticket.svg' %}" >
    </div>
    <div class="card">
      <h4> Mais vendidos </h4>
      <canvas id="vendas" style="width:100%;height: 85%;max-width:100%;"></canvas>
    </div>
    <div class="card">
      <h4>Tempo médio na cozinha</h4>
      <div style="width:95%;max-width:100%;padding: 10px 30px 10px 30px;"> 
      <canvas id="cuisine" style="width:80%;height: 65%;max-width:100%;"></canvas>
      </div>
    </div>
    <div class="card">
      <h4>Ranking atendente</h4>
      <hr>
      <p>1º - Atendente 1</p><p>2º - Atendente 2</p>
      <p>3º - Atendente 3</p><p>4º - Atendente 4</p>

      </div>
    </div>
  </div>
  <h4 style="justify-self: center;">Faturamento mês a mês</h4>
  <!-- <div  class="card-faturamento-anual"> -->
    <canvas class="card-faturamento-anual" id="mensal" ></canvas>
  <!-- </div> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
  <script src="{% static 'home/js/home.js' %}"></script>
</body>
{% endblock %}
