@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">{{ __('Inventory Movement Report') }}</h1>
                    <p class="text-black">{{ __('Track product movements through purchase orders and receipts') }}</p>
                </div>
                @if($data && count($data) > 0)
                <div class="flex gap-2">
                    <a href="{{ request()->fullUrlWithQuery(['export' => 'true', 'format' => 'excel']) }}" 
                       class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition-all duration-200">
                        <i class="fas fa-download ml-2"></i>
                        <span>{{ __('Export Excel') }}</span>
                    </a>
                    <a href="{{ request()->fullUrlWithQuery(['export' => 'true', 'format' => '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 ml-2"></i>
                        <span>{{ __('Export PDF') }}</span>
                    </a>
                </div>
                @endif
            </div>
        </div>

        <!-- Filters Section -->
        <div class="bg-white rounded-xl shadow-lg p-6 mb-6 border border-gray-200">
            <form action="{{ route('reports.purchase.inventory-movement', request('productId')) }}" method="GET" class="grid grid-cols-1 md:grid-cols-4 gap-4 items-end">
                <!-- Start Date -->
                <div>
                    <label for="start_date" class="block text-sm font-medium text-black mb-2">
                        {{ __('Start Date') }}
                    </label>
                    <input type="date" id="start_date" name="start_date" value="{{ request('start_date') }}" 
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>

                <!-- End Date -->
                <div>
                    <label for="end_date" class="block text-sm font-medium text-black mb-2">
                        {{ __('End Date') }}
                    </label>
                    <input type="date" id="end_date" name="end_date" value="{{ request('end_date') }}" 
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>

                <!-- Filter Button -->
                <div class="col-span-1 md:col-span-2">
                    <button type="submit" class="w-full px-6 py-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl">
                        <i class="fas fa-filter ml-2"></i>
                        {{ __('Apply Filters') }}
                    </button>
                </div>
            </form>
        </div>

        <!-- Summary Statistics -->
        @if($data && count($data) > 0)
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
            <!-- Total Orders -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200 border-l-4 border-l-blue-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-1">{{ __('Total Orders') }}</p>
                        <p class="text-3xl font-bold text-black">{{ count($data) }}</p>
                    </div>
                    <div class="bg-blue-100 rounded-full p-3">
                        <i class="fas fa-shopping-cart text-blue-600 text-xl"></i>
                    </div>
                </div>
            </div>

            <!-- Total Ordered -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200 border-l-4 border-l-amber-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-1">{{ __('Total Ordered') }}</p>
                        <p class="text-3xl font-bold text-black">{{ $data->sum('quantity_ordered') }}</p>
                    </div>
                    <div class="bg-amber-100 rounded-full p-3">
                        <i class="fas fa-cubes text-amber-600 text-xl"></i>
                    </div>
                </div>
            </div>

            <!-- Total Received -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200 border-l-4 border-l-green-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-1">{{ __('Total Received') }}</p>
                        <p class="text-3xl font-bold text-black">{{ $data->sum('quantity_received') }}</p>
                    </div>
                    <div class="bg-green-100 rounded-full p-3">
                        <i class="fas fa-check-circle text-green-600 text-xl"></i>
                    </div>
                </div>
            </div>

            <!-- Pending -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200 border-l-4 border-l-red-500">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-black text-sm font-medium mb-1">{{ __('Pending Reception') }}</p>
                        <p class="text-3xl font-bold text-black">{{ $data->sum(function($item) { return $item['quantity_ordered'] - $item['quantity_received']; }) }}</p>
                    </div>
                    <div class="bg-red-100 rounded-full p-3">
                        <i class="fas fa-hourglass-end text-red-600 text-xl"></i>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <!-- Data Table -->
        <div class="bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200">
            @if($data && count($data) > 0)
                <div class="overflow-x-auto">
                    <table class="w-full divide-y divide-gray-200">
                        <thead class="bg-gradient-to-r from-gray-800 to-gray-900 text-white">
                            <tr>
                                <th class="px-6 py-4 text-right font-semibold text-sm">#</th>
                                <th class="px-6 py-4 text-right font-semibold text-sm">{{ __('PO Number') }}</th>
                                <th class="px-6 py-4 text-right font-semibold text-sm">{{ __('PO Date') }}</th>
                                <th class="px-6 py-4 text-center font-semibold text-sm">{{ __('Quantity Ordered') }}</th>
                                <th class="px-6 py-4 text-center font-semibold text-sm">{{ __('Quantity Received') }}</th>
                                <th class="px-6 py-4 text-center font-semibold text-sm">{{ __('Pending') }}</th>
                                <th class="px-6 py-4 text-center font-semibold text-sm">{{ __('Reception %') }}</th>
                                <th class="px-6 py-4 text-center font-semibold text-sm">{{ __('Status') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            @forelse($data as $movement)
                            <tr class="hover:bg-blue-50 transition-colors duration-150">
                                <td class="px-6 py-4 text-black font-medium">{{ $loop->iteration }}</td>
                                <td class="px-6 py-4">
                                    <a href="{{ route('reports.purchase.po-details', $movement['po_number']) }}" 
                                       class="font-semibold text-blue-600 hover:text-blue-800 underline">
                                        {{ $movement['po_number'] }}
                                    </a>
                                </td>
                                <td class="px-6 py-4 text-black">
                                    <span class="font-medium">{{ \Carbon\Carbon::parse($movement['po_date'])->format('Y-m-d') }}</span>
                                    <p class="text-xs text-black">{{ \Carbon\Carbon::parse($movement['po_date'])->diffForHumans() }}</p>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <span class="inline-block px-3 py-1 bg-blue-100 text-blue-700 rounded-full font-medium text-sm">
                                        {{ $movement['quantity_ordered'] }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    <span class="inline-block px-3 py-1 bg-green-100 text-green-700 rounded-full font-medium text-sm">
                                        {{ $movement['quantity_received'] }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    @php
                                        $pending = $movement['quantity_ordered'] - $movement['quantity_received'];
                                        $badgeClass = $pending == 0 ? 'bg-gray-100 text-black' : 'bg-yellow-100 text-yellow-700';
                                    @endphp
                                    <span class="inline-block px-3 py-1 {{ $badgeClass }} rounded-full font-medium text-sm">
                                        {{ $pending }}
                                    </span>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    @php
                                        $percentage = $movement['quantity_ordered'] > 0 
                                            ? round(($movement['quantity_received'] / $movement['quantity_ordered']) * 100) 
                                            : 0;
                                    @endphp
                                    <div class="flex items-center justify-center gap-2">
                                        <div class="w-24 bg-gray-200 rounded-full h-2">
                                            <div class="bg-gradient-to-r from-blue-600 to-blue-400 h-2 rounded-full transition-all duration-300" 
                                                 style="width: {{ $percentage }}%"></div>
                                        </div>
                                        <span class="text-sm font-semibold text-black min-w-12">{{ $percentage }}%</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-center">
                                    @php
                                        $statusConfig = [
                                            'draft' => ['class' => 'bg-gray-100 text-black', 'icon' => 'fa-file-alt'],
                                            'sent' => ['class' => 'bg-blue-100 text-blue-700', 'icon' => 'fa-paper-plane'],
                                            'received' => ['class' => 'bg-green-100 text-green-700', 'icon' => 'fa-check-circle'],
                                            'completed' => ['class' => 'bg-green-100 text-green-700', 'icon' => 'fa-check-double'],
                                            'cancelled' => ['class' => 'bg-red-100 text-red-700', 'icon' => 'fa-times-circle'],
                                            'pending' => ['class' => 'bg-yellow-100 text-yellow-700', 'icon' => 'fa-pause-circle'],
                                        ];
                                        $config = $statusConfig[$movement['status']] ?? $statusConfig['pending'];
                                    @endphp
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium {{ $config['class'] }}">
                                        <i class="fas {{ $config['icon'] }} ml-1"></i>
                                        {{ __(ucfirst($movement['status'])) }}
                                    </span>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="8" class="px-6 py-12 text-center">
                                    <div class="flex flex-col items-center justify-center">
                                        <i class="fas fa-inbox text-black text-4xl mb-3"></i>
                                        <p class="text-black font-medium">{{ __('No movements found') }}</p>
                                        <p class="text-black text-sm mt-1">{{ __('No inventory movements match your criteria') }}</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            @else
                <div class="p-12 text-center">
                    <div class="flex flex-col items-center justify-center">
                        <i class="fas fa-box text-black text-5xl mb-4"></i>
                        <p class="text-black font-medium text-lg mb-2">{{ __('No Data Available') }}</p>
                        <p class="text-black mb-6">{{ __('Please select a product to view its inventory movements') }}</p>
                        <a href="{{ route('reports.purchase.products-purchased') }}" 
                           class="inline-flex items-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200">
                            <i class="fas fa-arrow-left ml-2"></i>
                            {{ __('Back to Products') }}
                        </a>
                    </div>
                </div>
            @endif
        </div>

        <!-- Chart Section -->
        @if($data && count($data) > 0)
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mt-6">
            <!-- Quantity Chart -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <h3 class="text-lg font-semibold text-black mb-4">{{ __('Quantity Comparison') }}</h3>
                <canvas id="quantityChart" height="80"></canvas>
            </div>

            <!-- Reception Progress Chart -->
            <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
                <h3 class="text-lg font-semibold text-black mb-4">{{ __('Reception Progress') }}</h3>
                <canvas id="progressChart" height="80"></canvas>
            </div>
        </div>
        @endif
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        @if($data && count($data) > 0)
            // Quantity Comparison Chart
            const ctxQuantity = document.getElementById('quantityChart')?.getContext('2d');
            if (ctxQuantity) {
                const quantityData = {
                    labels: @json($data->pluck('po_number')),
                    datasets: [
                        {
                            label: '{{ __("Quantity Ordered") }}',
                            data: @json($data->pluck('quantity_ordered')),
                            backgroundColor: 'rgba(59, 130, 246, 0.1)',
                            borderColor: 'rgb(59, 130, 246)',
                            borderWidth: 2,
                            tension: 0.3,
                        },
                        {
                            label: '{{ __("Quantity Received") }}',
                            data: @json($data->pluck('quantity_received')),
                            backgroundColor: 'rgba(34, 197, 94, 0.1)',
                            borderColor: 'rgb(34, 197, 94)',
                            borderWidth: 2,
                            tension: 0.3,
                        }
                    ]
                };

                new Chart(ctxQuantity, {
                    type: 'line',
                    data: quantityData,
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: {
                                position: 'bottom',
                                labels: { padding: 15, font: { size: 12 } }
                            }
                        },
                        scales: {
                            y: {
                                beginAtZero: true,
                                grid: { color: 'rgba(0, 0, 0, 0.05)' }
                            },
                            x: {
                                grid: { display: false }
                            }
                        }
                    }
                });
            }

            // Reception Progress Chart
            const ctxProgress = document.getElementById('progressChart')?.getContext('2d');
            if (ctxProgress) {
                const progressData = {
                    labels: @json($data->pluck('po_number')),
                    datasets: [{
                        label: '{{ __("Reception %") }}',
                        data: @json($data->map(function($item) {
                            return $item['quantity_ordered'] > 0 
                                ? round(($item['quantity_received'] / $item['quantity_ordered']) * 100) 
                                : 0;
                        })),
                        backgroundColor: [
                            'rgba(34, 197, 94, 0.7)',
                            'rgba(59, 130, 246, 0.7)',
                            'rgba(251, 146, 60, 0.7)',
                            'rgba(168, 85, 247, 0.7)',
                            'rgba(236, 72, 153, 0.7)',
                        ],
                        borderColor: [
                            'rgb(34, 197, 94)',
                            'rgb(59, 130, 246)',
                            'rgb(251, 146, 60)',
                            'rgb(168, 85, 247)',
                            'rgb(236, 72, 153)',
                        ],
                        borderWidth: 2,
                    }]
                };

                new Chart(ctxProgress, {
                    type: 'bar',
                    data: progressData,
                    options: {
                        indexAxis: 'y',
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: {
                            legend: { display: false }
                        },
                        scales: {
                            x: {
                                beginAtZero: true,
                                max: 100,
                                grid: { color: 'rgba(0, 0, 0, 0.05)' }
                            }
                        }
                    }
                });
            }
        @endif
    });

    function round(num) {
        return Math.round(num);
    }
</script>
@endpush

@endsection