@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('payrolls.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="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- تقرير الرواتب الشهري -->
        <div class="bg-white shadow-md rounded-lg overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-center w-12 h-12 rounded-md bg-blue-100 text-blue-600 mb-4">
                    <i class="fas fa-calendar-alt text-l"></i>
                </div>
                <h3 class="text-lg font-medium text-black mb-2">تقرير الرواتب الشهري</h3>
                <p class="text-sm text-black mb-4">عرض تقرير مفصل للرواتب حسب الشهر مع إمكانية التصفية والتصدير.</p>
                <a href="{{ route('payroll-reports.monthly') }}" class="inline-flex items-center p-4 py-2 border border-transparent text-sm font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200">
                    عرض التقرير <i class="fas fa-arrow-left mr-2"></i>
                </a>
            </div>
        </div>

        <!-- تقرير الرواتب السنوي -->
        <div class="bg-white shadow-md rounded-lg overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-center w-12 h-12 rounded-md bg-green-100 text-green-600 mb-4">
                    <i class="fas fa-chart-line text-l"></i>
                </div>
                <h3 class="text-lg font-medium text-black mb-2">تقرير الرواتب السنوي</h3>
                <p class="text-sm text-black mb-4">عرض تقرير إجمالي للرواتب على مدار السنة مع رسوم بيانية توضيحية.</p>
                <a href="{{ route('payroll-reports.annual') }}" class="inline-flex items-center p-4 py-2 border border-transparent text-sm font-medium rounded-md text-green-700 bg-green-100 hover:bg-green-200">
                    عرض التقرير <i class="fas fa-arrow-left mr-2"></i>
                </a>
            </div>
        </div>

        <!-- تقرير الضرائب -->
        <div class="bg-white shadow-md rounded-lg overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-center w-12 h-12 rounded-md bg-purple-100 text-purple-600 mb-4">
                    <i class="fas fa-file-invoice-dollar text-l"></i>
                </div>
                <h3 class="text-lg font-medium text-black mb-2">تقرير الضرائب</h3>
                <p class="text-sm text-black mb-4">عرض تقرير مفصل للضرائب المستقطعة من الرواتب حسب الفترة.</p>
                <a href="{{ route('payroll-reports.ta') }}" class="inline-flex items-center p-4 py-2 border border-transparent text-sm font-medium rounded-md text-purple-700 bg-purple-100 hover:bg-purple-200">
                    عرض التقرير <i class="fas fa-arrow-left mr-2"></i>
                </a>
            </div>
        </div>

        <!-- تقرير التأمينات الاجتماعية -->
        <div class="bg-white shadow-md rounded-lg overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-center w-12 h-12 rounded-md bg-yellow-100 text-yellow-600 mb-4">
                    <i class="fas fa-shield-alt text-l"></i>
                </div>
                <h3 class="text-lg font-medium text-black mb-2">تقرير التأمينات الاجتماعية</h3>
                <p class="text-sm text-black mb-4">عرض تقرير مفصل لاستقطاعات التأمينات الاجتماعية (GOSI) حسب الفترة.</p>
                <a href="{{ route('payroll-reports.insurance') }}" class="inline-flex items-center p-4 py-2 border border-transparent text-sm font-medium rounded-md text-yellow-700 bg-yellow-100 hover:bg-yellow-200">
                    عرض التقرير <i class="fas fa-arrow-left mr-2"></i>
                </a>
            </div>
        </div>
    </div>
</div>
@endsection