@extends('layouts.app')

@section('title', __('inventory.transactions'))

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <h1 class="text-2xl font-bold text-gray-900">{{ __('inventory.transactions') }}</h1>
        <a href="{{ route('inventory-transactions.create') }}" class="px-4 py-2 text-sm font-medium text-white bg-teal-600 rounded-lg hover:bg-teal-700 transition-colors">
            + {{ __('inventory.new_transaction') }}
        </a>
    </div>

    <!-- Filters -->
    <div class="bg-white rounded-xl border border-gray-200 p-4">
        <form method="GET" action="{{ route('inventory-transactions.index') }}" class="flex flex-wrap gap-3">
            <select name="type" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                <option value="">{{ __('common.all') }} {{ __('inventory.transaction_type') }}</option>
                @foreach($types as $t)
                    @php
                        $tk = 'inventory.type_' . $t;
                        $tl = __($tk);
                        if ($tl === $tk) $tl = $t;
                    @endphp
                    <option value="{{ $t }}" {{ request('type') === $t ? 'selected' : '' }}>{{ $tl }}</option>
                @endforeach
            </select>
            <select name="item_id" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                <option value="">{{ __('common.all') }} {{ __('inventory.items') }}</option>
                @foreach($items as $item)
                    <option value="{{ $item->id }}" {{ request('item_id') == $item->id ? 'selected' : '' }}>{{ $item->name }}</option>
                @endforeach
            </select>
            <select name="warehouse_id" class="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-teal-500 focus:border-teal-500">
                <option value="">{{ __('common.all') }} {{ __('warehouse.warehouses') }}</option>
                @foreach($warehouses as $wh)
                    <option value="{{ $wh->id }}" {{ request('warehouse_id') == $wh->id ? 'selected' : '' }}>{{ $wh->name }}</option>
                @endforeach
            </select>
            <button type="submit" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors">
                {{ __('common.filter') }}
            </button>
        </form>
    </div>

    <!-- Table -->
    <div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-gray-50 border-b border-gray-200">
                    <tr>
                        <th class="px-5 py-3 text-start text-xs font-medium text-gray-500">{{ __('inventory.transaction_type') }}</th>
                        <th class="px-5 py-3 text-start text-xs font-medium text-gray-500">{{ __('inventory.name') }}</th>
                        <th class="px-5 py-3 text-start text-xs font-medium text-gray-500">{{ __('warehouse.warehouses') }}</th>
                        <th class="px-5 py-3 text-start text-xs font-medium text-gray-500">{{ __('inventory.quantity') }}</th>
                        <th class="px-5 py-3 text-start text-xs font-medium text-gray-500">{{ __('inventory.date') }}</th>
                        <th class="px-5 py-3 text-start text-xs font-medium text-gray-500">{{ __('common.actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($transactions as $tr)
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-5 py-3">
                            @php
                                $ttk = 'inventory.type_' . $tr->type;
                                $ttl = __($ttk);
                                if ($ttl === $ttk) $ttl = $tr->type;
                            @endphp
                            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium
                                {{ $tr->type === 'in' ? 'bg-emerald-50 text-emerald-700' :
                                   ($tr->type === 'out' ? 'bg-red-50 text-red-700' :
                                   ($tr->type === 'return' ? 'bg-blue-50 text-blue-700' : 'bg-amber-50 text-amber-700')) }}">
                                {{ $ttl }}
                            </span>
                        </td>
                        <td class="px-5 py-3 text-sm font-medium text-gray-900">{{ $tr->item?->name ?? '-' }}</td>
                        <td class="px-5 py-3 text-sm text-gray-600">{{ $tr->warehouse?->name ?? '-' }}</td>
                        <td class="px-5 py-3 text-sm font-medium text-gray-900">{{ $tr->quantity }}</td>
                        <td class="px-5 py-3 text-sm text-gray-600">{{ $tr->date ? calendar_date($tr->date) : '-' }}</td>
                        <td class="px-5 py-3">
                            <div class="flex items-center gap-2">
                                <a href="{{ route('inventory-transactions.show', $tr) }}" class="text-teal-600 hover:text-teal-800 text-sm">{{ __('common.view') }}</a>
                                <form method="POST" action="{{ route('inventory-transactions.destroy', $tr) }}" class="inline" onsubmit="return confirm('{{ __('common.confirm_delete') }}')">
                                    @csrf @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:text-red-800 text-sm">{{ __('common.delete') }}</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="6" class="text-center py-12 text-gray-500">{{ __('inventory.no_transactions') }}</td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    <div class="flex justify-center">
        {{ $transactions->withQueryString()->links() }}
    </div>
</div>
@endsection