@extends('layouts.app')

@section('title', 'Restaurant - Hotel Management System')
@section('page-title', 'Restaurant')

@section('page-actions')
<div class="btn-toolbar mb-2 mb-md-0">
    <a href="{{ route('public-restaurant.cashier') }}" class="btn btn-primary">
        <i class="fas fa-cash-register me-2"></i>Kasir
    </a>
    <a href="{{ route('restaurant-tables.index') }}" class="btn btn-info ms-2">
        <i class="fas fa-table me-2"></i>Kelola Meja
    </a>
</div>
@endsection

@section('content')
<div class="row">
    <!-- Restaurant Tables -->
    <div class="col-lg-8">
        <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-table me-2"></i>Meja Restoran
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    @foreach($tables as $table)
                    <div class="col-md-4 col-lg-3 mb-3">
                        <div class="card h-100 table-card" data-table-id="{{ $table->id }}">
                            <div class="card-body text-center">
                                <h5 class="card-title">{{ $table->table_number }}</h5>
                                <p class="card-text">
                                    <i class="fas fa-users me-1"></i>{{ $table->capacity }} orang
                                </p>
                                @switch($table->status)
                                    @case('available')
                                        <span class="badge bg-success">Tersedia</span>
                                        @break
                                    @case('occupied')
                                        <span class="badge bg-warning">Sedang Digunakan</span>
                                        @break
                                    @case('reserved')
                                        <span class="badge bg-primary">Dipesan</span>
                                        @break
                                    @case('maintenance')
                                        <span class="badge bg-danger">Maintenance</span>
                                        @break
                                @endswitch
                                <div class="mt-3">
                                    @if($table->status === 'maintenance')
                                        <button class="btn btn-secondary btn-sm w-100" disabled>
                                            <i class="fas fa-tools me-1"></i>Maintenance
                                        </button>
                                    @else
                                        <button class="btn btn-primary btn-sm w-100" 
                                                onclick="selectTable({{ $table->id }}, '{{ $table->table_number }}')">
                                            <i class="fas fa-utensils me-1"></i>
                                            {{ $table->status === 'occupied' ? 'Tambah Pesanan' : 'Pesan' }}
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <!-- Menu Section -->
    <div class="col-lg-4">
        <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>Menu Restoran
                </h6>
            </div>
            <div class="card-body">
                <div id="menu-section" style="display: none;">
                    <div class="mb-3">
                        <h6>Meja: <span id="selected-table-number" class="text-primary"></span></h6>
                        <div class="d-grid gap-2">
                            <a href="#" id="search-order-link" class="btn btn-primary btn-sm">
                                <i class="fas fa-search me-2"></i>Pesan dengan Pencarian
                            </a>
                        </div>
                    </div>
                    
                    @if($menus->count() > 0 || $stockItems->count() > 0)
                        <!-- Restaurant Menus -->
                        @foreach($menus as $category => $categoryMenus)
                        <div class="mb-4">
                            <h6 class="text-primary">{{ ucfirst($category) }}</h6>
                            @foreach($categoryMenus as $menu)
                            <div class="d-flex justify-content-between align-items-center mb-2 p-2 border rounded">
                                <div>
                                    <strong>{{ $menu->name }}</strong><br>
                                    <small class="text-muted">{{ $menu->description }}</small>
                                </div>
                                <div class="text-end">
                                    <div class="h6 text-primary mb-1">Rp {{ number_format($menu->price, 0, ',', '.') }}</div>
                                    <button class="btn btn-sm btn-outline-primary" 
                                            onclick="addToOrder({{ $menu->id }}, '{{ $menu->name }}', {{ $menu->price }})">
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endforeach

                        <!-- Stock Items -->
                        @foreach($stockItems as $category => $categoryStockItems)
                        <div class="mb-4">
                            <h6 class="text-success">{{ ucfirst($category) }} (Stok)</h6>
                            @foreach($categoryStockItems as $stockItem)
                            <div class="d-flex justify-content-between align-items-center mb-2 p-2 border rounded">
                                <div>
                                    <strong>{{ $stockItem->name }}</strong><br>
                                    <small class="text-muted">{{ $stockItem->description }}</small>
                                    <br><small class="text-info">Stok: {{ $stockItem->current_stock }} {{ $stockItem->unit }}</small>
                                </div>
                                <div class="text-end">
                                    <div class="h6 text-success mb-1">Rp {{ number_format($stockItem->selling_price, 0, ',', '.') }}</div>
                                    @if($stockItem->current_stock > 0)
                                        <button class="btn btn-sm btn-outline-success" 
                                                onclick="addStockToOrder({{ $stockItem->id }}, '{{ $stockItem->name }}', {{ $stockItem->selling_price }}, {{ $stockItem->current_stock }})">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    @else
                                        <span class="badge bg-danger">Habis</span>
                                    @endif
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endforeach
                    @else
                        <p class="text-muted">Belum ada menu tersedia</p>
                    @endif
                </div>
                <div id="no-table-selected" class="text-center text-muted">
                    <i class="fas fa-table fa-3x mb-3"></i>
                    <p>Pilih meja terlebih dahulu untuk melihat menu</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Order Modal -->
