@extends('layouts.admin')
@section('title','New transfer')
@section('content')
<x-admin.page
    title="New transfer"
    subtitle="Build a draft movement between warehouses. Stock leaves origin only when you ship; destination available updates when you receive."
>
    <x-slot:actions>
        <a href="{{ route('admin.transfers.index') }}" class="admin-btn">
            <i data-lucide="arrow-left" class="h-3.5 w-3.5"></i>
            Transfers
        </a>
    </x-slot:actions>

    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">
            {{ $errors->first() }}
        </div>
    @endif

    <form method="post" action="{{ route('admin.transfers.store') }}" class="space-y-5">
        @csrf
        <div class="grid gap-4 lg:grid-cols-3">
            <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5 lg:col-span-2">
                <h2 class="mb-4 text-sm font-semibold text-[#202223]">Lane</h2>
                <div class="grid gap-4 sm:grid-cols-2">
                    <label class="block text-xs font-medium text-[#6d7175]">From warehouse
                        <select name="from_location_id" required class="admin-input mt-1 w-full" onchange="window.location='{{ route('admin.transfers.create') }}?from_location_id='+this.value">
                            @foreach($locations as $location)
                                <option value="{{ $location->id }}" @selected((int) old('from_location_id', $fromLocation?->id) === $location->id)>{{ $location->name }} ({{ $location->code }})</option>
                            @endforeach
                        </select>
                    </label>
                    <label class="block text-xs font-medium text-[#6d7175]">To warehouse
                        <select name="to_location_id" required class="admin-input mt-1 w-full">
                            <option value="">Select destination…</option>
                            @foreach($locations as $location)
                                @if((int) $location->id !== (int) $fromLocation?->id)
                                    <option value="{{ $location->id }}" @selected((int) old('to_location_id') === $location->id)>{{ $location->name }} ({{ $location->code }})</option>
                                @endif
                            @endforeach
                        </select>
                    </label>
                    <label class="block text-xs font-medium text-[#6d7175] sm:col-span-2">Internal notes
                        <textarea name="notes" rows="3" class="admin-input mt-1 w-full" placeholder="Reason, carrier, dock appointment…">{{ old('notes') }}</textarea>
                    </label>
                </div>
            </div>
            <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5">
                <h2 class="mb-2 text-sm font-semibold text-[#202223]">Origin availability</h2>
                <p class="mb-3 text-xs text-[#6d7175]">{{ $fromLocation?->name }} has {{ number_format($originStock->count()) }} SKUs with available stock.</p>
                <p class="text-xs text-[#8c9196]">Shipping deducts origin available and posts incoming at destination. Receiving converts incoming to sellable stock.</p>
            </div>
        </div>

        <div class="rounded-xl border border-[var(--color-admin-border)] bg-white p-5">
            <div class="mb-4 flex items-center justify-between gap-3">
                <h2 class="text-sm font-semibold text-[#202223]">Lines</h2>
                <button type="button" class="admin-btn" data-add-line>
                    <i data-lucide="plus" class="h-3.5 w-3.5"></i>
                    Add line
                </button>
            </div>
            <div class="space-y-3" data-line-rows>
                @php $oldLines = old('lines', [['variant_id' => '', 'quantity' => 1], ['variant_id' => '', 'quantity' => 1]]); @endphp
                @foreach($oldLines as $i => $line)
                    <div class="grid gap-3 sm:grid-cols-12" data-line-row>
                        <label class="block text-xs font-medium text-[#6d7175] sm:col-span-8">SKU
                            <select name="lines[{{ $i }}][variant_id]" class="admin-input mt-1 w-full">
                                <option value="">Select SKU…</option>
                                @foreach($originStock as $stock)
                                    <option value="{{ $stock['variant_id'] }}" @selected((string) ($line['variant_id'] ?? '') === (string) $stock['variant_id'])>
                                        {{ $stock['sku'] }} — {{ $stock['title'] }} ({{ $stock['available'] }} avail)
                                    </option>
                                @endforeach
                            </select>
                        </label>
                        <label class="block text-xs font-medium text-[#6d7175] sm:col-span-3">Qty
                            <input type="number" name="lines[{{ $i }}][quantity]" min="1" value="{{ $line['quantity'] ?? 1 }}" class="admin-input mt-1 w-full">
                        </label>
                        <div class="flex items-end sm:col-span-1">
                            <button type="button" class="admin-btn w-full" data-remove-line aria-label="Remove line">×</button>
                        </div>
                    </div>
                @endforeach
            </div>
            @if($originStock->isEmpty())
                <p class="mt-3 text-sm text-[#8c9196]">No available stock at this origin. Sync inventory or pick another warehouse.</p>
            @endif
        </div>

        <button type="submit" class="admin-btn admin-btn-primary">Create draft transfer</button>
    </form>
</x-admin.page>

<template id="transfer-line-template">
    <div class="grid gap-3 sm:grid-cols-12" data-line-row>
        <label class="block text-xs font-medium text-[#6d7175] sm:col-span-8">SKU
            <select name="lines[__i__][variant_id]" class="admin-input mt-1 w-full">
                <option value="">Select SKU…</option>
                @foreach($originStock as $stock)
                    <option value="{{ $stock['variant_id'] }}">{{ $stock['sku'] }} — {{ $stock['title'] }} ({{ $stock['available'] }} avail)</option>
                @endforeach
            </select>
        </label>
        <label class="block text-xs font-medium text-[#6d7175] sm:col-span-3">Qty
            <input type="number" name="lines[__i__][quantity]" min="1" value="1" class="admin-input mt-1 w-full">
        </label>
        <div class="flex items-end sm:col-span-1">
            <button type="button" class="admin-btn w-full" data-remove-line aria-label="Remove line">×</button>
        </div>
    </div>
</template>

<script>
(() => {
  const rows = document.querySelector('[data-line-rows]');
  const tpl = document.getElementById('transfer-line-template');
  const add = document.querySelector('[data-add-line]');
  if (!rows || !tpl || !add) return;
  let i = rows.querySelectorAll('[data-line-row]').length;
  add.addEventListener('click', () => {
    const html = tpl.innerHTML.replaceAll('__i__', String(i++));
    rows.insertAdjacentHTML('beforeend', html);
  });
  rows.addEventListener('click', (e) => {
    const btn = e.target.closest('[data-remove-line]');
    if (!btn) return;
    const row = btn.closest('[data-line-row]');
    if (rows.querySelectorAll('[data-line-row]').length > 1) row.remove();
  });
})();
</script>
@endsection