@extends('admin.layouts.app')

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

@section('content')
<div class="space-y-6">
    <!-- Page Header -->
    <div class="flex items-center space-x-4">
        <a href="{{ route('admin.orders.index') }}" class="p-2 hover:bg-slate-100 dark:hover:bg-slate-700 rounded-xl transition-colors">
            <i data-lucide="arrow-left" class="w-5 h-5 text-slate-500"></i>
        </a>
        <div>
            <h1 class="text-2xl font-bold text-slate-800 dark:text-white">Create New Order</h1>
            <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Add a new order manually</p>
        </div>
    </div>

    <form action="{{ route('admin.orders.store') }}" method="POST" id="orderForm">
        @csrf
        
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Main Content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Order Items -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-lg font-semibold text-slate-800 dark:text-white">Order Items</h2>
                        <button type="button" onclick="addOrderItem()" class="px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors">
                            <i data-lucide="plus" class="w-4 h-4 inline mr-1"></i> Add Item
                        </button>
                    </div>
                    
                    <div id="orderItems" class="space-y-4">
                        <!-- First item -->
                        <div class="order-item border border-slate-200 dark:border-slate-700 rounded-xl p-4" data-index="0">
                            <div class="flex items-start justify-between mb-3">
                                <span class="text-sm font-medium text-slate-500">Item #1</span>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                                <div class="md:col-span-2">
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Product</label>
                                    <div class="relative">
                                        <input type="text" class="product-search w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                                            placeholder="Search product..." autocomplete="off" data-index="0">
                                        <div class="product-search-results hidden absolute z-10 w-full mt-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-lg shadow-lg max-h-48 overflow-y-auto"></div>
                                    </div>
                                    <input type="hidden" name="items[0][product_name]" class="product-name-input" required>
                                    <input type="hidden" name="items[0][product_id]" class="product-id-input" value="">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Price (৳)</label>
                                    <input type="number" name="items[0][price]" value="0" step="0.01" required
                                        class="price-input w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                                        onchange="calculateTotals()">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Quantity</label>
                                    <input type="number" name="items[0][quantity]" value="1" min="1" required
                                        class="quantity-input w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                                        onchange="calculateTotals()">
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-3">
                                <div>
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Color</label>
                                    <input type="text" name="items[0][color]"
                                        class="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                                        placeholder="e.g., Red">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Size</label>
                                    <input type="text" name="items[0][size]"
                                        class="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                                        placeholder="e.g., XL">
                                </div>
                                <div>
                                    <label class="block text-xs font-medium text-slate-500 mb-1">Line Total</label>
                                    <div class="px-3 py-2 bg-slate-100 dark:bg-slate-600 rounded-lg text-sm font-medium text-slate-800 dark:text-white">
                                        ৳<span class="line-total">0</span>
                                    </div>
                                </div>
                            </div>
                            <div class="selected-product hidden mt-2 p-2 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
                                <p class="text-sm font-medium text-indigo-700 dark:text-indigo-300 selected-product-name"></p>
                                <p class="text-xs text-indigo-600 dark:text-indigo-400">Stock: <span class="selected-product-stock"></span></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4 p-4 bg-slate-50 dark:bg-slate-700/50 rounded-xl">
                        <div class="text-right text-sm text-slate-500">
                            Items Subtotal: <span class="font-semibold text-slate-800 dark:text-white">৳<span id="itemsSubtotal">0</span></span>
                        </div>
                    </div>
                </div>

                <!-- Charges -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Charges & Discounts</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Shipping Charge (৳)</label>
                            <input type="number" name="shipping_charge" value="60" step="0.01" min="0"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white"
                                onchange="calculateTotals()">
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Discount (৳)</label>
                            <input type="number" name="discount" value="0" step="0.01" min="0"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white"
                                onchange="calculateTotals()">
                        </div>
                    </div>
                    
                    <div class="mt-4 p-4 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl">
                        <div class="flex justify-between items-center">
                            <span class="text-lg font-semibold text-slate-800 dark:text-white">Order Total</span>
                            <span class="text-2xl font-bold text-indigo-600 dark:text-indigo-400">৳<span id="orderTotal">60</span></span>
                        </div>
                    </div>
                </div>

                <!-- Customer Information -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Customer Information</h2>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Name *</label>
                            <input type="text" name="shipping_name" required
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                            @error('shipping_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Phone *</label>
                            <input type="text" name="shipping_phone" required
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                            @error('shipping_phone')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Email</label>
                            <input type="email" name="shipping_email"
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                        </div>
                    </div>
                </div>

                <!-- Shipping Address -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Shipping Address</h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Address *</label>
                            <textarea name="shipping_address" rows="3" required
                                class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white"></textarea>
                            @error('shipping_address')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                        </div>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">District</label>
                                <input type="text" name="shipping_district"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Area</label>
                                <input type="text" name="shipping_area"
                                    class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <!-- Payment Info -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Payment</h2>
                    
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">Payment Method</label>
                            <select name="payment_method" class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white">
                                <option value="cod">Cash on Delivery</option>
                                <option value="bkash">bKash</option>
                                <option value="nagad">Nagad</option>
                                <option value="rocket">Rocket</option>
                                <option value="bank">Bank Transfer</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Order Notes -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
                    <h2 class="text-lg font-semibold text-slate-800 dark:text-white mb-4">Order Notes</h2>
                    <textarea name="notes" rows="3"
                        class="w-full px-4 py-2 border border-slate-200 dark:border-slate-600 rounded-xl bg-white dark:bg-slate-700 text-slate-800 dark:text-white"
                        placeholder="Internal notes about this order"></textarea>
                </div>

                <!-- Actions -->
                <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6 space-y-3">
                    <button type="submit" class="w-full px-4 py-3 bg-indigo-600 text-white rounded-xl font-medium hover:bg-indigo-700 transition-colors">
                        Create Order
                    </button>
                    <a href="{{ route('admin.orders.index') }}" class="block w-full px-4 py-3 bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-300 rounded-xl font-medium text-center hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors">
                        Cancel
                    </a>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Item Template (hidden) -->
<template id="orderItemTemplate">
    <div class="order-item border border-slate-200 dark:border-slate-700 rounded-xl p-4" data-index="__INDEX__">
        <div class="flex items-start justify-between mb-3">
            <span class="text-sm font-medium text-slate-500">New Item</span>
            <button type="button" onclick="removeOrderItem(this)" class="p-1 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-lg">
                <i data-lucide="trash-2" class="w-4 h-4"></i>
            </button>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
            <div class="md:col-span-2">
                <label class="block text-xs font-medium text-slate-500 mb-1">Product</label>
                <div class="relative">
                    <input type="text" class="product-search w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                        placeholder="Search product..." autocomplete="off" data-index="__INDEX__">
                    <div class="product-search-results hidden absolute z-10 w-full mt-1 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 rounded-lg shadow-lg max-h-48 overflow-y-auto"></div>
                </div>
                <input type="hidden" name="items[__INDEX__][product_name]" class="product-name-input" required>
                <input type="hidden" name="items[__INDEX__][product_id]" class="product-id-input" value="">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Price (৳)</label>
                <input type="number" name="items[__INDEX__][price]" value="0" step="0.01" required
                    class="price-input w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                    onchange="calculateTotals()">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Quantity</label>
                <input type="number" name="items[__INDEX__][quantity]" value="1" min="1" required
                    class="quantity-input w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                    onchange="calculateTotals()">
            </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-3">
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Color</label>
                <input type="text" name="items[__INDEX__][color]"
                    class="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                    placeholder="e.g., Red">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Size</label>
                <input type="text" name="items[__INDEX__][size]"
                    class="w-full px-3 py-2 border border-slate-200 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-sm"
                    placeholder="e.g., XL">
            </div>
            <div>
                <label class="block text-xs font-medium text-slate-500 mb-1">Line Total</label>
                <div class="px-3 py-2 bg-slate-100 dark:bg-slate-600 rounded-lg text-sm font-medium text-slate-800 dark:text-white">
                    ৳<span class="line-total">0</span>
                </div>
            </div>
        </div>
        <div class="selected-product hidden mt-2 p-2 bg-indigo-50 dark:bg-indigo-900/20 rounded-lg">
            <p class="text-sm font-medium text-indigo-700 dark:text-indigo-300 selected-product-name"></p>
            <p class="text-xs text-indigo-600 dark:text-indigo-400">Stock: <span class="selected-product-stock"></span></p>
        </div>
    </div>
</template>


@push('scripts')
<script>
let itemIndex = 1;
let searchTimeout = null;

function addOrderItem() {
    const template = document.getElementById('orderItemTemplate');
    const container = document.getElementById('orderItems');
    
    let html = template.innerHTML.replace(/__INDEX__/g, itemIndex);
    
    const div = document.createElement('div');
    div.innerHTML = html;
    const newItem = div.firstElementChild;
    container.appendChild(newItem);
    
    initProductSearch(newItem.querySelector('.product-search'));
    
    itemIndex++;
    if (typeof reinitIcons !== 'undefined') reinitIcons();
    calculateTotals();
}

function removeOrderItem(btn) {
    const item = btn.closest('.order-item');
    if (document.querySelectorAll('.order-item').length > 1) {
        item.remove();
        calculateTotals();
    } else {
        alert('Order must have at least one item');
    }
}

function calculateTotals() {
    let subtotal = 0;
    
    document.querySelectorAll('.order-item').forEach(item => {
        const price = parseFloat(item.querySelector('input[name*="[price]"]').value) || 0;
        const quantity = parseInt(item.querySelector('input[name*="[quantity]"]').value) || 0;
        const lineTotal = price * quantity;
        
        item.querySelector('.line-total').textContent = lineTotal.toLocaleString();
        subtotal += lineTotal;
    });
    
    const shipping = parseFloat(document.querySelector('input[name="shipping_charge"]').value) || 0;
    const discount = parseFloat(document.querySelector('input[name="discount"]').value) || 0;
    const total = subtotal + shipping - discount;
    
    document.getElementById('itemsSubtotal').textContent = subtotal.toLocaleString();
    document.getElementById('orderTotal').textContent = total.toLocaleString();
}

function initProductSearch(input) {
    if (!input) return;
    
    const resultsDiv = input.nextElementSibling;
    const itemDiv = input.closest('.order-item');
    
    input.addEventListener('input', function() {
        const query = this.value.trim();
        
        if (searchTimeout) clearTimeout(searchTimeout);
        
        if (query.length < 2) {
            resultsDiv.classList.add('hidden');
            return;
        }
        
        searchTimeout = setTimeout(() => {
            searchProducts(query, resultsDiv, itemDiv);
        }, 300);
    });
    
    input.addEventListener('blur', function() {
        setTimeout(() => resultsDiv.classList.add('hidden'), 200);
    });
    
    input.addEventListener('focus', function() {
        if (this.value.trim().length >= 2) {
            resultsDiv.classList.remove('hidden');
        }
    });
}

function searchProducts(query, resultsDiv, itemDiv) {
    fetch(`/admin/products/search?q=${encodeURIComponent(query)}`, {
        headers: {
            'Accept': 'application/json',
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => response.json())
    .then(products => {
        if (products.length === 0) {
            resultsDiv.innerHTML = '<div class="p-3 text-sm text-slate-500">No products found</div>';
        } else {
            resultsDiv.innerHTML = products.map(product => `
                <div class="product-result p-3 hover:bg-slate-50 dark:hover:bg-slate-700 cursor-pointer border-b border-slate-100 dark:border-slate-700 last:border-0"
                    data-id="${product.id}"
                    data-name="${product.name}"
                    data-price="${product.new_price}"
                    data-stock="${product.stock}">
                    <div class="flex justify-between items-center">
                        <div>
                            <p class="text-sm font-medium text-slate-800 dark:text-white">${product.name}</p>
                            <p class="text-xs text-slate-500">SKU: ${product.sku || 'N/A'} | Stock: ${product.stock}</p>
                        </div>
                        <span class="text-sm font-semibold text-indigo-600 dark:text-indigo-400">৳${product.new_price}</span>
                    </div>
                </div>
            `).join('');
            
            resultsDiv.querySelectorAll('.product-result').forEach(result => {
                result.addEventListener('click', function() {
                    selectProduct(this, itemDiv);
                });
            });
        }
        resultsDiv.classList.remove('hidden');
    })
    .catch(error => {
        console.error('Search error:', error);
        resultsDiv.innerHTML = '<div class="p-3 text-sm text-red-500">Error searching products</div>';
        resultsDiv.classList.remove('hidden');
    });
}

function selectProduct(resultEl, itemDiv) {
    const id = resultEl.dataset.id;
    const name = resultEl.dataset.name;
    const price = resultEl.dataset.price;
    const stock = resultEl.dataset.stock;
    
    itemDiv.querySelector('.product-name-input').value = name;
    itemDiv.querySelector('.product-id-input').value = id;
    
    const searchInput = itemDiv.querySelector('.product-search');
    searchInput.value = name;
    
    itemDiv.querySelector('.price-input').value = price;
    
    const selectedDiv = itemDiv.querySelector('.selected-product');
    selectedDiv.querySelector('.selected-product-name').textContent = name;
    selectedDiv.querySelector('.selected-product-stock').textContent = stock;
    selectedDiv.classList.remove('hidden');
    
    itemDiv.querySelector('.product-search-results').classList.add('hidden');
    
    calculateTotals();
}

document.addEventListener('DOMContentLoaded', function() {
    calculateTotals();
    document.querySelectorAll('.product-search').forEach(input => {
        initProductSearch(input);
    });
});
</script>
@endpush
@endsection