@extends('layouts.app')

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

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="mb-6">
        <h1 class="text-3xl font-bold tracking-tight text-gray-900 dark:text-white">Create Order</h1>
        <p class="text-gray-700 dark:text-gray-300">Manually create an order for an agent</p>
    </div>

    <form action="{{ route('agent-orders.store') }}" method="POST" id="orderForm">
        @csrf

        <div class="space-y-6">
            <!-- Agent Selection -->
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2 text-gray-900 dark:text-white">Agent Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Agent Matrix ID *</label>
                        <div class="flex gap-2">
                            <input type="text" name="agent_coupon" id="agent_coupon" value="{{ old('agent_coupon') }}" required
                                   class="flex-1 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500 font-mono uppercase"
                                   placeholder="e.g., AGT0001">
                            <button type="button" id="lookupAgent"
                                    class="px-4 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-700">
                                Lookup
                            </button>
                        </div>
                        @error('agent_coupon')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div id="agentInfo" class="hidden">
                        <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Agent Details</label>
                        <div class="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-md p-3">
                            <p class="font-medium text-green-800 dark:text-green-200" id="agentName"></p>
                            <p class="text-sm text-green-600 dark:text-green-400" id="agentTier"></p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Customer Information -->
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2 text-gray-900 dark:text-white">Customer Information</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Customer Name *</label>
                        <input type="text" name="customer_name" value="{{ old('customer_name') }}" required
                               class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
                               placeholder="Customer full name">
                        @error('customer_name')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Phone</label>
                        <input type="text" name="customer_phone" value="{{ old('customer_phone') }}"
                               class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
                               placeholder="012-3456789">
                        @error('customer_phone')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Email</label>
                        <input type="email" name="customer_email" value="{{ old('customer_email') }}"
                               class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
                               placeholder="customer@email.com">
                        @error('customer_email')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium mb-2 text-gray-700 dark:text-gray-300">Address</label>
                        <textarea name="customer_address" rows="2"
                                  class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
                                  placeholder="Delivery address">{{ old('customer_address') }}</textarea>
                        @error('customer_address')
                            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Order Items -->
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2 text-gray-900 dark:text-white">Order Items</h3>

                <!-- Product Selection Header -->
                <div class="grid grid-cols-12 gap-2 mb-2 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
                    <div class="col-span-5">Product</div>
                    <div class="col-span-2">Stock</div>
                    <div class="col-span-2">Qty</div>
                    <div class="col-span-2">Price</div>
                    <div class="col-span-1"></div>
                </div>

                <div id="itemsContainer">
                    <div class="item-row grid grid-cols-12 gap-2 mb-3 items-center">
                        <div class="col-span-5">
                            <select name="items[0][product]" class="product-select w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm" onchange="selectProduct(this, 0)">
                                <option value="">-- Select Product --</option>
                                @foreach($products as $product)
                                    <option value="{{ $product->sku }}"
                                            data-name="{{ $product->product_name }}"
                                            data-price="{{ $product->price }}"
                                            data-stock="{{ $product->quantity }}">
                                        {{ $product->product_name }} ({{ $product->sku }})
                                    </option>
                                @endforeach
                            </select>
                            <input type="hidden" name="items[0][sku]" class="item-sku">
                            <input type="hidden" name="items[0][name]" class="item-name">
                        </div>
                        <div class="col-span-2">
                            <span class="item-stock text-sm text-gray-500 dark:text-gray-400">-</span>
                        </div>
                        <div class="col-span-2">
                            <input type="number" name="items[0][quantity]" placeholder="Qty" min="1" value="1" required
                                   class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm item-qty"
                                   onchange="calculateTotals()">
                        </div>
                        <div class="col-span-2">
                            <input type="number" name="items[0][unit_price]" placeholder="Price" min="0" step="0.01" required
                                   class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm item-price"
                                   onchange="calculateTotals()">
                        </div>
                        <div class="col-span-1 flex items-center justify-center">
                            <button type="button" class="text-red-500 hover:text-red-700 remove-item hidden">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>
                <button type="button" id="addItem" class="mt-2 text-sm text-indigo-600 dark:text-indigo-400 hover:underline">
                    + Add another item
                </button>

                @if($products->isEmpty())
                    <div class="mt-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md p-3">
                        <p class="text-sm text-yellow-700 dark:text-yellow-300">
                            <svg class="w-4 h-4 inline mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                            </svg>
                            No products with available stock found. Please check inventory.
                        </p>
                    </div>
                @endif

                @error('items')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <!-- Order Summary -->
            <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow">
                <h3 class="text-lg font-semibold mb-4 border-b border-gray-200 dark:border-gray-700 pb-2 text-gray-900 dark:text-white">Order Summary</h3>
                <div class="space-y-3">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600 dark:text-gray-400">Subtotal:</span>
                        <span class="font-medium text-gray-900 dark:text-white" id="subtotal">RM 0.00</span>
                    </div>
                    <div class="flex justify-between items-center text-sm">
                        <label for="discount_amount" class="text-gray-600 dark:text-gray-400">Discount:</label>
                        <div class="flex items-center gap-2">
                            <span class="text-gray-600 dark:text-gray-400">RM</span>
                            <input type="number" name="discount_amount" id="discount_amount" value="0" min="0" step="0.01"
                                   class="w-24 px-3 py-1 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm text-right"
                                   onchange="calculateTotals()">
                        </div>
                    </div>
                    <div class="flex justify-between text-lg font-bold border-t border-gray-200 dark:border-gray-700 pt-3">
                        <span class="text-gray-900 dark:text-white">Total:</span>
                        <span class="text-indigo-600 dark:text-indigo-400" id="total">RM 0.00</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="mt-6 flex justify-end gap-3">
            <a href="{{ route('agent-orders.index') }}"
               class="inline-flex items-center gap-2 px-5 py-2.5 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors font-medium">
                Cancel
            </a>
            <button type="submit"
                    class="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 shadow-md hover:shadow-lg transition-all font-medium focus:ring-2 focus:ring-indigo-500">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
                Create Order
            </button>
        </div>
    </form>
