@extends('layouts.app')

@section('title', 'Detail Meja Restoran - Hotel Management System')
@section('page-title', 'Detail Meja ' . $restaurantTable->table_number)

@section('page-actions')
<div class="btn-toolbar mb-2 mb-md-0">
    <a href="{{ route('restaurant-tables.index') }}" class="btn btn-secondary">
        <i class="fas fa-arrow-left me-2"></i>Kembali
    </a>
    <a href="{{ route('restaurant-tables.edit', $restaurantTable) }}" class="btn btn-primary">
        <i class="fas fa-edit me-2"></i>Edit
    </a>
    <a href="{{ route('public-restaurant.table-orders', $restaurantTable) }}" class="btn btn-info">
        <i class="fas fa-utensils me-2"></i>Lihat Pesanan
    </a>
</div>
@endsection

@section('content')
<div class="row">
    <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-table me-2"></i>Informasi Meja
                </h6>
            </div>
            <div class="card-body">
                <table class="table table-borderless">
                    <tr>
                        <td><strong>Nomor Meja:</strong></td>
                        <td>{{ $restaurantTable->table_number }}</td>
                    </tr>
                    <tr>
                        <td><strong>Kapasitas:</strong></td>
                        <td>
                            <span class="badge bg-info">
                                <i class="fas fa-users me-1"></i>{{ $restaurantTable->capacity }} orang
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td><strong>Status:</strong></td>
                        <td>
                            @switch($restaurantTable->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
                        </td>
                    </tr>
                    <tr>
                        <td><strong>Deskripsi:</strong></td>
                        <td>
                            @if($restaurantTable->description)
                                {{ $restaurantTable->description }}
                            @else
                                <span class="text-muted">-</span>
                            @endif
                        </td>
                    </tr>
                    <tr>
                        <td><strong>Dibuat:</strong></td>
                        <td>{{ $restaurantTable->created_at->format('d/m/Y H:i') }}</td>
                    </tr>
                    <tr>
                        <td><strong>Terakhir Diupdate:</strong></td>
                        <td>{{ $restaurantTable->updated_at->format('d/m/Y H:i') }}</td>
                    </tr>
                </table>
            </div>
        </div>

        <!-- Quick Actions -->
        <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-bolt me-2"></i>Aksi Cepat
                </h6>
            </div>
            <div class="card-body">
                <div class="d-grid gap-2">
                    <button type="button" class="btn btn-outline-primary" 
                            onclick="updateStatus('{{ $restaurantTable->status }}')">
                        <i class="fas fa-sync-alt me-2"></i>Ubah Status
                    </button>
                    <a href="{{ route('public-restaurant.table-orders', $restaurantTable) }}" 
                       class="btn btn-outline-info">
                        <i class="fas fa-utensils me-2"></i>Kelola Pesanan
                    </a>
                    <a href="{{ route('restaurant-tables.edit', $restaurantTable) }}" 
                       class="btn btn-outline-warning">
                        <i class="fas fa-edit me-2"></i>Edit Meja
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-8">
        <!-- Recent Orders -->
        <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-history me-2"></i>Riwayat Pesanan Terbaru
                </h6>
            </div>
            <div class="card-body">
                @if($restaurantTable->publicRestaurantOrders->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>Menu</th>
                                    <th>Qty</th>
                                    <th>Harga</th>
                                    <th>Status</th>
                                    <th>Waktu Pesan</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($restaurantTable->publicRestaurantOrders->take(10) 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->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('d/m H:i') }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="fas fa-utensils fa-2x text-muted mb-3"></i>
                        <h6 class="text-muted">Belum ada pesanan</h6>
                        <p class="text-muted">Meja ini belum pernah digunakan untuk pesanan</p>
                    </div>
                @endif
            </div>
        </div>

        <!-- Recent Transactions -->
        <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-receipt me-2"></i>Riwayat Transaksi Terbaru
                </h6>
            </div>
            <div class="card-body">
                @if($restaurantTable->publicRestaurantTransactions->count() > 0)
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th>No. Transaksi</th>
                                    <th>Total</th>
                                    <th>Metode</th>
                                    <th>Kasir</th>
                                    <th>Waktu</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($restaurantTable->publicRestaurantTransactions->take(10) as $transaction)
                                <tr>
                                    <td>{{ $transaction->transaction_number }}</td>
                                    <td>Rp {{ number_format($transaction->total_amount, 0, ',', '.') }}</td>
                                    <td>
                                        <span class="badge bg-info">
                                            {{ ucfirst(str_replace('_', ' ', $transaction->payment_method)) }}
                                        </span>
                                    </td>
                                    <td>{{ $transaction->cashier->name }}</td>
                                    <td>{{ $transaction->created_at->format('d/m H:i') }}</td>
                                    <td>
                                        <a href="{{ route('public-restaurant.print-invoice', $transaction) }}" 
                                           class="btn btn-sm btn-outline-primary" target="_blank">
                                            <i class="fas fa-print"></i>
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="text-center py-4">
                        <i class="fas fa-receipt fa-2x text-muted mb-3"></i>
                        <h6 class="text-muted">Belum ada transaksi</h6>
                        <p class="text-muted">Meja ini belum pernah melakukan transaksi pembayaran</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Status Update Modal -->
<div class="modal fade" id="statusModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Ubah Status Meja</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="statusForm">
                @csrf
                @method('PATCH')
                <div class="modal-body">
                    <input type="hidden" id="status-table-id" value="{{ $restaurantTable->id }}">
                    
                    <div class="mb-3">
                        <label class="form-label">Meja</label>
                        <input type="text" class="form-control" value="{{ $restaurantTable->table_number }}" readonly>
                    </div>
                    
                    <div class="mb-3">
                        <label for="status" class="form-label">Status Baru</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="available" {{ $restaurantTable->status == 'available' ? 'selected' : '' }}>
                                Tersedia
                            </option>
                            <option value="occupied" {{ $restaurantTable->status == 'occupied' ? 'selected' : '' }}>
                                Sedang Digunakan
                            </option>
                            <option value="reserved" {{ $restaurantTable->status == 'reserved' ? 'selected' : '' }}>
                                Dipesan
                            </option>
                            <option value="maintenance" {{ $restaurantTable->status == 'maintenance' ? 'selected' : '' }}>
                                Maintenance
                            </option>
                        </select>
                    </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">Update Status</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function updateStatus(currentStatus) {
        document.getElementById('status').value = currentStatus;
        
        const modal = new bootstrap.Modal(document.getElementById('statusModal'));
        modal.show();
    }

    // Status form submission
    document.getElementById('statusForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(this);
        const tableId = document.getElementById('status-table-id').value;
        
        fetch(`/restaurant-tables/${tableId}/status`, {
            method: 'PATCH',
            body: formData,
            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 memperbarui status');
        });
    });
</script>
@endsection