<div>
    @component('common.breadcrumb', ['addBtn' => false, 'permission_create' => 'Companies_menu', 'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        <li class="breadcrumb-item">Administración</li>
        <li class="breadcrumb-item">Empresa</li>
        <li class="breadcrumb-item active">Usuarios</li>
        @slot('buttons_extras')
        @can('Companies_add_users')
            <li>
                @if ($show_btn_add > 0)<!-- si la cantidad de usuarios permitidos por el plan asignado a la empresa es mayor a 0 -->
                <a href="javascript:void(0)" wire:click.prevent="openAddUser()"
                    class="btn btn-square btn-primary txt-white" >
                    Agregar Usuario <i class="fa fa-plus"></i>
                </a>
                @endif
            </li>
        @endcan
        @endslot
    @endcomponent

    @include('common.searchbox')
    <div class="container-fluid">
        <div class="row layout-top-spacing">
            <div class="col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <div class="card-header">
                            <h4>{{ $company_name }} | Plan: <b>{{ $company_plan_name }}</b></h4>
                        </div>
                        <div class="card-content">
                            <span class="badge badge-info py-1 px-2 fs-6"> <b>Administradores:</b> {{ $counter_administrators_company }} / {{ $counter_administrators_plan }}</span>
                            <span class="badge badge-info py-1 px-2 fs-6"><b>Administrativos:</b> {{ $counter_administrative_company }} / {{ $counter_administrative_plan }}</span>
                            <span class="badge badge-info py-1 px-2 fs-6"><b>Empleados:</b> {{ $counter_employees_company }} / {{ $counter_employees_plan }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <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' => '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">ESTADO</th>
                                    <th scope="col" class="text-center">FOTO</th>
                                    <th scope="col" class="text-center">ACCIONES</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($users 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">
                                            @if ($item->status == "ACTIVO")
                                                <span class="badge badge-success">Activo</span>
                                            @else
                                                <span class="badge badge-danger">Inactivo</span>
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if ($item->imagen != null)
                                                <img src="{{ asset('storage/users/' . $item->imagen) }}"
                                                    alt="imagen" class="card-img-top img-fluid img-h-50">
                                            @endif
                                        </td>
                                        <td class="text-center">
                                            @if(!empty($item->getRoleNames()))
                                                @foreach($item->getRoleNames() as $val)
                                                    @if ($val == 'Empleado')
                                                    <!--
                                                    <a href="javascript:void(0)" wire:click.prevent="openProfile({{ $item->id }})"
                                                        class="btn btn-outline-primary" title="Perfil Empleado">
                                                        <i class="fa fa-user-tie"></i>
                                                    </a>
                                                    -->
                                                    @endif
                                                @endforeach
                                            @endif
                                            @can('Companies_remove_users')
                                            <a href="javascript:void(0)" wire:click.prevent="removeUserCompany({{ $item->id }})"
                                                class="btn btn-outline-danger " title="Eliminar Usuario">
                                                <i class="fa fa-trash"></i>
                                            </a>
                                            @endcan
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{ $users->links() }}
                    </div>

                </div>
            </div>
        </div>
        @include('livewire.companies.users.form')
        @include('livewire.companies.users.form-profile')
    </div>
</div>
@include('common.scriptsCompStandar')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        $('#theModalProfile').on('show.bs.modal', function() {
            $('.modal-body:first *:input[type!=hidden]:first').trigger('focus');
        });
        window.livewire.on('hide-modal-profile', msg => {
            $('#theModalProfile').modal('hide')
        });
        window.livewire.on('show-modal-profile', msg => {
            $('#theModalProfile').modal('show')
        });
    });

</script>


