@extends('layouts.admin')
@section('title','Inventory movements')
@section('content')
@php
  $columns = [
    'when' => 'When',
    'type' => 'Type',
    'sku' => 'SKU / Product',
    'location' => 'Location',
    'qty' => 'Qty',
    'reason' => 'Reason',
    'actor' => 'Actor',
  ];
  $label = fn (string $v) => ucwords(str_replace(['_', '-'], ' ', $v));
  $activeChips = collect([
      'type' => request('type'),
      'location_id' => request('location_id') ? ($locations->firstWhere('id', (int) request('location_id'))?->code ?? request('location_id')) : null,
      'from' => request('from'),
      'to' => request('to'),
  ])->filter();
  $types = ['adjust','reserve','commit','release','incoming','receive','transfer_out','transfer_in','restock'];
@endphp

<x-admin.page
    title="Inventory movements"
    subtitle="Immutable ledger of every reserve, commit, adjustment, receive, and transfer across warehouses."
>
    <x-slot:actions>
        <a href="{{ route('admin.inventory.index') }}" class="admin-btn admin-btn-primary">
            <i data-lucide="warehouse" class="h-3.5 w-3.5"></i>
            Inventory levels
        </a>
    </x-slot:actions>

    <div class="order-ops-stat-rail mb-5">
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Available</span>
            <span class="order-ops-stat-value">{{ number_format($stats['available']) }}</span>
            <span class="order-ops-stat-meta">Across filtered locations</span>
        </div>
        <div class="order-ops-stat">
            <span class="order-ops-stat-label">Moves (24h)</span>
            <span class="order-ops-stat-value">{{ number_format($stats['recent_moves']) }}</span>
            <span class="order-ops-stat-meta">Ledger activity</span>
        </div>
        <div class="order-ops-stat tone-warning">
            <span class="order-ops-stat-label">Low stock</span>
            <span class="order-ops-stat-value">{{ number_format($stats['low_stock']) }}</span>
            <span class="order-ops-stat-meta">Needs replenishment</span>
        </div>
        <div class="order-ops-stat tone-danger">
            <span class="order-ops-stat-label">Out of stock</span>
            <span class="order-ops-stat-value">{{ number_format($stats['out_of_stock']) }}</span>
            <span class="order-ops-stat-meta">Zero available</span>
        </div>
    </div>

    @if($activeChips->isNotEmpty())
        <div class="mb-4 flex flex-wrap items-center gap-2">
            <span class="text-xs font-semibold uppercase tracking-wide text-[#8c9196]">Active</span>
            @foreach($activeChips as $key => $value)
                <span class="order-ops-chip is-active">{{ $label($key) }}: {{ $label((string) $value) }}</span>
            @endforeach
            <a href="{{ route('admin.inventory.movements') }}" class="text-xs font-medium text-[#2c6ecb] hover:underline">Clear all</a>
        </div>
    @endif

    <x-admin.advanced-table
        id="movements"
        :search-url="route('admin.inventory.movements')"
        search-placeholder="Search SKU, product, reason, type…"
        :columns="$columns"
        :filters-open="$activeChips->isNotEmpty()"
    >
        <x-slot:filters>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-type">Type</label>
                <div class="admin-select-wrap">
                    <select id="filter-type" name="type" form="movements-filter" class="admin-select" onchange="document.getElementById('movements-filter').submit()">
                        <option value="">Any</option>
                        @foreach($types as $type)
                            <option value="{{ $type }}" @selected(request('type') === $type)>{{ $label($type) }}</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-location">Location</label>
                <div class="admin-select-wrap">
                    <select id="filter-location" name="location_id" form="movements-filter" class="admin-select" onchange="document.getElementById('movements-filter').submit()">
                        <option value="">All locations</option>
                        @foreach($locations as $location)
                            <option value="{{ $location->id }}" @selected((int) request('location_id') === $location->id)>{{ $location->name }}</option>
                        @endforeach
                    </select>
                    <i data-lucide="chevron-down" class="admin-select-chevron"></i>
                </div>
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-from">From</label>
                <input id="filter-from" type="date" name="from" form="movements-filter" value="{{ request('from') }}" class="admin-input" onchange="document.getElementById('movements-filter').submit()">
            </div>
            <div class="admin-select-field">
                <label class="admin-label" for="filter-to">To</label>
                <input id="filter-to" type="date" name="to" form="movements-filter" value="{{ request('to') }}" class="admin-input" onchange="document.getElementById('movements-filter').submit()">
            </div>
            <div class="flex items-end">
                <a href="{{ route('admin.inventory.movements') }}" class="admin-btn w-full justify-center">
                    <i data-lucide="x" class="h-3.5 w-3.5"></i> Clear
                </a>
            </div>
        </x-slot:filters>

        <thead>
            <tr>
                <th data-col="when">When</th>
                <th data-col="type">Type</th>
                <th data-col="sku">SKU / Product</th>
                <th data-col="location">Location</th>
                <th data-col="qty">Qty</th>
                <th data-col="reason">Reason</th>
                <th data-col="actor">Actor</th>
            </tr>
        </thead>
        <tbody>
            @forelse($movements as $movement)
                @php
                    $sku = $movement->item?->sku ?? $movement->item?->variant?->sku ?? '#'.$movement->inventory_item_id;
                    $title = $movement->item?->variant?->product?->title;
                @endphp
                <tr>
                    <td data-col="when" class="text-xs text-[#6d7175]">{{ $movement->created_at?->timezone(config('app.timezone'))->format('Y-m-d H:i') }}</td>
                    <td data-col="type"><x-admin.badge tone="muted">{{ $label($movement->type) }}</x-admin.badge></td>
                    <td data-col="sku">
                        <div class="font-medium text-[#202223]">{{ $sku }}</div>
                        @if($title)<div class="text-xs text-[#8c9196]">{{ $title }}</div>@endif
                    </td>
                    <td data-col="location">{{ $movement->location?->code ?? $movement->location_id }}</td>
                    <td data-col="qty" class="font-semibold tabular-nums {{ $movement->quantity < 0 ? 'text-red-700' : 'text-emerald-700' }}">
                        {{ $movement->quantity > 0 ? '+' : '' }}{{ $movement->quantity }}
                    </td>
                    <td data-col="reason">{{ $movement->reason }}</td>
                    <td data-col="actor" class="text-[#6d7175]">{{ $movement->actor?->name ?? 'System' }}</td>
                </tr>
            @empty
                <tr>
                    <td colspan="7" class="p-10 text-center text-sm text-[#8c9196]">No movements match these filters.</td>
                </tr>
            @endforelse
        </tbody>
    </x-admin.advanced-table>

    <form id="movements-filter" method="get" action="{{ route('admin.inventory.movements') }}" class="hidden">
        @if(request('q'))
            <input type="hidden" name="q" value="{{ request('q') }}">
        @endif
    </form>

    <div class="mt-4">{{ $movements->links() }}</div>
</x-admin.page>
@endsection