@php
    $statusMeta = [
        'draft' => ['label' => __('Draft'), 'color' => 'slate'],
        'in_transit' => ['label' => __('In transit'), 'color' => 'amber'],
        'completed' => ['label' => __('Completed'), 'color' => 'emerald'],
        'cancelled' => ['label' => __('Cancelled'), 'color' => 'rose'],
    ];
@endphp
<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-6xl space-y-6">

        <x-page-header :title="__('Stock Transfers')" :subtitle="__('Move stock between locations.')" class="!mb-0">
            @if ($canManage)
                <x-button wire:click="create" type="button">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('New Transfer') }}
                </x-button>
            @endif
        </x-page-header>

        <x-inventory-tabs />

        <x-card>
            <!-- Filters -->
            <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:p-5">
                <select wire:model.live="statusFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:w-48">
                    <option value="">{{ __('All statuses') }}</option>
                    @foreach ($statusMeta as $key => $meta)
                        <option value="{{ $key }}">{{ $meta['label'] }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Table -->
            <div class="overflow-x-auto">
                <table class="min-w-full divide-y divide-slate-100">
                    <thead>
                        <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Date') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Material / Variant') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('From') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('To') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Quantity') }}</th>
                            <th class="px-3 lg:px-4 py-3.5">{{ __('Status') }}</th>
                            <th class="px-3 lg:px-4 py-3.5 text-right">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 bg-white">
                        @forelse ($transfers as $transfer)
                            @php $meta = $statusMeta[$transfer->status] ?? ['label' => ucfirst($transfer->status), 'color' => 'slate']; @endphp
                            <tr wire:key="transfer-{{ $transfer->id }}" class="text-sm transition hover:bg-slate-50/70">
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-slate-500">
                                    {{ optional($transfer->moved_at ?? $transfer->created_at)->format('d M Y') }}
                                    @if ($transfer->reference)
                                        <span class="block text-xs text-slate-400">{{ $transfer->reference }}</span>
                                    @endif
                                </td>
                                <td class="px-3 lg:px-4 py-4">
                                    <p class="font-medium text-slate-900">{{ $transfer->variant?->material?->name ?? '—' }}</p>
                                    <p class="text-xs text-slate-400">{{ $transfer->variant?->label }}</p>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-slate-600">{{ $transfer->fromLocation?->name ?? '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-slate-600">{{ $transfer->toLocation?->name ?? '—' }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right tabular-nums font-medium text-slate-900">{{ number_format((float) $transfer->quantity, 2) }}</td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4">
                                    <x-badge :color="$meta['color']">{{ $meta['label'] }}</x-badge>
                                </td>
                                <td class="whitespace-nowrap px-3 lg:px-4 py-4 text-right text-sm font-medium">
                                    @if ($canManage && ! in_array($transfer->status, ['completed', 'cancelled'], true))
                                        <button
                                            wire:click="cancel({{ $transfer->id }})"
                                            wire:confirm="{{ __('Cancel this transfer?') }}"
                                            class="text-rose-600 transition hover:text-rose-700"
                                        >{{ __('Cancel') }}</button>
                                    @else
                                        <span class="text-slate-300">—</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-3 lg:px-4 py-12">
                                    <x-empty-state
                                        icon="arrows-right-left"
                                        :title="__('No transfers yet')"
                                        :message="__('Move stock between your locations and it will show up here.')"
                                        class="border-0"
                                    >
                                        @if ($canManage)
                                            <x-button wire:click="create" type="button">
                                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                                {{ __('New Transfer') }}
                                            </x-button>
                                        @endif
                                    </x-empty-state>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($transfers->hasPages())
                <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                    {{ $transfers->links() }}
                </div>
            @endif
        </x-card>
    </div>

    <!-- Create Modal -->
    <x-dialog-modal wire:model.live="showModal" maxWidth="lg">
        <x-slot name="title">
            {{ __('New Transfer') }}
        </x-slot>

        <x-slot name="content">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div class="sm:col-span-2">
                    <x-label for="t_material_variant_id" value="{{ __('Material / Variant') }}" />
                    <select id="t_material_variant_id" wire:model="t_material_variant_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Select a material...') }}</option>
                        @foreach ($variantOptions as $opt)
                            <option value="{{ $opt['id'] }}">{{ $opt['label'] }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="t_material_variant_id" class="mt-2" />
                </div>

                <div>
                    <x-label for="t_from_location_id" value="{{ __('From location') }}" />
                    <select id="t_from_location_id" wire:model="t_from_location_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Select...') }}</option>
                        @foreach ($locations as $location)
                            <option value="{{ $location->id }}">{{ $location->name }}{{ $location->is_default ? ' (' . __('default') . ')' : '' }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="t_from_location_id" class="mt-2" />
                </div>

                <div>
                    <x-label for="t_to_location_id" value="{{ __('To location') }}" />
                    <select id="t_to_location_id" wire:model="t_to_location_id" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="">{{ __('Select...') }}</option>
                        @foreach ($locations as $location)
                            <option value="{{ $location->id }}">{{ $location->name }}</option>
                        @endforeach
                    </select>
                    <x-input-error for="t_to_location_id" class="mt-2" />
                </div>

                <div>
                    <x-label for="t_quantity" value="{{ __('Quantity') }}" />
                    <x-input id="t_quantity" type="number" step="any" min="0" class="mt-1 block w-full" wire:model="t_quantity" />
                    <x-input-error for="t_quantity" class="mt-2" />
                </div>

                <div>
                    <x-label for="t_reference" value="{{ __('Reference') }}" />
                    <x-input id="t_reference" type="text" class="mt-1 block w-full" wire:model="t_reference" />
                    <x-input-error for="t_reference" class="mt-2" />
                </div>

                <div class="sm:col-span-2">
                    <x-label for="t_notes" value="{{ __('Notes') }}" />
                    <textarea id="t_notes" rows="2" wire:model="t_notes" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="t_notes" class="mt-2" />
                </div>
            </div>
        </x-slot>

        <x-slot name="footer">
            <x-secondary-button wire:click="closeModal" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-secondary-button>

            <x-button class="ms-3" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                <span wire:loading.remove wire:target="save">{{ __('Transfer stock') }}</span>
                <span wire:loading wire:target="save">{{ __('Transferring...') }}</span>
            </x-button>
        </x-slot>
    </x-dialog-modal>
</div>