@extends('layouts.app')
@section('title', 'ملخص الرواتب السنوي')

@section('content')
<div class="page-header">
    <div>
        <h1 class="page-title">ملخص الرواتب السنوي</h1>
        <p class="page-subtitle">للتدقيق والضرائب — {{ $year }}</p>
    </div>
    <div class="page-actions">
        <form method="GET" style="display:flex; gap:0.5rem; align-items:center;">
            <select name="year" class="form-select" onchange="this.form.submit()" style="width:auto;">
                @foreach($years as $y)
                    <option value="{{ $y }}" {{ $y == $year ? 'selected' : '' }}>{{ $y }}</option>
                @endforeach
                @if($years->isEmpty())
                    <option value="{{ date('Y') }}">{{ date('Y') }}</option>
                @endif
            </select>
        </form>
        <a href="{{ route('compliance.index') }}" class="btn btn-secondary"><i class="fas fa-arrow-right"></i> رجوع</a>
    </div>
</div>

<div class="stats-grid cols-4">
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--primary-light); color: var(--primary);"><i class="fas fa-money-bill"></i></div>
        <div class="stat-value">{{ number_format($annualTotals['basic'], 0) }}</div>
        <div class="stat-label">إجمالي الراتب الأساسي</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--success-light); color: var(--success);"><i class="fas fa-plus-circle"></i></div>
        <div class="stat-value">{{ number_format($annualTotals['allowances'], 0) }}</div>
        <div class="stat-label">إجمالي البدلات</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: var(--danger-light); color: var(--danger);"><i class="fas fa-minus-circle"></i></div>
        <div class="stat-value">{{ number_format($annualTotals['deductions'], 0) }}</div>
        <div class="stat-label">إجمالي الخصومات</div>
    </div>
    <div class="stat-card">
        <div class="stat-icon" style="background: #e0f2f1; color: #00695c;"><i class="fas fa-wallet"></i></div>
        <div class="stat-value">{{ number_format($annualTotals['net'], 0) }}</div>
        <div class="stat-label">صافي المستحق</div>
    </div>
</div>

<div class="card" style="margin-top:1.5rem;">
    <div class="card-header"><h3 class="card-title">البيانات الشهرية — {{ $year }}</h3></div>
    <div class="card-body">
        @if(count($monthlyData) > 0)
        <div class="table-responsive">
            <table class="data-table">
                <thead>
                    <tr>
                        <th>الشهر</th>
                        <th>الراتب الأساسي</th>
                        <th>البدلات</th>
                        <th>الخصومات</th>
                        <th>الصافي</th>
                        <th>الحالة</th>
                    </tr>
                </thead>
                <tbody>
                @php
                    $arabicMonths = ['01'=>'يناير','02'=>'فبراير','03'=>'مارس','04'=>'أبريل','05'=>'مايو','06'=>'يونيو','07'=>'يوليو','08'=>'أغسطس','09'=>'سبتمبر','10'=>'أكتوبر','11'=>'نوفمبر','12'=>'ديسمبر'];
                @endphp
                @foreach($monthlyData as $m)
                @php $monthNum = substr($m['month'], -2); @endphp
                <tr>
                    <td>{{ $arabicMonths[$monthNum] ?? $m['month'] }}</td>
                    <td>{{ number_format($m['total_basic'], 0) }}</td>
                    <td>{{ number_format($m['total_allowances'], 0) }}</td>
                    <td>{{ number_format($m['total_deductions'], 0) }}</td>
                    <td style="font-weight:600;">{{ number_format($m['total_net'], 0) }}</td>
                    <td>
                        @if($m['status'] == 'paid')
                            <span class="status-badge status-active">مدفوع</span>
                        @elseif($m['status'] == 'approved')
                            <span class="status-badge status-pending">معتمد</span>
                        @else
                            <span class="status-badge status-draft">{{ $m['status'] }}</span>
                        @endif
                    </td>
                </tr>
                @endforeach
                </tbody>
                <tfoot>
                    <tr style="font-weight:700; background:var(--bg);">
                        <td>الإجمالي السنوي</td>
                        <td>{{ number_format($annualTotals['basic'], 0) }}</td>
                        <td>{{ number_format($annualTotals['allowances'], 0) }}</td>
                        <td>{{ number_format($annualTotals['deductions'], 0) }}</td>
                        <td>{{ number_format($annualTotals['net'], 0) }}</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
        @else
        <div class="empty-state">
            <i class="fas fa-file-invoice-dollar" style="font-size:3rem; color:var(--text-muted); margin-bottom:1rem;"></i>
            <p>لا توجد بيانات رواتب لسنة {{ $year }}</p>
        </div>
        @endif
    </div>
</div>
@endsection