@extends('layouts.app')

@section('content')

    <div class="page-head">
        <a href="{{ route('users.edit', $user) }}" class="btn btn-info pull-right xs-mt-20"><i class="icon s7-edit"></i> Edit User</a>
        <h2>Users</h2>
        <ol class="breadcrumb">
            <li><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li><a href="{{ route('users.index') }}">Users</a></li>
            <li class="active">{{ $user->name }}</li>
        </ol>
    </div>
    <div class="main-content">
        <div class="user-profile">
            <div class="row masonry">
                <div class="col-md-12 masonry-item">
                    <div class="panel">
                        <div class="panel-heading">
                            <span class="title">Location</span>
                        </div>
                        {{-- <div class="panel-body"> --}}
                            <div id="user-location"></div>
                        {{-- </div> --}}
                    </div>
                </div>
                <div class="col-md-6 masonry-item">
                    <div class="info-block panel panel-default">
                        <div class="panel-heading">
                            <h4>About {{ $user->name }}</h4>
                        </div>
                        <div class="panel-body">
                            <table class="no-border no-strip skills">
                                <tbody class="no-border-x no-border-y">
                                    <tr>
                                        <td class="item">Role:<span class="icon s7-portfolio"></span></td>
                                        <td>Tech</td>
                                    </tr>
                                    <tr>
                                        <td class="item">Birthday:<span class="icon s7-gift"></span></td>
                                        <td>16 September 1989</td>
                                    </tr>
                                    <tr>
                                        <td class="item">Mobile:<span class="icon s7-phone"></span></td>
                                        <td>(999) 999-9999</td>
                                    </tr>
                                    <tr>
                                        <td class="item">Location:<span class="icon s7-map-marker"></span></td>
                                        <td>Montreal, Canada</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 masonry-item">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <div class="tools"><span class="value">12</span></div><span class="title">Active Workorders</span>
                        </div>
                        <div class="panel-body">
                            <table class="table table-striped table-fw-widget table-hover">
                                <thead>
                                    <tr>
                                        <th>Operating System</th>
                                        <th class="number">Users</th>
                                        <th class="number">Rebound</th>
                                    </tr>
                                </thead>
                                <tbody class="no-border-x">
                                    <tr>
                                        <td>Windows</td>
                                        <td class="number">186</td>
                                        <td class="number">51%</td>
                                    </tr>
                                    <tr>
                                        <td>Mac OS</td>
                                        <td class="number">145</td>
                                        <td class="number">64%</td>
                                    </tr>
                                    <tr>
                                        <td>Linux</td>
                                        <td class="number">89</td>
                                        <td class="number">38%</td>
                                    </tr>
                                    <tr>
                                        <td>Android</td>
                                        <td class="number">67</td>
                                        <td class="number">57%</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('scripts')
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7xIfWUi5lpVGGV-srh48ePwaibeHRFm4" type="text/javascript"></script>
<script>
    var map;
    var marker;
    var loc = new google.maps.LatLng(37.089221, -94.514859);

    var mapOptions = {
      zoom: 18,
      center: loc,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('user-location'), mapOptions);

    marker = new google.maps.Marker({
      position: loc,
      map: map
    });
</script>
@endsection