@extends('app')
@section('titulo', 'Hotspots en Denylist'.' - '.config('app.name'))

@section('contenido')
@include('recuerda')
<table id="lista" class="table stripe nowrap" style="width:100%">
    <thead>
        <tr class="text-uppercase">
            <th>Nombre</th>
            <th>Direccion</th>
            <th class="text-center">Votar</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($hotspots as $hot)

        <tr> 
            <td class="text-capitalize align-middle"><a href="{{url('h/'.$hot->nombre)}}">{{ str_replace("-", " ", $hot->nombre) }}</a></td>
            <td class="align-middle"><a href="{{url('hotspots/'.$hot->hotspot)}}">{{$hot->hotspot}}</a></td>
            <td class="text-center align-middle">
                <div class="btn-group">
                    <button class="btn btn-info" onclick="window.open('{{url('h/'.$hot->nombre.'?r=votar')}}', '_blank')">
                        <img src="{{asset('imagenes/logo.png')}}" width="20" alt=""> VOTAR
                      </button>
                      <button class="btn btn-outline-secondary compartir" data-url="{{url('h/'.$hot->nombre)}}" type="button"><i class="fa fa-share-alt"></i></button>
                
                </div>
            </td>
            
        </tr>

        @endforeach

    </tbody>

</table>

@endsection

@section('scripts')

<script type="text/javascript">
    $(document).ready(function() {
        $('.compartir').click(function() {
            var url = $(this).attr("data-url");
            navigator.clipboard.writeText(url)
                .then(() => {
                    alert("Copiado al portapapeles");
                })
                .catch(err => {
                    console.error('Failed to copy text: ', err);
                    alert("Error al copiar al portapapeles");
                });
        
        });
        $('#lista').DataTable({
            searching: false,
            language: {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún Hotspot registrado aun.",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sInfoPostFix":    "",
            "sSearch":         "Buscar:",
            "sUrl":            "",
            "sInfoThousands":  ",",
            "sLoadingRecords": "Cargando...",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "Siguiente",
                "sPrevious": "Anterior"
            },
            "oAria": {
                "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
                "sSortDescending": ": Activar para ordenar la columna de manera descendente"
            }
        },
            paging: false,
            responsive: true,
            info: false
            
        });

        setTimeout(function() {
            $('.alertaMensaje').fadeOut('slow');
        }, 8000);
    });
</script>

@endsection