<?php
session_start();
if (!isset($_SESSION['admin_id'])) { header("Location: login.php"); exit(); }
include 'db_connection.php'; 
include 'admin_lang.php'; 

// منطق تغيير اللغة
if (isset($_GET['lang'])) {
    $_SESSION['lang'] = $_GET['lang'];
}
$lang = isset($_SESSION['lang']) ? $_SESSION['lang'] : 'ar';
$t = $translations[$lang];

// دالة لجلب الأعداد
function safeCount($conn, $table) {
    $res = $conn->query("SELECT id FROM $table");
    return ($res) ? $res->num_rows : 0;
}

$courses_count      = safeCount($conn, 'courses');
$subs_count         = safeCount($conn, 'newsletter');
$gallery_count      = safeCount($conn, 'gallery');
$testimonials_count = safeCount($conn, 'testimonials');
?>

<!DOCTYPE html>
<html lang="<?php echo $lang; ?>" dir="<?php echo $t['dir']; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <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.0.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&display=swap" rel="stylesheet">
    
    <title><?php echo $t['dashboard']; ?> | <?php echo $t['institute_name']; ?></title>
    <style>
        :root {
            --primary-gold: #d4af37;
            --charcoal: #2d3436;
            --bg-cream: #fcf5e5; 
            --sidebar-width: 280px;
        }

        body { 
            font-family: 'Cairo', sans-serif; 
            background: linear-gradient(rgba(252, 245, 229, 0.9), rgba(252, 245, 229, 0.9)), 
                        url('../pngegg2.jpg') fixed; 
            background-size: cover;
            color: #333;
            margin: 0;
            overflow-x: hidden;
        }

        /* --- Sidebar Style (نفس تصميم صفحة الدورات) --- */
        .sidebar { 
            width: var(--sidebar-width); height: 100vh; 
            background: linear-gradient(180deg, var(--charcoal), #1a1a1a); 
            border-<?php echo ($t['dir'] == 'rtl' ? 'left' : 'right'); ?>: 3px solid var(--primary-gold);
            position: fixed; top: 0; <?php echo ($t['dir'] == 'rtl' ? 'right' : 'left'); ?>: 0; 
            z-index: 2000; transition: all 0.3s ease;
        }
        
        .main-content { 
            margin-<?php echo ($t['dir'] == 'rtl' ? 'right' : 'left'); ?>: var(--sidebar-width); 
            padding: 40px; min-height: 100vh; transition: 0.3s;
        }

        @media (max-width: 992px) {
            .sidebar { transform: translateX(<?php echo ($t['dir'] == 'rtl' ? '100%' : '-100%'); ?>); }
            .sidebar.active { transform: translateX(0); }
            .main-content { margin: 0 !important; padding: 15px; padding-top: 80px; }
            .mobile-header { display: flex !important; }
        }

        .mobile-header {
            display: none; position: fixed; top: 0; width: 100%; height: 65px;
            background: var(--charcoal); z-index: 1040; align-items: center; 
            justify-content: space-between; padding: 0 20px; border-bottom: 2px solid var(--primary-gold);
        }

        .nav-link { 
            color: rgba(255,255,255,0.7); margin: 5px 15px; 
            border-radius: 10px; transition: 0.3s; padding: 10px 15px;
            font-weight: 500; text-decoration: none; display: block;
        }
        .nav-link:hover, .nav-link.active { background: var(--primary-gold); color: #1a1a1a !important; font-weight: bold; }

       .welcome-box {
    /* إضافة الخلفية المزخرفة مع تدرج لوني لضمان وضوح النص الأبيض */
    background: linear-gradient(45deg, rgba(45, 52, 54, 0.95), rgba(26, 26, 26, 0.85)), 
                url('../pngegg2.jpg');
    background-size: cover;
    background-position: center;
    color: white; 
    border-radius: 20px; 
    padding: 40px;
    border: 1px solid var(--primary-gold);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    position: relative; 
    overflow: hidden;
}
/* تكبير وتوضيح الخطوط */
.welcome-box h1, .welcome-box h4 {
    font-weight: 800 !important; /* خط عريض جداً للعنوان */
    letter-spacing: 0.5px;
    margin-bottom: 10px;
}
.welcome-box p {
    font-weight: 600 !important; /* خط واضح للمسج */
    font-size: 1.1rem;
    opacity: 0.9;
}
        /* Stats Cards */
        .stat-card { 
            border: none; border-radius: 15px; background: white; 
            box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; 
            border-bottom: 3px solid var(--primary-gold);
        }
        .icon-circle {
            width: 45px; height: 45px; background: #f8f9fa; color: var(--primary-gold);
            border-radius: 10px; display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem; border: 1px solid rgba(212, 175, 55, 0.2);
        }

        .lang-link { color: #fff; text-decoration: none; font-size: 13px; opacity: 0.6; }
        .lang-link.active { opacity: 1; color: var(--primary-gold); font-weight: bold; }

        .table-custom { background: white; border-radius: 15px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
    </style>
</head>
<body>

<div class="mobile-header shadow">
    <h6 class="mb-0 fw-bold text-white"><?php echo $t['institute_name']; ?></h6>
    <button class="btn text-warning" onclick="toggleSidebar()"><i class="fas fa-bars fa-lg"></i></button>
</div>

<div class="sidebar shadow" id="sidebar">
    <div class="d-lg-none text-<?php echo ($t['dir'] == 'rtl' ? 'start' : 'end'); ?> p-3">
        <button class="btn text-white" onclick="toggleSidebar()"><i class="fas fa-times fa-lg"></i></button>
    </div>

    <div class="text-center my-3">
        <img src="../logo.png" alt="Logo" style="max-height: 60px;">
        <h6 class="fw-bold mt-2 text-white px-2"><?php echo $t['institute_name']; ?></h6>
        <div class="mt-2 small">
            <a href="?lang=ar" class="lang-link <?php echo $lang=='ar'?'active':''; ?>">AR</a> |
            <a href="?lang=tr" class="lang-link <?php echo $lang=='tr'?'active':''; ?>">TR</a> |
            <a href="?lang=en" class="lang-link <?php echo $lang=='en'?'active':''; ?>">EN</a>
        </div>
    </div>
    
    <nav class="nav flex-column">
        <?php $current_page = basename($_SERVER['PHP_SELF']); ?>
        <a class="nav-link <?php echo $current_page == 'index.php' ? 'active' : ''; ?>" href="index.php"><i class="fas fa-th-large mx-2"></i> <?php echo $t['dashboard']; ?></a>
        <a class="nav-link <?php echo $current_page == 'courses.php' ? 'active' : ''; ?>" href="courses.php"><i class="fas fa-book-open mx-2"></i> <?php echo $t['courses']; ?></a>
        <a class="nav-link <?php echo $current_page == 'slider.php' ? 'active' : ''; ?>" href="slider.php"><i class="fas fa-images mx-2"></i> <?php echo $t['slider']; ?></a>
        <a class="nav-link <?php echo $current_page == 'testimonials.php' ? 'active' : ''; ?>" href="testimonials.php"><i class="fas fa-comment-dots mx-2"></i> <?php echo $t['testimonials']; ?></a>
        <a class="nav-link <?php echo $current_page == 'gallery.php' ? 'active' : ''; ?>" href="gallery.php"><i class="fas fa-photo-video mx-2"></i> <?php echo $t['gallery']; ?></a>
        <a class="nav-link <?php echo $current_page == 'subscribers.php' ? 'active' : ''; ?>" href="subscribers.php"><i class="fas fa-envelope-open-text mx-2"></i> <?php echo $t['subscribers']; ?></a>
        <hr class="mx-3 my-2" style="color: rgba(255,255,255,0.2);">
        <a class="nav-link text-danger fw-bold" href="logout.php"><i class="fas fa-power-off mx-2"></i> <?php echo $t['logout']; ?></a>
    </nav>
</div>

<div class="main-content">
    <div class="welcome-box mb-4">
        <h4 class="fw-bold mb-1"><?php echo $t['admin_panel']; ?></h4>
        <p class="m-0 opacity-75 small"><?php echo $t['welcome_msg']; ?></p>
    </div>

    <div class="row g-3">
        <div class="col-6 col-md-3">
            <div class="card stat-card p-3">
                <div class="d-flex flex-column align-items-center text-center">
                    <div class="icon-circle mb-2"><i class="fas fa-graduation-cap"></i></div>
                    <h2 class="fw-bold m-0 h4"><?php echo $courses_count; ?></h2>
                    <small class="text-muted fw-bold" style="font-size: 0.9rem;"><?php echo $t['total_courses']; ?></small>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-3">
            <div class="card stat-card p-3">
                <div class="d-flex flex-column align-items-center text-center">
                    <div class="icon-circle mb-2"><i class="fas fa-award"></i></div>
                    <h2 class="fw-bold m-0 h4"><?php echo $testimonials_count; ?></h2>
                    <small class="text-muted fw-bold" style="font-size: 0.9rem;"><?php echo $t['success_stories']; ?></small>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-3">
            <div class="card stat-card p-3">
                <div class="d-flex flex-column align-items-center text-center">
                    <div class="icon-circle mb-2"><i class="fas fa-users"></i></div>
                    <h2 class="fw-bold m-0 h4"><?php echo $subs_count; ?></h2>
                    <small class="text-muted fw-bold" style="font-size: 0.9rem;"><?php echo $t['active_subs']; ?></small>
                </div>
            </div>
        </div>

        <div class="col-6 col-md-3">
            <div class="card stat-card p-3">
                <div class="d-flex flex-column align-items-center text-center">
                    <div class="icon-circle mb-2"><i class="fas fa-image"></i></div>
                    <h2 class="fw-bold m-0 h4"><?php echo $gallery_count; ?></h2>
                    <small class="text-muted fw-bold" style="font-size: 0.9rem;"><?php echo $t['images']; ?></small>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-4 table-custom border-0 shadow-sm">
        <div class="p-3 d-flex justify-content-between align-items-center bg-white border-bottom">
            <h6 class="fw-bold m-0"><i class="fas fa-bolt text-warning me-2"></i> <?php echo $t['latest_news']; ?></h6>
            <a href="subscribers.php" class="btn btn-sm btn-dark px-3 rounded-pill" style="font-size: 0.7rem;"><?php echo $t['view_all']; ?></a>
        </div>
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle" style="font-size: 0.85rem;">
                <thead class="bg-light">
                    <tr class="text-center">
                        <th class="py-2"><?php echo $t['email']; ?></th>
                        <th class="py-2 d-none d-sm-table-cell"><?php echo $t['sub_date']; ?></th>
                        <th class="py-2"><?php echo $t['status']; ?></th>
                    </tr>
                </thead>
                <tbody class="text-center">
                    <?php
                    $latest = $conn->query("SELECT * FROM newsletter ORDER BY id DESC LIMIT 5");
                    while($row = $latest->fetch_assoc()):
                    ?>
                    <tr>
                        <td class="py-2 fw-bold"><?php echo $row['email']; ?></td>
                        <td class="text-muted d-none d-sm-table-cell"><?php echo date('d M', strtotime($row['subscribed_at'])); ?></td>
                        <td><span class="badge bg-light text-success border" style="font-size: 0.7rem;"><?php echo $t['active_now']; ?></span></td>
                    </tr>
                    <?php endwhile; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    function toggleSidebar() {
        document.getElementById('sidebar').classList.toggle('active');
    }
    
    // إغلاق السايدبار عند الضغط خارجه في الموبايل
    document.addEventListener('click', function(event) {
        const sidebar = document.getElementById('sidebar');
        const headerBtn = document.querySelector('.mobile-header .btn');
        if (window.innerWidth < 992 && sidebar.classList.contains('active')) {
            if (!sidebar.contains(event.target) && !headerBtn.contains(event.target)) {
                sidebar.classList.remove('active');
            }
        }
    });
</script>
</body>
</html>