<div class="tab-pane {{$tab == 'customers' ? 'active' : ''}}" id="customers" role="tabpanel"
        aria-labelledby="customers-tab">
    <div class="row justify-content-center mb-3">
        <div class="col">
            <div class="d-flex flex-row gap-2">
                <button class="btn btn-primary" title="Create new customer..."
                        data-bs-toggle="modal"
                        data-bs-target="#createCustomerModal">
                    <x-bi-person-plus-fill/>
                    Create entry
                </button>

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

                <div class="d-inline-flex gap-2">
                    <input type="text" class="form-control" placeholder="Search..."
                            name="" id="">
                    <button class="btn btn-outline-primary">
                        <x-bi-search/>
                    </button>
                </div>

                <div class="mx-auto"></div>

                <button class="btn btn-danger" title="Delete customer..."
                        data-bs-toggle="modal"
                        data-bs-target="#deleteCustomerModal">
                    <x-bi-trash-fill/>
                    Delete entry
                </button>
            </div>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col">
            @if(sizeof($customers) !== 0)
                <table class="table table-sm table-striped table-hover">
                    <thead>
                    <tr class="border-bottom border-black">
                        <th scope="col">Company Name</th>
                        <th scope="col">Internal Name</th>
                        <th scope="col">Shipping Address</th>
                        <th scope="col">Billing Address</th>
                        <th scope="col">Phone</th>
                        <th scope="col">View</th>
                    </tr>
                    </thead>

                    <tbody>

                    @foreach($customers as $customer)
                        <tr>
                            <td> {{$customer->company_name}} </td>
                            <td><code>{{$customer->internal_name}}</code></td>
                            <td> {{$customer->shipping_address}} </td>
                            <td> {{$customer->billing_address}} </td>
                            <td class="text-nowrap"> {{$customer->phone}} </td>
                            <td class="align-top">
                                <a class="" href="{{route('customers.show', [$customer->id, 'tab'=>'details'])}}">
                                    <x-bi-arrow-right/>
                                </a>
                            </td>
                        </tr>
                    @endforeach

                    </tbody>
                </table>

            @else()
                No customer data.
            @endif
        </div>
    </div>
</div>