@extends('layouts.admin')

@section('title', 'Stock Movements')
@section('subtitle', 'View inventory movement history')

@section('content')
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200">
        <div class="p-4 border-b border-slate-200">
            <form method="GET" class="flex gap-4 items-center flex-wrap">
                <select name="branch"
                    class="px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                    <option value="">All Branches</option>
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ request('branch') == $branch->id ? 'selected' : '' }}>
                            {{ $branch->name }}</option>
                    @endforeach
                </select>

                <select name="type" class="px-4 py-2 border border-slate-300 rounded-xl focus:border-blue-500 outline-none">
                    <option value="">All Types</option>
                    <option value="sale" {{ request('type') == 'sale' ? 'selected' : '' }}>Sales</option>
                    <option value="adjustment_in" {{ request('type') == 'adjustment_in' ? 'selected' : '' }}>Adjustments (In)
                    </option>
                    <option value="adjustment_out" {{ request('type') == 'adjustment_out' ? 'selected' : '' }}>Adjustments
                        (Out)</option>
                    <option value="transfer_in" {{ request('type') == 'transfer_in' ? 'selected' : '' }}>Transfers (In)
                    </option>
                    <option value="transfer_out" {{ request('type') == 'transfer_out' ? 'selected' : '' }}>Transfers (Out)
                    </option>
                </select>

                <button type="submit"
                    class="px-4 py-2 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition">
                    Filter
                </button>
                <a href="{{ route('admin.stock.movements') }}"
                    class="px-4 py-2 bg-slate-100 text-slate-700 rounded-xl font-medium hover:bg-slate-200 transition">
                    Reset
                </a>
            </form>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full">
                <thead>
                    <tr class="text-left text-sm text-slate-500 border-b border-slate-200">
                        <th class="px-6 py-4 font-medium">Date/Time</th>
                        <th class="px-6 py-4 font-medium">Product</th>
                        <th class="px-6 py-4 font-medium">Branch</th>
                        <th class="px-6 py-4 font-medium">Type</th>
                        <th class="px-6 py-4 font-medium text-right">Qty Change</th>
                        <th class="px-6 py-4 font-medium text-right">New Balance</th>
                        <th class="px-6 py-4 font-medium">Reference</th>
                        <th class="px-6 py-4 font-medium">User</th>
                    </tr>
                </thead>
                <tbody class="text-sm">
                    @forelse($movements as $movement)
                        <tr class="border-b border-slate-100 hover:bg-slate-50">
                            <td class="px-6 py-4 text-slate-500">{{ $movement->created_at->format('M d, Y H:i') }}</td>
                            <td class="px-6 py-4 font-medium text-slate-800">{{ $movement->product->name_en ?? 'N/A' }}</td>
                            <td class="px-6 py-4 text-slate-600">{{ $movement->branch->name ?? 'N/A' }}</td>
                            <td class="px-6 py-4">
                                @php
                                    $typeColors = [
                                        'sale' => 'bg-blue-50 text-blue-600',
                                        'adjustment_in' => 'bg-green-50 text-green-600',
                                        'adjustment_out' => 'bg-red-50 text-red-600',
                                        'transfer_in' => 'bg-purple-50 text-purple-600',
                                        'transfer_out' => 'bg-orange-50 text-orange-600',
                                    ];
                                @endphp
                                <span
                                    class="px-2 py-1 rounded-full text-xs {{ $typeColors[$movement->type] ?? 'bg-slate-50 text-slate-600' }}">
                                    {{ str_replace('_', ' ', ucfirst($movement->type)) }}
                                </span>
                            </td>
                            <td
                                class="px-6 py-4 text-right font-semibold {{ in_array($movement->type, ['sale', 'adjustment_out', 'transfer_out']) ? 'text-red-500' : 'text-green-500' }}">
                                {{ in_array($movement->type, ['sale', 'adjustment_out', 'transfer_out']) ? '-' : '+' }}{{ number_format($movement->quantity, 2) }}
                            </td>
                            <td class="px-6 py-4 text-right text-slate-600">{{ number_format($movement->new_quantity, 2) }}</td>
                            <td class="px-6 py-4 text-slate-500 text-xs">{{ $movement->reference }}</td>
                            <td class="px-6 py-4 text-slate-500">{{ $movement->user->name ?? 'System' }}</td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-6 py-12 text-center text-slate-400">
                                <p>No stock movements found</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($movements->hasPages())
            <div class="p-4 border-t border-slate-200">
                {{ $movements->links() }}
            </div>
        @endif
    </div>
@endsection