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

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

@section('js')
    <script>
        $('#tabla_incidentes').DataTable({
            dom: `<'row d-flex align-items-center justify-content-between'
                        <'col-8 d-flex align-items-center'f>
                        <'col-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="">
                    <button type="button" class="btn btn-enviar btn-lg btn-block">
                        <a href="{{ route('incidentescrearView') }}" class="text-white"><i
                                class="bi bi-file-earmark-plus"></i> Nuevo registro</a>
                    </button>
                </div>
                <!-- <div class="btn-group mb-2 " role="group" aria-label="">
                            <button type="button" class="btn btn-enviar  btn-lg">
                                <i class="bi bi-download"></i> Cargar recurso
                            </button>
                        </div> -->
            </div>
        </div>
    </div><br>
    <div class="contanier">
        <div class="shadow-s p-4">
            <div class="table-responsive">
                <table id="tabla_incidentes" class="table table-striped table-hover">
                    <thead>
                        <tr>
                            <th scope="col" class="grayt">Nombre</th>
                            <th scope="col" class="grayt">Apellido</th>
                            <th scope="col" class="grayt">País</th>
                            <th scope="col" class="grayt">Ciudad</th>
                            <th scope="col" class="grayt">Fecha del Incidente</th>
                            <th scope="col" class="grayt">Tipo de Incidente</th>
                            <th scope="col" class="grayt"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($incidentes as $incidente)
                            <tr>
                                <td>{{ $incidente->nombre }}</td>
                                <td>{{ $incidente->apellido }}</td>
                                <td>{{ $incidente->pais->nombre }}</td>
                                <td>{{ $incidente->ciudad->nombre }}</td>
                                <td>{{ $incidente->fecha_incidente }}</td>
                                <td>{{ $incidente->tipo_incidente }}</td>
                                <td><a class="btn btn-outline-p" class="bi bi-eye-fill"
                                        href="{{ route('incidentesdetailedView', ['id' => $incidente->id]) }}">
                                        <i class="bi bi-eye-fill"></i>
                                    </a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection