{% extends "admin_site.html" %}
{% load i18n static iclock_tags compress common %}

{% block center %}
  <div id="id_app_content" class="layui-fluid" style="background: #f0f3f5;">
    {% csrf_token %}
        <div class="row">
            <div class="col-md-6">
{#                <p class="current-company">Current Company: <span>ZKTeco</span></p>#}
            </div>
            {% get_current_language as LANGUAGE_CODE %}
            {% if LANGUAGE_CODE == 'ar' or LANGUAGE_CODE == 'he' or LANGUAGE_CODE == 'fa' %}
                <div class="col-md-6">
                   <p class="current-company text-center">
                      <span class="switch-ap ta-pandemic">
                      <label for="switch-id" class="attendance">{% trans 'Pandemic' %}<br>{% trans 'Dashboard' %}</label>
                      <input type="checkbox" class="switch" id="switch-id">
                      <label for="switch-id"></label>
                      <label for="switch-id" class="pandemic">{% trans 'Attendance' %}<br>{% trans 'Dashboard' %}</label>
                      </span>
                   </p>
                </div>
            {% else %}
                <div class="col-md-6" style="padding-top: 0px;">
                    <p class="current-company text-center">
                        {% if 'ENABLE_CAFETERIA'|get_sale_param and 'ENABLE_ATT'|get_sale_param and not user.is_employee %}
                            <span class="switch-ap ta-pandemic">
                                <label for="switch-id" class="attendance">{% trans 'Attendance' %}<br>{% trans 'Dashboard' %}</label>
                                <input type="checkbox" class="switch" id="switch-id">
                                <label for="switch-id"></label>
                                <label for="switch-id" class="pandemic">{% trans 'Cafeteria' %}<br>{% trans 'Dashboard' %}</label>
                            </span>
                        {% elif 'ENABLE_CAFETERIA'|get_sale_param and not user.is_employee %}
                            <input type="hidden" id="cafe-only-mode" value="1">
                        {% endif %}
                    </p>
                </div>
            {% endif %}
        </div>
    <div class="d-none" id="pandemic">
      <div class="easy-pandemic-dashboard" id="">
        <div class="first-container">
          <div class="layui-row layui-col-space15" style="top: 0px; padding-bottom:0;margin:-7.5px ;background-image: url('../media/img/att/cafeteria.png');">
            <div class="layui-col-md1"></div>
            <div class="layui-col-md10">
              <div class="layui-col-md-offset5">
                <div class="layui-col-md15 "><h2>Food Items</h2></div>
              </div>
              <div class="layui-row layui-col-space15" >
                <div id="category_details">
                  <div class="layui-col-md2" style="padding:1rem ;width:20%;" id="total_amount">
                    <div class="layui-card">
                      <div class="layui-card-body" style="height:130px;background-color:#ea9999;' border-radius: 3%">
                        <div class="card-dashboard-show">
                          <h3 id="total">0</h3>
                          <p style="font-size: 20px; font-weight: bold;">
                            Total
                          </p>
                          <p>{% trans "cafeteria_model_amount" %}: <span id="amount">0</span></p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div class="layui-col-md4" style="padding-top: 5rem;">
                    <div class="layui-card" style="background: none">
                      <div class="layui-card-body real-time"  style="border: none">
                        <div class="layui-row">
                          <div class="layui-col-md2" >
                            <div class="layui-card" style="background: none;">
                              <div id="chartContainer" style="height: 400px; width: 700px;">
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layui-col-md1"></div>
              </div>
              <div class="layui-row layui-col-space15 layui-hide">
                <div class="layui-col-md1"></div>
                <div class="layui-col-md3">
                  <div class="layui-card">
                    <div class="layui-card-body ">
                      <div id="chartPresent" class="canvas_hide" style="height: 135px;"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="att_dashboard">
      <div class="layui-row layui-col-space15" style="top: 0px; padding-bottom:0;margin:-7.5px; padding-top: 0;">
        <div class="layui-col-md1"></div>
        <div class="layui-col-md10 pt-0">
          {% if software_type == 9 and not user.is_employee %}
            <fieldset class="layui-elem-field layui-field-title" style="margin-bottom: 0; border-style: none;">
              <legend style="margin-bottom: 0; margin-left: 0;">{% trans 'current_company' %}: {{ user.get_current_company_name }}</legend>
            </fieldset>
          {% endif %}

          <div class="layui-row layui-col-space15 pt-0">
            <div class="layui-col-md12 pt-0">
              <div class="layui-col-md2" style="width: 20% !important;">
                <div class="layui-card-body pt-0" style="border: none;">
                  <a href="#" style="text-decoration: none;">
                    <div class="card-dashboard-show dashboard-card dashboard-widget-content"
                         style="padding: 1.5em; margin: 0; border-left: 5px solid #6382d2;">
                      <a id="totalEmployees" href="javascript:void(0);" onclick="downloadFiles('totalEmployees')" aria-label="Total Employees">
                          <svg class="expand-icon" fill="#6382d2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path id="Download_1" data-name="Download 1" d="M21,14a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V15A1,1,0,0,0,21,14Zm-9.71,1.71a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,12.59V3a1,1,0,0,0-2,0v9.59l-2.29-2.3a1,1,0,0,0-1.42,1.42Z" transform="translate(-2 -2)"/>
                          </svg>
                      </a>
                      <div class="widget-content-wrapper">
                        <div class="dashboard-widget-content-left">
                          <div class="dashboard-widget-numbers" style="color:#6382d2;"><b><span
                                  id="empcount">0</span></b></div>
                          <div class="dashboard-widget-heading dashboard-mt-3">{% trans 'total_employees' %}</div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="layui-col-md2" style="width: 20% !important;">
                <div class="layui-card-body pt-0" style="border: none;">
                  <a href="#" style="text-decoration: none;">
                    <div class="card-dashboard-show dashboard-card dashboard-widget-content"
                         style="padding: 1.5em; margin: 0; border-left: 5px solid #73d2c7;">
                      <a id="newJoinees" href="javascript:void(0);" aria-label="New Joiners">
                          <svg class="expand-icon" fill="#73d2c7" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path id="Download_1" data-name="Download 1" d="M21,14a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V15A1,1,0,0,0,21,14Zm-9.71,1.71a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,12.59V3a1,1,0,0,0-2,0v9.59l-2.29-2.3a1,1,0,0,0-1.42,1.42Z" transform="translate(-2 -2)"/>
                          </svg>
                      </a>
                      <div class="widget-content-wrapper">
                        <div class="dashboard-widget-content-left">
                          <div class="dashboard-widget-numbers" style="color:#73d2c7;"><b><span
                                  id="newjoinercount">0</span></b></div>
                            <div class="dashboard-widget-heading dashboard-mt-3">{% trans 'new_joinee' %}
                                <span class="text-format">{% trans 'last7days' %}</span>
                            </div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="layui-col-md2" style="width: 20% !important;">
                <div class="layui-card-body pt-0" style="border: none;">
                  <a href="#" style="text-decoration: none;">
                    <div class="card-dashboard-show dashboard-card dashboard-widget-content"
                         style="padding: 1.5em; margin: 0; border-left: 5px solid #6b6d6f;">
                      <a id="resignedEmployees" href="javascript:void(0);" aria-label="Resigned Employees">
                          <svg class="expand-icon" fill="#6b6d6f" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path id="Download_1" data-name="Download 1" d="M21,14a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V15A1,1,0,0,0,21,14Zm-9.71,1.71a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,12.59V3a1,1,0,0,0-2,0v9.59l-2.29-2.3a1,1,0,0,0-1.42,1.42Z" transform="translate(-2 -2)"/>
                          </svg>
                      </a>
                      <div class="widget-content-wrapper">
                        <div class="dashboard-widget-content-left">
                          <div class="dashboard-widget-numbers" style="color:#6b6d6f;"><b><span
                                  id="resigncount">0</span></b></div>
                          <div class="dashboard-widget-heading dashboard-mt-3">{% trans 'resign' %}
                              <span class="text-format">{% trans 'last7days' %}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="layui-col-md2" style="width: 20% !important;">
                <div class="layui-card-body pt-0" style="border: none;">
                  <a href="#" style="text-decoration: none;">
                    <div class="card-dashboard-show dashboard-card dashboard-widget-content"
                         style="padding: 1.5em; margin: 0; border-left: 5px solid #61a0a8;">
                      <a id="totalDevices" href="javascript:void(0);" style="fill: blue" aria-label="Total Devices">
                          <svg class="expand-icon" fill="#61a0a8" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path id="Download_1" data-name="Download 1" d="M21,14a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V15A1,1,0,0,0,21,14Zm-9.71,1.71a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,12.59V3a1,1,0,0,0-2,0v9.59l-2.29-2.3a1,1,0,0,0-1.42,1.42Z" transform="translate(-2 -2)"/>
                          </svg>
                      </a>
                      <div class="widget-content-wrapper">
                        <div class="dashboard-widget-content-left">
                          <div class="dashboard-widget-numbers" style="color:#61a0a8;"><b><span
                                  id="devicecount">0</span></b></div>
                          <div class="dashboard-widget-heading dashboard-mt-3">{% trans 'total_devices' %}</div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>

              <div class="layui-col-md2" style="width: 20% !important;">
                <div class="layui-card-body pt-0" style="border: none;">
                  <a href="#" style="text-decoration: none;">
                    <div class="card-dashboard-show dashboard-card dashboard-widget-content"
                         style="padding: 1.5em; margin: 0; border-left: 5px solid #b278da;">
                      <a id="verifications" href="javascript:void(0);" aria-label="Verifications">
                          <svg class="expand-icon" fill="#b278da" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path id="Download_1" data-name="Download 1" d="M21,14a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V15A1,1,0,0,0,21,14Zm-9.71,1.71a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,12.59V3a1,1,0,0,0-2,0v9.59l-2.29-2.3a1,1,0,0,0-1.42,1.42Z" transform="translate(-2 -2)"/>
                          </svg>
                      </a>
                      <div class="widget-content-wrapper">
                        <div class="dashboard-widget-content-left">
                          <div class="dashboard-widget-numbers" style="color:#b278da;"><b><span id="punchcount">0</span></b>
                          </div>
                          <div class="dashboard-widget-heading dashboard-mt-3">{% trans 'Verification' %}</div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>

          <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
              <div class="layui-col-md2" style="width: 20% !important;">
                <div class="layui-card-body pt-0" style="border: none;">
                  <a href="#" style="text-decoration: none;">
                    <div class="card-dashboard-show dashboard-card dashboard-widget-content"
                         style="padding: 1.5em; margin: 0; border-left: 5px solid #7ac145;">
                      <a id="presentEmployees" href="javascript:void(0);" aria-label="Present Employees">
                          <svg class="expand-icon" fill="#7ac145" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path id="Download_1" data-name="Download 1" d="M21,14a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V15A1,1,0,0,0,21,14Zm-9.71,1.71a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,12.59V3a1,1,0,0,0-2,0v9.59l-2.29-2.3a1,1,0,0,0-1.42,1.42Z" transform="translate(-2 -2)"/>
                          </svg>
                      </a>
                      <div class="widget-content-wrapper">
                        <div class="dashboard-widget-content-left">
                          <div class="dashboard-widget-numbers" style="color:#7ac145;"><b><span
                                  id="inofficecount">0</span></b></div>
                          <div class="dashboard-widget-heading dashboard-mt-3">{% trans 'Present' %}</div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="layui-col-md2" style="width: 20% !important;">
                <div class="layui-card-body pt-0" style="border: none;">
                  <a href="#" style="text-decoration: none;">
                    <div class="card-dashboard-show dashboard-card dashboard-widget-content"
                         style="padding: 1.5em; margin: 0; border-left: 5px solid #ce5e79;">
                      <a id="absentEmployees" href="javascript:void(0);" aria-label="Absent Employees">
                          <svg class="expand-icon" fill="#ce5e79" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path id="Download_1" data-name="Download 1" d="M21,14a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V15A1,1,0,0,0,21,14Zm-9.71,1.71a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,12.59V3a1,1,0,0,0-2,0v9.59l-2.29-2.3a1,1,0,0,0-1.42,1.42Z" transform="translate(-2 -2)"/>
                          </svg>
                      </a>
                      <div class="widget-content-wrapper">
                        <div class="dashboard-widget-content-left">
                          <div class="dashboard-widget-numbers" style="color:#ce5e79;"><b><span
                                  id="absentcount">0</span></b></div>
                          <div class="dashboard-widget-heading dashboard-mt-3">{% trans 'Absent' %}</div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="layui-col-md2" style="width: 20% !important;">
                <div class="layui-card-body pt-0" style="border: none;">
                  <a href="#" style="text-decoration: none;">
                    <div class="card-dashboard-show dashboard-card dashboard-widget-content"
                         style="padding: 1.5em; margin: 0; border-left: 5px solid #daac3e;">
                      <a id="lateEmployees" href="javascript:void(0);" aria-label="Late Employees">
                          <svg class="expand-icon" fill="#daac3e" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path id="Download_1" data-name="Download 1" d="M21,14a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V15A1,1,0,0,0,21,14Zm-9.71,1.71a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,12.59V3a1,1,0,0,0-2,0v9.59l-2.29-2.3a1,1,0,0,0-1.42,1.42Z" transform="translate(-2 -2)"/>
                          </svg>
                      </a>
                      <div class="widget-content-wrapper">
                        <div class="dashboard-widget-content-left">
                          <div class="dashboard-widget-numbers" style="color:#daac3e;"><b><span
                                  id="latearrival">0</span></b></div>
                          <div class="dashboard-widget-heading dashboard-mt-3">{% trans 'late' %}</div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="layui-col-md2" style="width: 20% !important;">
                <div class="layui-card-body pt-0" style="border: none;">
                  <a href="#" style="text-decoration: none;">
                    <div class="card-dashboard-show dashboard-card dashboard-widget-content"
                         style="padding: 1.5em; margin: 0; border-left: 5px solid #66bfce;">
                      <a id="earlyEmployees" href="javascript:void(0);" aria-label="Early Employees">
                          <svg class="expand-icon" fill="#66bfce" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path id="Download_1" data-name="Download 1" d="M21,14a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V15A1,1,0,0,0,21,14Zm-9.71,1.71a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,12.59V3a1,1,0,0,0-2,0v9.59l-2.29-2.3a1,1,0,0,0-1.42,1.42Z" transform="translate(-2 -2)"/>
                          </svg>
                      </a>
                      <div class="widget-content-wrapper">
                        <div class="dashboard-widget-content-left">
                          <div class="dashboard-widget-numbers" style="color:#66bfce;"><b><span id="earlycount">0</span></b>
                          </div>
                          <div class="dashboard-widget-heading dashboard-mt-3">{% trans 'early_leave' %}</div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="layui-col-md2" style="width: 20% !important;">
                <div class="layui-card-body pt-0" style="border: none;">
                  <a href="#" style="text-decoration: none;">
                    <div class="card-dashboard-show dashboard-card dashboard-widget-content"
                         style="padding: 1.5em; margin: 0; border-left: 5px solid #e6771a;">
                      <a id="leaveEmployees" href="javascript:void(0);" aria-label="Leave Employees">
                          <svg class="expand-icon" fill="#e6771a" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
                            <path id="Download_1" data-name="Download 1" d="M21,14a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H5a1,1,0,0,1-1-1V15a1,1,0,0,0-2,0v4a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V15A1,1,0,0,0,21,14Zm-9.71,1.71a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l4-4a1,1,0,0,0-1.42-1.42L13,12.59V3a1,1,0,0,0-2,0v9.59l-2.29-2.3a1,1,0,0,0-1.42,1.42Z" transform="translate(-2 -2)"/>
                          </svg>
                      </a>
                      <div class="widget-content-wrapper">
                        <div class="dashboard-widget-content-left">
                          <div class="dashboard-widget-numbers" style="color:#e6771a;"><b><span id="leavecount">0</span></b>
                          </div>
                          <div class="dashboard-widget-heading dashboard-mt-3">{% trans 'on_leave' %}</div>
                        </div>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="layui-row layui-col-space15">
        <div class="layui-col-md1"></div>
        <div class="layui-col-md3">
          <div class="layui-card" style="border-radius: 12px;">
            <div class="layui-card-body" style="border-radius: 12px;">
              <div id="chartDeviceStatus" class="" style="height: 135px"></div>
            </div>
          </div>
        </div>
        <div class="layui-col-md7">
          <div class="layui-card" style="border-radius: 12px;">
            <div class="layui-card-body" style="border-radius: 12px;">
              <div id="chartCompare" class="" style="height: 135px"></div>
            </div>
          </div>
        </div>
        <div class="layui-col-md1"></div>
      </div>

      <!-- Real-Time Monitor -->
      <div class="layui-row layui-col-space15" style="margin-bottom: 2em;">
        <div class="layui-col-md1"></div>
        <div class="layui-col-md10">
          <div class="layui-card" style="box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .05);  border-radius: 12px;">
            <div class="layui-card-body real-time" style="border-radius: 12px;">
              <div class="layui-row">
                <div class="layui-col-md6">
                  <div class="layui-card">
                    <div class="layui-card-body ">
                      <div id="dashboard-table" style="overflow-x:hidden; overflow-y: auto;">
                        <table class="dashboard-table" style="width: 100%">
                          <thead></thead>
                          <tbody></tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="layui-col-md6">
                  <div class="layui-card-body ">
                    <div id="areaCapacity" style="height: 135px;"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="layui-col-md1"></div>
      </div>
      <!-- //End -->
      <!-- //easy TimePro dashboard -->

      <div id="obj_tooltip"></div>
    </div>
  </div>
{% endblock %}
{% block extension_js %}
  {{ block.super }}
  {% compress js file dashboard_js %}
    <script src="{% static 'js/echarts.min.js' %}"></script>
    <script src="{% static 'js/dashboard.js' %}?v=1.16"></script>
    <script src="{% static 'js/canvas/canvasjs.min.js' %}" ></script>
    <script type="text/javascript" src="{% static '/cloud/static/js-new/charts/loader.js' %}"></script>
    <script type="text/javascript" src="{% static '/cloud/static/js-new/easy-script.js' %}"></script>
  {% endcompress %}
{% endblock %}