@extends('front.layouts.master')
@section('title', isset($title) ? $title : 'Home')
@section('description', isset($description) ? $description : '')
@section('keywords', isset($keywords) ? $keywords : '')
@section('content')
<div class="breadcrumb-area">
  <div class="container">
    <div class="breadcrumb-wrap text-center">
      <h2 class="page-title">{{__('Track Order')}}</h2>
      <ul class="breadcrumb-pages">
        <li class="page-item"><a class="page-item-link" href="{{route('front')}}">{{__('Home')}}</a></li>
        <li class="page-item">{{__('Track Order')}}</li>
      </ul>
    </div>
  </div>
</div>
<div class="profile-page-area section">
  <div class="container">
    <div class="row">
      <div class="col-xl-3 col-lg-4">
        @include('front.layouts.include.user_profile_sidebar', ['menu' => 'order'])
      </div>
      <div class="col-xl-9 col-lg-8">
        <div class="gray-box">
          <h3 class="order-tit">Track Order</h3>
          <div class="order-status-box">
            <div class="points-box-container d-flex align-items-center justify-content-center">
              <div class="points-box position-relative d-flex align-items-center">
                <span class="order-point"></span>
                <div class="order-point-tit">Processing</div>
              </div>
              <div class="points-box position-relative d-flex align-items-center">
                <span class="order-point"></span>
                <div class="order-point-tit">cancel</div>
              </div>
              <div class="points-box position-relative d-flex align-items-center">
                <span class="order-point"></span>
                <div class="order-point-tit">Shipped</div>
              </div>
              <div class="points-box position-relative d-flex align-items-center">
                <span class="order-point"></span>
                <div class="order-point-tit">Delivered</div>
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table mb-0 track-order-table">
              <thead>
                <tr>
                  <th scope="col">Title</th>
                  <th scope="col">Item</th>
                  <th scope="col">Price</th>
                  <th scope="col">Qty</th>
                  <th scope="col">Subtotal</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Plaid Cotton Shirt</td>
                  <td>
                    <img src="{{ asset('frontend/assets/images/order-img.png') }}" alt="order img" class="order-img">
                  </td>
                  <td>$ 90.00</td>
                  <td class="updated-order position-relative">
                    <span class="updated-order-txt position-relative me-3">2</span>
                    <span>1</span>
                  </td>
                  <td class="updated-order position-relative">
                    <span class="updated-order-txt position-relative me-3">$ 180.00</span>
                    <span>$ 90.00</span>
                  </td>
                </tr>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td class="order-table-tit">Subtotal</td>
                  <td>$ 90.00</td>
                </tr>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td class="order-table-tit">Tax</td>
                  <td>$ 0.00</td>
                </tr>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td class="order-table-tit">Delivery Charge</td>
                  <td>$ 0.00</td>
                </tr>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td class="order-table-tit">Discount (-)</td>
                  <td>$ 0.00</td>
                </tr>
                <tr>
                  <td></td>
                  <td></td>
                  <td></td>
                  <td class="order-table-tit">Grand Total</td>
                  <td>$ 90.00</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection