@extends('review')

@section('moreFields')
    <div class="panel-heading">Cliente</div>
    <div class="panel-body">
                @foreach ($venta->cliente->arrayfromKeys() as $clientF)
            <label >{{$clientF['title']}}:</label>
            {!!$clientF['value']!!}
            </br>
                    @endforeach
    </div>

    <div class="panel-heading">Máquina</div>
    <div class="panel-body">
                @foreach ($venta->maquina->arrayfromKeys() as $maquinaF)
            <label >{{$maquinaF['title']}}:</label>
            {!!$maquinaF['value']!!}
            </br>
                    @endforeach
    </div>
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">
                Archivos
                <form enctype="multipart/form-data" action="{{url('admin/ventas/file')}}/{{$venta->id}}" method="post">
                    {{ csrf_field() }}
                    <input type="file" name="img">
                    <input type="submit">
                </form>
            </div>
            <div class="panel-body">
                <div class="imgrow">
                    @foreach($venta->files() as $file)
                        <div class="column">
                            <img src="{{$file}}" alt="" style="width:100%" onclick="showImg(this);">
                        </div>
                    @endforeach                     
                </div>

                <div class="imgcontainer">
                  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
                  <img id="expandedImg" style="width:100%">
                  <div id="imgtext"></div>
                </div>
            </div>
        </div>
    </div>
    <div id="map"></div>
    <script>
      function initMap() 
      {
        var myLatLng = {
            lat: , 
            lng:         };

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 15,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello World!'
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBWK2NJxKlLXK8tQ5ZVgTy7n0VFhIhMOxw&callback=initMap">
    </script>

@endsection