@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">محرك التأمينات الاجتماعية متعدد الدول</h1>
        <p class="page-subtitle">إدارة إعدادات وحسابات التأمينات الاجتماعية عبر الدول المختلفة</p>
    </div>
    <div class="page-actions">
        <a href="{{ route('social-insurance.calculate') }}" class="btn btn-primary">
            <i class="fas fa-calculator"></i> حساب شهري جديد
        </a>
        <a href="{{ route('social-insurance.configs') }}" 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-configs')">
        <div class="stat-icon"><i class="fas fa-list"></i></div>
        <div class="stat-value">{{ $totalConfigs }}</div>
        <div class="stat-label">إجمالي الإعدادات</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-active-configs')">
        <div class="stat-icon"><i class="fas fa-check-circle"></i></div>
        <div class="stat-value">{{ $activeConfigs }}</div>
        <div class="stat-label">إعدادات نشطة</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-countries-covered')">
        <div class="stat-icon"><i class="fas fa-globe"></i></div>
        <div class="stat-value">{{ $countriesCovered }}</div>
        <div class="stat-label">دول مغطاة</div>
    </div>
    <div class="stat-card" onclick="openStatModal('modal-contribution-month')">
        <div class="stat-icon"><i class="fas fa-hand-holding-usd"></i></div>
        <div class="stat-value">{{ number_format($totalContributionThisMonth, 2) }}</div>
        <div class="stat-label">إجمالي اشتراكات هذا الشهر</div>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>الإعدادات حسب الدولة</h3>
    </div>
    <div class="card-body">
        @if($configsByCountry->isEmpty())
            <div class="empty-state">
                <i class="fas fa-inbox"></i>
                <p>لا توجد إعدادات تأمينات اجتماعية بعد</p>
                <a href="{{ route('social-insurance.createConfig') }}" class="btn btn-primary">إضافة إعداد جديد</a>
            </div>
        @else
            <div class="form-grid cols-3">
                @foreach($configsByCountry as $countryCode => $configs)
                    <div class="card">
                        <div class="card-header">
                            <h4><i class="fas fa-flag"></i> {{ $countries[$countryCode] ?? $countryCode }} ({{ $countryCode }})</h4>
                        </div>
                        <div class="card-body">
                            @foreach($configs as $config)
                                <div style="margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border, #eee);">
                                    <strong>{{ $config->scheme_name }}</strong>
                                    <span class="status-badge {{ $config->is_active ? 'status-active' : 'status-draft' }}">
                                        {{ $config->is_active ? 'نشط' : 'غير نشط' }}
                                    </span>
                                    <div style="font-size: 13px; color: #666; margin-top: 4px;">
                                        {{ $config->appliesToLabel() }} &mdash; {{ $config->calculationBaseLabel() }}
                                    </div>
                                    <div style="font-size: 13px; margin-top: 4px;">
                                        <span class="code-badge">موظف {{ $config->employee_percentage }}%</span>
                                        <span class="code-badge">صاحب عمل {{ $config->employer_percentage }}%</span>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</div>

{{-- Modal: إجمالي الإعدادات --}}
<div class="stat-modal-overlay" id="modal-total-configs" onclick="if(event.target===this)this.classList.remove('active')">
    <div class="stat-modal">
        <div class="stat-modal-header">
            <h3><i class="fas fa-list"></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 ($configsByCountry as $countryCode => $configs)
                        @foreach ($configs as $config)
                            <tr>
                                <td>{{ $countries[$countryCode] ?? $countryCode }} ({{ $countryCode }})</td>
                                <td>{{ $config->scheme_name }}</td>
                                <td><span class="status-badge {{ $config->is_active ? 'status-active' : 'status-draft' }}">{{ $config->is_active ? 'نشط' : 'غير نشط' }}</span></td>
                            </tr>
                        @endforeach
                    @empty
                        <tr><td colspan="3">لا توجد إعدادات</td></tr>
                    @endforelse
                    <tr class="modal-total-row">
                        <td colspan="2">الإجمالي</td>
                        <td>{{ $totalConfigs }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal: إعدادات نشطة --}}
<div class="stat-modal-overlay" id="modal-active-configs" 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>
                <thead>
                    <tr>
                        <th>الدولة</th>
                        <th>اسم النظام</th>
                        <th>نسبة الموظف</th>
                        <th>نسبة صاحب العمل</th>
                    </tr>
                </thead>
                <tbody>
                    @php $anyActive = false; @endphp
                    @forelse ($configsByCountry as $countryCode => $configs)
                        @foreach ($configs->where('is_active', true) as $config)
                            @php $anyActive = true; @endphp
                            <tr>
                                <td>{{ $countries[$countryCode] ?? $countryCode }} ({{ $countryCode }})</td>
                                <td>{{ $config->scheme_name }}</td>
                                <td>{{ $config->employee_percentage }}%</td>
                                <td>{{ $config->employer_percentage }}%</td>
                            </tr>
                        @endforeach
                    @empty
                    @endforelse
                    @if(!$anyActive)
                        <tr><td colspan="4">لا توجد إعدادات نشطة</td></tr>
                    @endif
                    <tr class="modal-total-row">
                        <td colspan="3">الإجمالي النشط</td>
                        <td>{{ $activeConfigs }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal: دول مغطاة --}}
<div class="stat-modal-overlay" id="modal-countries-covered" 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 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 ($configsByCountry as $countryCode => $configs)
                        <tr>
                            <td><i class="fas fa-flag"></i> {{ $countries[$countryCode] ?? $countryCode }}</td>
                            <td><span class="code-badge">{{ $countryCode }}</span></td>
                            <td>{{ $configs->count() }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="3">لا توجد دول مغطاة بعد</td></tr>
                    @endforelse
                    <tr class="modal-total-row">
                        <td colspan="2">إجمالي الدول</td>
                        <td>{{ $countriesCovered }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- Modal: إجمالي اشتراكات هذا الشهر --}}
<div class="stat-modal-overlay" id="modal-contribution-month" 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-usd"></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>
                        <th>نسبة صاحب العمل</th>
                        <th>الإجمالي</th>
                        <th>النسبة من الإعدادات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($configsByCountry as $countryCode => $configs)
                        @foreach ($configs as $config)
                            @php
                                $configTotalPct = $config->employee_percentage + $config->employer_percentage;
                            @endphp
                            <tr>
                                <td>{{ $countries[$countryCode] ?? $countryCode }} ({{ $countryCode }})</td>
                                <td>{{ $config->scheme_name }}</td>
                                <td>{{ $config->employee_percentage }}%</td>
                                <td>{{ $config->employer_percentage }}%</td>
                                <td>{{ $configTotalPct }}%</td>
                                <td>{{ $totalConfigs > 0 ? number_format((1 / $totalConfigs) * 100, 1) : 0 }}%</td>
                            </tr>
                        @endforeach
                    @empty
                        <tr><td colspan="6">لا توجد بيانات</td></tr>
                    @endforelse
                    <tr class="modal-total-row">
                        <td colspan="4">إجمالي اشتراكات هذا الشهر (كل الدول)</td>
                        <td colspan="2">{{ number_format($totalContributionThisMonth, 2) }}</td>
                    </tr>
                </tbody>
            </table>
            <p class="text-muted" style="margin-top:14px;font-size:.85rem;">
                النسب المعروضة أعلاه هي نسب الاشتراك المحددة في كل إعداد؛ الإجمالي المالي الفعلي محسوب من جميع الحسابات الشهرية المُنجزة هذا الشهر عبر كل الدول.
            </p>
        </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