@extends('customer.dashboard.layout')

@section('title', 'My Orders')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <h2 class="mb-1">My Orders</h2>
        <p class="text-muted">View and track all your orders</p>
    </div>
</div>

@if($orders->count() > 0)
<div class="content-card">
    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Order #</th>
                    <th>Date</th>
                    <th>Items</th>
                    <th>Total</th>
                    <th>Payment Status</th>
                    <th>Order Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($orders as $order)
                <tr>
                    <td>
                        <strong>{{ $order->order_number }}</strong>
                    </td>
                    <td>{{ $order->created_at->format('M d, Y') }}</td>
                    <td>{{ $order->orderItems->count() }} item(s)</td>
                    <td><strong>RM {{ number_format($order->total_amount, 2) }}</strong></td>
                    <td>
                        <span class="badge bg-{{ $order->payment_status === 'paid' ? 'success' : ($order->payment_status === 'pending' ? 'warning' : 'danger') }}">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                    </td>
                    <td>
                        <span class="badge bg-{{ $order->status === 'completed' ? 'success' : ($order->status === 'pending' ? 'warning' : ($order->status === 'processing' ? 'info' : 'secondary')) }}">
                            {{ ucfirst($order->status) }}
                        </span>
                    </td>
                    <td>
                        <a href="{{ route('customer.orders.show', [$subdomain, $order->id]) }}"
                           class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-eye"></i>
                        </a>
                        @if($order->payment_status === 'paid')
                        <a href="{{ route('customer.orders.invoice', [$subdomain, $order->id]) }}"
                           class="btn btn-sm btn-outline-secondary"
                           target="_blank">
                            <i class="bi bi-download"></i>
                        </a>
                        @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <div class="mt-4">
        {{ $orders->links() }}
    </div>
</div>
@else
<div class="content-card text-center py-5">
    <i class="bi bi-bag text-muted" style="font-size: 64px;"></i>
    <h3 class="mt-4 mb-2">No Orders Yet</h3>
    <p class="text-muted mb-4">You haven't placed any orders yet</p>
    <a href="/products" class="btn btn-primary">
        <i class="bi bi-shop"></i> Start Shopping
    </a>
</div>
@endif
@endsection