<?php
/**
 * sidebar.php - القائمة الجانبية الموحدة
 * @version 2.1.0
 */

// تحديد الصفحة الحالية
$current_page = basename($_SERVER['PHP_SELF']);
$admin_name = $_SESSION['admin_name'] ?? 'Admin';
?>

<!-- القائمة الجانبية -->
<div class="sidebar" id="sidebar">
    <!-- الهيدر -->
    <div class="sidebar-header">
        <div class="logo-container">
            <div class="logo-icon">
                <i class="bi bi-shop"></i>
            </div>
            <div class="logo-text">
                <h4>Max Admin</h4>
                <small>نظام إدارة المطعم</small>
            </div>
        </div>
        <button class="sidebar-close d-md-none" id="sidebarClose" aria-label="إغلاق القائمة">
            <i class="bi bi-x-lg"></i>
        </button>
    </div>

    <!-- معلومات المستخدم للجوال -->
    <div class="mobile-user-info d-md-none">
        <div class="d-flex align-items-center gap-3">
            <div class="user-avatar">
                <i class="bi bi-person-circle"></i>
            </div>
            <div class="user-info">
                <h6 class="mb-1"><?php echo htmlspecialchars($admin_name); ?></h6>
                <small class="text-white-50">مدير النظام</small>
            </div>
        </div>
    </div>

    <!-- روابط القائمة -->
    <nav class="nav flex-column">
        <a class="nav-link <?php echo $current_page == 'dashboard.php' ? 'active' : ''; ?>" 
           href="dashboard.php"
           title="لوحة التحكم">
            <i class="bi bi-speedometer2"></i>
            <span>لوحة التحكم</span>
            <?php if ($current_page == 'dashboard.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
        
        <a class="nav-link <?php echo $current_page == 'meals.php' ? 'active' : ''; ?>" 
           href="meals.php"
           title="إدارة الوجبات">
            <i class="bi bi-egg-fried"></i>
            <span>إدارة الوجبات</span>
            <?php if ($current_page == 'meals.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
        
        <a class="nav-link <?php echo $current_page == 'categories.php' ? 'active' : ''; ?>" 
           href="categories.php"
           title="التصنيفات">
            <i class="bi bi-tags"></i>
            <span>التصنيفات</span>
            <?php if ($current_page == 'categories.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
        
        <a class="nav-link <?php echo $current_page == 'captains.php' ? 'active' : ''; ?>" 
           href="captains.php"
           title="الكباتن">
            <i class="bi bi-person-badge"></i>
            <span>الكباتن</span>
            <?php if ($current_page == 'captains.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
        
        <a class="nav-link <?php echo $current_page == 'orders.php' ? 'active' : ''; ?>" 
           href="orders.php"
           title="الطلبات">
            <i class="bi bi-cart"></i>
            <span>الطلبات</span>
            <?php if ($current_page == 'orders.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
                <a class="nav-link <?php echo $current_page == 'cashiers.php' ? 'active' : ''; ?>" 
           href="cashiers.php"
           title="الكاشير">
            <i class="bi bi-people"></i>
            <span>الكاشير</span>
            <?php if ($current_page == 'cashiers.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
        <a class="nav-link <?php echo $current_page == 'sliders.php' ? 'active' : ''; ?>" 
           href="sliders.php"
           title="العروض">
            <i class="bi bi-images"></i>
            <span>العروض</span>
            <?php if ($current_page == 'sliders.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
        
        <a class="nav-link <?php echo $current_page == 'direct_discounts.php' ? 'active' : ''; ?>" 
           href="direct_discounts.php"
           title="التخفيضات">
            <i class="bi bi-percent"></i>
            <span>التخفيضات</span>
            <?php if ($current_page == 'direct_discounts.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
        
        <a class="nav-link <?php echo $current_page == 'admin_support.php' ? 'active' : ''; ?>" 
           href="admin_support.php"
           title="الدعم">
            <i class="bi bi-headset"></i>
            <span>الدعم</span>
            <?php if ($current_page == 'admin_support.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
        
        <a class="nav-link <?php echo $current_page == 'reports.php' ? 'active' : ''; ?>" 
           href="reports.php"
           title="التقارير">
            <i class="bi bi-graph-up"></i>
            <span>التقارير</span>
            <?php if ($current_page == 'reports.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
        
        <a class="nav-link <?php echo $current_page == 'users.php' ? 'active' : ''; ?>" 
           href="users.php"
           title="المستخدمين">
            <i class="bi bi-people"></i>
            <span>المستخدمين</span>
            <?php if ($current_page == 'users.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
        
        <a class="nav-link <?php echo $current_page == 'settings.php' ? 'active' : ''; ?>" 
           href="settings.php"
           title="الإعدادات">
            <i class="bi bi-gear"></i>
            <span>الإعدادات</span>
            <?php if ($current_page == 'settings.php'): ?>
                <span class="active-indicator"></span>
            <?php endif; ?>
        </a>
        
        <div class="sidebar-divider"></div>
        
        <a class="nav-link text-danger" 
           href="logout.php"
           title="تسجيل الخروج">
            <i class="bi bi-box-arrow-left"></i>
            <span>تسجيل الخروج</span>
        </a>
    </nav>

    <!-- الفوتر -->
    <div class="sidebar-footer">
        <div class="version-info">
            <small>الإصدار 2.1.0</small>
        </div>
    </div>
</div>

<!-- طبقة التعتيم للجوال -->
<div class="sidebar-overlay" id="sidebarOverlay"></div>

<!-- زر فتح القائمة للجوال -->
<button class="menu-toggle-btn d-md-none" id="menuToggle" aria-label="فتح القائمة">
    <i class="bi bi-list"></i>
</button>

<style>
/* ===== تنسيقات القائمة الجانبية ===== */
:root {
    --primary: #F57C00;
    --primary-dark: #E65100;
    --primary-light: #FFB74D;
    --sidebar-bg: linear-gradient(180deg, #2c3e50 0%, #34495e 100%);
}

/* تأكد من أن Bootstrap Icons محملة */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

.sidebar {
    background: var(--sidebar-bg);
    color: white;
    width: 280px;
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1050;
    box-shadow: -2px 0 20px rgba(0,0,0,0.15);
    transition: transform 0.3s ease-in-out;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.sidebar::-webkit-scrollbar {
    width: 4px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
}

.sidebar::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

.sidebar-header {
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,0.1);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 45px;
    height: 45px;
    background: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
    box-shadow: 0 4px 10px rgba(245,124,0,0.3);
}

.logo-text h4 {
    margin: 0;
    font-weight: 800;
    font-size: 1.2rem;
    color: white;
}

.logo-text small {
    color: rgba(255,255,255,0.6);
    font-size: 0.7rem;
}

.sidebar-close {
    background: rgba(255,255,255,0.1);
    border: none;
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}

.sidebar-close:hover,
.sidebar-close:active {
    background: rgba(255,255,255,0.2);
}

.mobile-user-info {
    padding: 1rem;
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.user-avatar {
    width: 45px;
    height: 45px;
    background: var(--primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.user-info h6 {
    margin: 0;
    color: white;
    font-weight: 600;
}

.user-info small {
    color: rgba(255,255,255,0.6);
}

.sidebar .nav {
    flex: 1;
    padding: 1rem 0;
}

.sidebar .nav-link {
    color: rgba(255,255,255,0.7);
    padding: 12px 20px;
    margin: 4px 12px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s ease;
    position: relative;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.sidebar .nav-link i {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
    color: rgba(255,255,255,0.5);
    transition: all 0.2s;
}

.sidebar .nav-link span {
    flex: 1;
    font-size: 0.95rem;
}

.sidebar .nav-link:hover {
    background: rgba(255,255,255,0.1);
    color: white;
    transform: translateX(-5px);
}

.sidebar .nav-link:hover i {
    color: var(--primary);
}

.sidebar .nav-link.active {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 15px rgba(245,124,0,0.3);
}

.sidebar .nav-link.active i {
    color: white;
}

.sidebar .nav-link.active .active-indicator {
    position: absolute;
    right: -8px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background: white;
    border-radius: 4px;
}

.sidebar .nav-link.text-danger {
    color: #ff6b6b !important;
}

.sidebar .nav-link.text-danger:hover {
    background: rgba(255,107,107,0.1);
}

.sidebar-divider {
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 1rem 20px;
}

.sidebar-footer {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(3px);
    z-index: 1040;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.show {
    display: block !important;
    opacity: 1;
}

.menu-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(245,124,0,0.3);
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    z-index: 9999;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.menu-toggle-btn:active {
    transform: scale(0.95);
    background: var(--primary-dark);
}

/* ===== تحسينات الجوال ===== */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(100%);
        width: 85%;
        max-width: 320px;
        z-index: 99999;
    }
    
    .sidebar.show {
        transform: translateX(0) !important;
    }
    
    .menu-toggle-btn {
        display: flex !important;
    }
    
    .sidebar .nav-link {
        padding: 15px 20px;
        margin: 2px 8px;
    }
    
    .sidebar .nav-link i {
        font-size: 1.3rem;
    }
    
    .sidebar .nav-link span {
        font-size: 1rem;
    }
    
    .sidebar-overlay.show {
        z-index: 99998;
    }
    
    /* تحسين منطقة النقر */
    .nav-link, 
    .sidebar-close,
    .menu-toggle-btn {
        min-height: 48px;
    }
}

@media (max-width: 360px) {
    .sidebar {
        width: 90%;
    }
    
    .logo-text h4 {
        font-size: 1rem;
    }
    
    .logo-text small {
        font-size: 0.65rem;
    }
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.sidebar.show {
    animation: slideIn 0.3s ease forwards;
}
</style>

<script>
// انتظار تحميل الصفحة بالكامل
(function() {
    // دالة التأكد من تحميل العناصر
    function initSidebar() {
        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebarOverlay');
        const menuToggle = document.getElementById('menuToggle');
        const sidebarClose = document.getElementById('sidebarClose');
        
        if (!sidebar || !overlay || !menuToggle) {
            // إذا لم توجد العناصر، حاول مرة أخرى بعد قليل
            setTimeout(initSidebar, 100);
            return;
        }
        
        console.log('Sidebar initialized'); // للتأكد من عمل الكود
        
        // دالة فتح القائمة
        function openSidebar(e) {
            if (e) {
                e.preventDefault();
                e.stopPropagation();
            }
            sidebar.classList.add('show');
            overlay.classList.add('show');
            document.body.style.overflow = 'hidden';
            document.body.style.position = 'fixed';
            document.body.style.width = '100%';
            console.log('Sidebar opened'); // للتأكد من عمل الدالة
        }
        
        // دالة إغلاق القائمة
        function closeSidebar(e) {
            if (e) {
                e.preventDefault();
                e.stopPropagation();
            }
            sidebar.classList.remove('show');
            overlay.classList.remove('show');
            document.body.style.overflow = '';
            document.body.style.position = '';
            document.body.style.width = '';
            console.log('Sidebar closed'); // للتأكد من عمل الدالة
        }
        
        // إضافة مستمعي الأحداث للأزرار
        menuToggle.onclick = openSidebar;
        menuToggle.ontouchstart = function(e) {
            e.preventDefault();
            openSidebar(e);
        };
        
        if (sidebarClose) {
            sidebarClose.onclick = closeSidebar;
            sidebarClose.ontouchstart = function(e) {
                e.preventDefault();
                closeSidebar(e);
            };
        }
        
        overlay.onclick = closeSidebar;
        overlay.ontouchstart = function(e) {
            e.preventDefault();
            closeSidebar(e);
        };
        
        // إغلاق القائمة عند الضغط على الروابط (للتجربة فقط)
        const navLinks = document.querySelectorAll('.sidebar .nav-link');
        navLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                // لا نغلق القائمة فوراً، نتركها مفتوحة حتى يتم التنقل
                console.log('Link clicked:', this.getAttribute('href'));
            });
        });
        
        // منع تمرير الصفحة خلف القائمة
        sidebar.addEventListener('touchmove', function(e) {
            if (sidebar.classList.contains('show')) {
                e.stopPropagation();
            }
        }, { passive: false });
        
        overlay.addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, { passive: false });
        
        // إغلاق القائمة عند تغيير حجم النافذة
        window.addEventListener('resize', function() {
            if (window.innerWidth > 768 && sidebar.classList.contains('show')) {
                closeSidebar();
            }
        });
    }
    
    // بدء التهيئة عندما يكتمل تحميل الصفحة
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSidebar);
    } else {
        initSidebar();
    }
})();
</script>