@extends('layouts.app')

@section('content')
<!-- Audio element for notification sound -->
<audio id="notification-sound" preload="auto">
    <source src="{{ asset('sounds/notification.mp3') }}" type="audio/mpeg">
    Your browser does not support the audio element.
</audio>

<div class="container">
    <div class="row justify-content-between mb-4">
        <div class="col-md-6">
            <h2><i class="fas fa-bell me-2"></i> طلبات المساعدة</h2>
        </div>
        <div class="col-md-6 text-end">
            <button id="test-sound" class="btn btn-info me-2">
                <i class="fas fa-volume-up me-1"></i> اختبار الصوت
            </button>
            <a href="{{ route('tables.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-right me-1"></i> العودة إلى الطاولات
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">الطاولات التي تحتاج إلى مساعدة</h5>
                </div>
                <div class="card-body">
                    @if($tables->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>رقم الطاولة</th>
                                        <th>السعة</th>
                                        <th>الموقع</th>
                                        <th>الحالة</th>
                                        <th>وقت طلب المساعدة</th>
                                        <th>الإجراءات</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($tables as $table)
                                    <tr>
                                        <td>{{ $table->name }}</td>
                                        <td>{{ $table->capacity }}</td>
                                        <td>{{ $table->location ?? '-' }}</td>
                                        <td>
                                            @if($table->status == 'available')
                                                <span class="badge bg-success">متاحة</span>
                                            @elseif($table->status == 'occupied')
                                                <span class="badge bg-danger">مشغولة</span>
                                            @elseif($table->status == 'reserved')
                                                <span class="badge bg-warning">محجوزة</span>
                                            @endif
                                        </td>
                                        <td>{{ $table->assistance_requested_at ? \Carbon\Carbon::parse($table->assistance_requested_at)->diffForHumans() : 'N/A' }}</td>
                                        <td>
                                            <button class="btn btn-sm btn-success resolve-assistance" data-table-id="{{ $table->id }}">
                                                <i class="fas fa-check me-1"></i> تم التعامل
                                            </button>
                                            
                                            @if($table->status == 'occupied')
                                                @php
                                                    $latestOrder = $table->orders()->whereIn('status', ['pending', 'preparing'])->latest()->first();
                                                @endphp
                                                @if($latestOrder)
                                                    <a href="{{ route('orders.show', $latestOrder->id) }}" class="btn btn-sm btn-info">
                                                        <i class="fas fa-eye me-1"></i> عرض الطلب
                                                    </a>
                                                @endif
                                            @endif
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i> لا توجد طاولات تحتاج إلى مساعدة حاليًا.
                        </div>
                    @endif
                </div>
            </div>
            
            <!-- External Orders Assistance Section -->
            <div class="card">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">الطلبات الخارجية التي تحتاج إلى مساعدة</h5>
                </div>
                <div class="card-body">
                    @php
                        $externalOrders = \App\Models\Order::where('is_external_order', true)
                            ->where('needs_assistance', true)
                            ->orderBy('assistance_requested_at', 'desc')
                            ->get();
                    @endphp
                    
                    @if($externalOrders->count() > 0)
                        <div class="table-responsive">
                            <table class="table table-striped table-hover">
                                <thead>
                                    <tr>
                                        <th>رقم الطلب</th>
                                        <th>رقم السيارة</th>
                                        <th>الحالة</th>
                                        <th>المبلغ</th>
                                        <th>وقت طلب المساعدة</th>
                                        <th>الإجراءات</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($externalOrders as $order)
                                    <tr>
                                        <td>#{{ $order->id }}</td>
                                        <td>{{ $order->car_number }}</td>
                                        <td>
                                            @if($order->status == 'pending')
                                                <span class="badge bg-info">قيد الانتظار</span>
                                            @elseif($order->status == 'preparing')
                                                <span class="badge bg-warning">قيد التحضير</span>
                                            @elseif($order->status == 'completed')
                                                <span class="badge bg-success">مكتمل</span>
                                            @elseif($order->status == 'cancelled')
                                                <span class="badge bg-danger">ملغي</span>
                                            @endif
                                        </td>
                                        <td>{{ number_format($order->total_amount, 2) }} ريال</td>
                                        <td>{{ $order->assistance_requested_at ? \Carbon\Carbon::parse($order->assistance_requested_at)->diffForHumans() : 'N/A' }}</td>
                                        <td>
                                            <button class="btn btn-sm btn-success resolve-external-assistance" data-order-id="{{ $order->id }}">
                                                <i class="fas fa-check me-1"></i> تم التعامل
                                            </button>
                                            <a href="{{ route('orders.show', $order->id) }}" class="btn btn-sm btn-info">
                                                <i class="fas fa-eye me-1"></i> عرض الطلب
                                            </a>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle me-2"></i> لا توجد طلبات خارجية تحتاج إلى مساعدة حاليًا.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        console.log('Document ready - Assistance page loaded');
        
        // Variables para controlar el estado de las notificaciones
        let previousTablesCount = {{ $tables->count() }};
        let notificationSound = document.getElementById('notification-sound');
        let userInteracted = false;
        
        // Detectar interacción del usuario
        $(document).on('click', function() {
            userInteracted = true;
        });
        
        // Botón de prueba de sonido
        $('#test-sound').on('click', function() {
            userInteracted = true;
            playNotificationSound();
            // Mostrar mensaje de confirmación
            alert('تم تشغيل صوت التنبيه. إذا لم تسمع الصوت، تحقق من إعدادات الصوت في المتصفح.');  // تم تشغيل صوت التنبيه. إذا لم تسمع الصوت، تحقق من إعدادات الصوت في المتصفح.
        });
        
        // Auto refresh every 30 seconds
        setInterval(function() {
            checkForNewAssistanceRequests();
        }, 10000); // Comprobar cada 10 segundos
        
        // Función para comprobar si hay nuevas solicitudes de asistencia
        function checkForNewAssistanceRequests() {
            $.ajax({
                url: '{{ route("tables.assistance-count") }}',
                type: 'GET',
                success: function(response) {
                    // Si hay más mesas que necesitan asistencia que antes
                    if (response.count > previousTablesCount) {
                        // Solo reproducir sonido si el usuario ha interactuado con la página
                        if (userInteracted) {
                            playNotificationSound();
                        }
                        
                        // Mostrar una notificación visual en lugar de recargar la página
                        showNewAssistanceAlert(response.count - previousTablesCount);
                        previousTablesCount = response.count;
                    }
                }
            });
        }
        
        // Función para mostrar una alerta visual cuando hay nuevas solicitudes
        function showNewAssistanceAlert(newCount) {
            // Crear una alerta que no recargue la página
            const alertHtml = `
                <div class="alert alert-warning alert-dismissible fade show mt-3" role="alert">
                    <strong><i class="fas fa-bell"></i> تنبيه!</strong> هناك ${newCount} طلب مساعدة جديد. 
                    <button type="button" class="btn btn-sm btn-warning ms-3 refresh-page">تحديث الصفحة</button>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            `;
            
            // Añadir la alerta al principio de la tarjeta
            $('.card-body').prepend(alertHtml);
            
            // Añadir evento al botón de actualizar
            $('.refresh-page').on('click', function() {
                location.reload();
            });
        }
        
        // Función para reproducir el sonido de notificación
        function playNotificationSound() {
            if (notificationSound && userInteracted) {
                try {
                    // Intentar reproducir el sonido solo si el usuario ha interactuado
                    notificationSound.currentTime = 0;
                    let playPromise = notificationSound.play();
                    
                    if (playPromise !== undefined) {
                        playPromise.catch(e => {
                            console.log('No se pudo reproducir el sonido automáticamente:', e);
                        });
                    }
                } catch (e) {
                    console.error('Error al reproducir el sonido:', e);
                }
            }
        }
        
        // Handle resolve assistance button for tables
        $('.resolve-assistance').on('click', function(e) {
            e.preventDefault();
            console.log('Resolve table assistance button clicked');
            
            const tableId = $(this).data('table-id');
            console.log('Table ID:', tableId);
            
            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            console.log('CSRF Token available:', !!csrfToken);
            
            const url = `{{ url('/') }}/tables/${tableId}/resolve-assistance`;
            console.log('Request URL:', url);
            
            $.ajax({
                url: url,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    console.log('Success response:', response);
                    // Show success message
                    alert('تم تحديث حالة الطاولة بنجاح');
                    
                    // Reload page
                    location.reload();
                },
                error: function(xhr, status, error) {
                    console.error('Error response:', xhr.status, error);
                    console.error('Response text:', xhr.responseText);
                    alert('حدث خطأ أثناء تحديث حالة الطاولة');
                }
            });
        });
        
        // Handle resolve assistance button for external orders
        $('.resolve-external-assistance').on('click', function(e) {
            e.preventDefault();
            console.log('Resolve external order assistance button clicked');
            
            const orderId = $(this).data('order-id');
            console.log('Order ID:', orderId);
            
            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            
            $.ajax({
                url: `{{ url('/') }}/external-orders/${orderId}/resolve-assistance`,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    console.log('Success response:', response);
                    // Show success message
                    alert('تم تحديث حالة الطلب الخارجي بنجاح');
                    
                    // Reload page
                    location.reload();
                },
                error: function(xhr, status, error) {
                    console.error('Error response:', xhr.status, error);
                    console.error('Response text:', xhr.responseText);
                    alert('حدث خطأ أثناء تحديث حالة الطلب الخارجي');
                }
            });
        });
        
        // Test if jQuery events are working
        console.log('Adding test click handler to document');
        $(document).on('click', function() {
            console.log('Document was clicked');
        });
    });
</script>
@endpush