@extends('layouts.app')

@section('title', 'تحليل اتجاهات المخزون')

@section('content')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<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">
        
        <!-- 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">
                        <i class="fas fa-chart-line text-blue-600 ml-2"></i>تحليل الاتجاهات
                    </h1>
                    <p class="text-black">تحليل حركة الوارد والمنصرف على مدى الشهور الماضية</p>
                </div>
                <div class="flex gap-2">
                    <button onclick="printReport()" class="inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200">
                        <i class="fas fa-print mr-2"></i> طباعة
                    </button>
                    <button onclick="exportReport('pdf')" class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white font-semibold rounded-lg transition-all duration-200">
                        <i class="fas fa-file-pdf mr-2"></i> PDF
                    </button>
                </div>
            </div>
        </div>

        <!-- FORM SETTINGS -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-200">
            <h3 class="text-lg font-semibold text-black mb-4">
                <i class="fas fa-cog ml-2 text-blue-600"></i>إعدادات التحليل
            </h3>

            <form method="GET" action="{{ route('inventory.reports.trends-analysis') }}" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    
                    <div>
                        <label for="months" class="block text-sm font-medium text-black mb-1">فترة التحليل (بالأشهر)</label>
                        <select id="months" name="months" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                            <option value="6" {{ $filters['months'] == 6 ? 'selected' : '' }}>آخر 6 أشهر</option>
                            <option value="12" {{ $filters['months'] == 12 ? 'selected' : '' }}>آخر سنة</option>
                            <option value="24" {{ $filters['months'] == 24 ? 'selected' : '' }}>آخر سنتين</option>
                        </select>
                    </div>

                    <div class="flex items-end gap-2">
                        <button type="submit" class="flex-1 inline-flex items-center justify-center px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200">
                            <i class="fas fa-sync-alt mr-2"></i> تحديث الرسم البياني
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <!-- CHART CONTAINER -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-200">
            <h3 class="text-xl font-bold text-black mb-6">مقارنة حركة الوارد والمنصرف شهرياً</h3>
            <div class="h-96 w-full">
                <canvas id="trendsChart"></canvas>
            </div>
        </div>

        <!-- DATA TABLE -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-blue-800 text-white">
                        <tr>
                            <th class="px-6 py-4 text-right font-semibold text-sm">الشهر</th>
                            <th class="px-6 py-4 text-center font-semibold text-sm text-green-300">إجمالي الوارد</th>
                            <th class="px-6 py-4 text-center font-semibold text-sm text-red-300">إجمالي المنصرف</th>
                            <th class="px-6 py-4 text-center font-semibold text-sm">صافي الحركة</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($trendsData as $data)
                        <tr class="hover:bg-blue-50 transition-colors duration-150 border-b border-gray-100">
                            <td class="px-6 py-4 font-bold text-black">{{ $data->month }}</td>
                            <td class="px-6 py-4 text-center font-bold text-green-600">{{ number_format($data->inbound, 2) }}</td>
                            <td class="px-6 py-4 text-center font-bold text-red-600">{{ number_format($data->outbound, 2) }}</td>
                            <td class="px-6 py-4 text-center">
                                @php
                                    $net = $data->inbound - $data->outbound;
                                @endphp
                                <span class="px-3 py-1 rounded-full text-xs font-bold {{ $net >= 0 ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                    {{ number_format($net, 2) }}
                                </span>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="4" class="px-6 py-12 text-center text-black italic">لا توجد بيانات حركة لعرضها</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>
</div>

<script>
    const ctx = document.getElementById('trendsChart').getContext('2d');
    const trendsData = @json($trendsData);
    
    new Chart(ctx, {
        type: 'line',
        data: {
            labels: trendsData.map(d => d.month),
            datasets: [
                {
                    label: 'إجمالي الوارد (كميات)',
                    data: trendsData.map(d => d.inbound),
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                    fill: true,
                    tension: 0.4,
                    borderWidth: 3,
                    pointRadius: 4,
                    pointBackgroundColor: '#10b981'
                },
                {
                    label: 'إجمالي المنصرف (كميات)',
                    data: trendsData.map(d => d.outbound),
                    borderColor: '#ef4444',
                    backgroundColor: 'rgba(239, 68, 68, 0.1)',
                    fill: true,
                    tension: 0.4,
                    borderWidth: 3,
                    pointRadius: 4,
                    pointBackgroundColor: '#ef4444'
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false
            },
            plugins: {
                legend: { position: 'top', labels: { font: { weight: 'bold' } } }
            },
            scales: {
                y: { beginAtZero: true, grid: { color: 'rgba(0,0,0,0.05)' } },
                x: { grid: { display: false } }
            }
        }
    });

    function printReport() { window.print(); }
    function exportReport(format) {
        const params = new URLSearchParams({ report: 'trends-analysis', format: format, months: document.getElementById('months').value });
        window.location.href = '{{ route("inventory.reports.export") }}?' + params.toString();
    }
</script>
@endsection