<?php
if (!isset($_SESSION['user_id'])) {
header('Location: index.php?page=login');
exit;
}

// Get counts from database
$userCount 0;
$eventCount 0;
$planCount 0;
$extraCount 0;

// Count users
$query  "SELECT COUNT(*) as count FROM CINE_Person";
$result mysqli_query($dbc$query);
if (
$result) {
$row       mysqli_fetch_assoc($result);
$userCount $row['count'];
mysqli_free_result($result);
}

// Count events
$query  "SELECT COUNT(*) as count FROM CINE_Plage";
$result mysqli_query($dbc$query);
if (
$result) {
$row        mysqli_fetch_assoc($result);
$eventCount $row['count'];
mysqli_free_result($result);
}

// Count plans
$query  "SELECT COUNT(*) as count FROM CINE_Plan";
$result mysqli_query($dbc$query);
if (
$result) {
$row       mysqli_fetch_assoc($result);
$planCount $row['count'];
mysqli_free_result($result);
}

// Count extras
$query  "SELECT COUNT(*) as count FROM CINE_Extra";
$result mysqli_query($dbc$query);
if (
$result) {
$row        mysqli_fetch_assoc($result);
$extraCount $row['count'];
mysqli_free_result($result);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard - Ciné Le Paris</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;500;600&display=swap">
<link rel="stylesheet" href="assets/css/dashboard.css">
</head>
<body>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
    <div class="sidebar-header">
        <h1 class="sidebar-title">Admin Panel</h1>
        <p class="sidebar-subtitle">Ciné Le Paris</p>
    </div>
    
    <nav class="sidebar-nav">
        <a href="index.php?page=dashboard" class="nav-item active">
            <span class="material-symbols-outlined nav-icon">dashboard</span>
            Dashboard
        </a>
        <a href="index.php?page=profile" class="nav-item">
            <span class="material-symbols-outlined nav-icon">person</span>
            Profile
        </a>
        <a href="index.php?page=persons" class="nav-item">
            <span class="material-symbols-outlined nav-icon">group</span>
            Manage Users
        </a>
        <a href="index.php?page=films" class="nav-item">
            <span class="material-symbols-outlined nav-icon">movie</span>
            Manage Films
        </a>
        <a href="index.php?page=calendar" class="nav-item">
            <span class="material-symbols-outlined nav-icon">calendar_month</span>
            Calendar
        </a>
        <a href="index.php?page=plans" class="nav-item">
            <span class="material-symbols-outlined nav-icon">event_note</span>
            Plans
        </a>
        <a href="index.php?page=planresponse" class="nav-item">
            <span class="material-symbols-outlined nav-icon">assignment</span>
            Plan Responses
        </a>
        <a href="index.php?page=extras" class="nav-item">
            <span class="material-symbols-outlined nav-icon">category</span>
            Activity Types
        </a>
        <a href="index.php?page=supervisedplages" class="nav-item">
            <span class="material-symbols-outlined nav-icon">fact_check</span>
            My Supervised Shifts
        </a>
        <a href="index.php" class="nav-item">
            <span class="material-symbols-outlined nav-icon">home</span>
            Back to Site
        </a>
    </nav>
    
    <div class="sidebar-footer">
        &copy; <?php echo date('Y'); ?> Ciné Le Paris
    </div>
</div>

<!-- Overlay for mobile -->
<div class="overlay" id="overlay"></div>

<!-- Main Content -->
<div class="main">
    <header class="header">
        <div class="header-title-container">
            <button class="menu-toggle" id="menuToggle">
                <span class="material-symbols-outlined">menu</span>
            </button>
            <h1 class="header-title">Admin Dashboard</h1>
        </div>
        
        <div class="header-actions">
            <a href="index.php" class="btn btn-outline">
                <span class="material-symbols-outlined btn-icon">arrow_back</span>
                Back to Site
            </a>
        </div>
    </header>
    
    <!-- Stats Overview -->
    <div class="stats">
        <div class="stat-card">
            <div class="stat-icon primary">
                <span class="material-symbols-outlined">person</span>
            </div>
            <div class="stat-data">
                <div class="stat-value"><?php echo $userCount?></div>
                <div class="stat-label">Users</div>
            </div>
            <a href="index.php?page=persons" class="stat-link" title="Manage Users">
                <span class="material-symbols-outlined">arrow_forward</span>
            </a>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon success">
                <span class="material-symbols-outlined">calendar_month</span>
            </div>
            <div class="stat-data">
                <div class="stat-value"><?php echo $eventCount?></div>
                <div class="stat-label">Events</div>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon info">
                <span class="material-symbols-outlined">event_note</span>
            </div>
            <div class="stat-data">
                <div class="stat-value"><?php echo $planCount?></div>
                <div class="stat-label">Plans</div>
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon warning">
                <span class="material-symbols-outlined">category</span>
            </div>
            <div class="stat-data">
                <div class="stat-value"><?php echo $extraCount?></div>
                <div class="stat-label">Activity Types</div>
            </div>
        </div>
    </div>
    
    <!-- Main Cards -->
    <div class="grid">
        <!-- Profile Card -->
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Profile Management</h2>
                <div class="card-icon profile">
                    <span class="material-symbols-outlined">person</span>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">Manage user profiles, account settings, and personal information. Update user details and preferences.</p>
            </div>
            <div class="card-footer">
                <a href="index.php?page=profile" class="btn">
                    <span class="material-symbols-outlined btn-icon">arrow_forward</span>
                    Go to Profiles
                </a>
            </div>
        </div>

        <!-- Users Management Card -->
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Users Management</h2>
                <div class="card-icon" style="background-color: rgba(156, 39, 176, 0.15); color: #9c27b0;">
                    <span class="material-symbols-outlined">group</span>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">Manage all users, volunteers and administrators. Add new users, update information, and manage access roles.</p>
            </div>
            <div class="card-footer">
                <a href="index.php?page=persons" class="btn">
                    <span class="material-symbols-outlined btn-icon">arrow_forward</span>
                    Manage Users
                </a>
            </div>
        </div>
        
        <!-- Films Management Card -->
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Films Management</h2>
                <div class="card-icon" style="background-color: rgba(233, 30, 99, 0.15); color: #e91e63;">
                    <span class="material-symbols-outlined">movie</span>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">Manage films, upload posters, and process KDM files. Add new films, update information, and manage screening schedules.</p>
            </div>
            <div class="card-footer">
                <a href="index.php?page=films" class="btn">
                    <span class="material-symbols-outlined btn-icon">arrow_forward</span>
                    Manage Films
                </a>
            </div>
        </div>
        
        <!-- Calendar Card -->
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Calendar</h2>
                <div class="card-icon calendar">
                    <span class="material-symbols-outlined">calendar_month</span>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">Schedule and manage events, film screenings, and special programs. View upcoming events and manage registrations.</p>
            </div>
            <div class="card-footer">
                <a href="index.php?page=calendar" class="btn">
                    <span class="material-symbols-outlined btn-icon">arrow_forward</span>
                    Go to Calendar
                </a>
            </div>
        </div>

        
        <!-- Plans Card -->
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Calendar Plans</h2>
                <div class="card-icon plans">
                    <span class="material-symbols-outlined">event_note</span>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">View and manage calendar plans, set active planning periods, and organize scheduling timeframes.</p>
            </div>
            <div class="card-footer">
                <a href="index.php?page=plans" class="btn">
                    <span class="material-symbols-outlined btn-icon">arrow_forward</span>
                    Go to Plans
                </a>
            </div>
        </div>

        <!-- Plan Responses Card -->
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Plan Responses</h2>
                <div class="card-icon" style="background-color: rgba(63, 81, 181, 0.15); color: #3f51b5;">
                    <span class="material-symbols-outlined">assignment</span>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">View active plans with their plages and participant responses. Monitor volunteer registrations and answers.</p>
            </div>
            <div class="card-footer">
                <a href="index.php?page=planresponse" class="btn">
                    <span class="material-symbols-outlined btn-icon">arrow_forward</span>
                    View Responses
                </a>
            </div>
        </div>

        <!-- Activity Types Card -->
        <div class="card">
            <div class="card-header">
                <h2 class="card-title">Activity Types</h2>
                <div class="card-icon" style="background-color: rgba(255, 193, 7, 0.15); color: #ffc107;">
                    <span class="material-symbols-outlined">category</span>
                </div>
            </div>
            <div class="card-body">
                <p class="card-text">Manage activity types and their default extra times for calendar events and scheduling.</p>
            </div>
            <div class="card-footer">
                <a href="index.php?page=extras" class="btn">
                    <span class="material-symbols-outlined btn-icon">arrow_forward</span>
                    Manage Activities
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    // Mobile menu toggle
    document.addEventListener('DOMContentLoaded', function() {
        const menuToggle = document.getElementById('menuToggle');
        const sidebar    = document.getElementById('sidebar');
        const overlay    = document.getElementById('overlay');
        
        menuToggle.addEventListener('click', function() {
            sidebar.classList.toggle('active');
            overlay.classList.toggle('active');
        });
        
        overlay.addEventListener('click', function() {
            sidebar.classList.remove('active');
            overlay.classList.remove('active');
        });
        
        // Close sidebar when window is resized to desktop size
        window.addEventListener('resize', function() {
            if (window.innerWidth > 992) {
                sidebar.classList.remove('active');
                overlay.classList.remove('active');
            }
        });
    });
</script>
</body>
</html>