@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">
        <!-- Header Section -->
        <div class="flex justify-between items-start mb-8">
            <div>
                <h1 class="text-4xl font-bold text-black mb-2">تقرير قبول الجودة</h1>
                <p class="text-black">تحليل جودة السلع المستقبلة والمنتجات المقبولة والمرفوضة</p>
            </div>
            <div class="flex gap-2">
                <button onclick="window.print()" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg">
                    <i class="fas fa-print mr-2"></i>طباعة
                </button>
                <a href="{{ route('reports.purchase.quality-acceptance', ['export' => true, 'format' => 'excel']) }}" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-green-600 to-green-700 text-white font-semibold rounded-lg hover:from-green-700 hover:to-green-800 transition-all duration-200 shadow-lg">
                    <i class="fas fa-file-excel mr-2"></i>تحميل Excel
                </a>
                <a href="{{ route('reports.purchase.quality-acceptance', ['export' => true, 'format' => 'pdf']) }}" class="inline-flex items-center px-4 py-2 bg-gradient-to-r from-red-600 to-red-700 text-white font-semibold rounded-lg hover:from-red-700 hover:to-red-800 transition-all duration-200 shadow-lg">
                    <i class="fas fa-file-pdf mr-2"></i>تحميل PDF
                </a>
            </div>
        </div>

        @php
            $dataCollection = is_array($data) ? collect($data) : ($data ?? collect());
            $totalRecords = $dataCollection->count();
            $hasData = $totalRecords > 0;
            
            $acceptedItems = $dataCollection->filter(function($item) { return ($item['status'] ?? '') === 'accepted'; });
            $rejectedItems = $dataCollection->filter(function($item) { return ($item['status'] ?? '') === 'rejected'; });
            $acceptedCount = $acceptedItems->count();
            $rejectedCount = $rejectedItems->count();
        @endphp

        @if($hasData)
        <!-- Statistics Cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg p-6 shadow-md border border-blue-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-semibold">إجمالي المنتجات المفحوصة</p>
                        <p class="text-3xl font-bold text-blue-600">{{ $totalRecords }}</p>
                    </div>
                    <i class="fas fa-boxes text-4xl text-blue-300"></i>
                </div>
            </div>

            <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg p-6 shadow-md border border-green-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-semibold">المنتجات المقبولة</p>
                        <p class="text-3xl font-bold text-green-600">{{ $acceptedCount }}</p>
                        <p class="text-xs text-green-700 mt-1">{{ $totalRecords > 0 ? number_format(($acceptedCount / $totalRecords) * 100, 2) : 0 }}%</p>
                    </div>
                    <i class="fas fa-check-circle text-4xl text-green-300"></i>
                </div>
            </div>

            <div class="bg-gradient-to-br from-red-50 to-red-100 rounded-lg p-6 shadow-md border border-red-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-semibold">المنتجات المرفوضة</p>
                        <p class="text-3xl font-bold text-red-600">{{ $rejectedCount }}</p>
                        <p class="text-xs text-red-700 mt-1">{{ $totalRecords > 0 ? number_format(($rejectedCount / $totalRecords) * 100, 2) : 0 }}%</p>
                    </div>
                    <i class="fas fa-times-circle text-4xl text-red-300"></i>
                </div>
            </div>

            <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-6 shadow-md border border-purple-200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-semibold">معدل القبول</p>
                        <p class="text-3xl font-bold text-purple-600">{{ $totalRecords > 0 ? number_format(($acceptedCount / $totalRecords) * 100, 2) : 0 }}%</p>
                    </div>
                    <i class="fas fa-chart-pie text-4xl text-purple-300"></i>
                </div>
            </div>
        </div>

        <!-- Charts Row -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
                <h3 class="text-lg font-semibold text-black mb-4">توزيع القبول والرفض</h3>
                <canvas id="acceptanceChart" height="80"></canvas>
            </div>

            <div class="bg-white rounded-lg shadow-md p-6 border border-gray-200">
                <h3 class="text-lg font-semibold text-black mb-4">أسباب الرفض</h3>
                <canvas id="rejectionChart" height="80"></canvas>
            </div>
        </div>

        <!-- Main Data Table -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8 overflow-x-auto border border-gray-200">
            <h3 class="text-lg font-semibold text-black mb-4">تفاصيل الفحوصات</h3>
            <table class="w-full text-sm">
                <thead>
                    <tr class="bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                        <th class="px-4 py-3 text-right">#</th>
                        <th class="px-4 py-3 text-right">المورد</th>
                        <th class="px-4 py-3 text-right">المنتج</th>
                        <th class="px-4 py-3 text-center">الكمية</th>
                        <th class="px-4 py-3 text-center">تاريخ الفحص</th>
                        <th class="px-4 py-3 text-center">الحالة</th>
                        <th class="px-4 py-3 text-right">الملاحظات</th>
                        <th class="px-4 py-3 text-center">الفاحص</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($dataCollection as $index => $item)
                        <tr class="border-b hover:bg-blue-50 transition-colors duration-150">
                            <td class="px-4 py-3 text-black font-medium">{{ $index + 1 }}</td>
                            <td class="px-4 py-3 font-semibold text-black">{{ $item['supplier_name'] ?? 'N/A' }}</td>
                            <td class="px-4 py-3 text-black">{{ $item['product_name'] ?? 'N/A' }}</td>
                            <td class="px-4 py-3 text-center font-semibold">{{ $item['quantity'] ?? 0 }}</td>
                            <td class="px-4 py-3 text-center text-black">
                                {{ $item['inspection_date'] ? \Carbon\Carbon::parse($item['inspection_date'])->format('Y-m-d') : 'N/A' }}
                            </td>
                            <td class="px-4 py-3 text-center">
                                @if(($item['status'] ?? '') === 'accepted')
                                    <span class="inline-block bg-green-100 text-green-700 px-3 py-1 rounded-full font-semibold text-xs">
                                        <i class="fas fa-check-circle mr-1"></i>مقبول
                                    </span>
                                @elseif(($item['status'] ?? '') === 'rejected')
                                    <span class="inline-block bg-red-100 text-red-700 px-3 py-1 rounded-full font-semibold text-xs">
                                        <i class="fas fa-times-circle mr-1"></i>مرفوض
                                    </span>
                                @else
                                    <span class="inline-block bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full font-semibold text-xs">
                                        <i class="fas fa-hourglass-half mr-1"></i>قيد الفحص
                                    </span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-black">{{ $item['rejection_reason'] ?? '-' }}</td>
                            <td class="px-4 py-3 text-center text-black">{{ $item['inspector_name'] ?? 'N/A' }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Summary Sections -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-lg shadow-md p-6 border border-green-200">
                <h3 class="text-lg font-bold text-green-900 mb-4">
                    <i class="fas fa-check text-green-600 mr-2"></i>المنتجات المقبولة
                </h3>
                <div class="space-y-3">
                    @forelse($acceptedItems as $item)
                        <div class="bg-white rounded p-3 border-l-4 border-green-500">
                            <p class="font-semibold text-black">{{ $item['product_name'] ?? 'N/A' }}</p>
                            <p class="text-sm text-black">المورد: {{ $item['supplier_name'] ?? 'N/A' }}</p>
                            <p class="text-sm text-black">الكمية: {{ $item['quantity'] ?? 0 }}</p>
                        </div>
                    @empty
                        <p class="text-black text-sm italic">لا توجد منتجات مقبولة</p>
                    @endforelse
                </div>
            </div>

            <div class="bg-gradient-to-br from-red-50 to-red-100 rounded-lg shadow-md p-6 border border-red-200">
                <h3 class="text-lg font-bold text-red-900 mb-4">
                    <i class="fas fa-times text-red-600 mr-2"></i>المنتجات المرفوضة
                </h3>
                <div class="space-y-3">
                    @forelse($rejectedItems as $item)
                        <div class="bg-white rounded p-3 border-l-4 border-red-500">
                            <p class="font-semibold text-black">{{ $item['product_name'] ?? 'N/A' }}</p>
                            <p class="text-sm text-black">السبب: {{ $item['rejection_reason'] ?? 'غير محدد' }}</p>
                            <p class="text-sm text-black">الكمية المرفوضة: {{ $item['quantity'] ?? 0 }}</p>
                        </div>
                    @empty
                        <p class="text-black text-sm italic">لا توجد منتجات مرفوضة</p>
                    @endforelse
                </div>
            </div>
        </div>

        <!-- Quality Metrics Information -->
        <div class="bg-blue-50 border-l-4 border-blue-500 rounded-lg p-6 mb-8">
            <h3 class="text-lg font-bold text-blue-900 mb-4">
                <i class="fas fa-info-circle text-blue-600 mr-2"></i>معايير جودة الفحص
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm text-black">
                <div class="bg-white rounded p-3">
                    <p class="font-semibold text-blue-900">المقبول</p>
                    <p class="text-black">المنتج يستوفي جميع معايير الجودة المطلوبة</p>
                </div>
                <div class="bg-white rounded p-3">
                    <p class="font-semibold text-blue-900">المرفوض</p>
                    <p class="text-black">المنتج لا يستوفي معايير الجودة أو به عيوب</p>
                </div>
                <div class="bg-white rounded p-3">
                    <p class="font-semibold text-blue-900">معدل القبول</p>
                    <p class="text-black">نسبة المنتجات المقبولة من الإجمالي</p>
                </div>
            </div>
        </div>

        @else
        <!-- Empty State -->
        <div class="bg-white rounded-lg shadow-md p-12 text-center border border-gray-200">
            <i class="fas fa-inbox text-6xl text-black mb-4"></i>
            <h3 class="text-2xl font-bold text-black mb-2">لا توجد بيانات</h3>
            <p class="text-black">لم يتم العثور على فحوصات جودة في الفترة المحددة</p>
        </div>
        @endif
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const data = @json($dataCollection ?? []);
        
        @if($hasData)
        // Chart 1: Acceptance Distribution
        const acceptanceCtx = document.getElementById('acceptanceChart').getContext('2d');
        new Chart(acceptanceCtx, {
            type: 'doughnut',
            data: {
                labels: ['مقبول', 'مرفوض'],
                datasets: [{
                    data: [{{ $acceptedCount }}, {{ $rejectedCount }}],
                    backgroundColor: ['#10b981', '#ef4444'],
                    borderColor: ['#059669', '#dc2626'],
                    borderWidth: 2
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { position: 'bottom' }
                }
            }
        });

        // Chart 2: Rejection Reasons
        const rejectionReasons = {};
        data.forEach(item => {
            if (item.status === 'rejected' && item.rejection_reason) {
                rejectionReasons[item.rejection_reason] = (rejectionReasons[item.rejection_reason] || 0) + 1;
            }
        });

        const rejectionCtx = document.getElementById('rejectionChart').getContext('2d');
        new Chart(rejectionCtx, {
            type: 'bar',
            data: {
                labels: Object.keys(rejectionReasons),
                datasets: [{
                    label: 'عدد الحالات',
                    data: Object.values(rejectionReasons),
                    backgroundColor: '#ef4444',
                    borderColor: '#dc2626',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                indexAxis: 'y',
                plugins: { legend: { display: false } }
            }
        });
        @endif
    });
</script>
@endpush
@endsection