<div class="modal fade" id="orderModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Pesanan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="orderForm">
                @csrf
                <div class="modal-body">
                    <input type="hidden" id="selected-table-id" name="table_id">
                    <input type="hidden" id="selected-menu-id" name="restaurant_menu_id">
                    <input type="hidden" id="selected-stock-item-id" name="stock_item_id">
                    
                    <div class="mb-3">
                        <label class="form-label">Menu</label>
                        <input type="text" class="form-control" id="selected-menu-name" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Harga</label>
                        <input type="text" class="form-control" id="selected-menu-price" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label for="quantity" class="form-label">Jumlah</label>
                        <input type="number" class="form-control" id="quantity" name="quantity" value="1" min="1" required>
                        <input type="hidden" id="max-quantity" value="">
                    </div>
                    
                    <div class="mb-3">
                        <label for="notes" class="form-label">Catatan</label>
                        <textarea class="form-control" id="notes" name="notes" rows="3" placeholder="Contoh: Tidak pedas, extra sambal, dll"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Tambah Pesanan</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    let selectedTableId = null;
    let selectedTableNumber = null;


    function selectTable(tableId, tableNumber) {
        selectedTableId = tableId;
        selectedTableNumber = tableNumber;
        
        document.getElementById('selected-table-number').textContent = tableNumber;
        document.getElementById('menu-section').style.display = 'block';
        document.getElementById('no-table-selected').style.display = 'none';
        
        // Update search order link
        const searchOrderLink = document.getElementById('search-order-link');
        searchOrderLink.href = `/public-restaurant/tables/${tableId}/order-form`;
        
        // Update table cards
        document.querySelectorAll('.table-card').forEach(card => {
            card.classList.remove('border-primary');
        });
        document.querySelector(`[data-table-id="${tableId}"]`).classList.add('border-primary');
    }

    function addToOrder(menuId, menuName, menuPrice) {
        if (!selectedTableId) {
            alert('Pilih meja terlebih dahulu!');
            return;
        }

        document.getElementById('selected-table-id').value = selectedTableId;
        document.getElementById('selected-menu-id').value = menuId;
        document.getElementById('selected-stock-item-id').value = '';
        document.getElementById('selected-menu-name').value = menuName;
        document.getElementById('selected-menu-price').value = 'Rp ' + menuPrice.toLocaleString('id-ID');
        document.getElementById('quantity').max = '';
        document.getElementById('max-quantity').value = '';
        
        const modal = new bootstrap.Modal(document.getElementById('orderModal'));
        modal.show();
    }

    function addStockToOrder(stockItemId, stockItemName, stockItemPrice, currentStock) {
        if (!selectedTableId) {
            alert('Pilih meja terlebih dahulu!');
            return;
        }

        document.getElementById('selected-table-id').value = selectedTableId;
        document.getElementById('selected-menu-id').value = '';
        document.getElementById('selected-stock-item-id').value = stockItemId;
        document.getElementById('selected-menu-name').value = stockItemName;
        document.getElementById('selected-menu-price').value = 'Rp ' + stockItemPrice.toLocaleString('id-ID');
        document.getElementById('quantity').max = currentStock;
        document.getElementById('max-quantity').value = currentStock;
        
        const modal = new bootstrap.Modal(document.getElementById('orderModal'));
        modal.show();
    }

    document.getElementById('orderForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const tableId = formData.get('table_id');
        
        // Show loading state
        const submitBtn = this.querySelector('button[type="submit"]');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Memproses...';
        submitBtn.disabled = true;
        
        const url = `/public-restaurant/tables/${tableId}/orders`;
        
        fetch(url, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }
        })
        .then(response => {
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                // Close modal
                const modal = bootstrap.Modal.getInstance(document.getElementById('orderModal'));
                modal.hide();
                
                // Show success message
                alert('Pesanan berhasil ditambahkan!');
                
                // Reload page
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat menambah pesanan: ' + error.message);
        })
        .finally(() => {
            // Reset button state
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        });
    });
</script>
@endsection