@extends('layouts.customer')

@section('content')
<div id="notifications"></div>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">
                    <i class="fas fa-receipt me-2"></i>
                    حالة الطلب #{{ $order->id }}
                </h5>
            </div>
            
            <div class="card-body">
                <!-- Order Status -->
                <div class="text-center mb-4">
                    @switch($order->status)
                        @case('pending')
                            <div class="mb-3">
                                <i class="fas fa-hourglass-start fa-3x text-warning"></i>
                            </div>
                            <h4 class="text-warning">قيد الانتظار</h4>
                            <p class="text-muted">تم استلام طلبك وسيتم معالجته قريبًا</p>
                            @break
                            
                        @case('preparing')
                            @php
                                // Verificar si todos los elementos están listos o servidos
                                $allItemsReady = $order->items->every(function($item) {
                                    return in_array($item->status, ['ready', 'served']);
                                });
                                
                                // Verificar si hay al menos un elemento listo
                                $hasReadyItems = $order->items->contains(function($item) {
                                    return $item->status === 'ready';
                                });
                            @endphp
                            
                            @if($allItemsReady || $hasReadyItems)
                                <div class="mb-3">
                                    <i class="fas fa-utensils fa-3x text-primary"></i>
                                </div>
                                <h4 class="text-primary">جاهز للتقديم</h4>
                                <p class="text-muted">طلبك جاهز وسيتم تقديمه قريبًا</p>
                            @else
                                <div class="mb-3">
                                    <i class="fas fa-blender fa-3x text-info"></i>
                                </div>
                                <h4 class="text-info">جاري التحضير</h4>
                                <p class="text-muted">يتم تحضير طلبك الآن</p>
                            @endif
                            @break
                            
                        @case('completed')
                            <div class="mb-3">
                                <i class="fas fa-check-double fa-3x text-success"></i>
                            </div>
                            <h4 class="text-success">تم التسليم</h4>
                            <p class="text-muted">تم تسليم طلبك بنجاح</p>
                            @break
                            
                        @case('cancelled')
                            <div class="mb-3">
                                <i class="fas fa-times-circle fa-3x text-danger"></i>
                            </div>
                            <h4 class="text-danger">تم الإلغاء</h4>
                            <p class="text-muted">تم إلغاء هذا الطلب</p>
                            @break
                            
                        @default
                            <div class="mb-3">
                                <i class="fas fa-question-circle fa-3x text-secondary"></i>
                            </div>
                            <h4 class="text-secondary">غير معروف</h4>
                            <p class="text-muted">حالة الطلب غير معروفة</p>
                    @endswitch
                </div>
                
                <!-- Order Progress -->
                @if(!in_array($order->status, ['cancelled', 'completed']))
                <div class="mb-4">
                    <div class="progress" style="height: 5px;">
                        @switch($order->status)
                            @case('pending')
                                <div class="progress-bar bg-warning" role="progressbar" style="width: 25%"></div>
                                @break
                                
                            @case('preparing')
                                @php
                                    // Verificar si hay al menos un elemento listo
                                    $hasReadyItems = $order->items->contains(function($item) {
                                        return $item->status === 'ready';
                                    });
                                @endphp
                                
                                @if($hasReadyItems)
                                    <div class="progress-bar bg-success" role="progressbar" style="width: 75%"></div>
                                @else
                                    <div class="progress-bar bg-info" role="progressbar" style="width: 50%"></div>
                                @endif
                                @break
                                
                            @default
                                <div class="progress-bar" role="progressbar" style="width: 0%"></div>
                        @endswitch
                    </div>
                    
                    <div class="d-flex justify-content-between mt-2">
                        <small class="text-muted">استلام الطلب</small>
                        <small class="text-muted">تحضير</small>
                        <small class="text-muted">جاهز</small>
                        <small class="text-muted">تم التسليم</small>
                    </div>
                </div>
                
                <!-- Estimated Time -->
                @if(in_array($order->status, ['pending', 'preparing']))
                <div class="alert alert-info text-center">
                    <i class="fas fa-clock me-2"></i>
                    الوقت المتوقع للتحضير: <strong>{{ $estimatedTime ?? '10-15' }} دقيقة</strong>
                </div>
                @endif
                @endif
                
                <!-- Order Details -->
                <!-- Estado de pago -->
                @if($order->payment_status == 'pending')
                <div class="alert alert-warning text-center mb-4">
                    <i class="fas fa-money-bill-wave me-2"></i>
                    <strong>حالة الدفع: غير مدفوع</strong>
                    <p class="mb-0 mt-2">يرجى دفع هذا الطلب عند المحاسبة</p>
                    <button id="callCashierBtn" class="btn btn-warning mt-2" data-table-id="{{ $order->table->id }}" data-order-id="{{ $order->id }}">
                        <i class="fas fa-bell me-1"></i> استدعاء المحاسب
                    </button>
                </div>
                @elseif($order->payment_status == 'paid')
                <div class="alert alert-success text-center mb-4">
                    <i class="fas fa-check-circle me-2"></i>
                    <strong>حالة الدفع: تم الدفع</strong>
                    <p class="mb-0 mt-2">شكراً لك!</p>
                </div>
                @endif
                
                <div class="card mb-4">
                    <div class="card-header bg-light">
                        <h6 class="mb-0">تفاصيل الطلب</h6>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <strong>رقم الطاولة:</strong> {{ $order->table->name }}
                        </div>
                        
                        @if($order->customer_name)
                        <div class="mb-3">
                            <strong>اسم العميل:</strong> {{ $order->customer_name }}
                        </div>
                        @endif
                        
                        <div class="mb-3">
                            <strong>وقت الطلب:</strong> {{ $order->created_at->format('Y-m-d H:i') }}
                        </div>
                        
                        <div class="table-responsive">
                            <table class="table table-bordered">
                                <thead class="table-light">
                                    <tr>
                                        <th>المنتج</th>
                                        <th>الكمية</th>
                                        <th>السعر</th>
                                        <th>المجموع</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($order->items as $item)
                                    <tr>
                                        <td>
                                            {{ $item->product->name }}
                                            @if($item->notes)
                                            <small class="text-muted d-block">{{ $item->notes }}</small>
                                            @endif
                                        </td>
                                        <td>{{ $item->quantity }}</td>
                                        <td>{{ number_format($item->unit_price, 2) }}</td>
                                        <td>{{ number_format($item->total_price, 2) }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <th colspan="3">المجموع</th>
                                        <th>{{ number_format($order->total_amount, 2) }}</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                
                <!-- Actions -->
                <div class="d-flex justify-content-between">
                    @if($order->is_external_order)
                        <a href="{{ route('customer.external-order') }}" class="btn btn-outline-primary">
                            <i class="fas fa-arrow-right me-1"></i>
                            طلب جديد
                        </a>
                    @else
                        <a href="{{ route('customer.order', ['table' => $order->table->id]) }}" class="btn btn-outline-primary">
                            <i class="fas fa-arrow-right me-1"></i>
                            طلب جديد
                        </a>
                    @endif
                    
                    @if(in_array($order->status, ['pending']))
                    <button id="cancelOrderBtn" class="btn btn-outline-danger">
                        <i class="fas fa-times me-1"></i>
                        إلغاء الطلب
                    </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        const orderId = {{ $order->id }};
        @if(!$order->is_external_order)
        const tableId = {{ $order->table ? $order->table->id : 'null' }};
        // Set table ID for call waiter button if not external order
        $('#callWaiterBtn').data('table-id', tableId);
        @endif
        
        // Call cashier button
        $('#callCashierBtn').on('click', function() {
            const btnEl = $(this);
            const orderId = btnEl.data('order-id');
            
            // Disable button and show loading state
            btnEl.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span> جاري الإرسال...');
            
            @if($order->is_external_order)
            $.ajax({
                url: `{{ url('/') }}/external-order/order/${orderId}/call-waiter`,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
            @else
            const tableId = btnEl.data('table-id');
            $.ajax({
                url: `{{ url('/') }}/order/table/${tableId}/call-cashier`,
                type: 'POST',
                data: {
                    order_id: orderId
                },
            @endif
                success: function(response) {
                    showNotification('تم استدعاء المحاسب بنجاح. سيصل قريباً.', 'success');
                    
                    // Reset button after 30 seconds
                    setTimeout(function() {
                        btnEl.prop('disabled', false).html('<i class="fas fa-bell me-1"></i> استدعاء المحاسب');
                    }, 30000); // 30 seconds
                },
                error: function() {
                    showNotification('حدث خطأ أثناء محاولة استدعاء المحاسب', 'danger');
                    btnEl.prop('disabled', false).html('<i class="fas fa-bell me-1"></i> استدعاء المحاسب');
                }
            });
        });
        
        // Cancel order button
        $('#cancelOrderBtn').on('click', function() {
            if (confirm('هل أنت متأكد من رغبتك في إلغاء هذا الطلب؟')) {
                $.ajax({
                    url: `{{ url('/') }}/order-cancel/${orderId}`,
                    type: 'POST',
                    success: function(response) {
                        showNotification('تم إلغاء الطلب بنجاح');
                        // Reload page after short delay
                        setTimeout(function() {
                            location.reload();
                        }, 1500);
                    },
                    error: function() {
                        showNotification('حدث خطأ أثناء محاولة إلغاء الطلب', 'danger');
                    }
                });
            }
        });
        
        // Auto refresh status every 30 seconds if order is not in final state
        @if(!in_array($order->status, ['completed', 'cancelled']))
        setInterval(function() {
            $.ajax({
                url: `{{ url('/') }}/order-status/${orderId}`,
                type: 'GET',
                success: function(response) {
                    if (response.status !== '{{ $order->status }}') {
                        // Status changed, reload page
                        location.reload();
                    }
                }
            });
        }, 30000); // 30 seconds
        @endif
    });
</script>
@endsection