apps/templates/home/bills_pdf.html · NIT_Sri_Electricity_Management_System

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Electricity Bill</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
            background-color: #f4f4f4;
        }

        .container {
            max-width: 700px;
            margin: 30px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
        }

        .logo {
            text-align: center;
        }

        .logo img {
            max-width: 80px;
        }

        h1 {
            margin: 10px;
            text-align: center;
            color: #0066cc;
        }

        hr {
            border: 1px solid #ccc;
            margin: 20px 0;
        }

        .bill-data span {
            width: 45%;
            display: inline-block;
            margin-bottom: 5px;
            color: #333;
        }

        .billing-calc h2 {
            margin-bottom: 10px;
            color: #0066cc;
        }

        .calc-data span {
            width: 45%;
            display: inline-block;
            margin-bottom: 5px;
            color: #333;
        }

        .grand-total {
            margin-top: 20px;
            text-align: left;
            font-weight: bold;
            color: #0066cc;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
        }

        .footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 50px;
        }

        .notice {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f9f9f9;
            font-size: small;
        }

        .notice * {
            margin: 0;
        }

        .info {
            text-align: right;
            font-size: small;
            font-weight: bold;
        }

        .info p {
            margin: 0;
        }

        .btn-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #downloadBtn {
            background-color: #0066cc;
            color: #fff;
            border: none;
            padding: 10px 20px;
            font-size: 20px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        #downloadBtn:hover {
            background-color: #0052a3;
        }

        @media screen and (max-width: 800px) {
            .container {
                margin: 30px;
            }

            .bill-data span,
            .calc-data span {
                width: 100%;
            }
        }
    </style>
    <style>
        table {
          border-collapse: collapse;
          width: 100%;
          border: 1px solid black;
        }
      
        th, td {
          border: 1px solid black;
          padding: 8px;
          text-align: left;
        }
      
        th {
          background-color: #f2f2f2;
        }
      </style>

</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>
</head>

<body>
    <div class="container">
        <div class="logo">
            <img class="nitLogo" src="{{ ASSETS_ROOT }}/img/nitsriLogo.png" alt="Logo" />
        </div>
        <h1 style="text-align: center">Electric tariff bill for {{selected_month}}/{{selected_year}}</h1>
        <hr />
        <!-- <div class="bill-data">
            {% if bill_type == "Metered" %}
            <span>Bill Number: {{ bill.metered_bill_id }}</span>
            {% elif bill_type == "Unmetered" %}
            <span>Bill Number: {{ bill.unmetered_bill_id }}</span>
            {% endif %}
            <span>Quarter Type: {{ bill.quarter_type }}</span>
            <span>Quarter Number: {{ bill.room_number }}</span>
            <span>Consumer Name: {{ bill.full_name }}</span>

            <span>Bill Date: {{ bill.issued_date }}</span>
            <span>Bill Due Date: {{ bill.due_date }}</span>
            <span>Bill Month: {{ bill.month }}</span>
        </div>
        <hr />
        <div class="bill-data">

            {% if bill_type == "Metered" %}
            <span>Rate Code: {{ bill.meter_rate_name }}</span>
            <span>Previous Reading: {{ bill.previous_reading }}</span>
            <span>Current Reading: {{ bill.current_reading }}</span>
            <span>Total Units Consumed: {{ bill.units_consumed }}</span>
            {% elif bill_type == "Unmetered" %}
            <span>Rate Code: {{ bill.flat_rate_name }}</span>
            {% endif %}
            <span>Sanctioned Load (KW): {{ bill.sanctioned_load }}</span>


        </div> -->
        <!-- <div class="billing-calc">
            <h2>Billing Calculations</h2>
            <hr />
            <div class="calc-data">
                <span>Opening Balance (Rs): {{ bill.opening_balance }}</span>
                <span>Cost of Energy (Rs): {{ bill.energy_charges }}</span>
                {% if bill_type == "Metered" %}
                <span>Electricity Duty Charges (Rs): {{ bill.duty_charges }}</span>
                {% endif %}

                <span>Demand Charges (Rs): {{ bill.demand_charges }}</span>
            </div>
        </div>
        <hr />
        <div class="grand-total">Grand Total (Rs): {{ bill.total_bill }}</div> -->
        
        
        <table>
            <tr>
              <th>Sr No.</th>
              <th>Consumer Name</th>
              <th>Designation</th>
              <th>Department</th>
              <th>Address</th>
              <th>Amount</th>
            </tr>
            {%for bill in metered_bills%}
            <tr>
                <td></td>
                <td>{{bill.full_name}}</td>
                <td>NA</td>
                <td>{{bill.user_department}}</td>
            
                <td>{{bill.quarter_type}} - {{ bill.room_number}}</td>
                <td>{{bill.total_bill}}</td>
            </tr>
            {% endfor %}
            {%for bill in unmetered_bills%}
            <tr>
            <td></td>
                <td>{{bill.full_name}}</td>
                <td>NA</td>
                <td>{{bill.user_department}}</td>
            
                <td>{{bill.quarter_type}} - {{ bill.room_number}}</td>
                <td>{{bill.total_bill}}</td>
            </tr>
            {% endfor %}
            <!-- Add more rows as needed -->
          </table>
        
        <div class="footer">
            
            <div class="info">
                <p>Department of EM&R</p>
                <p>NIT Srinagar</p>
                <p>+91 94190 06957</p>
                <p><u>mer@nitsri.net</u></p>
            </div>
        </div>
        <hr class="btn-line" />
        <div class="btn-container">
            <button id="downloadBtn">Download Tariff bill</button>
        </div>
    </div>
    <script>
        function downloadPDF() {
            const downloadButton = document.getElementById("downloadBtn");
            downloadButton.style.display = "none";
            document.querySelector(".btn-line").style.display = "none";

            window.print();

            downloadButton.style.display = "block";
            document.querySelector(".btn-line").style.display = "block";
        }

        const downloadButton = document.getElementById("downloadBtn");
        downloadButton.addEventListener("click", downloadPDF);
    </script>
</body>

</html>