<?php
session_start();
require_once('../config/db.php'); 

// ✅ استدعاء الهيدر أولاً لتعريف نظام الترجمة والاتجاهات
include('../includes/header.php');

if (!isset($_SESSION['user'])) {
    header('Location: ../auth/login.php');
    exit;
}

// جلب بيانات المستخدم المسجل دخوله للناف بار بشكل آمن
$nav_user_name = 'زائر';
$nav_user_role = 'guest';

if (isset($_SESSION['user']['id'])) {
    try {
        $stmt_nav = $conn->prepare("SELECT full_name, role FROM users WHERE id = :id");
        $stmt_nav->execute(['id' => $_SESSION['user']['id']]);
        $db_nav_user = $stmt_nav->fetch(PDO::FETCH_ASSOC);
        $stmt_nav->closeCursor();

        if ($db_nav_user) {
            $nav_user_name = $db_nav_user['full_name'];
            $nav_user_role = $db_nav_user['role'];
        }
    } catch (PDOException $e) { }
}
?>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap" rel="stylesheet">

<style>
    body { font-family: 'Cairo', sans-serif; }
    .card-hover { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    .card-hover:hover { transform: translateY(-10px); }
    .icon-box { transition: all 0.3s ease; }
    .card-hover:hover .icon-box { transform: scale(1.1); }
</style>

<?php include('../includes/navbar.php'); ?>

<div class="min-h-screen pb-16 bg-gray-50 dark:bg-gray-900" dir="<?= $dir ?>">
    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
        
        <div class="text-center mb-16">
            <h2 class="text-4xl font-black text-indigo-900 dark:text-white mb-4">
                <i class="fas fa-chart-line <?= $dir == 'rtl' ? 'ml-3' : 'mr-3' ?> text-indigo-600"></i>
                <?= __('reports_center_title') ?>
            </h2>
            <p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
                <?= __('reports_center_subtitle') ?>
            </p>
        </div>

       <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-6">
    
        <a href="attendance_report.php" class="card-hover group bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-xl border-t-8 border-emerald-500 text-center relative overflow-hidden">
            <div class="icon-box w-20 h-20 bg-emerald-50 dark:bg-emerald-900/20 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-emerald-500 transition-colors">
                <i class="fas fa-user-check text-4xl text-emerald-600 group-hover:text-white transition-colors"></i>
            </div>
            <h3 class="text-xl font-extrabold text-gray-800 dark:text-gray-100"><?= __('attendance_report') ?></h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-3 leading-relaxed"><?= __('attendance_report_desc') ?></p>
        </a>

        <a href="course_report.php" class="card-hover group bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-xl border-t-8 border-purple-500 text-center relative overflow-hidden">
            <div class="icon-box w-20 h-20 bg-purple-50 dark:bg-purple-900/20 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-purple-500 transition-colors">
                <i class="fas fa-graduation-cap text-4xl text-purple-600 group-hover:text-white transition-colors"></i>
            </div>
            <h3 class="text-xl font-extrabold text-gray-800 dark:text-gray-100"><?= __('courses_report') ?></h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-3 leading-relaxed"><?= __('courses_report_desc') ?></p>
        </a>

        <a href="payments_report.php" class="card-hover group bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-xl border-t-8 border-blue-500 text-center relative overflow-hidden">
            <div class="icon-box w-20 h-20 bg-blue-50 dark:bg-blue-900/20 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-blue-500 transition-colors">
                <i class="fas fa-receipt text-4xl text-blue-600 group-hover:text-white transition-colors"></i>
            </div>
            <h3 class="text-xl font-extrabold text-gray-800 dark:text-gray-100"><?= __('payments_report') ?></h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-3 leading-relaxed"><?= __('payments_report_desc') ?></p>
        </a>

        <a href="expenses_report.php" class="card-hover group bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-xl border-t-8 border-amber-500 text-center relative overflow-hidden">
            <div class="icon-box w-20 h-20 bg-amber-50 dark:bg-amber-900/20 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-amber-500 transition-colors">
                <i class="fas fa-wallet text-4xl text-amber-600 group-hover:text-white transition-colors"></i>
            </div>
            <h3 class="text-xl font-extrabold text-gray-800 dark:text-gray-100"><?= __('expenses_report') ?></h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-3 leading-relaxed"><?= __('expenses_report_desc') ?></p>
        </a>

        <a href="remaining_report.php" class="card-hover group bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-xl border-t-8 border-red-500 text-center relative overflow-hidden">
            <div class="icon-box w-20 h-20 bg-red-50 dark:bg-red-900/20 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-red-500 transition-colors">
                <i class="fas fa-hand-holding-usd text-4xl text-red-600 group-hover:text-white transition-colors"></i>
            </div>
            <h3 class="text-xl font-extrabold text-gray-800 dark:text-gray-100"><?= __('remaining_payments') ?></h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-3 leading-relaxed"><?= __('remaining_payments_desc') ?></p>
        </a>

        <a href="financial_claim.php" class="card-hover group bg-white dark:bg-gray-800 p-8 rounded-3xl shadow-xl border-t-8 border-teal-500 text-center relative overflow-hidden">
            <div class="icon-box w-20 h-20 bg-teal-50 dark:bg-teal-900/20 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-teal-500 transition-colors">
                <i class="fas fa-file-invoice-dollar text-4xl text-teal-600 group-hover:text-white transition-colors"></i>
            </div>
            <h3 class="text-xl font-extrabold text-gray-800 dark:text-gray-100"><?= __('financial_claim') ?></h3>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-3 leading-relaxed"><?= __('financial_claim_desc') ?></p>
        </a>

    </div>

        <div class="mt-20 text-center">
            <a href="../dashboard.php" class="inline-flex items-center px-8 py-3.5 bg-indigo-600 text-white font-bold rounded-2xl hover:bg-indigo-700 hover:shadow-lg hover:shadow-indigo-200 transition-all duration-300">
                <i class="fas fa-home <?= $dir == 'rtl' ? 'ml-2' : 'mr-2' ?>"></i> 
                <?= __('back_to_dashboard') ?>
            </a>
        </div>

    </div>
</div>

<?php include('../includes/footer.php'); ?>