@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">أرصدة الصنف: {{ $item->name }}</h1>
            <div>
                <a href="{{ route('inventory.reports.item_movement', ['item_id' => $item->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>

        <!-- Item 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">{{ $item->code }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-black">وحدة القياس الأساسية</h3>
                    <p class="mt-1 text-base font-semibold text-black">{{ $item->primaryUnit?->name ?? 'غير محدد' }}</p>
                </div>
                <div>
                    <h3 class="text-sm font-medium text-black">التصنيف</h3>
                    <p class="mt-1 text-base font-semibold text-black">{{ $item->category?->name ?? 'غير محدد' }}</p>
                </div>
            </div>
        </div>

        <!-- Filters -->
        <div class="mb-6 bg-gray-50 p-4 rounded-md">
            <form action="{{ route('inventory.balances.item', $item->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="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.balances.item', $item->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">{{ number_format($balances->sum('quantity'), 2) }} {{ $item->primaryUnit?->name ?? 'غير محدد' }}</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 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">
                        @if($balances->sum('quantity') > 0)
                            {{ number_format($totalValue / $balances->sum('quantity'), 2) }}
                        @else
                            0.00
                        @endif
                    </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>
                    </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 font-medium text-black">{{ $balance->warehouse->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' => $item->id, 'warehouse_id' => $balance->warehouse_id]) }}" class="text-primary-600 hover:text-primary-900">عرض الحركة</a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" 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">{{ number_format($balances->sum('quantity'), 2) }}</td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">{{ $item->primaryUnit?->name ?? 'غير محدد' }}</td>
                        <td class="p-6 py-4 whitespace-nowrap text-sm font-bold text-black">
                            @if($balances->sum('quantity') > 0)
                                {{ number_format($totalValue / $balances->sum('quantity'), 2) }}
                            @else
                                0.00
                            @endif
                        </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="itemDistributionChart"></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('itemDistributionChart').getContet('2d');
        
        // إعداد البيانات للرسم البياني
        const balanceData = @json($balances->map(function($balance) {
            return [
                'warehouse' => $balance->warehouse->name,
                'quantity' => $balance->quantity
            ];
        }));
        
        const labels = balanceData.map(item => item.warehouse);
        const quantities = balanceData.map(item => item.quantity);
        
        // إنشاء الرسم البياني
        new Chart(ct, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'الكمية',
                    data: quantities,
                    backgroundColor: '#4F46E5',
                    borderColor: '#4338CA',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            tet: 'الكمية'
                        }
                    },
                    : {
                        title: {
                            display: true,
                            tet: 'المخزن'
                        }
                    }
                }
            }
        });
    });
</script>
@endpush
@endsection