@extends('template.layoutAdmin', ['activeButton'=>'personal'])

@section('title')
    Actualizar - Dirección
@endsection

@section('contenido')
    @if(Session::has('message'))
        <div class="row">
            <div class="col-12">
                <div class="alert alert-success alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    😉 {{Session::get('message')}} 😉
                </div>
            </div>
        </div>
    @endif
    @if(Session::has('message_error'))
        <div class="row">
            <div class="col-12">
                <div class="alert alert-warning alert-dismissible" role="alert">
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    😓 {{Session::get('message_error')}} 😒
                </div>
            </div>
        </div>
    @endif

    <div class="row">
        <div class="col-12">
            <div class="info-box">
                <div class="row">
                    <div class="col-12 text-center">
                        <h4> {{  trans('restaurantes.confirmar') }} {{$rest->userName}}</h4>
                        <div class="col-12 hide" id="failAddress">
                            <div class="alert alert-warning alert-dismissible" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                😓  {{  trans('restaurantes.direccionNoEncontrada') }} 😒
                            </div>
                        </div>
                    </div>
                    
                </div>
                <hr style="margin-bottom: 10px;"/>
                <div class="row">
                    <div class="col-4">
                        <img style="width:100%;border-radius:6px;" src="{{env('Image')}}{{$rest->fotoPerfil}}" alt="fotoRestaraunte">
                        <div class="row">
                            <div class="col-md-12 text-center">
                                <h3 style="margin: 9px;">{{$rest->userName}}</h3>
                            </div>
                            <div class="col-md-12">
                                <h4 style="margin: 8px;text-right"> {{  trans('restaurantes.telefonoUpdate') }}	{{$rest->telefono}}</h4>
                            </div>
                            <div class="col-md-12">
                                <h4 style="margin: 8px;"> {{  trans('restaurantes.celularUpdate') }} {{$rest->celular}}</h4>
                            </div>
                            <div class="col-md-12">
                                <p style="margin: 8px;">{{$rest->funDetalleRest->descripcion}}</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-8 text-center">
                        <div id="map" style="height: 370px;"></div>
                        <form action="{{route('direccionPost')}}" method="POST" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" id="lat" value="{{$rest->funDetalleRest->latitud}}" name="lat">
                            <input type="hidden" id="idRest" name="idRest" value="{{$rest->idUsuario}}">
                            <input type="hidden" id="long" value="{{$rest->funDetalleRest->longitud}}" name="long">
                            <button type="submit" style="background: #DB3920;padding: 25;margin:50px 0px;color:#FFF;" class="btn btn-lg"> {{  trans('restaurantes.guardar') }} {{$rest->userName}}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
    <script>
        //Funcion principal
        initMap = function ()
        {
            var lat = {!! $rest->funDetalleRest->latitud != null? $rest->funDetalleRest->latitud:0 !!};
            var long = {!! $rest->funDetalleRest->longitud != null? $rest->funDetalleRest->longitud:0!!};
            if (lat == 0 || long==0) {
                $('#failAddress').show()
            }
            coords =  {
              lng: long,
              lat: lat
            };
            setMapa(coords);
        }
        function setMapa (coords)
        {   
            //Se crea una nueva instancia del objeto mapa
            var map = new google.maps.Map(document.getElementById('map'),
            {
                zoom: 14,
                center:new google.maps.LatLng(coords.lat,coords.lng),
                streetViewControl: false
            });

            //Creamos el marcador en el mapa con sus propiedades
            //para nuestro obetivo tenemos que poner el atributo draggable en true
            //position pondremos las mismas coordenas que obtuvimos en la geolocalización
            marker = new google.maps.Marker({
                map: map,
                draggable: true,
                animation: google.maps.Animation.DROP,
                position: new google.maps.LatLng(coords.lat,coords.lng),

            });
            //agregamos un evento al marcador junto con la funcion callback al igual que el evento dragend que indica 
            //cuando el usuario a soltado el marcador
            marker.addListener('click', toggleBounce);
            
            marker.addListener( 'dragend', function (event)
            {
                //escribimos las coordenadas de la posicion actual del marcador dentro del input #coords
                document.getElementById("lat").value = this.getPosition().lat();
                document.getElementById("long").value = this.getPosition().lng();
            });
        }
        //callback al hacer clic en el marcador lo que hace es quitar y poner la animacion BOUNCE
        function toggleBounce() {
            if (marker.getAnimation() !== null) {
                marker.setAnimation(null);
            } else {
                marker.setAnimation(google.maps.Animation.BOUNCE);
            }
        }
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key={{env('API_KEY')}}&callback=initMap"></script>
@endsection