@extends('layouts.app')

@section('content')
<div class="container m-auto p-4 sm:p-6 lg:p-8">
    <div class="bg-white rounded-lg shadow-lg p-6">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2l font-bold text-black">تقرير تقييم المخزون</h1>
            <a href="{{ route('inventory.reports.index') }}" class="inline-flex items-center p-4 py-2 bg-gray-200 text-black rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
                العودة للتقارير
            </a>
        </div>

        <!-- Filters -->
        <div class="mb-6 bg-gray-50 p-4 rounded-md">
            <form action="{{ route('inventory.reports.valuation') }}" method="GET" class="flex flex-wrap items-end space-y-4 space-y-reverse">
                <div class="w-full md:w-auto mb-4 md:mb-0">
                    <label for="warehouse_id" class="block text-sm font-medium text-black mb-1">المخزن</label>
                    <select id="warehouse_id" name="warehouse_id" class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring focus:ring-primary-500 focus:ring-opacity-50">
                        <option value="">جميع المخازن</option>
                        @foreach($warehouses as $warehouse)
                            <option value="{{ $warehouse->id }}" {{ request('warehouse_id') == $warehouse->id ? 'selected' : '' }}>{{ $warehouse->name }}</option>
                        @endforeach
                    </select>
                </div>
                
                <div class="w-full md:w-auto">
                    <button type="submit" class="inline-flex items-center p-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        تطبيق الفلتر
                    </button>
                    <a href="{{ route('inventory.reports.valuation') }}" class="inline-flex items-center p-4 py-2 bg-gray-200 text-black rounded-md hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 mr-2">
                        إعادة ضبط
                    </a>
                </div>
            </form>
        </div>

        <!-- Summary Card -->
        <div class="mb-6 bg-blue-50 p-4 rounded-md">
            <div class="flex flex-wrap justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h2 class="text-lg font-semibold text-blue-800">إجمالي قيمة المخزون</h2>
                    <p class="text-3l font-bold text-blue-900">{{ number_format($totalValue, 2) }}</p>
                </div>
                <div class="mb-4 md:mb-0">
                    <h2 class="text-lg font-semibold text-blue-800">عدد المخازن</h2>
                    <p class="text-3l font-bold text-blue-900">{{ count($warehouseValuation) }}</p>
                </div>
            </div>
        </div>

        <!-- Warehouse Valuation Table -->
        <div class="overflow--auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">المخزن</th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">عدد الأصناف</th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">القيمة الإجمالية</th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">النسبة من الإجمالي</th>
                        <th scope="col" class="p-6 py-3 text-right text-s font-medium text-black uppercase tracking-wider">الإجراءات</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    @forelse($warehouseValuation as $warehouseId => $data)
                        <tr>
                            <td class="p-6 py-4 whitespace-nowrap text-sm font-medium text-black">{{ $data['warehouse'] }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ $data['items_count'] }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ number_format($data['value'], 2) }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">
                                @if($totalValue > 0)
                                    {{ number_format(($data['value'] / $totalValue) * 100, 2) }}%
                                @else
                                    0%
                                @endif
                            </td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="{{ route('inventory.balances.warehouse', $warehouseId) }}" class="text-primary-600 hover:text-primary-900">عرض التفاصيل</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="p-6 py-4 whitespace-nowrap text-sm text-black text-center">لا توجد بيانات مخزون متاحة</td>
                        </tr>
                    @endforelse
                </tbody>
                <tfoot class="bg-gray-50">
                    <tr>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">الإجمالي</td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">
                            {{ collect($warehouseValuation)->sum('items_count') }}
                        </td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">{{ number_format($totalValue, 2) }}</td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">100%</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>

        <!-- Visualization -->
        <div class="mt-8">
            <h2 class="text-lg font-semibold text-black mb-4">توزيع قيمة المخزون حسب المخازن</h2>
            <div class="h-80">
                <canvas id="warehouseValuationChart"></canvas>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const ct = document.getElementById('warehouseValuationChart').getContet('2d');
        
        // إعداد البيانات للرسم البياني
        const warehouseData = @json(collect($warehouseValuation)->map(function($data) {
            return [
                'warehouse' => $data['warehouse'],
                'value' => $data['value']
            ];
        })->values());
        
        const labels = warehouseData.map(item => item.warehouse);
        const values = warehouseData.map(item => item.value);
        
        // إنشاء الرسم البياني
        new Chart(ct, {
            type: 'pie',
            data: {
                labels: labels,
                datasets: [{
                    data: values,
                    backgroundColor: [
                        '#4F46E5', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6',
                        '#EC4899', '#06B6D4', '#84CC16', '#F97316', '#6366F1'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'right',
                    },
                    tooltip: {
                        callbacks: {
                            label: function(contet) {
                                const value = contet.raw;
                                const total = contet.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = ((value / total) * 100).toFixed(2);
                                return `${contet.label}: ${value.toLocaleString()} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    });
</script>
@endpush
@endsection