{% extends "layouts/base.html" %} {% block title %}Addresses{% endblock %}

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}
<style>
  .main-panel .content {
    min-height: calc(100vh - 155px);
  }
  .navbar.navbar-absolute {
    z-index: 100000;
  }
  .card-body i {
    color: #9a9a9a;
    font-size: 1.4em;
  }
  .card-body i:hover {
    color: #575757;
  }
  .table > tbody > tr > .button-td,
  .white-content .table > tbody > tr > .button-td {
    width: 4rem;
    padding: 5px 0px;
  }
  .tooltip-inner {
    font-size: 10.5px;
    padding: 5px 10px;
  }
  .tooltip {
    border-radius: 4px;
  }
  #notification-bar {
    font-size: large;
    font-weight: bolder;
    position: fixed;
    top: -100%;
    left: 25%;
    width: 50%;
    color: #fff;
    padding: 20px;
    text-align: center;
    z-index: 9999;
    border-radius: 10px;
    transition: 0.5s;
  }
  #notification-bar.show{
    top: 10px;
  }

  .success {
    background-color: #4caf50;
  }
  .error {
    background-color: #f44336;
  }

  .filter-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
    color: white;
  }

  .filter-container div {
    margin: 10px;
    width: 100%;
    max-width: 180px;
  }

  .filter-container div select {
    width: 100%;
    max-width: 180px;
  }

  .white-content .filter-container {
    color: black;
  }
  .white-content #show-filter-container {
    color: black;
  }

  #show-filter-container {
    display: inline;
    margin: 10px;
    color: white;
    font-weight: bold;
    cursor: pointer;
  }
  .filter-container {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 1s, opacity 1s, visibility 0.5s;
  }
  .filter-container.show {
    max-height: 1000px;
    opacity: 1;
    visibility: visible;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
  }
  .btn-primary {
    /*padding: 10px 20px;*/
    margin: 0 20px;
  }
  .footer {
    padding: 0;
  }
  .footer .nav {
    padding-left: 0;
  }
  .footer .copyright {
    padding-right: 0;
  }
  @media screen and (max-width: 500px) {
    .filter-container div select {
      font-size: 12px;
    }
    .btn-primary {
      font-size: 12px;
      padding: 8px 18px;
      margin: 0 10px 0 0;
    }

    #notification-bar {
    font-size: medium;
    left: 10%;
    width: 80%;
    padding: 10px;
  }
  }

  .hidden-column {
    display: none;
}
</style>
<style type="text/css">
  body
  {
      counter-reset: Serial;          
  }

  table
  {
      border-collapse: separate;
  }

  tr td:first-child:before
  {
    counter-increment: Serial;      
    content: counter(Serial); 
  }
