<?php
session_start();
$projectRoot = dirname(__DIR__);
require_once $projectRoot . "/config/database.php";

// Access Control
if (!isset($_SESSION['role']) || $_SESSION['role'] !== 'student') {
    header("Location: ../auth/login.php"); 
    exit();
}

$student_id = $_SESSION['user_id'];

try {
    // 1. FETCH SYSTEM SETTINGS (For School Info)
    $stmtSet = $pdo->query("SELECT * FROM system_settings WHERE id = 1");
    $settings = $stmtSet->fetch();

    // 2. FETCH STUDENT DATA
    $stmt = $pdo->prepare("SELECT s.*, c.class_name 
                           FROM students s 
                           JOIN classes c ON s.class_id = c.id 
                           WHERE s.id = ?");
    $stmt->execute([$student_id]);
    $user = $stmt->fetch();

    if (!$user) { die("User profile not found."); }
} catch (PDOException $e) {
    die("Database Error: " . $e->getMessage());
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Official Profile | <?= htmlspecialchars($user['fullname']) ?></title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root { --primary: #2c3e50; --accent: #3498db; --bg: #f4f7f6; --white: #ffffff; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; display: flex; background: var(--bg); min-height: 100vh; }
        
        /* Sidebar Responsive Styling */
        .sidebar { width: 260px; background: var(--primary); height: 100vh; position: fixed; color: white; z-index: 1000; transition: all 0.3s ease; left: 0; }
        .sidebar-header { padding: 30px 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.1); }
        .sidebar-nav a { display: block; padding: 15px 25px; color: #bdc3c7; text-decoration: none; transition: 0.3s; }
        .sidebar-nav a:hover, .sidebar-nav a.active { background: #34495e; color: white; border-left: 4px solid var(--accent); }

        /* Mobile Menu Toggle */
        .menu-toggle { display: none; position: fixed; top: 20px; left: 20px; z-index: 1100; background: var(--primary); color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; }

        /* Main Content */
        .main-content { margin-left: 260px; flex: 1; padding: 40px; display: flex; justify-content: center; transition: all 0.3s ease; box-sizing: border-box; width: 100%; }

        /* Official Profile Card */
        .official-card { 
            width: 100%; 
            max-width: 800px; 
            background: var(--white); 
            border-radius: 10px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
            position: relative; 
            overflow: hidden;
            border: 1px solid #ddd;
            height: fit-content;
        }

        /* School Header Section */
        .school-header { 
            background: #fdfdfd; 
            padding: 30px; 
            display: flex; 
            align-items: center; 
            gap: 20px; 
            border-bottom: 3px double var(--primary);
        }
        .school-logo { width: 90px; height: 90px; object-fit: contain; }
        .school-info { flex: 1; text-align: center; }
        .school-info h1 { margin: 0; font-size: 22px; color: var(--primary); text-transform: uppercase; letter-spacing: 1px; }
        .school-info p { margin: 5px 0 0; font-size: 13px; color: #666; font-style: italic; }

        /* Content Body */
        .card-body { padding: 40px; position: relative; }
        
        /* Watermark */
        .watermark { 
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-30deg); 
            font-size: clamp(40px, 8vw, 80px); color: rgba(0,0,0,0.03); font-weight: bold; pointer-events: none; white-space: nowrap; 
        }

        .student-main { display: flex; gap: 30px; margin-bottom: 40px; align-items: flex-start; }
        .student-photo { width: 150px; height: 150px; border: 4px solid #eee; border-radius: 8px; object-fit: cover; }
        
        .student-summary { flex: 1; }
        .student-summary h2 { margin: 0; color: var(--primary); font-size: 26px; }
        .reg-no { font-size: 18px; color: var(--accent); font-weight: bold; margin-top: 5px; }
        
        /* Details Table Styling */
        .details-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
        .details-table td { padding: 12px 10px; border-bottom: 1px solid #f0f0f0; font-size: 14px; }
        .label { font-weight: bold; color: #888; width: 160px; text-transform: uppercase; font-size: 11px; }
        .value { color: #333; font-weight: 500; }

        .footer-note { 
            margin-top: 30px; 
            padding-top: 20px; 
            border-top: 1px dashed #ccc; 
            display: flex; 
            justify-content: space-between; 
            align-items: flex-end;
            flex-wrap: wrap;
            gap: 15px;
        }
        .print-btn { background: var(--accent); color: white; padding: 10px 20px; border-radius: 5px; text-decoration: none; font-size: 13px; font-weight: bold; }

        /* Responsive Breakpoints */
        @media (max-width: 992px) {
            .sidebar { left: -260px; }
            .sidebar.active { left: 0; }
            .main-content { margin-left: 0; padding: 20px; padding-top: 80px; }
            .menu-toggle { display: block; }
        }

        @media (max-width: 600px) {
            .school-header { flex-direction: column; text-align: center; padding: 20px; }
            .student-main { flex-direction: column; align-items: center; text-align: center; }
            .details-table tr { display: flex; flex-direction: column; }
            .details-table td { width: 100% !important; border-bottom: none; padding: 5px 0; }
            .details-table tr { border-bottom: 1px solid #f0f0f0; padding: 10px 0; }
            .school-info h1 { font-size: 18px; }
            .card-body { padding: 20px; }
            .footer-note { justify-content: center; text-align: center; }
        }

        @media print {
            .sidebar, .print-btn, .menu-toggle { display: none !important; }
            .main-content { margin: 0; padding: 0; }
            .official-card { box-shadow: none; border: 1px solid #000; width: 100%; max-width: 100%; }
            body { background: white; }
        }
    </style>
</head>
<body>

    <button class="menu-toggle" onclick="toggleSidebar()"><i class="fa fa-bars"></i></button>

    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>PORTAL</h3>
        </div>
        <nav class="sidebar-nav">
            <a href="dashboard.php"><i class="fa fa-home"></i> &nbsp; Dashboard</a>
            <a href="results.php"><i class="fa fa-chart-line"></i> &nbsp; My Results</a>
            <a href="profile.php" class="active"><i class="fa fa-user-cog"></i> &nbsp; My Profile</a>
            <a href="../auth/logout.php" style="color: #e74c3c;"><i class="fa fa-sign-out-alt"></i> &nbsp; Logout</a>
        </nav>
    </div>

    <div class="main-content">
        <div class="official-card">
            <div class="school-header">
                <img src="../assets/img/logo.png" class="school-logo" onerror="this.src='https://ui-avatars.com/api/?name=S&background=2c3e50&color=fff'">
                <div class="school-info">
                    <h1><?= strtoupper(htmlspecialchars($settings['school_name'] ?? 'Your School Name')) ?></h1>
                    <p><?= htmlspecialchars($settings['school_address'] ?? 'School Address, City, Country') ?></p>
                    <p>Phone: <?= htmlspecialchars($settings['school_phone'] ?? '000-000-000') ?> | Email: <?= htmlspecialchars($settings['school_email'] ?? 'info@school.com') ?></p>
                </div>
            </div>

            <div class="card-body">
                <div class="watermark">OFFICIAL PROFILE</div>

                <div class="student-main">
                    <img src="../uploads/students/<?= htmlspecialchars($user['photo'] ?: 'default.png') ?>" 
                         class="student-photo" 
                         onerror="this.src='https://ui-avatars.com/api/?name=<?= urlencode($user['fullname']) ?>&size=150&background=2c3e50&color=fff'">
                    
                    <div class="student-summary">
                        <h2><?= htmlspecialchars($user['fullname']) ?></h2>
                        <div class="reg-no"><?= htmlspecialchars($user['reg_number']) ?></div>
                        <p style="margin: 10px 0 0; color: #666;"><i class="fa fa-graduation-cap"></i> Current Class: <strong><?= htmlspecialchars($user['class_name']) ?></strong></p>
                    </div>
                </div>

                <table class="details-table">
                    <tr>
                        <td class="label">Gender</td>
                        <td class="value"><?= htmlspecialchars($user['gender'] ?? 'Not Specified') ?></td>
                        <td class="label">Date of Birth</td>
                        <td class="value"><?= !empty($user['dob']) ? date('d M, Y', strtotime($user['dob'])) : 'Not Set' ?></td>
                    </tr>
                    <tr>
                        <td class="label">Email</td>
                        <td class="value"><?= htmlspecialchars($user['email'] ?? 'N/A') ?></td>
                        <td class="label">Phone</td>
                        <td class="value"><?= htmlspecialchars($user['phone'] ?? 'N/A') ?></td>
                    </tr>
                    <tr>
                        <td class="label">Parent/Guardian</td>
                        <td class="value"><?= htmlspecialchars($user['parent_name'] ?? 'N/A') ?></td>
                        <td class="label">Parent Contact</td>
                        <td class="value"><?= htmlspecialchars($user['parent_phone'] ?? 'N/A') ?></td>
                    </tr>
                    <tr>
                        <td class="label">Home Address</td>
                        <td colspan="3" class="value"><?= htmlspecialchars($user['address'] ?? 'No address registered') ?></td>
                    </tr>
                </table>

                <div class="footer-note">
                    <div style="font-size: 11px; color: #999;">
                        Generated on: <?= date('d M, Y - h:i A') ?><br>
                        <em>Note: This is an electronically generated profile.</em>
                    </div>
                    <a href="javascript:window.print()" class="print-btn"><i class="fa fa-print"></i> Print Profile</a>
                </div>
            </div>
        </div>
    </div>

    <script>
        function toggleSidebar() {
            document.getElementById('sidebar').classList.toggle('active');
        }

        // Close sidebar when clicking outside on mobile
        document.addEventListener('click', function(event) {
            const sidebar = document.getElementById('sidebar');
            const toggle = document.querySelector('.menu-toggle');
            if (window.innerWidth <= 992 && !sidebar.contains(event.target) && !toggle.contains(event.target)) {
                sidebar.classList.remove('active');
            }
        });
    </script>
</body>
</html>