@extends('layouts.app')

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

@section('content')
<div class="container py-5">
    <div class="row mb-4">
        <div class="col-md-6">
            <h2 class="fw-bold">My Orders</h2>
            <p class="text-muted">Track and manage your recent purchases</p>
        </div>
    </div>

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4 py-3 text-uppercase small fw-bold text-muted">Order ID</th>
                        <th class="py-3 text-uppercase small fw-bold text-muted">Date</th>
                        <th class="py-3 text-uppercase small fw-bold text-muted">Status</th>
                        <th class="py-3 text-uppercase small fw-bold text-muted">Total</th>
                        <th class="py-3 text-end pe-4 text-uppercase small fw-bold text-muted">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($orders as $order)
                        <tr>
                            <td class="ps-4">
                                <span class="fw-bold text-dark">#{{ $order->order_number }}</span>
                            </td>
                            <td>{{ $order->created_at->format('d M, Y') }}</td>
                            <td>
                                @php
                                    $statusClass = [
                                        'pending' => 'bg-warning text-dark',
                                        'completed' => 'bg-success text-white',
                                        'cancelled' => 'bg-danger text-white'
                                    ][$order->status] ?? 'bg-secondary text-white';
                                @endphp
                                <span class="badge rounded-pill {{ $statusClass }} px-3 py-2 text-capitalize">
                                    {{ $order->status }}
                                </span>
                            </td>
                            <td class="fw-bold text-primary">₹{{ number_format($order->total_amount, 2) }}</td>
                            <td class="text-end pe-4">
                                <a href="{{ route('orders.show', $order->id) }}" class="btn btn-outline-dark btn-sm rounded-pill px-3">
                                    View Details
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                <i class="bi bi-bag-x display-4 d-block mb-3"></i>
                                <h5>No orders found yet</h5>
                                <a href="{{ url('/products') }}" class="btn btn-primary mt-2">Start Shopping</a>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    
    <div class="mt-4">
        {{ $orders->links() }}
    </div>
</div>
@endsection