{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')


<style>
.frame-area {
  display: block;
  width: 100%;  /* RESPONSIVE WIDTH */
  max-width: 400px;+
  
  height: 400px;
  overflow: auto;  /* EDIT TO hidden FOR NO SCROLLBAR */
  margin: 0px;
  padding: 0px;
  }

 

</style>
<div class="row">
    <div class="col-lg-5">
        <!--begin::Card-->
        <div class="card card-custom gutter-b">
            <div class="card-header">
                <div class="card-title">
                    <h2 class="card-label">
                       {{$details->address}}
                    </h2>
                </div>
            </div>
            <div class="card-body">
                <div id="kt_gmap_1" style="">
                    <iframe  src="{{$details->portal_url}}"  width="500" height="700" frameborder="0" scrolling="auto" class="frame-area"></iframe>
                </div>
                <div class="py-9">
                    
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="font-weight-bold mr-2">Outcode:</span>
                        <span class="text-muted">{{($details->outcode)}}</span>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="font-weight-bold mr-2">Postcode :</span>
                        <span class="text-muted">{{($details->postcode)}}</span>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="font-weight-bold mr-2">Type of Property :</span>
                        <span class="text-muted">{{ucfirst($details->property_type)}}</span>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="font-weight-bold mr-2">Bedrooms :</span>
                        <span class="text-muted">{{$details->bed_rooms}}</span>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="font-weight-bold mr-2">Fallen Through :</span>
                        <span class="text-muted">@if($details->fallen_through==1)Yes @else No @endif</span>
                    </div>
                    
                </div>                
            </div>
        </div>
        <!--end::Card-->

        

    </div>

	<div class="col-lg-7">
        <!--begin::Card-->
        <div class="card card-custom gutter-b">
            <div class="card-header d-flex flex-nowrap">
                <div class="card-title">
                    <h3 class="card-label">
                       Street View
                    </h3>
                </div>
                <div class="card-toolbar">
                    <form method="post" action="{{route('DEOpostHouseNumber')}}">
                    {{csrf_field()}}
                        <div class="form-group row d-flex flex-nowrap" >
                        @if($details->archive!=1)
                        <button type="button" data-btn="Address Not Found" id="archive" class=" btn btn-danger btn-sm  mr-2">Address Not Found</button>
                        @endif
                        <input id="property" type="hidden" name="property" value="{{$details->id}}">
                            <input type="Text" name="house_number" id="house_number"  required class=" form-control form-control-xs form-control-solid " value="" placeholder="House Number">
                            <button type="submit" class=" btn btn-primary btn-sm  mr-2">Submit </button>
                        </div>
                        <!-- <button type="reset" class="btn btn-secondary btn-sm">Cancel</button> -->
                    </form>
				</div>
            </div>
            <div class="card-body">      <div id="map"></div>
    <div id="pano"></div>
                <div id="street_view" style="height:600px;">
              

                </div>
            </div>
        </div>
        <!--end::Card-->

   
	
    </div>
</div>
@endsection


{{-- Scripts Section --}}
@section('scripts')
<script>
    var latitude = "";
    var longitude = "";
    
</script>
<!-- <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> -->

<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

 <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyASY1gJU-H4psp1rrwAEDPCXkxbyyjkAbI&callback=initialize&libraries=&v=weekly"
      defer
    ></script> 

 <script type="text/javascript">   

    function initialize() {
        latitude = parseFloat(latitude);
        longitude = parseFloat(longitude);
        const fenway = { lat: latitude, lng:longitude};
        const map = new google.maps.Map(document.getElementById("map"), {
            center: fenway,
            zoom: 14
        });
        const panorama = new google.maps.StreetViewPanorama(
            document.getElementById("street_view"),
            {
            position: fenway,
            pov: {
                heading: 34,
                pitch: 10
            }
            }
        );
        map.setStreetView(panorama);
    }

   
  </script>
@endsection