@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <h1 class="mb-4">شاشة المطبخ</h1>
    @push('styles')
    <style>
        /* Force dark header in kitchen cards to ensure readability */
        .kitchen-card .card-header { background-color: #212529 !important; color: #fff !important; }
        .kitchen-card .badge-time { background-color: #f8f9fa !important; color: #212529 !important; }
    </style>
    @endpush
    
    <!-- Elementos de audio para notificaciones -->
    <audio id="notification-sound" preload="auto">
        <source src="{{ asset('sounds/notification.mp3') }}" type="audio/mpeg">
    </audio>
    <audio id="new-order-ar" preload="auto">
        <source src="{{ asset('sounds/new-order-ar.mp3') }}" type="audio/mpeg">
    </audio>
    <audio id="new-order-en" preload="auto">
        <source src="{{ asset('sounds/new-order-en.mp3') }}" type="audio/mpeg">
    </audio>
    
    <!-- Campo oculto para almacenar el último ID de pedido conocido -->
    <input type="hidden" id="last-order-id" value="{{ $pendingOrders->count() > 0 ? $pendingOrders->max('id') : 0 }}">
    
    <div class="row">
        @foreach($pendingOrders as $order)
            <div class="col-md-4 mb-4">
                <div class="card kitchen-card">
                    <div class="card-header bg-white text-dark" style="background-color:#e9ecef !important;color:#212529 !important;font-weight:700 !important;border-bottom:1px solid #dee2e6 !important;">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0 text-dark" style="color:#212529 !important;">طلب #{{ $order->id }} {{ $order->table ? '- طاولة ' . $order->table->name : ($order->is_external_order ? '- طلب خارجي ' . ($order->car_number ? '(سيارة: ' . $order->car_number . ')' : '') : '') }}</h5>
                            <span class="badge bg-white text-dark" style="border:1px solid #ced4da !important;">
                                {{ $order->created_at->diffForHumans() }}
                            </span>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Botones para cambiar el estado de todos los productos -->
                        <div class="mb-3 d-flex justify-content-between">
                            @php
                                $hasPendingItems = $order->items->contains('status', 'pending');
                                $hasPreparingItems = $order->items->contains('status', 'preparing');
                                $allItemsReady = !$order->items->contains(function($item) {
                                    return $item->status != 'ready' && $item->status != 'cancelled';
                                });
                            @endphp
                            
                            @if($hasPendingItems)
                                <button class="btn btn-warning btn-sm update-all-status" data-order-id="{{ $order->id }}" data-status="preparing">
                                    <i class="fas fa-fire"></i> تحضير الكل
                                </button>
                            @endif
                            
                            @if($hasPreparingItems)
                                <button class="btn btn-success btn-sm update-all-status" data-order-id="{{ $order->id }}" data-status="ready">
                                    <i class="fas fa-check"></i> تجهيز الكل
                                </button>
                            @endif
                        </div>
                        
                        <ul class="list-group">
                            @foreach($order->items as $item)
                                <li class="list-group-item 
                                    @switch($item->status)
                                        @case('ready')
                                            list-group-item-success
                                            @break
                                        @case('preparing')
                                            list-group-item-warning
                                            @break
                                        @case('pending')
                                            list-group-item-light
                                            @break
                                    @endswitch
                                ">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <h6 class="mb-0">{{ $item->product->name }} × {{ $item->quantity }}</h6>
                                            @if($item->notes)
                                                <small class="text-muted">{{ $item->notes }}</small>
                                            @endif
                                        </div>
                                        <div class="btn-group">
                                            @if($item->status == 'pending')
                                                <button class="btn btn-sm btn-warning update-status" data-item-id="{{ $item->id }}" data-status="preparing">
                                                    <i class="fas fa-fire"></i> بدء التحضير
                                                </button>
                                            @elseif($item->status == 'preparing')
                                                <button class="btn btn-sm btn-success update-status" data-item-id="{{ $item->id }}" data-status="ready">
                                                    <i class="fas fa-check"></i> جاهز
                                                </button>
                                            @elseif($item->status == 'ready')
                                                <span class="badge bg-success">جاهز للتقديم</span>
                                            @endif
                                        </div>
                                    </div>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between align-items-center">
                            <span>
                                @if($order->notes)
                                    <strong>ملاحظات:</strong> {{ $order->notes }}
                                @endif
                            </span>
                            <span>
                                @switch($order->status)
                                    @case('pending')
                                        <span class="badge bg-secondary">قيد الانتظار</span>
                                        @break
                                    @case('preparing')
                                        <span class="badge bg-warning text-dark">قيد التحضير</span>
                                        @break
                                @endswitch
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Obtener el último ID de pedido conocido
        let lastOrderId = parseInt($('#last-order-id').val());
        
        // Función para reproducir notificaciones de sonido
        function playNotifications() {
            // Reproducir sonido de notificación
            document.getElementById('notification-sound').play();
            
            // Esperar 1 segundo y luego reproducir mensaje en árabe
            setTimeout(function() {
                document.getElementById('new-order-ar').play();
                
                // Esperar a que termine el mensaje en árabe y luego reproducir en inglés
                document.getElementById('new-order-ar').onended = function() {
                    document.getElementById('new-order-en').play();
                };
            }, 1000);
        }
        
        // Verificar nuevos pedidos cada 10 segundos
        setInterval(function() {
            $.ajax({
                url: `{{ url('/') }}/api/check-new-orders`,
                type: 'GET',
                data: {
                    last_id: lastOrderId
                },
                success: function(response) {
                    if (response.new_orders && response.new_orders > 0) {
                        // Actualizar el último ID conocido
                        lastOrderId = response.last_id;
                        
                        // Reproducir notificaciones
                        playNotifications();
                        
                        // Recargar la página después de las notificaciones
                        setTimeout(function() {
                            location.reload();
                        }, 5000); // Esperar 5 segundos para que terminen las notificaciones
                    }
                },
                error: function(error) {
                    console.error('Error checking for new orders:', error);
                }
            });
        }, 10000); // Verificar cada 10 segundos
        
        // Auto refresh page every 30 seconds
        setInterval(function() {
            location.reload();
        }, 30000);
        
        // Update item status
        $('.update-status').click(function() {
            const itemId = $(this).data('item-id');
            const status = $(this).data('status');
            
            console.log('Actualizando estado del elemento:', itemId, 'a', status);
            
            $.ajax({
                url: `{{ url('/') }}/order-items/${itemId}/status`,
                type: 'POST',
                data: {
                    status: status,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                success: function(response) {
                    console.log('Respuesta exitosa:', response);
                    if (response.success) {
                        location.reload();
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error updating item status:', xhr.status, error);
                    console.error('Response text:', xhr.responseText);
                    alert('حدث خطأ أثناء تحديث حالة المنتج');
                }
            });
        });
        
        // Update all items status for an order
        $('.update-all-status').click(function() {
            const orderId = $(this).data('order-id');
            const status = $(this).data('status');
            
            console.log('Actualizando estado de todos los elementos del pedido:', orderId, 'a', status);
            
            $.ajax({
                url: `{{ url('/') }}/orders/${orderId}/update-all-items`,
                type: 'POST',
                data: {
                    status: status,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
                success: function(response) {
                    console.log('Respuesta exitosa:', response);
                    if (response.success) {
                        // Si todos los elementos se marcaron como listos, ocultar el pedido
                        if (status === 'ready') {
                            // Esperar un momento para mostrar el éxito antes de recargar
                            setTimeout(function() {
                                location.reload();
                            }, 500);
                        } else {
                            location.reload();
                        }
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error updating all items status:', xhr.status, error);
                    console.error('Response text:', xhr.responseText);
                    alert('حدث خطأ أثناء تحديث حالة جميع المنتجات');
                }
            });
        });
    });
</script>
@endpush