@extends('layouts.customer')

@section('content')
<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-danger text-white">
                <h5 class="mb-0">
                    <i class="fas fa-exclamation-triangle me-2"></i>
                    الطاولة غير متاحة
                </h5>
            </div>
            
            <div class="card-body text-center py-5">
                <div class="mb-4">
                    <i class="fas fa-ban fa-4x text-danger mb-3"></i>
                    <h4>عذراً، هذه الطاولة غير متاحة حالياً</h4>
                    <p class="text-muted">
                        @if($table->status == 'reserved')
                        هذه الطاولة محجوزة مسبقاً.
                        @else
                        لا يمكن استخدام هذه الطاولة في الوقت الحالي.
                        @endif
                    </p>
                </div>
                
                <div class="alert alert-info">
                    <p>يرجى التحدث مع أحد موظفي المقهى للمساعدة أو اختيار طاولة أخرى.</p>
                </div>
                
                <button id="callWaiterBtn" class="btn btn-primary mt-3" data-table-id="{{ $table->id }}">
                    <i class="fas fa-bell me-1"></i>
                    طلب المساعدة
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        const tableId = {{ $table->id }};
        
        // Set table ID for call waiter button
        $('#callWaiterBtn').data('table-id', tableId);
    });
</script>
@endsection