{% extends "factory_base.html" %}
{% load static %}
{% load crispy_forms_tags %}


{% block Style %}
 
{% endblock Style %}

{% block MainContent %}
<div class="contents">
      <div class="table-area table-responsive">
        <div class="table-title">
          <div class="row">
            <img src="{% static 'img/eid_greetings.jpg' %}" class="img-fluid" alt="Responsive image">
          </div>
        </div>     
      </div>    
</div>
<!-- dashboard-grids -->
<div class="dashboard-grids">
    {% if request.user.user_type == 'Branch'%}
    <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="dashboard-grid bg-green">
                <div class="icons">
                  <i class="fa fa-users" aria-hidden="true"></i>
                </div>
                <div class="grid-text">
                    <h3>{{employees}}</h3>
                      <h4>Total Employee</h4>
                </div>
                <a href="#">Total Employee</a>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="dashboard-grid bg-pase">
                <div class="icons">
                  <i class="fa fa-user-plus" aria-hidden="true"></i>
                </div>
              <div class="grid-text">
                <h3>{{t_present}}</h3>
                <h4>Today's Presents</h4>
                </div>
                <a href="#">Today's Presents</a>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="dashboard-grid bg-bringal">
                <div class="icons">
                  <i class="fa fa-user-times" aria-hidden="true"></i>
                </div>
              <div class="grid-text">
                <h3>{{t_absent}}</h3>
                <h4>Today's Absents</h4>
                </div>
                <a href="#">Today's Absents</a>
            </div>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
            <div class="dashboard-grid bg-darkgreen">
                <div class="icons">
                  <i class="fa fa-user" aria-hidden="true"></i>
                </div>
              <div class="grid-text">
                <h3>{{today_movement}}</h3>
                <h4>Today's Movement</h4>
                </div>
                <a href="#">Today's Leave</a>
            </div>
        </div>

    </div>
    <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="dashboard-grid bg-green">
                    <div class="icons">
                      <i class="fa fa-user-plus" aria-hidden="true"></i>
                    </div>
                    <div class="grid-text">
                        <h3>{{employee_total_present}}</h3>
                          <h4>Total Present</h4>
                    </div>
                    <a href="#">Total Present </a>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="dashboard-grid bg-pase">
                    <div class="icons">
                      <i class="fa fa-user-times" aria-hidden="true"></i>
                    </div>
                  <div class="grid-text">
                    <h3>{{employee_total_absent}}</h3>
                    <h4>Total Absents</h4>
                    </div> 
                    <a href="#">Total Absents</a>
                </div>
            </div>
        </div>
    {% endif %}
    {% if request.user.user_type == 'Regular'%}
    <div class="row">
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="dashboard-grid bg-green">
                    <div class="icons">
                      <i class="fa fa-user-plus" aria-hidden="true"></i>
                    </div>
                    <div class="grid-text">
                        <h3>{{employee_total_present}}</h3>
                          <h4>Total Present</h4>
                    </div>
                    <a href="#">Total Present </a>
                </div>
            </div>
            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="dashboard-grid bg-pase">
                    <div class="icons">
                      <i class="fa fa-user-times" aria-hidden="true"></i>
                    </div>
                  <div class="grid-text">
                    <h3>{{employee_total_absent}}</h3>
                    <h4>Total Absents</h4>
                    </div> 
                    <a href="#">Total Absents</a>
                </div>
            </div>
        </div>
    {% endif %}
</div>

<!-- current-status -->
{% if leave_balance %}
<div class="current-status">
  <div class="title2">
      <h3>Current leave status </h3>
  </div>
  {% for item in leave_balance  %}
  <div class="status">
      <ul>
          <li><b>{{item.0}}</b></li>
          <li>Total Leave: {{item.1}}</li>
          <li>Spent Leave: {{item.3}}</li>
          <li>Leave Balance: {{item.4}}</li>
          <li>Year: {{item.2}}</li>
      </ul>
  </div>
  {% endfor %}
</div>
{% endif %} 
  <!-- current-status -->
{% if month_list   %}

  <!-- month-summary -->
  <div class="month-summary">
      <div class="title2">
          <h3>Monthly Attendance Summary</h3>
      </div>

      <div class="table-responsive">
        <div class="summary">
          <table class="table month">
              <thead>
                  <tr>
                    {% for item in  month_list %}
                    <th scope="col">{{item}}</th>
                    {% endfor %}
                  </tr>
              </thead>
              <tbody>
                {% for week in day_list %}
                <tr>
                
                {% for day in week %}
                {% if day.1 == 'H' %}
                <td><span class="weeknd">{{day.0}}</span> </td>
                {% endif %}
                 {% if day.1 == 'P' %}
                 <td><span class="present">{{day.0}}</span> </td>
                 {% endif %}
                  {% if day.1 == 'A' %}
                 <td><span class="absents">{{day.0}}</span> </td>
                 {% endif %}
                 {% if day.1 == 'L' %}
                 <td><span class="delay">{{day.0}}</span> </td>
                 {% endif %}
                 {% if day.1 == 'W' %}
                 <td><span class="">{{day.0}}</span> </td>
                 {% endif %}
                 {% if day.1 == 'LL' %}
                 <td><span class="leave">{{day.0}}</span> </td>
                 {% endif %}
                {% if day.1 == 'PP' %}
                 <td><span class="partial">{{day.0}}</span> </td>
                 {% endif %}
                {% endfor %}
             
              </tr>
                {% endfor %}
              </tbody>
              
          </table>
          <div class="hinch">
              <ul>
                  <li><span class="delay-leave"></span> Leave </li>
                  <li><span class="delay-color"></span> Late </li>
                  <li><span class="delay-colo"></span>Presents</li>
                  <li><span class="absents-color"></span> Absents</li>
                  <li><span class="weeknd-color"></span> Weeknd</li>
                  <li><span class="partial-color"></span> Partial</li> 
              </ul>
          </div>
        </div>
      </div>
  </div>
  {% endif %}
<!-- dashboard-grids -->

{% endblock MainContent %}
{% block meassage %}

{% include 'notifications/notifications.html' %}

{% endblock meassage %}


{% block JS %}

{% endblock JS %}