@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>الطاولات</h1>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createTableModal">
            <i class="fas fa-plus"></i> إضافة طاولة
        </button>
    </div>
    
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6">
                            <h5 class="card-title">قائمة الطاولات</h5>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="tableSearch" placeholder="بحث...">
                                <button class="btn btn-outline-secondary" type="button">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-hover" id="tablesTable">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>الاسم</th>
                                    <th>السعة</th>
                                    <th>الحالة</th>
                                    <th>الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($tables as $table)
                                    <tr>
                                        <td>{{ $table->id }}</td>
                                        <td>{{ $table->name }}</td>
                                        <td>{{ $table->capacity }} أشخاص</td>
                                        <td>
                                            @if($table->status == 'occupied')
                                                <span class="badge bg-danger">مشغولة</span>
                                            @elseif($table->status == 'reserved')
                                                <span class="badge bg-warning">محجوزة</span>
                                            @else
                                                <span class="badge bg-success">متاحة</span>
                                            @endif
                                        </td>
                                        <td>
                                            <div class="btn-group">
                                                <button type="button" class="btn btn-sm btn-info view-table" data-id="{{ $table->id }}">
                                                    <i class="fas fa-eye"></i>
                                                </button>
                                                <button type="button" class="btn btn-sm btn-primary edit-table" data-id="{{ $table->id }}">
                                                    <i class="fas fa-edit"></i>
                                                </button>
                                                <a href="{{ route('tables.qrcode', $table) }}" class="btn btn-sm btn-success" target="_blank">
                                                    <i class="fas fa-qrcode"></i>
                                                </a>
                                                <button type="button" class="btn btn-sm btn-danger delete-table" data-id="{{ $table->id }}">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="mt-4">
                        {{ $tables->links() }}
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">حالة الطاولات</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6 mb-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h3 class="mb-0">{{ $totalTables }}</h3>
                                    <p class="mb-0">إجمالي الطاولات</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h3 class="mb-0">{{ $availableTables }}</h3>
                                    <p class="mb-0">طاولات متاحة</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="card bg-danger text-white">
                                <div class="card-body text-center">
                                    <h3 class="mb-0">{{ $occupiedTables }}</h3>
                                    <p class="mb-0">طاولات مشغولة</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-6 mb-3">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h3 class="mb-0">{{ $totalCapacity }}</h3>
                                    <p class="mb-0">سعة الجلوس</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-3">
                        <h6>طاولات مشغولة حالياً:</h6>
                        <ul class="list-group">
                            @forelse($occupiedTablesList as $occupiedTable)
                                <li class="list-group-item d-flex justify-content-between align-items-center">
                                    <div>
                                        <strong>{{ $occupiedTable->name }}</strong>
                                        @if($occupiedTable->orders->isNotEmpty())
                                            <small class="d-block text-muted">طلب #{{ $occupiedTable->orders->first()->id }}</small>
                                        @endif
                                    </div>
                                    @if($occupiedTable->orders->isNotEmpty())
                                        <a href="{{ route('orders.show', $occupiedTable->orders->first()) }}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-eye"></i> عرض الطلب
                                        </a>
                                    @else
                                        <span class="badge bg-warning">لا يوجد طلب نشط</span>
                                    @endif
                                </li>
                            @empty
                                <li class="list-group-item text-center text-muted">لا توجد طاولات مشغولة حالياً</li>
                            @endforelse
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Table Modal -->
<div class="modal fade" id="createTableModal" tabindex="-1" aria-labelledby="createTableModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="createTableModalLabel">إضافة طاولة جديدة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="{{ route('tables.store') }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="name" class="form-label">اسم الطاولة <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="name" name="name" required>
                        <small class="form-text text-muted">مثال: طاولة 1، طاولة VIP، إلخ</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="capacity" class="form-label">السعة <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="capacity" name="capacity" min="1" value="4" required>
                        <small class="form-text text-muted">عدد الأشخاص الذين يمكنهم الجلوس على هذه الطاولة</small>
                    </div>
                    
                    <div class="mb-3">
                        <label for="location" class="form-label">الموقع</label>
                        <input type="text" class="form-control" id="location" name="location">
                        <small class="form-text text-muted">مثال: الطابق الأول، الشرفة، إلخ (اختياري)</small>
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_available" name="is_available" value="1" checked>
                            <label class="form-check-label" for="is_available">متاحة للحجز</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary">حفظ</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Edit Table Modal -->
<div class="modal fade" id="editTableModal" tabindex="-1" aria-labelledby="editTableModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editTableModalLabel">تعديل الطاولة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="editTableForm" method="POST">
                @csrf
                @method('PUT')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="edit_name" class="form-label">اسم الطاولة <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit_name" name="name" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="edit_capacity" class="form-label">السعة <span class="text-danger">*</span></label>
                        <input type="number" class="form-control" id="edit_capacity" name="capacity" min="1" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="edit_location" class="form-label">الموقع</label>
                        <input type="text" class="form-control" id="edit_location" name="location">
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="edit_is_available" name="is_available" value="1">
                            <label class="form-check-label" for="edit_is_available">متاحة للحجز</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary">حفظ التغييرات</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- View Table Modal -->
<div class="modal fade" id="viewTableModal" tabindex="-1" aria-labelledby="viewTableModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="viewTableModalLabel">تفاصيل الطاولة</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-bold">الاسم:</label>
                    <p id="view_name"></p>
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-bold">السعة:</label>
                    <p id="view_capacity"></p>
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-bold">الموقع:</label>
                    <p id="view_location"></p>
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-bold">الحالة:</label>
                    <p id="view_status"></p>
                </div>
                
                <div id="active_order_container" class="d-none">
                    <div class="card bg-light">
                        <div class="card-body">
                            <h6 class="card-title">الطلب الحالي</h6>
                            <div class="mb-2">
                                <label class="form-label fw-bold">رقم الطلب:</label>
                                <p id="view_order_id"></p>
                            </div>
                            <div class="mb-2">
                                <label class="form-label fw-bold">العميل:</label>
                                <p id="view_customer"></p>
                            </div>
                            <div class="mb-2">
                                <label class="form-label fw-bold">وقت الطلب:</label>
                                <p id="view_order_time"></p>
                            </div>
                            <div class="text-center">
                                <a href="#" id="view_order_link" class="btn btn-primary">
                                    <i class="fas fa-eye"></i> عرض الطلب
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                <a href="#" id="new_order_link" class="btn btn-primary">
                    <i class="fas fa-plus"></i> إنشاء طلب جديد
                </a>
            </div>
        </div>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteTableModal" tabindex="-1" aria-labelledby="deleteTableModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteTableModalLabel">تأكيد الحذف</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>هل أنت متأكد من حذف هذه الطاولة؟</p>
                <p class="text-danger" id="delete_warning"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                <form id="deleteTableForm" method="POST">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">تأكيد الحذف</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Search functionality
        $("#tableSearch").on("keyup", function() {
            var value = $(this).val().toLowerCase();
            $("#tablesTable tbody tr").filter(function() {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
        
        // View table details
        $('.view-table').click(function() {
            const tableId = $(this).data('id');
            
            $.ajax({
                url: `{{ url('/tables') }}/${tableId}`,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $('#view_name').text(response.name);
                    $('#view_capacity').text(response.capacity + ' أشخاص');
                    $('#view_location').text(response.location || 'غير محدد');
                    
                    if (response.is_occupied) {
                        $('#view_status').html('<span class="badge bg-danger">مشغولة</span>');
                        
                        // Show active order details
                        if (response.active_order) {
                            $('#view_order_id').text('#' + response.active_order.id);
                            $('#view_customer').text(response.active_order.customer_name || 'غير محدد');
                            $('#view_order_time').text(response.active_order.created_at);
                            $('#view_order_link').attr('href', `{{ url('/orders') }}/${response.active_order.id}`);
                            $('#active_order_container').removeClass('d-none');
                        } else {
                            $('#active_order_container').addClass('d-none');
                        }
                    } else {
                        $('#view_status').html('<span class="badge bg-success">متاحة</span>');
                        $('#active_order_container').addClass('d-none');
                    }
                    
                    $('#new_order_link').attr('href', `{{ url('/orders/create') }}?table_id=${tableId}`);
                    $('#viewTableModal').modal('show');
                },
                error: function(error) {
                    console.error('Error fetching table details:', error);
                    alert('حدث خطأ أثناء جلب بيانات الطاولة');
                }
            });
        });
        
        // Edit table
        $('.edit-table').click(function() {
            const tableId = $(this).data('id');
            
            $.ajax({
                url: `{{ url('/tables') }}/${tableId}/edit`,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    $('#edit_name').val(response.name);
                    $('#edit_capacity').val(response.capacity);
                    $('#edit_location').val(response.location);
                    $('#edit_is_available').prop('checked', response.is_available);
                    
                    $('#editTableForm').attr('action', `{{ url('/tables') }}/${tableId}`);
                    $('#editTableModal').modal('show');
                },
                error: function(error) {
                    console.error('Error fetching table details:', error);
                    alert('حدث خطأ أثناء جلب بيانات الطاولة');
                }
            });
        });
        
        // Delete table
        $('.delete-table').click(function() {
            const tableId = $(this).data('id');
            
            $.ajax({
                url: `{{ url('/tables') }}/${tableId}`,
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.is_occupied) {
                        $('#delete_warning').text('تحذير: هذه الطاولة مشغولة حالياً بطلب نشط. حذف الطاولة قد يؤثر على الطلب الحالي.');
                    } else {
                        $('#delete_warning').text('');
                    }
                    
                    $('#deleteTableForm').attr('action', `{{ url('/tables') }}/${tableId}`);
                    $('#deleteTableModal').modal('show');
                },
                error: function(error) {
                    console.error('Error fetching table details:', error);
                    alert('حدث خطأ أثناء جلب بيانات الطاولة');
                }
            });
        });
    });
</script>
@endpush