@extends('layouts.app')

@section('title', 'Pesan Menu - Hotel Management System')
@section('page-title', 'Pesan Menu - Meja ' . $table->table_number)

@section('page-actions')
<div class="btn-toolbar mb-2 mb-md-0">
    <a href="{{ route('public-restaurant.table-orders', $table) }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-2"></i>Kembali ke Pesanan Meja
    </a>
</div>
@endsection

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-utensils me-2"></i>Pesan Menu & Minuman
                </h6>
                <small class="text-muted">Meja: {{ $table->table_number }} - Kapasitas: {{ $table->capacity }} orang</small>
            </div>
            <div class="card-body">
                <!-- Search Section -->
                <div class="row mb-4">
                    <div class="col-md-8">
                        <div class="search-container">
                            <div class="input-group">
                                <span class="input-group-text">
                                    <i class="fas fa-search"></i>
                                </span>
                                <input type="text" 
                                       class="form-control form-control-lg" 
                                       id="menuSearch" 
                                       placeholder="Cari menu atau minuman... (contoh: nasi goreng, coca cola, snack)"
                                       autocomplete="off">
                                <button class="btn btn-outline-secondary" type="button" id="clearSearch">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <div class="search-suggestions mt-2">
                                <small class="text-muted">
                                    <i class="fas fa-lightbulb me-1"></i>
                                    Tips: Ketik nama menu, kategori, atau deskripsi untuk mencari
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="filter-buttons">
                            <div class="btn-group w-100" role="group">
                                <input type="radio" class="btn-check" name="searchType" id="searchAll" value="all" checked>
                                <label class="btn btn-outline-primary" for="searchAll">Semua</label>
                                
                                <input type="radio" class="btn-check" name="searchType" id="searchMenu" value="menu">
                                <label class="btn btn-outline-primary" for="searchMenu">Menu</label>
                                
                                <input type="radio" class="btn-check" name="searchType" id="searchStock" value="stock">
                                <label class="btn btn-outline-primary" for="searchStock">Stok</label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Search Results -->
                <div id="searchResults" class="search-results" style="display: none;">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h6 class="mb-0">
                            <i class="fas fa-list me-2"></i>Hasil Pencarian
                        </h6>
                        <span class="badge bg-primary" id="resultCount">0 hasil</span>
                    </div>
                    <div id="searchResultsList" class="row">
                        <!-- Results will be populated here -->
                    </div>
                </div>

                <!-- Quick Categories -->
                <div class="quick-categories mb-4">
                    <h6 class="mb-3">
                        <i class="fas fa-tags me-2"></i>Kategori Cepat
                    </h6>
                    <div class="d-flex flex-wrap gap-2">
                        <button class="btn btn-outline-secondary btn-sm category-filter" data-category="Food">
                            <i class="fas fa-utensils me-1"></i>Makanan
                        </button>
                        <button class="btn btn-outline-secondary btn-sm category-filter" data-category="Beverage">
                            <i class="fas fa-coffee me-1"></i>Minuman
                        </button>
                        <button class="btn btn-outline-secondary btn-sm category-filter" data-category="snack">
                            <i class="fas fa-cookie-bite me-1"></i>Snack
                        </button>
                        <button class="btn btn-outline-secondary btn-sm category-filter" data-category="beverage">
                            <i class="fas fa-wine-bottle me-1"></i>Beverage
                        </button>
                        <button class="btn btn-outline-secondary btn-sm category-filter" data-category="Dessert">
                            <i class="fas fa-ice-cream me-1"></i>Dessert
                        </button>
                    </div>
                </div>

                <!-- Current Order Summary -->
                <div id="orderSummary" class="order-summary" style="display: none;">
                    <div class="card border-primary">
                        <div class="card-header bg-primary text-white">
                            <h6 class="mb-0">
                                <i class="fas fa-shopping-cart me-2"></i>Pesanan Meja {{ $table->table_number }}
                            </h6>
                        </div>
                        <div class="card-body">
                            <div id="orderItems">
                                <!-- Order items will be populated here -->
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between align-items-center">
                                <h6 class="mb-0">Total:</h6>
                                <h5 class="mb-0 text-primary" id="orderTotal">Rp 0</h5>
                            </div>
                        </div>
                        <div class="card-footer">
                            <form id="orderForm" action="{{ route('public-restaurant.add-multiple-orders', $table) }}" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="mb-3">
                                            <label for="orderNotes" class="form-label">Catatan Khusus</label>
                                            <textarea class="form-control" id="orderNotes" name="notes" rows="2" 
                                                      placeholder="Contoh: Tidak pedas, extra sambal, dll"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="d-flex justify-content-end align-items-end h-100">
                                            <button type="submit" class="btn btn-success btn-lg" id="submitOrder" disabled>
                                                <i class="fas fa-check me-2"></i>Konfirmasi Pesanan
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <!-- Empty State -->
                <div id="emptyState" class="text-center py-5">
                    <i class="fas fa-search fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">Cari menu yang ingin dipesan</h5>
                    <p class="text-muted">Gunakan kotak pencarian di atas untuk mencari menu atau minuman</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Item Detail Modal -->
