@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>
                <a href="{{ route('reports.purchase.index') }}" class="inline-flex items-center px-4 py-2 bg-gray-200 text-black rounded-lg hover:bg-gray-300 transition-all">
                    <i class="fas fa-arrow-left ml-2"></i>
                    العودة
                </a>
            </div>

            <!-- Filter Section -->
            <div class="bg-white rounded-lg shadow p-4 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-1">من التاريخ</label>
                        <input type="date" name="start_date" value="{{ request('start_date', now()->subMonth()->format('Y-m-d')) }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-black mb-1">إلى التاريخ</label>
                        <input type="date" name="end_date" value="{{ request('end_date', now()->format('Y-m-d')) }}" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-black mb-1">المقارنة مع</label>
                        <select name="compare_with" class="w-full px-3 py-2 border border-gray-300 rounded-lg">
                            <option value="previous" {{ request('compare_with', 'previous') === 'previous' ? 'selected' : '' }}>الفترة السابقة</option>
                            <option value="year" {{ request('compare_with') === 'year' ? 'selected' : '' }}>نفس الفترة من السنة الماضية</option>
                        </select>
                    </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-all">
                            <i class="fas fa-search ml-2"></i>
                            بحث
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Summary Cards -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
            <!-- PO Count Card -->
            <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-blue-500">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <p class="text-black text-sm">عدد أوامر الشراء</p>
                        <p class="text-3xl font-bold text-black">{{ $data['current_period']['po_count'] ?? 0 }}</p>
                    </div>
                    <span class="text-3xl text-blue-500"><i class="fas fa-file-invoice"></i></span>
                </div>
                <div class="text-xs">
                    <span class="text-black">الفترة السابقة: </span>
                    <span class="font-bold text-black">{{ $data['previous_period']['po_count'] ?? 0 }}</span>
                </div>
            </div>

            <!-- PO Total Card -->
            <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-green-500">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <p class="text-black text-sm">إجمالي الأوامر</p>
                        <p class="text-3xl font-bold text-black">{{ number_format($data['current_period']['po_total'] ?? 0, 2) }} ر.س</p>
                    </div>
                    <span class="text-3xl text-green-500"><i class="fas fa-money-bill"></i></span>
                </div>
                <div class="flex justify-between items-center mt-2 text-xs">
                    <span class="text-black">التغير</span>
                    <span class="px-2 py-1 rounded-full @if(($data['po_change_percent'] ?? 0) >= 0) bg-green-100 text-green-700 @else bg-red-100 text-red-700 @endif">
                        {{ ($data['po_change_percent'] ?? 0) >= 0 ? '+' : '' }}{{ number_format($data['po_change_percent'] ?? 0, 2) }}%
                    </span>
                </div>
            </div>

            <!-- Invoice Count Card -->
            <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-purple-500">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <p class="text-black text-sm">عدد الفواتير</p>
                        <p class="text-3xl font-bold text-black">{{ $data['current_period']['invoice_count'] ?? 0 }}</p>
                    </div>
                    <span class="text-3xl text-purple-500"><i class="fas fa-receipt"></i></span>
                </div>
                <div class="text-xs">
                    <span class="text-black">الفترة السابقة: </span>
                    <span class="font-bold text-black">{{ $data['previous_period']['invoice_count'] ?? 0 }}</span>
                </div>
            </div>

            <!-- Invoice Total Card -->
            <div class="bg-white rounded-lg shadow-lg p-6 border-l-4 border-orange-500">
                <div class="flex justify-between items-start mb-2">
                    <div>
                        <p class="text-black text-sm">إجمالي الفواتير</p>
                        <p class="text-3xl font-bold text-black">{{ number_format($data['current_period']['invoice_total'] ?? 0, 2) }} ر.س</p>
                    </div>
                    <span class="text-3xl text-orange-500"><i class="fas fa-calculator"></i></span>
                </div>
                <div class="flex justify-between items-center mt-2 text-xs">
                    <span class="text-black">التغير</span>
                    <span class="px-2 py-1 rounded-full @if(($data['invoice_change_percent'] ?? 0) >= 0) bg-green-100 text-green-700 @else bg-red-100 text-red-700 @endif">
                        {{ ($data['invoice_change_percent'] ?? 0) >= 0 ? '+' : '' }}{{ number_format($data['invoice_change_percent'] ?? 0, 2) }}%
                    </span>
                </div>
            </div>
        </div>

        <!-- Comparison Charts -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
            <!-- PO Comparison Chart -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-lg font-semibold text-black mb-4">مقارنة أوامر الشراء</h2>
                <canvas id="poComparisonChart" height="300"></canvas>
            </div>

            <!-- Invoice Comparison Chart -->
            <div class="bg-white rounded-lg shadow-lg p-6">
                <h2 class="text-lg font-semibold text-black mb-4">مقارنة الفواتير</h2>
                <canvas id="invoiceComparisonChart" height="300"></canvas>
            </div>
        </div>

        <!-- Detailed Comparison Table -->
        <div class="bg-white rounded-lg shadow-lg overflow-hidden mb-8">
            <div class="px-6 py-4 bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                <h2 class="text-lg font-semibold">مقارنة مفصلة</h2>
            </div>

            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th class="px-6 py-3 text-right font-semibold text-black">المقياس</th>
                            <th class="px-6 py-3 text-right font-semibold text-black">الفترة الحالية</th>
                            <th class="px-6 py-3 text-right font-semibold text-black">الفترة السابقة</th>
                            <th class="px-6 py-3 text-center font-semibold text-black">الفرق</th>
                            <th class="px-6 py-3 text-center font-semibold text-black">النسبة %</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        <!-- PO Count Row -->
                        <tr class="hover:bg-blue-50 transition-colors">
                            <td class="px-6 py-4 font-semibold text-black">عدد أوامر الشراء</td>
                            <td class="px-6 py-4 text-black">{{ $data['current_period']['po_count'] ?? 0 }}</td>
                            <td class="px-6 py-4 text-black">{{ $data['previous_period']['po_count'] ?? 0 }}</td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-2 py-1 rounded-full @if(($data['current_period']['po_count'] ?? 0) >= ($data['previous_period']['po_count'] ?? 0)) bg-green-100 text-green-700 @else bg-red-100 text-red-700 @endif">
                                    {{ ($data['current_period']['po_count'] ?? 0) - ($data['previous_period']['po_count'] ?? 0) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center font-semibold">
                                @if(($data['previous_period']['po_count'] ?? 0) > 0)
                                    <span class="@if(($data['po_change_percent'] ?? 0) >= 0) text-green-600 @else text-red-600 @endif">
                                        {{ ($data['po_change_percent'] ?? 0) >= 0 ? '+' : '' }}{{ number_format(($data['previous_period']['po_count'] ?? 0) > 0 ? ((($data['current_period']['po_count'] ?? 0) - ($data['previous_period']['po_count'] ?? 0)) / ($data['previous_period']['po_count'] ?? 1)) * 100 : 0, 2) }}%
                                    </span>
                                @else
                                    <span class="text-black">-</span>
                                @endif
                            </td>
                        </tr>

                        <!-- PO Total Row -->
                        <tr class="hover:bg-green-50 transition-colors">
                            <td class="px-6 py-4 font-semibold text-black">إجمالي أوامر الشراء</td>
                            <td class="px-6 py-4 text-black">{{ number_format($data['current_period']['po_total'] ?? 0, 2) }} ر.س</td>
                            <td class="px-6 py-4 text-black">{{ number_format($data['previous_period']['po_total'] ?? 0, 2) }} ر.س</td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-2 py-1 rounded-full @if(($data['current_period']['po_total'] ?? 0) >= ($data['previous_period']['po_total'] ?? 0)) bg-green-100 text-green-700 @else bg-red-100 text-red-700 @endif">
                                    {{ ($data['current_period']['po_total'] ?? 0) >= ($data['previous_period']['po_total'] ?? 0) ? '+' : '' }}{{ number_format(($data['current_period']['po_total'] ?? 0) - ($data['previous_period']['po_total'] ?? 0), 2) }} ر.س
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center font-semibold">
                                <span class="@if(($data['po_change_percent'] ?? 0) >= 0) text-green-600 @else text-red-600 @endif">
                                    {{ ($data['po_change_percent'] ?? 0) >= 0 ? '+' : '' }}{{ number_format($data['po_change_percent'] ?? 0, 2) }}%
                                </span>
                            </td>
                        </tr>

                        <!-- Invoice Count Row -->
                        <tr class="hover:bg-purple-50 transition-colors">
                            <td class="px-6 py-4 font-semibold text-black">عدد الفواتير</td>
                            <td class="px-6 py-4 text-black">{{ $data['current_period']['invoice_count'] ?? 0 }}</td>
                            <td class="px-6 py-4 text-black">{{ $data['previous_period']['invoice_count'] ?? 0 }}</td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-2 py-1 rounded-full @if(($data['current_period']['invoice_count'] ?? 0) >= ($data['previous_period']['invoice_count'] ?? 0)) bg-green-100 text-green-700 @else bg-red-100 text-red-700 @endif">
                                    {{ ($data['current_period']['invoice_count'] ?? 0) - ($data['previous_period']['invoice_count'] ?? 0) }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center font-semibold">
                                @if(($data['previous_period']['invoice_count'] ?? 0) > 0)
                                    <span class="@if(($data['invoice_change_percent'] ?? 0) >= 0) text-green-600 @else text-red-600 @endif">
                                        {{ ($data['invoice_change_percent'] ?? 0) >= 0 ? '+' : '' }}{{ number_format(($data['previous_period']['invoice_count'] ?? 0) > 0 ? ((($data['current_period']['invoice_count'] ?? 0) - ($data['previous_period']['invoice_count'] ?? 0)) / ($data['previous_period']['invoice_count'] ?? 1)) * 100 : 0, 2) }}%
                                    </span>
                                @else
                                    <span class="text-black">-</span>
                                @endif
                            </td>
                        </tr>

                        <!-- Invoice Total Row -->
                        <tr class="hover:bg-orange-50 transition-colors">
                            <td class="px-6 py-4 font-semibold text-black">إجمالي الفواتير</td>
                            <td class="px-6 py-4 text-black">{{ number_format($data['current_period']['invoice_total'] ?? 0, 2) }} ر.س</td>
                            <td class="px-6 py-4 text-black">{{ number_format($data['previous_period']['invoice_total'] ?? 0, 2) }} ر.س</td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-2 py-1 rounded-full @if(($data['current_period']['invoice_total'] ?? 0) >= ($data['previous_period']['invoice_total'] ?? 0)) bg-green-100 text-green-700 @else bg-red-100 text-red-700 @endif">
                                    {{ ($data['current_period']['invoice_total'] ?? 0) >= ($data['previous_period']['invoice_total'] ?? 0) ? '+' : '' }}{{ number_format(($data['current_period']['invoice_total'] ?? 0) - ($data['previous_period']['invoice_total'] ?? 0), 2) }} ر.س
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center font-semibold">
                                <span class="@if(($data['invoice_change_percent'] ?? 0) >= 0) text-green-600 @else text-red-600 @endif">
                                    {{ ($data['invoice_change_percent'] ?? 0) >= 0 ? '+' : '' }}{{ number_format($data['invoice_change_percent'] ?? 0, 2) }}%
                                </span>
                            </td>
                        </tr>

                        <!-- Paid Amount Row -->
                        <tr class="hover:bg-indigo-50 transition-colors">
                            <td class="px-6 py-4 font-semibold text-black">المبالغ المدفوعة</td>
                            <td class="px-6 py-4 text-black">{{ number_format($data['current_period']['paid_amount'] ?? 0, 2) }} ر.س</td>
                            <td class="px-6 py-4 text-black">{{ number_format($data['previous_period']['paid_amount'] ?? 0, 2) }} ر.س</td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-2 py-1 rounded-full @if(($data['current_period']['paid_amount'] ?? 0) >= ($data['previous_period']['paid_amount'] ?? 0)) bg-green-100 text-green-700 @else bg-red-100 text-red-700 @endif">
                                    {{ ($data['current_period']['paid_amount'] ?? 0) >= ($data['previous_period']['paid_amount'] ?? 0) ? '+' : '' }}{{ number_format(($data['current_period']['paid_amount'] ?? 0) - ($data['previous_period']['paid_amount'] ?? 0), 2) }} ر.س
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center font-semibold">
                                @if(($data['previous_period']['paid_amount'] ?? 0) > 0)
                                    <span class="text-indigo-600">
                                        {{ (($data['previous_period']['paid_amount'] ?? 0) > 0 ? ((($data['current_period']['paid_amount'] ?? 0) - ($data['previous_period']['paid_amount'] ?? 0)) / ($data['previous_period']['paid_amount'] ?? 1)) * 100 : 0) >= 0 ? '+' : '' }}{{ number_format(($data['previous_period']['paid_amount'] ?? 0) > 0 ? ((($data['current_period']['paid_amount'] ?? 0) - ($data['previous_period']['paid_amount'] ?? 0)) / ($data['previous_period']['paid_amount'] ?? 1)) * 100 : 0, 2) }}%
                                    </span>
                                @else
                                    <span class="text-black">-</span>
                                @endif
                            </td>
                        </tr>

                        <!-- Pending Payment Row -->
                        <tr class="hover:bg-red-50 transition-colors">
                            <td class="px-6 py-4 font-semibold text-black">المبالغ المعلقة</td>
                            <td class="px-6 py-4 text-black">{{ number_format($data['current_period']['pending_payment'] ?? 0, 2) }} ر.س</td>
                            <td class="px-6 py-4 text-black">{{ number_format($data['previous_period']['pending_payment'] ?? 0, 2) }} ر.س</td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-2 py-1 rounded-full @if(($data['current_period']['pending_payment'] ?? 0) >= ($data['previous_period']['pending_payment'] ?? 0)) bg-red-100 text-red-700 @else bg-green-100 text-green-700 @endif">
                                    {{ ($data['current_period']['pending_payment'] ?? 0) >= ($data['previous_period']['pending_payment'] ?? 0) ? '+' : '' }}{{ number_format(($data['current_period']['pending_payment'] ?? 0) - ($data['previous_period']['pending_payment'] ?? 0), 2) }} ر.س
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center font-semibold">
                                @if(($data['previous_period']['pending_payment'] ?? 0) > 0)
                                    <span class="@if((($data['previous_period']['pending_payment'] ?? 0) > 0 ? ((($data['current_period']['pending_payment'] ?? 0) - ($data['previous_period']['pending_payment'] ?? 0)) / ($data['previous_period']['pending_payment'] ?? 1)) * 100 : 0) >= 0) text-red-600 @else text-green-600 @endif">
                                        {{ (($data['previous_period']['pending_payment'] ?? 0) > 0 ? ((($data['current_period']['pending_payment'] ?? 0) - ($data['previous_period']['pending_payment'] ?? 0)) / ($data['previous_period']['pending_payment'] ?? 1)) * 100 : 0) >= 0 ? '+' : '' }}{{ number_format(($data['previous_period']['pending_payment'] ?? 0) > 0 ? ((($data['current_period']['pending_payment'] ?? 0) - ($data['previous_period']['pending_payment'] ?? 0)) / ($data['previous_period']['pending_payment'] ?? 1)) * 100 : 0, 2) }}%
                                    </span>
                                @else
                                    <span class="text-black">-</span>
                                @endif
                            </td>
                        </tr>

                        <!-- Average PO Value Row -->
                        <tr class="hover:bg-yellow-50 transition-colors">
                            <td class="px-6 py-4 font-semibold text-black">متوسط قيمة الأمر</td>
                            <td class="px-6 py-4 text-black">{{ number_format($data['current_period']['average_po_value'] ?? 0, 2) }} ر.س</td>
                            <td class="px-6 py-4 text-black">{{ number_format($data['previous_period']['average_po_value'] ?? 0, 2) }} ر.س</td>
                            <td class="px-6 py-4 text-center">
                                <span class="px-2 py-1 rounded-full @if(($data['current_period']['average_po_value'] ?? 0) >= ($data['previous_period']['average_po_value'] ?? 0)) bg-green-100 text-green-700 @else bg-red-100 text-red-700 @endif">
                                    {{ ($data['current_period']['average_po_value'] ?? 0) >= ($data['previous_period']['average_po_value'] ?? 0) ? '+' : '' }}{{ number_format(($data['current_period']['average_po_value'] ?? 0) - ($data['previous_period']['average_po_value'] ?? 0), 2) }} ر.س
                                </span>
                            </td>
                            <td class="px-6 py-4 text-center font-semibold">
                                @if(($data['previous_period']['average_po_value'] ?? 0) > 0)
                                    <span class="@if((($data['previous_period']['average_po_value'] ?? 0) > 0 ? ((($data['current_period']['average_po_value'] ?? 0) - ($data['previous_period']['average_po_value'] ?? 0)) / ($data['previous_period']['average_po_value'] ?? 1)) * 100 : 0) >= 0) text-green-600 @else text-red-600 @endif">
                                        {{ (($data['previous_period']['average_po_value'] ?? 0) > 0 ? ((($data['current_period']['average_po_value'] ?? 0) - ($data['previous_period']['average_po_value'] ?? 0)) / ($data['previous_period']['average_po_value'] ?? 1)) * 100 : 0) >= 0 ? '+' : '' }}{{ number_format(($data['previous_period']['average_po_value'] ?? 0) > 0 ? ((($data['current_period']['average_po_value'] ?? 0) - ($data['previous_period']['average_po_value'] ?? 0)) / ($data['previous_period']['average_po_value'] ?? 1)) * 100 : 0, 2) }}%
                                    </span>
                                @else
                                    <span class="text-black">-</span>
                                @endif
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Key Insights -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- Current Period Insights -->
            <div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg shadow-lg p-6 border-l-4 border-blue-500">
                <h3 class="text-lg font-semibold text-black mb-4">ملخص الفترة الحالية</h3>
                <ul class="space-y-2 text-black">
                    <li class="flex items-center">
                        <span class="text-blue-600 ml-3"><i class="fas fa-check-circle"></i></span>
                        <span>عدد الأوامر: <strong>{{ $data['current_period']['po_count'] ?? 0 }}</strong> أمر</span>
                    </li>
                    <li class="flex items-center">
                        <span class="text-blue-600 ml-3"><i class="fas fa-check-circle"></i></span>
                        <span>قيمة الأوامر: <strong>{{ number_format($data['current_period']['po_total'] ?? 0, 0) }}</strong> ر.س</span>
                    </li>
                    <li class="flex items-center">
                        <span class="text-blue-600 ml-3"><i class="fas fa-check-circle"></i></span>
                        <span>عدد الفواتير: <strong>{{ $data['current_period']['invoice_count'] ?? 0 }}</strong> فاتورة</span>
                    </li>
                    <li class="flex items-center">
                        <span class="text-blue-600 ml-3"><i class="fas fa-check-circle"></i></span>
                        <span>المبالغ المدفوعة: <strong>{{ number_format($data['current_period']['paid_amount'] ?? 0, 0) }}</strong> ر.س</span>
                    </li>
                </ul>
            </div>

            <!-- Change Summary -->
            <div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg shadow-lg p-6 border-l-4 border-purple-500">
                <h3 class="text-lg font-semibold text-black mb-4">ملخص التغيرات</h3>
                <ul class="space-y-2 text-black">
                    <li class="flex items-center">
                        <span class="@if(($data['po_change_percent'] ?? 0) >= 0) text-green-600 @else text-red-600 @endif ml-3">
                            @if(($data['po_change_percent'] ?? 0) >= 0)
                                <i class="fas fa-arrow-up-long"></i>
                            @else
                                <i class="fas fa-arrow-down-long"></i>
                            @endif
                        </span>
                        <span>أوامر الشراء: <strong class="@if(($data['po_change_percent'] ?? 0) >= 0) text-green-600 @else text-red-600 @endif">{{ ($data['po_change_percent'] ?? 0) >= 0 ? '+' : '' }}{{ number_format($data['po_change_percent'] ?? 0, 2) }}%</strong></span>
                    </li>
                    <li class="flex items-center">
                        <span class="@if(($data['invoice_change_percent'] ?? 0) >= 0) text-green-600 @else text-red-600 @endif ml-3">
                            @if(($data['invoice_change_percent'] ?? 0) >= 0)
                                <i class="fas fa-arrow-up-long"></i>
                            @else
                                <i class="fas fa-arrow-down-long"></i>
                            @endif
                        </span>
                        <span>الفواتير: <strong class="@if(($data['invoice_change_percent'] ?? 0) >= 0) text-green-600 @else text-red-600 @endif">{{ ($data['invoice_change_percent'] ?? 0) >= 0 ? '+' : '' }}{{ number_format($data['invoice_change_percent'] ?? 0, 2) }}%</strong></span>
                    </li>
                    <li class="flex items-center">
                        <span class="text-purple-600 ml-3"><i class="fas fa-percentage"></i></span>
                        <span>المبالغ المدفوعة الإجمالية من الفواتير: <strong>{{ $data['current_period']['paid_amount'] ?? 0 > 0 ? number_format((($data['current_period']['paid_amount'] ?? 0) / max($data['current_period']['invoice_total'], 1)) * 100, 2) : 0 }}%</strong></span>
                    </li>
                    <li class="flex items-center">
                        <span class="text-purple-600 ml-3"><i class="fas fa-calendar"></i></span>
                        <span>نسبة الفواتير المعلقة: <strong>{{ $data['current_period']['invoice_total'] ?? 0 > 0 ? number_format((($data['current_period']['pending_payment'] ?? 0) / max($data['current_period']['invoice_total'], 1)) * 100, 2) : 0 }}%</strong></span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // PO Comparison Chart
        const poCtx = document.getElementById('poComparisonChart').getContext('2d');
        new Chart(poCtx, {
            type: 'bar',
            data: {
                labels: ['عدد الأوامر', 'قيمة الأوامر'],
                datasets: [
                    {
                        label: 'الفترة الحالية',
                        backgroundColor: '#3b82f6',
                        data: [
                            {{ $data['current_period']['po_count'] ?? 0 }},
                            {{ ($data['current_period']['po_total'] ?? 0) / 1000 }} // بآلاف الريالات
                        ]
                    },
                    {
                        label: 'الفترة السابقة',
                        backgroundColor: '#a78bfa',
                        data: [
                            {{ $data['previous_period']['po_count'] ?? 0 }},
                            {{ ($data['previous_period']['po_total'] ?? 0) / 1000 }} // بآلاف الريالات
                        ]
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // Invoice Comparison Chart
        const invoiceCtx = document.getElementById('invoiceComparisonChart').getContext('2d');
        new Chart(invoiceCtx, {
            type: 'bar',
            data: {
                labels: ['عدد الفواتير', 'قيمة الفواتير'],
                datasets: [
                    {
                        label: 'الفترة الحالية',
                        backgroundColor: '#8b5cf6',
                        data: [
                            {{ $data['current_period']['invoice_count'] ?? 0 }},
                            {{ ($data['current_period']['invoice_total'] ?? 0) / 1000 }} // بآلاف الريالات
                        ]
                    },
                    {
                        label: 'الفترة السابقة',
                        backgroundColor: '#ec4899',
                        data: [
                            {{ $data['previous_period']['invoice_count'] ?? 0 }},
                            {{ ($data['previous_period']['invoice_total'] ?? 0) / 1000 }} // بآلاف الريالات
                        ]
                    }
                ]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: {
                        position: 'bottom',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });
    });
</script>
@endpush

@endsection