<style>
    .badge-nav {
        position: absolute !important;
        /*left : unset !important;*/
        top: 0px !important;
        /* text-transform: uppercase; */
        background: var(--danger) !important;
        color: #fff !important;
    }
</style>

<nav class="nav nav-tabs nav-pillV nav-fill nav-justified navbar-light" role="tablist" id="tablist-bloc-order">

    <button class="nav-link active text-sm-center fs-15"
           href="#"
           id="tab-cart"
           type="button"
           role="tab"
           aria-controls="tab-content-cart"
           aria-selected="true"
           data-toggle="tab"
           data-target="#tab-content-cart">
            <h6 class="m-b-0 fs-13">
                <i class="fa fa-shopping-cart"></i>
                {{__("Cart")}}
            </h6>
            <template x-if="!$store.cart.billing_desk">
                <small class="text-danger fs-8">
                    <span>{{__("Select Billing Desk!")}}</span>
                </small>
            </template>
           <span class="float-right">
                <template x-if="$store.cart.items.length > 0">
                    <span class="badge fs-10 m-l-2 badge-nav" x-text="formatNumber($store.cart.items.length)"></span>
                </template>
           </span>
    </button>

    <button class="nav-link text-left text-sm-center fs-15"
        id="tab-draft"
        type="button"
        role="tab"
        aria-controls="tab-content-draft"
        aria-selected="false"
        data-toggle="tab"
        :disabled="!$store.cart.billing_desk"
        data-target="#tab-content-draft">
        <i class="fa fa-archway"></i>
        {{__("Draft")}}
        <span x-data="{get count() { return $store.draft.draft_orders.length; } }">
            <template x-if="count > 0">
                <span class="badge fs-10 m-l-2 badge-nav" x-text="formatNumber(count)"></span>
            </template>
        </span>
    </button>

{{--    <li class="nav-item dropdown">--}}
{{--        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>--}}
{{--        <div class="dropdown-menu">--}}
{{--            <a class="dropdown-item" href="#">Action</a>--}}
{{--            <a class="dropdown-item" href="#">Another action</a>--}}
{{--            <a class="dropdown-item" href="#">Something else here</a>--}}
{{--            <div class="dropdown-divider"></div>--}}
{{--            <a class="dropdown-item" href="#">Separated link</a>--}}
{{--        </div>--}}
{{--    </li>--}}
    <button class="nav-link text-left text-sm-center fs-15"
            id="tab-offline-sales"
            type="button"
            role="tab"
            aria-controls="tab-content-offline-sales"
            aria-selected="false"
            data-toggle="tab"
            :disabled="!$store.cart.billing_desk"
            data-target="#tab-content-offline-sales">
        <h6 class="m-b-0 fs-13">
            <i class="fa fa-store-alt-slash"></i>
            {{__("Offline Sales")}}
        </h6>
        {{--        <span x-data="draft_schedule_options({auto_init : false})">--}}
        {{--            <small class="text-success fs-8">--}}
        {{--                <span>{{__("Synchronisation")}}</span>--}}
        {{--                (<span x-text="configs.enable ? 'On' : 'Off'"></span>)--}}
        {{--            </small>--}}
        {{--        </span>--}}
        <span class="float-right">
            <span x-data="{get count() { return $store.draft.offline_orders.length} }">
            <template x-if="count > 0">
                <span class="badge fs-10 m-l-2 badge-nav"
                      x-transition
                      x-text="formatNumber(count)">
                </span><br>
            </template>
        </span>
       </span>
    </button>

    <button class="nav-link text-sm-center fs-15"
        id="tab-sales"
        type="button"
        role="tab"
        aria-controls="tab-content-sales"
        aria-selected="false"
        data-toggle="tab"
        data-target="#tab-content-sales">
        <h6 class="m-b-0 fs-13 text-muteds">
            <i class="fa fa-store-alt"></i>
            {{__("Online Sales")}}
        </h6>
{{--        <small class="text-muted fs-8">{{__("Coming Soon.")}}</small>--}}
    </button>
</nav>

<div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="tab-content-cart" role="tabpanel" aria-labelledby="tab-cart">
        <div class="card-body p-3 bg-white border">
            @include("backend.orders.create.blocs.order.tab-cart")
        </div>
    </div>

    <div class="tab-pane fade" id="tab-content-offline-sales" role="tabpanel" aria-labelledby="offline-sales">
        <div class="card-body p-3 bg-white border">
            @include("backend.orders.create.blocs.order.tab-offline-sales")
        </div>
    </div>
    <div class="tab-pane fade" id="tab-content-draft" role="tabpanel" aria-labelledby="tab-draft">
        <div class="card-body p-2 bg-white border">
            @include("backend.orders.create.blocs.order.tab-draft")
        </div>
    </div>
    <div class="tab-pane fade" id="tab-content-sales" role="tabpanel" aria-labelledby="tab-sales">
        <div class="card-body p-3 bg-white border">
            @include("backend.orders.create.blocs.order.tab-sales")
        </div>
    </div>

</div>

@push("js")

@endpush







