@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">تقويم الإجازات</h1>
        <p class="page-subtitle">عرض تقويمي لإجازات الموظفين — {{ \Carbon\Carbon::createFromDate($year, $month, 1)->translatedFormat('F Y') }}</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('leave-management.types') }}" class="btn btn-secondary"><i class="fas fa-cog"></i> أنواع الإجازات</a>
        <a href="{{ route('leave-management.balances') }}" class="btn btn-primary"><i class="fas fa-wallet"></i> الأرصدة</a>
    </div>
</div>

{{-- Month Navigation --}}
<div class="card" style="margin-bottom: 1.5rem;">
    <div class="card-body">
        <div style="display: flex; align-items: center; justify-content: space-between;">
            @php
                $prevMonth = $month == 1 ? 12 : $month - 1;
                $prevYear = $month == 1 ? $year - 1 : $year;
                $nextMonth = $month == 12 ? 1 : $month + 1;
                $nextYear = $month == 12 ? $year + 1 : $year;
            @endphp
            <a href="{{ route('leave-management.calendar', ['month' => $prevMonth, 'year' => $prevYear]) }}" class="btn btn-secondary">
                <i class="fas fa-chevron-right"></i> الشهر السابق
            </a>
            <h3 style="margin: 0;">{{ \Carbon\Carbon::createFromDate($year, $month, 1)->translatedFormat('F Y') }}</h3>
            <a href="{{ route('leave-management.calendar', ['month' => $nextMonth, 'year' => $nextYear]) }}" class="btn btn-secondary">
                الشهر التالي <i class="fas fa-chevron-left"></i>
            </a>
        </div>
    </div>
</div>

{{-- Stats --}}
<div class="stats-grid cols-3" style="margin-bottom: 1.5rem;">
    <div class="stat-card" style="cursor: pointer;" onclick="document.getElementById('leave-list-section').scrollIntoView({behavior:'smooth'})">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary);">
            <i class="fas fa-users"></i>
        </div>
        <div class="stat-value">{{ $leaves->pluck('employee_id')->unique()->count() }}</div>
        <div class="stat-label">موظفين في إجازة هذا الشهر</div>
    </div>
    <div class="stat-card" style="cursor: pointer;" onclick="document.getElementById('leave-list-section').scrollIntoView({behavior:'smooth'})">
        <div class="stat-icon" style="background: var(--warning-light); color: var(--warning);">
            <i class="fas fa-calendar-check"></i>
        </div>
        <div class="stat-value">{{ $leaves->count() }}</div>
        <div class="stat-label">إجمالي طلبات الإجازة</div>
    </div>
    <div class="stat-card" style="cursor: pointer;" onclick="document.getElementById('leave-list-section').scrollIntoView({behavior:'smooth'})">
        <div class="stat-icon" style="background: var(--success-light); color: var(--success);">
            <i class="fas fa-calendar-day"></i>
        </div>
        <div class="stat-value">{{ $leaves->sum(function($l) { return $l->start_date->diffInDays($l->end_date) + 1; }) }}</div>
        <div class="stat-label">إجمالي أيام الإجازة</div>
    </div>
</div>

{{-- Leave Type Legend --}}
@php
    $usedTypes = $leaves->pluck('leaveType')->unique('id')->filter();
@endphp
@if($usedTypes->count() > 0)
<div class="card" style="margin-bottom: 1rem;">
    <div class="card-body" style="padding: 0.75rem 1rem;">
        <div style="display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;">
            <span style="font-weight: 600; font-size: 0.85rem; color: var(--text-muted);"><i class="fas fa-palette"></i> دليل الألوان:</span>
            @foreach($usedTypes as $lt)
            <div style="display: flex; align-items: center; gap: 0.4rem;">
                <span style="width: 12px; height: 12px; border-radius: 3px; background: {{ $lt->color ?? '#6b7280' }}; display: inline-block;"></span>
                <span style="font-size: 0.8rem;">{{ $lt->name_ar }}</span>
            </div>
            @endforeach
        </div>
    </div>
</div>
@endif

{{-- Calendar Grid --}}
<div class="card">
    <div class="card-header"><h3><i class="fas fa-calendar-alt"></i> التقويم</h3></div>
    <div class="card-body" style="padding: 0.5rem;">
        @php $dayNames = ['الأحد', 'الاثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت']; @endphp
        <div style="display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;">
            {{-- Day headers --}}
            @foreach($dayNames as $dn)
            <div style="padding: 0.5rem; text-align: center; font-weight: 700; background: var(--primary-light); color: var(--primary); font-size: 0.85rem;">
                {{ $dn }}
            </div>
            @endforeach

            {{-- Empty cells before first day --}}
            @php $firstDow = $calendarDays[0]['date']->dayOfWeek; @endphp
            @for($i = 0; $i < $firstDow; $i++)
            <div style="padding: 0.5rem; background: var(--bg);"></div>
            @endfor

            {{-- Calendar days --}}
            @foreach($calendarDays as $day)
            @php
                $isToday = $day['date']->isToday();
                $isWeekend = in_array($day['date']->dayOfWeek, [5, 6]); // Fri, Sat
                $hasLeaves = $day['leaves']->count() > 0;
            @endphp
            <div style="padding: 0.5rem; min-height: 90px; border: 1px solid var(--border-light); border-radius: var(--radius-sm);
                {{ $isToday ? 'background: var(--primary-light); border-color: var(--primary);' : '' }}
                {{ $isWeekend && !$isToday ? 'background: #f8f8f8;' : '' }}">
                <div style="font-weight: {{ $isToday ? '700' : '600' }}; font-size: 0.9rem; margin-bottom: 0.35rem;
                    {{ $isToday ? 'color: var(--primary);' : '' }}
                    {{ $isWeekend ? 'color: var(--text-muted);' : '' }}">
                    {{ $day['date']->day }}
                </div>
                @foreach($day['leaves']->take(3) as $leave)
                @php $leaveColor = $leave->leaveType->color ?? '#6b7280'; @endphp
                <div style="font-size: 0.7rem; padding: 2px 6px; margin-bottom: 2px; border-radius: 4px;
                    background: {{ $leaveColor }}18; color: {{ $leaveColor }}; border-right: 3px solid {{ $leaveColor }};
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;"
                    title="{{ ($leave->employee->full_name ?? $leave->employee->first_name ?? '') . ' — ' . ($leave->leaveType->name_ar ?? '') }}">
                    {{ $leave->employee->full_name ?? $leave->employee->first_name ?? 'موظف' }}
                </div>
                @endforeach
                @if($day['leaves']->count() > 3)
                <div style="font-size: 0.65rem; color: var(--text-muted); padding-top: 1px;">+{{ $day['leaves']->count() - 3 }} آخرين</div>
                @endif
            </div>
            @endforeach
        </div>
    </div>
</div>

{{-- Leave list for this month --}}
@if($leaves->count() > 0)
<div class="card" style="margin-top: 1.5rem;" id="leave-list-section">
    <div class="card-header"><h3><i class="fas fa-list"></i> قائمة الإجازات</h3></div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>الموظف</th>
                        <th>القسم</th>
                        <th>نوع الإجازة</th>
                        <th>من</th>
                        <th>إلى</th>
                        <th>المدة</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($leaves->sortBy('start_date') as $leave)
                    @php $leaveColor = $leave->leaveType->color ?? '#6b7280'; @endphp
                    <tr>
                        <td><strong>{{ $leave->employee->full_name ?? $leave->employee->first_name ?? '—' }}</strong></td>
                        <td>{{ $leave->employee->department->name ?? '—' }}</td>
                        <td>
                            <span style="display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; background: {{ $leaveColor }}15; color: {{ $leaveColor }}; font-size: 0.85rem; font-weight: 500;">
                                <i class="fas {{ $leave->leaveType->icon ?? 'fa-calendar' }}" style="font-size: 0.75rem;"></i>
                                {{ $leave->leaveType->name_ar ?? '—' }}
                            </span>
                        </td>
                        <td>{{ $leave->start_date->format('Y-m-d') }}</td>
                        <td>{{ $leave->end_date->format('Y-m-d') }}</td>
                        <td>{{ $leave->start_date->diffInDays($leave->end_date) + 1 }} يوم</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endif
@endsection