@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]{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">محرك نهاية الخدمة</h1>
        <p class="page-subtitle">حساب مكافآت نهاية الخدمة وفق أنظمة العمل في 10 دول</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('eos.simulator') }}" class="btn btn-secondary">
            <i class="fas fa-calculator"></i> المحاكي
        </a>
        <a href="{{ route('eos.calculate') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> حساب جديد
        </a>
    </div>
</div>

<div class="stats-grid cols-4">
    <div class="stat-card" onclick="openStatModal('modal-countries')" style="cursor:pointer;">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary);">
            <i class="fas fa-globe"></i>
        </div>
        <div class="stat-value">{{ $configs->count() }}</div>
        <div class="stat-label">دول مدعومة</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-calculations')" style="cursor:pointer;">
        <div class="stat-icon" style="background: var(--success-light); color: var(--success);">
            <i class="fas fa-file-invoice-dollar"></i>
        </div>
        <div class="stat-value">{{ $totalCalculations }}</div>
        <div class="stat-label">إجمالي الحسابات</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-active-employees')" style="cursor:pointer;">
        <div class="stat-icon" style="background: var(--warning-light); color: var(--warning);">
            <i class="fas fa-users"></i>
        </div>
        <div class="stat-value">{{ $activeEmployeeCount }}</div>
        <div class="stat-label">موظفون نشطون</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-liability')" style="cursor:pointer;">
        <div class="stat-icon" style="background: var(--danger-light); color: var(--danger);">
            <i class="fas fa-hand-holding-heart"></i>
        </div>
        <div class="stat-value">{{ number_format($estimatedLiability, 0) }}</div>
        <div class="stat-label">الالتزام التقديري الإجمالي</div>
    </div>
</div>

