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

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

@section('js')
    <script>
        $('#tabla_visitantes').DataTable({
            dom: `<'row d-flex align-items-center justify-content-between'
                        <'col-lg-8 d-flex align-items-center'f>
                        <'col-lg-4 d-flex align-items-center justify-content-end'B>>
                    <'table-responsive'tr>
                    <'row'<'col-sm-12 col-md-5 d-flex align-items-center justify-content-center justify-content-md-start'i><'col-sm-12 col-md-7 d-flex align-items-center justify-content-center justify-content-md-end'p>>`,
        })
    </script>
@endsection

@section('content')
    <div class="row">
        <div class="d-flex w-100 voltearv" style="flex-direction: row-reverse;">
            <div class="w-s">
                <div class="btn-group mb-2" role="group" aria-label="">
                    <a href="{{ route('visitantes.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_visitantes" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col" class="grayt">Entrada</th>
                            <th scope="col" class="grayt">Salida</th>
                            <th scope="col" class="grayt">Nombre empleado</th>
                            <th scope="col" class="grayt">Apellido empleado</th>
                            <th scope="col" class="grayt">Documento visitante</th>
                            <th scope="col" class="grayt">Nombre visitante</th>
                            <th scope="col" class="grayt">Apellido visitante</th>
                            <th scope="col" class="grayt">Dependencia</th>
                            <th scope="col" class="grayt">Empresa</th>
                            <th scope="col" class="grayt">Acciones</th>
                        </tr>
                    </thead>
                    <tbody>
                        @if (!$visitantes->isEmpty())
                            @foreach ($visitantes as $visitante)
                                <tr>
                                    <td>{{ $visitante?->fecha_entrada ?? 'N/A' }}</td>
                                    <td>{{ $visitante?->fecha_salida ?? 'N/A' }}</td>
                                    <td>{{ $visitante?->nombre_empleado ?? 'N/A' }}</td>
                                    <td>{{ $visitante?->apellido_empleado ?? 'N/A' }}</td>
                                    <td>{{ $visitante?->documento_visitante ?? 'N/A' }}</td>
                                    <td>{{ $visitante?->nombre_visitante ?? 'N/A' }}</td>
                                    <td>{{ $visitante?->apellido_visitante ?? 'N/A' }}</td>
                                    <td>{{ $visitante?->dependencia ?? 'N/A' }}</td>
                                    <td>{{ $visitante?->empresa_nombre ?? 'N/A' }}</td>
                                    <td><a href="{{ route('visitantes.editView', ['id' => $visitante?->id ?? 'N/A']) }}"
                                            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>
        </div>
    </div>
@endsection