@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('social-insurance.createConfig') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> إضافة إعداد جديد
        </a>
        <a href="{{ route('social-insurance.index') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-right"></i> رجوع للوحة التحكم
        </a>
    </div>
</div>

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

<div class="filter-bar">
    <form method="GET" class="filter-form">
        <div class="filter-group">
            <label>الدولة</label>
            <select name="country_code" class="form-select">
                <option value="">الكل</option>
                @foreach($countries as $code => $name)
                    <option value="{{ $code }}" {{ ($filters['country_code'] ?? '') === $code ? 'selected' : '' }}>{{ $name }} ({{ $code }})</option>
                @endforeach
            </select>
        </div>
        <div class="filter-group">
            <label>الفئة</label>
            <select name="applies_to" class="form-select">
                <option value="">الكل</option>
                <option value="citizen" {{ ($filters['applies_to'] ?? '') === 'citizen' ? 'selected' : '' }}>مواطن</option>
                <option value="expat" {{ ($filters['applies_to'] ?? '') === 'expat' ? 'selected' : '' }}>وافد</option>
                <option value="both" {{ ($filters['applies_to'] ?? '') === 'both' ? 'selected' : '' }}>الجميع</option>
            </select>
        </div>
        <div class="filter-group">
            <label>الحالة</label>
            <select name="status" class="form-select">
                <option value="">الكل</option>
                <option value="active" {{ ($filters['status'] ?? '') === 'active' ? 'selected' : '' }}>نشط</option>
                <option value="inactive" {{ ($filters['status'] ?? '') === 'inactive' ? 'selected' : '' }}>غير نشط</option>
            </select>
        </div>
        <div class="filter-group">
            <label>&nbsp;</label>
            <button type="submit" class="btn btn-primary"><i class="fas fa-filter"></i> تصفية</button>
        </div>
    </form>
</div>

<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>
                        <th>إجراءات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($configs as $config)
                        <tr>
                            <td>{{ $config->country_name_ar }} <span class="code-badge">{{ $config->country_code }}</span></td>
                            <td>{{ $config->scheme_name }}</td>
                            <td>{{ $config->appliesToLabel() }}</td>
                            <td>{{ $config->employee_percentage }}%</td>
                            <td>{{ $config->employer_percentage }}%</td>
                            <td>{{ $config->calculationBaseLabel() }}</td>
                            <td>{{ $config->salary_cap ? number_format($config->salary_cap, 2) : '—' }}</td>
                            <td>
                                <span class="status-badge {{ $config->is_active ? 'status-active' : 'status-draft' }}">
                                    {{ $config->is_active ? 'نشط' : 'غير نشط' }}
                                </span>
                            </td>
                            <td>
                                <a href="{{ route('social-insurance.editConfig', $config->id) }}" class="btn btn-secondary btn-sm">
                                    <i class="fas fa-edit"></i> تعديل
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9">
                                <div class="empty-state">
                                    <i class="fas fa-inbox"></i>
                                    <p>لا توجد إعدادات مطابقة</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div style="margin-top: 16px;">
            {{ $configs->links() }}
        </div>
    </div>
</div>
@endsection