<?php
 require_once('includes/auth_check.php');
include_once('includes/header.php');
include_once('includes/sidebar.php');

?>
<div class="container-fluid px-4 py-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="fw-bold text-dark mb-0">System Documentation</h1>
            <p class="text-muted">Version 1.2.0 | Operational Manual & Technical Specs</p>
        </div>
        <div class="text-end d-none d-md-block">
            <span class="badge bg-success rounded-pill px-3 py-2">System Status: Online</span>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-xl-7">
            <!-- <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-dark text-white p-3">
                    <h5 class="card-title mb-0"><i class="fas fa-code me-2"></i> Technical Summary</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-hover align-middle mb-0">
                            <tbody class="small">
                                <tr>
                                    <td class="fw-bold bg-light" width="35%">Backend Architecture</td>
                                    <td>PHP 8.x with PDO Prepared Statements (SQL Injection Protection)</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold bg-light">Database Engine</td>
                                    <td>MySQL / MariaDB (Relational Schema)</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold bg-light">Security Layers</td>
                                    <td>Google reCAPTCHA v2, Bcrypt Password Hashing, 2FA-OTP</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold bg-light">SMS Integration</td>
                                    <td>Fast2SMS / MSG91 API (DLT Compliant)</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold bg-light">Responsive Design</td>
                                    <td>Bootstrap 5.3 + FontAwesome 6 (Mobile & Tablet Ready)</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div> -->

            <div class="card border-0 shadow-sm">
                <div class="card-header btn-primary text-white p-3">
                    <h5 class="card-title mb-0"><i class="fas fa-cubes me-2"></i> Core System Modules</h5>
                </div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6 border-bottom pb-2">
                            <h6 class="fw-bold text-primary"><i class="fas fa-user-graduate me-2"></i>Admission Engine
                            </h6>
                            <p class="small text-muted">Handles student enrollment with unique ID generation.
                            </p>
                        </div>
                        <div class="col-md-6 border-bottom pb-2">
                            <h6 class="fw-bold text-primary"><i class="fas fa-file-invoice-dollar me-2"></i>Fee
                                Management</h6>
                            <p class="small text-muted">Batch fee assignment, discount logic, and automated payment
                                receipting.</p>
                        </div>
                        <div class="col-md-6">
                            <h6 class="fw-bold text-primary"><i class="fas fa-calendar-check me-2"></i>Academic Sessions
                            </h6>
                            <p class="small text-muted">Manage active years and sessions to maintain historical data
                                accuracy.</p>
                        </div>
                        <div class="col-md-6">
                            <h6 class="fw-bold text-primary"><i class="fas fa-level-up-alt me-2"></i>Promotion Logic
                            </h6>
                            <p class="small text-muted">Bulk student migration tool for end-of-year class promotions.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container-fluid px-4 py-4">
                <div class="mb-4">
                    <h2 class="fw-bold"><i class="fas fa-book-open text-primary me-2"></i>School Administration Manual
                    </h2>
                    <p class="text-muted">Follow these steps to initialize and manage the School Management System.</p>
                </div>

                <div class="row g-4">
                    <div class="col-xl-4 col-md-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-header bg-dark text-white py-3">
                                <h5 class="card-title mb-0">Step 1: System Initialization</h5>
                            </div>

                            <div class="card-body">
                                <div class="d-flex mb-3">
                                    <div class="me-3 text-primary fw-bold">01.</div>
                                    <div>
                                        <h6>School Profile</h6>
                                        <p class="small text-muted mb-0">Navigate to <strong>"Add School
                                                Details"</strong>
                                            to configure your school's name, address, and contact info for official
                                            receipts.</p>
                                    </div>
                                </div>
                                <div class="d-flex mb-3">
                                    <div class="me-3 text-primary fw-bold">02.</div>
                                    <div>
                                        <h6>Academic Year</h6>
                                        <p class="small text-muted">Generate the current session (e.g., 2025-26) to
                                            enable all other features.</p>
                                    </div>
                                </div>
                                <div class="d-flex">
                                    <div class="me-3 text-primary fw-bold">03.</div>
                                    <div>
                                        <h6>Structure Setup</h6>
                                        <p class="small text-muted">Add Classes and define Fee Types (Tuition,
                                            Transport, etc.).</p>
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-4 col-md-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-header btn-primary text-white py-3">
                                <h5 class="card-title mb-0">Step 2: Daily Operations</h5>
                            </div>
                            <div class="card-body">
                              
                                <div class="d-flex mb-3">
                                    <div class="me-3 text-success fw-bold"><i class="fas fa-user-plus"></i></div>
                                    <div>
                                        <h6>Student Admission</h6>
                                        <p class="small text-muted">Enroll students into their respective classes and
                                            sessions.</p>
                                    </div>
                                </div>
                                <div class="d-flex mb-3">
                                    <div class="me-3 text-success fw-bold"><i class="fas fa-file-invoice"></i></div>
                                    <div>
                                        <h6>Fee Collection</h6>
                                        <p class="small text-muted">Click <b>'Pay'</b>, select due items, and submit to
                                            generate <b>PDF/Print receipts</b>.</p>
                                    </div>
                                </div>
                                <div class="d-flex">
                                    <div class="me-3 text-success fw-bold"><i class="fas fa-id-card"></i></div>
                                    <div>
                                        <h6>ID Card Generation</h6>
                                        <p class="small text-muted">Generate and print professional Student ID cards
                                            instantly.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-xl-4 col-md-12">
                        <div class="card h-100 border-0 shadow-sm border-start border-warning border-4">
                            <div class="card-header bg-white py-3">
                                <h5 class="card-title mb-0 text-dark">Step 3: Reports & Promotion</h5>
                            </div>
                            <div class="card-body">
                                <div class="list-group list-group-flush small">
                                    <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                                        <span><i class="fas fa-clock me-2 text-warning"></i>Daily/Quarterly
                                            History</span>
                                        <span class="badge bg-light text-dark">View</span>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                                        <span><i class="fas fa-exclamation-circle me-2 text-danger"></i>Pending Payments
                                            List</span>
                                        <span class="badge bg-light text-dark">Track</span>
                                    </div>
                                    <div class="list-group-item d-flex justify-content-between align-items-center px-0">
                                        <span><i class="fas fa-angle-double-up me-2 text-primary"></i>Bulk Student
                                            Promotion</span>
                                        <span class="badge bg-light text-dark">Year-End</span>
                                    </div>
                                </div>
                                <div class="mt-3 p-2 bg-light rounded small">
                                    <strong>Note:</strong> Promotion is performed class-wise after the final session
                                    finished.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-4">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-dark text-white p-3">
                            <h5 class="card-title mb-0"><i class="fas fa-user-lock me-2"></i>Account Security Management
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>Credential Updates</h6>
                                    <ul class="small text-muted">
                                        <li><strong>Username/Email:</strong> Can be changed instantly to reflect new
                                            staff assignments.</li>
                                        <li><strong>Mobile Verification:</strong> Updating the mobile number immediately
                                            updates the target for **OTP Authentication**.</li>
                                    </ul>
                                </div>
                                <div class="col-md-6">
                                    <h6>Security Protocol</h6>
                                    <ul class="small text-muted">
                                        <li><strong>Bcrypt Hashing:</strong> Passwords are never stored in plain text;
                                            they are encrypted before saving.</li>
                                        <li><strong>Empty-Password Protection:</strong> The system only updates the
                                            password if the user provides a new one, preventing accidental lockouts.
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card border-0 shadow-sm mt-4 overflow-hidden">
                        <div class="card-header bg-danger text-white">
                            <h6 class="mb-0 fw-bold">Zero-Trust Update Protocol</h6>
                        </div>
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-8">
                                    <p class="small">To prevent unauthorized credential hijacking, the system implements
                                        a <strong>Double-Verification Flow</strong> for all profile changes:</p>
                                    <ul class="small text-muted">
                                        <li><strong>Layer 1:</strong> Current Password verification via
                                            <code>password_verify()</code>.
                                        </li>
                                        <li><strong>Layer 2:</strong> Dynamic OTP verification sent to the admin's
                                            existing Email address.</li>
                                        <li><strong>Result:</strong> Changes are only committed if both the "Secret"
                                            (Password) and the "Possession" (Email Address) are verified.</li>
                                    </ul>
                                </div>
                                <div class="col-md-4 text-center">
                                    <i class="fas fa-user-shield fa-4x text-danger opacity-25"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div
                    class="mt-4 p-3 bg-white shadow-sm rounded border d-flex align-items-center justify-content-between">
                    <span class="small text-muted"><i class="fas fa-info-circle me-2"></i> All reports can be exported
                        as <strong>PDF</strong> or sent directly to <strong>Print</strong>.</span>
                    <button class="btn btn-sm btn-outline-primary" onclick="window.print()"><i
                            class="fas fa-print me-1"></i> Print Guide</button>
                </div>
            </div>

        </div>

        <div class="col-xl-5">
            <div class="card border-0 bg-danger bg-opacity-10 mb-4">
                <div class="card-body">
                    <h6 class="fw-bold text-danger"><i class="fas fa-user-shield me-2"></i>Security Protocol</h6>
                    <ul class="small mb-0 text-dark">
                        <li>OTP Codes expire every <strong>5 minutes</strong>.</li>
                        <li>Session auto-terminates after <strong>30 minutes</strong> of inactivity.</li>
                        <li>Passwords are stored using <strong>one-way encryption</strong>.</li>
                    </ul>
                </div>
            </div>

            <div class="card border-0 shadow-sm bg-light">
                <div class="card-body text-center  py-4">
                    <div class="mb-3">
                        <img src="https://ui-avatars.com/api/?name=Mushtaque+Ahmed&background=009688&color=fff"
                            class="rounded-circle shadow" width="70">
                    </div>
                    <h5 class="fw-bold mb-1">Developer Support</h5>
                    <p class="small text-muted">Contact for System Customization & Updates</p>
                    <hr>
                    <div class="d-grid gap-2">
                        <a href="mailto:mushtaqueahmed178@gmail.com" class="btn btn-outline-success btn-sm">
                            <i class="fas fa-envelope me-2"></i>Email Support
                        </a>

                        <a href="https://mushtaque-ahmed.github.io/MushtaqueAhmed/" class="btn btn-primary btn-sm">
                            <i class="fas fa-globe me-2"></i>View Portfolio
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php include_once('includes/footer.php') ?>