<?php
// pages/calendar.php
require_once __DIR__ . '/../includes/header.php';

// السماح فقط للمدراء و HR والمشتريات والمشرفين
$allowed_roles = ['super_admin', 'ceo', 'hr_manager', 'maintenance_head', 'manager_first', 'manager_youth', 'admin_staff'];
if (!in_array($_SESSION['role'], $allowed_roles)) {
    echo "<div class='alert alert-danger text-center mt-5'>عذراً، ليس لديك صلاحية الاطلاع على سجل الإجازات.</div>";
    require_once __DIR__ . '/../includes/footer.php';
    exit;
}
?>

<script src='https://cdn.jsdelivr.net/npm/fullcalendar@6.1.10/index.global.min.js'></script>

<div class="row mb-4">
    <div class="col-12">
        <h3 class="fw-bold text-primary"><i class="bi bi-calendar-week"></i> تقويم الإجازات والمغادرات</h3>
        <p class="text-muted">نظرة شاملة على تواجد الموظفين (الإجازات المعتمدة فقط)</p>
    </div>
</div>

<div class="card shadow-sm border-0">
    <div class="card-body p-3">
        <div class="d-flex flex-wrap gap-3 justify-content-center mb-4 text-small">
            <span class="badge bg-success">سنوية</span>
            <span class="badge bg-danger">مرضية</span>
            <span class="badge bg-primary">مهمة عمل</span>
            <span class="badge bg-info text-dark">بديلة</span>
            <span style="background-color: #fd7e14;" class="badge text-white">طارئة</span>
            <span style="background-color: #6f42c1;" class="badge text-white">أذونات ساعات</span>
        </div>

        <div id='calendar'></div>
    </div>
</div>

<div class="modal fade" id="eventModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="modalTitle">تفاصيل</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p><strong>الموظف:</strong> <span id="modalEmployee"></span></p>
                <p><strong>نوع الإجازة:</strong> <span id="modalType" class="badge bg-secondary"></span></p>
                <p><strong>من:</strong> <span id="modalStart" dir="ltr"></span></p>
                <p><strong>إلى:</strong> <span id="modalEnd" dir="ltr"></span></p>
                <hr>
                <p><strong>السبب / ملاحظات:</strong> <br> <span id="modalReason" class="text-muted"></span></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            initialView: 'dayGridMonth',
            direction: 'rtl', // دعم اللغة العربية
            locale: 'ar', // اللغة العربية
            headerToolbar: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,listMonth'
            },
            buttonText: {
                today: 'اليوم',
                month: 'شهر',
                week: 'أسبوع',
                list: 'قائمة'
            },
            events: '../api/get_leaves.php', // جلب البيانات من الـ API
            eventClick: function(info) {
                // عند الضغط على الحدث، نعبئ المودال ونعرضه
                var props = info.event.extendedProps;
                
                document.getElementById('modalTitle').innerText = info.event.title;
                document.getElementById('modalEmployee').innerText = props.employee;
                document.getElementById('modalType').innerText = props.type;
                document.getElementById('modalReason').innerText = props.reason;
                
                // تنسيق الوقت
                var start = info.event.start.toLocaleString('en-GB');
                var end = info.event.end ? info.event.end.toLocaleString('en-GB') : start;
                
                document.getElementById('modalStart').innerText = start;
                document.getElementById('modalEnd').innerText = end;

                var myModal = new bootstrap.Modal(document.getElementById('eventModal'));
                myModal.show();
            },
            eventTimeFormat: { // تنسيق الوقت داخل التقويم
                hour: '2-digit',
                minute: '2-digit',
                meridiem: false
            }
        });
        calendar.render();
    });
</script>

<style>
    /* تحسينات بصرية للتقويم */
    #calendar {
        max-width: 100%;
        margin: 0 auto;
        min-height: 700px;
    }
    .fc-event {
        cursor: pointer;
        font-size: 0.9em;
    }
    .fc-toolbar-title {
        font-family: 'Cairo', sans-serif;
        font-weight: bold;
        color: #007A33;
    }
    .fc-col-header-cell-cushion {
        color: #333;
        text-decoration: none;
        font-weight: bold;
    }
    .fc-daygrid-day-number {
        color: #007A33;
        text-decoration: none;
        font-weight: bold;
    }
</style>

<?php require_once __DIR__ . '/../includes/footer.php'; ?>