@extends('layouts.app')
@section('content')
<div class="p-6">
    <!-- Page Header -->
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-black mb-2">ملخص المشتريات حسب الفئة</h1>
        <p class="text-black">تحليل تفصيلي للمشتريات موزعة حسب فئات المنتجات</p>
    </div>

    <!-- Filter Form -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
        <form method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div>
                <label class="block text-sm font-medium text-black mb-2">تاريخ البداية</label>
                <input type="date" name="start_date" value="{{ request('start_date') }}" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md 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="end_date" value="{{ request('end_date') }}" 
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
            </div>
            <div class="flex items-end gap-2">
                <button type="submit" class="flex-1 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors font-medium">
                    <i class="fas fa-search ml-2"></i>بحث
                </button>
                <a href="{{ route('reports.purchase.category-summary') }}" class="flex-1 px-4 py-2 bg-gray-300 text-black rounded-md hover:bg-gray-400 transition-colors font-medium text-center">
                    <i class="fas fa-redo ml-2"></i>إعادة تعيين
                </a>
            </div>
        </form>
    </div>

    <!-- Main Content -->
    <div class="bg-white rounded-lg shadow-md overflow-hidden">
        <!-- Table -->
        <div class="overflow-x-auto">
            <table class="w-full border-collapse">
                <thead>
                    <tr class="bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                        <th class="px-6 py-4 text-right font-semibold">#</th>
                        <th class="px-6 py-4 text-right font-semibold">اسم الفئة</th>
                        <th class="px-6 py-4 text-center font-semibold">عدد الأصناف</th>
                        <th class="px-6 py-4 text-center font-semibold">الكمية الإجمالية</th>
                        <th class="px-6 py-4 text-center font-semibold">المبلغ الإجمالي</th>
                        <th class="px-6 py-4 text-center font-semibold">النسبة المئوية</th>
                        <th class="px-6 py-4 text-center font-semibold">متوسط السعر</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($data as $index => $category)
                    <tr class="border-b border-gray-200 hover:bg-blue-50 transition-colors">
                        <td class="px-6 py-4 text-right font-medium text-black">{{ $index + 1 }}</td>
                        <td class="px-6 py-4 text-right">
                            <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                {{ $category['category'] ?? 'بدون فئة' }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-center text-black">
                            <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-gray-100">
                                {{ $category['item_count'] ?? 0 }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-center text-black">{{ number_format($category['quantity'] ?? 0, 2) }}</td>
                        <td class="px-6 py-4 text-center font-semibold text-black">
                            {{ number_format($category['total_amount'] ?? 0, 2) }} ريال
                        </td>
                        <td class="px-6 py-4 text-center">
                            <div class="flex items-center justify-center gap-2">
                                <div class="w-16 bg-gray-200 rounded-full h-2">
                                    <div class="bg-blue-600 h-2 rounded-full" 
                                        style="width: {{ $data->sum('total_amount') > 0 ? ($category['total_amount'] / $data->sum('total_amount')) * 100 : 0 }}%">
                                    </div>
                                </div>
                                <span class="text-sm font-medium text-black min-w-max">
                                    {{ number_format($data->sum('total_amount') > 0 ? ($category['total_amount'] / $data->sum('total_amount')) * 100 : 0, 1) }}%
                                </span>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-center text-black">
                            {{ number_format($category['item_count'] > 0 ? $category['total_amount'] / $category['item_count'] : 0, 2) }} ريال
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" 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>
            </table>
        </div>

        <!-- Summary Statistics -->
        @if($data && count($data) > 0)
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 p-6 bg-gray-50 border-t border-gray-200">
            <div class="bg-white rounded-lg p-4 shadow-sm border-r-4 border-blue-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-black mb-1">إجمالي الفئات</p>
                        <p class="text-3xl font-bold text-blue-600">{{ count($data) }}</p>
                    </div>
                    <i class="fas fa-layer-group text-4xl text-blue-100"></i>
                </div>
            </div>

            <div class="bg-white rounded-lg p-4 shadow-sm border-r-4 border-green-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-black mb-1">إجمالي الأصناف</p>
                        <p class="text-3xl font-bold text-green-600">{{ $data->sum('item_count') }}</p>
                    </div>
                    <i class="fas fa-boxes text-4xl text-green-100"></i>
                </div>
            </div>

            <div class="bg-white rounded-lg p-4 shadow-sm border-r-4 border-purple-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-black mb-1">إجمالي المشتريات</p>
                        <p class="text-3xl font-bold text-purple-600">{{ number_format($data->sum('total_amount'), 2) }}</p>
                    </div>
                    <i class="fas fa-chart-pie text-4xl text-purple-100"></i>
                </div>
            </div>

            <div class="bg-white rounded-lg p-4 shadow-sm border-r-4 border-orange-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-black mb-1">متوسط الفئة</p>
                        <p class="text-3xl font-bold text-orange-600">{{ number_format($data->sum('total_amount') / count($data), 2) }}</p>
                    </div>
                    <i class="fas fa-chart-bar text-4xl text-orange-100"></i>
                </div>
            </div>
        </div>

        <!-- Top Categories -->
        <div class="p-6 border-t border-gray-200">
            <h3 class="text-lg font-bold text-black mb-4">الفئات الأكثر مشتريات</h3>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                @foreach($data->take(3) as $topCategory)
                <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-lg p-4 border border-blue-200">
                    <div class="flex items-start justify-between mb-2">
                        <h4 class="font-semibold text-black">{{ $topCategory['category'] ?? 'بدون فئة' }}</h4>
                        <i class="fas fa-star text-yellow-400"></i>
                    </div>
                    <p class="text-2xl font-bold text-blue-600 mb-2">{{ number_format($topCategory['total_amount'], 2) }} ريال</p>
                    <p class="text-sm text-black">
                        <span class="font-medium">{{ $topCategory['item_count'] }}</span> صنف
                    </p>
                </div>
                @endforeach
            </div>
        </div>
        @endif
    </div>

    <!-- Export Options -->
    <div class="mt-6 flex gap-3 justify-center no-print">
        <a href="{{ route('reports.purchase.category-summary', array_merge(request()->query(), ['export' => 'true', 'format' => 'excel'])) }}" 
            class="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors font-medium inline-flex items-center gap-2">
            <i class="fas fa-file-excel"></i> تصدير Excel
        </a>
        <a href="{{ route('reports.purchase.category-summary', array_merge(request()->query(), ['export' => 'true', 'format' => 'pdf'])) }}" 
            class="px-6 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors font-medium inline-flex items-center gap-2">
            <i class="fas fa-file-pdf"></i> تصدير PDF
        </a>
        <a href="{{ route('reports.purchase.category-summary', array_merge(request()->query(), ['export' => 'true', 'format' => 'csv'])) }}" 
            class="px-6 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700 transition-colors font-medium inline-flex items-center gap-2">
            <i class="fas fa-file-csv"></i> تصدير CSV
        </a>
    </div>
</div>

<style>
    @media print {
        .no-print {
            display: none;
        }
    }
</style>
@endsection