{{-- Modal: دول مدعومة --}}
<div class="stat-modal-overlay" id="modal-countries" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-globe"></i> الدول المدعومة وصيغ الحساب</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <thead>
                    <tr><th style="text-align:right;">الدولة</th><th style="text-align:right;">اسم النظام</th><th>الحالة</th></tr>
                </thead>
                <tbody>
                    @forelse ($configs as $config)
                        <tr>
                            <td style="text-align:right;"><span class="code-badge">{{ $config->country_code }}</span> {{ $config->country_name_ar }}</td>
                            <td style="text-align:right;">{{ $config->formula_name }}</td>
                            <td>
                                <span class="status-badge {{ $config->is_active ? 'status-active' : 'status-expired' }}">
                                    {{ $config->is_active ? 'نشط' : 'معطل' }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="3">لا توجد إعدادات دول بعد</td></tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr class="modal-total-row">
                        <td colspan="2" style="text-align:right;">إجمالي الدول المدعومة</td>
                        <td>{{ $configs->count() }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

{{-- Modal: إجمالي الحسابات --}}
<div class="stat-modal-overlay" id="modal-calculations" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-file-invoice-dollar"></i> أحدث حسابات نهاية الخدمة</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <thead>
                    <tr><th style="text-align:right;">الموظف</th><th style="text-align:right;">الدولة</th><th style="text-align:right;">نوع الإنهاء</th><th>المبلغ النهائي</th></tr>
                </thead>
                <tbody>
                    @forelse ($recentCalculations as $calc)
                        <tr>
                            <td style="text-align:right;">{{ $calc->employee->name ?? '—' }}</td>
                            <td style="text-align:right;">{{ $calc->config->country_name_ar ?? '—' }}</td>
                            <td style="text-align:right;">{{ $calc->terminationTypeLabel() }}</td>
                            <td>{{ number_format($calc->final_amount, 2) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="4">لا توجد حسابات نهاية خدمة بعد</td></tr>
                    @endforelse
                </tbody>
                <tfoot>
                    <tr class="modal-total-row">
                        <td colspan="3" style="text-align:right;">إجمالي عدد الحسابات (كل الفترات)</td>
                        <td>{{ $totalCalculations }}</td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

{{-- Modal: موظفون نشطون --}}
<div class="stat-modal-overlay" id="modal-active-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 class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <tbody>
                    <tr>
                        <td style="text-align:right;">إجمالي عدد الموظفين النشطين المشمولين بحساب نهاية الخدمة</td>
                        <td>{{ $activeEmployeeCount }}</td>
                    </tr>
                </tbody>
            </table>
            <p style="margin-top:12px; color:var(--text-secondary,#666); font-size:.85rem;">
                هذا العدد يمثل الموظفين النشطين الذين يخضعون لأنظمة نهاية الخدمة في الدول المدعومة، ويُستخدم كأساس لتقدير الالتزام الإجمالي.
            </p>
        </div>
    </div>
</div>

{{-- Modal: الالتزام التقديري الإجمالي --}}
<div class="stat-modal-overlay" id="modal-liability" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-hand-holding-heart"></i> تفاصيل الالتزام التقديري الإجمالي</h3>
            <button class="stat-modal-close" onclick="closeStatModal(this)">&times;</button>
        </div>
        <div class="stat-modal-body">
            <table>
                <tbody>
                    <tr>
                        <td style="text-align:right;">الالتزام التقديري الإجمالي (تقديري لجميع الموظفين النشطين)</td>
                        <td>{{ number_format($estimatedLiability, 0) }}</td>
                    </tr>
                    <tr>
                        <td style="text-align:right;">عدد الموظفين النشطين المشمولين</td>
                        <td>{{ $activeEmployeeCount }}</td>
                    </tr>
                </tbody>
            </table>
            <h4 style="margin:16px 0 8px; font-size:.9rem;">آخر الحسابات المرصودة</h4>
            <table>
                <thead>
                    <tr><th style="text-align:right;">الموظف</th><th style="text-align:right;">الدولة</th><th>المبلغ النهائي</th></tr>
                </thead>
                <tbody>
                    @forelse ($recentCalculations as $calc)
                        <tr>
                            <td style="text-align:right;">{{ $calc->employee->name ?? '—' }}</td>
                            <td style="text-align:right;">{{ $calc->config->country_name_ar ?? '—' }}</td>
                            <td>{{ number_format($calc->final_amount, 2) }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="3">لا توجد بيانات</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>الدول المدعومة وصيغ الحساب</h3>
        <a href="{{ route('eos.configs') }}" class="btn btn-secondary">
            <i class="fas fa-cog"></i> إدارة الإعدادات
        </a>
    </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>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($configs as $config)
                        <tr>
                            <td><span class="code-badge">{{ $config->country_code }}</span> {{ $config->country_name_ar }}</td>
                            <td>{{ $config->formula_name }}</td>
                            <td>
                                @if($config->calculation_base === 'basic_only') الأساسي فقط
                                @elseif($config->calculation_base === 'basic_housing') الأساسي + السكن
                                @else الراتب الإجمالي
                                @endif
                            </td>
                            <td>{{ $config->max_months ? $config->max_months . ' شهر' : 'بدون حد' }}</td>
                            <td>
                                <span class="status-badge {{ $config->is_active ? 'status-active' : 'status-expired' }}">
                                    {{ $config->is_active ? 'نشط' : 'معطل' }}
                                </span>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="5">
                            <div class="empty-state">لا توجد إعدادات دول بعد. شغّل seed_eos.php أولاً.</div>
                        </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>أحدث الحسابات</h3>
        <a href="{{ route('eos.calculations') }}" class="btn btn-secondary">عرض الكل</a>
    </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>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($recentCalculations as $calc)
                        <tr>
                            <td>{{ $calc->employee->name ?? '—' }}</td>
                            <td>{{ $calc->config->country_name_ar ?? '—' }}</td>
                            <td>{{ $calc->terminationTypeLabel() }}</td>
                            <td>{{ $calc->total_years }}</td>
                            <td>{{ number_format($calc->final_amount, 2) }}</td>
                            <td>
                                <span class="status-badge {{ $calc->status === 'paid' ? 'status-active' : ($calc->status === 'approved' ? 'status-pending' : 'status-draft') }}">
                                    {{ $calc->statusLabel() }}
                                </span>
                            </td>
                            <td><a href="{{ route('eos.showCalculation', $calc) }}" class="btn btn-secondary">عرض</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="7">
                            <div class="empty-state">لا توجد حسابات نهاية خدمة بعد</div>
                        </td></tr>
                    @endforelse
                </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