@extends('layout.layout')


@section('content')
    <div class="d-flex justify-content-center">
        <div class="">
            <span class="status"></span>
            <img width="120" height="120" class="rounded-circle border border-white"
                 src="{{ $usuario ? asset($usuario->avatar) : '' }}">
        </div>
    </div>
    <div class="text-center">
        @if($usuario->id == Auth::user()->id)
            <h2>Bem vindo {{$usuario->name}}</h2>
        @else
            <h2 class="d-block">{{$usuario->name}}</h2>
        @endif
        <h4 class="d-block">{{$usuario->conta->nome}}</h4>
        <p class="d-block">{{$usuario->setor->titulo}}</p>
    </div>

{{--    <div class="user-profile row mt-5">--}}
{{--        <div class="col-lg-6 col-md-12">--}}
{{--            <div class="info-block card">--}}
{{--                <div class="card-header">--}}
{{--                    <h4>About me</h4>--}}
{{--                </div>--}}
{{--                <div class="card-body"><span class="description">I am a web developer and designer based in Montreal - Canada,<br> I like read books, good music and nature.</span>--}}
{{--                    <table class="no-border no-strip skills">--}}
{{--                        <tbody class="no-border-x no-border-y">--}}
{{--                        <tr>--}}
{{--                            <td class="item">Ocupation:<span class="icon s7-portfolio"></span></td>--}}
{{--                            <td>Developer and designer</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>--}}
{{--                        <tr>--}}
{{--                            <td class="item">Website:<span class="icon s7-global"></span></td>--}}
{{--                            <td>www.website.com</td>--}}
{{--                        </tr>--}}
{{--                        </tbody>--}}
{{--                    </table>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}

{{--        <div class="col-lg-6 col-md-12">--}}
{{--            <div class="card">--}}
{{--                <div class="card-header">--}}
{{--                    Modelos mais procuradas--}}
{{--                </div>--}}
{{--                <div class="card-body">--}}
{{--                    <div class="card-body">--}}
{{--                        <canvas id="bar-chart2"></canvas>--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </div>--}}
{{--    </div>--}}

{{--    <div class="row">--}}
{{--        <div class="col-12">--}}
{{--            <div class="card">--}}
{{--                <div class="card-header">--}}
{{--                    <h3>Pagamentos</h3>--}}
{{--                </div>--}}
{{--                <div class="card-body">--}}
{{--                    <table class="table table-striped table-fw-widget table-hover">--}}
{{--                        <thead>--}}
{{--                        <tr>--}}
{{--                            <th width="32%">User</th>--}}
{{--                            <th width="45%">Commit</th>--}}
{{--                            <th>Date</th>--}}
{{--                        </tr>--}}
{{--                        </thead>--}}
{{--                        <tbody class="no-border-x">--}}
{{--                        <tr>--}}
{{--                            <td class="user-avatar"> Claire Sassu</td>--}}
{{--                            <td>Initial commit</td>--}}
{{--                            <td>Aug 6, 2015</td>--}}
{{--                        </tr>--}}
{{--                        <tr>--}}
{{--                            <td class="user-avatar"> Joel King</td>--}}
{{--                            <td>Main structure markup</td>--}}
{{--                            <td>Jul 28, 2015</td>--}}
{{--                        </tr>--}}
{{--                        <tr>--}}
{{--                            <td class="user-avatar"><img src="assets/img/avatar7.jpg">Maggie Jackson</td>--}}
{{--                            <td>Left sidebar adjusments</td>--}}
{{--                            <td>Jul 15, 2015</td>--}}
{{--                        </tr>--}}
{{--                        <tr>--}}
{{--                            <td class="user-avatar"> Mike Bolthort</td>--}}
{{--                            <td>Topbar dropdown style</td>--}}
{{--                            <td>Jun 30, 2015</td>--}}
{{--                        </tr>--}}
{{--                        <tr>--}}
{{--                            <td class="user-avatar"> Jhon Voltemar</td>--}}
{{--                            <td>Footer html structure</td>--}}
{{--                            <td>Jun 23, 2015</td>--}}
{{--                        </tr>--}}
{{--                        </tbody>--}}
{{--                    </table>--}}
{{--                </div>--}}
{{--            </div>--}}

{{--            --}}
{{--        </div>--}}
{{--    </div>--}}
@endsection

@section('js')
    <script src="{{asset('assets/lib/chartjs/Chart.min.js')}}" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            var randomScalingFactor = function () {
                return Math.round(Math.random() * 100);
            };

            function barChart2() {
                //Set the chart colors
                var color1 = tinycolor('rgba(60, 80, 250, 0.1)');
                var color2 = tinycolor(App.color.primary).lighten(22);
                var color3 = tinycolor('rgba(235, 108, 108, 0.1)').lighten(22);
                var color4 = tinycolor('rgba(124, 201, 222, 0.1)').lighten(22);

                //Get the canvas element
                var ctx = document.getElementById("bar-chart2");

                var data = {
                    labels: ["Modelos"],
                    datasets: [
                        {
                            label: "Ford KA 1.0",
                            borderColor: color1.toString(),
                            backgroundColor: color1.setAlpha(.8).toString(),
                            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                        },
                        {
                            label: "Toyota Corolla 2.0",
                            borderColor: color2.toString(),
                            backgroundColor: color2.setAlpha(.5).toString(),
                            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                        },
                        {
                            label: "Chevrolet Corsa 1.5",
                            borderColor: color3.toString(),
                            backgroundColor: color3.setAlpha(1).toString(),
                            data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
                        }
                    ]
                };

                var bar = new Chart(ctx, {
                    type: 'horizontalBar',
                    data: data,
                    options: {
                        elements: {
                            rectangle: {
                                borderWidth: 2,
                                borderColor: 'rgb(0, 255, 0)',
                                borderSkipped: 'bottom'
                            }
                        },
                    }
                });
            }

            barChart2();


        });
    </script>
@endsection