@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 class="page-actions">
        <a href="{{ route('shift-schedules.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع للجداول</a>
    </div>
</div>

<div class="card" style="margin-bottom: 1.5rem">
    <div class="card-body">
        <form method="GET" class="filter-form" style="display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap">
            <div class="filter-group">
                <select name="department_id" class="form-select">
                    <option value="">كل الأقسام</option>
                    @foreach($departments as $dept)
                        <option value="{{ $dept->id }}" {{ request('department_id') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="filter-group">
                <select name="employee_id" class="form-select">
                    <option value="">كل الموظفين</option>
                    @foreach($employees as $emp)
                        <option value="{{ $emp->id }}" {{ request('employee_id') == $emp->id ? 'selected' : '' }}>{{ $emp->full_name }}</option>
                    @endforeach
                </select>
            </div>
            <input type="hidden" name="month" value="{{ $month }}">
            <input type="hidden" name="year" value="{{ $year }}">
            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> تصفية</button>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header" style="display: flex; justify-content: space-between; align-items: center">
        <a href="{{ route('shift-schedules.calendar', ['month' => $prevMonth->month, 'year' => $prevMonth->year, 'department_id' => request('department_id'), 'employee_id' => request('employee_id')]) }}" class="btn btn-secondary"><i class="fas fa-chevron-right"></i> الشهر السابق</a>
        <h3 style="margin: 0">
            @php
                $monthNames = ['', 'يناير','فبراير','مارس','أبريل','مايو','يونيو','يوليو','أغسطس','سبتمبر','أكتوبر','نوفمبر','ديسمبر'];
            @endphp
            {{ $monthNames[$month] }} {{ $year }}
        </h3>
        <a href="{{ route('shift-schedules.calendar', ['month' => $nextMonth->month, 'year' => $nextMonth->year, 'department_id' => request('department_id'), 'employee_id' => request('employee_id')]) }}" class="btn btn-secondary">الشهر التالي <i class="fas fa-chevron-left"></i></a>
    </div>
    <div class="card-body" style="padding: 0; overflow-x: auto">
        <table class="calendar-table">
            <thead>
                <tr>
                    <th>السبت</th>
                    <th>الأحد</th>
                    <th>الإثنين</th>
                    <th>الثلاثاء</th>
                    <th>الأربعاء</th>
                    <th>الخميس</th>
                    <th class="friday-header">الجمعة</th>
                </tr>
            </thead>
            <tbody>
                @php $dayIndex = 0; @endphp
                @foreach(array_chunk($calendarDays, 7) as $week)
                <tr>
                    @foreach($week as $day)
                        @php
                            $dateStr = $day->format('Y-m-d');
                            $isCurrentMonth = $day->month == $month;
                            $isToday = $day->isToday();
                            $isFriday = $day->dayOfWeek === 5;
                            $dayEntries = $entries->get($dateStr, collect());
                        @endphp
                        <td class="calendar-cell{{ !$isCurrentMonth ? ' other-month' : '' }}{{ $isToday ? ' today-cell' : '' }}{{ $isFriday ? ' friday-cell' : '' }}">
                            <div class="cell-date">{{ $day->day }}</div>
                            <div class="cell-entries">
                                @foreach($dayEntries->take(4) as $entry)
                                    <div class="cal-entry {{ $entry->is_day_off ? 'cal-day-off' : 'cal-shift' }}">
                                        <span class="cal-emp-name">{{ $entry->employee->full_name ?? '' }}</span>
                                        @if($entry->is_day_off)
                                            <span class="cal-shift-name">إجازة</span>
                                        @else
                                            <span class="cal-shift-name">{{ $entry->workShift->name ?? '—' }}</span>
                                        @endif
                                    </div>
                                @endforeach
                                @if($dayEntries->count() > 4)
                                    <div class="cal-more">+{{ $dayEntries->count() - 4 }} آخرين</div>
                                @endif
                            </div>
                        </td>
                    @endforeach
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<style>
.calendar-table { border-collapse: collapse; width: 100%; min-width: 800px; table-layout: fixed; }
.calendar-table th { background: var(--surface); padding: 0.75rem 0.5rem; text-align: center; font-size: 0.85rem; font-weight: 600; border: 1px solid var(--border); }
.calendar-table .friday-header { color: var(--danger); }
.calendar-cell { border: 1px solid var(--border); vertical-align: top; padding: 0.35rem; min-height: 100px; height: 120px; }
.calendar-cell.other-month { background: var(--surface); opacity: 0.5; }
.calendar-cell.today-cell { background: var(--primary-light); }
.calendar-cell.friday-cell { background: rgba(220,53,69, 0.03); }
.cell-date { font-weight: 700; font-size: 0.9rem; margin-bottom: 0.25rem; color: var(--text); }
.today-cell .cell-date { color: var(--primary); }
.cell-entries { display: flex; flex-direction: column; gap: 2px; }
.cal-entry { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px; border-radius: var(--radius-sm); font-size: 0.7rem; gap: 4px; }
.cal-shift { background: var(--primary-light); color: var(--primary); }
.cal-day-off { background: repeating-linear-gradient(45deg, #f5f5f5, #f5f5f5 3px, #ebebeb 3px, #ebebeb 6px); color: var(--text-muted); }
.cal-emp-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.cal-shift-name { white-space: nowrap; font-size: 0.65rem; }
.cal-more { font-size: 0.7rem; color: var(--text-muted); text-align: center; padding-top: 2px; }
</style>
@endsection