@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">
        <div class="mb-8">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-black mb-2">📦 {{ \App\Helpers\TranslationHelper::transFromDatabase('Warehouse Movement', __('Warehouse Movement')) }}</h1>
                    <p class="text-black">{{ \App\Helpers\TranslationHelper::transFromDatabase('Track the materials spent', __('Track the materials spent')) }}</p>
                </div>
                <a href="{{ route('reports.cost-center') }}" class="inline-flex items-center px-6 py-3 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">
                    <i class="fas fa-arrow-right ml-2"></i>
                    <span>{{ \App\Helpers\TranslationHelper::transFromDatabase('Return', __('Return')) }}</span>
                </a>
            </div>
        </div>

        <div class="mb-6 flex gap-2">
            <a href="{{ request()->fullUrlWithQuery(['export' => 'true']) }}" class="inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white font-medium rounded-lg transition-colors duration-200">
                <i class="fas fa-file-excel mr-2"></i>
                Excel
            </a>
        </div>

        @if($report->isEmpty())
        <div class="bg-white rounded-xl shadow-lg p-12 text-center border border-gray-200">
            <i class="fas fa-inbox text-black text-5xl mb-4"></i>
            <p class="text-black font-medium text-lg">{{ \App\Helpers\TranslationHelper::transFromDatabase('No movements to display', __('No movements to display')) }}</p>
        </div>
        @else
        <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-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">{{ \App\Helpers\TranslationHelper::transFromDatabase('Document Number', __('Document Number')) }}</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Date', __('Date')) }}</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Item Name', __('Item Name')) }}</th>
                            <th class="px-6 py-4 text-center font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Quantity', __('Quantity')) }}</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Cost Center', __('Cost Center')) }}</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('Location', __('Location')) }}</th>
                            <th class="px-6 py-4 text-right font-semibold text-sm">{{ \App\Helpers\TranslationHelper::transFromDatabase('User', __('User')) }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @foreach($report as $item)
                        <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">
                                <span class="font-mono text-sm font-semibold text-blue-600">{{ $item['document_number'] }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-sm text-black">{{ $item['document_date'] }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-sm text-black font-medium">{{ $item['item_name'] }}</span>
                            </td>
                            <td class="px-6 py-4 text-center">
                                <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-bold">
                                    {{ $item['quantity'] }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-semibold bg-green-100 text-green-800">
                                    {{ $item['cost_center_name'] }}
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-sm text-black">{{ $item['warehouse_location'] }}</span>
                            </td>
                            <td class="px-6 py-4">
                                <span class="text-sm text-black">{{ $item['created_by'] }}</span>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
        @endif
    </div>
</div>
@endsection