</div>

<script>
let itemIndex = 1;

// Product data for JavaScript access
const productsData = @json($products);

function selectProduct(selectEl, index) {
    const row = selectEl.closest('.item-row');
    const option = selectEl.options[selectEl.selectedIndex];

    if (option.value) {
        const sku = option.value;
        const name = option.dataset.name;
        const price = parseFloat(option.dataset.price) || 0;
        const stock = parseInt(option.dataset.stock) || 0;

        row.querySelector('.item-sku').value = sku;
        row.querySelector('.item-name').value = name;
        row.querySelector('.item-price').value = price.toFixed(2);
        row.querySelector('.item-stock').textContent = stock + ' available';
        row.querySelector('.item-stock').className = stock > 10
            ? 'item-stock text-sm text-green-600 dark:text-green-400'
            : 'item-stock text-sm text-orange-600 dark:text-orange-400';
    } else {
        row.querySelector('.item-sku').value = '';
        row.querySelector('.item-name').value = '';
        row.querySelector('.item-price').value = '';
        row.querySelector('.item-stock').textContent = '-';
        row.querySelector('.item-stock').className = 'item-stock text-sm text-gray-500 dark:text-gray-400';
    }

    calculateTotals();
}

document.getElementById('addItem').addEventListener('click', function() {
    const container = document.getElementById('itemsContainer');
    const productOptions = Array.from(document.querySelector('.product-select').options)
        .map(opt => `<option value="${opt.value}" data-name="${opt.dataset?.name || ''}" data-price="${opt.dataset?.price || ''}" data-stock="${opt.dataset?.stock || ''}">${opt.text}</option>`)
        .join('');

    const template = `
        <div class="item-row grid grid-cols-12 gap-2 mb-3 items-center">
            <div class="col-span-5">
                <select name="items[${itemIndex}][product]" class="product-select w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm" onchange="selectProduct(this, ${itemIndex})">
                    ${productOptions}
                </select>
                <input type="hidden" name="items[${itemIndex}][sku]" class="item-sku">
                <input type="hidden" name="items[${itemIndex}][name]" class="item-name">
            </div>
            <div class="col-span-2">
                <span class="item-stock text-sm text-gray-500 dark:text-gray-400">-</span>
            </div>
            <div class="col-span-2">
                <input type="number" name="items[${itemIndex}][quantity]" placeholder="Qty" min="1" value="1" required
                       class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm item-qty"
                       onchange="calculateTotals()">
            </div>
            <div class="col-span-2">
                <input type="number" name="items[${itemIndex}][unit_price]" placeholder="Price" min="0" step="0.01" required
                       class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white text-sm item-price"
                       onchange="calculateTotals()">
            </div>
            <div class="col-span-1 flex items-center justify-center">
                <button type="button" class="text-red-500 hover:text-red-700 remove-item">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                </button>
            </div>
        </div>
    `;
    container.insertAdjacentHTML('beforeend', template);
    itemIndex++;
    updateRemoveButtons();
});

document.getElementById('itemsContainer').addEventListener('click', function(e) {
    if (e.target.closest('.remove-item')) {
        e.target.closest('.item-row').remove();
        calculateTotals();
        updateRemoveButtons();
    }
});

function updateRemoveButtons() {
    const rows = document.querySelectorAll('.item-row');
    rows.forEach((row, index) => {
        const removeBtn = row.querySelector('.remove-item');
        if (rows.length > 1) {
            removeBtn.classList.remove('hidden');
        } else {
            removeBtn.classList.add('hidden');
        }
    });
}

function calculateTotals() {
    let subtotal = 0;
    document.querySelectorAll('.item-row').forEach(row => {
        const qty = parseFloat(row.querySelector('.item-qty').value) || 0;
        const price = parseFloat(row.querySelector('.item-price').value) || 0;
        subtotal += qty * price;
    });

    const discount = parseFloat(document.getElementById('discount_amount').value) || 0;
    const total = subtotal - discount;

    document.getElementById('subtotal').textContent = 'RM ' + subtotal.toFixed(2);
    document.getElementById('total').textContent = 'RM ' + total.toFixed(2);
}

document.getElementById('lookupAgent').addEventListener('click', function() {
    const coupon = document.getElementById('agent_coupon').value.trim().toUpperCase();
    if (!coupon) {
        alert('Please enter a Matrix ID');
        return;
    }

    fetch('{{ route("api.agents.search-coupon") }}?coupon=' + coupon)
        .then(response => response.json())
        .then(data => {
            const infoDiv = document.getElementById('agentInfo');
            if (data.success) {
                document.getElementById('agentName').textContent = data.agent.name;
                document.getElementById('agentTier').textContent = 'Tier: ' + data.agent.tier;
                infoDiv.classList.remove('hidden');
            } else {
                infoDiv.classList.add('hidden');
                alert(data.message || 'Agent not found');
            }
        })
        .catch(error => {
            alert('Error looking up agent');
            console.error(error);
        });
});

document.getElementById('agent_coupon').addEventListener('input', function() {
    this.value = this.value.toUpperCase();
});
</script>
@endsection