<?php
// academic_plan_view.php - نسخة محسنة مع تصميم موحد
error_reporting(E_ALL);
ini_set('display_errors', 1);
require 'db.php';
require 'helpers.php';
require_committee();

$plan_id = isset($_GET['id']) ? (int)$_GET['id'] : 0;

if (!$plan_id) {
    header("Location: academic_plans_list.php");
    exit;
}

// Get plan details
$planStmt = $mysqli1->prepare("
    SELECT ap.*, c.name as college_name, sec.name as section_name, p.name as program_name, sp.specialization_name_ar as specialization_name
    FROM academic_plans ap
    LEFT JOIN colleges c ON c.id = ap.college_id
    LEFT JOIN sections sec ON sec.id = ap.section_id
    LEFT JOIN programs p ON p.id = ap.program_id
    LEFT JOIN specializations sp ON sp.specialization_id = ap.specialization_id
    WHERE ap.id = ? AND ap.deleted_at IS NULL
");
$planStmt->bind_param('i', $plan_id);
$planStmt->execute();
$plan = $planStmt->get_result()->fetch_assoc();
$planStmt->close();

if (!$plan) {
    $_SESSION['error_message'] = "الخطة الدراسية غير موجودة";
    header("Location: academic_plans_list.php");
    exit;
}

// Get plan subjects organized by semester
$planSubjectsStmt = $mysqli1->prepare("
    SELECT 
        aps.id as plan_subject_id,
        aps.subject_id,
        aps.subject_code,
        aps.is_core,
        aps.credit_hours,
        aps_sem.semester_number,
        s.subjectnamea,
        s.subjectnamee,
        s.subjecthours
    FROM academic_plan_subjects aps
    JOIN academic_plan_semesters aps_sem ON aps.semester_id = aps_sem.id
    JOIN subjects s ON aps.subject_id = s.id
    WHERE aps.plan_id = ?
    ORDER BY aps_sem.semester_number, aps.subject_code
");
$planSubjectsStmt->bind_param('i', $plan_id);
$planSubjectsStmt->execute();
$plan_subjects = $planSubjectsStmt->get_result()->fetch_all(MYSQLI_ASSOC);
$planSubjectsStmt->close();

// Organize by semester
$subjects_by_semester = [];
$total_hours_by_semester = [];

foreach ($plan_subjects as $ps) {
    $semester = $ps['semester_number'];
    if (!isset($subjects_by_semester[$semester])) {
        $subjects_by_semester[$semester] = [];
        $total_hours_by_semester[$semester] = 0;
    }
    $subjects_by_semester[$semester][] = $ps;
    $total_hours_by_semester[$semester] += $ps['credit_hours'];
}

include 'header.php';
?>

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عرض الخطة الدراسية - <?= e($plan['plan_name']) ?></title>
    <link rel="stylesheet" href="css/style4.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* RTL Specific Styles */
        body {
            font-family: 'Cairo', sans-serif;
            background-color: #f8fafc;
            min-height: 100vh;
        }
        
        .main-wrapper {
            padding: 30px 20px;
        }
        
        /* Header Styles */
        .page-header {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            border-radius: 30px;
            padding: 40px;
            margin-bottom: 30px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }
        
        .page-header h1 {
            color: white;
            font-size: 2.5rem;
            font-weight: 800;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
        }
        
        .page-header p {
            color: rgba(255,255,255,0.9);
            font-size: 1.1rem;
            margin-top: 10px;
            position: relative;
            z-index: 2;
        }
        
        /* Header Buttons - بدون أي تأثيرات حركة */
        .header-buttons {
            display: flex;
            gap: 10px;
            position: relative;
            z-index: 2;
        }
        
        .btn-back {
            background: rgba(255, 255, 255, 0.15);
            border: 2px solid rgba(255, 255, 255, 0.5);
            color: white;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            backdrop-filter: blur(5px);
        }
        
        .btn-back:hover {
            background: white;
            color: #1e3c72;
            border-color: white;
            transform: translateY(-2px);
        }
        
        .btn-back i {
            transition: transform 0.3s ease;
        }
        
        .btn-back:hover i {
            transform: translateX(-3px);
        }
        
        .btn-edit {
            background: linear-gradient(135deg, #00b09b, #96c93d);
            border: none;
            color: white;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 176, 155, 0.4);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-edit:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 176, 155, 0.6);
            color: white;
        }
        
        .btn-edit i {
            transition: transform 0.3s ease;
        }
        
        .btn-edit:hover i {
            transform: translateX(-3px);
        }
        
        /* Plan Info Card */
        .plan-info {
            background: white;
            border-radius: 30px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
            border-right: 5px solid #667eea;
        }
        
        .info-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px 20px;
            background: linear-gradient(135deg, #f5f7fa 0%, #e9edf5 100%);
            border-radius: 15px;
            border: 1px solid rgba(102, 126, 234, 0.1);
        }
        
        .info-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
        }
        
        .badge-plan {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 8px 20px;
            border-radius: 50px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        
        /* Batch Cards */
        .batch-card {
            background: white;
            border-radius: 20px;
            padding: 20px;
            border: 2px solid transparent;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        }
        
        .batch-card:hover {
            transform: translateY(-5px);
            border-color: #667eea;
            box-shadow: 0 15px 30px rgba(102, 126, 234, 0.2);
        }
        
        .batch-card.current {
            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
            border-color: #2196f3;
        }
        
        .current-badge {
            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
            color: #1e4620;
            padding: 5px 12px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        /* Semester Cards */
        .semester-card {
            background: white;
            border-radius: 25px;
            border: 1px solid #e5e7eb;
            margin-bottom: 25px;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
        }
        
        .semester-card:hover {
            box-shadow: 0 15px 40px rgba(102, 126, 234, 0.15);
            transform: translateY(-5px);
        }
        
        .semester-header {
            background: linear-gradient(135deg, #f5f7fa 0%, #e9edf5 100%);
            padding: 20px 25px;
            border-bottom: 2px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .semester-header h4 {
            margin: 0;
            color: #2d3748;
            font-weight: 700;
        }
        
        .semester-total {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 8px 20px;
            border-radius: 50px;
            font-size: 0.95rem;
            font-weight: 600;
        }
        
        .subject-item {
            padding: 20px 25px;
            border-bottom: 1px solid #eef2f6;
            transition: background-color 0.3s ease;
        }
        
        .subject-item:hover {
            background-color: #f8fafc;
        }
        
        .subject-item:last-child {
            border-bottom: none;
        }
        
        .subject-code {
            background: #e9ecef;
            padding: 4px 12px;
            border-radius: 20px;
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            font-weight: 600;
        }
        
        .core-badge {
            background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
            color: #1e4620;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .elective-badge {
            background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
            color: #7f4f24;
            padding: 4px 12px;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
        }
        
        .hours-badge {
            background: #e9ecef;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }
        
        /* Statistics Cards */
        .stat-card {
            background: white;
            border-radius: 25px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            border: 1px solid rgba(102, 126, 234, 0.1);
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(102, 126, 234, 0.2);
        }
        
        .stat-icon {
            font-size: 2.5rem;
            background: linear-gradient(135deg, #667eea, #764ba2);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: 800;
            color: #2d3748;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #718096;
            font-weight: 600;
            font-size: 0.9rem;
        }
        
        /* Print Button */
        .print-btn {
            position: fixed;
            bottom: 30px;
            left: 30px;
            z-index: 1000;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, #00b09b, #96c93d);
            color: white;
            border: none;
            box-shadow: 0 5px 20px rgba(0, 176, 155, 0.4);
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .print-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 10px 30px rgba(0, 176, 155, 0.6);
        }
        
        @media print {
            .navbar, .print-btn, .footer, .btn-back, .btn-edit, .header-buttons {
                display: none !important;
            }
            .container {
                width: 100%;
                max-width: none;
            }
        }
        
        /* RTL Specific Adjustments */
        .me-1 { margin-left: 0.25rem !important; margin-right: 0 !important; }
        .me-2 { margin-left: 0.5rem !important; margin-right: 0 !important; }
        .me-3 { margin-left: 1rem !important; margin-right: 0 !important; }
        .ms-1 { margin-right: 0.25rem !important; margin-left: 0 !important; }
        .ms-2 { margin-right: 0.5rem !important; margin-left: 0 !important; }
        .ms-3 { margin-right: 1rem !important; margin-left: 0 !important; }
        
        .float-start { float: right !important; }
        .text-start { text-align: right !important; }
        .text-end { text-align: left !important; }
    </style>
</head>
<body dir="rtl">
    <div class="main-wrapper">
        <div class="container">
            <!-- Header -->
            <div class="page-header d-flex align-items-center justify-content-between">
                <div>
                    <h1 class="mb-2">
                        <i class="fas fa-eye ms-3"></i>
                        عرض الخطة الدراسية
                    </h1>
                    <p class="mb-0">
                        <i class="fas fa-layer-group ms-2"></i>
                        تفاصيل الخطة: <?= e($plan['plan_name']) ?>
                    </p>
                </div>
                <div class="header-buttons">
                    <!-- زر العودة ثابت بدون أي تأثيرات حركة -->
                    <a href="academic_plans_list.php" class="btn-back">
                        <i class="fas fa-arrow-right ms-2"></i> 
                        العودة للقائمة
                    </a>
                    
                    <a href="academic_plan_edit.php?id=<?= $plan_id ?>" class="btn-edit">
                        <i class="fas fa-edit ms-2"></i>
                        تعديل الخطة
                    </a>
                </div>
            </div>

            <!-- Plan Information -->
            <div class="plan-info">
                <div class="row g-4">
                    <div class="col-12">
                        <h5 class="fw-bold mb-3">
                            <i class="fas fa-info-circle ms-2" style="color: #667eea;"></i>
                            معلومات الخطة
                        </h5>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-tag"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">رمز الخطة</small>
                                <span class="fw-bold"><?= e($plan['plan_code']) ?></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-university"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">الكلية</small>
                                <span class="fw-bold"><?= e($plan['college_name']) ?></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-building"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">القسم</small>
                                <span class="fw-bold"><?= e($plan['section_name']) ?></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-graduation-cap"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">البرنامج</small>
                                <span class="fw-bold"><?= e($plan['program_name']) ?></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-tag"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">التخصص</small>
                                <span class="fw-bold"><?= e($plan['specialization_name'] ?? 'غير محدد') ?></span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">عدد الفصول</small>
                                <span class="fw-bold"><?= (int)$plan['total_semesters'] ?> فصول</span>
                            </div>
                        </div>
                    </div>
                    
                    <?php if ($plan['description']): ?>
                    <div class="col-12">
                        <div class="info-item">
                            <div class="info-icon">
                                <i class="fas fa-align-left"></i>
                            </div>
                            <div>
                                <small class="text-muted d-block">الوصف</small>
                                <span><?= nl2br(e($plan['description'])) ?></span>
                            </div>
                        </div>
                    </div>
                    <?php endif; ?>
                </div>
            </div>

            <!-- Batches Section -->
            <?php
            // Get batches for this plan
            $batchesStmt = $mysqli1->prepare("
                SELECT b.value, apb.start_date, apb.end_date, apb.is_current 
                FROM academic_plan_batches apb
                JOIN batches b ON apb.batch_id = b.id
                WHERE apb.plan_id = ? AND b.deleted_at IS NULL
                ORDER BY b.value DESC
            ");
            $batchesStmt->bind_param('i', $plan_id);
            $batchesStmt->execute();
            $plan_batches = $batchesStmt->get_result()->fetch_all(MYSQLI_ASSOC);
            $batchesStmt->close();
            
            if (!empty($plan_batches)): 
            ?>
            <div class="plan-info">
                <h5 class="fw-bold mb-3">
                    <i class="fas fa-users ms-2" style="color: #667eea;"></i>
                    الدفعات المرتبطة
                </h5>
                <div class="row g-4">
                    <?php foreach ($plan_batches as $pb): ?>
                    <div class="col-md-4">
                        <div class="batch-card <?= $pb['is_current'] ? 'current' : '' ?>">
                            <div class="d-flex align-items-center justify-content-between mb-2">
                                <span class="fw-bold fs-5"><?= e($pb['value']) ?></span>
                                <?php if ($pb['is_current']): ?>
                                    <span class="current-badge">
                                        <i class="fas fa-bolt ms-1"></i>حالي
                                    </span>
                                <?php endif; ?>
                            </div>
                            <div class="d-flex gap-2 mt-3">
                                <?php if ($pb['start_date']): ?>
                                    <small class="badge bg-light text-dark">
                                        <i class="fas fa-play text-success ms-1"></i>
                                        <?= e($pb['start_date']) ?>
                                    </small>
                                <?php endif; ?>
                                <?php if ($pb['end_date']): ?>
                                    <small class="badge bg-light text-dark">
                                        <i class="fas fa-stop text-danger ms-1"></i>
                                        <?= e($pb['end_date']) ?>
                                    </small>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>

            <!-- Summary Statistics -->
            <div class="row g-4 mb-4">
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-book"></i>
                        </div>
                        <div class="stat-number"><?= count($plan_subjects) ?></div>
                        <div class="stat-label">إجمالي المقررات</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-star"></i>
                        </div>
                        <div class="stat-number"><?= count(array_filter($plan_subjects, fn($ps) => $ps['is_core'])) ?></div>
                        <div class="stat-label">المقررات الأساسية</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-clock"></i>
                        </div>
                        <div class="stat-number"><?= array_sum(array_column($plan_subjects, 'credit_hours')) ?></div>
                        <div class="stat-label">إجمالي الساعات</div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stat-card">
                        <div class="stat-icon">
                            <i class="fas fa-layer-group"></i>
                        </div>
                        <div class="stat-number"><?= count($subjects_by_semester) ?></div>
                        <div class="stat-label">فصول دراسية</div>
                    </div>
                </div>
            </div>

            <!-- Study Plan Grid -->
            <div class="row g-4">
                <?php for ($sem = 1; $sem <= $plan['total_semesters']; $sem++): ?>
                    <div class="col-lg-6">
                        <div class="semester-card">
                            <div class="semester-header">
                                <h4>
                                    <i class="fas fa-calendar-alt ms-2"></i>
                                    الفصل <?= $sem ?>
                                </h4>
                                <span class="semester-total">
                                    <i class="fas fa-clock ms-1"></i>
                                    <?= $total_hours_by_semester[$sem] ?? 0 ?> ساعة
                                </span>
                            </div>
                            <div class="semester-body">
                                <?php if (isset($subjects_by_semester[$sem]) && !empty($subjects_by_semester[$sem])): ?>
                                    <?php foreach ($subjects_by_semester[$sem] as $subject): ?>
                                        <div class="subject-item">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <div>
                                                    <span class="subject-code ms-2"><?= e($subject['subject_code']) ?></span>
                                                    <?php if ($subject['is_core']): ?>
                                                        <span class="core-badge">أساسي</span>
                                                    <?php else: ?>
                                                        <span class="elective-badge">اختياري</span>
                                                    <?php endif; ?>
                                                </div>
                                                <span class="hours-badge">
                                                    <?= e($subject['credit_hours']) ?> ساعة
                                                </span>
                                            </div>
                                            <div class="fw-bold mb-1"><?= e($subject['subjectnamea']) ?></div>
                                            <?php if ($subject['subjectnamee']): ?>
                                                <div class="text-muted small"><?= e($subject['subjectnamee']) ?></div>
                                            <?php endif; ?>
                                        </div>
                                    <?php endforeach; ?>
                                    
                                    <div class="bg-light p-3 text-center fw-bold" style="border-top: 2px dashed #e2e8f0;">
                                        إجمالي الساعات: <?= $total_hours_by_semester[$sem] ?? 0 ?> ساعة
                                    </div>
                                <?php else: ?>
                                    <div class="text-center py-5 text-muted">
                                        <i class="fas fa-folder-open fa-3x mb-3 opacity-50"></i>
                                        <p class="mb-0">لا توجد مقررات في هذا الفصل</p>
                                    </div>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                <?php endfor; ?>
            </div>

            <!-- Print Button -->
            <button onclick="window.print()" class="print-btn">
                <i class="fas fa-print fa-lg"></i>
            </button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
    // Auto-hide alerts after 5 seconds
    setTimeout(function() {
        document.querySelectorAll('.alert').forEach(function(alert) {
            alert.style.transition = 'opacity 0.5s';
            alert.style.opacity = '0';
            setTimeout(function() {
                if (alert.parentNode) alert.remove();
            }, 500);
        });
    }, 5000);
    </script>
</body>
</html>
<?php include 'footer.php'; ?>