@extends('layouts.customer')

@section('content')
<div id="notifications"></div>

@if(isset($unpaidOrders) && $unpaidOrders->count() > 0)
<div class="row mb-4">
    <div class="col-12">
        <div class="card bg-light">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">
                    <i class="fas fa-exclamation-circle me-2"></i>
                    طلبات غير مدفوعة
                </h5>
            </div>
            <div class="card-body">
                <p>لديك {{ $unpaidOrders->count() }} {{ $unpaidOrders->count() > 1 ? 'طلبات' : 'طلب' }} غير مدفوع على هذه الطاولة:</p>
                <div class="list-group">
                    @foreach($unpaidOrders as $order)
                    <a href="{{ route('customer.status', ['tableId' => $table->id, 'orderId' => $order->id]) }}" class="list-group-item list-group-item-action">
                        <div class="d-flex w-100 justify-content-between">
                            <h6 class="mb-1">طلب #{{ $order->id }}</h6>
                            <span class="badge bg-primary">{{ number_format($order->final_amount, 2) }}</span>
                        </div>
                        <p class="mb-1">{{ $order->items->count() }} منتجات</p>
                        <small>{{ $order->created_at->format('Y-m-d H:i') }}</small>
                    </a>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endif

<div class="row mb-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-utensils me-2"></i>
                    طاولة: {{ $table->name }} - سعة: {{ $table->capacity }} أشخاص
                </h5>
            </div>
            
            <!-- Category Navigation -->
            <div class="category-nav bg-light px-3">
                <ul class="nav nav-pills">
                    @foreach($products->keys() as $category)
                    <li class="nav-item">
                        <a class="nav-link {{ $loop->first ? 'active' : '' }}" href="#category-{{ Str::slug($category) }}">
                            {{ $category }}
                        </a>
                    </li>
                    @endforeach
                </ul>
            </div>
            
            <!-- Products List -->
            <div class="card-body">
                @foreach($products as $category => $categoryProducts)
                <div id="category-{{ Str::slug($category) }}" class="mb-5">
                    <h4 class="border-bottom pb-2">{{ $category }}</h4>
                    
                    <div class="row row-cols-1 row-cols-md-2 g-4">
                        @foreach($categoryProducts as $product)
                        <div class="col">
                            <div class="card h-100 product-card" data-product-id="{{ $product->id }}" data-product-name="{{ $product->name }}" data-product-price="{{ $product->price }}">
                                @if($product->image)
                                <img src="{{ Storage::disk('public')->url($product->image) }}" class="card-img-top product-image" alt="{{ $product->name }}">
                                @else
                                <div class="bg-light text-center py-5 product-image">
                                    <i class="fas fa-coffee fa-3x text-muted"></i>
                                </div>
                                @endif
                                
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <h5 class="card-title">{{ $product->name }}</h5>
                                        <span class="badge bg-primary">{{ number_format($product->price, 2) }}</span>
                                    </div>
                                    <p class="card-text small text-muted">{{ $product->description }}</p>
                                </div>
                                
                                <div class="card-footer bg-white border-top-0">
                                    <button class="btn btn-sm btn-outline-primary add-to-cart-btn" data-product-id="{{ $product->id }}">
                                        <i class="fas fa-plus me-1"></i> إضافة للطلب
                                    </button>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card sticky-top" style="top: 20px;">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-shopping-cart me-2"></i>
                    طلبك
                </h5>
            </div>
            
            <div class="card-body">
                <form id="orderForm">
                    <div class="mb-3">
                        <label for="customerName" class="form-label">اسم العميل (اختياري)</label>
                        <input type="text" class="form-control" id="customerName" name="customer_name">
                    </div>
                    
                    <div id="cartItems">
                        @if(isset($currentOrder) && $currentOrder && $currentOrder->items->count() > 0)
                        <div class="alert alert-info">
                            <h6>لديك طلب حالي:</h6>
                            <ul class="list-unstyled">
                                @foreach($currentOrder->items as $item)
                                <li>{{ $item->product->name }} x {{ $item->quantity }}</li>
                                @endforeach
                            </ul>
                            <a href="{{ route('customer.status', ['tableId' => $table->id, 'orderId' => $currentOrder->id]) }}" class="btn btn-sm btn-info">
                                عرض تفاصيل الطلب
                            </a>
                        </div>
                        @endif
                        
                        <div id="emptyCartMessage" class="{{ $currentOrder ? 'd-none' : '' }}">
                            <div class="text-center py-4 text-muted">
                                <i class="fas fa-shopping-basket fa-3x mb-3"></i>
                                <p>سلة الطلبات فارغة</p>
                                <p class="small">اضغط على "إضافة للطلب" لإضافة منتجات</p>
                            </div>
                        </div>
                        
                        <div id="cartItemsList"></div>
                    </div>
                    
                    <div class="border-top pt-3 mt-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span>المجموع:</span>
                            <span id="cartTotal">0.00</span>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary w-100 mt-3" id="submitOrderBtn" disabled>
                        <i class="fas fa-paper-plane me-1"></i>
                        إرسال الطلب
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Product Modal -->
<div class="modal fade" id="productModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="productModalTitle">إضافة منتج</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="addProductForm">
                    <input type="hidden" id="modalProductId">
                    
                    <div class="mb-3">
                        <label for="productQuantity" class="form-label">الكمية</label>
                        <div class="input-group">
                            <button type="button" class="btn btn-outline-secondary" id="decreaseQuantity">-</button>
                            <input type="number" class="form-control text-center" id="productQuantity" value="1" min="1">
                            <button type="button" class="btn btn-outline-secondary" id="increaseQuantity">+</button>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="productNotes" class="form-label">ملاحظات خاصة (اختياري)</label>
                        <textarea class="form-control" id="productNotes" rows="2"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                <button type="button" class="btn btn-primary" id="addToCartBtn">إضافة للطلب</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Initialize variables
        let cart = [];
        let productModal = new bootstrap.Modal(document.getElementById('productModal'));
        const tableId = {{ $table->id }};
        
        // Set table ID for call waiter button
        $('#callWaiterBtn').data('table-id', tableId);
        
        // Smooth scroll to categories
        $('.category-nav .nav-link').on('click', function(e) {
            e.preventDefault();
            
            const target = $(this).attr('href');
            const targetPosition = $(target).offset().top - 100;
            
            $('html, body').animate({
                scrollTop: targetPosition
            }, 300);
            
            // Activate clicked nav link
            $('.category-nav .nav-link').removeClass('active');
            $(this).addClass('active');
        });
        
        // Open product modal when clicking on product card
        $('.product-card').on('click', function() {
            const productId = $(this).data('product-id');
            const productName = $(this).data('product-name');
            
            // Reset modal form
            $('#modalProductId').val(productId);
            $('#productQuantity').val(1);
            $('#productNotes').val('');
            $('#productModalTitle').text(productName);
            
            productModal.show();
        });
        
        // Quantity buttons in modal
        $('#increaseQuantity').on('click', function() {
            let quantity = parseInt($('#productQuantity').val());
            $('#productQuantity').val(quantity + 1);
        });
        
        $('#decreaseQuantity').on('click', function() {
            let quantity = parseInt($('#productQuantity').val());
            if (quantity > 1) {
                $('#productQuantity').val(quantity - 1);
            }
        });
        
        // Add to cart from modal
        $('#addToCartBtn').on('click', function() {
            const productId = $('#modalProductId').val();
            const quantity = parseInt($('#productQuantity').val());
            const notes = $('#productNotes').val();
            
            // Find product card to get product details
            const productCard = $(`.product-card[data-product-id="${productId}"]`);
            const productName = productCard.data('product-name');
            const productPrice = parseFloat(productCard.data('product-price'));
            
            // Add to cart array
            const cartItem = {
                id: productId,
                name: productName,
                price: productPrice,
                quantity: quantity,
                notes: notes,
                total: productPrice * quantity
            };
            
            // Check if product already in cart
            const existingItemIndex = cart.findIndex(item => item.id === productId);
            
            if (existingItemIndex !== -1) {
                // Update existing item
                cart[existingItemIndex].quantity += quantity;
                cart[existingItemIndex].total = cart[existingItemIndex].price * cart[existingItemIndex].quantity;
                cart[existingItemIndex].notes = notes; // Replace notes
            } else {
                // Add new item
                cart.push(cartItem);
            }
            
            // Update cart UI
            updateCartUI();
            
            // Close modal
            productModal.hide();
            
            // Show notification
            showNotification(`تمت إضافة ${productName} للطلب`);
        });
        
        // Update cart UI function
        function updateCartUI() {
            const cartItemsList = $('#cartItemsList');
            cartItemsList.empty();
            
            let total = 0;
            
            if (cart.length > 0) {
                $('#emptyCartMessage').addClass('d-none');
                $('#submitOrderBtn').prop('disabled', false);
                
                cart.forEach((item, index) => {
                    const itemHtml = `
                        <div class="cart-item py-2">
                            <div class="d-flex justify-content-between">
                                <div>
                                    <h6 class="mb-0">${item.name}</h6>
                                    <div class="d-flex align-items-center">
                                        <small class="text-muted me-2">${item.quantity} x ${item.price.toFixed(2)}</small>
                                        <button class="btn btn-sm text-danger remove-item-btn" data-index="${index}">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </div>
                                    ${item.notes ? `<small class="text-muted d-block">ملاحظات: ${item.notes}</small>` : ''}
                                </div>
                                <span>${item.total.toFixed(2)}</span>
                            </div>
                        </div>
                    `;
                    
                    cartItemsList.append(itemHtml);
                    total += item.total;
                });
                
                // Add event listeners to remove buttons
                $('.remove-item-btn').on('click', function() {
                    const index = $(this).data('index');
                    removeCartItem(index);
                });
            } else {
                $('#emptyCartMessage').removeClass('d-none');
                $('#submitOrderBtn').prop('disabled', true);
            }
            
            // Update total
            $('#cartTotal').text(total.toFixed(2));
        }
        
        // Remove item from cart
        function removeCartItem(index) {
            const removedItem = cart[index];
            cart.splice(index, 1);
            updateCartUI();
            showNotification(`تمت إزالة ${removedItem.name} من الطلب`);
        }
        
        // Submit order
        $('#orderForm').on('submit', function(e) {
            e.preventDefault();
            
            if (cart.length === 0) {
                showNotification('لا يمكن إرسال طلب فارغ', 'warning');
                return;
            }
            
            // Disable submit button and show loading
            $('#submitOrderBtn').prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span> جاري الإرسال...');
            
            // Prepare order data
            const orderData = {
                customer_name: $('#customerName').val(),
                products: cart.map(item => ({
                    id: item.id,
                    quantity: item.quantity,
                    notes: item.notes
                }))
            };
            
            // Send order to server
            $.ajax({
                url: `{{ url('/') }}/order/table/${tableId}/submit`,
                type: 'POST',
                data: orderData,
                success: function(response) {
                    // Show success message
                    showNotification('تم إرسال طلبك بنجاح!', 'success');
                    
                    // Clear cart
                    cart = [];
                    updateCartUI();
                    
                    // Redirect to order status page
                    setTimeout(function() {
                        window.location.href = `{{ url('/') }}/order/table/${tableId}/status/${response.order_id}`;
                    }, 1500);
                },
                error: function(xhr) {
                    // Re-enable submit button
                    $('#submitOrderBtn').prop('disabled', false).html('<i class="fas fa-paper-plane me-1"></i> إرسال الطلب');
                    
                    // Show error message
                    let errorMessage = 'حدث خطأ أثناء إرسال الطلب';
                    if (xhr.responseJSON && xhr.responseJSON.error) {
                        errorMessage = xhr.responseJSON.error;
                    }
                    
                    showNotification(errorMessage, 'danger');
                }
            });
        });
    });
</script>
@endsection