@extends('layouts.app')

@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">
        <!-- Page Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">قائمة فواتير المشتريات</h1>
                    <p class="text-black">عرض وإدارة جميع فواتير المشتريات من الموردين</p>
                </div>
                <div class="flex gap-3">
                    <a href="#" onclick="printReport()" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all">
                        <i class="fas fa-print mr-2"></i> طباعة
                    </a>
                    <a href="{{ route('reports.purchase.invoice-list', array_merge(request()->query(), ['export' => 'true', 'format' => 'excel'])) }}" class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-all">
                        <i class="fas fa-download mr-2"></i> Excel
                    </a>
                    <a href="{{ route('reports.purchase.invoice-list', array_merge(request()->query(), ['export' => 'true', 'format' => 'pdf'])) }}" class="inline-flex items-center px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-all">
                        <i class="fas fa-file-pdf mr-2"></i> PDF
                    </a>
                </div>
            </div>
        </div>

        <!-- Success/Error Messages -->
        @if(session('success'))
        <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-check-circle text-green-500 text-xl"></i>
                </div>
                <div class="mr-3">
                    <p class="text-green-700 font-medium">{{ session('success') }}</p>
                </div>
            </div>
        </div>
        @endif

        @if(session('error'))
        <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6 rounded-r-lg">
            <div class="flex">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                </div>
                <div class="mr-3">
                    <p class="text-red-700 font-medium">{{ session('error') }}</p>
                </div>
            </div>
        </div>
        @endif

        <!-- Filters -->
        <div class="bg-white rounded-xl shadow-lg border border-gray-200 p-6 mb-6">
            <h2 class="text-lg font-semibold text-black mb-4">
                <i class="fas fa-filter mr-2 text-blue-600"></i> تصفية النتائج
            </h2>
            
            <form action="{{ route('reports.purchase.invoice-list') }}" method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
                <!-- Start Date -->
                <div>
                    <label for="start_date" class="block text-sm font-medium text-black mb-2">
                        من التاريخ
                    </label>
                    <input type="date" id="start_date" name="start_date" 
                        value="{{ request('start_date') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>

                <!-- End Date -->
                <div>
                    <label for="end_date" class="block text-sm font-medium text-black mb-2">
                        إلى التاريخ
                    </label>
                    <input type="date" id="end_date" name="end_date" 
                        value="{{ request('end_date') }}"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>

                <!-- Supplier -->
                <div>
                    <label for="supplier_id" class="block text-sm font-medium text-black mb-2">
                        المورد
                    </label>
                    <select id="supplier_id" name="supplier_id" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">جميع الموردين</option>
                        @foreach($data->pluck('supplier')->unique('id') as $supplier)
                            <option value="{{ $supplier->id }}" 
                                {{ request('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                {{ $supplier->name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Status -->
                <div>
                    <label for="status" class="block text-sm font-medium text-black mb-2">
                        حالة الدفع
                    </label>
                    <select id="status" name="status" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                        <option value="">جميع الحالات</option>
                        <option value="paid" {{ request('status') == 'paid' ? 'selected' : '' }}>
                            مدفوعة
                        </option>
                        <option value="partial" {{ request('status') == 'partial' ? 'selected' : '' }}>
                            مدفوعة جزئياً
                        </option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>
                            معلقة
                        </option>
                        <option value="overdue" {{ request('status') == 'overdue' ? 'selected' : '' }}>
                            متأخرة
                        </option>
                    </select>
                </div>

                <!-- Button -->
                <div class="flex items-end gap-2">
                    <button type="submit" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all font-medium">
                        <i class="fas fa-search mr-2"></i> بحث
                    </button>
                    <a href="{{ route('reports.purchase.invoice-list') }}" class="px-4 py-2 bg-gray-200 text-black rounded-lg hover:bg-gray-300 transition-all font-medium">
                        <i class="fas fa-redo mr-2"></i> إعادة تعيين
                    </a>
                </div>
            </form>
        </div>

        <div id="printable-report">
        <!-- Statistics Cards -->
        <div class="stats grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <div class="stat-box bg-white rounded-lg shadow p-4 border-l-4 border-blue-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="label text-black text-sm">إجمالي الفواتير</p>
                        <p class="value text-2xl font-bold text-black">{{ $data->total() ?? 0 }}</p>
                    </div>
                    <i class="no-print fas fa-file-invoice text-3xl text-blue-200"></i>
                </div>
            </div>

            <div class="stat-box bg-white rounded-lg shadow p-4 border-l-4 border-green-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="label text-black text-sm">إجمالي المبالغ</p>
                        <p class="value text-2xl font-bold text-black">{{ number_format($data->sum('total_amount') ?? 0, 2) }}</p>
                    </div>
                    <i class="no-print fas fa-money-bill-wave text-3xl text-green-200"></i>
                </div>
            </div>

            <div class="stat-box bg-white rounded-lg shadow p-4 border-l-4 border-yellow-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="label text-black text-sm">المتبقي</p>
                        <p class="value text-2xl font-bold text-black">{{ number_format($data->sum('remaining_amount') ?? 0, 2) }}</p>
                    </div>
                    <i class="no-print fas fa-hourglass-end text-3xl text-yellow-200"></i>
                </div>
            </div>

            <div class="stat-box bg-white rounded-lg shadow p-4 border-l-4 border-purple-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="label text-black text-sm">المدفوع</p>
                        <p class="value text-2xl font-bold text-black">{{ number_format($data->sum('paid_amount') ?? 0, 2) }}</p>
                    </div>
                    <i class="no-print fas fa-check-circle text-3xl text-purple-200"></i>
                </div>
            </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-center font-semibold text-sm">الحالة</th>
                            <th class="no-print px-6 py-4 text-center font-semibold text-sm">الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($data as $invoice)
                        <tr class="hover:bg-blue-50 transition-colors duration-150 border-b border-gray-100">
                            <td class="px-6 py-4 text-black font-medium">{{ $loop->iteration + ($data->currentPage() - 1) * 50 }}</td>
                            <td class="px-6 py-4">
                                <div class="font-semibold text-black">{{ $invoice->invoice_number }}</div>
                                <div class="text-sm text-black">{{ $invoice->id }}</div>
                            </td>
                            <td class="px-6 py-4">
                                <div class="font-medium text-black">{{ $invoice->supplier->name ?? 'N/A' }}</div>
                                <div class="text-sm text-black">{{ $invoice->supplier->city ?? '' }}</div>
                            </td>
                            <td class="px-6 py-4 text-black">
                                {{ $invoice->invoice_date->format('Y-m-d') ?? 'N/A' }}
                            </td>
                            <td class="px-6 py-4 font-medium text-black">
                                {{ number_format($invoice->total_amount, 2) }} ر.س
                            </td>
                            <td class="px-6 py-4 font-medium text-green-600">
                                {{ number_format($invoice->paid_amount, 2) }} ر.س
                            </td>
                            <td class="px-6 py-4 font-medium text-orange-600">
                                {{ number_format($invoice->remaining_amount, 2) }} ر.س
                            </td>
                            <td class="px-6 py-4 text-center">
                                @if($invoice->payment_status == 'paid')
                                    <span class="badge badge-green inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-700">
                                        <span class="w-2 h-2 bg-green-500 rounded-full ml-2"></span>
                                        مدفوعة
                                    </span>
                                @elseif($invoice->payment_status == 'partial')
                                    <span class="badge badge-yellow inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-700">
                                        <span class="w-2 h-2 bg-yellow-500 rounded-full ml-2"></span>
                                        جزئي
                                    </span>
                                @elseif($invoice->payment_status == 'overdue')
                                    <span class="badge badge-red inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-700">
                                        <span class="w-2 h-2 bg-red-500 rounded-full ml-2"></span>
                                        متأخرة
                                    </span>
                                @else
                                    <span class="badge badge-gray inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-black">
                                        <span class="w-2 h-2 bg-gray-500 rounded-full ml-2"></span>
                                        معلقة
                                    </span>
                                @endif
                            </td>
                            <td class="no-print px-6 py-4 text-center">
                                <div class="flex justify-center gap-2">
                                    <a href="{{ route('reports.purchase.invoice-details', $invoice->id) }}" 
                                        class="inline-flex items-center px-3 py-2 rounded-lg bg-blue-100 text-blue-600 hover:bg-blue-200 transition-all duration-150 text-sm font-medium whitespace-nowrap" 
                                        title="عرض التفاصيل">
                                        <i class="fas fa-eye mr-1"></i> عرض
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="9" 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>
                                    <p class="text-black text-sm mt-1">جرب تغيير معاملات البحث</p>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                    <tfoot class="bg-gray-50 border-t-2 border-gray-200">
                        <tr>
                            <td colspan="4" class="px-6 py-4 text-left font-semibold text-black">الإجمالي</td>
                            <td class="px-6 py-4 font-semibold text-black">
                                {{ number_format($data->sum('total_amount'), 2) }} ر.س
                            </td>
                            <td class="px-6 py-4 font-semibold text-green-600">
                                {{ number_format($data->sum('paid_amount'), 2) }} ر.س
                            </td>
                            <td class="px-6 py-4 font-semibold text-orange-600">
                                {{ number_format($data->sum('remaining_amount'), 2) }} ر.س
                            </td>
                            <td colspan="2"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>

        </div>
        </div>

        <!-- Pagination -->
        <div class="no-print">
        @if($data->hasPages())
        <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
            <div class="flex justify-center">
                {{ $data->links() }}
            </div>
        </div>
        @endif
        </div>
    </div>
</div>

@push('styles')
<style>
@media print {
    body * { visibility: hidden; }
    #printable-report, #printable-report * { visibility: visible; }
    #printable-report { position: absolute; top: 0; left: 0; width: 100%; direction: rtl; }
    .no-print { display: none !important; }
}
</style>
@endpush

@push('scripts')
<script>
    function printReport() {
        var printContent = document.getElementById('printable-report').innerHTML;
        var win = window.open('', '_blank', 'width=1100,height=800');
        win.document.write('<html dir="rtl"><head>');
        win.document.write('<meta charset="UTF-8">');
        win.document.write('<title>قائمة فواتير المشتريات</title>');
        win.document.write('<style>');
        win.document.write('body { font-family: Arial, sans-serif; direction: rtl; margin: 20px; color: #111; }');
        win.document.write('h1 { font-size: 22px; font-weight: bold; text-align: center; margin-bottom: 4px; }');
        win.document.write('p.subtitle { text-align: center; color: #555; margin-bottom: 16px; font-size: 13px; }');
        win.document.write('.stats { display: flex; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }');
        win.document.write('.stat-box { flex: 1; min-width: 140px; border: 1px solid #ddd; border-radius: 8px; padding: 12px 16px; text-align: center; }');
        win.document.write('.stat-box .label { font-size: 12px; color: #666; margin-bottom: 4px; }');
        win.document.write('.stat-box .value { font-size: 18px; font-weight: bold; color: #111; }');
        win.document.write('table { width: 100%; border-collapse: collapse; font-size: 13px; }');
        win.document.write('thead tr { background: #1f2937; color: #fff; }');
        win.document.write('th, td { border: 1px solid #d1d5db; padding: 8px 12px; text-align: right; }');
        win.document.write('tbody tr:nth-child(even) { background: #f9fafb; }');
        win.document.write('tfoot tr { background: #f3f4f6; font-weight: bold; }');
        win.document.write('.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; }');
        win.document.write('.badge-green { background: #d1fae5; color: #065f46; }');
        win.document.write('.badge-yellow { background: #fef3c7; color: #92400e; }');
        win.document.write('.badge-red { background: #fee2e2; color: #991b1b; }');
        win.document.write('.badge-gray { background: #f3f4f6; color: #374151; }');
        win.document.write('.print-header { text-align: center; margin-bottom: 20px; border-bottom: 2px solid #e5e7eb; padding-bottom: 12px; }');
        win.document.write('.print-date { text-align: left; font-size: 11px; color: #6b7280; margin-bottom: 16px; }');
        win.document.write('.no-print { display: none !important; }');
        win.document.write('</style>');
        win.document.write('</head><body>');
        win.document.write('<div class="print-header">');
        win.document.write('<h1>قائمة فواتير المشتريات</h1>');
        win.document.write('<p class="subtitle">عرض وإدارة جميع فواتير المشتريات من الموردين</p>');
        win.document.write('</div>');
        win.document.write('<div class="print-date">تاريخ الطباعة: ' + new Date().toLocaleDateString('ar-SA') + '</div>');
        win.document.write(printContent);
        win.document.write('</body></html>');
        win.document.close();
        win.focus();
        setTimeout(function() { win.print(); win.close(); }, 500);
    }
</script>
@endpush
@endsection