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

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}
<style>
  .main-panel .content {
    min-height: calc(100vh - 125px);
  }
  .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: 0;
    left: 0;
    width: 100%;
    color: #fff;
    padding: 20px;
    text-align: center;
    z-index: 9999;
  }

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

  .error {
    background-color: #f44336;
  }

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

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

  .filter-container label {
    margin-left: 1rem;
  }
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .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 {
      display: flex;
      flex-direction: column;
      max-width: fit-content;
    }

    .filter-container select {
      margin-bottom: 0.5rem;
    }

    .filter-container label {
      margin-left: 0;
    }
    .btn-primary {
      font-size: 12px;
      padding: 8px 18px;
      margin: 0 10px 0 0;
    }
  }
  @media screen and (max-width: 385px) {
    .card-header {
      align-items: start;
      flex-direction: column;
    }
  }
</style>
{% endblock %} {% block content %}
<div id="notification-bar" class="hidden"></div>

<div class="content">
  <div class="row">
    <div class="col-md-12">
      <div class="content">
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">List of Meter Rates</h4>
                {% if user_role == 'admin' %}
                <a href="/create_meter_rate">
                  <button type="" class="btn btn-fill btn-primary">
                    Add Meter Rate
                  </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">Rate Name</th>
                        {% if user_role == 'admin' %}
                        <th class="text-center">Delete</th>
                        {% endif %}
                        <th class="text-center">Fixed Charges (Rs/kW)</th>
                        <th class="text-center">Electricity Duty</th>
                        <th class="text-center">From</th>
                        <th class="text-center">To</th>
                        <th class="text-center">Rate (Rs/kWh)</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for rate in meter_rates %}
                      <tr>
                        <td
                          class="text-center"
                          rowspan="{{ rate.rates|length|add:1 }}"
                        >
                          {{ rate.name }}
                        </td>
                        {% if user_role == 'admin' %}
                        <td
                          class="text-center"
                          rowspan="{{ rate.rates|length|add:1 }}"
                        >
                        
                          <form action="{% url 'read_rates' %}" method="POST">
                            {% csrf_token %}
                            <input
                              type="hidden"
                              name="action"
                              value="mr-delete"
                            />
                            <input
                              type="hidden"
                              name="id"
                              value="{{ rate.id }}"
                            />

                            <input
                              type="submit"
                              class="btn-danger"
                              value="Delete"
                              onclick="return confirmDelete()"
                            />
                          </form>
                        </td>
                        {% endif %}
                        <td
                          class="text-center"
                          rowspan="{{ rate.rates|length|add:1 }}"
                        >
                          {{ rate.fixed_charges }}
                        </td>
                        <td
                          class="text-center"
                          rowspan="{{ rate.rates|length|add:1 }}"
                        >
                          {{ rate.electricity_duty }}
                        </td>
                      </tr>
                      {% for x in rate.rates %}
                      <tr>
                        <td class="text-center">{{ x.from }}</td>
                        <td class="text-center">{{ x.to }}</td>
                        <td class="text-center">{{ x.rate }}</td>
                      </tr>
                      {% endfor %} {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">List of Flat Rates</h4>
                {% if user_role == 'admin' %}
                <a href="/create_flat_rate">
                  <button type="" class="btn btn-fill btn-primary">
                    Add Flat Rate
                  </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">Rate Name</th>
                        {% if user_role == 'admin' %}
                        <th class="text-center">Delete</th>
                        {% endif %}
                        <th class="text-center">From</th>
                        <th class="text-center">To</th>
                        <th class="text-center">Rate (Rs/kWh)</th>
                        <th class="text-center">Every Additional (kW)</th>
                        <th class="text-center">Additional Rate (Rs/month)</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for rate in flat_rates %}
                      <tr>
                        <td
                          class="text-center"
                          rowspan="{{ rate.rates|length|add:1 }}"
                        >
                          {{ rate.name }}
                        </td>
                        {% if user_role == 'admin' %}
                        <td
                          class="text-center"
                          rowspan="{{ rate.rates|length|add:1 }}"
                        >
                          <form action="{% url 'read_rates' %}" method="POST">
                            {% csrf_token %}
                            <input
                              type="hidden"
                              name="action"
                              value="fr-delete"
                            />
                            <input
                              type="hidden"
                              name="id"
                              value="{{ rate.id }}"
                            />
                            <input
                              type="submit"
                              class="btn-danger"
                              value="Delete"
                              onclick="return confirmDelete()"
                            />
                          </form>
                        </td>
                        {% endif %}
                      </tr>
                      {% for x in rate.rates %}
                      <tr>
                        <td class="text-center">{{ x.from }}</td>
                        <td class="text-center">{{ x.to }}</td>
                        <td class="text-center">{{ x.rate }}</td>
                        <td class="text-center">{{ x.additional }}</td>
                        <td class="text-center">{{ x.additional_rate }}</td>
                      </tr>
                      {% endfor %} {% 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();
        });
        window.onload = function() {
          var messages = [
            {% for msg in messages %}
              "{{ msg }}",
            {% endfor %}
          ];
          
          if (messages.length === 0) {
            return;
          }
          
          var messageText = messages.join('\n');
          alert(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());
          }
        });
        function confirmDelete() {
    return confirm("Are you sure you want to delete this rate?");
  }
      </script>
      {% endblock %}
    </div>
  </div>
</div>