@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">أرصدة المخزن: {{ $warehouse->name }}</h1>
            <div>
                <a href="{{ route('inventory.reports.warehouse_movement', ['warehouse_id' => $warehouse->id]) }}" 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">
                    عرض حركة المخزن
                </a>
                <a href="{{ route('inventory.balances.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 mr-2">
                    العودة للأرصدة
                </a>
            </div>
        </div>

        <!-- Warehouse Info Card -->
        <div class="mb-6 bg-gray-50 p-4 rounded-md">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <h3 class="text-sm font-medium text-black">كود المخزن</h3>
                    <p class="mt-1 text-base font-semibold text-black">{{ $warehouse->code }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-black">المسؤول</h3>
                    <p class="mt-1 text-base font-semibold text-black">{{ $warehouse->manager_name }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-black">العنوان</h3>
                    <p class="mt-1 text-base font-semibold text-black">{{ $warehouse->location }}</p>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="mb-6 bg-gray-50 p-4 rounded-md">
            <form action="{{ route('inventory.balances.warehouse', $warehouse->id) }}" 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="item_id" class="block text-sm font-medium text-black mb-1">الصنف</label>
                    <select id="item_id" name="item_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($items as $item)
                            <option value="{{ $item->id }}" {{ request('item_id') == $item->id ? 'selected' : '' }}>{{ $item->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.balances.warehouse', $warehouse->id) }}" 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">{{ $balances->count() }}</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">{{ number_format($totalValue, 2) }}</p>
                </div>
            </div>
        </div>

        <!-- Balances 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>
                        <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($balances as $balance)
                        <tr>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ $balance->item->code }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm font-medium text-black">{{ $balance->item->name }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ number_format($balance->quantity, 2) }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ $balance->unit->name }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ number_format($balance->cost, 2) }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm text-black">{{ number_format($balance->total_value, 2) }}</td>
                            <td class="p-6 py-4 whitespace-nowrap text-sm font-medium">
                                <a href="{{ route('inventory.reports.item_movement', ['item_id' => $balance->item_id, 'warehouse_id' => $warehouse->id]) }}" class="text-primary-600 hover:text-primary-900">عرض الحركة</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="p-6 py-4 whitespace-nowrap text-sm text-black text-center">لا توجد أرصدة في هذا المخزن</td>
                        </tr>
                    @endforelse
                </tbody>
                <tfoot class="bg-gray-50">
                    <tr>
                        <td colspan="5" 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">{{ number_format($totalValue, 2) }}</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="itemValueChart"></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('itemValueChart').getContet('2d');
        
        // إعداد البيانات للرسم البياني
        const balanceData = @json($balances->map(function($balance) {
            return [
                'item' => $balance->item->name,
                'value' => $balance->total_value
            ];
        }));
        
        // ترتيب البيانات تنازلياً حسب القيمة
        balanceData.sort((a, b) => b.value - a.value);
        
        // أخذ أعلى 10 أصناف من حيث القيمة
        const topItems = balanceData.slice(0, 10);
        
        const labels = topItems.map(item => item.item);
        const values = topItems.map(item => item.value);
        
        // إنشاء الرسم البياني
        new Chart(ct, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'القيمة',
                    data: values,
                    backgroundColor: '#10B981',
                    borderColor: '#059669',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            tet: 'القيمة'
                        }
                    },
                    : {
                        title: {
                            display: true,
                            tet: 'الصنف'
                        }
                    }
                },
                plugins: {
                    title: {
                        display: true,
                        tet: 'أعلى 10 أصناف من حيث القيمة'
                    }
                }
            }
        });
    });
</script>
@endpush
@endsection