@include('header')
<link rel="stylesheet" type="text/css" href="{{asset("assessify_content/css/loading-area.css")}}"/>
<input type="hidden" id="anPageName" name="page" value="loading-area"/>


<form id="steps_form" method="post" action="{{URL::to("/steps")}}/1">
    @csrf
    <div class="container-center-horizontal">
        <div class="loading-area screen">
            <div class="row full-width">
                <div class="col-5">


                    <div class="group-container">
                        <div class="overlap-group1 pointer" onclick="location.href='{{URL::to("/")}}'">
                            <div class="rectangle-4"></div>
                            <div class="assessify">Assessify</div>
                        </div>


                        <div class="group-4049">
                            <div class="group-4042">
                                <div class="col-12 property-data">
                                                                        <p>{{$property_data->address}}</p>
                                    <p>Bedrooms <b>{{$property_data->bed}}</b> Bathrooms <b>{{$property_data->bath}}</b>
                                        Imp.
                                        Size <b>{{number_format((float)$property_data->imp_size)}}</b></p>
                                    <p>Year Built <b>{{$property_data->year_built}}</b> Lot Area
                                        <b>{{number_format((float)$property_data->lot_area)}}</b></p>
                                    <p>APN <b>
                                                                                        {{$property_data->apn}}
                                                                                    </b></p>
                                </div>
                                <div class="customers-can-apply">PROGRESS</div>
                                <div class="flex-row">
                                    <div class="x39-to-complete"
                                         id="progress_percentage">25                                        % to complete
                                    </div>
                                    <div class="frame-365">
                                        <img class="clock-03-1" src="{{asset("assessify_content/img/clock-03-1.svg") }}"
                                             alt="Clock 03 1"/>
                                        <div class="x2min">2min</div>
                                    </div>
                                </div>
                                <div class="group-4041">
                                    <div class="rectangle-2"
                                         style="width: 25%;"></div>
                                </div>
                            </div>
                            <p class="customers-can-apply-1">Your report is being created. Please don’t close this
                                screen.</p>
                        </div>
                    </div>
                </div>
                <div class="col-7">
                    <div id="map" style="height: 100%; width: 100%;"></div>
                </div>
            </div>

            {{--            <div class="flex-col">--}}

            {{--                <div class="question-3-of-6 inter-normal-cloud-burst-16px">Question {{$step}} of 4</div>--}}
            {{--LOAD GOOGLE MAPS HERE--}}

            {{--                --}}

            {{--                <p class="answer-some-question inter-normal-cloud-burst-16px">--}}
            {{--                    Answer some questions while you wait and we can better serve you.--}}
            {{--                </p>--}}
            {{--                <div class="base-container">--}}
            {{--                    <div class="base"></div>--}}
            {{--                    <div class="base-1"--}}
            {{--                         style="width: 25%;"></div>--}}
            {{--                </div>--}}
            {{--                <div class="flex-row-1 ">--}}

            {{--                    <div class="frame-361 link"--}}
            {{--                         onclick="location.href='{{URL::to("/")}}';">--}}
            {{--                        <div class="place">Back</div>--}}
            {{--                    </div>--}}

            {{--                    <div class="button"><input type="submit" class="button button-1" value="Next"></div>--}}
            {{--                </div>--}}
            {{--            </div>--}}
        </div>
    </div>
</form>
</body>
<script type="text/javascript">

    let map;
    let center = {lat: {{$property_data->latitude}}, lng: {{$property_data->longitude}}};
        async function initMap() {
        await google.maps.importLibrary("maps");
        await google.maps.importLibrary("marker");
        const california_bounds = {
            north: 42.009517,
            south: 32.528832,
            west: -124.482003,
            east: -114.131211,
        };
        map = new google.maps.Map(document.getElementById("map"), {
            center,
            restriction: {
                latLngBounds: california_bounds,
                strictBounds: true,
            },
            zoom: 15,
            mapId: "DEMO_MAP_ID",
        });

        await addMarker(center, "S");
        
    }

    async function addMarker(position, label) {
        let glyphLabel = document.createElement("div");
        // set style and classes as needed
        glyphLabel.style = 'color: black; font-size: 8px; font-weight:bold;';
        glyphLabel.classList.add('classname');
        glyphLabel.innerText = label;
        let iconImage = new google.maps.marker.PinElement({
            glyph: glyphLabel,
        });

        const marker = new google.maps.marker.AdvancedMarkerElement({
            map,
            position: position,
            content: iconImage.element
        });
    }

</script>
<script async
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAZlDRvSMYYKvMBSiWXdGkhBSRFhTPHNtQ&loading=async&callback=initMap">
</script>
</html>