<?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];
?>

<!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">
    <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['subscribers']; ?> | <?php echo $t['institute_name']; ?></title>
    <style>
        :root { 
            --primary-gold: #d4af37; 
            --charcoal: #2d3436; 
            --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;
        }

        /* --- Sidebar & Layout (مطابق تماماً لـ Testimonials) --- */
        .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: 1050; transition: 0.3s;
        }

        .main-content { margin-<?php echo ($t['dir'] == 'rtl' ? 'right' : 'left'); ?>: var(--sidebar-width); padding: 40px; 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: 20px; 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: 4px 15px; border-radius: 12px; padding: 12px; transition: 0.3s; text-decoration: none; display: block; }
        .nav-link:hover, .nav-link.active { background: var(--primary-gold); color: #1a1a1a !important; font-weight: bold; }

        /* --- Card & Table Style (تصميم الراقي) --- */
        .card-custom { background: white; border-radius: 15px; border: none; box-shadow: 0 5px 20px rgba(0,0,0,0.05); overflow: hidden; }
        .card-header-gold { background: var(--charcoal); color: var(--primary-gold); padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
        
        .table thead th { background: #f8f9fa; color: var(--charcoal); border-bottom: 2px solid var(--primary-gold); font-weight: 700; padding: 15px; text-transform: uppercase; font-size: 0.85rem; }
        .table tbody td { padding: 18px 15px; border-bottom: 1px solid rgba(0,0,0,0.02); }
        
        .subscriber-icon { 
            width: 45px; height: 45px; background: #fcf5e5; color: var(--primary-gold); 
            display: flex; align-items: center; justify-content: center; 
            border-radius: 12px; border: 1px solid rgba(212, 175, 55, 0.2);
            margin-<?php echo ($t['dir'] == 'rtl' ? 'left' : 'right'); ?>: 15px; 
        }

        .custom-badge-gold { background: var(--primary-gold); color: #1a1a1a; font-weight: 700; border: none; }
        
        .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; }
    </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="document.getElementById('sidebar').classList.toggle('active')"><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="document.getElementById('sidebar').classList.toggle('active')"><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">
        <a class="nav-link" href="index.php"><i class="fas fa-th-large mx-2"></i> <?php echo $t['dashboard']; ?></a>
        <a class="nav-link" href="courses.php"><i class="fas fa-book-open mx-2"></i> <?php echo $t['courses']; ?></a>
        <a class="nav-link" href="slider.php"><i class="fas fa-images mx-2"></i> <?php echo $t['slider']; ?></a>
        <a class="nav-link" href="testimonials.php"><i class="fas fa-comment-dots mx-2"></i> <?php echo $t['testimonials']; ?></a>
        <a class="nav-link" href="gallery.php"><i class="fas fa-photo-video mx-2"></i> <?php echo $t['gallery']; ?></a>
        <a class="nav-link 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="card-custom shadow-sm mb-4">
        <div class="card-header-gold">
            <h6 class="mb-0 fw-bold">
                <i class="fas fa-envelope-open-text me-2"></i> 
                <?php echo $t['subscribers']; ?>
            </h6>
            
            <span class="badge rounded-pill px-3 py-2 custom-badge-gold shadow-sm">
                <i class="fas fa-users me-1"></i>
                <?php 
                    $count_res = $conn->query("SELECT COUNT(*) as total FROM newsletter");
                    echo $count_res->fetch_assoc()['total']; 
                ?>
                <span class="ms-1" style="font-size: 0.75rem; opacity: 0.9;">
                    <?php echo ($lang == 'ar') ? 'مشترك' : (($lang == 'tr') ? 'Abone' : 'Subscriber'); ?>
                </span>
            </span>
        </div>
        
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead>
                    <tr>
                        <th width="80" class="text-center">#</th>
                        <th><?php echo $t['email']; ?></th>
                        <th width="250" class="text-center"><?php echo $t['sub_date']; ?></th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $res = $conn->query("SELECT * FROM newsletter ORDER BY subscribed_at DESC");
                    if($res->num_rows > 0):
                        $counter = 1;
                        while($row = $res->fetch_assoc()):
                    ?>
                    <tr>
                        <td class="text-center text-muted fw-bold"><?php echo $counter++; ?></td>
                        <td>
                            <div class="d-flex align-items-center">
                                <div class="subscriber-icon shadow-sm">
                                    <i class="fas fa-envelope-open"></i>
                                </div>
                                <div>
                                    <span class="fw-bold text-dark d-block"><?php echo $row['email']; ?></span>
                                    <small class="text-success" style="font-size: 0.7rem;">
                                        <i class="fas fa-check-circle me-1"></i> <?php echo $t['active_now']; ?>
                                    </small>
                                </div>
                            </div>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-light text-dark border px-3 py-2 rounded-pill">
                                <i class="far fa-calendar-alt text-warning me-2"></i>
                                <?php echo date('Y-m-d', strtotime($row['subscribed_at'])); ?>
                                <span class="text-muted ms-1" style="font-size: 0.75rem;">
                                    <?php echo date('H:i', strtotime($row['subscribed_at'])); ?>
                                </span>
                            </span>
                        </td>
                    </tr>
                    <?php 
                        endwhile; 
                    else:
                    ?>
                    <tr>
                        <td colspan="3" class="text-center py-5">
                            <div class="py-4">
                                <i class="fas fa-folder-open fa-4x mb-3 text-light-emphasis d-block"></i>
                                <h6 class="text-muted"><?php 
                                    if($lang == 'ar') echo "لا يوجد مشتركين حالياً";
                                    elseif($lang == 'tr') echo "Şu anda abone bulunmamaktadır";
                                    else echo "No subscribers at the moment";
                                ?></h6>
                            </div>
                        </td>
                    </tr>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>