@extends('layouts.index', ['subHeader' => 'Funcionarios'])

@section('header')
    <a href="{{ route('home') }}" class="text-decoration-none text-dark">Dashboard</a>
    <a href="{{ route('funcionarios.index') }}" class="text-decoration-none text-dark"> / Funcionarios</a>
@endsection

@section('js')
@endsection

@section('content')
    <div class="row">
        <div class="d-flex flex-wrap justify-content-between w-100 voltearv">
            <div class="mb-2 searchv">
                <input type="search" class="form-control form-control-lg  fromcss" placeholder="Buscar" aria-label="Search">
            </div>
            <div class="w-s">
                <div class="btn-group mb-2" role="group" aria-label="">
                    <a href="{{ route('funcionarios.createView') }}" type="button" class="btn btn-enviar btn-lg btn-block">
                        <i class="bi bi-file-earmark-plus"></i> Nuevo registro
                    </a>
                </div>
            </div>
        </div>
    </div>
    <br>

    <div class="contanier">
        <div class="shadow-s p-4">
            <div class="table-responsive">
                <table id="tabla_funcionarios" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col" class="grayt">Tiempo</th>
                            <th scope="col" class="grayt">Área</th>
                            <th scope="col" class="grayt">Dispositivo</th>
                            <th scope="col" class="grayt">Lugar del evento</th>
                            <th scope="col" class="grayt">Número de tarjeta interno</th>
                            <th scope="col" class="grayt">ID</th>
                            <th scope="col" class="grayt">Nombre</th>
                            <th scope="col" class="grayt">Departamento</th>
                            <th scope="col" class="grayt">Estado</th>
                            <th scope="col" class="grayt">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (!$funcionarios->isEmpty())
                            @foreach ($funcionarios as $funcionario)
                                <tr>
                                    <td>{{ $funcionario?->tiempo ?? 'N/A' }}</td>
                                    <td>{{ $funcionario?->area_nombre ?? 'N/A' }}</td>
                                    <td>{{ $funcionario?->dispositivo ?? 'N/A' }}</td>
                                    <td>{{ $funcionario?->lugar_evento ?? 'N/A' }}</td>
                                    <td>{{ $funcionario?->numero_tarjeta_interno ?? 'N/A' }}</td>
                                    <td>{{ $funcionario?->id_funcionario ?? 'N/A' }}</td>
                                    <td>{{ $funcionario?->nombre_funcionario ?? 'N/A' }}</td>
                                    <td>{{ $funcionario?->departamento_nombre ?? 'N/A' }}</td>
                                    <td>{{ isset($funcionario->estado_id) ? App\Models\Funcionario::NOMBRE_ESTADOS[$funcionario->estado_id] : 'N/A' }}</td>
                                    <td><a href="{{ route('funcionarios.editView', ['id' => $funcionario->id]) }}"
                                            class="btn btn-outline-p"><i class="bi bi-pencil-square"></i></a></td>
                                </tr>
                            @endforeach
                        @else
                            <th colspan="10" rowspan="3" style="text-align: center">"No hay Registros para mostrar"</th>
                        @endif
                    </tbody>
                </table>
            </div>
            <br>
            <div class="d-flex justify-content-end">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li class="page-item">
                            <a class="page-link rounded-link ms-1" href="#" aria-label="Previous">
                                <i class="bi bi-caret-left-fill"></i>
                            </a>
                        </li>
                        <li class="page-item"><a class="page-link rounded-link ms-1" href="#">1</a>
                        </li>
                        <li class="page-item"><a class="page-link rounded-link ms-1" href="#">2</a>
                        </li>
                        <li class="page-item"><a class="page-link rounded-link ms-1" href="#">3</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link rounded-link ms-1" href="#" aria-label="Next">
                                <i class="bi bi-caret-right-fill"></i>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
@endsection