<?php
session_start();
require_once('../config/db.php');

// ✅ التأكد من استدعاء الهيدر الذي يحتوي على دوال الترجمة __()
include('../includes/header.php'); 

if (!isset($_SESSION['user'])) {
    header('Location: ../auth/login.php');
    exit;
}

// 1. جلب البيانات للفلاتر
$courses = $conn->query("SELECT id, course_name FROM courses ORDER BY course_name ASC")->fetchAll(PDO::FETCH_ASSOC);
$teachers = $conn->query("SELECT id, name FROM teachers ORDER BY name ASC")->fetchAll(PDO::FETCH_ASSOC);

// 2. الاستعلام الأساسي - تم إضافة جلب session_token للتمييز بين الجلسات
$query = "
    SELECT 
        a.attendance_date,
        a.status,
        a.hours_count,
        a.teacher_name,
        a.session_token,
        s.full_name as student_name,
        s.phone as student_phone,
        c.course_name
    FROM attendance a
    JOIN students s ON a.student_id = s.id
    JOIN courses c ON a.course_id = c.id
    ORDER BY a.attendance_date DESC, a.id DESC
";
$stmt = $conn->prepare($query);
$stmt->execute();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<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; background-color: #f3f4f6; margin: 0; padding: 0; }
    
    /* التصميم العلوي */
    .header-card { 
        background: white; border-radius: 15px; padding: 24px; 
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); 
        border-bottom: 8px solid #4f46e5; 
    }

    /* ستايل لوحة الحاسبة الجديدة */
    .calc-card { 
        background: linear-gradient(135deg, #4f46e5 0%, #312e81 100%); 
        color: white; border-radius: 20px; padding: 25px; 
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2);
    }

    /* حاوية الجدول الفخمة */
    .main-table-container {
        background: white;
        border-radius: 20px;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        border: 1px solid #e5e7eb;
        margin-bottom: 50px;
    }

    .table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #reportTable { width: 100%; border-collapse: collapse; min-width: 900px; }
    .table-header { background-color: #4f46e5 !important; color: white !important; }
    .table-header th { padding: 20px; text-align: center !important; font-weight: 800; font-size: 0.9rem; vertical-align: middle; }
    .table-row { transition: all 0.2s; border-bottom: 1px solid #f3f4f6; }
    .table-row:hover { background-color: #f8faff; }
    .table-row td { padding: 16px 20px; vertical-align: middle; text-align: center !important; }

    .status-badge {
        padding: 6px 14px; border-radius: 10px; font-size: 0.85rem;
        font-weight: 800; display: inline-flex; align-items: center; justify-content: center;
        gap: 5px; margin: 0 auto;
    }
    .status-present { background: #dcfce7; color: #15803d; border: 1px solid #bbf7d0; }
    .status-absent { background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; }
    .status-excused { background: #fef9c3; color: #a16207; border: 1px solid #fef08a; }

    .filter-box {
        border: 2px solid #e5e7eb; border-radius: 12px; height: 50px;
        padding: 0 15px; width: 100%; outline: none; font-weight: 600;
    }
    .filter-box:focus { border-color: #4f46e5; }

    @media print {
        @page { size: A4 landscape; margin: 0.5cm; }
        nav, footer, aside, .no-print, button, .navbar, .header-card, .calc-card { display: none !important; }
        body { background: white !important; padding: 0 !important; }
        .main-table-container { box-shadow: none !important; border: 1px solid #ddd !important; border-radius: 0 !important; }
    }
</style>

<div class="no-print">
    <?php include('../includes/navbar.php'); ?>
</div>

<div class="min-h-screen pb-20" dir="<?= $dir ?>">
    <div class="max-w-7xl mx-auto py-8 px-4">

        <div class="header-card mb-8 no-print">
            <div class="flex flex-col md:flex-row justify-between items-center gap-4">
                <div>
                    <h2 class="text-3xl font-black text-gray-800">
                        <i class="fas fa-file-signature text-indigo-600 <?= $dir == 'rtl' ? 'ml-2' : 'mr-2' ?>"></i> <?= __('attendance_reports_title') ?>
                    </h2>
                    <p class="text-gray-500 font-bold text-sm mt-1"><?= __('attendance_reports_subtitle') ?></p>
                </div>
                <div class="flex gap-2">
                    <button onclick="window.print()" class="bg-gray-800 text-white px-6 py-3 rounded-xl font-bold shadow-lg hover:bg-black transition flex items-center">
                        <i class="fas fa-print <?= $dir == 'rtl' ? 'ml-2' : 'mr-2' ?>"></i> <?= __('print_report') ?>
                    </button>
                    <button onclick="exportToExcel()" class="bg-emerald-600 text-white px-6 py-3 rounded-xl font-bold shadow-lg hover:bg-emerald-700 transition flex items-center">
                        <i class="fas fa-file-excel <?= $dir == 'rtl' ? 'ml-2' : 'mr-2' ?>"></i> <?= __('export_excel') ?>
                    </button>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8 no-print">
            <div class="calc-card shadow-xl md:col-span-2 flex flex-col md:flex-row justify-between items-center gap-6">
                <div>
                    <p class="opacity-80 font-bold"><?= __('total_actual_hours') ?></p>
                    <h3 id="actualHoursDisplay" class="text-4xl font-black">0.00 <?= __('hour_unit') ?></h3>
                </div>
                <div class="w-full md:w-40 text-gray-900">
                    <label class="block text-white text-xs font-bold mb-1 text-center"><?= __('hourly_rate_label') ?></label>
                    <input type="number" id="hourlyRate" value="10" class="w-full p-2 rounded-lg text-center font-bold outline-none focus:ring-2 focus:ring-yellow-400">
                </div>
                <div class="text-center md:<?= $dir == 'rtl' ? 'text-left' : 'text-right' ?>">
                    <p class="opacity-80 font-bold"><?= __('total_dues') ?></p>
                    <h3 id="totalMoneyDisplay" class="text-4xl font-black text-yellow-300">0.00</h3>
                </div>
            </div>
            <div class="bg-white p-6 rounded-2xl shadow border-r-8 border-indigo-500 flex flex-col justify-center items-center">
                <p class="text-gray-500 font-bold"><?= __('attendance_records_count') ?></p>
                <h3 id="recordCountDisplay" class="text-4xl font-black text-gray-800 mt-1">0</h3>
            </div>
        </div>

        <div class="bg-white shadow-xl rounded-2xl p-6 mb-8 border-t-4 border-indigo-500 no-print">
            <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-12 gap-4 items-end">
                <div class="md:col-span-2">
                    <label class="block text-xs font-bold text-gray-500 mb-2 <?= $dir == 'rtl' ? 'mr-1' : 'ml-1' ?>"><?= __('from_date') ?></label>
                    <input type="date" id="dateFrom" class="filter-box text-sm">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-xs font-bold text-gray-500 mb-2 <?= $dir == 'rtl' ? 'mr-1' : 'ml-1' ?>"><?= __('to_date') ?></label>
                    <input type="date" id="dateTo" class="filter-box text-sm">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-xs font-bold text-gray-500 mb-2 <?= $dir == 'rtl' ? 'mr-1' : 'ml-1' ?>"><?= __('course') ?></label>
                    <select id="courseFilter" class="filter-box text-sm">
                        <option value=""><?= __('all_courses') ?></option>
                        <?php foreach($courses as $c): ?>
                            <option value="<?= htmlspecialchars($c['course_name']) ?>"><?= htmlspecialchars($c['course_name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-xs font-bold text-gray-500 mb-2 <?= $dir == 'rtl' ? 'mr-1' : 'ml-1' ?>"><?= __('teacher') ?></label>
                    <select id="teacherFilter" class="filter-box text-sm">
                        <option value=""><?= __('all_teachers') ?></option>
                        <?php foreach($teachers as $t): ?>
                            <option value="<?= htmlspecialchars($t['name']) ?>"><?= htmlspecialchars($t['name']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="md:col-span-3">
                    <label class="block text-xs font-bold text-gray-500 mb-2 <?= $dir == 'rtl' ? 'mr-1' : 'ml-1' ?>"><?= __('quick_search') ?></label>
                    <input type="text" id="globalSearch" placeholder="<?= __('student_search_placeholder') ?>" class="filter-box text-sm">
                </div>
                <div class="md:col-span-1">
                    <button id="resetFilter" class="w-full bg-red-50 text-red-600 h-[50px] rounded-xl font-bold hover:bg-red-100 transition">
                        <i class="fas fa-sync"></i>
                    </button>
                </div>
            </div>
        </div>

        <div class="main-table-container">
            <div class="table-responsive">
                <table id="reportTable" class="w-full">
                    <thead class="table-header">
                        <tr>
                            <th class="text-center"><?= __('date') ?></th>
                            <th class="text-center"><?= __('student') ?></th>
                            <th class="text-center"><?= __('course') ?></th>
                            <th class="text-center"><?= __('teacher') ?></th>
                            <th class="text-center"><?= __('hours') ?></th>
                            <th class="text-center"><?= __('status') ?></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        <?php foreach ($results as $row): ?>
                        <tr class="table-row" 
                            data-date="<?= $row['attendance_date'] ?>"
                            data-course="<?= htmlspecialchars($row['course_name']) ?>"
                            data-teacher="<?= htmlspecialchars($row['teacher_name']) ?>"
                            data-token="<?= $row['session_token'] ?>"> <td class="font-bold text-gray-600 text-sm text-center">
                                <?= $row['attendance_date'] ?>
                            </td>
                            
                            <td class="text-center">
                                <div class="flex-center">
                                    <div class="font-extrabold text-gray-900"><?= htmlspecialchars($row['student_name']) ?></div>
                                    <div class="text-[10px] text-gray-400 font-bold"><?= $row['student_phone'] ?></div>
                                </div>
                            </td>
                            
                            <td class="text-center">
                                <span class="bg-indigo-50 text-indigo-700 px-3 py-1 rounded-lg text-[11px] font-black inline-block">
                                    <?= htmlspecialchars($row['course_name']) ?>
                                </span>
                            </td>
                            
                            <td class="font-bold text-gray-700 text-sm text-center">
                                <?= htmlspecialchars($row['teacher_name']) ?>
                            </td>
                            
                            <td class="text-center font-black text-indigo-600">
                                <?= $row['hours_count'] ?>
                            </td>
                            
                            <td class="text-center">
                                <?php 
                                    $s = $row['status'];
                                    $class = ($s == 'حضور' || $s == 'Present') ? 'status-present' : (($s == 'غياب' || $s == 'Absent') ? 'status-absent' : 'status-excused');
                                    $displayStatus = ($s == 'حضور') ? __('present') : (($s == 'غياب') ? __('absent') : __('excused'));
                                ?>
                                <span class="status-badge <?= $class ?> mx-auto">
                                    <?= $displayStatus ?>
                                    <?php if($s == 'حضور') echo '✅'; elseif($s == 'غياب') echo '❌'; ?>
                                </span>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <p class="md:hidden text-center text-[10px] text-gray-400 mt-4 no-print"><?= __('scroll_hint_attendance') ?></p>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableRows = document.querySelectorAll('#reportTable tbody tr');
    
    function filterTable() {
        const from = document.getElementById('dateFrom').value;
        const to = document.getElementById('dateTo').value;
        const course = document.getElementById('courseFilter').value.toLowerCase();
        const teacher = document.getElementById('teacherFilter').value.toLowerCase();
        const search = document.getElementById('globalSearch').value.toLowerCase();
        const hourlyRate = parseFloat(document.getElementById('hourlyRate').value) || 0;

        let totalActualHours = 0;
        let visibleCount = 0;
        let seenTokens = new Set(); // لاستخدامه في منع تكرار ساعات نفس الجلسة

        tableRows.forEach(row => {
            const rDate = row.getAttribute('data-date');
            const rCourse = row.getAttribute('data-course').toLowerCase();
            const rTeacher = row.getAttribute('data-teacher').toLowerCase();
            const rToken = row.getAttribute('data-token'); 
            const rHours = parseFloat(row.cells[4].innerText) || 0;
            const rText = row.innerText.toLowerCase();

            const matchesDate = (!from || rDate >= from) && (!to || rDate <= to);
            const matchesCourse = !course || rCourse === course;
            const matchesTeacher = !teacher || rTeacher === teacher;
            const matchesSearch = !search || rText.includes(search);

            if (matchesDate && matchesCourse && matchesTeacher && matchesSearch) {
                row.style.display = '';
                visibleCount++;

                // الحسبة الذكية لمنع تكرار الساعات
                if (!rToken || rToken === "" || !seenTokens.has(rToken)) {
                    totalActualHours += rHours;
                    if(rToken) seenTokens.add(rToken);
                }
            } else {
                row.style.display = 'none';
            }
        });

        const hourSuffix = " <?= __('hour_unit') ?>";
        document.getElementById('actualHoursDisplay').innerText = totalActualHours.toFixed(2) + hourSuffix;
        document.getElementById('recordCountDisplay').innerText = visibleCount;
        document.getElementById('totalMoneyDisplay').innerText = (totalActualHours * hourlyRate).toLocaleString(undefined, {minimumFractionDigits: 2});
    }

    ['dateFrom', 'dateTo', 'courseFilter', 'teacherFilter', 'globalSearch', 'hourlyRate'].forEach(id => {
        document.getElementById(id).addEventListener('input', filterTable);
    });

    document.getElementById('resetFilter').addEventListener('click', () => {
        window.location.reload();
    });

    filterTable();
});

function exportToExcel() {
    const table = document.getElementById("reportTable");
    const wb = XLSX.utils.table_to_book(table, {sheet: "<?= __('attendance_reports_title') ?>"});
    XLSX.writeFile(wb, "Attendance_Report_<?= date('Y-m-d') ?>.xlsx");
}
</script>

<?php include('../includes/footer.php'); ?>