@extends('layouts.app')
@section('css')
<style>
    #map {
        height: 200px;
        width: 100%;
    }
</style>
@endsection
@section('content')
<section class="content-header">
    <h1>
        Visita
    </h1>
</section>
<div class="content">
    <div class="box box-primary">
        <div class="box-body">
            <div class="row">
                <div class="col-md-8">
                    <div class="card mb-xlg">
                        <div id="map"></div>
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-center">
                                <p class="text-muted mb-sm"><small>Visita a:</small></p>
                                <p class="text-muted mb-sm"><small>Fecha/Hora de visita</small></p>
                            </div>
                            <div class="d-flex justify-content-between align-items-center">
                                <h4 class="mb-lg">
                                    {!!
                                    $visita->cliente->user->name.' '.
                                    $visita->cliente->user->a_paterno.' '.
                                    $visita->cliente->user->a_materno
                                    !!}
                                </h4>
                                <p class="mb-lg">{!! $visita->created_at !!}</p>
                            </div>
                            <hr>
                            <p class="text-muted mb-sm"><small>Comentario:</small></p>
                            <p class="card-text">{!! $visita->comentario !!}</p>
                            <hr>
                            <p class="text-muted mb-sm"><small>Promotor</small></p>
                            <h4 class="mb-lg">
                                {!!
                                $visita->promotor->user->name.' '.$visita->promotor->user->a_paterno.' '.$visita->promotor->user->a_materno
                                !!}
                            </h4>
                        </div>
                    </div>
                </div>


            </div>
            <a href="{!! route('visitas.index') !!}" class="btn btn-default">Regresar</a>
        </div>
    </div>
</div>


@endsection


@section('scripts')
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJbTMP8E3BsELladjthmRyyYu5y3KbHPs&callback=initMap">
</script>
<script>
    var lat = {!!($visita->lat != '') ? $visita->lat : 0!!};
    var lng = {!!($visita->long != '') ? $visita->long : 0!!};

    function initMap() {
        // The location of Uluru
        var uluru = {
            lat: lat,
            lng: lng
        };
        // The map, centered at Uluru
        var map = new google.maps.Map(
            document.getElementById('map'), {
                zoom: 15,
                center: uluru
            });
        // The marker, positioned at Ulur
        var marker = new google.maps.Marker({
            position: uluru,
            map: map
        });
    }
</script>
@endsection