{% extends "layouts/base.html" %} {% block title %}Update/Set Readings
{%endblock %}

<!-- Specific Page CSS goes HERE -->
{% block stylesheets %}
<style>
  .main-panel > .content {
    padding: 0;
  }
  .container {
    min-width: 100%;
    margin: 0;
    padding: 0;
  }
  .row {
    margin: 0;
  }
  .offset-md-3 {
    margin-left: 0;
  }
  .card {
    min-height: calc(100vh - 270px);
    left: 300px;
    min-width: calc(100vw - 400px);
    margin-block: 0;
  }
  .card * {
    font-size: large;
  }
  .card .title {
    font-size: 2rem;
  }
  .card label {
    font-size: 1rem;
  }
  .form-control {
    height: calc(3rem + 2px);
  }
  select option {
    color: black;
  }
  select option:checked {
    color: rgb(0, 228, 0);
  }

  #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;
  }
  .hidden {
    display: none;
  }
  .success {
    background-color: #4caf50;
  }
  .error {
    background-color: #f44336;
  }
  .form-control[disabled],
  .form-control[readonly],
  fieldset[disabled] .form-control {
    color: white;
  }

  .white-content .form-control[readonly],
  .white-content fieldset[disabled] .form-control {
    color: black;
  }

  .modal-dialog {
    max-width: 50%;
  }
  .modal {
    outline: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
  }

  .modal-content {
    padding: 10px;
    background: #27293d;
    color: white;
  }

  .list-group-item {
    background-color: #27293d;
    border: 0.0625rem solid #e9ecef26;
  }

  .modal-content .modal-header .modal-title {
    font-weight: bold;
    color: white;
  }
  .modal.show .modal-dialog {
    transform: translate(0, 0%);
  }
  .modal.show {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  #file-name-display {
    color: rgb(137, 240, 97);
  }
  .white-content #file-name-display {
    color: rgb(0, 0, 255);
  }
  .white-content .modal-content,
  .white-content .list-group-item {
    background-color: #ffffff;
  }
  .white-content .list-group-item {
    color: #222a42;
    border: 0.0625rem solid #d7d8da;
  }
  .white-content .modal-content .modal-header .modal-title {
    color: #222a42;
  }

  .enter-button {
    font-size: 1rem;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    color: #fff;
    background-color: #007bff; 
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .enter-button:hover {
    background-color: #0056b3; 
  }

  .enter-button:focus {
    outline: none;
  }


  @media screen and (max-width: 992px) {
    .card {
      left: 200px;
    }
    .modal-dialog {
      max-width: 100%;
      margin: 0 10px;
    }
  }
  @media screen and (max-width: 768px) {
    .card {
      left: 0;
    }
  }
  @media screen and (max-width: 576px) {
    .card * {
      font-size: medium;
    }
    .card .title {
      font-size: 1.6rem;
    }
    .card label {
      font-size: 0.8rem;
    }
    .form-control {
      height: calc(2.7rem + 2px);
    }
    /*.modal-dialog {
    }*/
    .modal-content .modal-body {
      line-height: 1.5;
      padding: 10px;
    }
    .list-group-item {
      font-size: 15px;
    }
  }
  @media screen and (max-width: 400px) {
    .list-group-item {
      font-size: 12px;
      padding: 0.5rem 0.5rem;
    }
    .download-btn {
      font-size: small;
      margin: 0;
      padding: 10px 15px;
    }
  }
</style>

{% endblock %} {% block content %}
<div id="notification-bar" class="hidden"></div>

<div class="content">
  <div class="container">
    <div class="row pt-5">
      <div class="col-md-6 mt-5 offset-md-3 pt-5 mt-5">
        <div class="card">
          <div class="card-header text-center py-4">
            <div class="d-flex justify-content-between align-items-center">
              <h4 class="title" style="padding-left: 3%;">Update/Set Readings</h4>
              <a href="{% url 'manual_set_reading.html' %}">
                <button type="" class="btn btn-fill btn-primary">
                  Enter Manually
                </button>
              </a>
            </div>
          </div>
          
          <div
            class="modal fade"
            id="invalidEntriesModal"
            tabindex="-1"
            role="dialog"
            aria-labelledby="invalidEntriesModalLabel"
            aria-hidden="true"
          >
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="invalidEntriesModalLabel">
                    Invalid Entries
                  </h5>
                  <button
                    type="button"
                    class="close"
                    data-dismiss="modal"
                    aria-label="Close"
                  >
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <ul id="invalidEntriesList" class="list-group"></ul>
                </div>
                <div class="modal-footer">
                  <button
                    type="button"
                    class="btn btn-secondary"
                    data-dismiss="modal"
                  >
                    Close
                  </button>
                </div>
              </div>
            </div>
          </div>
          <form
            role="form"
            method="post"
            action="{% url 'update-readings' %}"
            enctype="multipart/form-data"
          >
            {% csrf_token %}
            <div class="card-body px-5 py-3">
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label for="id_month_selection">Select a Month</label>
                  <select
                    class="form-control"
                    id="id_month_selection"
                    name="selected_month"
                    required
                  >
                    <option value="" disabled selected>Select Month</option>
                    <option value="January">January</option>
                    <option value="February">February</option>
                    <option value="March">March</option>
                    <option value="April">April</option>
                    <option value="May">May</option>
                    <option value="June">June</option>
                    <option value="July">July</option>
                    <option value="August">August</option>
                    <option value="September">September</option>
                    <option value="October">October</option>
                    <option value="November">November</option>
                    <option value="December">December</option>
                  </select>
                  <span class="text-danger"></span>
                </div>

                <div class="form-group col-md-6">
                  <label for="id_selected_year">Select a Year</label>
                  <div class="input-group">
                    <input
                      type="number"
                      class="form-control"
                      id="id_selected_year"
                      name="selected_year"
                      min="2023"
                      value=""
                      readonly
                    />
                    <span class="input-group-btn">
                      <button
                        type="button"
                        class="btn btn-default"
                        onclick="decreaseYear()"
                      >
                        -
                      </button>
                      <button
                        type="button"
                        class="btn btn-default"
                        onclick="increaseYear()"
                      >
                        +
                      </button>
                    </span>
                  </div>
                  <span class="text-danger"></span>
                </div>

                <script>
                  document.addEventListener("DOMContentLoaded", function () {
                    const yearInput =
                      document.getElementById("id_selected_year");
                    const currentYear = new Date().getFullYear();
                    yearInput.value = currentYear;
                  });
                  function increaseYear() {
                    const yearInput =
                      document.getElementById("id_selected_year");
                    let currentYear = parseInt(yearInput.value, 10);
                    if (currentYear < 3000) {
                      yearInput.value = currentYear + 1;
                    }
                  }

                  function decreaseYear() {
                    const yearInput =
                      document.getElementById("id_selected_year");
                    let currentYear = parseInt(yearInput.value, 10);
                    if (currentYear > 2023) {
                      yearInput.value = currentYear - 1;
                    }
                  }
                </script>
              </div>

              <div class="form-row">
                <div class="form-group col-md-12">
                  <label
                    for="id_uploaded_file"
                    style="
                      border: 1px solid pink;
                      border-radius: 24px;
                      padding: 10px;
                    "
                    >Upload Excel File</label
                  >
                  <input
                    type="file"
                    class="form-control"
                    id="id_uploaded_file"
                    name="uploaded_file"
                    onchange="displayFileName()"
                  />
                  <span class="text-danger"></span>
                </div>

                <!-- Element to display the selected file name -->
                <div id="file-name-display"></div>
              </div>
              <a href="../../static/assets/excel/demoExcel.xlsx" download>
                <button type="button" class="btn btn-primary download-btn">
                  Download Excel Format
                </button>
              </a>
            </div>
            <div class="card-footer text-center">
              <button type="submit" class="btn btn-fill btn-primary">
                Submit
              </button>
              <button
                type="button"
                class="btn btn-secondary"
                id="invalidEntriesBtn"
                data-toggle="modal"
                data-target="#invalidEntriesModal"
                style="display: none"
              ></button>
            </div>
          </form>
          <script>
            $(document).ready(function () {
              $("form").on("submit", function (e) {
                e.preventDefault();
                $.ajax({
                  url: $(this).attr("action"),
                  type: $(this).attr("method"),
                  data: new FormData(this),
                  processData: false,
                  contentType: false,
                  dataType: "json",
                  success: function (response) {
                    if (response.status === "success") {
                      alert(response.message);
                    } else if (response.status === "error") {
                      const invalidEntriesModal = $("#invalidEntriesModal");
                      const invalidEntriesList = $("#invalidEntriesList");
                      invalidEntriesList.empty();

                      if (response.invalid_entries.length > 0) {
                        for (const entry of response.invalid_entries) {
                          invalidEntriesList.append(
                            `<li class="list-group-item">${entry}</li>`
                          );
                        }
                        $("#invalidEntriesBtn").trigger("click");
                      } else {
                        alert(response.message);
                      }
                    }
                  },
                  error: function () {
                    alert("An error occurred while submitting the form.");
                  },
                });
              });
            });
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<script>
  function toggleFields() {
    const userSelect = document.getElementById("id_user_type");
    const initialReadingRow = document.getElementById("initialReadingRow");
    const meterRateRow = document.getElementById("meterRateRow");
    const flatRateRow = document.getElementById("flatRateRow");

    if (userSelect.value === "metered") {
      initialReadingRow.style.display = "block";
      meterRateRow.style.display = "block";
      flatRateRow.style.display = "none";
    } else if (userSelect.value === "un-metered") {
      initialReadingRow.style.display = "none";
      meterRateRow.style.display = "none";
      flatRateRow.style.display = "block";
    }
  }

  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());
    }
  });
</script>

<!-- file name -->
<script>
  function displayFileName() {
    const fileInput = document.getElementById("id_uploaded_file");
    const fileNameDisplay = document.getElementById("file-name-display");

    if (fileInput.files.length > 0) {
      const fileName = fileInput.files[0].name;
      fileNameDisplay.textContent = "Selected File: " + fileName;
    } else {
      fileNameDisplay.textContent = "No file selected.";
    }
  }
</script>

{% endblock javascripts %}