topnotch_website/resources/views/livewire/orders-table.blade.php

<div>

    <div class="row justify-content-center mb-3">
        <div class="col-9">
            <div class="d-flex flex-row gap-2">
                <div class="d-inline-flex">
                    <h4 class="my-auto">{{$this->title}}</h4>
                </div>
                <div class="mx-auto"></div>
                <a href="{{route('orders.create')}}"
                        class="btn btn-sm btn-primary" title="Create new order...">
                    <x-bi-plus-circle-fill/>
                    Create entry
                </a>
                <div class="vr"></div>

                <div class="d-inline-flex">
                    <select name="" id="" class="form-select form-select-sm">
                        <option value="">Sort by...</option>
                        <option value="">Customer</option>
                        <option value="">Internal PO</option>
                        <option value="">Customer PO</option>
                        <option value="">Order Date</option>
                        <option value="">Due Date</option>
                        <option value="">Status</option>
                        <option value="">Rush</option>
                    </select>
                </div>

                <div class="d-inline-flex">
                    <div class="btn-group" role="group">
                        <button class="btn btn-sm btn-secondary">Asc</button>
                        <button class="btn btn-sm btn-outline-secondary">Desc</button>
                    </div>
                </div>

                <div class="vr"></div>

                <div class="d-inline-flex gap-2">
                    <input wire:model.live.debounce.50ms="search" type="text" class="form-control form-control-sm"
                            placeholder="Search..."
                            name="" id="searchText">
                    <button class="btn btn-sm btn-outline-primary" id="searchButton">
                        <x-bi-search/>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center">
        <div class="col-9">
            <table class="table table-striped table-sm table-hover">
                <thead>
                <tr class="border-bottom border-black">
                    {{--                    @if($this->showCustomerColumn)--}}
                    <th scope="col">Customer</th>
                    {{--                    @endif()--}}
                    <th scope="col">Internal PO</th>
                    <th scope="col">Customer PO</th>
                    <th scope="col">Order Date</th>
                    <th scope="col">Due Date</th>
                    <th scope="col">Status</th>
                    <th scope="col">Rush</th>
                    <th scope="col">View</th>
                </tr>
                </thead>
                <tbody>
                @foreach($orders as $order)
                    <tr class="@if($today > $order->due_date && $order->active()) table-danger @elseif($order->rush && $order->active()) table-warning @endif">
                        <td><a class="text-reset text-decoration-none"
                                    href="{{route('customers.show', [$order->customer, 'details'])}}">{{$order->customer->company_name}}</a>
                        </td>
                        <td class="fw-bold"><code>{{$order->internal_po}}</code></td>
                        <td class=""><code>{{$order->customer_po}}</code></td>
                        <td class="text-nowrap">{{$order->order_date}}</td>

                        <td class="text-nowrap ">
                            {{$order->due_date}}
                            @if($order->due_date < $today && $order->active())
                                <x-bi-exclamation-triangle/>
                            @endif </td>

                        <td>{{$order->status->value}}</td>
                        <td>
                            @if($order->rush)
                                <x-bi-check-lg class="text-danger"></x-bi-check-lg>
                            @endif
                        </td>
                        <td class="align-top">
                            <a class="" href="{{route('orders.show', $order)}}">
                                <x-bi-arrow-right/>
                            </a>
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </div>

    <div class="row">
        <div class="col"></div>
        <div class="col-9">
            {{$orders->links()}}
        </div>
        <div class="col"></div>
    </div>

</div>