@extends('layouts.app')

@section('title', 'Create Return')

@section('content')
<div class="px-4 sm:px-6 lg:px-8 py-8" x-data="returnForm()">
    <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 Return</h1>
            <p class="mt-2 text-sm text-gray-700 dark:text-gray-300">Process supplier or customer returns</p>
        </div>

        <form action="{{ route('returns.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">Return Type</h2>
            </div>

            <div class="px-6 py-4 space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Return Type *</label>
                    <select name="type" required x-model="returnType" @change="resetForm()"
                            class="block w-full md:w-1/2 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">
                        <option value="">-- Select Type --</option>
                        <option value="supplier_return">Supplier Return (Returning to Supplier)</option>
                        <option value="customer_return">Customer Return (Customer Returning to Us)</option>
                    </select>
                </div>

                <div x-show="returnType === 'supplier_return'" x-transition>
                    <label for="supplier_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Supplier *</label>
                    <select name="supplier_id" id="supplier_id" x-model="supplierId" :required="returnType === 'supplier_return'"
                            class="block w-full md:w-1/2 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">
                        <option value="">-- Select Supplier --</option>
                        @foreach($suppliers as $supplier)
                            <option value="{{ $supplier->id }}">{{ $supplier->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div x-show="returnType === 'customer_return'" x-transition class="space-y-4">
                    <div>
                        <label for="customer_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Customer Name *</label>
                        <input type="text" name="customer_name" id="customer_name" :required="returnType === 'customer_return'"
                               class="block w-full md:w-1/2 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">
                    </div>
                    <div>
                        <label for="customer_order_ref" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Order Reference</label>
                        <input type="text" name="customer_order_ref" id="customer_order_ref"
                               class="block w-full md:w-1/2 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">
                    </div>
                </div>

                <div>
                    <label for="reason" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Reason *</label>
                    <input type="text" name="reason" id="reason" required placeholder="E.g., Defective, Wrong item, Customer changed mind"
                           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">
                </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 Return</h2>
                <button type="button" @click="addItem()" :disabled="!returnType" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 text-sm disabled:bg-gray-400 dark:focus:ring-offset-gray-800">
                    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. Select return type and click "Add Item".</p>
                </template>

                <template x-for="(item, index) in items" :key="index">
                    <div class="grid grid-cols-12 gap-4 mb-4 items-end p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800">
                        <div class="col-span-5">
                            <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">
                                <option value="">-- Select Product --</option>
                                <template x-for="(inv, invIndex) in uniqueProducts" :key="invIndex">
                                    <option :value="inv.sku" x-text="`${inv.product_name} (${inv.sku})`"></option>
                                </template>
                            </select>
                        </div>

                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Warehouse</label>
                            <select x-model="item.warehouse_id" :name="'items[' + index + '][warehouse_id]'" required
                                    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">
                                <option value="">-- Select --</option>
                                @foreach($warehouses as $warehouse)
                                    <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-span-2">
                            <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"
                                   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">
                        </div>

                        <div class="col-span-2">
                            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Condition</label>
                            <select x-model="item.condition" :name="'items[' + index + '][condition]'" required
                                    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">
                                <option value="defective">Defective</option>
                                <option value="damaged">Damaged</option>
                                <option value="resalable">Resalable</option>
                            </select>
                        </div>

                        <div class="col-span-1">
                            <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">
                                ✕
                            </button>
                        </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 additional notes"
                          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"></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('returns.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 Return
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function returnForm() {
    return {
        returnType: '',
        supplierId: '',
        items: [],
        allInventory: @json($inventory ?? []),

        get uniqueProducts() {
            // Get unique products by SKU (remove duplicates from multiple warehouses)
            const seen = new Set();
            return this.allInventory.filter(inv => {
                if (seen.has(inv.sku)) {
                    return false;
                }
                seen.add(inv.sku);
                return true;
            });
        },

        addItem() {
            this.items.push({
                sku: '',
                warehouse_id: '',
                quantity: 1,
                condition: 'defective'
            });
        },

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

        updateProduct(index) {
            // Just for future enhancements
        },

        resetForm() {
            this.items = [];
            this.supplierId = '';
        }
    }
}
</script>
@endsection