@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.monthly') }}" method="GET" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-4 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>
                    <label for="month" class="block text-sm font-medium text-black mb-1">الشهر</label>
                    <select id="month" name="month" 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">
                        <option value="">جميع الشهور</option>
                        <option value="1" {{ request('month') == '1' ? 'selected' : '' }}>يناير</option>
                        <option value="2" {{ request('month') == '2' ? 'selected' : '' }}>فبراير</option>
                        <option value="3" {{ request('month') == '3' ? 'selected' : '' }}>مارس</option>
                        <option value="4" {{ request('month') == '4' ? 'selected' : '' }}>أبريل</option>
                        <option value="5" {{ request('month') == '5' ? 'selected' : '' }}>مايو</option>
                        <option value="6" {{ request('month') == '6' ? 'selected' : '' }}>يونيو</option>
                        <option value="7" {{ request('month') == '7' ? 'selected' : '' }}>يوليو</option>
                        <option value="8" {{ request('month') == '8' ? 'selected' : '' }}>أغسطس</option>
                        <option value="9" {{ request('month') == '9' ? 'selected' : '' }}>سبتمبر</option>
                        <option value="10" {{ request('month') == '10' ? 'selected' : '' }}>أكتوبر</option>
                        <option value="11" {{ request('month') == '11' ? 'selected' : '' }}>نوفمبر</option>
                        <option value="12" {{ request('month') == '12' ? 'selected' : '' }}>ديسمبر</option>
                    </select>
                </div>
                
                <div>
                    <label for="department" class="block text-sm font-medium text-black mb-1">القسم</label>
                    <select id="department" name="department" 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">
                        <option value="">جميع الأقسام</option>
                        @foreach($departments ?? [] as $dept)
                            <option value="{{ $dept->id }}" {{ request('department') == $dept->id ? 'selected' : '' }}>{{ $dept->name }}</option>
                        @endforeach
                    </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.monthly') }}" 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">ملخص التقرير</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($summary->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(($summary->total_housing_allowance ?? 0) + ($summary->total_transportation_allowance ?? 0) + ($summary->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(($summary->total_deductions ?? 0) + ($summary->total_gosi ?? 0) + ($summary->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($summary->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">تفاصيل التقرير</h2>
        </div>
        
        @if(isset($payrolls) && $payrolls->count() > 0)
        <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">
                    @foreach($payrolls as $payroll)
                    <tr>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            <a href="{{ route('payrolls.show', $payroll) }}" class="text-blue-600 hover:text-blue-900">
                                {{ $payroll->payroll_number }}
                            </a>
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ $payroll->month }}/{{ $payroll->year }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ $payroll->items_count ?? 0 }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($payroll->total_basic_salary, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($payroll->total_housing_allowance + $payroll->total_transportation_allowance + $payroll->total_other_allowances, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($payroll->total_bonuses, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($payroll->total_deductions, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($payroll->total_gosi, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($payroll->total_ta, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-medium text-blue-900">
                            {{ number_format($payroll->total_net_salary, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap">
                            @if($payroll->status == 'draft')
                            <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                                مسودة
                            </span>
                            @elseif($payroll->status == 'approved')
                            <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                معتمد
                            </span>
                            @elseif($payroll->status == 'paid')
                            <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                مدفوع
                            </span>
                            @elseif($payroll->status == 'cancelled')
                            <span class="p-2 inline-flex text-s leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                ملغي
                            </span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="p-6 py-4">
            {{ $payrolls->links() }}
        </div>
        @else
        <div class="p-6 py-4 text-center text-black">
            لا توجد بيانات متاحة للفترة المحددة.
        </div>
        @endif
    </div>
</div>
@endsection