{% extends "sample_base.html" %}
{% load static %}
{% load crispy_forms_tags %}
{% block title %}
<title> Dashboard </title>
{% endblock title %}

{% block Style %}
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.min.css'>
 <style>
.bg-submissions{
    background: #6CABBC;
}
.bg-Pending{
    background: #8459CF;
}
.delay {
  background-color: #FCDCDC !important;
  display: block;
  padding: 5px 0;
}
.completed{
  background-color: #F3F9F1 !important;
  display: block;
  padding: 5px 0;
}
.over{
  background-color: #C9FACB !important;
  display: block;
  padding: 5px 0;
}

.backlogged  {
  height: 14px;
  width: 14px;
  display: inline-block;
  border-radius: 3px;
  background-color: #FCDCDC !important;
  margin-right: 5px;
}
.surpassed  {
  height: 14px;
  width: 14px;
  display: inline-block;
  border-radius: 3px;
  background-color: #C9FACB !important;
  margin-right: 5px;
}
.balanced  {
  height: 14px;
  width: 14px;
  display: inline-block;
  border-radius: 3px;
  background-color: #F3F9F1 !important;
  margin-right: 5px;
}
</style>

{% endblock Style %}

{% block MainContent %}
<div class="contents">
    <div class="dashboard-grids">
        <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>{{requistion}}</h3>
                          <h4>New Requisitions</h4>
                    </div>
                    <a href="{% url 'sample_app_dashboard_requistion_list' %}">Requisitions</a>
                </div>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="dashboard-grid bg-submissions">
                    <div class="icons">
                      <i class="fa fa-users" aria-hidden="true"></i>
                    </div>
                    <div class="grid-text">
                        <h3>{{submissions}}</h3>
                          <h4>Today's Submissions</h4>
                    </div>
                    <a href="{% url 'sample_app_today_submissions_list' %}">Submissions</a>
                </div>
            </div>

            <div class="col-sm-6 col-md-4 col-lg-3">
                <div class="dashboard-grid bg-Pending">
                    <div class="icons">
                      <i class="fa fa-users" aria-hidden="true"></i>
                    </div>
                    <div class="grid-text">
                        <h3>{{pending}}</h3>
                          <h4>Pending</h4>
                    </div>
                    <a href="{% url 'sample_app_today_pending_list' %}">Pending</a>
                </div>
            </div>
        </div>
    </div>
</div>

{% if production_summary  %}

{% for production in production_summary %}
  

  
  <!-- month-summary -->
  <div class="month-summary">
      <div class="title2">
          <h3>Production Summary - {{production.0}} </h3>
      </div>

      <div class="table-responsive">
        <div class="summary">
          <table class="table month">
              <thead>
                  <tr>
                    {% for item in  production.1 %}
                    <th scope="col">{{item}}</th>
                    {% endfor %}
                  </tr>
              </thead>
              <tbody>
                {% for week in production.2 %}
                <tr>
                {% for day in week %}
                {% if current_day >= day.0 %}
                {% if day.1 < day.2 %}
                <td><span class="over"> <span class="fw-bold" style="color:#37A00A">{{day.1}} &nbsp &nbsp &nbsp</span> <span style="font-size: 21px !important;" class="fw-bold">{{day.0}} &nbsp &nbsp &nbsp </span>  <span class="fw-bold" style="color:#6CABBC;">{{day.2}}</span> </td>
                {% elif day.1 > day.2 %}
                <td><span class="delay"> <span class="fw-bold" style="color:#37A00A">{{day.1}} &nbsp &nbsp &nbsp</span> <span style="font-size: 21px !important;" class="fw-bold">{{day.0}} &nbsp &nbsp &nbsp </span>  <span class="fw-bold" style="color:#6CABBC;">{{day.2}}</span> </td>
                {% elif day.1 == day.2 %}
                <td><span class="completed"> <span class="fw-bold" style="color:#37A00A">{{day.1}} &nbsp &nbsp &nbsp</span> <span style="font-size: 21px !important;" class="fw-bold">{{day.0}} &nbsp &nbsp &nbsp </span>  <span class="fw-bold" style="color:#6CABBC;">{{day.2}}</span> </td>

                {% endif %}
                {% else %}
                <td><span class=""> <span class="fw-bold" style="color:#37A00A">{{day.2}} &nbsp &nbsp &nbsp</span> <span style="font-size: 21px !important;" class="fw-bold">{{day.0}} &nbsp &nbsp &nbsp </span>  <span class="fw-bold" style="color:#6CABBC;">{{day.1}}</span> </td>

                {% endif %}
                {% comment %} {% 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 %} {% endcomment %}
                {% endfor %}
             
              </tr>
                {% endfor %}
              </tbody>
              
          </table>
          <div class="hinch">
              <ul>
                  <li><span class="backlogged"></span> Backlogged </li>
                  <li><span class="surpassed"></span> Surpassed </li>
                  <li><span class="balanced"></span>Balanced</li>
          
              </ul>
          </div>
        </div>
      </div>
  </div>
  {% endfor %}
  {% endif %}
{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}         
{% endblock meassage %}
{% block JS %}
<script>

    $( document ).ready(function() {    
        $('select').select2();
      });
</script>
{% endblock JS %}