{% extends "basic/base_template.html" %}
{% load static %}

{% block pageName %}
Dashboard
{% endblock pageName %}


{% block content %}
{% comment %} <style>
    .bg-image {
        background-image: url('{% static "dist/assets/img/military.jpg" %}');
        background-position: bottom;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        height: 70vh;
        background-size: cover;
    }

    .welcome-message {
        text-align: center;
        width: 100%;
        height: 100%;
        backdrop-filter: blur(3px);
        font-family:'lovelo';
        color:gray;
        

    }

    .welcome-message h1 {
        font-size: 4rem;
        font-weight: bold;
    }

    .welcome-message p {
        font-size: 1.5rem;
        margin-bottom: 2rem;
    }
</style>
<div class="bg-image">
    <div class="welcome-message d-flex flex-column justify-content-center">
        <div>
            <h1>Welcome to the Army</h1>
        <p>Strength, Honor, and Courage</p>
        </div>
    </div>
</div> {% endcomment %}

<div class="row">
  <div class="col-lg-6">
<div class="row">
  <!--begin::Col-->
  <div class="col-lg-6">
      <!--begin::Small Box Widget 1-->
      <div class="small-box text-bg-warning">
        <div class="inner">
          <h3>{{notice_count}}</h3>
          <h4>Today's Notice</h5>
        </div>
        <i class="bi bi-unity small-box-icon"></i>
      </div>
        <!--end::Small Box Widget 1-->
    </div>
  <!--end::Col-->
  <!--begin::Col-->
  <div class="col-lg-6">
      <!--begin::Small Box Widget 1-->
      <div class="small-box text-bg-danger">
        <div class="inner">
          <h3>{{leave_count}}</h3>
          <h4>Leave</h5>
        </div>
        <i class="bi bi-unity small-box-icon"></i>
      </div>
        <!--end::Small Box Widget 1-->
    </div>
  <!--end::Col-->
  <!--begin::Col-->
  <div class="col-lg-6">
      <!--begin::Small Box Widget 1-->
      <div class="small-box text-bg-primary">
        <div class="inner">
          <h3>{{days_count}}</h3>
          <h4>On Parade in wk place</h5>
        </div>
        <i class="bi bi-unity small-box-icon"></i>
      </div>
        <!--end::Small Box Widget 1-->
    </div>
  <!--end::Col-->
  <!--begin::Col-->
  <div class="col-lg-6">
      <!--begin::Small Box Widget 1-->
      <div class="small-box text-bg-success">
        <div class="inner">
          <h3>{{spl_qual_count}}</h3>
          <h4>Spl Qual</h5>
        </div>
        <i class="bi bi-unity small-box-icon"></i>
      </div>
        <!--end::Small Box Widget 1-->
    </div>
  <!--end::Col-->
  <!--begin::Col-->
  <div class="col-lg-6">
      <!--begin::Small Box Widget 1-->
      <div class="small-box text-bg-success">
        <div class="inner">
          <h3>{{reward_count}}</h3>
          <h4>Reward</h5>
        </div>
        <i class="bi bi-unity small-box-icon"></i>
      </div>
        <!--end::Small Box Widget 1-->
    </div>
  <!--end::Col-->
  <!--begin::Col-->
  <div class="col-lg-6">
      <!--begin::Small Box Widget 1-->
      <div class="small-box text-bg-info">
        <div class="inner">
          <h3>{{punishment_count}}</h3>
          <h4>Punishment</h5>
        </div>
        <i class="bi bi-unity small-box-icon"></i>
      </div>
        <!--end::Small Box Widget 1-->
    </div>
  <!--end::Col-->
  <!--begin::Col-->
  <div class="col-lg-6">
      <!--begin::Small Box Widget 1-->
      <div class="small-box text-bg-info">
        <div class="inner">
          <h3>{{observation_count}}</h3>
          <h4>Obsn</h5>
        </div>
        <i class="bi bi-unity small-box-icon"></i>
      </div>
        <!--end::Small Box Widget 1-->
    </div>
  <!--end::Col-->
</div>
  </div>
  <div class="col-lg-6">
  <div class="card" id="calendar"></div>


  </div>
</div>







  <script src="{% static 'dist/calendar/index.global.min.js' %}"></script>

<!-- Safely encode events -->
{{ events|json_script:"events-data" }}
<script>
document.addEventListener("DOMContentLoaded", function() {
  var calendarEl = document.getElementById("calendar");
  // Parse the safe JSON data
  var events = JSON.parse(document.getElementById("events-data").textContent);
  var calendar = new FullCalendar.Calendar(calendarEl, {
    themeSystem: 'bootstrap',
    initialView: "dayGridMonth",
    height: "auto",
    headerToolbar: {
      left: "prev,next",
      center: "title",
      right: "dayGridMonth,multiMonthYear"
    },
    titleFormat: { year: 'numeric', month: 'short' },
    events: events
  });
  calendar.render();
});
</script>


<h1 class="text-center oswald">Notices</h1>

{% if notices %}
<div class="row">
    <div class="col-md-offset-1 col-md-12">
        <div class="panel">
            <div class="panel-body table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Sn</th>
                            <th>Date</th>
                            <th>From</th>
                            <th>To</th>
                            <th>Remarks</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in notices %}
                        <tr>
                            <td>{{forloop.counter}}</td>
                            <td>{{item.date}}</td>
                            <td>{{item.notice_from}}</td>
                            <td>{{item.notice_for}}</td>
                            <td>{{item.remarks}}</td>
                        </tr>
                        {% endfor %}
                        
                    </tbody>
                </table>
            </div>
            <!-- Pagination -->
            {% include "components/pagination.html" with page_obj=notices %}
        </div>
    </div>
  </div>
{% else %}
<div class="row">
    <div class="col-md-12">
        <div class="panel">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-sm-12 col-xs-12 d-flex justify-content-between">
                        <h3 class="panel-title text-white">No Notice Found</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock content %}