<div class="modal fade" id="itemDetailModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalItemName">Detail Item</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-8">
                        <h6 id="modalItemDescription">Deskripsi item</h6>
                        <p class="text-muted" id="modalItemCategory">Kategori</p>
                        <div class="mb-3">
                            <label for="modalQuantity" class="form-label">Jumlah</label>
                            <div class="input-group">
                                <button class="btn btn-outline-secondary" type="button" id="decreaseQuantity">
                                    <i class="fas fa-minus"></i>
                                </button>
                                <input type="number" class="form-control text-center" id="modalQuantity" value="1" min="1" max="10">
                                <button class="btn btn-outline-secondary" type="button" id="increaseQuantity">
                                    <i class="fas fa-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="text-center">
                            <h4 class="text-primary" id="modalItemPrice">Rp 0</h4>
                            <p class="text-muted mb-3" id="modalItemAvailability">Tersedia</p>
                            <button class="btn btn-primary btn-lg w-100" id="addToOrder">
                                <i class="fas fa-plus me-2"></i>Tambah ke Pesanan
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<style>
.search-container {
    position: relative;
}

.search-results {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

.search-item {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.search-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-color: #007bff;
}

.order-summary {
    position: sticky;
    top: 20px;
}

.order-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
}

.category-filter.active {
    background-color: #007bff !important;
    color: white !important;
}

.loading {
    opacity: 0.6;
    pointer-events: none;
}

.search-loading {
    text-align: center;
    padding: 20px;
}

.search-loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.no-results {
    text-align: center;
    padding: 40px;
    color: #6c757d;
}

