<?php
//session started
require_once 'session_config_school.php';
require_once 'school_profile_completion_check.php';
// Database connection details
include_once 'connect.php';

// Load photo config for UPLOAD_BASE_PATH
if (file_exists(__DIR__ . '/photo_config.php')) {
    require_once __DIR__ . '/photo_config.php';
} else {
    if (!defined('UPLOAD_BASE_PATH')) {
        define('UPLOAD_BASE_PATH', __DIR__ . '/uploads/school_photos/');
    }
}

if (!validateSchoolSession()) {
    header("Location: login.php");
    exit;
}

// Check if the user is logged in by verifying the session variable
if (!isset($_SESSION['school_name']) || !isset($_SESSION['emis_code'])) {
    header("Location: login.php");
    exit();
}

// Retrieve the session variables
$last_login = isset($_SESSION['last_login']) ? $_SESSION['last_login'] : null;
$emis_code = $_SESSION['emis_code'];
$school_name = $_SESSION['school_name'];
$cate_id = isset($_SESSION['cate_id']) ? $_SESSION['cate_id'] : null;
$level_id = isset($_SESSION['level_id']) ? $_SESSION['level_id'] : null;

// ============================================================================
// FETCH SCHOOL DISPLAY IMAGE (From Step 10 Uploads)
// ============================================================================
function getSchoolDisplayImage($conn, $emis_code, $upload_base_path) {
    $result = [
        'src' => '',
        'alt' => 'School Profile Image',
        'type' => 'fallback',
        'exists' => false
    ];
    
    // Sanitize inputs
    $emis_safe = preg_replace('/[^a-zA-Z0-9_-]/', '', $emis_code);
    $upload_base = rtrim($upload_base_path, '/') . '/';
    
    // PRIORITY 1: Check for generated collage
    $stmt = $conn->prepare("
        SELECT collage_filename, photo_count, generated_at 
        FROM school_collages 
        WHERE emis_code = ? 
        ORDER BY generated_at DESC 
        LIMIT 1
    ");
    
    if ($stmt) {
        $stmt->bind_param("s", $emis_code);
        $stmt->execute();
        $collage_result = $stmt->get_result();
        
        if ($collage_result && $collage_result->num_rows > 0) {
            $collage = $collage_result->fetch_assoc();
            $collage_path = $upload_base . $emis_safe . '/' . basename($collage['collage_filename']);
            
            if (file_exists($collage_path) && filesize($collage_path) > 0) {
                $stmt->close();
                return [
                    'src' => $collage_path,
                    'alt' => 'School Photo Collage',
                    'type' => 'collage',
                    'exists' => true
                ];
            }
        }
        $stmt->close();
    }
    
    // PRIORITY 2: Check for entrance photo
    $stmt = $conn->prepare("
        SELECT file_path, photo_type, description 
        FROM school_photos 
        WHERE emis_code = ? AND photo_type = 'entrance'
        ORDER BY uploaded_at DESC 
        LIMIT 1
    ");
    
    if ($stmt) {
        $stmt->bind_param("s", $emis_code);
        $stmt->execute();
        $photo_result = $stmt->get_result();
        
        if ($photo_result && $photo_result->num_rows > 0) {
            $photo = $photo_result->fetch_assoc();
            $photo_path = $upload_base . $emis_safe . '/' . basename($photo['file_path']);
            
            if (file_exists($photo_path) && filesize($photo_path) > 0) {
                $stmt->close();
                return [
                    'src' => $photo_path,
                    'alt' => $photo['description'] ?? 'School Entrance',
                    'type' => 'entrance_photo',
                    'exists' => true
                ];
            }
        }
        $stmt->close();
    }
    
    // PRIORITY 3: Any uploaded photo
    $stmt = $conn->prepare("
        SELECT file_path, photo_type, description 
        FROM school_photos 
        WHERE emis_code = ? 
        ORDER BY uploaded_at DESC 
        LIMIT 1
    ");
    
    if ($stmt) {
        $stmt->bind_param("s", $emis_code);
        $stmt->execute();
        $any_result = $stmt->get_result();
        
        if ($any_result && $any_result->num_rows > 0) {
            $photo = $any_result->fetch_assoc();
            $photo_path = $upload_base . $emis_safe . '/' . basename($photo['file_path']);
            
            if (file_exists($photo_path) && filesize($photo_path) > 0) {
                $stmt->close();
                return [
                    'src' => $photo_path,
                    'alt' => $photo['description'] ?? 'School Photo',
                    'type' => 'any_photo',
                    'exists' => true
                ];
            }
        }
        $stmt->close();
    }
    
    // PRIORITY 4: Fallback placeholder
    return [
        'src' => 'https://images.unsplash.com/photo-1562813733-b31f71025d54?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80',
        'alt' => 'School Building',
        'type' => 'fallback',
        'exists' => false
    ];
}

// Fetch the school's display image
$school_image = getSchoolDisplayImage($conn, $emis_code, UPLOAD_BASE_PATH);

// ============================================================================
// FETCH CATEGORY AND LEVEL NAMES
// ============================================================================
$category_name = "";
$level_name = "";

if ($cate_id) {
    $stmt = $conn->prepare("SELECT school_type FROM school_cate WHERE cate_id = ?");
    $stmt->bind_param("i", $cate_id);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
        $category_row = $result->fetch_assoc();
        $category_name = $category_row['school_type'];
    }
    $stmt->close();
}

if ($level_id) {
    $stmt = $conn->prepare("SELECT level_name FROM school_level WHERE level_id = ?");
    $stmt->bind_param("i", $level_id);
    $stmt->execute();
    $result = $stmt->get_result();
    if ($result->num_rows > 0) {
        $level_row = $result->fetch_assoc();
        $level_name = $level_row['level_name'];
    }
    $stmt->close();
}

// ============================================================================
// PROFILE COMPLETION LOGIC - FIXED ARRAY KEYS
// ============================================================================
require_once 'school_profile_completion_check.php';

$completion_result = checkSchoolProfileCompletion($conn, $emis_code);
$current_step = getSchoolCurrentStep($conn, $emis_code);

// ✅ FIX: Initialize completion_status with ALL required keys
$completion_status = [
    'percentage' => 0,
    'completed_steps' => 0,
    'total_steps' => 10
];

// Merge with actual results if available
if (is_array($completion_result)) {
    $completion_status = array_merge($completion_status, $completion_result);
}

// Ensure all keys exist with fallback values
$completion_status['percentage'] = $completion_status['percentage'] ?? 0;
$completion_status['completed_steps'] = $completion_status['completed_steps'] ?? 0;
$completion_status['total_steps'] = $completion_status['total_steps'] ?? 10;

$profile_incomplete = false;
$incomplete_percentage = 0;

if (isset($completion_status['percentage']) && $completion_status['percentage'] < 100) {
    $profile_incomplete = true;
    $incomplete_percentage = $completion_status['percentage'];
    $_SESSION['profile_incomplete'] = true;
    $_SESSION['incomplete_percentage'] = $incomplete_percentage;
    $_SESSION['current_step'] = $current_step;
}

// Sample data (replace with actual database queries if needed)
$vacant_posts = 5;
$student_teacher_ratio = "30:1";
$attendance_rate = "92%";
$facilities_status = "85%";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJ&K Education Department - School Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
--primary: #0056b3;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
--education-blue: #1a3e72;
--education-light: #e9f0f7;
--education-teal: #008b8b;
}
body {
background-color: #f5f5f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow: <?php echo $profile_incomplete ? 'hidden' : 'auto'; ?>;
}
.navbar-brand img {
height: 40px;
}
.sidebar {
background-color: var(--education-blue);
color: white;
min-height: calc(100vh - 56px);
box-shadow: 2px 0 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
padding: 0;
position: relative;
}
.sidebar .nav-link {
color: rgba(255,255,255,0.8);
border-left: 3px solid transparent;
padding: 10px 15px;
margin-bottom: 2px;
transition: all 0.3s ease;
position: relative;
}
.sidebar .nav-link:hover, .sidebar .nav-link.active {
color: white;
background-color: rgba(255,255,255,0.1);
border-left: 3px solid var(--warning);
}
.sidebar .nav-link:hover {
transform: translateX(5px);
}
.sidebar .nav-link i {
margin-right: 10px;
width: 20px;
text-align: center;
}
.dashboard-card {
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s;
border: none;
margin-bottom: 20px;
}
.dashboard-card:hover {
transform: translateY(-5px);
}
.card-icon {
font-size: 2rem;
margin-bottom: 15px;
}
.welcome-card {
background: linear-gradient(135deg, var(--education-blue), #2a5ca0);
color: white;
}
.profile-section {
background: linear-gradient(to bottom, var(--education-blue), #2a5ca0);
padding: 0;
text-align: center;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.profile-img-container {
width: 100%;
height: 200px;
overflow: hidden;
position: relative;
}
.profile-img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.9);
}
.profile-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(26, 62, 114, 0.9), transparent);
padding: 20px 15px 15px;
color: white;
text-align: center;
}
.school-header {
background: linear-gradient(to right, var(--education-blue), #2a5ca0);
color: white;
padding: 15px 20px;
border-radius: 10px;
margin-bottom: 20px;
display: flex;
align-items: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.school-logo {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
border: 3px solid white;
margin-right: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.school-info {
flex: 1;
}
.school-name {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 5px;
}
.school-details {
font-size: 1rem;
opacity: 0.9;
}
.stat-card {
border-left: 4px solid;
}
.stat-card.students {
border-left-color: var(--primary);
}
.stat-card.teachers {
border-left-color: var(--success);
}
.stat-card.staff {
border-left-color: var(--warning);
}
.stat-card.vacant {
border-left-color: var(--danger);
}
.stat-card.ratio {
border-left-color: #6f42c1;
}
.stat-card.attendance {
border-left-color: #20c997;
}
.stat-card.facilities {
border-left-color: #fd7e14;
}
.completion-card {
border-left: 4px solid #3498db;
}
.notification-badge {
position: absolute;
top: -5px;
right: -5px;
background-color: var(--danger);
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
font-size: 0.7rem;
display: flex;
align-items: center;
justify-content: center;
}
.chart-container {
position: relative;
height: 250px;
width: 100%;
}
.progress {
height: 8px;
margin-top: 5px;
}
.nav-menu {
flex-grow: 1;
overflow-y: auto;
padding: 10px 0;
max-height: calc(100vh - 200px - 56px);
}
.progress-circle {
width: 80px;
height: 80px;
position: relative;
}
.progress-circle svg {
width: 100%;
height: 100%;
}
.progress-circle-bg {
fill: none;
stroke: #e0e0e0;
stroke-width: 8;
}
.progress-circle-fill {
fill: none;
stroke-width: 8;
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: 50% 50%;
transition: stroke-dasharray 0.5s;
}
.progress-circle-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-weight: bold;
font-size: 1.2rem;
}
.completion-alert {
border-left: 5px solid;
animation: pulse 2s infinite;
}
.completion-alert.warning {
border-left-color: #ffc107;
background: linear-gradient(to right, #fff3cd, #fff);
}
.completion-alert.success {
border-left-color: #28a745;
background: linear-gradient(to right, #d4edda, #fff);
}
.dropdown-menu-custom {
display: block;
position: relative;
background-color: rgba(255, 255, 255, 0.05);
min-width: 100%;
box-shadow: none;
border-radius: 0;
border: none;
border-left: 3px solid transparent;
padding-left: 20px;
margin: 0;
transition: all 0.3s ease;
max-height: 0;
overflow: hidden;
}
.dropdown-menu-custom.show {
max-height: 500px;
overflow-y: auto;
animation: fadeIn 0.3s ease;
}
.dropdown-menu-custom .dropdown-item {
color: rgba(255, 255, 255, 0.8);
padding: 8px 15px;
border-left: none;
margin-bottom: 0;
font-size: 0.9rem;
transition: all 0.2s;
}
.dropdown-menu-custom .dropdown-item:hover {
color: white;
background-color: rgba(255, 255, 255, 0.1);
padding-left: 20px;
}
.profile-security {
 color: var(--education-teal);
 font-size: 0.85rem;
 margin-top: 1rem;
 padding-top: 1rem;
 border-top: 1px solid #e9ecef;
 }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.4); }
70% { box-shadow: 0 0 0 10px rgba(52, 152, 219, 0); }
100% { box-shadow: 0 0 0 0 rgba(52, 152, 219, 0); }
}
.badge {
font-size: 0.7rem;
padding: 0.25rem 0.5rem;
animation: badgePulse 2s infinite;
}
@keyframes badgePulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.profile-modal-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
z-index: 1040;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
}
.profile-modal {
background: white;
border-radius: 20px;
box-shadow: 0 25px 80px rgba(0,0,0,0.4);
width: 90%;
max-width: 600px;
max-height: 100vh;
overflow-y: auto;
z-index: 1050;
position: relative;
animation: modalAppear 0.5s ease-out;
display: flex;
flex-direction: column;
}
@keyframes modalAppear {
0% { opacity: 0; transform: scale(0.9) translateY(-30px); }
100% { opacity: 1; transform: scale(1) translateY(0); }
}
.profile-modal-header {
background: linear-gradient(135deg, var(--education-blue), #2a5ca0);
color: white;
border-radius: 20px 20px 0 0;
padding: 1.5rem 2rem;
text-align: center;
position: relative;
flex-shrink: 0;
}
.profile-modal-body {
padding: 2rem 2.5rem;
text-align: center;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
overflow-y: auto;
}
.profile-icon {
font-size: 4rem;
color: var(--education-blue);
margin-bottom: 1.5rem;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-8px); }
60% { transform: translateY(-4px); }
}
.profile-btn {
padding: 1rem 2.5rem;
font-size: 1.1rem;
font-weight: 600;
border-radius: 12px;
background: linear-gradient(135deg, var(--education-blue), #2a5ca0);
border: none;
color: white;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(26, 62, 114, 0.4);
margin-bottom: 1rem;
min-height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.profile-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(26, 62, 114, 0.5);
}
@media (max-width: 768px) {
.sidebar {
min-height: auto;
position: fixed;
z-index: 1000;
width: 250px;
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.sidebar.show {
transform: translateX(0);
}
.chart-container {
height: 200px;
}
.school-header {
flex-direction: column;
text-align: center;
}
.school-logo {
margin-right: 0;
margin-bottom: 15px;
}
.profile-section {
padding: 0;
}
.profile-img-container {
height: 150px;
}
}
</style>
</head>
<body>

<!-- Profile Completion Modal - FORCE COMPLETION -->
<?php if ($profile_incomplete): ?>
<div class="profile-modal-backdrop">
<div class="profile-modal">
<div class="profile-modal-header">
<div class="d-flex align-items-center justify-content-center">
<i class="fas fa-school me-3" style="font-size: 1.8rem;"></i>
<h3 class="mb-0">School Profile Completion Required</h3>
</div>
</div>
<div class="profile-modal-body">
<div class="profile-icon"><i class="fas fa-school"></i></div>
<h2 class="mb-3">Complete Your School Profile</h2>
<p class="text-muted mb-4">
Welcome to <strong>AJ&K Education Department - School Management System</strong>.
To continue using the system, your school profile must be completed.
</p>
<div class="mb-4">
<div class="progress-circle mx-auto mb-3">
<svg viewBox="0 0 36 36">
<path class="progress-circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
<path class="progress-circle-fill" stroke="#ffc107" stroke-dasharray="<?php echo $incomplete_percentage; ?>, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
</svg>
<div class="progress-circle-text text-warning"><?php echo $incomplete_percentage; ?>%</div>
</div>
<div class="alert alert-warning">
<div class="d-flex align-items-center">
<i class="fas fa-info-circle me-2"></i>
<div>
<strong>Current Step:</strong> Step <?php echo $current_step; ?> of 10<br>
<strong>Progress:</strong> <?php echo $incomplete_percentage; ?>% complete
</div>

</div>
</div>
</div>
<button type="button" class="btn profile-btn" onclick="redirectToCurrentStep()">
<i class="fas fa-forward me-2"></i>Continue to Step <?php echo $current_step; ?>
</button>
                <div class="profile-security">
                    <i class="fas fa-shield-alt"></i>
                    Your data is protected under AJ&K Data Protection Policy
                </div>
</div>
</div>
</div>
<?php endif; ?>

<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: var(--education-blue);">
<div class="container-fluid">
<button class="btn btn-outline-light d-md-none me-2" id="sidebarToggle">
<i class="fas fa-bars"></i>
</button>
<a class="navbar-brand" href="#">
<img src="dsis.jpeg" alt="AJ&K Education Department" style="border-radius: 50%; width: 50px; height: 50px; object-fit: cover;">
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link position-relative" href="#">
<i class="fas fa-bell"></i>
<span class="notification-badge">3</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
<i class="fas fa-user-circle"></i> <?php echo htmlspecialchars($school_name); ?>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="employee_profile.php"><i class="fas fa-user"></i> My Profile</a></li>
<li><a class="dropdown-item" href="change_password.php"><i class="fas fa-key"></i> Change Password</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item text-danger" href="#" onclick="confirmLogout()"><i class="fas fa-sign-out-alt"></i> Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

<div class="container-fluid">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 col-lg-2 d-md-block sidebar p-0">
<div class="profile-section">
<div class="profile-img-container">
<!-- ✅ DYNAMIC SCHOOL IMAGE FROM STEP 10 -->
<img src="<?php echo htmlspecialchars($school_image['src']); ?>"
class="profile-img" 
alt="<?php echo htmlspecialchars($school_image['alt']); ?>"
onerror="this.src='https://via.placeholder.com/200x180?text=No+Image'; this.onerror=null;">
<div class="profile-overlay">
<h5><?php echo htmlspecialchars($school_name); ?></h5>
<p class="mb-1"><?php echo htmlspecialchars($level_name . " " . $category_name); ?></p>
<small>EMIS: <?php echo htmlspecialchars($emis_code); ?></small>
</div>
</div>
</div>
<div class="nav-menu">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<i class="fas fa-tachometer-alt"></i> Dashboard
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="javascript:void(0)" role="button"
data-bs-toggle="collapse" data-bs-target="#schoolManagementMenu">
<i class="fas fa-school"></i> School Management
<span class="float-end"><i class="fas fa-chevron-down dropdown-icon"></i></span>
</a>
<div class="dropdown-menu-custom collapse" id="schoolManagementMenu">
<a class="dropdown-item" href="school_multi1.php?emis_code=<?php echo urlencode($emis_code); ?>">
<i class="fas fa-plus-circle"></i> Add School Record
</a>
<?php for($i = 1; $i <= 10; $i++): ?>
<a class="dropdown-item" href="school_step<?php echo $i; ?>.php?emis_code=<?php echo urlencode($emis_code); ?>">
<i class="fas fa-arrow-right"></i> Step <?php echo $i; ?>
</a>
<?php endfor; ?>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-user-tie"></i> Staff Management
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-user-graduate"></i> Student Management
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="student_profile.php">
<i class="fas fa-plus-circle"></i> Add New Record
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-chart-bar"></i> Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#profileCompletionModal">
<i class="fas fa-tasks"></i> Profile Completion
<?php if ($completion_status['percentage'] < 100): ?>
<span class="badge bg-warning float-end"><?php echo $completion_status['percentage']; ?>%</span>
<?php else: ?>
<span class="badge bg-success float-end">Complete</span>
<?php endif; ?>
</a>
</li>
</ul>
</div>
</div>

<!-- Main Content -->
<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4 py-4">
<!-- School Header with Dynamic Image -->
<div class="school-header">
<!-- ✅ DYNAMIC SCHOOL IMAGE FROM STEP 10 -->
<img src="<?php echo htmlspecialchars($school_image['src']); ?>"
alt="<?php echo htmlspecialchars($school_image['alt']); ?>"
class="school-logo"
onerror="this.src='https://via.placeholder.com/100?text=School'; this.onerror=null;">
<div class="school-info">
<h1 class="school-name"><?php echo htmlspecialchars($school_name); ?></h1>
<div class="school-details">
<span><i class="fas fa-map-marker-alt"></i> Kotli, Azad Jammu & Kashmir</span>
<span class="mx-2">|</span>
<span><i class="fas fa-phone"></i> +92-346-8145393</span>
<span class="mx-2">|</span>
<span><i class="fas fa-envelope"></i> info@ghsskotli.edu.pk</span>
<span class="mx-2">|</span>
<span><i class="fas fa-id-card"></i> EMIS: <?php echo htmlspecialchars($emis_code); ?></span>
</div>
</div>
</div>

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">School Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group me-2">
<button type="button" class="btn btn-sm btn-outline-secondary" onclick="window.print()">
<i class="fas fa-print"></i> Print
</button>
<button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#profileCompletionModal">
<i class="fas fa-chart-pie"></i> Progress
</button>
</div>
<div class="btn-group me-2">
<?php if ($completion_status['percentage'] < 100): ?>
<a href="school_step<?php echo $current_step; ?>.php?emis_code=<?php echo urlencode($emis_code); ?>"
class="btn btn-sm btn-warning">
<i class="fas fa-forward"></i> Continue (Step <?php echo $current_step; ?>)
</a>
<?php else: ?>
<button type="button" class="btn btn-sm btn-success" disabled>
<i class="fas fa-check-circle"></i> Profile Complete
</button>
<?php endif; ?>
</div>
</div>
</div>

<!-- Profile Completion Alert -->
<?php if ($completion_status['percentage'] < 100): ?>
<div class="alert completion-alert warning mb-4">
<div class="d-flex align-items-center">
<div class="me-3">
<i class="fas fa-exclamation-circle fa-2x text-warning"></i>
</div>
<div class="flex-grow-1">
<h5 class="alert-heading mb-1">School Profile Incomplete</h5>
<p class="mb-1">Your school profile is <?php echo $completion_status['percentage']; ?>% complete.</p>
<div class="d-flex justify-content-between align-items-center mt-2">
<small>Current step: <strong>Step <?php echo $current_step; ?> of 10</strong></small>
<a href="school_step<?php echo $current_step; ?>.php?emis_code=<?php echo urlencode($emis_code); ?>"
class="btn btn-sm btn-warning">
<i class="fas fa-arrow-right"></i> Continue Now
</a>
</div>
</div>
</div>
</div>
<?php else: ?>
<div class="alert completion-alert success mb-4">
<div class="d-flex align-items-center">
<div class="me-3">
<i class="fas fa-check-circle fa-2x text-success"></i>
</div>
<div class="flex-grow-1">
<h5 class="alert-heading mb-1">School Profile Complete!</h5>
<p class="mb-0">Congratulations! Your school profile is 100% complete.</p>
</div>
</div>
</div>
<?php endif; ?>

<!-- Profile Status Card -->
<div class="row mb-4">
<div class="col-12">
<div class="card dashboard-card completion-card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0"><i class="fas fa-school me-2"></i>School Profile Status</h5>
<?php if ($completion_status['percentage'] < 100): ?>
<a href="school_step<?php echo $current_step; ?>.php?emis_code=<?php echo urlencode($emis_code); ?>"
class="btn btn-sm btn-warning">
<i class="fas fa-forward me-1"></i>Complete Now
</a>
<?php else: ?>
<span class="badge bg-success"><i class="fas fa-check-circle me-1"></i>Complete</span>
<?php endif; ?>
</div>
<div class="card-body">
<div class="row align-items-center">
<div class="col-md-8">
<div class="progress" style="height: 20px;">
<div class="progress-bar <?php echo ($completion_status['percentage'] == 100) ? 'bg-success' : 'bg-warning progress-bar-striped progress-bar-animated'; ?>"
role="progressbar"
style="width: <?php echo $completion_status['percentage']; ?>%">
<?php echo $completion_status['percentage']; ?>%
</div>
</div>
<div class="mt-2 d-flex justify-content-between">
<small class="text-muted">
<i class="fas fa-tasks me-1"></i>
<!-- ✅ FIXED: Using null coalescing operator to prevent warnings -->
<?php echo $completion_status['completed_steps'] ?? 0; ?> of <?php echo $completion_status['total_steps'] ?? 10; ?> steps complete
</small>
<small class="text-muted">
<i class="fas fa-step-forward me-1"></i>
Current: Step <?php echo $current_step; ?>
</small>
</div>
</div>
<div class="col-md-4 text-center">
<div class="progress-circle mx-auto">
<svg viewBox="0 0 36 36">
<path class="progress-circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
<path class="progress-circle-fill"
stroke="<?php echo ($completion_status['percentage'] == 100) ? '#28a745' : '#ffc107'; ?>"
stroke-dasharray="<?php echo $completion_status['percentage']; ?>, 100"
d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831"/>
</svg>
<div class="progress-circle-text <?php echo ($completion_status['percentage'] == 100) ? 'text-success' : 'text-warning'; ?>">
<?php echo $completion_status['percentage']; ?>%
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
<div class="col-xl-3 col-md-6 mb-4">
<div class="card dashboard-card stat-card students h-100">
<div class="card-body">
<div class="row align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Students</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">1,250</div>
<div class="mt-2 text-sm">
<span class="text-success"><i class="fas fa-male"></i> 720 Boys</span><br>
<span class="text-info"><i class="fas fa-female"></i> 530 Girls</span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-user-graduate fa-2x text-primary"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card dashboard-card stat-card teachers h-100">
<div class="card-body">
<div class="row align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-success text-uppercase mb-1">Teaching Staff</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">42</div>
</div>
<div class="col-auto">
<i class="fas fa-chalkboard-teacher fa-2x text-success"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card dashboard-card stat-card staff h-100">
<div class="card-body">
<div class="row align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Non-Teaching Staff</div>
<div class="h5 mb-0 font-weight-bold text-gray-800">15</div>
</div>
<div class="col-auto">
<i class="fas fa-user-tie fa-2x text-warning"></i>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-6 mb-4">
<div class="card dashboard-card stat-card vacant h-100">
<div class="card-body">
<div class="row align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-danger text-uppercase mb-1">Vacant Posts</div>
<div class="h5 mb-0 font-weight-bold text-gray-800"><?php echo $vacant_posts; ?></div>
</div>
<div class="col-auto">
<i class="fas fa-user-times fa-2x text-danger"></i>
</div>
</div>
</div>
</div>
</div>
</div>

<!-- Charts -->
<div class="row mb-4">
<div class="col-lg-6">
<div class="card dashboard-card mb-4">
<div class="card-header"><h6 class="m-0 font-weight-bold">Student Gender Distribution</h6></div>
<div class="card-body">
<div class="chart-container">
<canvas id="genderChart"></canvas>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="card dashboard-card mb-4">
<div class="card-header"><h6 class="m-0 font-weight-bold">Class-wise Enrollment</h6></div>
<div class="card-body">
<div class="chart-container">
<canvas id="classChart"></canvas>
</div>
</div>
</div>
</div>
</div>

<!-- Recent Activities -->
<div class="card dashboard-card mb-4">
<div class="card-header"><h6 class="m-0 font-weight-bold">Recent Activities</h6></div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr><th>Date</th><th>Activity</th><th>Action</th><th>Status</th></tr>
</thead>
<tbody>
<tr><td>2023-10-15</td><td>New student registration</td><td>Added</td><td><span class="badge bg-success">Completed</span></td></tr>
<tr><td>2023-10-14</td><td>Monthly staff meeting</td><td>Conducted</td><td><span class="badge bg-success">Completed</span></td></tr>
<tr><td>2023-10-12</td><td>Budget allocation request</td><td>Submitted</td><td><span class="badge bg-warning">Pending</span></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</main>
</div>
</div>

<!-- Profile Completion Modal -->
<div class="modal fade" id="profileCompletionModal" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="fas fa-school me-2"></i>School Profile Completion Status</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<?php
if (function_exists('checkAndDisplaySchoolProfileCompletion')) {
$completion_display = checkAndDisplaySchoolProfileCompletion($conn, $emis_code, true);
echo is_array($completion_display) ? $completion_display['html'] : $completion_display;
} else {
echo "<div class='alert alert-info'>Profile completion details not available.</div>";
}
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<?php if ($completion_status['percentage'] < 100): ?>
<a href="school_step<?php echo $current_step; ?>.php?emis_code=<?php echo urlencode($emis_code); ?>"
class="btn btn-primary">
<i class="fas fa-forward me-1"></i>Continue to Step <?php echo $current_step; ?>
</a>
<?php endif; ?>
</div>
</div>
</div>
</div>

<!-- Footer -->
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<div class="row">
<div class="col-md-6">
<span class="text-muted">AJ&K Education Department &copy; <?php echo date('Y'); ?></span>
</div>
<div class="col-md-6 text-md-end">
<span class="text-muted">School Profile: <?php echo $completion_status['percentage']; ?>% Complete</span>
</div>
</div>
</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function confirmLogout() {
if (confirm('Are you sure you want to logout?')) {
window.location.href = 'logout.php';
}
}

function redirectToCurrentStep() {
const currentStep = <?php echo $current_step; ?>;
const emisCode = '<?php echo urlencode($emis_code); ?>';
window.location.href = `school_step${currentStep}.php?emis_code=${emisCode}`;
}

document.addEventListener('DOMContentLoaded', function() {
// Sidebar toggle
const sidebarToggle = document.getElementById('sidebarToggle');
if (sidebarToggle) {
sidebarToggle.addEventListener('click', function() {
const sidebar = document.querySelector('.sidebar');
if (sidebar) {
sidebar.classList.toggle('show');
}
});
}

// Dropdown toggle
const schoolManagementMenu = document.getElementById('schoolManagementMenu');
if (schoolManagementMenu) {
const collapse = new bootstrap.Collapse(schoolManagementMenu, { toggle: false });
const dropdownToggle = document.querySelector('.dropdown-toggle[data-bs-target="#schoolManagementMenu"]');
if (dropdownToggle) {
dropdownToggle.addEventListener('click', function(e) {
e.preventDefault();
collapse.toggle();
const chevron = this.querySelector('.dropdown-icon');
if (chevron) {
if (schoolManagementMenu.classList.contains('show')) {
chevron.classList.remove('fa-chevron-down');
chevron.classList.add('fa-chevron-up');
} else {
chevron.classList.remove('fa-chevron-up');
chevron.classList.add('fa-chevron-down');
}
}
});
}
}

// Gender Chart
var genderCtx = document.getElementById('genderChart');
if (genderCtx) {
genderCtx = genderCtx.getContext('2d');
new Chart(genderCtx, {
type: 'doughnut',
data: {
labels: ['Male Students', 'Female Students'],
datasets: [{
data: [720, 530],
backgroundColor: ['#36A2EB', '#FF6384']
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: { legend: { position: 'bottom' } }
}
});
}

// Class Chart
var classCtx = document.getElementById('classChart');
if (classCtx) {
classCtx = classCtx.getContext('2d');
new Chart(classCtx, {
type: 'bar',
data: {
labels: ['10th', '9th', '8th', '7th', '6th', '5th', '4th', '3rd', '2nd', '1st', 'Nursery'],
datasets: [{
label: 'Students',
data: [180, 170, 160, 150, 140, 130, 120, 100, 50, 30, 20],
backgroundColor: '#4CAF50'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: { y: { beginAtZero: true } }
}
});
}
});
</script>
</body>
</html>