<div>
    @component('common.breadcrumb', ['addBtn' => false, 'permission_create' => 'Company_register_users_index', 'breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        <li class="breadcrumb-item">Empresa</li>
        <li class="breadcrumb-item active">Usuarios</li>
        @slot('buttons_extras')
            <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 Usuarios <i class="fa fa-plus"></i>
                </a>
                @endif
            <li>
        @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()))
                                                @can('Company_add_job_position_administrative')
                                                    @if ($item->getRoleNames()[0] != "Empleado")
                                                        <a href="javascript:void(0)" wire:click.prevent="openJobPositionAdministrative({{ $item->id }})"
                                                            class="btn btn-outline-primary" title="Cargo Administrativo">
                                                            <i class="fa fa-user-tie"></i>
                                                        </a>
                                                    @endif
                                                @endcan
                                                @canany(['Company_administrator_create','Company_administrator_update',
                                                        'Company_administrative_create','Company_administrative_update',
                                                        'Company_employee_create','Company_employee_update'])
                                                    <a href="javascript:void(0)" wire:click="Edit({{ $item->id }})"
                                                        class="btn btn-outline-primary" title="Editar">
                                                        <i class="fas fa-edit"></i>
                                                    </a>
                                                @endcanany
                                                @can('Company_send_email_info_account')
                                                    <a href="javascript:void(0)" onclick="SenEmailinfoAccount({{ $item->id }})"
                                                        class="btn btn-outline-info " title="Enviar correo informativo">
                                                        <i class="fa fa-envelope"></i>
                                                    </a>
                                                @endcan
                                                @canany(['Company_administrator_delete','Company_administrative_delete',
                                                        'Company_employee_delete'])
                                                    <a href="javascript:void(0)" onclick="Confirm('{{ $item->id }}')"
                                                        class="btn btn-outline-danger " title="Eliminar Usuario">
                                                        <i class="fa fa-trash"></i>
                                                    </a>
                                                @endcanany
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{ $users->links() }}
                    </div>

                </div>
            </div>
        </div>
        @include('livewire.company.users.form')
        @include('livewire.company.users.form-administrative')
    </div>
    @include('livewire.loading.component', ['targetLoading' => 'sendMailInfoUserAccount']) <!--- component loading ,en targetLoading se coloca el nombre del metodo que se esta cargando --->
</div>

@include('common.scriptsCompStandar')
@push('help-popover')
<script src="{{ asset('assets/js/popover-custom.js')}}"></script>
@endpush
<script>
    document.addEventListener('DOMContentLoaded', function() {
        window.livewire.on('user-withContracts', msg => {
            noty(msg)
        })
        window.livewire.on('show-modal-administrative', msg => {
            $('#modal-administrative').modal('show')
        });
        window.livewire.on('hide-modal-administrative', msg => {
            $('#modal-administrative').modal('hide')
        });
    });

    function SenEmailinfoAccount(id)
    {
        swal.fire({
            title: 'CONFIRMAR',
            text: '¿Confirmas enviar un correo con la información de la cuenta?. Se generará una contraseña nueva para este usuario.',
            icon: 'warning',
            showCancelButton: true,
            cancelButtonText: 'CERRAR',
            customClass: {
                confirmButton: 'btn btn-success',
                cancelButton: 'btn btn-danger'
        },

            confirmButtonText: 'ACEPTAR',
        }).then(function(result){
            if(result.value)
            {
                window.livewire.emit('sendMailInfoUserAccount',id)
                swal.close()
            }
        })
    }
</script>
