@extends('layouts.front-layout')
@section('title') Order Status @endsection

@section('content')

    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{asset('upload/images/innerbnr1.png')}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>ORDER STATUS</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->



    <section class="order-status padd-y">
        <div class="container">
            <div class="order-status-title text-center mb-4">
                <h3 class="secHeading">My Orders</h3>
            </div>
            <div class="row">
                <div class="col-lg-3">
                    <div class="order-status-nav nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist"
                        aria-orientation="vertical">
                        <button class="nav-link" id="v-pills-dashboard-tab" data-toggle="pill"
                            data-target="#v-pills-dashboard" type="button" role="tab" aria-controls="v-pills-dashboard"
                            aria-selected="true">Dashboard</button>
                        <button class="nav-link active" id="v-pills-orders-tab" data-toggle="pill"
                            data-target="#v-pills-orders" type="button" role="tab" aria-controls="v-pills-orders"
                            aria-selected="false">Orders</button>
                        <button class="nav-link" id="v-pills-address-tab" data-toggle="pill"
                            data-target="#v-pills-address" type="button" role="tab" aria-controls="v-pills-address"
                            aria-selected="false">Address</button>
                        <button class="nav-link" id="v-pills-account-details-tab" data-toggle="pill"
                            data-target="#v-pills-account-details" type="button" role="tab"
                            aria-controls="v-pills-account-details" aria-selected="false">Account Details</button>
                        <button class="nav-link" id="v-pills-wishlist-tab" data-toggle="pill"
                            data-target="#v-pills-wishlist" type="button" role="tab" aria-controls="v-pills-wishlist"
                            aria-selected="false">Wishlist</button>
                        <button class="nav-link" id="v-pills-logout-tab" data-toggle="pill"
                            data-target="#v-pills-logout" type="button" role="tab" aria-controls="v-pills-logout"
                            aria-selected="false">Logout</button>
                    </div>
                </div>
                <div class="col-lg-9">
                    <div class="order-status-tab tab-content" id="v-pills-tabContent">
                        <div class="tab-pane fade" id="v-pills-dashboard" role="tabpanel"
                            aria-labelledby="v-pills-dashboard-tab">
                            <div class="order-status-table table-responsive-lg">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Order</th>
                                            <th>Date</th>
                                            <th>Status</th>
                                            <th>Total</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>#123</th>
                                            <td>August 1, 2024</td>
                                            <td>On hold</td>
                                            <td>$200.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#345</th>
                                            <td>August 2, 2024</td>
                                            <td>On hold</td>
                                            <td>$300.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#567</th>
                                            <td>August 3, 2024</td>
                                            <td>On hold</td>
                                            <td>$400.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade show active" id="v-pills-orders" role="tabpanel"
                            aria-labelledby="v-pills-orders-tab">
                            <div class="order-status-table table-responsive-lg">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Order</th>
                                            <th>Date</th>
                                            <th>Status</th>
                                            <th>Total</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>#123</th>
                                            <td>August 1, 2024</td>
                                            <td>On hold</td>
                                            <td>$200.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#345</th>
                                            <td>August 2, 2024</td>
                                            <td>On hold</td>
                                            <td>$300.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#567</th>
                                            <td>August 3, 2024</td>
                                            <td>On hold</td>
                                            <td>$400.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="v-pills-address" role="tabpanel"
                            aria-labelledby="v-pills-address-tab">
                            <div class="order-status-table table-responsive-lg">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Order</th>
                                            <th>Date</th>
                                            <th>Status</th>
                                            <th>Total</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>#123</th>
                                            <td>August 1, 2024</td>
                                            <td>On hold</td>
                                            <td>$200.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#345</th>
                                            <td>August 2, 2024</td>
                                            <td>On hold</td>
                                            <td>$300.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#567</th>
                                            <td>August 3, 2024</td>
                                            <td>On hold</td>
                                            <td>$400.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="v-pills-account-details" role="tabpanel"
                            aria-labelledby="v-pills-account-details-tab">
                            <div class="order-status-table table-responsive-lg">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Order</th>
                                            <th>Date</th>
                                            <th>Status</th>
                                            <th>Total</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>#123</th>
                                            <td>August 1, 2024</td>
                                            <td>On hold</td>
                                            <td>$200.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#345</th>
                                            <td>August 2, 2024</td>
                                            <td>On hold</td>
                                            <td>$300.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#567</th>
                                            <td>August 3, 2024</td>
                                            <td>On hold</td>
                                            <td>$400.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="v-pills-wishlist" role="tabpanel"
                            aria-labelledby="v-pills-wishlist-tab">
                            <div class="order-status-table table-responsive-lg">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Order</th>
                                            <th>Date</th>
                                            <th>Status</th>
                                            <th>Total</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>#123</th>
                                            <td>August 1, 2024</td>
                                            <td>On hold</td>
                                            <td>$200.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#345</th>
                                            <td>August 2, 2024</td>
                                            <td>On hold</td>
                                            <td>$300.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#567</th>
                                            <td>August 3, 2024</td>
                                            <td>On hold</td>
                                            <td>$400.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="v-pills-logout" role="tabpanel"
                            aria-labelledby="v-pills-logout-tab">
                            <div class="order-status-table table-responsive-lg">
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>Order</th>
                                            <th>Date</th>
                                            <th>Status</th>
                                            <th>Total</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <th>#123</th>
                                            <td>August 1, 2024</td>
                                            <td>On hold</td>
                                            <td>$200.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#345</th>
                                            <td>August 2, 2024</td>
                                            <td>On hold</td>
                                            <td>$300.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                        <tr>
                                            <th>#567</th>
                                            <td>August 3, 2024</td>
                                            <td>On hold</td>
                                            <td>$400.0 for 1 items</td>
                                            <td><button type="button" class="themeBtn border-0">View</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection