@extends('layouts.app')
@section('title', 'أنواع الإجازات - DOTS HR Pro')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">إدارة أنواع الإجازات</h1>
        <p class="page-subtitle">{{ $leaveTypes->count() }} نوع إجازة مسجل في النظام</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('settings.index') }}" class="btn btn-ghost"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<div class="card">
    <div class="table-responsive">
        <table class="data-table">
            <thead>
                <tr>
                    <th>اسم نوع الإجازة</th>
                    <th>الأيام المسموح بها</th>
                    <th>مدفوعة الأجر</th>
                    <th>الحالة</th>
                </tr>
            </thead>
            <tbody>
                @forelse($leaveTypes as $type)
                <tr>
                    <td>{{ $type->name }}</td>
                    <td>{{ $type->max_days_per_year ?? '—' }}</td>
                    <td>
                        <span class="status-badge status-{{ $type->is_paid ? 'active' : 'inactive' }}">
                            {{ $type->is_paid ? 'نعم' : 'لا' }}
                        </span>
                    </td>
                    <td>
                        <span class="status-badge status-{{ $type->is_active ? 'active' : 'inactive' }}">
                            {{ $type->is_active ? 'نشط' : 'غير نشط' }}
                        </span>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="4">
                        <div class="empty-state">
                            <i class="fas fa-calendar"></i>
                            <h3>لا توجد أنواع إجازات</h3>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection