@extends('layouts.app')
@section('title', 'تقويم الإجازات')
@section('content')
@push('styles')
<style>
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.page-header h1{font-size:1.5rem;font-weight:700;color:#1B2A4A;margin:0}
.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.06);margin-bottom:24px}
.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;font-weight:600;font-size:.85rem;color:#374151}
.form-group select{padding:8px 12px;border:1px solid #d1d5db;border-radius:8px;font-size:.9rem}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:#e2e8f0;border-radius:8px;overflow:hidden}
.calendar .day-header{background:#1B2A4A;color:#fff;padding:10px;text-align:center;font-weight:600;font-size:.85rem}
.calendar .day{background:#fff;min-height:80px;padding:6px;position:relative}
.calendar .day .date{font-size:.8rem;color:#64748b;margin-bottom:4px}
.calendar .day.today{background:#eff6ff}
.calendar .day.other-month{background:#f8fafc;color:#cbd5e1}
.leave-event{font-size:.7rem;padding:2px 6px;border-radius:4px;margin-bottom:2px;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.leave-annual{background:#3b82f6}.leave-sick{background:#ef4444}.leave-emergency{background:#f59e0b}.leave-other{background:#8b5cf6}
.legend{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:6px;font-size:.85rem;color:#475569}
.legend-dot{width:12px;height:12px;border-radius:3px}
</style>
@endpush
<div class="page-header"><h1><i class="fas fa-calendar-alt"></i> تقويم الإجازات</h1>
<div class="form-group" style="margin:0"><select onchange="window.location.href='/leave-calendar?department_id='+this.value"><option value="">كل الأقسام</option>
@foreach($departments as $d)<option value="{{ $d->id }}" {{ request('department_id') == $d->id ? 'selected' : '' }}>{{ $d->name }}</option>@endforeach</select></div></div>
<div class="card">
    <div class="legend">
        <div class="legend-item"><div class="legend-dot leave-annual"></div>سنوية</div>
        <div class="legend-item"><div class="legend-dot leave-sick"></div>مرضية</div>
        <div class="legend-item"><div class="legend-dot leave-emergency"></div>طارئة</div>
        <div class="legend-item"><div class="legend-dot leave-other"></div>أخرى</div>
    </div>
    <div class="calendar" id="calendarGrid">
        <div class="day-header">الأحد</div><div class="day-header">الاثنين</div><div class="day-header">الثلاثاء</div><div class="day-header">الأربعاء</div><div class="day-header">الخميس</div><div class="day-header">الجمعة</div><div class="day-header">السبت</div>
    </div>
    <p style="text-align:center;color:#94a3b8;margin-top:16px;font-size:.85rem">يتم تحميل بيانات الإجازات تلقائياً</p>
</div>
@push('scripts')
<script>
(function(){
    var grid=document.getElementById('calendarGrid');
    var now=new Date();var y=now.getFullYear();var m=now.getMonth();
    var first=new Date(y,m,1);var last=new Date(y,m+1,0);
    var startDay=first.getDay();
    for(var i=0;i<startDay;i++){var d=document.createElement('div');d.className='day other-month';d.innerHTML='<div class="date">&nbsp;</div>';grid.appendChild(d);}
    for(var day=1;day<=last.getDate();day++){
        var d=document.createElement('div');d.className='day'+(day===now.getDate()?' today':'');
        d.innerHTML='<div class="date">'+day+'</div>';grid.appendChild(d);
    }
    fetch('/leave-calendar/events?month='+(m+1)+'&year='+y+'&department_id='+(new URLSearchParams(window.location.search).get('department_id')||''))
    .then(function(r){return r.json()}).then(function(events){
        events.forEach(function(ev){
            var eDate=new Date(ev.date);if(eDate.getMonth()===m){
                var idx=startDay+eDate.getDate()-1+7;
                var cell=grid.children[idx];if(cell){
                    var cls='leave-other';if(ev.type&&ev.type.indexOf('annual')>=0)cls='leave-annual';else if(ev.type&&ev.type.indexOf('sick')>=0)cls='leave-sick';else if(ev.type&&ev.type.indexOf('emergency')>=0)cls='leave-emergency';
                    cell.innerHTML+='<div class="leave-event '+cls+'">'+ev.employee+'</div>';
                }
            }
        });
    }).catch(function(){});
})();
</script>
@endpush
@endsection