@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-4xl font-bold text-black mb-2">
                        <i class="fas fa-chart-pie text-blue-600 ml-2"></i>تحليل ABC
                    </h1>
                    <p class="text-black">تحليل تصنيف الموردين حسب قيمة المشتريات</p>
                </div>
                <div class="flex gap-2">
                    <a href="?export=true&format=excel" class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition">
                        <i class="fas fa-file-excel ml-2"></i>Excel
                    </a>
                    <a href="?export=true&format=pdf" class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition">
                        <i class="fas fa-file-pdf ml-2"></i>PDF
                    </a>
                </div>
            </div>
        </div>

        <!-- Alert Messages -->
        @if(session('success'))
        <div class="bg-green-50 border-l-4 border-green-500 p-4 mb-6 rounded-r-lg">
            <p class="text-green-700 font-medium">{{ session('success') }}</p>
        </div>
        @endif

        <!-- Summary Cards -->
        <div class="grid grid-cols-1 md:grid-cols-5 gap-6 mb-8">
            <!-- Total Suppliers -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-blue-600">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm">إجمالي الموردين</p>
                        <h3 class="text-3xl font-bold text-black">{{ $data['total_suppliers'] ?? 0 }}</h3>
                    </div>
                    <i class="fas fa-users text-blue-600 text-4xl opacity-20"></i>
                </div>
            </div>

            <!-- Category A -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-green-600">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm">الفئة A</p>
                        <h3 class="text-3xl font-bold text-green-600">{{ $data['a_category'] ?? 0 }}</h3>
                        <p class="text-xs text-black mt-1">(0 - 80%)</p>
                    </div>
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-arrow-up text-green-600"></i>
                    </div>
                </div>
            </div>

            <!-- Category B -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-yellow-600">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm">الفئة B</p>
                        <h3 class="text-3xl font-bold text-yellow-600">{{ $data['b_category'] ?? 0 }}</h3>
                        <p class="text-xs text-black mt-1">(80 - 95%)</p>
                    </div>
                    <div class="w-12 h-12 bg-yellow-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-align-justify text-yellow-600"></i>
                    </div>
                </div>
            </div>

            <!-- Category C -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-red-600">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm">الفئة C</p>
                        <h3 class="text-3xl font-bold text-red-600">{{ $data['c_category'] ?? 0 }}</h3>
                        <p class="text-xs text-black mt-1">(95% فما فوق)</p>
                    </div>
                    <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
                        <i class="fas fa-arrow-down text-red-600"></i>
                    </div>
                </div>
            </div>

            <!-- Total Purchases -->
            <div class="bg-white rounded-xl shadow-lg p-6 border-t-4 border-purple-600">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm">إجمالي المشتريات</p>
                        <h3 class="text-2xl font-bold text-black">
                            {{ number_format($data['total_purchases'] ?? 0, 2) }}
                        </h3>
                        <p class="text-xs text-black mt-1">ر.س</p>
                    </div>
                    <i class="fas fa-chart-line text-purple-600 text-4xl opacity-20"></i>
                </div>
            </div>
        </div>

        <!-- Charts Section -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
            <!-- Category Distribution Chart -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h2 class="text-lg font-bold text-black mb-4">
                    <i class="fas fa-chart-doughnut ml-2 text-blue-600"></i>توزيع الفئات
                </h2>
                <canvas id="categoryChart" height="300"></canvas>
            </div>

            <!-- Cumulative Percentage Chart -->
            <div class="bg-white rounded-xl shadow-lg p-6">
                <h2 class="text-lg font-bold text-black mb-4">
                    <i class="fas fa-chart-line ml-2 text-green-600"></i>النسبة المئوية التراكمية
                </h2>
                <canvas id="cumulativeChart" height="300"></canvas>
            </div>
        </div>

        <!-- Detailed Table -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
            <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                <h2 class="text-lg font-bold">
                    <i class="fas fa-table ml-2"></i>تفاصيل الموردين
                </h2>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50 border-b border-gray-200">
                        <tr>
                            <th class="px-6 py-4 text-right font-semibold text-sm text-black">#</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm text-black">اسم المورد</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm text-black">المشتريات (ر.س)</th>
                            <th class="px-6 py-4 text-center font-semibold text-sm text-black">النسبة %</th>
                            <th class="px-6 py-4 text-center font-semibold text-sm text-black">النسبة التراكمية %</th>
                            <th class="px-6 py-4 text-center font-semibold text-sm text-black">الفئة</th>
                            <th class="px-6 py-4 text-center font-semibold text-sm text-black">التقييم</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @if(isset($data['details']) && count($data['details']) > 0)
                            @foreach($data['details'] as $key => $supplier)
                            <tr class="hover:bg-blue-50 transition-colors duration-150">
                                <td class="px-6 py-4 text-black font-medium">{{ $key + 1 }}</td>
                                <td class="px-6 py-4">
                                    <div class="font-semibold text-black">{{ $supplier['name'] }}</div>
                                    <p class="text-xs text-black">معرّف: {{ $supplier['supplier_id'] }}</p>
                                </td>
                                <td class="px-6 py-4 text-left">
                                    <span class="font-semibold text-black">
                                        {{ number_format($supplier['total_purchases'], 2) }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <div class="w-full bg-gray-200 rounded-full h-2">
                                        <div class="bg-blue-600 h-2 rounded-full" 
                                             style="width: {{ $supplier['percentage'] ?? 0 }}%"></div>
                                    </div>
                                    <p class="text-sm text-black mt-1">{{ $supplier['percentage'] ?? 0 }}%</p>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <span class="text-sm font-semibold text-black">
                                        {{ $supplier['cumulative_percentage'] ?? 0 }}%
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    @if($supplier['category'] === 'A')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-green-100 text-green-800">
                                            <span class="w-2 h-2 bg-green-600 rounded-full ml-2"></span>
                                            الفئة A
                                        </span>
                                    @elseif($supplier['category'] === 'B')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-yellow-100 text-yellow-800">
                                            <span class="w-2 h-2 bg-yellow-600 rounded-full ml-2"></span>
                                            الفئة B
                                        </span>
                                    @elseif($supplier['category'] === 'C')
                                        <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-bold bg-red-100 text-red-800">
                                            <span class="w-2 h-2 bg-red-600 rounded-full ml-2"></span>
                                            الفئة C
                                        </span>
                                    @endif
                                </td>
                                <td class="px-6 py-4 text-center">
                                    @php
                                        $rating = 0;
                                        if($supplier['category'] === 'A') $rating = 5;
                                        elseif($supplier['category'] === 'B') $rating = 3;
                                        else $rating = 2;
                                    @endphp
                                    <div class="flex justify-center gap-1">
                                        @for($i = 0; $i < 5; $i++)
                                            @if($i < $rating)
                                                <i class="fas fa-star text-yellow-500"></i>
                                            @else
                                                <i class="far fa-star text-black"></i>
                                            @endif
                                        @endfor
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        @else
                            <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>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Analysis Summary -->
        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- A Category Insight -->
            <div class="bg-gradient-to-br from-green-50 to-green-100 rounded-xl shadow-lg p-6 border border-green-200">
                <h3 class="text-lg font-bold text-green-900 mb-4">
                    <i class="fas fa-lightbulb ml-2"></i>الفئة A - الموردون الحيويون
                </h3>
                <p class="text-green-800 text-sm mb-4">
                    الموردون الذين يمثلون ما يصل إلى 80% من قيمة المشتريات. يتطلبون اهتماماً وثيقاً وإدارة استراتيجية.
                </p>
                <div class="bg-white rounded-lg p-3 mt-4">
                    <p class="text-2xl font-bold text-green-600">{{ $data['a_category'] ?? 0 }}</p>
                    <p class="text-xs text-black">موردون في الفئة A</p>
                </div>
            </div>

            <!-- B Category Insight -->
            <div class="bg-gradient-to-br from-yellow-50 to-yellow-100 rounded-xl shadow-lg p-6 border border-yellow-200">
                <h3 class="text-lg font-bold text-yellow-900 mb-4">
                    <i class="fas fa-lightbulb ml-2"></i>الفئة B - الموردون المهمون
                </h3>
                <p class="text-yellow-800 text-sm mb-4">
                    الموردون الذين يمثلون من 80% إلى 95% من قيمة المشتريات. يتطلبون إدارة عادية وانتباهاً منتظماً.
                </p>
                <div class="bg-white rounded-lg p-3 mt-4">
                    <p class="text-2xl font-bold text-yellow-600">{{ $data['b_category'] ?? 0 }}</p>
                    <p class="text-xs text-black">موردون في الفئة B</p>
                </div>
            </div>

            <!-- C Category Insight -->
            <div class="bg-gradient-to-br from-red-50 to-red-100 rounded-xl shadow-lg p-6 border border-red-200">
                <h3 class="text-lg font-bold text-red-900 mb-4">
                    <i class="fas fa-lightbulb ml-2"></i>الفئة C - الموردون الإضافيون
                </h3>
                <p class="text-red-800 text-sm mb-4">
                    الموردون الذين يمثلون أكثر من 95% من قيمة المشتريات. يتطلبون إدارة استراتيجية منخفضة.
                </p>
                <div class="bg-white rounded-lg p-3 mt-4">
                    <p class="text-2xl font-bold text-red-600">{{ $data['c_category'] ?? 0 }}</p>
                    <p class="text-xs text-black">موردون في الفئة C</p>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div class="mt-8 text-center text-black text-sm">
            <p>تم إنشاء التقرير: {{ now()->format('Y-m-d H:i') }}</p>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Category Distribution Chart
        const categoryCtx = document.getElementById('categoryChart');
        if(categoryCtx) {
            new Chart(categoryCtx, {
                type: 'doughnut',
                data: {
                    labels: ['الفئة A', 'الفئة B', 'الفئة C'],
                    datasets: [{
                        data: [
                            {{ $data['a_category'] ?? 0 }},
                            {{ $data['b_category'] ?? 0 }},
                            {{ $data['c_category'] ?? 0 }}
                        ],
                        backgroundColor: [
                            'rgba(34, 197, 94, 0.8)',
                            'rgba(202, 138, 4, 0.8)',
                            'rgba(220, 38, 38, 0.8)'
                        ],
                        borderColor: [
                            'rgba(34, 197, 94, 1)',
                            'rgba(202, 138, 4, 1)',
                            'rgba(220, 38, 38, 1)'
                        ],
                        borderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                padding: 20
                            }
                        }
                    }
                }
            });
        }

        // Cumulative Percentage Chart
        const cumulativeCtx = document.getElementById('cumulativeChart');
        if(cumulativeCtx) {
            const details = @json($data['details'] ?? []);
            const labels = details.map(d => d.name.substring(0, 15));
            const percentages = details.map(d => parseFloat(d.cumulative_percentage) || 0);

            new Chart(cumulativeCtx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'النسبة التراكمية %',
                        data: percentages,
                        borderColor: 'rgba(59, 130, 246, 1)',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        borderWidth: 3,
                        fill: true,
                        tension: 0.4,
                        pointRadius: 5,
                        pointBackgroundColor: 'rgba(59, 130, 246, 1)',
                        pointBorderColor: '#fff',
                        pointBorderWidth: 2
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                usePointStyle: true
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100,
                            ticks: {
                                callback: function(value) {
                                    return value + '%';
                                }
                            }
                        }
                    }
                }
            });
        }
    });
</script>
@endpush
@endsection