@extends('layouts.app')

@section('content')
    <h3 class="page-title">@lang('quickadmin.marker.title')</h3>

    <div class="panel panel-default">
        <div class="panel-heading">
            @lang('quickadmin.qa_view')
        </div>

        <div class="panel-body table-responsive">
            <div class="row">
                <div class="col-md-6">
                    <table class="table table-bordered table-striped">
                        {{--<tr>--}}
                            {{--<th>@lang('quickadmin.marker.fields.street-name')</th>--}}
                            {{--<td field-key='street-name'>{{ $marker->street_name }}</td>--}}
                        {{--</tr>--}}
                        <tr>
                            <th>@lang('quickadmin.marker.fields.rc-name')</th>
                            <td field-key='latitude'>
                                @foreach($marker->residential_complexes as $residential_complex)
                                    <span class="label label-info label-many">
                                    {{ $residential_complex->name }}
                                        </span>
                                @endforeach
                            </td>
                        </tr>
                        {{--<tr>--}}
                            {{--<th>@lang('quickadmin.marker.fields.latitude')</th>--}}
                            {{--<td field-key='latitude'>{{ $marker->latitude }}</td>--}}
                        {{--</tr>--}}
                        {{--<tr>--}}
                            {{--<th>@lang('quickadmin.marker.fields.longitude')</th>--}}
                            {{--<td field-key='longitude'>{{ $marker->longitude }}</td>--}}
                        {{--</tr>--}}
                        <tr>
                            <th>@lang('quickadmin.marker.fields.address')</th>
                            <td>
                                <strong>{{ $marker->address_address }}</strong>
                                <div id='address-map' style='width: 600px;height: 300px;' class='map' data-key='address'
                                     data-latitude='{{$marker->address_latitude}}'
                                     data-longitude='{{$marker->address_longitude}}'></div>
                            </td>
                        </tr>
                        <tr>
                            <th>@lang('quickadmin.marker.fields.infrastructure-type')</th>
                            <td field-key='infrastructure_type'>{{ $marker->infrastructure_type->type ?? '' }}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <p>&nbsp;</p>

            <a href="{{ route('admin.markers.index') }}" class="btn btn-default">@lang('quickadmin.qa_back_to_list')</a>
        </div>
    </div>
@stop

@section('javascript')
    @parent
    <script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_MAPS_API_KEY') }}&libraries=places&callback=initialize"
            async defer></script>

    <script>
        function initialize() {
            const maps = document.getElementsByClassName("map");
            for (let i = 0; i < maps.length; i++) {
                const field = maps[i]
                const fieldKey = field.dataset.key;
                const latitude = parseFloat(field.dataset.latitude) || -33.8688;
                const longitude = parseFloat(field.dataset.longitude) || 151.2195;

                const map = new google.maps.Map(document.getElementById(fieldKey + '-map'), {
                    center: {lat: latitude, lng: longitude},
                    zoom: 13
                });
                const marker = new google.maps.Marker({
                    map: map,
                    position: {lat: latitude, lng: longitude},
                });

                marker.setVisible(true);
            }

        }
    </script>
@stop