<?php
/**
 * IBVTE - Multi-Step NOC & ID Card Application
 * Matches User requirements perfectly
 */

require_once __DIR__ . '/../config.php';
require_once __DIR__ . '/../includes/db_config.php';

session_start();

$step = intval($_GET['step'] ?? 1);
$applicationType = $_GET['type'] ?? 'noc'; // noc or id_card
$flash = getFlashMessage();

// Pre-requisite documents list based on user requirements
$documents = [
    'For Id Card' => [
        'Certificate and Marksheet of High School and Intermediate',
        'Marksheets of ParaMedical Course',
        'Degree/ Provisional Degree of ParaMedical Course',
        'Provisional Internship Certificate issued by Board',
        'Internship Certificate issued by Medical College',
        'Internship Certificate issued by Hospital',
        'Affidavit',
        'Voter ID card/Adhaar card/ Driving licence/Passport',
        'Photograph (File Format .jpg, .png, .gif, Max. Size 50 kb, resolution 250px x 300px)',
        'Signature (File Format .jpg, .png, .gif, Max. Size 50 kb, resolution 150px x 75px)'
    ],
    'For Noc' => [
        'Board Registration Certificate (max file size 100kb only jpg file formats are allowed)',
        'Board ID Card (max file size 100kb only jpg file formats are allowed)',
        'Voter ID card/Adhaar card/ Driving licence/Passport',
        'Photograph (File Format .jpg, .png, .gif, Max. Size 50 kb, resolution 250px x 300px)',
        'Signature (File Format .jpg, .png, .gif, Max. Size 50 kb, resolution 150px x 75px)'
    ]
];

// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if ($step === 2) {
        // Step 2 Registration Submit
        $appData = [
            'type' => $_POST['type'] ?? 'noc',
            'full_name' => $_POST['full_name'] ?? '',
            'email' => $_POST['email'] ?? '',
            'mobile' => $_POST['mobile'] ?? '',
            'fee' => 500,
            'app_id' => 'IBVTE' . rand(1000000, 9999999),
            'status' => 'pending'
        ];
        $_SESSION['noc_app'] = $appData;
        
        // Save to DB (optional/placeholder)
        header("Location: apply.php?step=4&type=" . $appData['type']);
        exit;
    }
    
    if ($step === 3) {
        // Step 3 Payment Submit
        header("Location: apply.php?step=4&status=paid");
        exit;
    }
}

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NOC & ID Card Application - IBVTE</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root { --primary: #3b0b7c; --secondary: #6c4ab6; }
        body { background: #f4f7f6; font-family: 'Inter', sans-serif; }
        .card-custom { border-radius: 15px; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
        .header-bg { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: white; padding: 40px 20px; border-radius: 15px 15px 0 0; }
        .btn-primary-custom { background: var(--primary); border: none; padding: 12px 30px; border-radius: 8px; font-weight: 600; }
        .btn-primary-custom:hover { background: var(--secondary); opacity: 0.9; }
        .doc-item { padding: 10px 0; border-bottom: 1px solid #eee; font-size: 0.9rem; }
        .doc-item:last-child { border-bottom: none; }
        .step-pill { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #ddd; color: #666; margin: 0 auto 10px; font-weight: bold; }
        .step-pill.active { background: var(--primary); color: white; }
    </style>
</head>
<body>

<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-lg-9">
            
            <div class="text-center mb-4">
                <img src="../assets/images/logo.jpeg" alt="Logo" style="height: 80px; border-radius: 50%;" class="mb-2">
                <h3 class="fw-bold text-primary">IBVTE - NOC & ID CARD PORTAL</h3>
            </div>

            <!-- Steps -->
            <div class="row mb-5 text-center">
                <div class="col-4">
                    <div class="step-pill <?= $step == 1 ? 'active' : '' ?>">1</div>
                    <small class="fw-bold">Instructions</small>
                </div>
                <div class="col-4">
                    <div class="step-pill <?= $step == 2 ? 'active' : '' ?>">2</div>
                    <small class="fw-bold">Registration</small>
                </div>
                <div class="col-4">
                    <div class="step-pill <?= $step == 3 ? 'active' : '' ?>">3</div>
                    <small class="fw-bold">Payment</small>
                </div>
            </div>

            <div class="card card-custom">
                
                <?php if ($step == 1): ?>
                <div class="header-bg">
                    <h4 class="mb-0">Pre-Requisite and Instructions</h4>
                    <p class="mb-0 opacity-75">Final Diploma Of Paramedical Course</p>
                </div>
                <div class="card-body p-4">
                    <div class="alert alert-warning">
                        <strong>Kindly arrange the scanned images of original documents for the followings (Note : Scanned copy of photocopy is not acceptable) :</strong>
                    </div>

                    <?php foreach ($documents as $title => $items): ?>
                        <h5 class="fw-bold text-primary mt-4"><?= $title ?></h5>
                        <?php foreach ($items as $item): ?>
                            <div class="doc-item"><i class="fas fa-check-circle text-success me-2"></i><?= $item ?></div>
                        <?php endforeach; ?>
                    <?php endforeach; ?>

                    <div class="mt-5 bg-light p-4 rounded-3 border">
                        <h5 class="fw-bold mb-3">Process for Form Filling :</h5>
                        <div class="mb-3">
                            <h6 class="fw-bold">Step 1 :</h6>
                            <ul>
                                <li>Click on "Registration (Step 1)" link</li>
                                <li>Enter valid information in online registration form, then click on submit button.</li>
                                <li>You will get your Application No. and Applicant ID, after successful registration.</li>
                            </ul>
                        </div>
                        <div class="mb-3">
                            <h6 class="fw-bold">Step 2 :</h6>
                            <ul>
                                <li>User will go to 2nd step,He/She will login and fill his/her basic information,Then fill the Qualification details and upload the Documents!</li>
                                <li>You will be required to login with your user name and password where user name will be your Applicant ID and password will be your Bank Reference No.</li>
                            </ul>
                        </div>
                        <div class="mb-3">
                            <h6 class="fw-bold">Step 3 :</h6>
                            <ul>
                                <li>Click on "Fee Payment (Step 3)" link after 24 hours of successful registration.</li>
                                <li>During transaction of State Bank payment enter your Application Id(12 Digit Id) and Date of Birth then click on submit button.</li>
                                <li>Print your E-Receipt after successful payment.</li>
                            </ul>
                        </div>
                        <p class="small text-muted"><strong>NOTE:</strong> Bank Draft for the verification of documents will be send through Registered Post at Council of 2nd Floor Sunil Complex Near RG PG College Meerut (UP)- 250002</p>
                    </div>

                    <div class="text-center mt-4">
                        <div class="form-check d-inline-block text-start mb-3">
                            <input class="form-check-input" type="checkbox" id="agree" required>
                            <label class="form-check-label" for="agree">I agree to the terms and conditions</label>
                        </div>
                        <br>
                        <a href="?step=2" class="btn btn-primary-custom btn-lg disabled" id="proceed">Proceed</a>
                    </div>
                </div>
                <script>
                    document.getElementById('agree').onchange = function() {
                        document.getElementById('proceed').classList.toggle('disabled', !this.checked);
                    };
                </script>
                <?php endif; ?>

                <?php if ($step == 2): ?>
                <div class="header-bg">
                    <h4 class="mb-0">Application for NOC & ID Card</h4>
                    <p class="mb-0 opacity-75">Please update all Information/ Details in English *</p>
                </div>
                <div class="card-body p-4">
                    <form method="POST">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label fw-bold">Application for</label>
                                <select name="type" class="form-select">
                                    <option>Select</option>
                                    <option value="noc">NOC</option>
                                    <option value="id_card">ID Card</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label fw-bold">Name *</label>
                                <div class="input-group">
                                    <span class="input-group-text">Dr.</span>
                                    <input type="text" name="full_name" class="form-control" required>
                                </div>
                                <small class="text-danger">Please do not use title such as "Dr./Mr./Mrs./Ms." along with your name</small>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label fw-bold">Email ID *</label>
                                <input type="email" name="email" class="form-control" required>
                            </div>
                            <div class="col-md-12">
                                <label class="form-label fw-bold">Confirm Email ID *</label>
                                <input type="email" name="confirm_email" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Mobile No. *</label>
                                <input type="tel" name="mobile" class="form-control" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label fw-bold">Fee *</label>
                                <input type="text" value="500" class="form-control bg-light" readonly>
                            </div>
                            <div class="col-12 text-center mt-4">
                                <button type="submit" class="btn btn-primary-custom btn-lg">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
                <?php endif; ?>

                <?php if ($step == 3): ?>
                <div class="header-bg text-center">
                    <h4 class="mb-0">Fee Payment (Step 3)</h4>
                </div>
                <div class="card-body p-5 text-center">
                    <p>Enter your Application ID and Date of Birth to proceed with payment.</p>
                    <form method="POST" style="max-width: 400px; margin: 0 auto;">
                        <div class="mb-3 text-start">
                            <label class="form-label fw-bold">Application Id (12 Digit)</label>
                            <input type="text" class="form-control" maxlength="12" required>
                        </div>
                        <div class="mb-3 text-start">
                            <label class="form-label fw-bold">Date of Birth</label>
                            <input type="date" class="form-control" required>
                        </div>
                        <button type="submit" class="btn btn-primary-custom w-100">Submit to Pay</button>
                    </form>
                </div>
                <?php endif; ?>

                <?php if ($step == 4): ?>
                <div class="card-body p-5 text-center">
                    <i class="fas fa-check-circle text-success fa-5x mb-4"></i>
                    <h2 class="fw-bold">Success!</h2>
                    <p class="lead">Your information has been sent to the admin for verification.</p>
                    <?php if (isset($_SESSION['noc_app'])): ?>
                        <div class="bg-light p-3 rounded mb-4">
                            <strong>Reference ID:</strong> <?= $_SESSION['noc_app']['app_id'] ?>
                        </div>
                    <?php endif; ?>
                    <a href="../index.php" class="btn btn-primary-custom">Return Home</a>
                    <a href="?step=3" class="btn btn-outline-primary ms-2">Go to Payment</a>
                </div>
                <?php endif; ?>

            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
