@extends('admin._layout.admin')

@section('content')
    <script src='https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCRSNXVpfT0D07aaHOK69wuHQ4n8UPPeuY'></script>

    <div class="title">
        <h2>Solicitudes de Grúa</h2>
    </div>

    <table class="detail">
        <tbody>
            <tr>
                <td>ID</td>
                <td>{{ $item->id }}</td>
            </tr>
            <tr>
                <td>Nombre</td>
                <td>{{ $item->user->name }}</td>
            </tr>
            <tr>
                <td>Email</td>
                <td>{{ $item->user->email }}</td>
            </tr>
            <tr>
                <td>Celular</td>
                <td>{{ $item->celular }}</td>
            </tr>
            <tr>
                <td>Fecha Solicitud</td>
                <td>{{ $item->created_at }}</td>
            </tr>
            <tr>
                <td>Ubicación</td>
                <td>
                    <div style='overflow:hidden;height:350px;width:500px;'>
                        <div id='gmap_canvas' style='height:350px;width:500px;'></div>
                        <style>#gmap_canvas img {
                                max-width: none !important;
                                background: none !important
                            }</style>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    <div class="spacer"></div>
    <div class="spacer"></div>

    <div>
        <a href="{{ URL::route('admin.cranes') }}" class="ui button">Volver</a>
    </div>

    <script type='text/javascript'>function init_map() {
            var myOptions = {
                draggable: false,
                panControl: false,
                zoomControl: false,
                scaleControl: false,
                scrollwheel: false,
                navigationControl: false,
                mapTypeControl: false,
                zoom: 17,
                center: new google.maps.LatLng({{ $item->lat }}, {{ $item->lng }}),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);

            marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng({{ $item->lat }}, {{ $item->lng }})
            });
        }
        google.maps.event.addDomListener(window, 'load', init_map);
    </script>
@endsection