@extends('page.account.layout')
@section('account.content')
<div class="col-12 col-md-9">
    <!-- recent activity section -->
    <div class="d-flex flex-column theme-border-radius theme-bg-white theme-box-shadow mb-4">
        <!-- title section -->
        <div class="d-flex flex-column p-3">
            <span class="fw-bold mb-2">Your Orders With Us</span>
            <p class="font-small theme-text-accent-one">We are yet to receive your first order</p>
        </div>
        <!-- dashboard section -->
        <div class="p-3">
            <div class="row g-0">
                <div class="col-12 col-lg-12 mb-3">
                    <div class="border px-3">
                        <div class="row g-0 align-items-center">
                            <div class="col-12 col-md-6 col-lg-2">
                                <img src="assets/images/product/baring.jpg" alt="Parts" class="img-fluid">
                            </div>
                            <div class="col-12 col-md-6 col-lg-6">
                                <p class="mb-0 font-small mb-3">Vestibulum ante ipsum primis in.</p>
                                <span class="text-muted font-small">Order No. : 123456</span>
                            </div>
                            <div class="col-12 col-md-12 col-lg-4 text-lg-end text-start text-md-start">
                                <div class="d-flex flex-column font-small">
                                    <span class="theme-text-primary mb-3">$250.00</span>
                                    <span class="text-muted font-small">Status: <span class="text-success">Order
                                            Placed</span>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- repetable -->
            </div>
        </div>
        <!-- track proces -->
        <div class="col-lg-8 offset-lg-2 d-flex p-3 mb-5">
            <div class="horizontal timeline">
                <div class="steps">
                    <div class="step">
                        <span>To be prepared</span>
                    </div>
                    <div class="step">
                        <span>Sent to logistics</span>
                    </div>
                    <div class="step current">
                        <span>In preparation</span>
                    </div>
                    <div class="step">
                        <span>Shipped</span>
                    </div>
                    <div class="step">
                        <span>Delivered</span>
                    </div>
                </div>

                <div class="line" u-load="this.style.width='50%'"></div>
            </div>
        </div>
        <div class="d-flex flex-column p-3">
            <span class="fw-bold mb-3">Delivery expected by Tomorrow, Dec 22</span>
            <a href="#" class="font-small theme-text-accent-one mb-3"><i class="bi bi-x-circle-fill me-2"></i>Cancel
                item</a>
            <a href="#" class="font-small"><i class="bi bi-info-circle-fill me-2"></i>Need Help?</a>
        </div>
    </div>
</div>
@endsection