{% 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:right
        }
    }
  </style>


{% endblock Style %}

{% block MainContent %}
{% if messages %}
{% for message in messages %}
        <div class="alert alert-dismissible fade show {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}" role="alert">{{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
      </div>
{% endfor %}
{% endif %}

<form action="" method="POST">
  {% csrf_token %}
 <!-- table-area  -->
 <div class="contents">
 <div class="table-area">

  <!-- table-title -->
  <div class="table-title">
    <div class="row">
      <div class="col-md-4 col-sm-4">
        <div class="depertment-name">
          <h4>Holidays</h4>
        </div>
      </div>
      <div class="col-md-8 col-sm-8 right">
        <button type="submit" class="cus-btn sticky-top" >Save</button>
      </div>
    </div>
  </div>
  <!-- table-title -->
    <div class="table-header">
      <div class="row">
        <div class="col-md-8">
          
          {% if request.user.user_type == 'Mother_Organization_admin' %}
          <div class="row">
            <div class="col-md-4">
              {{form.sister_organization|as_crispy_field }}
            </div> 
            <div class="col-md-4">
              {{form.branch|as_crispy_field }}
            </div> 
          </div>
         {% elif request.user.user_type == 'Sister_Organization_admin' %}
         <div class="row">
          <div class="col-md-4">
            {{form.branch|as_crispy_field }}
          </div> 
          </div>
          {% elif request.user.user_type == 'Regular' %}
          <div class="row">

           </div>
           {% elif request.user.user_type == 'Branch' %}
           <div class="row">
 
            </div>
          {% else %}
          <div class="row">
            <div class="col-md-4">
              {{form.mother_organization|as_crispy_field }}
            </div> 
            <div class="col-md-4">
              {{form.sister_organization|as_crispy_field }}
            </div> 
            <div class="col-md-4">
              {{form.branch|as_crispy_field }}
            </div> 
          </div>
        {% endif %}
        </div>
        <div class="col-md-4">
          <div class="data-search right">
            <div class="form-group">
              <select class="form-control" id="year">
              <option value="">SELECT YEAR</option>
              {% for i in forloop_iterator  %}
              <option value={{i}}>{{i}}</option>
              {% endfor %}
              </select>
            </div>
          </div>
         </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-7 col-sm-12">
        <div class="tables table-responsive" id="calender-replace">
          <table class="table table-striped table-hover" id="employeeList">
              <thead>
                  <tr>
                      <th>Date</th>
                      <th>Day </th>
                      <th>Description</th>
                  </tr>
              </thead>
              <tbody id="check-rows">
                {% for day in year_dict.January %}
                  <tr>
                      <td>
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
                              <a>
                                  {{ day.0}}    
                              </a>
                        </div>
                      </td>
                      <td>
                        <a id="date-id">
                          {{ day.1}}    
                          </a>
                      </td>
                      <td>
                        <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
                     </td>
                  </tr>
                {% endfor %}   
                {% for day in year_dict.February %}
                <tr>
                    <td>
                      <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
                            <a>
                                {{ day.0}}    
                            </a>
                      </div>
                    </td>
                    <td>
                      <a id="date-id">
                        {{ day.1}}    
                        </a>
                    </td>
                    <td>
                      <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
                   </td>
                </tr>
              {% endfor %}  
              {% for day in year_dict.March %}
              <tr>
                  <td>
                    <div class="form-check">
                      <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
                          <a>
                              {{ day.0}}    
                          </a>
                    </div>
                  </td>
                  <td>
                    <a id="date-id">
                      {{ day.1}}    
                      </a>
                  </td>
                  <td>
                    <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
                 </td>
              </tr>
            {% endfor %}   
            {% for day in year_dict.April %}
            <tr>
                <td>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
                        <a>
                            {{ day.0}}    
                        </a>
                  </div>
                </td>
                <td>
                  <a id="date-id">
                    {{ day.1}}    
                    </a>
                </td>
                <td>
                  <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
               </td>
            </tr>
            {% endfor %}  
            {% for day in year_dict.May %}
            <tr>
                <td>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
                        <a>
                            {{ day.0}}    
                        </a>
                  </div>
                </td>
                <td>
                  <a id="date-id">
                    {{ day.1}}    
                    </a>
                </td>
                <td>
                  <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
               </td>
            </tr>
          {% endfor %}  
          {% for day in year_dict.June %}
          <tr>
              <td>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
                      <a>
                          {{ day.0}}    
                      </a>
                </div>
              </td>
              <td>
                <a id="date-id">
                  {{ day.1}}    
                  </a>
              </td>
              <td>
                <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
             </td>
          </tr>
         {% endfor %}  
          {% for day in year_dict.July %}
          <tr>
              <td>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
                      <a>
                          {{ day.0}}    
                      </a>
                </div>
              </td>
              <td>
                <a id="date-id">
                  {{ day.1}}    
                  </a>
              </td>
              <td>
                <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
              </td>
          </tr>
          {% endfor %}  
          {% for day in year_dict.August %}
          <tr>
              <td>
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
                      <a>
                          {{ day.0}}    
                      </a>
                </div>
              </td>
              <td>
                <a id="date-id">
                  {{ day.1}}    
                  </a>
              </td>
              <td>
                <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
             </td>
          </tr>
        {% endfor %}  
        {% for day in year_dict.September %}
        <tr>
            <td>
              <div class="form-check">
                <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
                    <a>
                        {{ day.0}}    
                    </a>
              </div>
            </td>
            <td>
              <a id="date-id">
                {{ day.1}}    
                </a>
            </td>
            <td>
              <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
           </td>
        </tr>
      {% endfor %}
      {% for day in year_dict.October%}
      <tr>
          <td>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
                  <a>
                      {{ day.0}}    
                  </a>
            </div>
          </td>
          <td>
            <a id="date-id">
              {{ day.1}}    
              </a>
          </td>
          <td>
            <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
         </td>
      </tr>
    {% endfor %}
    {% for day in year_dict.November%}
    <tr>
        <td>
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
                <a>
                    {{ day.0}}    
                </a>
          </div>
        </td>
        <td>
          <a id="date-id">
            {{ day.1}}    
            </a>
        </td>
        <td>
          <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
       </td>
    </tr>
  {% endfor %}
  {% for day in year_dict.December%}
  <tr>
      <td>
        <div class="form-check">
          <input class="form-check-input" type="checkbox" value="{{day.0}}" name="date" id="date-checkbox">
              <a>
                  {{ day.0}}    
              </a>
        </div>
      </td>
      <td>
        <a id="date-id">
          {{ day.1}}    
          </a>
      </td>
      <td>
        <input class="form-control" type="text" name="{{day.0}}" placeholder="Description"  id="description">
     </td>
  </tr>
  {% endfor %}
        </tbody>
        </table>
      </div>

      </div>
      <div class="col-md-5 col-sm-12">
        <u><span class="mt-3 fw-bold">WEEKLY HOLIDAY:</span></u> 
       <div class="mt-3">
         <h6>
          <input class="form-check-input me-2" type="checkbox" id="friday" value="friday">
           Mark All Friday
          </h6>
          <h6 class="pl-4">
            <input class="form-check-input me-2" type="checkbox" id="saturday" value="saturday">
             Mark All Saturday
          </h6>
          <h6 class="pl-4">
            <input class="form-check-input me-2" type="checkbox" id="sunday" value="sunday" >
             Mark All Sunday
          </h6>
          <h6 class="pl-4">
            <input class="form-check-input me-2" type="checkbox" id="monday" value="monday" >
             Mark All Monday
          </h6>
          <h6 class="pl-4">
            <input class="form-check-input me-2" type="checkbox" id="tuesday" value="tuesday" >
             Mark All Tuesday
          </h6>
          <h6 class="pl-4">
            <input class="form-check-input me-2" type="checkbox" id="wednesday" value="wednesday">
             Mark All Wednesday
          </h6>
          <h6 class="pl-4">
            <input class="form-check-input me-2" type="checkbox" id="thursday" value="thursday">
             Mark All Thursday
          </h6>
       </div>
        <div class="mt-5">
          <u>
            <input class="form-check-input p-0 me-2" type="checkbox" value="" id="govt">
            <span class="mt-2 me-3 p-0 fw-bold">GOVT.HOLIDAY:</span>
          </u> 
        </div>
         <div>
           <h6>1.*21-Februay-International Mother Language Day</h6>
           <h6>2.*26-March-Independence Day</h6>
           <h6>3.*14-April-Pohela Boishakh</h6>
           <h6>4.*1-May-International Workers'Day</h6>
           <h6>5.*16-December-Victory day</h6>
           <h6>6.*25-December-Christmas(Borodin)</h6>
         </div>
     </div>

  </div>
</form>
</div>

<!-- table-area  -->
{% endblock MainContent %}
{% block meassage %}
{% include 'notifications/notifications.html' %}           
{% endblock meassage %}


{% block JS %}
<script>
    /*var year = $('#year').find(":selected").text()*/
     $('#year').change(function(){
         var year=$(this).children("option:selected").val();
         if (year){
             year=year
         }
         else{
             year=2020
         }
         console.log(year)
         $.ajax({                       
            url: "{% url 'ajax_calender' %}",                 
            data: {
              'year':year       
            },
            success: function (data) {   
              $("#calender-replace").html(data);  
              console.log(data.year_dict)
            }
         });
          
        })
  
</script>
<script type=text/javascript>
  var load_branch_url = "{% url 'ajax_load_branchs' %}"
  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/holiday_setup/index.js' %} "></script>

{% endblock JS %}