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


{% block Style %}
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/sweetalert2@10.10.1/dist/sweetalert2.min.css'>
 <style>
    @media(min-width:768px){
        .right{
            text-align:right
        }
    }
     @media(max-width:768px){
        .right{
            text-align:center
        }
    }
    .search {
      width: 94%!important;
    }
  </style>


{% endblock Style %}

{% block MainContent %}
{% if request.user.user_type == 'Branch' or request.user.user_type == 'Regular'%}
<div class="contents">
    <div class="table-area">
        <!-- table-title -->
        <div class="table-title">
            <div class="row">
            <div class="col-md-5">
                <div class="depertment-name">
                <h4> My Leave Balance</h4>
                </div>
            </div>
            <div class="col-md-7">
                <form action="" method='POST'>
                {% csrf_token %}
                <div class="row">
                    <div class="col-md-5">
                    </div>
                    <div class="col-md-5">
                    <select class="form-control right" name="year">
                        <option selected>SELECT YEAR</option>
                        {% for i in forloop_iterator  %}
                        <option value={{i}}>{{i}}</option>
                        {% endfor %}
                    </select>
                    </div>
                    <div class="col-md-2" style="text-align: right;">
                    <button type="submit" class="cus-btn">Submit</button>
                    </div>
                </div>
                </form>
            </div>
            
            </div>
        </div>
        
        {% if leave_balance %}
        <!-- table-title -->
            <div class="table-header">
            <div class="tables table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>SL</th>
                        <th>Leave Type</th>
                        <th>Total Leave</th>
                        <th>Spent Leave</th>
                        <th>Leave Balance</th>
                        <th>Year</th>
                    </tr>
                </thead>
                <tbody>
                
                {% for item in leave_balance %}
                    <tr>
                        <td>{{ forloop.counter }}</td>
                        <td>{{item.0}}</td>
                        <td>{{item.1}}</td>
                        <td>{{item.3}}</td>
                        <td>{{item.4}}</td>
                        <td>{{item.2}}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            </div>
        </div>
                    <!-- table-area  -->
{% else %}

</div>

<div class="table-area">
    <div class="tables">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>SL</th>
                    <th>Leave Type</th>
                    <th>Total Leave</th>
                    <th>Spent Leave</th>
                    <th>Leave Balance</th>
                    <th>Year</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td style="text-align: center;" colspan="10">No Data Found</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>
{% endif %}
{% endif %}
{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}    
{% endblock meassage %}
{% block JS %}
<script type=text/javascript>
    var load_sister_organization_url = "{% url 'sister-organization-load' %}"
    var load_branch_organization_url = "{% url 'load-branch-organization' %}"
  </script>
<script src="{% static 'js/hr_app/leave_application/index.js' %} "></script>


{% endblock JS %}