@extends('layouts.app')

@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('leave-management.create-type') }}" class="btn btn-accent"><i class="fas fa-plus"></i> إضافة نوع إجازة</a>
        <a href="{{ route('leave-management.balances') }}" class="btn btn-primary"><i class="fas fa-wallet"></i> أرصدة الموظفين</a>
        <a href="{{ route('leave-management.calendar') }}" class="btn btn-success"><i class="fas fa-calendar-alt"></i> تقويم الإجازات</a>
    </div>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

<div class="card">
    <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>
                        <th>الحالة</th>
                        <th>الإجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($types as $type)
                    <tr>
                        <td>
                            <div style="display: flex; align-items: center; gap: 0.75rem;">
                                <span style="width: 36px; height: 36px; border-radius: 50%; background: {{ $type->color }}20; color: {{ $type->color }}; display: flex; align-items: center; justify-content: center;">
                                    <i class="{{ $type->icon }}"></i>
                                </span>
                                <div>
                                    <strong>{{ $type->name_ar }}</strong>
                                    <br><small class="text-muted">{{ $type->name_en }}</small>
                                </div>
                            </div>
                        </td>
                        <td><strong>{{ $type->default_days }}</strong> يوم</td>
                        <td>
                            <span class="status-badge status-{{ $type->pay_type === 'full' ? 'active' : ($type->pay_type === 'partial' ? 'pending' : 'expired') }}">
                                {{ $type->pay_type_text }}
                            </span>
                        </td>
                        <td>
                            @if($type->gender === 'all')
                                <i class="fas fa-users" title="الجميع"></i> الجميع
                            @elseif($type->gender === 'female')
                                <i class="fas fa-venus" style="color: #ec4899;"></i> إناث
                            @else
                                <i class="fas fa-mars" style="color: #3b82f6;"></i> ذكور
                            @endif
                        </td>
                        <td>
                            @if($type->is_country_specific)
                                <span class="code-badge">{{ count($type->country_codes ?? []) }} دول</span>
                            @else
                                جميع الدول
                            @endif
                        </td>
                        <td>
                            @if($type->carry_forward)
                                <i class="fas fa-check-circle" style="color: var(--success);"></i>
                                {{ $type->max_carry_forward_days ? $type->max_carry_forward_days . ' يوم' : 'غير محدود' }}
                            @else
                                <i class="fas fa-times-circle" style="color: var(--text-muted);"></i>
                            @endif
                        </td>
                        <td>
                            <span class="status-badge status-{{ $type->is_active ? 'active' : 'expired' }}">
                                {{ $type->is_active ? 'مفعّل' : 'معطّل' }}
                            </span>
                        </td>
                        <td>
                            <div class="action-btns">
                                <a href="{{ route('leave-management.edit-type', $type) }}" class="action-btn" title="تعديل"><i class="fas fa-edit"></i></a>
                            </div>
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection