@if($customers->count() > 0)
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="bg-light">
                <tr>
                    <th class="text-center" style="width: 70px;">{{ __('messages.#id') }}</th>
                    <th>{{ __('messages.display_name') }}</th>
                    <th>SUCURSAL DE PREFERENCIA</th>
                    <th>Email</th>
                    <th class="text-center" style="width: 100px;">{{ __('messages.invoices') }}</th>
                    <th class="text-center" style="width: 150px;">{{ __('messages.amount_due') }}</th>
                    <th class="text-center" style="width: 140px;">{{ __('messages.created_at') }}</th>
                    <th class="text-center" style="width: 80px;">{{ __('messages.view') }}</th>
                </tr>
            </thead>

            <tbody class="list" id="customers">
                @foreach ($customers as $customer)
                    <tr>
                        <td class="text-center">
                            <span class="badge badge-light px-3 py-2">#{{ $customer->id }}</span>
                        </td>

                        <td>
                            <div class="d-flex align-items-center">
                                <i class="material-icons icon-16pt mr-2 text-primary">business</i>
                                <div>
                                    <a href="{{ route('customers.details', $customer->id) }}" class="font-weight-bold">
                                        {{ $customer->display_name }}
                                    </a>
                                    @if($customer->cedula)
                                        <div class="small text-muted">{{ $customer->cedula }}</div>
                                    @endif
                                </div>
                            </div>
                        </td>

                        <td>
                            @if($customer->sucursalcliente)
                                <span class="badge badge-light border px-3 py-2">
                                    {{ $customer->sucursalcliente }}
                                </span>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>

                        <td>
                            @if($customer->email)
                                <div class="d-flex align-items-center text-muted">
                                    <i class="material-icons icon-16pt mr-2">email</i>
                                    <span>{{ $customer->email }}</span>
                                </div>
                            @else
                                <span class="text-muted">—</span>
                            @endif
                        </td>

                        <td class="text-center">
                            <div class="d-inline-flex align-items-center text-muted">
                                <i class="material-icons icon-16pt mr-1">receipt</i>
                                <span>{{ $customer->invoices()->count() }}</span>
                            </div>
                        </td>

                        <td class="text-center">
                            <strong>{!! money($customer->invoice_due_amount, $customer->currency_code) !!}</strong>
                        </td>

                        <td class="text-center text-muted">
                            <i class="material-icons icon-16pt text-muted-light mr-1">today</i>
                            {{ $customer->created_at->format('Y-m-d') }}
                        </td>

                        <td class="text-center">
                            <a href="{{ route('customers.details', $customer->id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="material-icons icon-16pt">arrow_forward</i>
                            </a>
                        </td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="row card-body pagination-light justify-content-center text-center">
        {{ $customers->links() }}
    </div>
@else
    <div class="empty-state text-center py-5">
        <i class="material-icons" style="font-size: 60px; color:#cbd5e1;">account_box</i>
        <h5 class="mt-3 mb-1">{{ __('messages.no_customers_yet') }}</h5>
        <p class="text-muted mb-0">Los clientes registrados aparecerán aquí</p>
    </div>
@endif