.no-results i {
    font-size: 3rem;
    margin-bottom: 15px;
}
</style>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('menuSearch');
    const searchResults = document.getElementById('searchResults');
    const searchResultsList = document.getElementById('searchResultsList');
    const resultCount = document.getElementById('resultCount');
    const emptyState = document.getElementById('emptyState');
    const orderSummary = document.getElementById('orderSummary');
    const orderItems = document.getElementById('orderItems');
    const orderTotal = document.getElementById('orderTotal');
    const submitOrder = document.getElementById('submitOrder');
    const clearSearch = document.getElementById('clearSearch');
    const categoryFilters = document.querySelectorAll('.category-filter');
    
    let currentOrder = [];
    let searchTimeout;
    let currentSearchType = 'all';

    // Search functionality
    searchInput.addEventListener('input', function() {
        const query = this.value.trim();
        
        clearTimeout(searchTimeout);
        
        if (query.length < 2) {
            hideSearchResults();
            return;
        }
        
        searchTimeout = setTimeout(() => {
            performSearch(query);
        }, 300);
    });

    // Clear search
    clearSearch.addEventListener('click', function() {
        searchInput.value = '';
        hideSearchResults();
        searchInput.focus();
    });

    // Search type change
    document.querySelectorAll('input[name="searchType"]').forEach(radio => {
        radio.addEventListener('change', function() {
            currentSearchType = this.value;
            if (searchInput.value.trim().length >= 2) {
                performSearch(searchInput.value.trim());
            }
        });
    });

    // Category filters
    categoryFilters.forEach(button => {
        button.addEventListener('click', function() {
            // Remove active class from all buttons
            categoryFilters.forEach(btn => btn.classList.remove('active'));
            // Add active class to clicked button
            this.classList.add('active');
            
            const category = this.dataset.category;
            searchInput.value = category;
            performSearch(category);
        });
    });

    function performSearch(query) {
        showSearchLoading();
        
        fetch(`{{ route('api.public-restaurant.search-menu') }}?q=${encodeURIComponent(query)}&type=${currentSearchType}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displaySearchResults(data.data);
                } else {
                    showNoResults();
                }
            })
            .catch(error => {
                console.error('Search error:', error);
                showNoResults();
            });
    }

    function showSearchLoading() {
        searchResults.style.display = 'block';
        emptyState.style.display = 'none';
        searchResultsList.innerHTML = `
            <div class="col-12">
                <div class="search-loading">
                    <i class="fas fa-spinner"></i>
                    <p class="mt-2">Mencari menu...</p>
                </div>
            </div>
        `;
    }

    function displaySearchResults(results) {
        searchResults.style.display = 'block';
        emptyState.style.display = 'none';
        
        if (results.length === 0) {
            showNoResults();
            return;
        }
        
        resultCount.textContent = `${results.length} hasil`;
        
        searchResultsList.innerHTML = results.map(item => `
            <div class="col-md-6 col-lg-4 mb-3">
                <div class="card search-item h-100" onclick="showItemDetail(${item.id}, '${item.type}')">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start mb-2">
                            <h6 class="card-title mb-0">${item.name}</h6>
                            <span class="badge bg-${item.type === 'menu' ? 'primary' : 'success'}">${item.type === 'menu' ? 'Menu' : 'Stok'}</span>
                        </div>
                        <p class="card-text text-muted small">${item.description || '-'}</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="h6 text-primary mb-0">${item.formatted_price}</span>
                            <span class="badge bg-${item.availability_class}">${item.availability}</span>
                        </div>
                        ${item.stock_info ? `<small class="text-muted d-block mt-1">${item.stock_info}</small>` : ''}
                    </div>
                </div>
            </div>
        `).join('');
    }

    function showNoResults() {
        searchResults.style.display = 'block';
        emptyState.style.display = 'none';
        searchResultsList.innerHTML = `
            <div class="col-12">
                <div class="no-results">
                    <i class="fas fa-search"></i>
                    <h5>Tidak ada hasil ditemukan</h5>
                    <p>Coba kata kunci yang berbeda atau periksa ejaan</p>
                </div>
            </div>
        `;
    }

    function hideSearchResults() {
        searchResults.style.display = 'none';
        emptyState.style.display = 'block';
    }

    // Item detail modal
    window.showItemDetail = function(itemId, itemType) {
        // Find the item from search results
        const searchItems = document.querySelectorAll('.search-item');
        let itemData = null;
        
        // This is a simplified approach - in a real app, you'd store the data properly
        fetch(`{{ route('api.public-restaurant.search-menu') }}?q=&type=${itemType}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    itemData = data.data.find(item => item.id == itemId);
                    if (itemData) {
                        showItemModal(itemData);
                    }
                }
            });
    };

    function showItemModal(item) {
        document.getElementById('modalItemName').textContent = item.name;
        document.getElementById('modalItemDescription').textContent = item.description || 'Tidak ada deskripsi';
        document.getElementById('modalItemCategory').textContent = `Kategori: ${item.category}`;
        document.getElementById('modalItemPrice').textContent = item.formatted_price;
        document.getElementById('modalItemAvailability').textContent = item.availability;
        document.getElementById('modalQuantity').value = 1;
        
        // Store current item data
        window.currentItem = item;
        
        // Show modal
        new bootstrap.Modal(document.getElementById('itemDetailModal')).show();
    }

    // Quantity controls
    document.getElementById('decreaseQuantity').addEventListener('click', function() {
        const quantityInput = document.getElementById('modalQuantity');
        if (quantityInput.value > 1) {
            quantityInput.value = parseInt(quantityInput.value) - 1;
        }
    });

    document.getElementById('increaseQuantity').addEventListener('click', function() {
        const quantityInput = document.getElementById('modalQuantity');
        if (quantityInput.value < 10) {
            quantityInput.value = parseInt(quantityInput.value) + 1;
        }
    });

    // Add to order
    document.getElementById('addToOrder').addEventListener('click', function() {
        const item = window.currentItem;
        const quantity = parseInt(document.getElementById('modalQuantity').value);
        
        if (item) {
            addToOrder(item, quantity);
            bootstrap.Modal.getInstance(document.getElementById('itemDetailModal')).hide();
        }
    });

    function addToOrder(item, quantity) {
        // Check if item already exists in order
        const existingIndex = currentOrder.findIndex(orderItem => 
            orderItem.id === item.id && orderItem.type === item.type
        );
        
        if (existingIndex !== -1) {
            // Update quantity
            currentOrder[existingIndex].quantity += quantity;
        } else {
            // Add new item
            currentOrder.push({
                ...item,
                quantity: quantity
            });
        }
        
        updateOrderSummary();
    }

    function updateOrderSummary() {
        if (currentOrder.length === 0) {
            orderSummary.style.display = 'none';
            emptyState.style.display = 'block';
            submitOrder.disabled = true;
            return;
        }
        
        orderSummary.style.display = 'block';
        emptyState.style.display = 'none';
        submitOrder.disabled = false;
        
        let total = 0;
        orderItems.innerHTML = currentOrder.map(item => {
            const itemTotal = item.price * item.quantity;
            total += itemTotal;
            
            return `
                <div class="order-item">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-1">${item.name}</h6>
                            <small class="text-muted">${item.formatted_price} × ${item.quantity}</small>
                        </div>
                        <div class="d-flex align-items-center">
                            <span class="me-3">Rp ${itemTotal.toLocaleString('id-ID')}</span>
                            <button class="btn btn-sm btn-outline-danger" onclick="removeFromOrder('${item.id}', '${item.type}')">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
        }).join('');
        
        orderTotal.textContent = `Rp ${total.toLocaleString('id-ID')}`;
    }

    window.removeFromOrder = function(itemId, itemType) {
        currentOrder = currentOrder.filter(item => !(item.id == itemId && item.type === itemType));
        updateOrderSummary();
    };

    // Form submission
    document.getElementById('orderForm').addEventListener('submit', function(e) {
        if (currentOrder.length === 0) {
            e.preventDefault();
            alert('Tidak ada item dalam pesanan');
            return;
        }
        
        // Add hidden inputs for each order item
        currentOrder.forEach((item, index) => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = `items[${index}][id]`;
            input.value = item.id;
            this.appendChild(input);
            
            const typeInput = document.createElement('input');
            typeInput.type = 'hidden';
            typeInput.name = `items[${index}][type]`;
            typeInput.value = item.type;
            this.appendChild(typeInput);
            
            const quantityInput = document.createElement('input');
            quantityInput.type = 'hidden';
            quantityInput.name = `items[${index}][quantity]`;
            quantityInput.value = item.quantity;
            this.appendChild(quantityInput);
        });
    });
});
</script>
@endsection