@extends('layouts.app')
@section('title', 'تقويم الإجازات - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تقويم الإجازات</h1>
        <p class="page-subtitle">عرض الإجازات على التقويم الشهري</p>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3><i class="fas fa-calendar-alt"></i> التقويم</h3>
    </div>
    <div class="card-body">
        <div id="leaves-calendar"></div>
    </div>
</div>

<style>
.cal-nav { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.cal-nav h3 { margin:0; font-size:18px; color:#1B2A4A; }
.cal-nav button { background:none; border:1px solid #d1d5db; border-radius:8px; padding:6px 14px; cursor:pointer; color:#1B2A4A; font-size:14px; }
.cal-nav button:hover { background:#f3f4f6; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.cal-hdr { background:#1B2A4A; color:white; padding:10px 4px; text-align:center; font-weight:600; font-size:13px; border-radius:4px; }
.cal-day { border:1px solid #e5e7eb; padding:8px; min-height:80px; background:white; border-radius:4px; font-size:13px; }
.cal-day:hover { background:#f9fafb; }
.cal-day.today { border-color:#E8502F; background:#fff5f2; }
.cal-day.empty { background:#f9fafb; border-color:#f3f4f6; }
.cal-day .day-num { font-weight:600; color:#1B2A4A; margin-bottom:4px; }
.cal-day.fri { background:#f0f9ff; }
.cal-day.sat { background:#fef3c7; }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date();
    let month = today.getMonth(), year = today.getFullYear();
    const arMonths = ['يناير','فبراير','مارس','أبريل','مايو','يونيو','يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'];
    const arDays = ['الأحد','الاثنين','الثلاثاء','الأربعاء','الخميس','الجمعة','السبت'];

    function render() {
        const first = new Date(year, month, 1);
        const last = new Date(year, month+1, 0);
        const startDay = first.getDay();
        let h = '<div class="cal-nav">';
        h += '<button onclick="nav(1)"><i class="fas fa-chevron-right"></i> التالي</button>';
        h += '<h3>' + arMonths[month] + ' ' + year + '</h3>';
        h += '<button onclick="nav(-1)">السابق <i class="fas fa-chevron-left"></i></button>';
        h += '</div><div class="cal-grid">';
        arDays.forEach(d => h += '<div class="cal-hdr">' + d + '</div>');
        for (let i = 0; i < startDay; i++) h += '<div class="cal-day empty"></div>';
        for (let d = 1; d <= last.getDate(); d++) {
            const dt = new Date(year, month, d);
            const isToday = d===today.getDate() && month===today.getMonth() && year===today.getFullYear();
            const dow = dt.getDay();
            let cls = 'cal-day';
            if (isToday) cls += ' today';
            if (dow === 5) cls += ' fri';
            if (dow === 6) cls += ' sat';
            h += '<div class="' + cls + '"><div class="day-num">' + d + '</div></div>';
        }
        h += '</div>';
        document.getElementById('leaves-calendar').innerHTML = h;
    }
    window.nav = function(dir) {
        month += dir;
        if (month > 11) { month = 0; year++; }
        if (month < 0) { month = 11; year--; }
        render();
    };
    render();
});
</script>
@endsection