<div>
    @component('common.breadcrumb', ['addBtn' => true, 'permission_create' => 'Company_employee_create','breadcrumb_show' => $breadcrumb_show])
        @slot('breadcrumb_title')
            <h3>{{ $componentName }} | {{ $pageTitle }}</h3>
        @endslot
        <li class="breadcrumb-item">Empresa</li>
        <li class="breadcrumb-item active">Empleados</li>

    @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">
                            <p>Tiempo para que el empleado pueda realizar actualizaciones en la hoja de vida:
                                <button wire:click="OpenUpdateTime()" class="btn btn-outline-primary py-1 px-2">
                                    {{ $company_employee_update_time > 1 ? $company_employee_update_time . ' días' : $company_employee_update_time . ' día' }}
                                </button>
                            </p>
                        </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">CARGO</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->job_position_id))
                                                {{ $this->jobPositionName($item->job_position_id) }}
                                            @endif
                                        </td>
                                        <td class="text-center">

                                                <button class="btn-sm btn btn-outline-{{ $item->status == 'ACTIVO' ? 'success' : 'danger'}}"
                                                    @can('Company_employee_update')
                                                        wire:click="ToggleStatusEmployee({{$item->id}})"
                                                    @endcan
                                                    title="Bloquear">
                                                    {{ $item->status }}
                                                </button>

                                        </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 ($item->status == "ACTIVO")
                                                @can('Company_employee_update')
                                                <a href="{{ route('empleados.view', $item->id) }}"
                                                    class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                                @endcan
                                                @can('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>
                                                @endcan
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{ $users->links() }}
                    </div>

                </div>
            </div>
        </div>
        @include('livewire.company.employee.form-employee')
        @include('livewire.company.employee.form-update-time')
    </div>
</div>
@include('common.scriptsCompStandar')
<script>
document.addEventListener('DOMContentLoaded', function() {
    window.livewire.on('show-modal-time', msg => {
        $('#theModalTime').modal('show')
    });
    window.livewire.on('hide-modal-time', msg => {
        $('#theModalTime').modal('hide')
    });
});
</script>