</style>
{% endblock %} {% block content %}
<div id="notification-bar"></div>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div id="show-filter-container">
        Show Filters <i class="tim-icons icon-minimal-down"></i>
      </div>

      <div class="filter-container">
        <div>
          <label for="quarter-type-filter">Filter by Address Type:</label>
          <select id="quarter-type-filter">
            <option value="">All</option>
            {% for value in quarterType %}
            <option value="{{ value }}">{{ value }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label for="meter-type-filter">Filter by Meter Type:</label>
          <select id="meter-type-filter">
            <option value="">All</option>
            <option value="metered">Metered</option>
            <option value="unmetered">Unmetered</option>
          </select>
        </div>
      </div>

      <div class="content">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">List of Addresses</h4>
                {% if user_role == 'admin' %}
                <a href="/create_room.html">
                  <button type="" class="btn btn-fill btn-primary">
                    Add Address
                  </button>
                </a>
                {% endif %}
              </div>
              <div class="card-body">
                <div class="table-responsive">
                  <table class="table tablesorter" id="">
                    <thead class="text-primary">
                      <tr>
                        <th class="text-center">S No.</th>
                        <th class="text-center">Address</th>
                        <th class="text-center hidden-column">Quarter Type</th>
                        <th class="text-center">Sanctioned Load</th>
                        <th class="text-center">Metering Type</th>
                        <th class="text-center">Rate name</th>
                        {% if user_role == 'admin' %}
                        <th class="text-center">Action</th>
                        {% endif %}
                      </tr>
                    </thead>
                    <tbody>
                    
                      {% for room in rooms %}
                     
                      <tr>
                        <td class="text-center">
                        
                        </td>
                        <td class="text-center">
                          {{room.quarter_type_name }} - {{room.room_number }} 
                        </td>
                        <td class="text-center quarter-type-column" style="display: none;" >
                          {{ room.quarter_type_name }}
                        </td>
                        <td class="text-center">{{ room.sanctioned_load }}</td>
                        <td class="text-center meter-type-column">
                          {% if room.is_metered %} Metered {% else %} Unmetered
                          {%endif %}
                        </td>
                        <td class="text-center">
                          {% if room.is_metered %} {%if room.meter_rate_name%}
                          {{ room.meter_rate_name }} {%else%} -- {%endif %}
                          {%else%} {%if room.flat_rate_name%}
                          {{room.flat_rate_name }} {%else%} -- {%endif %}
                          {%endif%}
                        </td>
                        {% if user_role == 'admin' %}
                        <td class="td-actions button-td">
                          <a
                            href="{% url 'update_room.html' room_id=room.room_id %}"
                            class="btn btn-link"
                            data-toggle="tooltip"
                            title="Edit Address"
                          >
                            <i class="tim-icons icon-pencil"></i>
                          </a>
                        </td>
                        <td class="td-actions button-td">
                          <button
                            type="button"
                            class="btn btn-link delete-button"
                            data-room-id="{{ room.room_id }}"
                            data-toggle="tooltip"
                            title="Delete Address"
                          >
                            <i class="tim-icons icon-trash-simple"></i>
                          </button>
                        </td>
                        {%endif%}
                      </tr>
                      {%endfor%}
                    
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% endblock content %}

      <!-- Specific Page JS goes HERE -->
      {% block javascripts %}
   
      <script>
        $(document).ready(function () {
          $('[data-toggle="tooltip"]').tooltip();
          $(".delete-button").click(function () {
            var roomId = $(this).data("room-id");
            if (confirm("Are you sure you want to delete this quarter?")) {
              $.ajax({
                url: "{% url 'delete_room' %}",
                type: "POST",
                data: {
                  room_id: roomId,
                  csrfmiddlewaretoken: "{{ csrf_token }}",
                },
                success: function (response) {
                  location.reload();
                },
                error: function (xhr, status, error) {
                  console.error(error);
                  alert("Error deleting quarter. Please try again.");
                },
              });
            }
          });
        });

        window.onload = function() {
    var messages = [
      {% for msg in messages %}
        "{{ msg }}"
      {% endfor %}
    ];
    let tags =  [{% for msg in messages %}
        "{{ msg.tags }}"
      {% endfor %}]
    if (messages.length === 0) {
      return;
    }

    let tag = tags.join('\n')
    var messageText = messages.join('\n');
    //console.log(tag)
    //alert(messageText);

    const notificationBar = document.getElementById("notification-bar");

        function showNotification(tag, message) {
          notificationBar.textContent = message;
          notificationBar.classList.add(tag);
          notificationBar.classList.add("show");
          setTimeout(function () {
            hideNotification();
          }, 3000);
        }


        function hideNotification() {
          notificationBar.textContent = "";
          notificationBar.classList.remove("show","success", "error");
        }

        if (tag.toLowerCase() == "success") {
          showNotification("success", messageText);
        }

        if (tag.toLowerCase() == "error") {
          showNotification("error", messageText);
        }

  };

//        document.addEventListener("DOMContentLoaded", function () {
//          const notificationBar = document.getElementById("notification-bar");
//
//          function showNotification(status, message) {
//            notificationBar.textContent = message;
//            notificationBar.classList.add(status);
//            notificationBar.classList.remove("hidden");
//            setTimeout(function () {
//              hideNotification();
//            }, 3000);
//          }
//
//          function hideNotification() {
//            notificationBar.textContent = "";
//            notificationBar.classList.remove("success", "error");
//            notificationBar.classList.add("hidden");
//          }
//
//          const successMessage = "{{ success_message }}";
//          const errorMessage = "{{ error_message }}";
//
//          if (successMessage.trim() !== "") {
//            showNotification("success", successMessage.trim());
//          }
//
//          if (errorMessage.trim() !== "") {
//            showNotification("error", errorMessage.trim());
//          }
//        });

        $(document).ready(function () {
          $('[data-toggle="tooltip"]').tooltip();
          function filterTable() {
            var quarterType = $("#quarter-type-filter").val();
            var meterType = $("#meter-type-filter").val();

            $(".table tbody tr").each(function () {
              var quarterTypeColumn = $(this)
                .find(".quarter-type-column")
                .text()
                .trim()
                .toLowerCase();
              var meterTypeColumn = $(this)
                .find(".meter-type-column")
                .text()
                .trim()
                .toLowerCase();

              if (
                (quarterType === "" ||
                  quarterTypeColumn === quarterType.toLowerCase()) &&
                (meterType === "" ||
                  meterTypeColumn === meterType.toLowerCase())
              ) {
                $(this).show();
              } else {
                $(this).hide();
              }
            });
          }
          $("#quarter-type-filter, #meter-type-filter").change(function () {
            filterTable();
          });
          filterTable();
        });

        const showFilterBtn = document.getElementById("show-filter-container");
        const filterContainer = document.querySelector(".filter-container");
        showFilterBtn.addEventListener("click", () => {
          filterContainer.classList.toggle("show");
          if (filterContainer.classList.contains("show")) {
            showFilterBtn.innerHTML =
              "Hide Filters <i class='tim-icons icon-minimal-up'></i>";
          } else {
            showFilterBtn.innerHTML =
              "Show Filters <i class='tim-icons icon-minimal-down'></i>";
          }
        });
      </script>
      {% endblock %}
    </div>
  </div>
</div>