@extends('layouts.app')

@section('content')
<style>
.stat-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:1050;opacity:0;pointer-events:none;transition:opacity .25s}
.stat-modal-overlay.active{opacity:1;pointer-events:auto}
.stat-modal{background:var(--card-bg,#fff);border-radius:12px;width:92%;max-width:700px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.2);transform:translateY(20px);transition:transform .25s}
.stat-modal-overlay.active .stat-modal{transform:translateY(0)}
.stat-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border,#eee)}
.stat-modal-header h3{margin:0;font-size:1.05rem}
.stat-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-secondary,#666);line-height:1;padding:0 4px}
.stat-modal-close:hover{color:var(--danger,#ef4444)}
.stat-modal-body{padding:20px;overflow-y:auto}
.stat-modal-body table{width:100%;border-collapse:collapse}
.stat-modal-body th,.stat-modal-body td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--border,#eee);font-size:.9rem}
.stat-modal-body th{background:var(--bg,#f9fafb);font-weight:600;font-size:.85rem;color:var(--text-secondary,#666)}
.stat-modal-body tr:last-child td{border-bottom:none}
.stat-modal-body .modal-total-row{background:var(--bg,#f9fafb);font-weight:700}
.stat-card[onclick]{cursor:pointer;transition:transform .15s,box-shadow .15s}
.stat-card[onclick]:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.1)}
</style>

<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.files') }}" class="btn btn-secondary">
            <i class="fas fa-folder-open"></i> جميع الملفات
        </a>
        <a href="{{ route('wps.settings') }}" class="btn btn-secondary">
            <i class="fas fa-cog"></i> الإعدادات
        </a>
    </div>
</div>

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

<div class="stats-grid cols-4">
    <div class="stat-card" onclick="openStatModal('modal-total-files')">
        <div class="stat-icon"><i class="fas fa-file-alt"></i></div>
        <div class="stat-value">{{ $totalFiles }}</div>
        <div class="stat-label">إجمالي الملفات</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-submitted-files')">
        <div class="stat-icon"><i class="fas fa-paper-plane"></i></div>
        <div class="stat-value">{{ $totalSubmitted }}</div>
        <div class="stat-label">ملفات مُرسلة</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-accepted-files')">
        <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
        <div class="stat-value">{{ $totalAccepted }}</div>
        <div class="stat-label">ملفات مقبولة</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-total-employees')">
        <div class="stat-icon"><i class="fas fa-users"></i></div>
        <div class="stat-value">{{ $totalEmployees }}</div>
        <div class="stat-label">موظفون مشمولون</div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>الدول والأنظمة المدعومة</h3>
    </div>
    <div class="card-body">
        <div class="stats-grid cols-3">
            @foreach ($countryStats as $code => $stat)
                <div class="card">
                    <div class="card-header">
                        <h4><i class="fas {{ $stat['system']['icon'] }}"></i> {{ $stat['system']['name'] }}</h4>
                        <span class="code-badge">{{ $code }}</span>
                    </div>
                    <div class="card-body">
                        <p><strong>النظام:</strong> {{ $stat['system']['short'] }}</p>
                        <p><strong>عدد الموظفين:</strong> {{ $stat['employee_count'] }}</p>
                        <p><strong>عدد الملفات المُنشأة:</strong> {{ $stat['total_files'] }}</p>

                        @if ($stat['last_file'])
                            <p>
                                <strong>آخر ملف:</strong>
                                {{ $stat['last_file']->created_at->format('Y-m-d') }}
                                <span class="status-badge {{ $stat['last_file']->status_badge_class }}">
                                    {{ $stat['last_file']->status_label }}
                                </span>
                            </p>
                        @else
                            <p class="text-muted">لا توجد ملفات سابقة</p>
                        @endif

                        <a href="{{ route('wps.generate', ['country_code' => $code]) }}" class="btn btn-primary btn-sm">
                            <i class="fas fa-file-export"></i> إنشاء ملف
                        </a>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>أحدث الملفات المُنشأة</h3>
    </div>
    <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>
                    @forelse ($recentFiles 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>
                                <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="8">
                                <div class="empty-state">
                                    <i class="fas fa-file-invoice-dollar"></i>
                                    <p>لا توجد ملفات WPS مُنشأة بعد</p>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal: إجمالي الملفات --}}
<div class="stat-modal-overlay" id="modal-total-files" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-file-alt"></i> إجمالي الملفات حسب الدولة</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <thead>
                    <tr>
                        <th>الدولة</th>
                        <th>النظام</th>
                        <th>عدد الملفات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($countryStats as $code => $stat)
                        <tr>
                            <td><i class="fas {{ $stat['system']['icon'] }}"></i> {{ $stat['system']['name'] }} ({{ $code }})</td>
                            <td>{{ $stat['system']['short'] }}</td>
                            <td>{{ $stat['total_files'] }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="3">لا توجد بيانات</td></tr>
                    @endforelse
                    <tr class="modal-total-row">
                        <td colspan="2">الإجمالي</td>
                        <td>{{ $totalFiles }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal: ملفات مُرسلة --}}
<div class="stat-modal-overlay" id="modal-submitted-files" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-paper-plane"></i> الملفات المُرسلة</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <tbody>
                    <tr>
                        <td>عدد الملفات المُرسلة حاليًا</td>
                        <td><strong>{{ $totalSubmitted }}</strong></td>
                    </tr>
                    <tr>
                        <td>نسبة من إجمالي الملفات</td>
                        <td><strong>{{ $totalFiles > 0 ? number_format(($totalSubmitted / $totalFiles) * 100, 1) : 0 }}%</strong></td>
                    </tr>
                </tbody>
            </table>
            <p class="text-muted" style="margin-top:14px;font-size:.85rem;">
                يمكنك الاطلاع على حالة كل ملف على حدة (مُرسل، مقبول، مرفوض...) من جدول "أحدث الملفات المُنشأة" أدناه، أو من صفحة
                <a href="{{ route('wps.files') }}">جميع الملفات</a>.
            </p>
        </div>
    </div>
</div>

{{-- Modal: ملفات مقبولة --}}
<div class="stat-modal-overlay" id="modal-accepted-files" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-check-circle"></i> الملفات المقبولة</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <tbody>
                    <tr>
                        <td>عدد الملفات المقبولة</td>
                        <td><strong>{{ $totalAccepted }}</strong></td>
                    </tr>
                    <tr>
                        <td>نسبة من إجمالي الملفات</td>
                        <td><strong>{{ $totalFiles > 0 ? number_format(($totalAccepted / $totalFiles) * 100, 1) : 0 }}%</strong></td>
                    </tr>
                    <tr>
                        <td>نسبة من الملفات المُرسلة</td>
                        <td><strong>{{ $totalSubmitted > 0 ? number_format(($totalAccepted / $totalSubmitted) * 100, 1) : 0 }}%</strong></td>
                    </tr>
                </tbody>
            </table>
            <p class="text-muted" style="margin-top:14px;font-size:.85rem;">
                تفاصيل حالة كل ملف مقبول متوفرة في جدول "أحدث الملفات المُنشأة" أدناه، أو من صفحة
                <a href="{{ route('wps.files') }}">جميع الملفات</a>.
            </p>
        </div>
    </div>
</div>

{{-- Modal: موظفون مشمولون --}}
<div class="stat-modal-overlay" id="modal-total-employees" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-users"></i> الموظفون المشمولون حسب الدولة</h3>
            <button type="button" class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <thead>
                    <tr>
                        <th>الدولة</th>
                        <th>النظام</th>
                        <th>عدد الموظفين</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($countryStats as $code => $stat)
                        <tr>
                            <td><i class="fas {{ $stat['system']['icon'] }}"></i> {{ $stat['system']['name'] }} ({{ $code }})</td>
                            <td>{{ $stat['system']['short'] }}</td>
                            <td>{{ $stat['employee_count'] }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="3">لا توجد بيانات</td></tr>
                    @endforelse
                    <tr class="modal-total-row">
                        <td colspan="2">الإجمالي</td>
                        <td>{{ $totalEmployees }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
function openStatModal(id){document.getElementById(id).classList.add('active')}
function closeStatModal(el){el.closest('.stat-modal-overlay').classList.remove('active')}
document.addEventListener('keydown',function(e){if(e.key==='Escape'){document.querySelectorAll('.stat-modal-overlay.active').forEach(m=>m.classList.remove('active'))}});
</script>
@endsection