{% extends "layouts/base.html" %} {% block title %}Generate Bill {% 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: -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;
}
.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;
}
@media screen and (max-width: 992px) {
.card {
min-width: calc(100vw - 30px);
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);
}
#notification-bar {
font-size: medium;
left: 10%;
width: 80%;
padding: 10px;
}
}
</style>
{% endblock %} {% block content %}
<div id="notification-bar"></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">
<h4 class="title">Generate Bill</h4>
</div>
<form role="form" method="post" action="{% url 'calculate-bill' %}">
{% 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"
>
<option value="" disabled selected>Select Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">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"
value=""
min="2023"
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>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="id_bill_type">Select Bill Type</label>
<select
class="form-control"
id="id_bill_type"
name="bill_type"
onchange="toggleFields()"
>
<option value="quarter-bill">Address Bill</option>
<option value="bulk-bill">Bulk Bill</option>
</select>
<span class="text-danger"></span>
</div>
<!-- Adding Bill Issue Date here -->
<div class="form-group col-md-6">
<label for="id_issue_date">Issue Date</label>
<input
type="date"
class="form-control"
id="id_issue_date"
name="issue_date"
/>
<span class="text-danger"></span>
</div>
<script>
// Get the current date in the format yyyy-mm-dd
const currentDate = new Date().toISOString().slice(0, 10);
// Set the default value of the input field to the current date
document.getElementById("id_issue_date").value = currentDate;
</script>
</div>
<div class="form-row">
<div class="form-group col-md-6" id="quarterNumberRow">
<label for="id_room_id">Address Number</label>
<input
type="number"
class="form-control"
id="id_room_id"
name="room_number"
/>
<span class="text-danger"></span>
</div>
<!-- Adding Bill Due Date here -->
<div class="form-group col-md-6">
<label for="id_due_date">Due Date</label>
<input
type="date"
class="form-control"
id="id_due_date"
name="due_date"
/>
<span class="text-danger"></span>
</div>
<script>
// Get the current date
// const current = new Date();
// Calculate the date after 30 days
const dueDate = new Date(currentDate);
dueDate.setDate(dueDate.getDate() + 30);
// Format the due date to "yyyy-mm-dd"
const formattedDueDate = dueDate.toISOString().slice(0, 10);
// Set the default value of the input field to the calculated due date
document.getElementById("id_due_date").value =
formattedDueDate;
</script>
</div>
<div class="form-row" id="quarterTypeRow">
<div class="form-group col-md-6">
<label for="id_access">Address Type</label>
<select
class="form-control"
id="id_access"
name="quarter_type"
>
{% for value in quarterType %}
<option value="{{ value }}">{{ value }}</option>
{% endfor %}
</select>
<span class="text-danger"></span>
</div>
</div>
</div>
<div class="card-footer text-center" id="quarter-bill-btn">
<button type="submit" class="btn btn-fill btn-primary">
Generate Address Bill
</button>
</div>
<div
class="card-footer text-center"
id="bulk-bill-btn"
style="display: none"
>
<button type="submit" class="btn btn-fill btn-primary">
Generate Bulk Bill
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
<!-- Specific Page JS goes HERE -->
{% block javascripts %}
<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);
const maximumYear = new Date().getFullYear();
if (currentYear < maximumYear) {
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;
}
}
function toggleFields() {
const userSelect = document.getElementById("id_bill_type");
const quarterNumberRow = document.getElementById("quarterNumberRow");
const quarterTypeRow = document.getElementById("quarterTypeRow");
const quarterBillBtn = document.getElementById("quarter-bill-btn");
const bulkBillBtn = document.getElementById("bulk-bill-btn");
if (userSelect.value === "quarter-bill") {
quarterNumberRow.style.display = "block";
quarterTypeRow.style.display = "block";
quarterBillBtn.style.display = "block";
bulkBillBtn.style.display = "none";
} else if (userSelect.value === "bulk-bill") {
quarterNumberRow.style.display = "none";
quarterTypeRow.style.display = "none";
quarterBillBtn.style.display = "none";
bulkBillBtn.style.display = "block";
}
}
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());
// }
// });
</script>
{% endblock javascripts %}