@extends('admin.layouts.app')

@section('title', __('Orders Dashboard'))

@section('breadcrumb')
    <li class="breadcrumb-item active">{{ __('Orders') }}</li>
@endsection

@section('page-header')
    <div>
        <h1 class="h3 mb-0">{{ __('Orders Dashboard') }}</h1>
        <p class="text-muted mb-0">{{ __('Monitor and manage your orders') }}</p>
    </div>
    <div>
        <a href="{{ route('admin.orders.list') }}" class="btn btn-primary me-2">
            <i class="fas fa-list me-2"></i>
            {{ __('View All Orders') }}
        </a>
        <a href="{{ route('admin.orders.export') }}" class="btn btn-outline-secondary">
            <i class="fas fa-download me-2"></i>
            {{ __('Export Orders') }}
        </a>
    </div>
@endsection

@section('content')
    <!-- Statistics Cards -->
    <div class="row mb-4">
        <!-- Today's Stats -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card border-start border-primary border-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="stats-icon bg-primary me-3">
                            <i class="fas fa-calendar-day text-white"></i>
                        </div>
                        <div>
                            <div class="stats-number">{{ $stats['today_orders'] }}</div>
                            <div class="stats-label">{{ __('Today\'s Orders') }}</div>
                            <div class="stats-sublabel text-success">
                                {{ number_format($stats['today_revenue'], 2) }} {{ __('SAR') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- This Week's Stats -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card border-start border-success border-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="stats-icon bg-success me-3">
                            <i class="fas fa-calendar-week text-white"></i>
                        </div>
                        <div>
                            <div class="stats-number">{{ $stats['week_orders'] }}</div>
                            <div class="stats-label">{{ __('This Week') }}</div>
                            <div class="stats-sublabel text-success">
                                {{ number_format($stats['week_revenue'], 2) }} {{ __('SAR') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- This Month's Stats -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card border-start border-info border-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="stats-icon bg-info me-3">
                            <i class="fas fa-calendar-alt text-white"></i>
                        </div>
                        <div>
                            <div class="stats-number">{{ $stats['month_orders'] }}</div>
                            <div class="stats-label">{{ __('This Month') }}</div>
                            <div class="stats-sublabel text-success">
                                {{ number_format($stats['month_revenue'], 2) }} {{ __('SAR') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pending Orders -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card stats-card border-start border-warning border-4">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="stats-icon bg-warning me-3">
                            <i class="fas fa-clock text-white"></i>
                        </div>
                        <div>
                            <div class="stats-number">{{ $stats['pending_orders'] }}</div>
                            <div class="stats-label">{{ __('Pending Orders') }}</div>
                            <div class="stats-sublabel text-muted">
                                {{ __('Need attention') }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Status Overview -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <!-- Orders Chart -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{{ __('Orders Overview (Last 30 Days)') }}</h5>
                </div>
                <div class="card-body">
                    <canvas id="ordersChart" height="100"></canvas>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <!-- Status Distribution -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{{ __('Order Status') }}</h5>
                </div>
                <div class="card-body">
                    <div class="status-stats">
                        <div class="status-item d-flex justify-content-between align-items-center mb-3">
                            <div class="d-flex align-items-center">
                                <span class="status-dot bg-warning me-2"></span>
                                <span>{{ __('Pending') }}</span>
                            </div>
                            <span class="badge bg-warning">{{ $stats['pending_orders'] }}</span>
                        </div>

                        <div class="status-item d-flex justify-content-between align-items-center mb-3">
                            <div class="d-flex align-items-center">
                                <span class="status-dot bg-info me-2"></span>
                                <span>{{ __('Processing') }}</span>
                            </div>
                            <span class="badge bg-info">{{ $stats['processing_orders'] }}</span>
                        </div>

                        <div class="status-item d-flex justify-content-between align-items-center mb-3">
                            <div class="d-flex align-items-center">
                                <span class="status-dot bg-primary me-2"></span>
                                <span>{{ __('Shipped') }}</span>
                            </div>
                            <span class="badge bg-primary">{{ $stats['shipped_orders'] }}</span>
                        </div>

                        <div class="status-item d-flex justify-content-between align-items-center mb-3">
                            <div class="d-flex align-items-center">
                                <span class="status-dot bg-success me-2"></span>
                                <span>{{ __('Delivered') }}</span>
                            </div>
                            <span class="badge bg-success">{{ $stats['delivered_orders'] }}</span>
                        </div>
                    </div>

                    <hr>

                    <!-- Quick Actions -->
                    <div class="quick-actions">
                        <h6 class="mb-3">{{ __('Quick Actions') }}</h6>
                        <div class="d-grid gap-2">
                            <a href="{{ route('admin.orders.list', ['status' => 'pending']) }}"
                               class="btn btn-outline-warning btn-sm">
                                {{ __('View Pending Orders') }}
                            </a>
                            <a href="{{ route('admin.orders.list', ['status' => 'processing']) }}"
                               class="btn btn-outline-info btn-sm">
                                {{ __('View Processing Orders') }}
                            </a>
                            <a href="{{ route('admin.orders.list', ['status' => 'shipped']) }}"
                               class="btn btn-outline-primary btn-sm">
                                {{ __('View Shipped Orders') }}
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Orders -->
    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{ __('Recent Orders') }}</h5>
                <a href="{{ route('admin.orders.list') }}" class="btn btn-sm btn-outline-primary">
                    {{ __('View All') }}
                </a>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead class="bg-light">
                    <tr>
                        <th>{{ __('Order #') }}</th>
                        <th>{{ __('Customer') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th>{{ __('Payment') }}</th>
                        <th>{{ __('Total') }}</th>
                        <th>{{ __('Date') }}</th>
                        <th>{{ __('Actions') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse($recentOrders as $order)
                        <tr>
                            <td>
                                <a href="{{ route('admin.orders.show', $order) }}"
                                   class="fw-bold text-decoration-none">
                                    {{ $order->order_number }}
                                </a>
                            </td>
                            <td>
                                <div>
                                    <div class="fw-medium">{{ $order->customer_name }}</div>
                                    <small class="text-muted">{{ $order->customer_email }}</small>
                                </div>
                            </td>
                            <td>{!! $order->status_badge !!}</td>
                            <td>
                                @switch($order->payment_status)
                                    @case('paid')
                                        <span class="badge bg-success">{{ __('Paid') }}</span>
                                        @break
                                    @case('pending')
                                        <span class="badge bg-warning">{{ __('Pending') }}</span>
                                        @break
                                    @case('failed')
                                        <span class="badge bg-danger">{{ __('Failed') }}</span>
                                        @break
                                    @default
                                        <span class="badge bg-secondary">{{ ucfirst($order->payment_status) }}</span>
                                @endswitch
                            </td>
                            <td>
                                <strong>{{ $order->formatted_total }}</strong>
                                <br>
                                <small class="text-muted">{{ $order->items->count() }} {{ __('items') }}</small>
                            </td>
                            <td>
                                <div>{{ $order->created_at->format('M j, Y') }}</div>
                                <small class="text-muted">{{ $order->created_at->format('g:i A') }}</small>
                            </td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ route('admin.orders.show', $order) }}"
                                       class="btn btn-sm btn-outline-primary"
                                       title="{{ __('View Details') }}">
                                        <i class="fas fa-eye"></i>
                                    </a>

                                    @if($order->status === 'pending')
                                        <button type="button"
                                                class="btn btn-sm btn-outline-success update-status-btn"
                                                data-order-id="{{ $order->id }}"
                                                data-status="processing"
                                                title="{{ __('Mark as Processing') }}">
                                            <i class="fas fa-play"></i>
                                        </button>
                                    @endif

                                    @if($order->canBeShipped())
                                        <button type="button"
                                                class="btn btn-sm btn-outline-info update-status-btn"
                                                data-order-id="{{ $order->id }}"
                                                data-status="shipped"
                                                title="{{ __('Mark as Shipped') }}">
                                            <i class="fas fa-shipping-fast"></i>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="text-center py-4">
                                <i class="fas fa-inbox fa-2x text-muted mb-2"></i>
                                <p class="text-muted mb-0">{{ __('No orders found') }}</p>
                            </td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .stats-card {
            border: none;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.2s ease;
        }

        .stats-card:hover {
            transform: translateY(-2px);
        }

        .stats-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .stats-number {
            font-size: 2rem;
            font-weight: bold;
            color: #2d3748;
            line-height: 1;
        }

        .stats-label {
            font-size: 0.875rem;
            color: #718096;
            margin-bottom: 2px;
        }

        .stats-sublabel {
            font-size: 0.75rem;
            font-weight: 500;
        }

        .status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            display: inline-block;
        }

        .status-item {
            padding: 0.5rem 0;
            border-bottom: 1px solid #f1f3f4;
        }

        .status-item:last-child {
            border-bottom: none;
        }

        .table th {
            font-weight: 600;
            color: #4a5568;
            border-bottom: 2px solid #e2e8f0;
        }

        .table td {
            vertical-align: middle;
        }

        .quick-actions .btn {
            font-size: 0.8rem;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .stats-number {
                font-size: 1.5rem;
            }

            .btn-group .btn {
                padding: 0.25rem 0.5rem;
                font-size: 0.75rem;
            }
        }
    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        $(document).ready(function() {
            // Initialize Orders Chart
            const ctx = document.getElementById('ordersChart').getContext('2d');
            const chartData = @json($chartData);

            // Prepare data for Chart.js
            const labels = chartData.orders_per_day.map(item => {
                const date = new Date(item.date);
                return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
            });

            const orderCounts = chartData.orders_per_day.map(item => item.count);
            const revenues = chartData.orders_per_day.map(item => parseFloat(item.revenue));

            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: labels,
                    datasets: [{
                        label: '{{ __("Orders") }}',
                        data: orderCounts,
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        tension: 0.4,
                        yAxisID: 'y'
                    }, {
                        label: '{{ __("Revenue (SAR)") }}',
                        data: revenues,
                        borderColor: '#10b981',
                        backgroundColor: 'rgba(16, 185, 129, 0.1)',
                        tension: 0.4,
                        yAxisID: 'y1'
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    scales: {
                        x: {
                            display: true,
                            title: {
                                display: true,
                                text: '{{ __("Date") }}'
                            }
                        },
                        y: {
                            type: 'linear',
                            display: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: '{{ __("Orders") }}'
                            },
                            beginAtZero: true
                        },
                        y1: {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            title: {
                                display: true,
                                text: '{{ __("Revenue (SAR)") }}'
                            },
                            beginAtZero: true,
                            grid: {
                                drawOnChartArea: false,
                            },
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            position: 'top'
                        },
                        tooltip: {
                            callbacks: {
                                afterLabel: function(context) {
                                    if (context.datasetIndex === 1) {
                                        return 'SAR ' + context.parsed.y.toFixed(2);
                                    }
                                }
                            }
                        }
                    }
                }
            });

            // Handle quick status updates
            $('.update-status-btn').on('click', function() {
                const orderId = $(this).data('order-id');
                const status = $(this).data('status');
                const button = $(this);

                if (confirm('{{ __("Are you sure you want to update this order status?") }}')) {
                    button.prop('disabled', true);

                    $.ajax({
                        url: `/admin/orders/${orderId}/status`,
                        method: 'PUT',
                        data: {
                            status: status,
                            _token: '{{ csrf_token() }}'
                        },
                        success: function(response) {
                            if (response.success) {
                                location.reload();
                            } else {
                                alert(response.message);
                            }
                        },
                        error: function() {
                            alert('{{ __("An error occurred. Please try again.") }}');
                        },
                        complete: function() {
                            button.prop('disabled', false);
                        }
                    });
                }
            });
        });
    </script>
@endpush