@extends('layouts.app')

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

@section('page-actions')
<div class="btn-toolbar mb-2 mb-md-0">
    <a href="{{ route('public-restaurant.cashier') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-2"></i>Kembali ke Kasir
    </a>
    <button class="btn btn-danger ms-2" onclick="cancelAllOrders()">
        <i class="fas fa-times me-2"></i>Batalkan Semua
    </button>
</div>
@endsection

@section('content')
<div class="row">
    <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-utensils me-2"></i>Pesanan Meja {{ $table->table_number }}
                </h6>
                <small class="text-muted">Kapasitas: {{ $table->capacity }} orang</small>
            </div>
            <div class="card-body">
                @if($orders->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>Menu</th>
                                    <th>Qty</th>
                                    <th>Harga Satuan</th>
                                    <th>Total</th>
                                    <th>Status</th>
                                    <th>Waktu Pesan</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($orders as $order)
                                <tr>
                                    <td>
                                        <div>
                                            <strong>{{ $order->restaurantMenu->name }}</strong>
                                            @if($order->notes)
                                                <br><small class="text-muted">{{ $order->notes }}</small>
                                            @endif
                                        </div>
                                    </td>
                                    <td>{{ $order->quantity }}</td>
                                    <td>Rp {{ number_format($order->unit_price, 0, ',', '.') }}</td>
                                    <td>Rp {{ number_format($order->total_price, 0, ',', '.') }}</td>
                                    <td>
                                        @switch($order->status)
                                            @case('pending')
                                                <span class="badge bg-warning">Pending</span>
                                                @break
                                            @case('preparing')
                                                <span class="badge bg-info">Preparing</span>
                                                @break
                                            @case('ready')
                                                <span class="badge bg-success">Ready</span>
                                                @break
                                            @case('served')
                                                <span class="badge bg-secondary">Served</span>
                                                @break
                                            @case('cancelled')
                                                <span class="badge bg-danger">Cancelled</span>
                                                @break
                                        @endswitch
                                    </td>
                                    <td>{{ $order->ordered_at->format('H:i') }}</td>
                                    <td>
                                        @if($order->status !== 'served' && $order->status !== 'cancelled')
                                            <div class="btn-group btn-group-sm">
                                                @if($order->status === 'pending')
                                                    <button class="btn btn-outline-info" 
                                                            onclick="updateOrderStatus({{ $order->id }}, 'preparing')">
                                                        <i class="fas fa-play"></i>
                                                    </button>
                                                @endif
                                                @if($order->status === 'preparing')
                                                    <button class="btn btn-outline-success" 
                                                            onclick="updateOrderStatus({{ $order->id }}, 'ready')">
                                                        <i class="fas fa-check"></i>
                                                    </button>
                                                @endif
                                                @if($order->status === 'ready')
                                                    <button class="btn btn-outline-primary" 
                                                            onclick="updateOrderStatus({{ $order->id }}, 'served')">
                                                        <i class="fas fa-hand-holding"></i>
                                                    </button>
                                                @endif
                                                <button class="btn btn-outline-danger" 
                                                        onclick="updateOrderStatus({{ $order->id }}, 'cancelled')">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-utensils fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Belum ada pesanan</h5>
                        <p class="text-muted">Meja ini belum memiliki pesanan</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <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-calculator me-2"></i>Ringkasan Pembayaran
                </h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>Subtotal:</strong>
                    <span class="float-end">Rp {{ number_format($totalAmount, 0, ',', '.') }}</span>
                </div>
                <div class="mb-3">
                    <label for="tax-input" class="form-label">Pajak (Rp)</label>
                    <input type="number" class="form-control" id="tax-input" value="0" min="0" step="100">
                </div>
                <div class="mb-3">
                    <label for="service-input" class="form-label">Service Charge (Rp)</label>
                    <input type="number" class="form-control" id="service-input" value="0" min="0" step="100">
                </div>
                <hr>
                <div class="mb-3">
                    <strong>Total:</strong>
                    <span class="float-end h5 text-primary" id="total-display">Rp {{ number_format($totalAmount, 0, ',', '.') }}</span>
                </div>
                
                @if($orders->count() > 0)
                    <button class="btn btn-success w-100" 
                            onclick="processPayment({{ $table->id }}, '{{ $table->table_number }}', {{ $totalAmount }})">
                        <i class="fas fa-credit-card me-2"></i>Proses Pembayaran
                    </button>
                @endif
            </div>
        </div>

        <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-plus me-2"></i>Tambah Pesanan
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <a href="{{ route('public-restaurant.order-form', $table) }}" class="btn btn-primary">
                        <i class="fas fa-search me-2"></i>Pesan dengan Pencarian
                    </a>
                    <a href="{{ route('public-restaurant.index') }}" class="btn btn-outline-primary">
                        <i class="fas fa-list me-2"></i>Lihat Menu Lengkap
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Payment Modal -->
<div class="modal fade" id="paymentModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Proses Pembayaran</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="paymentForm">
                @csrf
                <div class="modal-body">
                    <input type="hidden" id="payment-table-id" name="table_id">
                    <input type="hidden" id="payment-tax-amount" name="tax_amount">
                    <input type="hidden" id="payment-service-amount" name="service_charge">
                    
                    <div class="mb-3">
                        <label class="form-label">Meja</label>
                        <input type="text" class="form-control" id="payment-table-number" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Subtotal</label>
                        <input type="text" class="form-control" id="payment-subtotal" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Pajak (Rp)</label>
                        <input type="text" class="form-control" id="payment-tax" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Service Charge (Rp)</label>
                        <input type="text" class="form-control" id="payment-service" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Total</label>
                        <input type="text" class="form-control" id="payment-total" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label for="payment_method" class="form-label">Metode Pembayaran</label>
                        <select class="form-select" id="payment_method" name="payment_method" required>
                            <option value="">Pilih Metode</option>
                            <option value="cash">Tunai</option>
                            <option value="credit_card">Kartu Kredit</option>
                            <option value="debit_card">Kartu Debit</option>
                            <option value="bank_transfer">Transfer Bank</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="paid_amount" class="form-label">Jumlah Bayar</label>
                        <div class="input-group">
                            <span class="input-group-text">Rp</span>
                            <input type="number" class="form-control" id="paid_amount" name="paid_amount" 
                                   step="1000" required>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Kembalian</label>
                        <input type="text" class="form-control" id="payment-change" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label for="notes" class="form-label">Catatan</label>
                        <textarea class="form-control" id="notes" name="notes" rows="2"></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-success">
                        <i class="fas fa-credit-card me-2"></i>Proses Pembayaran
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function processPayment(tableId, tableNumber, subtotal) {
        const tax = parseFloat(document.getElementById('tax-input').value) || 0;
        const service = parseFloat(document.getElementById('service-input').value) || 0;
        const total = subtotal + tax + service;
        
        document.getElementById('payment-table-id').value = tableId;
        document.getElementById('payment-table-number').value = tableNumber;
        document.getElementById('payment-subtotal').value = 'Rp ' + subtotal.toLocaleString('id-ID');
        document.getElementById('payment-tax').value = 'Rp ' + tax.toLocaleString('id-ID');
        document.getElementById('payment-service').value = 'Rp ' + service.toLocaleString('id-ID');
        document.getElementById('payment-total').value = 'Rp ' + total.toLocaleString('id-ID');
        document.getElementById('payment-tax-amount').value = tax;
        document.getElementById('payment-service-amount').value = service;
        document.getElementById('paid_amount').value = total;
        
        const modal = new bootstrap.Modal(document.getElementById('paymentModal'));
        modal.show();
    }

    // Update total when tax or service charge changes
    function updateTotal() {
        const subtotal = {{ $totalAmount }};
        const tax = parseFloat(document.getElementById('tax-input').value) || 0;
        const service = parseFloat(document.getElementById('service-input').value) || 0;
        const total = subtotal + tax + service;
        
        document.getElementById('total-display').textContent = 'Rp ' + total.toLocaleString('id-ID');
    }

    document.getElementById('tax-input').addEventListener('input', updateTotal);
    document.getElementById('service-input').addEventListener('input', updateTotal);

    function updateOrderStatus(orderId, status) {
        fetch(`/public-restaurant/orders/${orderId}/status`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ status: status })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                location.reload();
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat memperbarui status');
        });
    }

    function cancelAllOrders() {
        if (confirm('Apakah Anda yakin ingin membatalkan semua pesanan?')) {
            fetch(`/public-restaurant/tables/{{ $table->id }}/cancel`, {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Error: ' + data.message);
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Terjadi kesalahan saat membatalkan pesanan');
            });
        }
    }

    // Calculate change
    document.getElementById('paid_amount').addEventListener('input', function() {
        const total = parseFloat(document.getElementById('payment-total').value.replace(/[^\d]/g, ''));
        const paid = parseFloat(this.value) || 0;
        const change = paid - total;
        
        document.getElementById('payment-change').value = 'Rp ' + change.toLocaleString('id-ID');
        
        if (change < 0) {
            document.getElementById('payment-change').classList.add('text-danger');
        } else {
            document.getElementById('payment-change').classList.remove('text-danger');
        }
    });

    // Payment form submission
    document.getElementById('paymentForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const tableId = formData.get('table_id');
        
        fetch(`/public-restaurant/tables/${tableId}/payment`, {
            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) {
                window.location.href = data.redirect_url;
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Terjadi kesalahan saat memproses pembayaran: ' + error.message);
        });
    });
</script>
@endsection