
<div class="row">
    <div class="col-md-12">
        <div class="card">
            <div class="card-header">
                Application Form
            </div>
            <div class="card-body">
                <form method="post" action="">
                    <input type="hidden" name="action" value="register">
                    
                    <!-- Section 1: Personal Data -->
                    <div class="form-section">
                        <h3>1. Personal Data</h3>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="surname" class="form-label">Surname</label>
                                <input type="text" class="form-control" id="surname" name="surname" required placeholder="SURNAME">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="firstname" class="form-label">First Name</label>
                                <input type="text" class="form-control" id="firstname" name="firstname" required placeholder="FIRST NAME">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="othername" class="form-label">Other Name</label>
                                <input type="text" class="form-control" id="othername" name="othername">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="maidenname" class="form-label">Maiden Name (If applicable)</label>
                                <input type="text" class="form-control" id="maidenname" name="maidenname">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="sex" class="form-label">Sex</label>
                                <select class="form-select" id="sex" name="sex" required>
                                    <option value="">Select...</option>
                                    <option value="Male">Male</option>
                                    <option value="Female">Female</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="dob" class="form-label">Date of Birth</label>
                                <input type="date" class="form-control" id="dob" name="dob" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="nationality" class="form-label">Nationality</label>
                                <input type="text" class="form-control" id="nationality" name="nationality" value="Nigerian">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="state" class="form-label">State of Origin</label>
                                <input type="text" class="form-control" id="state" name="state" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="lga" class="form-label">Local Government Area</label>
                                <input type="text" class="form-control" id="lga" name="lga" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="phone" class="form-label">Telephone (Mobile)</label>
                                <input type="tel" class="form-control" id="phone" name="phone" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="phone_res" class="form-label">Telephone (Residential)</label>
                                <input type="tel" class="form-control" id="phone_res" name="phone_res">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="email" class="form-label">Email Address</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="address" class="form-label">Permanent Home Address</label>
                                <textarea class="form-control" id="address" name="address" rows="3" required placeholder="Full Residential Address"></textarea>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="activities" class="form-label">Extra Curricular Activities</label>
                                <textarea class="form-control" id="activities" name="activities" rows="3" placeholder="Sports, Clubs, Hobbies, etc."></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Next of Kin / Sponsor -->
                    <div class="form-section">
                        <h3>Next of Kin & Sponsor</h3>
                        <div class="row">
                            <div class="col-md-12 mb-3">
                                <label for="nok_name" class="form-label">Next of Kin/Parent Name & Address</label>
                                <textarea class="form-control" id="nok_name" name="nok_name" rows="3" required></textarea>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="nok_phone" class="form-label">Next of Kin Telephone</label>
                                <input type="tel" class="form-control" id="nok_phone" name="nok_phone" required>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="sponsor_name" class="form-label">Sponsor's Name & Address</label>
                                <textarea class="form-control" id="sponsor_name" name="sponsor_name" rows="3" required></textarea>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="sponsor_phone" class="form-label">Sponsor's Telephone</label>
                                <input type="tel" class="form-control" id="sponsor_phone" name="sponsor_phone" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="sponsor_occ" class="form-label">Sponsor's Occupation</label>
                                <input type="text" class="form-control" id="sponsor_occ" name="sponsor_occ" required>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Section 2: Choice of Course -->
                    <div class="form-section">
                        <h3>2. Choice of Course/Subject (O' Level)</h3>
                        <div class="row">
                            <div class="col-md-4 mb-3">
                                <label for="sub1" class="form-label">Subject 1</label>
                                <input type="text" class="form-control" id="sub1" name="sub1" required>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="sub2" class="form-label">Subject 2</label>
                                <input type="text" class="form-control" id="sub2" name="sub2" required>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label for="sub3" class="form-label">Subject 3</label>
                                <input type="text" class="form-control" id="sub3" name="sub3" required>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Section 3: Education History -->
                    <div class="form-section">
                        <h3>3. Post-Primary Institution Attended with Dates</h3>
                        <div class="table-responsive">
                            <table class="table table-bordered" id="schoolsTable">
                                <thead>
                                    <tr>
                                        <th style="width: 30%">Name of Institution</th>
                                        <th style="width: 20%">From (Date)</th>
                                        <th style="width: 20%">To (Date)</th>
                                        <th style="width: 25%">Qualifications Obtained</th>
                                        <th style="width: 5%">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="text" class="form-control form-control-sm" name="school_name[]" required></td>
                                        <td><input type="month" class="form-control form-control-sm" name="school_from[]" required></td>
                                        <td><input type="month" class="form-control form-control-sm" name="school_to[]" required></td>
                                        <td><input type="text" class="form-control form-control-sm" name="school_qual[]" required></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="text-end">
                            <button type="button" class="btn btn-success btn-sm" onclick="addSchoolRow()">+ Add Institution</button>
                        </div>
                    </div>
                    
                    <!-- Section 4: Results -->
                    <div class="form-section">
                        <h3>4. School Certificate Results</h3>
                        <p class="text-muted">Please list WAEC/NECO/NABTEB results below.</p>
                        <div class="table-responsive">
                            <table class="table table-bordered" id="resultsTable">
                                <thead>
                                    <tr>
                                        <th>Names of Examination</th>
                                        <th>Date</th>
                                        <th>Exam Number</th>
                                        <th>Subjects & Grades</th>
                                        <th>Credentials Enclosed?</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <select class="form-select form-select-sm" name="exam_type[]">
                                                <option value="WAEC">WAEC</option>
                                                <option value="NECO">NECO</option>
                                                <option value="NABTEB">NABTEB</option>
                                                <option value="OTHER">OTHER</option>
                                            </select>
                                        </td>
                                        <td><input type="month" class="form-control form-control-sm" name="exam_date[]"></td>
                                        <td><input type="text" class="form-control form-control-sm" name="exam_no[]"></td>
                                        <td><input type="text" class="form-control form-control-sm" name="exam_grades[]" placeholder="e.g. Maths-A1, Eng-B3"></td>
                                        <td class="text-center"><input type="checkbox" name="exam_attached[]" checked></td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="text-end">
                            <button type="button" class="btn btn-success btn-sm" onclick="addResultRow()">+ Add Result</button>
                        </div>
                    </div>
                    
                    <!-- Section 5: Declaration -->
                    <div class="form-section">
                        <h3>5. Declaration</h3>
                        <p>I, <span id="declarantName" style="font-weight: bold;">[Full Name]</span>, hereby declare that the information given in this form, to the best of my knowledge and belief, is correct. Any false or incomplete information given in this form will automatically disqualify me from being considered for admission to, or continuing with any course of study in AHMADU BELLO UNIVERSITY, ZARIA (ABU) IJMB Programme affiliated with FEDERAL COLLEGE OF EDUCATION, (TECHNICAL) ASABA.</p>
                        <br>
                        <p>I shall accept as final the decision of the IJMB Directorate, Federal College of Education, Asaba, about my course(s) of study and placement in the IJMB Programme.</p>
                        
                        <div class="row mt-4">
                            <div class="col-md-6 mb-3">
                                <label for="decl_date" class="form-label">Applicant's Date</label>
                                <input type="date" class="form-control" id="decl_date" name="decl_date" required>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label">Applicant's Signature (Draw inside box)</label>
                                <div class="signature-wrapper border p-2 bg-light">
                                    <canvas id="applicant_signature" class="signature-canvas"></canvas>
                                    <div class="d-flex justify-content-between mt-2">
                                        <span>Clear</span>
                                        <button type="button" class="btn btn-secondary btn-sm" id="applicant_signature_clear">Clear Pad</button>
                                    </div>
                                    <input type="hidden" id="applicant_signature_data" name="applicant_signature_data">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Section 6: Attestation -->
                    <div class="form-section">
                        <h3>6. Attestation</h3>
                        <p>I, hereby, confirm that this applicant is known to me, this information supplied in his or her form is, to the best of my knowledge, true. The attached passport-sized photograph, endorsed by me, is a true resemblance of the applicant.</p>
                        
                        <div class="row mt-4">
                            <div class="col-md-6 mb-3">
                                <label for="ref_name" class="form-label">Referee Full Name</label>
                                <input type="text" class="form-control" id="ref_name" name="ref_name" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="ref_occ" class="form-label">Occupation</label>
                                <input type="text" class="form-control" id="ref_occ" name="ref_occ" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="ref_post" class="form-label">Post Held</label>
                                <input type="text" class="form-control" id="ref_post" name="ref_post" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="ref_date" class="form-label">Date</label>
                                <input type="date" class="form-control" id="ref_date" name="ref_date" required>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label for="ref_address" class="form-label">Address</label>
                                <input type="text" class="form-control" id="ref_address" name="ref_address" required>
                            </div>
                            <div class="col-md-12 mb-3">
                                <label class="form-label">Referee's Signature</label>
                                <div class="signature-wrapper border p-2 bg-light">
                                    <canvas id="referee_signature" class="signature-canvas"></canvas>
                                    <div class="d-flex justify-content-between mt-2">
                                        <span>Clear</span>
                                        <button type="button" class="btn btn-secondary btn-sm" id="referee_signature_clear">Clear Pad</button>
                                    </div>
                                    <input type="hidden" id="referee_signature_data" name="ref_signature_data">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Password Setup -->
                    <div class="form-section">
                        <h3>Account Setup</h3>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="password" class="form-label">Password</label>
                                <input type="password" class="form-control" id="password" name="password" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="confirm_password" class="form-label">Confirm Password</label>
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-between">
                        <button type="button" class="btn btn-secondary" onclick="window.print()">Print Form</button>
                        <button type="submit" class="btn btn-primary">Submit Application</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Save signature data before form submission
    const form = document.querySelector("form");
    form.addEventListener("submit", function() {
        const applicantCanvas = document.getElementById("applicant_signature");
        const applicantData = applicantCanvas.toDataURL();
        document.getElementById("applicant_signature_data").value = applicantData;
        
        const refereeCanvas = document.getElementById("referee_signature");
        const refereeData = refereeCanvas.toDataURL();
        document.getElementById("referee_signature_data").value = refereeData;
    });
});
</script>
