<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Parent | School ERP System</title>

<style>
/* =========================
   GLOBAL STYLES
========================= */
body {
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    background: #eef2f5;
}

/* =========================
   HEADER NAVBAR
========================= */
.header {
    background: #1e293b;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.header h1 {
    margin: 0;
    font-size: 18px;
}

.nav {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.nav a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 5px;
    transition: 0.3s;
}

.nav a:hover {
    background: #334155;
}

/* =========================
   FORM CONTAINER
========================= */
.container {
    max-width: 650px;
    margin: 40px auto;
    padding: 20px;
}

/* CARD */
.card {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* TITLE */
.card h2 {
    text-align: center;
    margin-bottom: 20px;
    color: #1e293b;
}

/* =========================
   FORM ELEMENTS
========================= */
.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    transition: 0.3s;
}

input:focus {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 4px rgba(37,99,235,0.3);
}

/* =========================
   BUTTON
========================= */
input[type="submit"] {
    width: 100%;
    padding: 12px;
    background: #16a34a;
    border: none;
    color: #fff;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

input[type="submit"]:hover {
    background: #15803d;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 600px) {
    .container {
        margin: 20px;
    }

    .header {
        flex-direction: column;
        align-items: flex-start;
    }
}
</style>
</head>

<body>

<!-- =========================
     HEADER
========================= -->
<div class="header">
    <h1>AGID EDUCATIONAL INSTITUTE | ERP SYSTEM</h1>

    <div class="nav">
        <a href="admin_dashboard.php">Dashboard</a>
        <a href="manage_teachers.php">Teachers</a>
        <a href="manage_students.php">Students</a>
        <a href="view_payroll.php">Payroll</a>
        <a href="manage_attendance.php">Attendance</a>
        <a href="add_parent.php">Add Parent</a>
    </div>
</div>

<!-- =========================
     FORM SECTION
========================= -->
<div class="container">
    <div class="card">

        <h2>Add Parent</h2>

        <form action="process_add_parent.php" method="post">

            <div class="form-group">
                <label>Full Name</label>
                <input type="text" name="name" required>
            </div>

            <div class="form-group">
                <label>Username</label>
                <input type="text" name="username" required>
            </div>

            <div class="form-group">
                <label>Password</label>
                <input type="password" name="password" required>
            </div>

            <div class="form-group">
                <label>Email Address</label>
                <input type="email" name="email" required>
            </div>

            <div class="form-group">
                <label>Phone Number</label>
                <input type="text" name="phone" required>
            </div>

            <div class="form-group">
                <label>Occupation</label>
                <input type="text" name="occupation" required>
            </div>

            <input type="submit" value="Add Parent">

        </form>

    </div>
</div>

</body>
</html>