<?php
// ===============================
// Aadhaar Card Demo (ONE PAGE)
// For learning/UI purpose ONLY
// ===============================

$submitted = false;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name    = htmlspecialchars($_POST['name'] ?? '');
    $aadhaar = htmlspecialchars($_POST['aadhaar'] ?? '');
    $dob     = htmlspecialchars($_POST['dob'] ?? '');
    $gender  = htmlspecialchars($_POST['gender'] ?? '');
    $address = nl2br(htmlspecialchars($_POST['address'] ?? ''));
    $submitted = true;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Aadhaar Card Template (Demo)</title>

<style>
body{
    font-family: Arial, sans-serif;
    background:#f0f0f0;
}
.container{
    width:900px;
    margin:20px auto;
}
.form-box, .card{
    background:#fff;
    padding:20px;
    border-radius:8px;
    box-shadow:0 0 10px rgba(0,0,0,0.1);
}
.form-box{
    margin-bottom:20px;
}
.row{
    display:flex;
    gap:10px;
    margin-bottom:10px;
}
label{
    width:150px;
    font-weight:bold;
}
input, textarea, select{
    flex:1;
    padding:6px;
}
button{
    padding:10px 25px;
    background:#007bff;
    color:#fff;
    border:none;
    border-radius:5px;
    cursor:pointer;
}

/* Aadhaar Card Style */
.card{
    width:600px;
    margin:auto;
    border:1px solid #ccc;
}
.card-header{
    text-align:center;
    border-bottom:2px solid #d32f2f;
    padding-bottom:10px;
}
.card-header h2{
    margin:0;
    color:#d32f2f;
}
.card-body{
    display:flex;
    margin-top:15px;
}
.photo{
    width:120px;
    height:150px;
    border:1px solid #000;
    text-align:center;
    line-height:150px;
    margin-right:15px;
    font-size:14px;
}
.details p{
    margin:5px 0;
}
.aadhaar-no{
    text-align:center;
    font-size:22px;
    letter-spacing:3px;
    margin-top:15px;
    font-weight:bold;
}
.footer{
    text-align:center;
    font-size:12px;
    margin-top:10px;
}
</style>
</head>

<body>

<div class="container">

<!-- FORM (same page) -->
<div class="form-box">
<h3>Enter Aadhaar Details (Demo)</h3>

<form method="post">
    <div class="row">
        <label>Name:</label>
        <input type="text" name="name" required>
    </div>

    <div class="row">
        <label>Aadhaar No:</label>
        <input type="text" name="aadhaar" maxlength="12" required>
    </div>

    <div class="row">
        <label>Date of Birth:</label>
        <input type="date" name="dob" required>
    </div>

    <div class="row">
        <label>Gender:</label>
        <select name="gender">
            <option>Male</option>
            <option>Female</option>
            <option>Other</option>
        </select>
    </div>

    <div class="row">
        <label>Address:</label>
        <textarea name="address" rows="3"></textarea>
    </div>

    <button type="submit">Generate Aadhaar Card</button>
</form>
</div>

<!-- OUTPUT (same page) -->
<?php if ($submitted): ?>
<div class="card">
    <div class="card-header">
        <h2>भारत सरकार</h2>
        <div>Government of India</div>
    </div>

    <div class="card-body">
        <div class="photo">Photo</div>
        <div class="details">
            <p><strong>Name:</strong> <?= $name ?></p>
            <p><strong>DOB:</strong> <?= $dob ?></p>
            <p><strong>Gender:</strong> <?= $gender ?></p>
            <p><strong>Address:</strong><br><?= $address ?></p>
        </div>
    </div>

    <div class="aadhaar-no"><?= $aadhaar ?></div>
    <div class="footer">आधार – आम आदमी का अधिकार</div>
</div>
<?php endif; ?>

</div>

</body>
</html>
