@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <h1 class="mb-4">لوحة التحكم</h1>
    
    <!-- Stats Cards -->
    <div class="row">
        <div class="col-md-3">
            <div class="card mb-4 bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title">طلبات اليوم</h6>
                            <h2 class="mb-0">{{ $todayOrdersCount }}</h2>
                        </div>
                        <div>
                            <i class="fas fa-shopping-cart fa-3x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card mb-4 bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title">مبيعات اليوم</h6>
                            <h2 class="mb-0">{{ number_format($todaySales, 2) }}</h2>
                        </div>
                        <div>
                            <i class="fas fa-money-bill-wave fa-3x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card mb-4 bg-warning text-dark">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title">الطاولات المشغولة</h6>
                            <h2 class="mb-0">{{ $occupiedTablesCount }} / {{ $totalTablesCount }}</h2>
                        </div>
                        <div>
                            <i class="fas fa-chair fa-3x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-3">
            <div class="card mb-4 bg-danger text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="card-title">طلبات قيد الانتظار</h6>
                            <h2 class="mb-0">{{ $pendingOrdersCount }}</h2>
                        </div>
                        <div>
                            <i class="fas fa-hourglass-half fa-3x opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- Weekly Sales Chart -->
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title">مبيعات الأسبوع</h5>
                </div>
                <div class="card-body">
                    <canvas id="weeklySalesChart" height="300"></canvas>
                </div>
            </div>
        </div>
        
        <!-- Top Products -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title">أكثر المنتجات مبيعاً</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group">
                        @foreach($topProducts as $product)
                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="fw-bold">{{ $product->name }}</span>
                                    <small class="d-block text-muted">{{ $product->category->name }}</small>
                                </div>
                                <span class="badge bg-primary rounded-pill">{{ $product->total_quantity }}</span>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Recent Orders -->
    <div class="card mb-4">
        <div class="card-header">
            <h5 class="card-title">أحدث الطلبات</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>الطاولة</th>
                            <th>العميل</th>
                            <th>المبلغ</th>
                            <th>الحالة</th>
                            <th>الدفع</th>
                            <th>التاريخ</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($recentOrders as $order)
                            <tr>
                                <td>{{ $order->id }}</td>
                                <td>{{ $order->table->name }}</td>
                                <td>{{ $order->customer_name ?? 'غير محدد' }}</td>
                                <td>{{ number_format($order->final_amount, 2) }}</td>
                                <td>
                                    <span class="status-badge status-{{ $order->status }}">
                                        @switch($order->status)
                                            @case('pending')
                                                قيد الانتظار
                                                @break
                                            @case('preparing')
                                                قيد التحضير
                                                @break
                                            @case('completed')
                                                مكتمل
                                                @break
                                            @case('cancelled')
                                                ملغي
                                                @break
                                        @endswitch
                                    </span>
                                </td>
                                <td>
                                    <span class="status-badge {{ $order->payment_status == 'paid' ? 'status-completed' : ($order->payment_status == 'partially_paid' ? 'status-preparing' : 'status-pending') }}">
                                        @switch($order->payment_status)
                                            @case('pending')
                                                غير مدفوع
                                                @break
                                            @case('partially_paid')
                                                مدفوع جزئياً
                                                @break
                                            @case('paid')
                                                مدفوع
                                                @break
                                        @endswitch
                                    </span>
                                </td>
                                <td>{{ $order->created_at->format('Y-m-d H:i') }}</td>
                                <td>
                                    <a href="{{ route('orders.show', $order) }}" class="btn btn-sm btn-info">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    $(document).ready(function() {
        // Weekly Sales Chart
        const ctx = document.getElementById('weeklySalesChart').getContext('2d');
        const weeklySalesChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {!! json_encode($weeklySalesLabels) !!},
                datasets: [{
                    label: 'المبيعات',
                    data: {!! json_encode($weeklySalesData) !!},
                    backgroundColor: 'rgba(54, 162, 235, 0.5)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return value.toFixed(2);
                            }
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    });
</script>
@endpush