<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@page import="com.Dao.CustomerOperations"%>
<%@page import="com.Model.Customer"%>
<%@page import="com.Model.Admin"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>ADMIN</title>
<style>
        /* Styling for buttons */
        h2{
        text-align: center;
        }
        .btn-container {
            text-align: center;
            margin: 20px;
        }
        button {
            padding: 10px;
            margin: 10px;
            cursor: pointer;
        }
        /* Hide all sections by default */
        #section2, #section3, #section4{
            display: none;
        }
        /* Table styling */
        table {
            margin: 20px auto;
            border-collapse: collapse;
            width: 50%;
        }
        td, th {
            border: 1px solid black;
            padding: 10px;
            text-align: left;
        }
        input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
            width: 90%;
            padding: 5px;
        }
        input[type="submit"]{
            padding: 10px 20px;
            /*background-color: #4CAF50;
            color: white;
            border: none;*/
            cursor: pointer;
        }
        select{
        padding: 10px 15px;
        cursor: pointer;
        }
        iframe {
            width: 100%;
            height: 420px;
            padding: 0px;
            border: none;
            //border: 1px solid black;
        }
    </style>
</head>
<body>

	<h1 style="text-align: center">Admin Dashboard</h1>
	<div class="btn-container">
        <button onclick="showSection('section1')">Customer Details</button>
        <button onclick="loadPage('section2', 'adminCreateCustomer.jsp')">Create Customer</button>
        <button onclick="showSection('section3')">Edit Customer</button>
        <button onclick="showSection('section4')">Delete Customer</button>
    </div>
	<!-- Display Customer Data -->
	<div id = "section1" class = "section">
		<h2>Customer Details</h2>
		<table align="center" border="2"
			style="border-collapse: collapse; text-align: center">
			<tr style="">
				<td><b>Customer ID</td>
				<td><b>Customer Name</td>
				<td><b>Account Number</td>
				<td><b>Balance</td>
				<td><b>Status</td>
			</tr>

			<%
				for (Customer c : new CustomerOperations().findAllCustomers()) {
			%>

			<tr>
				<td><%=c.getcId()%></td>
				<td><%=c.getfName()%> <%=c.getlName()%></td>
				<td><%=c.getAcNo()%></td>
				<td><%=c.getInitialAmt()%></td>
				<td><%=c.getAcStatus()%></td>
			</tr>

			<%
				}
			%>
		</table>

	</div>
	
	<!-- Section 2 -->
    <div id="section2" class="section">
        <h2>Customer Account Creation</h2>
        <!-- <iframe id="iframe2" src=""></iframe> -->
		<form action="createCustomerReq" method="post">
			<table border="2">
				<tr>
					<td><label for="ssn">SSN No.</label></td>
					<td><input type="text" id="ssn" name="ssn" required></td>

					<td><label for="email">Email</label></td>
					<td><input type="email" id="email" name="email" required></td>
				</tr>
				<tr>
					<td><label for="fname">First Name</label></td>
					<td><input type="text" id="fname" name="fname" required></td>

					<td><label for="lname">Last Name</label></td>
					<td><input type="text" id="lname" name="lname" required></td>
				</tr>
				<tr>
					<td><label for="address">Address</label></td>
					<td><textarea id="address" name="address" required></textarea></td>

					<td><label for="contact">Contact No.</label></td>
					<td><input type="text" id="contact" name="contact" required></td>
				</tr>
				<tr>
					<td><label for="aadhar">Aadhar No.</label></td>
					<td><input type="text" id="aadhar" name="aadhar" required></td>

					<td><label for="pan">PAN No.</label></td>
					<td><input type="text" id="pan" name="pan" required></td>
				</tr>
				<tr>
					<td><label for="account">Account No.</label></td>
					<td><input type="text" id="account" name="account" required></td>

					<td><label for="deposit">Initial Deposit Amount</label></td>
					<td><input type="number" id="deposit" name="deposit" required></td>
				</tr>
				<tr>
					<td><label for="username">Username</label></td>
					<td><input type="text" id="username" name="username" required></td>

					<td><label for="password">Password</label></td>
					<td><input type="password" id="password" name="password"
						required></td>
				</tr>
				<tr>
					<td colspan="4" style="text-align: center">
						<!-- <label for="cars">A/c Status</label> --> <select
						id="acStatus" name="acStatus">
							<option value="true">ACTIVE</option>
							<option value="false">INACTIVE</option>
					</select> <input name="create_customer_btn" type="submit"
						value="Create New A/c">
					</td>
				</tr>
			</table>
		</form>
	</div>

    <!-- Section 3 -->
    <div id="section3" class="section">
        <h2>Section 3</h2>
        <table>
            <tr><th>Header 1</th><th>Header 2</th></tr>
            <tr><td>Info 1</td><td>Info 2</td></tr>
        </table>
    </div>

    <!-- Section 4 -->
    <div id="section4" class="section">
        <h2>Section 4</h2>
        <table>
            <tr><th>Header 1</th><th>Header 2</th></tr>
            <tr><td>Item X</td><td>Item Y</td></tr>
        </table>
    </div>

    <script>
        // Function to show the selected section and hide others
        function loadPage(sectionId, pageUrl) {
            // Hide all sections
            var sections = document.querySelectorAll('.section');
            sections.forEach(function(section) {
                section.style.display = 'none';
            });

            // Show the selected section
            document.getElementById(sectionId).style.display = 'block';

            // Load the page into the corresponding iframe
            //var iframeId = "iframe" + sectionId.slice(-1);
            //document.getElementById(iframeId).src = pageUrl;
        }
        
        function showSection(sectionId) {
        	//***********check if from is being submited by default or not
            // Hide all sections
            var sections = document.querySelectorAll('.section');
            sections.forEach(function(section) {
                section.style.display = 'none';
            });
            // Show the selected section
            document.getElementById(sectionId).style.display = 'block';
        }
    </script>
	
</body>
</html>