@extends('layouts.app')
@section('content')
    <div class="unwrap">
        <div class="bg-cover" style="background-image: url(/img/profile-bg.jpg)">
            <div class="p-4 text-center text-white">
                <img class="img-thumbnail rounded-circle thumb128" src="/img/user/09.jpg" alt="Image" />
                <h3 class="m-0">Ted Berry</h3>
                <p>Lead director</p>
                <p>Proin metus justo, commodo in ultrices at, lobortis sit amet dui. Fusce dolor purus, adipiscing a tempus at, gravida vel purus.</p>
            </div>
        </div>
        <div class="text-center bg-gray-dark p-3 mb-4">
            <div class="row">
                <div class="col-4 br">
                    <h3 class="m-0">400</h3>
                    <p class="m-0">
                        <span class="d-none d-md-inline">Profile</span>
                        <span>Views</span>
                    </p>
                </div>
                <div class="col-4 br">
                    <h3 class="m-0">2000</h3>
                    <p class="m-0">Likes</p>
                </div>
                <div class="col-4">
                    <h3 class="m-0">100</h3>
                    <p class="m-0">Following</p>
                </div>
            </div>
        </div>
        <div class="p-3">
            <div class="row">
                <div class="col-xl-9">
                    <!-- START timeline-->
                    <ul class="timeline">
                        <li class="timeline-separator" data-datetime="Today"></li>
                        <!-- START timeline item-->
                        <li>
                            <div class="timeline-badge primary"><em class="fa fa-comment"></em></div>
                            <div class="timeline-card">
                                <div class="popover left">
                                    <div class="arrow"></div>
                                    <div class="popover-body">
                                        <div class="d-flex align-items-center mb-3">
                                            <img class="mr-3 rounded-circle thumb48" src="/img/user/05.jpg" alt="Image" />
                                            <p class="m-0">
                                                <a class="text-muted" href="#"><strong>Aiden Curtis</strong></a>
                                                <br />
                                                posted a comment
                                            </p>
                                        </div>
                                        <p><em>"Fusce pellentesque congue justo in rutrum. Praesent non nulla et ligula luctus mattis eget at lacus."</em></p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- END timeline item-->
                        <!-- START timeline item-->
                        <li class="timeline-inverted">
                            <div class="timeline-badge green"><em class="far fa-image"></em></div>
                            <div class="timeline-card">
                                <div class="popover right">
                                    <div class="arrow"></div>
                                    <div class="popover-body">
                                        <div class="d-flex align-items-center mb-3">
                                            <img class="mr-3 rounded-circle thumb48" src="/img/user/04.jpg" alt="Image" />
                                            <p class="m-0">
                                                <a class="text-muted" href="#"><strong>James Payne</strong></a>
                                                <br />
                                                shared a new idea
                                            </p>
                                        </div>
                                        <a href="#"><img class="img-fluid img-thumbnail" src="/img/mockup.png" alt="Img" /></a>
                                        <p class="text-muted my-2">3 Comments</p>
                                        <div class="media bb p-2">
                                            <img class="mr-2 rounded-circle thumb32" src="/img/user/05.jpg" alt="Image" />
                                            <div class="media-body">
                                                <p class="m-0">
                                                    <a href="#"><strong>Aiden Curtis</strong></a>
                                                </p>
                                                <div class="text-sm text-muted">Hey looks great!</div>
                                            </div>
                                            <small class="ml-auto text-muted">12m ago</small>
                                        </div>
                                        <div class="media bb p-2">
                                            <img class="mr-2 rounded-circle thumb32" src="/img/user/08.jpg" alt="Image" />
                                            <div class="media-body">
                                                <p class="m-0">
                                                    <a href="#"><strong>Samantha Murphy</strong></a>
                                                </p>
                                                <div class="text-sm text-muted">Excellento job!</div>
                                            </div>
                                            <small class="ml-auto text-muted">30m ago</small>
                                        </div>
                                        <div class="media bb p-2">
                                            <img class="mr-2 rounded-circle thumb32" src="/img/user/04.jpg" alt="Image" />
                                            <div class="media-body">
                                                <p class="m-0">
                                                    <a href="#"><strong>James Payne</strong></a>
                                                </p>
                                                <div class="text-sm text-muted">WIP guys :)</div>
                                            </div>
                                            <small class="ml-auto text-muted">30m ago</small>
                                        </div>
                                        <form class="mt-2" method="post" action="#"><textarea class="form-control no-resize" placeholder="Comment..." rows="1"></textarea></form>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- START timeline item-->
                        <li>
                            <div class="timeline-badge info"><em class="far fa-file"></em></div>
                            <div class="timeline-card">
                                <div class="popover left">
                                    <div class="arrow"></div>
                                    <div class="popover-body">
                                        <div class="d-flex align-items-center mb-3">
                                            <img class="mr-3 rounded-circle thumb48" src="/img/user/08.jpg" alt="Image" />
                                            <p class="m-0">
                                                <a class="text-muted" href="#"><strong>Samantha Murphy</strong></a>
                                                <br />
                                                shared new files
                                            </p>
                                        </div>
                                        <a class="mb-2 text-info d-flex align-items-center link-unstyled" href="#">
                                            <span>
                                                <em class="far fa-file fa-fw mr-2 text-inverse"></em>
                                                <span>framework-docs-part1.pdf</span>
                                            </span>
                                            <em class="ml-auto fa fa-download fa-fw text-info"></em>
                                        </a>
                                        <a class="mb-2 text-info d-flex align-items-center link-unstyled" href="#">
                                            <span>
                                                <em class="far fa-file fa-fw mr-2 text-inverse"></em>
                                                <span>framework-docs-part2.pdf</span>
                                            </span>
                                            <em class="ml-auto fa fa-download fa-fw text-info"></em>
                                        </a>
                                        <a class="mb-2 text-info d-flex align-items-center link-unstyled" href="#">
                                            <span>
                                                <em class="far fa-file fa-fw mr-2 text-inverse"></em>
                                                <span>framework-docs-part3.pdf</span>
                                            </span>
                                            <em class="ml-auto fa fa-download fa-fw text-info"></em>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- END timeline item-->
                        <!-- START timeline item-->
                        <li>
                            <div class="timeline-badge purple"><em class="fas fa-map-marker-alt"></em></div>
                            <div class="timeline-card">
                                <div class="popover left">
                                    <div class="arrow"></div>
                                    <div class="popover-body">
                                        <div class="d-flex align-items-center mb-3">
                                            <img class="mr-3 rounded-circle thumb48" src="/img/user/08.jpg" alt="Image" />
                                            <p class="m-0">
                                                <a class="text-muted" href="#"><strong>Samantha Murphy</strong></a>
                                                <br />
                                                shared new location
                                            </p>
                                        </div>
                                        <p><em>"Hey guys! Please check the new location for tomorrows's meeting."</em></p>
                                        <div class="gmap" data-gmap="" data-address="276 N TUSTIN ST, ORANGE, CA 92867" data-styled="data-styled"></div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- END timeline item-->
                        <!-- START timeline separator-->
                        <li class="timeline-separator" data-datetime="Yesterday"></li>
                        <!-- END timeline separator-->
                        <!-- START timeline item-->
                        <li>
                            <div class="timeline-badge success"><em class="fas fa-ticket-alt"></em></div>
                            <div class="timeline-card">
                                <div class="popover left">
                                    <div class="arrow"></div>
                                    <div class="popover-body">
                                        <div class="d-flex align-items-center mb-3">
                                            <img class="mr-3 rounded-circle thumb48" src="/img/user/12.jpg" alt="Image" />
                                            <p class="m-0">
                                                <a class="text-muted" href="#"><strong>Dennis Green</strong></a>
                                                <br />
                                                closed issue
                                                <a class="ml-2" href="#">#548795</a>
                                            </p>
                                        </div>
                                        <p><em>&mdash; bootstrap.js needs update</em></p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- END timeline item-->
                        <li class="timeline-inverted">
                            <div class="timeline-badge warning"><em class="fas fa-ticket-alt"></em></div>
                            <div class="timeline-card">
                                <div class="popover right">
                                    <div class="arrow"></div>
                                    <div class="popover-body">
                                        <div class="d-flex align-items-center mb-3">
                                            <img class="mr-3 rounded-circle thumb48" src="/img/user/09.jpg" alt="Image" />
                                            <p class="m-0">
                                                <a class="text-muted" href="#"><strong>Ted Berry</strong></a>
                                                <br />
                                                assigned
                                                <a class="text-muted" href="#"><strong>Dennis Green</strong></a>
                                                to issue
                                                <a class="ml-2" href="#">#548795</a>
                                            </p>
                                        </div>
                                        <p class="m-0"><em>&mdash; bootstrap.js needs update</em></p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- END timeline item-->
                        <!-- START timeline item-->
                        <li>
                            <div class="timeline-badge danger"><em class="fas fa-ticket-alt"></em></div>
                            <div class="timeline-card">
                                <div class="popover left">
                                    <div class="arrow"></div>
                                    <div class="popover-body">
                                        <div class="d-flex align-items-center mb-3">
                                            <img class="mr-3 rounded-circle thumb48" src="/img/user/10.jpg" alt="Image" />
                                            <p class="m-0">
                                                <a class="text-muted" href="#"><strong>Jon Perry</strong></a>
                                                <br />
                                                opened issue
                                                <a class="ml-2" href="#">#548795</a>
                                            </p>
                                        </div>
                                        <p><em>&mdash; bootstrap.js needs update</em></p>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <!-- END timeline item-->
                        <!-- START timeline item-->
                        <li class="timeline-end">
                            <a class="timeline-badge" href="#"><em class="fa fa-plus"></em></a>
                        </li>
                        <!-- END timeline item-->
                    </ul>
                    <!-- END timeline-->
                </div>
                <div class="col-xl-3">
                    <div class="card card-default">
                        <div class="card-body">
                            <div class="text-center">
                                <h3 class="mt-0">Ted Berry</h3>
                                <p>Lead director</p>
                            </div>
                            <hr />
                            <ul class="list-unstyled px-4">
                                <li>
                                    <em class="fa fa-home fa-fw mr-3"></em>
                                    Somewhere, Neverland
                                </li>
                                <li>
                                    <em class="fa fa-briefcase fa-fw mr-3"></em>
                                    <a href="#">Themicon.co</a>
                                </li>
                                <li>
                                    <em class="fa fa-graduation-cap fa-fw mr-3"></em>
                                    Master Designer
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card card-default">
                        <div class="card-header">
                            <a class="float-right" href="#"><em class="icon-plus text-muted"></em></a>
                            Contacts
                        </div>
                        <div class="list-group">
                            <!-- START User status-->
                            <a class="p-2 mt-0 list-group-item d-flex" href="#">
                                <!-- Contact avatar-->
                                <img class="mr-3 rounded-circle thumb32" src="/img/user/05.jpg" alt="Image" />
                                <!-- Contact info-->
                                <span>
                                    <strong>Juan Sims</strong>
                                    <br />
                                    <span class="text-sm text-muted">Designeer</span>
                                </span>
                                <span class="ml-auto circle bg-success circle-lg"></span>
                            </a>
                            <!-- END User status-->
                            <!-- START User status-->
                            <a class="p-2 mt-0 list-group-item d-flex" href="#">
                                <!-- Contact avatar-->
                                <img class="mr-3 rounded-circle thumb32" src="/img/user/06.jpg" alt="Image" />
                                <!-- Contact info-->
                                <span>
                                    <strong>Maureen Jenkins</strong>
                                    <br />
                                    <span class="text-sm text-muted">Designeer</span>
                                </span>
                                <span class="ml-auto circle bg-success circle-lg"></span>
                            </a>
                            <!-- END User status-->
                            <!-- START User status-->
                            <a class="p-2 mt-0 list-group-item d-flex" href="#">
                                <!-- Contact avatar-->
                                <img class="mr-3 rounded-circle thumb32" src="/img/user/07.jpg" alt="Image" />
                                <!-- Contact info-->
                                <span>
                                    <strong>Billie Dunn</strong>
                                    <br />
                                    <span class="text-sm text-muted">Designeer</span>
                                </span>
                                <span class="ml-auto circle bg-danger circle-lg"></span>
                            </a>
                            <!-- END User status-->
                            <!-- START User status-->
                            <a class="p-2 mt-0 list-group-item d-flex" href="#">
                                <!-- Contact avatar-->
                                <img class="mr-3 rounded-circle thumb32" src="/img/user/08.jpg" alt="Image" />
                                <!-- Contact info-->
                                <span>
                                    <strong>Tomothy Roberts</strong>
                                    <br />
                                    <span class="text-sm text-muted">Designer</span>
                                </span>
                                <span class="ml-auto circle bg-warning circle-lg"></span>
                            </a>
                            <!-- END User status-->
                            <a class="media p-2 mt-0 list-group-item list-group-item-action text-center text-muted" href="#">View all contacts</a>
                        </div>
                    </div>
                    <div class="card card-default">
                        <div class="list-group">
                            <a class="list-group-item list-group-item action d-flex" href="#">
                                <div>
                                    <h4>1000</h4>
                                    <span>Friends</span>
                                </div>
                                <em class="ml-auto fa fa-users fa-lg fa-fw text-muted mt-2"></em>
                            </a>
                            <a class="list-group-item list-group-item action d-flex" href="#">
                                <div>
                                    <h4>3000</h4>
                                    <span>Subscriptions</span>
                                </div>
                                <em class="ml-auto fa fa-rss fa-lg fa-fw text-muted mt-2"></em>
                            </a>
                            <a class="list-group-item list-group-item action d-flex" href="#">
                                <div>
                                    <h4>100</h4>
                                    <span>Places</span>
                                </div>
                                <em class="ml-auto fas fa-map-marker-alt fa-lg fa-fw text-muted mt-2"></em>
                            </a>
                            <a class="list-group-item list-group-item action d-flex" href="#">
                                <div>
                                    <h4>400</h4>
                                    <span>Projects</span>
                                </div>
                                <em class="ml-auto fa fa-briefcase fa-lg fa-fw text-muted mt-2"></em>
                            </a>
                            <a class="list-group-item list-group-item action d-flex" href="#">
                                <div>
                                    <h4>17300</h4>
                                    <span>Twees</span>
                                </div>
                                <em class="ml-auto fab fa-twitter fa-lg fa-fw text-muted mt-2"></em>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('styles')@endsection
@section('scripts')
    <!-- GOOGLE MAPS -->
    <script src="//maps.google.com/maps/api/js"></script>
    <script src="{{ mix('/js/gmap.js') }}"></script>
@endsection