@extends('layouts.app')
@section('css')
<style>
    .map {
        height: 200px;
        width: 100%;
    }
</style>
@endsection
@section('content')
<ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{{ url('prestamos') }}">Clientes</a></li>
    <li class="breadcrumb-item active">Listado de visitas</li>
</ol>
<div class="row justify-content-between">
    <div class="col-12 col-xl-12">
        <h1 class="page-title">Lista de <span class="fw-semi-bold">visitas</span></h1>
        <a class="btnInfo btn3" href="{{ url('prestamos') }}">Regresar</a>
    </div>
</div>

<div class="clearfix"></div>

@include('flash::message')

<div class="clearfix"></div>

<section class="widget">

    <div class="row">
    @if (count($visitas) != 0)
        @foreach ($visitas as $key => $visita)
        <div class="col-sm-6">
            <div class="card mb-xlg">
                <div id="map{{ $visita->id }}" class="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>
                    <div class="d-flex justify-content-between align-items-center">
                        @if($visita->validacion == 0)
                        Fuera de rango
                        @else
                        Correcta.
                        @endif
                    </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>
        @endforeach
    @else
        <h3>No contamos con visitas para este prestamo</h3>
    @endif
    </div>



</section>
@endsection

@section('scripts')
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBJbTMP8E3BsELladjthmRyyYu5y3KbHPs&callback=initMap">
</script>
<script>
    var visitas = {!! $visitas !!};
    console.log(visitas[0]);
        function initMap() {
            visitas.forEach(element => {
                var lat = element.lat;
                var lng = element.long;

                var uluru = {
                    lat: lat,
                    lng: lng
                };
                // The map, centered at Uluru
                var map = new google.maps.Map(
                    document.getElementById('map'+element.id), {
                        zoom: 15,
                        center: uluru
                    });
                // The marker, positioned at Ulur
                var marker = new google.maps.Marker({
                    position: uluru,
                    map: map
                });
            });
        }
    console.log(localStorage.getItem("buscador_prestamo"));
</script>
@endsection