@extends('layouts.app')

@section('title', 'تقرير الرواتب السنوي')

@section('content')
<div class="container m-auto p-4 sm:p-6 lg:p-8 py-8">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2l font-bold text-black">تقرير الرواتب السنوي</h1>
        
        <a href="{{ route('payroll-reports.index') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 p-4 rounded">
            <i class="fas fa-arrow-right ml-1"></i> العودة إلى التقارير
        </a>
    </div>

    <!-- نموذج البحث والتصفية -->
    <div class="bg-white shadow-md rounded-lg overflow-hidden p-6 mb-6">
        <form action="{{ route('payroll-reports.annual') }}" method="GET" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label for="year" class="block text-sm font-medium text-black mb-1">السنة</label>
                    <select id="year" name="year" class="mt-1 block w-full py-2 p-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                        @for($y = date('Y'); $y >= 2020; $y--)
                            <option value="{{ $y }}" {{ request('year', date('Y')) == $y ? 'selected' : '' }}>{{ $y }}</option>
                        @endfor
                    </select>
                </div>
                
                <div class="flex items-end">
                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 p-4 rounded">
                        <i class="fas fa-search ml-1"></i> بحث
                    </button>
                    
                    <a href="{{ route('payroll-reports.annual') }}" class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 p-4 rounded mr-2">
                        <i class="fas fa-redo ml-1"></i> إعادة تعيين
                    </a>
                    
                    <button type="button" onclick="window.print()" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 p-4 rounded mr-2">
                        <i class="fas fa-print ml-1"></i> طباعة
                    </button>
                </div>
            </div>
        </form>
    </div>

    <!-- ملخص التقرير -->
    <div class="bg-white shadow-md rounded-lg overflow-hidden p-6 mb-6">
        <h2 class="text-l font-semibold text-black mb-4">ملخص التقرير السنوي - {{ $year }}</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="bg-blue-50 p-4 rounded-lg">
                <p class="text-sm font-medium text-blue-500">إجمالي الرواتب الأساسية</p>
                <p class="mt-1 text-lg font-semibold text-blue-900">{{ number_format($yearlyTotals['total_basic_salary'] ?? 0, 2) }} ريال</p>
            </div>
            
            <div class="bg-green-50 p-4 rounded-lg">
                <p class="text-sm font-medium text-green-500">إجمالي البدلات</p>
                <p class="mt-1 text-lg font-semibold text-green-900">{{ number_format(($yearlyTotals['total_housing_allowance'] ?? 0) + ($yearlyTotals['total_transportation_allowance'] ?? 0) + ($yearlyTotals['total_other_allowances'] ?? 0), 2) }} ريال</p>
            </div>
            
            <div class="bg-red-50 p-4 rounded-lg">
                <p class="text-sm font-medium text-red-500">إجمالي الخصومات</p>
                <p class="mt-1 text-lg font-semibold text-red-900">{{ number_format(($yearlyTotals['total_deductions'] ?? 0) + ($yearlyTotals['total_gosi'] ?? 0) + ($yearlyTotals['total_ta'] ?? 0), 2) }} ريال</p>
            </div>
            
            <div class="bg-purple-50 p-4 rounded-lg">
                <p class="text-sm font-medium text-purple-500">صافي الرواتب</p>
                <p class="mt-1 text-lg font-semibold text-purple-900">{{ number_format($yearlyTotals['total_net_salary'] ?? 0, 2) }} ريال</p>
            </div>
        </div>
    </div>

    <!-- تفاصيل التقرير -->
    <div class="bg-white shadow-md rounded-lg overflow-hidden">
        <div class="p-6 py-4 border-b border-gray-200">
            <h2 class="text-l font-semibold text-black">تفاصيل التقرير الشهري للسنة {{ $year }}</h2>
        </div>
        
        <div class="overflow--auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">
                            الشهر
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">
                            الرواتب الأساسية
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">
                            بدل السكن
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">
                            بدل النقل
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">
                            بدلات أخرى
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">
                            المكافآت
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">
                            الخصومات
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">
                            التأمينات
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">
                            الضرائب
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">
                            صافي الرواتب
                        </th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">
                            الحالة
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @php
                        $months = [
                            1 => 'يناير',
                            2 => 'فبراير',
                            3 => 'مارس',
                            4 => 'أبريل',
                            5 => 'مايو',
                            6 => 'يونيو',
                            7 => 'يوليو',
                            8 => 'أغسطس',
                            9 => 'سبتمبر',
                            10 => 'أكتوبر',
                            11 => 'نوفمبر',
                            12 => 'ديسمبر'
                        ];
                    @endphp
                    
                    @foreach($months as $monthNum => $monthName)
                    <tr>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-medium text-black">
                            {{ $monthName }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($monthlyTotals[$monthNum]['total_basic_salary'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($monthlyTotals[$monthNum]['total_housing_allowance'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($monthlyTotals[$monthNum]['total_transportation_allowance'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($monthlyTotals[$monthNum]['total_other_allowances'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($monthlyTotals[$monthNum]['total_bonuses'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($monthlyTotals[$monthNum]['total_deductions'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($monthlyTotals[$monthNum]['total_gosi'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($monthlyTotals[$monthNum]['total_ta'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-medium text-blue-900">
                            {{ number_format($monthlyTotals[$monthNum]['total_net_salary'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap">
                            @if(isset($monthlyTotals[$monthNum]['status']))
                                @if($monthlyTotals[$monthNum]['status'] == 'draft')
                                <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                    مسودة
                                </span>
                                @elseif($monthlyTotals[$monthNum]['status'] == 'approved')
                                <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                    معتمد
                                </span>
                                @elseif($monthlyTotals[$monthNum]['status'] == 'paid')
                                <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                    مدفوع
                                </span>
                                @elseif($monthlyTotals[$monthNum]['status'] == 'cancelled')
                                <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                    ملغي
                                </span>
                                @endif
                            @else
                                <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-gray-100 text-black">
                                    غير متوفر
                                </span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
                <tfoot class="bg-gray-50">
                    <tr>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">
                            الإجمالي
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">
                            {{ number_format($yearlyTotals['total_basic_salary'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">
                            {{ number_format($yearlyTotals['total_housing_allowance'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">
                            {{ number_format($yearlyTotals['total_transportation_allowance'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">
                            {{ number_format($yearlyTotals['total_other_allowances'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">
                            {{ number_format($yearlyTotals['total_bonuses'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">
                            {{ number_format($yearlyTotals['total_deductions'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">
                            {{ number_format($yearlyTotals['total_gosi'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">
                            {{ number_format($yearlyTotals['total_ta'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-blue-900">
                            {{ number_format($yearlyTotals['total_net_salary'] ?? 0, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap">
                        </td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
@endsection