@extends('layouts.app')

@section('title', 'تقرير الدفعات المحصلة')

@section('content')
<div class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 py-8 px-4 md:px-8">
    <div class="max-w-7xl mx-auto">
        <!-- Header -->
        <div class="mb-8 flex items-center justify-between">
            <div>
                <h1 class="text-3xl font-bold text-black mb-2">💰 الدفعات المحصلة</h1>
                <p class="text-black">تتبع الدفعات المستلمة من العملاء</p>
            </div>
            <a href="{{ route('reports.sales.index') }}" class="inline-flex items-center px-6 py-3 bg-gray-600 text-white rounded-lg hover:bg-gray-700">
                <i class="fas fa-arrow-right mr-2"></i>
                عودة
            </a>
        </div>

        <!-- Filters -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-8 border border-gray-200">
            <form method="GET" class="grid grid-cols-1 md:grid-cols-5 gap-4">
                <div>
                    <label class="block text-sm font-medium text-black mb-2">من التاريخ</label>
                    <input type="date" name="from_date" value="{{ $fromDate }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-black mb-2">إلى التاريخ</label>
                    <input type="date" name="to_date" value="{{ $toDate }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="flex items-end">
                    <button type="submit" class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
                        تحديث
                    </button>
                </div>
                <div class="flex items-end">
                    <button type="button" onclick="window.print()" class="w-full px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium">
                        طباعة
                    </button>
                </div>
                <div class="flex items-end">
                    <a href="{{ route('reports.sales.payments') }}" class="w-full px-4 py-2 bg-gray-300 text-black rounded-lg hover:bg-gray-400 transition-colors font-medium text-center">
                        إعادة تعيين
                    </a>
                </div>
            </form>
        </div>

        <!-- Quick Stats -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <p class="text-black text-sm font-medium mb-2">عدد الدفعات</p>
                <p class="text-3xl font-bold text-blue-600">{{ number_format($count) }}</p>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <p class="text-black text-sm font-medium mb-2">إجمالي المبالغ</p>
                <p class="text-3xl font-bold text-green-600">{{ number_format($total, 0) }}</p>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <p class="text-black text-sm font-medium mb-2">متوسط الدفعة</p>
                <p class="text-3xl font-bold text-purple-600">{{ number_format($average, 0) }}</p>
            </div>
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <p class="text-black text-sm font-medium mb-2">طرق الدفع</p>
                <p class="text-3xl font-bold text-orange-600">{{ $payments->pluck('payment_method')->unique()->count() }}</p>
            </div>
        </div>

        <!-- Table -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                        <tr>
                            <th class="px-6 py-4 text-right font-semibold text-sm">#</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">رقم الدفعة</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">التاريخ</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">العميل</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">رقم الفاتورة</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">طريقة الدفع</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">المبلغ</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">المرجع</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($payments as $payment)
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="px-6 py-4 text-black font-medium">{{ $loop->iteration }}</td>
                            <td class="px-6 py-4 text-black font-mono text-sm">{{ $payment['payment_code'] }}</td>
                            <td class="px-6 py-4 text-black">{{ \Carbon\Carbon::parse($payment['payment_date'])->format('Y-m-d') }}</td>
                            <td class="px-6 py-4 font-semibold text-black">{{ $payment['customer_name'] }}</td>
                            <td class="px-6 py-4 text-black">{{ $payment['invoice_number'] }}</td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium
                                    @if($payment['payment_method'] === 'cash')
                                        bg-green-100 text-green-700
                                    @elseif($payment['payment_method'] === 'bank_transfer')
                                        bg-blue-100 text-blue-700
                                    @elseif($payment['payment_method'] === 'check')
                                        bg-purple-100 text-purple-700
                                    @elseif($payment['payment_method'] === 'credit_card')
                                        bg-orange-100 text-orange-700
                                    @else
                                        bg-gray-100 text-black
                                    @endif
                                ">
                                    @if($payment['payment_method'] === 'cash')
                                        <i class="fas fa-money-bill mr-1"></i> نقداً
                                    @elseif($payment['payment_method'] === 'bank_transfer')
                                        <i class="fas fa-bank mr-1"></i> تحويل بنكي
                                    @elseif($payment['payment_method'] === 'check')
                                        <i class="fas fa-check mr-1"></i> شيك
                                    @elseif($payment['payment_method'] === 'credit_card')
                                        <i class="fas fa-credit-card mr-1"></i> بطاقة
                                    @else
                                        <i class="fas fa-ellipsis-h mr-1"></i> أخرى
                                    @endif
                                </span>
                            </td>
                            <td class="px-6 py-4 font-bold text-green-600">{{ number_format($payment['amount'], 0) }} ر.س</td>
                            <td class="px-6 py-4 text-black text-sm">{{ $payment['reference'] ?? '-' }}</td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="px-6 py-12 text-center">
                                <div class="flex flex-col items-center justify-center">
                                    <i class="fas fa-inbox text-black text-4xl mb-3"></i>
                                    <p class="text-black font-medium">لا توجد دفعات</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                        @if($payments->count() > 0)
                        <tr class="bg-gray-50 font-bold">
                            <td colspan="6" class="px-6 py-4 text-right">الإجمالي</td>
                            <td class="px-6 py-4 text-green-600 text-lg">{{ number_format($total, 0) }} ر.س</td>
                            <td class="px-6 py-4"></td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Payment Methods Summary -->
        @if($payments->count() > 0)
        <div class="mt-8 bg-white rounded-xl shadow-lg p-6 border border-gray-200">
            <h3 class="text-lg font-bold text-black mb-4">📊 توزيع طرق الدفع</h3>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                @php
                    $paymentMethods = $payments->groupBy('payment_method')->map(function($group) {
                        return [
                            'count' => $group->count(),
                            'total' => $group->sum('amount')
                        ];
                    });
                @endphp

                @foreach(['cash' => 'نقداً', 'bank_transfer' => 'تحويل بنكي', 'check' => 'شيك', 'credit_card' => 'بطاقة ائتمان'] as $method => $label)
                    @if(isset($paymentMethods[$method]))
                    <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-4 border border-blue-200">
                        <p class="text-blue-700 text-sm font-medium mb-2">{{ $label }}</p>
                        <p class="text-2xl font-bold text-blue-900">{{ number_format($paymentMethods[$method]['total'], 0) }}</p>
                        <p class="text-xs text-blue-600 mt-1">{{ $paymentMethods[$method]['count'] }} دفعة</p>
                    </div>
                    @endif
                @endforeach
            </div>
        </div>
        @endif
    </div>
</div>
@endsection