@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>شاشة النادل</h1>
        <a href="{{ route('orders.create') }}" class="btn btn-primary">
            <i class="fas fa-plus"></i> طلب جديد
        </a>
    </div>
    
    <!-- External Orders Assistance Alerts -->
    @php
        $externalOrdersNeedingAssistance = $activeOrders->where('is_external_order', true)->where('needs_assistance', true);
    @endphp
    
    @if($externalOrdersNeedingAssistance->count() > 0)
    <div class="alert alert-warning mb-4">
        <h5><i class="fas fa-bell"></i> طلبات خارجية تحتاج للمساعدة</h5>
        <div class="row mt-3">
            @foreach($externalOrdersNeedingAssistance as $order)
            <div class="col-md-4 mb-2">
                <div class="card bg-warning text-dark">
                    <div class="card-body">
                        <h5 class="card-title">طلب خارجي #{{ $order->id }}</h5>
                        <p class="card-text">رقم السيارة: <strong>{{ $order->car_number }}</strong></p>
                        <p class="card-text"><small>طلب المساعدة منذ: {{ \Carbon\Carbon::parse($order->assistance_requested_at)->diffForHumans() }}</small></p>
                        <div class="d-flex justify-content-between">
                            <a href="{{ route('orders.show', $order) }}" class="btn btn-sm btn-info">
                                <i class="fas fa-eye"></i> عرض التفاصيل
                            </a>
                            <button class="btn btn-sm btn-success mark-assistance-complete" data-order-id="{{ $order->id }}">
                                <i class="fas fa-check"></i> تمت المساعدة
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
    @endif
    
    <div class="row">
        <!-- Tables Section -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">حالة الطاولات</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        @foreach($tables as $table)
                            <div class="col-md-4 mb-3">
                                <div class="card {{ $table->status == 'available' ? 'bg-success text-white' : ($table->status == 'occupied' ? 'bg-danger text-white' : 'bg-warning text-dark') }}">
                                    <div class="card-body text-center">
                                        <h5 class="card-title">{{ $table->name }}</h5>
                                        <p class="card-text">
                                            <small>
                                                @switch($table->status)
                                                    @case('available')
                                                        متاح
                                                        @break
                                                    @case('occupied')
                                                        مشغول
                                                        @break
                                                    @case('reserved')
                                                        محجوز
                                                        @break
                                                @endswitch
                                            </small>
                                        </p>
                                        @if($table->status == 'occupied')
                                            @php
                                                $tableOrder = $activeOrders->where('table_id', $table->id)->first();
                                            @endphp
                                            @if($tableOrder && $tableOrder->payment_status == 'pending')
                                                <p class="card-text text-warning">
                                                    <small><strong>غير مدفوعه</strong></small>
                                                </p>
                                            @else
                                                <p class="card-text text-success">
                                                    <small><strong>متاحة</strong></small>
                                                </p>
                                                <form action="{{ route('tables.make-available', $table->id) }}" method="POST" style="display: inline;">
                                                    @csrf
                                                    <button type="submit" class="btn btn-sm btn-success">
                                                        <i class="fas fa-check-circle"></i> تحويل لمتاحة
                                                    </button>
                                                </form>
                                            @endif
                                        @endif
                                        <div class="btn-group">
                                            @if($table->status == 'occupied')
                                                @php
                                                    $tableOrder = $activeOrders->where('table_id', $table->id)->first();
                                                @endphp
                                                @if($tableOrder)
                                                    <a href="{{ route('orders.show', $tableOrder) }}" class="btn btn-sm btn-light">
                                                        <i class="fas fa-eye"></i> عرض الطلب
                                                    </a>
                                                @endif
                                            @elseif($table->status == 'available')
                                                <a href="{{ route('orders.create', ['table_id' => $table->id]) }}" class="btn btn-sm btn-light">
                                                    <i class="fas fa-plus"></i> طلب جديد
                                                </a>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Active Orders Section -->
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">الطلبات النشطة</h5>
                </div>
                <div class="card-body">
                    <div class="accordion" id="activeOrdersAccordion">
                        @foreach($activeOrders as $order)
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="heading{{ $order->id }}">
                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ $order->id }}" aria-expanded="false" aria-controls="collapse{{ $order->id }}">
                                        <div class="d-flex justify-content-between align-items-center w-100">
                                            <span>{{ $order->table ? 'طاولة: ' . $order->table->name : ($order->is_external_order ? 'طلب خارجي ' . ($order->car_number ? '(سيارة: ' . $order->car_number . ')' : '') : '') }}</span>
                                            <span>
                                                <span class="badge bg-primary">{{ $order->items->count() }} منتج</span>
                                                <span class="badge bg-success">{{ number_format($order->final_amount, 2) }}</span>
                                            </span>
                                        </div>
                                    </button>
                                </h2>
                                <div id="collapse{{ $order->id }}" class="accordion-collapse collapse" aria-labelledby="heading{{ $order->id }}" data-bs-parent="#activeOrdersAccordion">
                                    <div class="accordion-body">
                                        <div class="mb-3">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <h6 class="mb-0">المنتجات:</h6>
                                                @php
                                                    $hasReadyItems = $order->items->contains('status', 'ready');
                                                @endphp
                                                
                                                @if($hasReadyItems)
                                                    <button class="btn btn-success btn-sm mark-all-served" data-order-id="{{ $order->id }}">
                                                        <i class="fas fa-check-double"></i> تقديم الكل
                                                    </button>
                                                @endif
                                            </div>
                                            <ul class="list-group">
                                                @foreach($order->items as $item)
                                                    <li class="list-group-item d-flex justify-content-between align-items-center">
                                                        <div>
                                                            <span class="fw-bold">{{ $item->product->name }}</span>
                                                            <span class="text-muted"> × {{ $item->quantity }}</span>
                                                            @if($item->notes)
                                                                <br><small class="text-muted">{{ $item->notes }}</small>
                                                            @endif
                                                        </div>
                                                        <div>
                                                            <span class="badge 
                                                                @switch($item->status)
                                                                    @case('pending')
                                                                        bg-secondary
                                                                        @break
                                                                    @case('preparing')
                                                                        bg-warning text-dark
                                                                        @break
                                                                    @case('ready')
                                                                        bg-success
                                                                        @break
                                                                    @case('served')
                                                                        bg-info
                                                                        @break
                                                                    @case('cancelled')
                                                                        bg-danger
                                                                        @break
                                                                @endswitch
                                                            ">
                                                                @switch($item->status)
                                                                    @case('pending')
                                                                        قيد الانتظار
                                                                        @break
                                                                    @case('preparing')
                                                                        قيد التحضير
                                                                        @break
                                                                    @case('ready')
                                                                        جاهز
                                                                        @break
                                                                    @case('served')
                                                                        تم التقديم
                                                                        @break
                                                                    @case('cancelled')
                                                                        ملغي
                                                                        @break
                                                                @endswitch
                                                            </span>
                                                            @if($item->status == 'ready')
                                                                <button class="btn btn-sm btn-success mark-served" data-item-id="{{ $item->id }}">
                                                                    <i class="fas fa-check"></i> تم التقديم
                                                                </button>
                                                            @endif
                                                        </div>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <a href="{{ route('orders.show', $order) }}" class="btn btn-info">
                                                <i class="fas fa-eye"></i> عرض التفاصيل
                                            </a>
                                            <a href="{{ route('orders.edit', $order) }}" class="btn btn-warning">
                                                <i class="fas fa-plus-circle"></i> إضافة منتجات
                                            </a>
                                            <a href="{{ route('payments.create', $order) }}" class="btn btn-success">
                                                <i class="fas fa-money-bill-wave"></i> دفع
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(document).ready(function() {
        // Mark item as served
        $('.mark-served').click(function() {
            const itemId = $(this).data('item-id');
            
            $.ajax({
                url: `{{ url('/') }}/order-items/${itemId}/status`,
                type: 'POST',
                data: {
                    status: 'served',
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    }
                },
                error: function(error) {
                    console.error('Error updating item status:', error);
                    alert('حدث خطأ أثناء تحديث حالة المنتج');
                }
            });
        });
        
        // Mark all ready items as served
        $('.mark-all-served').click(function() {
            const orderId = $(this).data('order-id');
            
            $.ajax({
                url: `{{ url('/') }}/orders/${orderId}/mark-all-ready-as-served`,
                type: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    }
                },
                error: function(error) {
                    console.error('Error marking all items as served:', error);
                    alert('حدث خطأ أثناء تحديث حالة جميع المنتجات');
                }
            });
        });
        
        // Make table available
        $('.make-table-available').click(function() {
            const tableId = $(this).data('table-id');
            const token = $('meta[name="csrf-token"]').attr('content');
            
            $.ajax({
                url: `{{ url('/coffee/public/tables') }}/${tableId}/make-available`,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: {
                    _token: token
                },
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    }
                },
                error: function(error) {
                    console.error('Error making table available:', error);
                    alert('حدث خطأ أثناء تحويل الطاولة إلى متاحة');
                }
            });
        });
        
        // Mark external order assistance as complete
        $('.mark-assistance-complete').click(function() {
            const orderId = $(this).data('order-id');
            const token = $('meta[name="csrf-token"]').attr('content');
            const button = $(this);
            
            button.html('<i class="fas fa-spinner fa-spin"></i> جاري...');
            button.prop('disabled', true);
            
            $.ajax({
                url: `{{ url('/') }}/orders/${orderId}/mark-assistance-complete`,
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': token
                },
                data: {
                    _token: token
                },
                success: function(response) {
                    if (response.success) {
                        button.closest('.col-md-4').fadeOut(500, function() {
                            $(this).remove();
                            
                            // If no more assistance needed, hide the entire section
                            if ($('.mark-assistance-complete').length === 0) {
                                $('.alert-warning').fadeOut(500);
                            }
                        });
                    }
                },
                error: function(error) {
                    console.error('Error marking assistance complete:', error);
                    alert('حدث خطأ أثناء تحديث حالة المساعدة');
                    button.html('<i class="fas fa-check"></i> تمت المساعدة');
                    button.prop('disabled', false);
                }
            });
        });
    });
</script>
@endpush