@extends('layouts.app')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">ملفات WPS</h1>
        <p class="page-subtitle">جميع ملفات حماية الأجور المُنشأة</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('wps.generate') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> إنشاء ملف جديد
        </a>
        <a href="{{ route('wps.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 action="{{ route('wps.files') }}" method="GET" class="filter-form">
        <div class="filter-group">
            <label class="form-label">الدولة</label>
            <select name="country_code" class="form-select">
                <option value="">الكل</option>
                @foreach ($systems as $code => $system)
                    <option value="{{ $code }}" {{ request('country_code') == $code ? 'selected' : '' }}>
                        {{ $system['name'] }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="filter-group">
            <label class="form-label">الشهر</label>
            <input type="month" name="month" class="form-input" value="{{ request('month') }}">
        </div>
        <div class="filter-group">
            <label class="form-label">الحالة</label>
            <select name="status" class="form-select">
                <option value="">الكل</option>
                <option value="draft" {{ request('status') == 'draft' ? 'selected' : '' }}>مسودة</option>
                <option value="generated" {{ request('status') == 'generated' ? 'selected' : '' }}>تم الإنشاء</option>
                <option value="submitted" {{ request('status') == 'submitted' ? 'selected' : '' }}>تم الإرسال</option>
                <option value="accepted" {{ request('status') == 'accepted' ? 'selected' : '' }}>مقبول</option>
                <option value="rejected" {{ request('status') == 'rejected' ? 'selected' : '' }}>مرفوض</option>
            </select>
        </div>
        <div class="filter-group">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-filter"></i> تصفية
            </button>
            <a href="{{ route('wps.files') }}" class="btn btn-secondary">إعادة تعيين</a>
        </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 ($files as $file)
                        <tr>
                            <td>{{ $file->file_name }}</td>
                            <td><span class="code-badge">{{ $file->country_code }}</span></td>
                            <td>{{ $file->file_type_label }}</td>
                            <td>{{ optional($file->month)->format('Y-m') }}</td>
                            <td>{{ $file->total_employees }}</td>
                            <td>{{ number_format($file->total_amount, 2) }}</td>
                            <td><span class="status-badge {{ $file->status_badge_class }}">{{ $file->status_label }}</span></td>
                            <td>{{ $file->created_at->format('Y-m-d H:i') }}</td>
                            <td>
                                <a href="{{ route('wps.showFile', $file->id) }}" class="btn btn-secondary btn-sm">
                                    <i class="fas fa-eye"></i> عرض
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="9">
                                <div class="empty-state">
                                    <i class="fas fa-file-invoice-dollar"></i>
                                    <p>لا توجد ملفات مطابقة لبحثك</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="pagination-wrapper">
            {{ $files->links() }}
        </div>
    </div>
</div>
@endsection