@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.calendar') }}" class="btn btn-secondary"><i class="fas fa-calendar-alt"></i> عرض التقويم</a>
        <a href="{{ route('shift-schedules.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> إنشاء جدول جديد</a>
    </div>
</div>

<div class="stats-grid cols-4">
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary)"><i class="fas fa-calendar-check"></i></div>
        <div class="stat-value">{{ $stats['total'] }}</div>
        <div class="stat-label">إجمالي الجداول</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--warning-light); color: var(--warning)"><i class="fas fa-file-alt"></i></div>
        <div class="stat-value">{{ $stats['draft'] }}</div>
        <div class="stat-label">مسودات</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--success-light); color: var(--success)"><i class="fas fa-check-circle"></i></div>
        <div class="stat-value">{{ $stats['published'] }}</div>
        <div class="stat-label">منشورة</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary)"><i class="fas fa-users"></i></div>
        <div class="stat-value">{{ $stats['employees'] }}</div>
        <div class="stat-label">موظفين مجدولين</div>
    </div>
</div>

<div class="card">
    <div class="filter-bar">
        <form method="GET" class="filter-form">
            <div class="filter-group">
                <select name="status" class="form-select">
                    <option value="">كل الحالات</option>
                    @foreach(\App\Models\ShiftSchedule::STATUS_LABELS as $val => $label)
                        <option value="{{ $val }}" {{ request('status') == $val ? 'selected' : '' }}>{{ $label }}</option>
                    @endforeach
                </select>
            </div>
            <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">
                <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-input" placeholder="من تاريخ">
            </div>
            <div class="filter-group">
                <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-input" placeholder="إلى تاريخ">
            </div>
            <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> بحث</button>
        </form>
    </div>
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>اسم الجدول</th>
                    <th>القسم</th>
                    <th>الفترة</th>
                    <th>عدد الإدخالات</th>
                    <th>الحالة</th>
                    <th>أنشئ بواسطة</th>
                    <th style="width:140px">إجراءات</th>
                </tr>
            </thead>
            <tbody>
                @forelse($schedules as $schedule)
                <tr>
                    <td><strong>{{ $schedule->name }}</strong></td>
                    <td>{{ $schedule->department->name ?? 'الكل' }}</td>
                    <td>
                        <span style="font-size: 0.85rem">{{ $schedule->start_date->format('Y/m/d') }} — {{ $schedule->end_date->format('Y/m/d') }}</span>
                    </td>
                    <td>{{ $schedule->entries_count }}</td>
                    <td>
                        @php
                            $statusClass = match($schedule->status) {
                                'draft'     => 'status-pending',
                                'published' => 'status-active',
                                'archived'  => '',
                                default     => '',
                            };
                        @endphp
                        <span class="status-badge {{ $statusClass }}">{{ $schedule->status_label }}</span>
                    </td>
                    <td>{{ $schedule->creator->name ?? '—' }}</td>
                    <td>
                        <div class="action-btns">
                            <a href="{{ route('shift-schedules.show', $schedule->id) }}" class="action-btn" title="عرض"><i class="fas fa-eye"></i></a>
                            @if($schedule->status === 'draft')
                                <a href="{{ route('shift-schedules.edit', $schedule->id) }}" class="action-btn" title="تعديل"><i class="fas fa-edit"></i></a>
                                <form method="POST" action="{{ route('shift-schedules.destroy', $schedule->id) }}" style="display:inline" onsubmit="return confirm('هل أنت متأكد من حذف هذا الجدول؟')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="action-btn" title="حذف" style="color: var(--danger)"><i class="fas fa-trash"></i></button>
                                </form>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7">
                        <div class="empty-state">
                            <i class="fas fa-calendar-alt"></i>
                            <h3>لا توجد جداول ورديات</h3>
                            <p>ابدأ بإنشاء جدول ورديات جديد للموظفين</p>
                            <a href="{{ route('shift-schedules.create') }}" class="btn btn-primary"><i class="fas fa-plus"></i> إنشاء جدول جديد</a>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($schedules->hasPages())
    <div class="pagination-wrap">{{ $schedules->withQueryString()->links() }}</div>
    @endif
</div>
@endsection