@extends('layouts.app')

@section('title', 'Create Stock Transfer')

@section('content')
<div class="px-4 sm:px-6 lg:px-8 py-8" x-data="transferForm()">
    <div class="max-w-5xl mx-auto">
        <div class="mb-6">
            <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Create Stock Transfer</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">Transfer inventory between warehouses</p>
        </div>

        <form action="{{ route('stock-transfers.store') }}" method="POST" class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
            @csrf

            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white">Warehouse Selection</h2>
            </div>

            <div class="px-6 py-4 space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="from_warehouse_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">From Warehouse *</label>
                        <select name="from_warehouse_id" id="from_warehouse_id" required x-model="fromWarehouse" @change="filterInventory()"
                                class="block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:focus:ring-offset-gray-800">
                            <option value="">-- Select Source Warehouse --</option>
                            @foreach($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}">{{ $warehouse->name }} ({{ $warehouse->code }})</option>
                            @endforeach
                        </select>
                        @error('from_warehouse_id')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <label for="to_warehouse_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">To Warehouse *</label>
                        <select name="to_warehouse_id" id="to_warehouse_id" required x-model="toWarehouse"
                                class="block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:focus:ring-offset-gray-800">
                            <option value="">-- Select Destination Warehouse --</option>
                            @foreach($warehouses as $warehouse)
                                <option value="{{ $warehouse->id }}">{{ $warehouse->name }} ({{ $warehouse->code }})</option>
                            @endforeach
                        </select>
                        @error('to_warehouse_id')
                            <p class="mt-1 text-sm text-red-600 dark:text-red-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-t border-b border-gray-200 dark:border-gray-700 flex items-center justify-between">
                <h2 class="text-lg font-medium text-gray-900 dark:text-white">Items to Transfer</h2>
                <button type="button" @click="addItem()" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 dark:focus:ring-offset-gray-800 text-sm">
                    Add Item
                </button>
            </div>

            <div class="px-6 py-4">
                <template x-if="items.length === 0">
                    <p class="text-center text-gray-500 dark:text-gray-400 py-4">No items added. Click "Add Item" to start.</p>
                </template>

                <template x-for="(item, index) in items" :key="index">
                    <div class="grid grid-cols-12 gap-4 mb-4 items-end">
                        <div class="col-span-6">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Product</label>
                            <select x-model="item.sku" :name="'items[' + index + '][sku]'" required @change="updateProduct(index)"
                                    class="block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:focus:ring-offset-gray-800">
                                <option value="">-- Select Product --</option>
                                <template x-for="inv in availableInventory" :key="inv.sku">
                                    <option :value="inv.sku" x-text="`${inv.product_name} (${inv.sku}) - Stock: ${inv.quantity}`"></option>
                                </template>
                            </select>
                        </div>

                        <div class="col-span-3">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Quantity</label>
                            <input type="number" x-model="item.quantity" :name="'items[' + index + '][quantity]'" required min="1" :max="item.maxQty"
                                   class="block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:focus:ring-offset-gray-800">
                        </div>

                        <div class="col-span-2">
                            <button type="button" @click="removeItem(index)" class="w-full px-3 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 dark:focus:ring-offset-gray-800">
                                Remove
                            </button>
                        </div>

                        <div class="col-span-12" x-show="item.maxQty > 0">
                            <p class="text-xs text-gray-500 dark:text-gray-400">Available: <span x-text="item.maxQty"></span> units</p>
                        </div>
                    </div>
                </template>
            </div>

            <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
                <label for="notes" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Notes</label>
                <textarea name="notes" id="notes" rows="3"
                          placeholder="Add any notes about this transfer"
                          class="block w-full px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 dark:focus:ring-offset-gray-800 placeholder:text-gray-400 dark:placeholder:text-gray-500"></textarea>
            </div>

            <div class="px-6 py-4 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-700 flex items-center justify-end gap-3">
                <a href="{{ route('stock-transfers.index') }}" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700/50">
                    Cancel
                </a>
                <button type="submit" class="px-4 py-2 bg-indigo-600 border border-transparent rounded-md text-sm font-medium text-white hover:bg-indigo-700 dark:focus:ring-offset-gray-800">
                    Create Transfer
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function transferForm() {
    return {
        fromWarehouse: '',
        toWarehouse: '',
        items: [],
        allInventory: @json($inventory),
        availableInventory: [],

        filterInventory() {
            if (!this.fromWarehouse) {
                this.availableInventory = [];
                return;
            }

            this.availableInventory = this.allInventory.filter(inv =>
                inv.warehouse_id == this.fromWarehouse && inv.quantity > 0
            );

            // Reset items when warehouse changes
            this.items = [];
        },

        addItem() {
            if (!this.fromWarehouse) {
                alert('Please select a source warehouse first');
                return;
            }

            this.items.push({
                sku: '',
                quantity: 1,
                maxQty: 0
            });
        },

        removeItem(index) {
            this.items.splice(index, 1);
        },

        updateProduct(index) {
            const item = this.items[index];
            const inv = this.availableInventory.find(i => i.sku === item.sku);

            if (inv) {
                item.maxQty = inv.quantity;
                item.quantity = Math.min(item.quantity, inv.quantity);
            }
        }
    }
}
</script>
@endsection