@extends('layouts.app')

@section('header')
    <div class="container-fluid bg-light pt-3">

        <!-- Customer company name row -->
        <div class="row justify-content-center pb-2">
            <div class="col-3"></div>
            <div class="col">
                {{--                <h2>Overview</h2>--}}
            </div>
        </div>

        <!-- Tabs row -->
        <div class="row justify-content-center">
            <div class="col-3 border-bottom"></div>
            <div class="col-6 p-0">

                <ul class="nav nav-fill nav-tabs" id="home-tabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <a class="nav-link link-dark {{$tab == 'active_orders' ? 'active' : ''}}" id="active_orders-tab"
                                href="{{route('dashboard', ['tab' => 'active_orders'])}}" type="button" role="tab"
                                aria-controls="active_orders"
                                aria-selected="{{$tab == 'active_orders' ? 'true' : 'false'}}">
                            <x-bi-arrow-clockwise/>
                            Active Orders
                        </a>
                    </li>
                    <li class="nav-item" role="presentation">
                        <a class="nav-link link-dark {{$tab == 'packing_slips' ? 'active' : ''}}" id="packing-tab"
                                href="{{route('dashboard', ['tab' => 'packing_slips'])}}" type="button" role="tab"
                                aria-controls="packing_slips"
                                aria-selected="{{$tab == 'packing_slips' ? 'true' : 'false'}}">
                            <x-bi-list-ul/>
                            Packing Slips
                        </a>
                    </li>
                </ul>

            </div>
            <div class="col border-bottom"></div>
        </div>

    </div>
@endsection

@section('content')
    <div class="container">
        <div class="row justify-content-center my-3">
            <div class="tab-content">
                <div class="tab-pane {{$tab == 'active_orders' ? 'active' : ''}}" id="active_orders" role="tabpanel"
                        aria-labelledby="active_orders-tab">

                    <livewire:orders-table :order-type="'active'" :show-customer-column="true" title="Active Orders"/>
                </div>
            </div>
        </div>
    </div>
@endsection