@extends('layouts.app')
@section('htmlheader_title') Dashboard @endsection
@section('contentheader_title') Dashboard @endsection
@section('contentheader_description') Organisation Overview @endsection
@section('main-content')
<link rel="stylesheet" type="text/css" href="{{asset('/la-assets/css/styles.css')}}"> 
<style>
 @media screen and (max-width:740px) {
    .head { 
        height: 8rem;
    }
}

</style>
<div class="bgmapa" style="min-height: 100vw; padding-top: 10rem;">
    <div class="mapaestacion">
        <div id="overlay"><section><p></p><p>CLIC PARA MOVER</p></section></div>
            <div class="mapain"> 
                <iframe src="https://www.google.com/maps/d/embed?mid=1q19cift17qyJsBQEMN31yxvRTgaKttY&ehbc=2E312F" width="100%" height="480"></iframe>
            </div>
        </div>
        <div class="mapatxt">
            <a href="https://www.google.com/maps/d/embed?mid=1q19cift17qyJsBQEMN31yxvRTgaKttY&ehbc=2E312F" target="new"><h3>Abrir mapa en nueva ventana</h3></a>
        </div> 
    </div>
    <div id="lugares" class="lugares">
        <section>
            <div id="center0" style="box-shadow: none; background:#FAFAFA;"> 
                <div id="estaciones" style="box-shadow: none;    width: 100%; padding: 0px;  background:#FAFAFA;">
                    
                </div>
            </div>
        </section> 
    </div>
</div>
@endsection
@push('scripts')
<script>
$(document).ready(function() {
   
    function estacion(id){ 
        $('#estaciones').html("");
        $('#estacion_'+id).hide(0);
        $('#Oculto_'+id).show(0);
        $.ajax({
            type: "get",
            url: "estacion.php?id="+id,
            dataType: 'JSON',
            success: function(response){ 

                $('#Oculto_'+id).hide(0);
                $('#estacion_'+id).show(0);
                $('#estaciones').html(response.html);
                scrolling();  
                /*BUSCANDO ESTACIONES*/ 
                var len = response.arrayRef.length;
                for(var i=0; i<len; i++)
                {
                    var ref = response.arrayRef[i].ref; 
                    var prod = response.arrayRef[i].prod; 
                    $.ajax({
                    type: 'get',
                    dataType: 'JSON',
                    url: "wbestacion.php?id="+ref+"&prod="+prod,
                    success: function(precio){  
                        console.log("#info_"+precio.ref);
                        $("#info_"+precio.ref).html(precio.html); 
                    }
                    }); 
                } 
            } 	
        });  
    }
              
    function estaciones(){ 
        $('#estaciones').html("");
        $('#cargando').show();
        var id = $('#ciudades').val();
        
        $.ajax({
            type: "POST",
            url: "estacion3.php",
            data: { id: id, }
        })
        .done(function( msg ) {
        $('#cargando').hide();
            $('#estaciones').html(msg);
            scrolling(); 
            
        });
    }

    function scrolling(){
        $([document.documentElement, document.body]).animate({
            scrollTop: $("#lugares").offset().top
        }, 500);
    }

    $( "#overlay section" ).click(function() {
        $( "#overlay section" ).css("display","none");
    });

}); 
</script>
@endpush