@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>تعديل الطلب #{{ $order->id }}</h1>
        <div>
            <a href="{{ route('orders.show', $order) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-right"></i> العودة للطلب
            </a>
        </div>
    </div>
    
    <form action="{{ route('orders.update', $order) }}" method="POST" id="orderForm">
        @csrf
        @method('PUT')
        
        <div class="row">
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title">المنتجات</h5>
                    </div>
                    <div class="card-body">
                        <!-- Category Tabs -->
                        <ul class="nav nav-tabs mb-3" id="categoryTabs" role="tablist">
                            @foreach($products->groupBy('category.name') as $category => $categoryProducts)
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link {{ $loop->first ? 'active' : '' }}" id="category-{{ Str::slug($category) }}-tab" data-bs-toggle="tab" data-bs-target="#category-{{ Str::slug($category) }}" type="button" role="tab" aria-controls="category-{{ Str::slug($category) }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}">
                                        {{ $category }}
                                    </button>
                                </li>
                            @endforeach
                        </ul>
                        
                        <!-- Category Content -->
                        <div class="tab-content" id="categoryTabsContent">
                            @foreach($products->groupBy('category.name') as $category => $categoryProducts)
                                <div class="tab-pane fade {{ $loop->first ? 'show active' : '' }}" id="category-{{ Str::slug($category) }}" role="tabpanel" aria-labelledby="category-{{ Str::slug($category) }}-tab">
                                    <div class="row">
                                        @foreach($categoryProducts as $product)
                                            <div class="col-md-4 mb-3">
                                                <div class="card product-card h-100">
                                                    @if($product->image)
                                                        <img src="{{ Storage::disk('public')->url($product->image) }}" class="card-img-top" alt="{{ $product->name }}" style="height: 150px; object-fit: cover;">
                                                    @else
                                                        <div class="card-img-top bg-light d-flex justify-content-center align-items-center" style="height: 150px;">
                                                            <i class="fas fa-coffee fa-3x text-muted"></i>
                                                        </div>
                                                    @endif
                                                    <div class="card-body">
                                                        <h5 class="card-title">{{ $product->name }}</h5>
                                                        <p class="card-text text-primary fw-bold">{{ number_format($product->price, 2) }}</p>
                                                        <button type="button" class="btn btn-sm btn-outline-primary add-product" data-id="{{ $product->id }}" data-name="{{ $product->name }}" data-price="{{ $product->price }}">
                                                            <i class="fas fa-plus"></i> إضافة
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-4">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title">تفاصيل الطلب</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="table_id" class="form-label">الطاولة <span class="text-danger">*</span></label>
                            <select class="form-select @error('table_id') is-invalid @enderror" id="table_id" name="table_id" required>
                                <option value="">اختر الطاولة</option>
                                @foreach($tables as $table)
                                    <option value="{{ $table->id }}" {{ $order->table_id == $table->id ? 'selected' : '' }}>
                                        {{ $table->name }} ({{ $table->status == 'available' ? 'متاح' : 'مشغول' }})
                                    </option>
                                @endforeach
                            </select>
                            @error('table_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <label for="customer_name" class="form-label">اسم العميل</label>
                            <input type="text" class="form-control @error('customer_name') is-invalid @enderror" id="customer_name" name="customer_name" value="{{ old('customer_name', $order->customer_name) }}">
                            @error('customer_name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        
                        <div class="mb-3">
                            <label for="notes" class="form-label">ملاحظات</label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" id="notes" name="notes" rows="2">{{ old('notes', $order->notes) }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
                
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title">المنتجات المختارة</h5>
                    </div>
                    <div class="card-body">
                        <div id="selected-products">
                            @foreach($order->items as $item)
                                <div class="card mb-2 selected-product" data-id="{{ $item->product_id }}" data-price="{{ $item->unit_price }}">
                                    <div class="card-body p-3">
                                        <input type="hidden" name="products[{{ $loop->index }}][id]" value="{{ $item->product_id }}">
                                        <div class="d-flex justify-content-between align-items-center mb-2">
                                            <h6 class="mb-0">{{ $item->product->name }}</h6>
                                            <button type="button" class="btn btn-sm btn-danger remove-product" data-item-id="{{ $item->id }}">
                                                <i class="fas fa-times"></i>
                                            </button>
                                        </div>
                                        <div class="row g-2">
                                            <div class="col-6">
                                                <div class="input-group input-group-sm">
                                                    <button type="button" class="btn btn-outline-secondary decrease-quantity">-</button>
                                                    <input type="number" class="form-control text-center product-quantity" name="products[{{ $loop->index }}][quantity]" value="{{ $item->quantity }}" min="1" required>
                                                    <button type="button" class="btn btn-outline-secondary increase-quantity">+</button>
                                                </div>
                                            </div>
                                            <div class="col-6">
                                                <div class="text-end">
                                                    <span class="product-price">{{ number_format($item->unit_price, 2) }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="mt-2">
                                            <input type="text" class="form-control form-control-sm" name="products[{{ $loop->index }}][notes]" placeholder="ملاحظات (اختياري)" value="{{ $item->notes }}">
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        
                        <template id="product-template">
                            <div class="card mb-2 selected-product">
                                <div class="card-body p-3">
                                    <input type="hidden" name="products[INDEX][id]" value="PRODUCT_ID">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <h6 class="mb-0">PRODUCT_NAME</h6>
                                        <button type="button" class="btn btn-sm btn-danger remove-product">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                    <div class="row g-2">
                                        <div class="col-6">
                                            <div class="input-group input-group-sm">
                                                <button type="button" class="btn btn-outline-secondary decrease-quantity">-</button>
                                                <input type="number" class="form-control text-center product-quantity" name="products[INDEX][quantity]" value="1" min="1" required>
                                                <button type="button" class="btn btn-outline-secondary increase-quantity">+</button>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-end">
                                                <span class="product-price">PRODUCT_PRICE</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        <input type="text" class="form-control form-control-sm" name="products[INDEX][notes]" placeholder="ملاحظات (اختياري)">
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
                
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="card-title">ملخص الطلب</h5>
                    </div>
                    <div class="card-body">
                        <div class="d-flex justify-content-between mb-2">
                            <span>المجموع:</span>
                            <span id="subtotal">{{ number_format($order->total_amount, 2) }}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>الخصم:</span>
                            <div class="input-group input-group-sm" style="width: 120px;">
                                <input type="number" class="form-control text-end" id="discount" name="discount" value="{{ $order->discount }}" min="0" step="0.01">
                            </div>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>الضريبة:</span>
                            <div class="input-group input-group-sm" style="width: 120px;">
                                <input type="number" class="form-control text-end" id="tax" name="tax" value="{{ $order->tax }}" min="0" step="0.01">
                            </div>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between fw-bold">
                            <span>الإجمالي:</span>
                            <span id="total">{{ number_format($order->final_amount, 2) }}</span>
                        </div>
                        
                        <div class="d-grid gap-2 mt-3">
                            <button type="submit" class="btn btn-primary" id="submit-order">
                                <i class="fas fa-save"></i> حفظ التغييرات
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        let productIndex = 0;
        let products = [];
        
        // Initialize products array with existing items
        $('.selected-product').each(function() {
            const productId = $(this).data('id');
            const productPrice = $(this).data('price');
            const quantity = parseInt($(this).find('.product-quantity').val());
            
            products.push({
                id: productId,
                price: productPrice,
                quantity: quantity
            });
        });
        
        // Add product to order
        $('.add-product').click(function() {
            const productId = $(this).data('id');
            const productName = $(this).data('name');
            const productPrice = $(this).data('price');
            
            // Check if product already exists in the order
            const existingProduct = products.find(p => p.id === productId);
            if (existingProduct) {
                // Increase quantity instead of adding new product
                const productElement = $(`.selected-product[data-id="${productId}"]`);
                const quantityInput = productElement.find('.product-quantity');
                quantityInput.val(parseInt(quantityInput.val()) + 1);
                updateProductTotal(productElement);
            } else {
                // Add new product
                const template = $('#product-template').html()
                    .replace(/INDEX/g, productIndex)
                    .replace(/PRODUCT_ID/g, productId)
                    .replace(/PRODUCT_NAME/g, productName)
                    .replace(/PRODUCT_PRICE/g, (parseFloat(productPrice) || 0).toFixed(2));
                
                $('#selected-products').append(template);
                
                const newProduct = $(`.selected-product:last`);
                newProduct.attr('data-id', productId);
                newProduct.attr('data-price', productPrice);
                
                products.push({
                    id: productId,
                    price: productPrice,
                    quantity: 1
                });
                
                productIndex++;
            }
            
            updateOrderTotal();
        });
        
        // Remove product from order
        $(document).on('click', '.remove-product', function() {
            const productElement = $(this).closest('.selected-product');
            const productId = productElement.data('id');
            const itemId = $(this).data('item-id');
            
            if (itemId) {
                // If this is an existing item, mark it for deletion
                productElement.append(`<input type="hidden" name="deleted_items[]" value="${itemId}">`);
                productElement.hide();
            } else {
                // If this is a new item, remove it from DOM
                productElement.remove();
            }
            
            // Remove from products array
            products = products.filter(p => p.id !== productId);
            
            updateOrderTotal();
        });
        
        // Increase quantity
        $(document).on('click', '.increase-quantity', function() {
            const quantityInput = $(this).siblings('.product-quantity');
            quantityInput.val(parseInt(quantityInput.val()) + 1);
            updateProductTotal($(this).closest('.selected-product'));
        });
        
        // Decrease quantity
        $(document).on('click', '.decrease-quantity', function() {
            const quantityInput = $(this).siblings('.product-quantity');
            const currentValue = parseInt(quantityInput.val());
            if (currentValue > 1) {
                quantityInput.val(currentValue - 1);
                updateProductTotal($(this).closest('.selected-product'));
            }
        });
        
        // Update quantity manually
        $(document).on('change', '.product-quantity', function() {
            updateProductTotal($(this).closest('.selected-product'));
        });
        
        // Update discount or tax
        $('#discount, #tax').on('input', function() {
            updateOrderTotal();
        });
        
        // Update product total
        function updateProductTotal(productElement) {
            const productId = productElement.data('id');
            const productPrice = productElement.data('price');
            const quantity = parseInt(productElement.find('.product-quantity').val());
            
            // Update products array
            const product = products.find(p => p.id === productId);
            if (product) {
                product.quantity = quantity;
            }
            
            updateOrderTotal();
        }
        
        // Update order total
        function updateOrderTotal() {
            let subtotal = 0;
            
            // Calculate subtotal
            products.forEach(product => {
                subtotal += product.price * product.quantity;
            });
            
            // Get discount and tax
            const discount = parseFloat($('#discount').val()) || 0;
            const tax = parseFloat($('#tax').val()) || 0;
            
            // Calculate total
            const total = subtotal - discount + tax;
            
            // Update display
            $('#subtotal').text(subtotal.toFixed(2));
            $('#total').text(total.toFixed(2));
        }
        
        // Reindex products to ensure continuous indices
        function reindexProducts() {
            let newIndex = 0;
            $('.selected-product:visible').each(function() {
                const inputs = $(this).find('input');
                inputs.each(function() {
                    const name = $(this).attr('name');
                    if (name && name.includes('products[')) {
                        $(this).attr('name', name.replace(/products\[\d+\]/, `products[${newIndex}]`));
                    }
                });
                newIndex++;
            });
        }
        
        // Form validation
        $('#orderForm').submit(function(event) {
            // Reindex all products before submitting to ensure continuous indices
            reindexProducts();
            
            const visibleProducts = $('.selected-product:visible').length;
            if (visibleProducts === 0) {
                event.preventDefault();
                alert('يرجى إضافة منتج واحد على الأقل إلى الطلب');
            }
        });
    });
</script>
@endpush