@extends('app')
@section('titulo', 'Hotspot '.ucwords(str_replace("-", " ", $hotspot['nombre'])).' - '.config('app.name'))

@section('contenido')

    @if(!isset($hotspot['address']))
        <div class="alert alert-warning">
            Ha habido problemas al conectar con la API de Helium. El contenido quizá este disponible más tarde.
        </div>
    @endif

    <div class="row">
        <div class="col-md-6">
            <h1 class="text-capitalize"> {{ str_replace("-", " ", $hotspot['nombre']) }}</h1>
            Direccion: <a href="https://explorer.helium.com/hotspots/{{ $hotspot['hotspot'] }}"  target="_blank">{{Str::limit($hotspot['hotspot'], 25, '...')  }} <i class="fa fa-external-link"></i>
                </a><br>
            @if(isset($hotspot['address']))
                Estado: {{ ucwords($hotspot['status']['online']) }}<br>
                    
                Elevacion: {{ $hotspot['elevation'] }}<br>
                @php
                    $number_array = str_split($hotspot['gain']);
                    $ganancia = $number_array[0] . ',' . $number_array[1];
                @endphp
                Ganancia: {{ $ganancia }}<br>
                Escala de Recompensa: {{ $hotspot['reward_scale'] }}<br>
                Localizacion: {{ $hotspot['geocode']['long_city'].', '.$hotspot['geocode']['long_country'] }}<br>
                Hexagono: <a href="https://explorer.helium.com/iot/hex/{{ $hotspot['location_hex'] }}" target="_blank">{{ $hotspot['location_hex'] }} <i class="fa fa-external-link"></i></a><br>
                Propietario: <a href="https://explorer.helium.com/accounts/{{ $hotspot['owner'] }}" target="_blank">{{Str::limit($hotspot['owner'], 25, '...')  }} <i class="fa fa-external-link"></i></a><br>
                
                @php
                    $desde = \Carbon\Carbon::parse($hotspot['timestamp_added']);
                    $desde->locale('es')->formatLocalized('%B');

                    $hasta = \Carbon\Carbon::parse($hotspot['status']['timestamp']);
                    $hasta->locale('es')->formatLocalized('%B');

                @endphp

                Desde: {{ $desde  }}<br>

            @endif

            @php
                $protocol = ((!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] != 'off') || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";  
                $url = $protocol . $_SERVER['HTTP_HOST'];  
            @endphp

            <div class="btn-group w-100 mb-4" data-toggle="buttons">

                  <button class="btn btn-secondary w-50" onclick="window.open('https://explorer.helium.com/hotspots/{{$hotspot['nombre']}}', '_blank')">
                    <img src="{{asset('imagenes/helium.png')}}" width="20" alt=""> EXPLORER
                  </button>

                  <button class="btn btn-secondary w-50" onclick="window.open('{{$url}}/h/{{$hotspot['nombre']}}?r=votar', '_blank')">
                    <img src="{{asset('imagenes/logo.png')}}" width="20" alt=""> VOTAR
                  </button>
                

              </div>


            <h3>Compartir</h3>

            Enlace a esta pagina
            <textarea class="form-control copiar" rows="1">{{$url}}/h/{{$hotspot['nombre']}}</textarea>
            
            
            Enlace directo a votar
            <textarea class="form-control copiar" rows="1">{{$url}}/h/{{$hotspot['nombre']}}?r=votar</textarea>

            Enlace directo al Explorer de Helium
            <textarea class="form-control copiar" rows="1">{{$url}}/h/{{$hotspot['nombre']}}?r=helium</textarea>
            <br>

        </div>
        <div class="col-md-6">


            @if(isset($hotspot['address']))
            <div class="mapouter">
                <div class="gmap_canvas">
                    <iframe width="100%" height="350" id="gmap_canvas"
                        src="https://maps.google.com/maps?q={{ $hotspot['lat'] }},{{ $hotspot['lng'] }}&t=&z=13&ie=UTF8&iwloc=&output=embed"
                        frameborder="0" scrolling="no" marginheight="0" marginwidth="0" style="width: 100%"></iframe>
                    <style>
                        .mapouter {
                            position: relative;
                            text-align: right;
                            height: 350px;
                            width: 100%;
                        }
                    </style>
                    <style>
                        .gmap_canvas {
                            overflow: hidden;
                            background: none !important;
                            height: 350px;
                            width: 100%;
                        }
                    </style>
                </div>
            </div>
            @endif



            @if($hotspot['mensaje'] != null)
            <div class="alert alert-info">
                {{$hotspot['mensaje']}}
            </div>
            @endif

        </div>
    </div>

    



@endsection


@section('scripts')
<script type="text/javascript">
$(document).ready(function() {
    $('.copiar').click(function() {
        $(this).select();
        document.execCommand('copy');
        alert("Copiado al portapapeles");
    });
});
</script>
@endsection