@extends('layouts.main')

@section('content')
<div class="main-header" style="margin-bottom: 2rem;">
    <div>
        <h1 style="font-family: 'Space Grotesk', sans-serif; font-size: 2.2rem; font-weight: 700; color: white; margin-bottom: 0.4rem;">
            Customer Orders
        </h1>
        <p style="color: var(--text-muted); font-size: 0.95rem; margin: 0;">View shopping history for all customers.</p>
    </div>
</div>

<div class="form-section" style="margin-top: 0;">
    <h2>All Shopping Orders</h2>
    
    @if(isset($orders) && count($orders) > 0)
        <div style="overflow-x: auto; margin-top: 1.5rem;">
            <table class="table" style="width: 100%; text-align: left; color: white;">
                <thead>
                    <tr>
                        <th style="padding: 1rem;">Order #</th>
                        <th style="padding: 1rem;">Customer</th>
                        <th style="padding: 1rem;">Product Name</th>
                        <th style="padding: 1rem;">Qty</th>
                        <th style="padding: 1rem;">Price</th>
                        <th style="padding: 1rem;">Status</th>
                        <th style="padding: 1rem;">Order Date</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($orders as $order)
                        <tr>
                            <td style="padding: 1rem; font-weight: 600; color: var(--primary-light);">
                                {{ $order->order_number ?? 'N/A' }}
                            </td>
                            <td style="padding: 1rem;">
                                <div><strong>{{ $order->user_name ?? 'Guest' }}</strong></div>
                                <div style="font-size: 0.85rem; color: var(--text-muted);">{{ $order->user_email ?? '' }}</div>
                                <div style="font-size: 0.85rem; color: var(--text-muted);">{{ $order->user_phone ?? '' }}</div>
                            </td>
                            <td style="padding: 1rem;">{{ $order->product_name ?? 'Unknown Item' }}</td>
                            <td style="padding: 1rem;">{{ $order->qty ?? 1 }}</td>
                            <td style="padding: 1rem; color: #34D399; font-weight: 600;">
                                ₹{{ number_format($order->price ?? 0, 2) }}
                            </td>
                            <td style="padding: 1rem;">
                                @if(strtolower($order->status ?? '') == 'completed' || strtolower($order->status ?? '') == 'success')
                                    <span style="background: rgba(16, 185, 129, 0.15); color: #34D399; padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600;">{{ $order->status }}</span>
                                @else
                                    <span style="background: rgba(245, 158, 11, 0.15); color: #FBBF24; padding: 0.3rem 0.8rem; border-radius: 50px; font-size: 0.8rem; font-weight: 600;">{{ $order->status ?? 'Pending' }}</span>
                                @endif
                            </td>
                            <td style="padding: 1rem; color: var(--text-muted); font-size: 0.9rem;">
                                {{ \Carbon\Carbon::parse($order->created_at ?? ($order->date ?? date('Y-m-d')))->format('d M, Y h:i A') }}
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @else
        <div style="text-align: center; padding: 3rem 1rem;">
            <p style="color: var(--text-muted); font-size: 1.1rem;">No orders have been placed yet.</p>
        </div>
    @endif
</div>
@endsection