@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">تفاصيل كشف الراتب: {{ $payroll->payroll_number }}</h1>
        
        <div class="flex space-y-2 space-y-reverse">
            <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>
            
            @if($payroll->status == 'draft')
                @can('update', $payroll)
                <a href="{{ route('payrolls.edit', $payroll) }}" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 p-4 rounded mr-2">
                    <i class="fas fa-edit ml-1"></i> تعديل
                </a>
                @endcan
                
                @can('approve', $payroll)
                <form action="{{ route('payrolls.approve', $payroll) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 p-4 rounded mr-2" onclick="return confirm('هل أنت متأكد من اعتماد كشف الرواتب هذا؟')">
                        <i class="fas fa-check ml-1"></i> اعتماد
                    </button>
                </form>
                @endcan
            @endif
            
            @if($payroll->status == 'approved')
                @can('markAsPaid', $payroll)
                <form action="{{ route('payrolls.markAsPaid', $payroll) }}" method="POST" class="inline">
                    @csrf
                    <button type="submit" class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 p-4 rounded mr-2" onclick="return confirm('هل أنت متأكد من تحديث حالة كشف الرواتب إلى مدفوع؟')">
                        <i class="fas fa-money-bill-wave ml-1"></i> تحديث إلى مدفوع
                    </button>
                </form>
                @endcan
            @endif
        </div>
    </div>

    @if(session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 p-4 py-3 rounded relative mb-4" role="alert">
        <span class="block sm:inline">{{ session('success') }}</span>
    </div>
    @endif

    @if($errors->any())
    <div class="bg-red-100 border border-red-400 text-red-700 p-4 py-3 rounded relative mb-4" role="alert">
        <ul class="list-disc list-inside">
            @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif

    <!-- معلومات كشف الراتب -->
    <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-3 gap-6 mb-6">
            <div>
                <p class="text-sm font-medium text-black">رقم الكشف</p>
                <p class="mt-1 text-sm text-black">{{ $payroll->payroll_number }}</p>
            </div>
            
            <div>
                <p class="text-sm font-medium text-black">الشهر/السنة</p>
                <p class="mt-1 text-sm text-black">{{ $payroll->month }}/{{ $payroll->year }}</p>
            </div>
            
            <div>
                <p class="text-sm font-medium text-black">الحالة</p>
                <p class="mt-1">
                    @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
                </p>
            </div>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
            <div>
                <p class="text-sm font-medium text-black">تاريخ البداية</p>
                <p class="mt-1 text-sm text-black">{{ $payroll->start_date->format('Y-m-d') }}</p>
            </div>
            
            <div>
                <p class="text-sm font-medium text-black">تاريخ النهاية</p>
                <p class="mt-1 text-sm text-black">{{ $payroll->end_date->format('Y-m-d') }}</p>
            </div>
            
            <div>
                <p class="text-sm font-medium text-black">تاريخ الدفع</p>
                <p class="mt-1 text-sm text-black">{{ $payroll->payment_date->format('Y-m-d') }}</p>
            </div>
        </div>
        
        <div class="mb-6">
            <p class="text-sm font-medium text-black">ملاحظات</p>
            <p class="mt-1 text-sm text-black">{{ $payroll->notes ?: 'لا توجد ملاحظات' }}</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="bg-gray-50 p-4 rounded-lg">
                <p class="text-sm font-medium text-black">إجمالي الرواتب الأساسية</p>
                <p class="mt-1 text-lg font-semibold text-black">{{ number_format($payroll->total_basic_salary, 2) }} ريال</p>
            </div>
            
            <div class="bg-gray-50 p-4 rounded-lg">
                <p class="text-sm font-medium text-black">إجمالي البدلات</p>
                <p class="mt-1 text-lg font-semibold text-black">{{ number_format($payroll->total_housing_allowance + $payroll->total_transportation_allowance + $payroll->total_other_allowances, 2) }} ريال</p>
            </div>
            
            <div class="bg-gray-50 p-4 rounded-lg">
                <p class="text-sm font-medium text-black">إجمالي الخصومات</p>
                <p class="mt-1 text-lg font-semibold text-black">{{ number_format($payroll->total_deductions + $payroll->total_gosi + $payroll->total_ta, 2) }} ريال</p>
            </div>
            
            <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($payroll->total_net_salary, 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($payrollItems->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>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @foreach($payrollItems as $item)
                    <tr>
                        <td class="p-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-black">{{ $item->employee->name }}</div>
                            <div class="text-sm text-black">{{ $item->employee->employee_number }}</div>
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($item->basic_salary, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($item->housing_allowance + $item->transportation_allowance + $item->other_allowances, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($item->bonuses, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($item->deductions + $item->loan_deduction, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($item->gosi_deduction, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                            {{ number_format($item->ta_deduction, 2) }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-medium text-blue-900">
                            {{ number_format($item->net_salary, 2) }}
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="p-6 py-4">
            {{ $payrollItems->links() }}
        </div>
        @else
        <div class="p-6 py-4 text-center text-black">
            لا توجد بنود في كشف الراتب.
        </div>
        @endif
    </div>
</div>
@endsection