@extends('layout')

@section('content')

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

<div id="orders-page-wrapper">
    <div class="orders-container">
        <div class="orders-header">
            <h1>My Orders</h1>
        </div>

        <div class="orders-grid">
            @foreach (range(1, 6) as $index)
                <div class="order-card">
                    <div class="order-meta">
                        <div class="meta-group">
                            <span class="meta-label">Order ID</span>
                            <span class="meta-value">0124554756455</span>
                        </div>
                        <div class="meta-group" style="text-align: right;">
                            <span class="meta-label">Date</span>
                            <span class="meta-value">12.12.2025</span>
                        </div>
                    </div>

                    <div class="order-main-info">
                        <div class="product-count">5 Products</div>
                        <div class="order-price">₹400</div>
                    </div>

                    <div class="order-tracking-row">
                        <div class="tracking-text">
                            <span>K123456789</span>
                            <i class="fa-regular fa-copy copy-icon" title="Copy Code"></i>
                        </div>
                        <a href="#" class="btn-track">Track Order</a>
                    </div>

                    <a href="#" class="btn-view-details">View Details</a>
                </div>
            @endforeach
        </div>
    </div>
</div>

@endsection