@extends('layouts.app')

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

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

@section('content')
<div class="row">
    <!-- Occupied 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 yang Sedang Digunakan
                </h6>
            </div>
            <div class="card-body">
                @if($tables->count() > 0)
                    <div class="row">
                        @foreach($tables as $table)
                        <div class="col-md-6 col-lg-4 mb-3">
                            <div class="card h-100">
                                <div class="card-body">
                                    <h5 class="card-title">{{ $table->table_number }}</h5>
                                    <p class="card-text">
                                        <i class="fas fa-users me-1"></i>{{ $table->capacity }} orang
                                    </p>
                                    <span class="badge bg-warning">Sedang Digunakan</span>
                                    
                                    @php
                                        $totalAmount = $table->publicRestaurantOrders->where('status', '!=', 'cancelled')->sum('total_price');
                                    @endphp
                                    
                                    <div class="mt-3">
                                        <div class="mb-2">
                                            <strong>Subtotal: <span data-subtotal="{{ $table->id }}">Rp {{ number_format($totalAmount, 0, ',', '.') }}</span></strong>
                                        </div>
                                        <div class="mb-2">
                                            <label for="tax-input-{{ $table->id }}" class="form-label small">Pajak (Rp)</label>
                                            <input type="number" class="form-control form-control-sm" id="tax-input-{{ $table->id }}" value="0" min="0" step="100">
                                        </div>
                                        <div class="mb-2">
                                            <label for="service-input-{{ $table->id }}" class="form-label small">Service (Rp)</label>
                                            <input type="number" class="form-control form-control-sm" id="service-input-{{ $table->id }}" value="0" min="0" step="100">
                                        </div>
                                        <div class="mb-2">
                                            <strong>Total: <span id="total-display-{{ $table->id }}">Rp {{ number_format($totalAmount, 0, ',', '.') }}</span></strong>
                                        </div>
                                        <div class="btn-group w-100" role="group">
                                            <a href="{{ route('public-restaurant.table-orders', $table) }}" 
                                               class="btn btn-sm btn-info">
                                                <i class="fas fa-eye me-1"></i>Lihat
                                            </a>
                                            <button class="btn btn-sm btn-success" 
                                                    onclick="processPayment({{ $table->id }}, '{{ $table->table_number }}', {{ $totalAmount }}, '{{ $table->id }}')">
                                                <i class="fas fa-credit-card me-1"></i>Bayar
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center py-5">
                        <i class="fas fa-table fa-3x text-muted mb-3"></i>
                        <h5 class="text-muted">Tidak ada meja yang sedang digunakan</h5>
                        <p class="text-muted">Semua meja tersedia</p>
                    </div>
                @endif
            </div>
        </div>
    </div>

    <!-- Pending Orders -->
    <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-clock me-2"></i>Pesanan Menunggu
                </h6>
            </div>
            <div class="card-body">
                @if($pendingOrders->count() > 0)
                    @foreach($pendingOrders as $order)
                    <div class="d-flex justify-content-between align-items-center mb-3 p-2 border rounded">
                        <div>
                            <strong>{{ $order->restaurantMenu->name }}</strong><br>
                            <small class="text-muted">Meja {{ $order->restaurantTable->table_number }}</small><br>
                            <small class="text-muted">Qty: {{ $order->quantity }}</small>
                        </div>
                        <div class="text-end">
                            <div class="mb-1">Rp {{ number_format($order->total_price, 0, ',', '.') }}</div>
                            <div class="btn-group btn-group-sm">
                                <button class="btn btn-outline-success" 
                                        onclick="updateOrderStatus({{ $order->id }}, 'preparing')">
                                    <i class="fas fa-play"></i>
                                </button>
                                <button class="btn btn-outline-primary" 
                                        onclick="updateOrderStatus({{ $order->id }}, 'ready')">
                                    <i class="fas fa-check"></i>
                                </button>
                                <button class="btn btn-outline-danger" 
                                        onclick="updateOrderStatus({{ $order->id }}, 'cancelled')">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    @endforeach
                @else
                    <div class="text-center py-3">
                        <i class="fas fa-check-circle fa-2x text-success mb-2"></i>
                        <p class="text-muted">Tidak ada pesanan menunggu</p>
                    </div>
                @endif
            </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 (10%)</label>
                        <input type="text" class="form-control" id="payment-tax" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">Service Charge (5%)</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, inputId) {
        const tax = parseFloat(document.getElementById('tax-input-' + inputId).value) || 0;
        const service = parseFloat(document.getElementById('service-input-' + inputId).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();
    }

    // Add event listeners for all tax and service inputs
    document.addEventListener('DOMContentLoaded', function() {
        // Find all tax and service inputs
        const taxInputs = document.querySelectorAll('[id^="tax-input-"]');
        const serviceInputs = document.querySelectorAll('[id^="service-input-"]');
        
        taxInputs.forEach(input => {
            input.addEventListener('input', function() {
                const tableId = this.id.split('-')[2];
                updateTableTotal(tableId);
            });
        });
        
        serviceInputs.forEach(input => {
            input.addEventListener('input', function() {
                const tableId = this.id.split('-')[2];
                updateTableTotal(tableId);
            });
        });
    });

    function updateTableTotal(tableId) {
        const subtotal = parseFloat(document.querySelector(`[data-subtotal="${tableId}"]`)?.textContent?.replace(/[^\d]/g, '') || 0);
        const tax = parseFloat(document.getElementById('tax-input-' + tableId).value) || 0;
        const service = parseFloat(document.getElementById('service-input-' + tableId).value) || 0;
        const total = subtotal + tax + service;
        
        document.getElementById('total-display-' + tableId).textContent = 'Rp ' + total.toLocaleString('id-ID');
    }

    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');
        });
    }

    // 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