FullElecPROJ

Customer Portal Home Pay Bill Register Complaint Complaint Status
Welcome, User Logout
<!-- Home Section -->
<section id="home" class="content-section">
    <h2>Welcome to the Customer Portal</h2>
    <p>Select an option from the menu to proceed.</p>
</section>

<!-- Pay Bill Section -->
<section id="payBill" class="content-section hidden">
    <h2>Pay Your Bills</h2>
    <form id="billForm">
        <table border="1">
            <thead>
                <tr>
                    <th>Select</th>
                    <th>Bill ID</th>
                    <th>Description</th>
                    <th>Amount</th>
                </tr>
            </thead>
            <tbody id="billTable">
                <tr>
                    <td><input type="checkbox" class="billCheckbox" value="500" onclick="calculateTotal()"></td>
                    <td>101</td>
                    <td>Electricity Bill</td>
                    <td>500</td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="billCheckbox" value="300" onclick="calculateTotal()"></td>
                    <td>102</td>
                    <td>Water Bill</td>
                    <td>300</td>
                </tr>
            </tbody>
        </table>
        <label for="totalAmount">Total Amount:</label>
        <input type="text" id="totalAmount" value="0" readonly>
        <button type="button" onclick="proceedToPayment()">Proceed to Pay</button>
    </form>
</section>

<!-- Register Complaint Section -->
<section id="registerComplaint" class="content-section hidden">
    <h2>Register a Complaint</h2>
    <form id="complaintForm">
        <label for="complaintType">Complaint Type:</label>
        <select id="complaintType" onchange="updateCategory()">
            <option value="billing">Billing Related</option>
            <option value="voltage">Voltage Issues</option>
            <option value="disruption">Frequent Disruption</option>
        </select>
        <label for="category">Category:</label>
        <select id="category"></select>
        <label for="contactPerson">Contact Person:</label>
        <input type="text" id="contactPerson" required>
        <label for="landmark">Landmark:</label>
        <input type="text" id="landmark">
        <label for="consumerNo">Consumer No.:</label>
        <input type="number" id="consumerNo" required>
        <label for="problemDescription">Problem Description:</label>
        <textarea id="problemDescription"></textarea>
        <button type="button" onclick="submitComplaint()">Submit Complaint</button>
    </form>
</section>

<script src="script.js"></script>