@extends('dashboards.vendor.index')

@section('content')


    <div class="col-lg-9 layout">
        <h2 class="mainHeadig">Total Orders</h2>
        <div class="profileSetting totalOrder">
            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-all" role="tab"
                       aria-controls="pills-home" aria-selected="true">All Orders!</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-pending" role="tab"
                       aria-controls="pills-profile" aria-selected="false">Orders Pending!</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-completed" role="tab"
                       aria-controls="pills-contact" aria-selected="false">Orders Completed!</a>
                </li>
            </ul>

            <div class="tab-content" id="pills-tabContent">

                <div class="tab-pane fade show active" id="pills-all" role="tabpanel"
                     aria-labelledby="pills-all-tab">
                    <div class="recentTable totalPayment-table tablecard">
                        <div class="table-responsive-lg">
                            <x-order.ListComponent :pageType="'product_orders'" :tab="'all_orders'"/>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade show" id="pills-pending" role="tabpanel"
                     aria-labelledby="pills-pending-tab">
                    <div class="recentTable totalPayment-table tablecard">
                        <div class="table-responsive-lg">
                            <x-order.ListComponent :pageType="'product_orders'" :tab="'pending_orders'"/>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade show" id="pills-completed" role="tabpanel"
                     aria-labelledby="pills-completed-tab">
                    <div class="recentTable totalPayment-table tablecard">
                        <div class="table-responsive-lg">
                            <x-order.ListComponent :pageType="'product_orders'" :tab="'completed_orders'"/>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>



@endsection