<div wire:ignore.self class="modal fade" tabindex="-1" role="dialog" id="theModal">
    <div class="modal-dialog modal-lg" role="document" style="overflow-y:initial">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <h5 class="modal-title">
                <b>USUARIO</b> | AGREGAR
                </h5>
                <h6 class="text-center text-warning" wire:loading>ESPERE UN MOMENTO POR FAVOR</h6>
            </div>
            <div class="modal-body" style="height: 70vh; overflow-y: auto">


                <div class="row justify-content-between file-content mb-2">
                    <div class="col-lg-4 col-md-4 col-sm-12">
                        <div class="form-inline">
                            <div class="form-group d-flex mb-0"><i class="fa fa-search"></i>
                                <input class="form-control-plaintext" type="text" wire:model="search_modal" placeholder="Buscar...">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-12">
                        <div class="form-group">
                            <select class="form-select" wire:model="roleModal">
                                <option value="">Seleccione un rol</option>
                                @foreach ($roles_company_all as $role)
                                    <option value="{{ $role }}">{{ $role }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    @if (isset($count_reg_modal))
                        <div class="col-lg-4 col-md-4 col-sm-12">
                            <p class="p-l-20">Total de registros: {{$count_reg_modal}}</p>
                        </div>
                    @endif


                </div>

                <div class="container-fluid">
                    <div class="row layout-top-spacing">
                        <div class="col-sm-12">
                            <div class="card">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead class="bg-primary">
                                            <tr>
                                                <th scope="col">NOMBRE @include('common.orderby', ['column' => 'first_name'])</th>
                                                <th scope="col" class="text-center">APELLIDO @include('common.orderby', ['column' => 'last_name'])</th>
                                                <th scope="col" class="text-center">DOCUMENTO @include('common.orderby', ['column' => 'document'])</th>
                                                <th scope="col" class="text-center">ROL</th>
                                                <th scope="col" class="text-center">ACCIONES</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($users_modal as $item)
                                                <tr>
                                                    <td>{{ $item->first_name }}</td>
                                                    <td class="text-left">{{ $item->last_name }}</td>
                                                    <td class="text-left">{{ $item->document }}</td>
                                                    <td>
                                                        @if(!empty($item->getRoleNames()))
                                                        @foreach($item->getRoleNames() as $val)
                                                            <strong class="text-secondary">{{ $val }}</strong>
                                                        @endforeach
                                                    @endif
                                                    </td>
                                                    <td class="text-center">
                                                        <a href="#" class="btn btn-sm btn-outline-success" wire:click="AddUserCompany({{ $item->id }})"><i class="fa fa-plus"></i></a>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                    {{ $users->links() }}
                                </div>

                            </div>
                        </div>
                    </div>
                </div>





            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-primary" wire:click.prevent="resetUI()" data-bs-dismiss="modal">CERRAR</button>

            </div>
        </div>
    </div>
</div>
