@extends('adminlte::page')

@section('css')
    <link rel="stylesheet" href="{{ asset('vendor/adminlte/dist/css/adminlte.css')}}">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
    <style>
        .widget-user-header{
            background-position: center center;
            background-size: cover;
            height: 250px !important;
        }
        .widget-user .card-footer{
            padding: 0;
        }
    </style>
@stop

@section('body')
    <div class="container" id="app">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header p-2">
                        <ul class="nav nav-pills">
                        <li class="nav-item"><a class="nav-link" href="#activity" data-toggle="tab">Atividade</a></li>
                        <li class="nav-item"><a class="nav-link active show" href="#settings" data-toggle="tab">Configurações</a></li>
                        </ul>
                    </div><!-- /.card-header -->
                    <div class="card-body">
                        <div class="tab-content">
                            <!-- Activity Tab -->
                            <div class="tab-pane" id="activity">
                                <h3 class="text-center">Exibir a atividade do usuário</h3>
                            </div>
                            <!-- Setting Tab -->
                            <div class="tab-pane active show" id="settings">
                                <form >
                                    <div class="row">
                                        <div class="col-md-6 form-group">
                                            <label for="inputName" class="control-label">Nome</label>
                                            <input type="" v-model="form.name" class="form-control" id="inputName" placeholder="Name" :class="{ 'is-invalid': form.errors.has('name') }">
                                            <has-error :form="form" field="name"></has-error>
                                        </div>
                                        <div class="col-md-6 form-group">
                                            <label for="inputEmail" class="control-label">Email</label>
                                            <input type="email" v-model="form.email" class="form-control" id="inputEmail" placeholder="Email"  :class="{ 'is-invalid': form.errors.has('email') }">
                                            <has-error :form="form" field="email"></has-error>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 form-group">
                                            <label for="inputExperience" class="control-label">Experiencia</label>
                                            <textarea  v-model="form.bio" class="form-control" id="inputExperience" placeholder="Experience" :class="{ 'is-invalid': form.errors.has('bio') }"></textarea>
                                            <has-error :form="form" field="bio"></has-error>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 form-group">
                                            <label for="photo" class="control-label">Profile Photo</label>
                                            <input type="file" @change="updateProfile" name="photo" class="form-input">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 form-group">
                                            <label for="password" class="control-label">Senha (deixe vazio se não estiver em mudança)</label>
                                            <input type="password"
                                                v-model="form.password"
                                                class="form-control"
                                                id="password"
                                                placeholder="Passport"
                                                :class="{ 'is-invalid': form.errors.has('password') }">
                                           <has-error :form="form" field="password"></has-error>
                                        </div>
                                    </div>

                                    <div class="col-md-12 form-group text-right">
                                        <button @click.prevent="updateInfo" type="submit" class="btn btn-success">Update</button>
                                    </div>
                                </form>
                            </div>
                        <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div><!-- /.card-body -->
                </div>
                <!-- /.nav-tabs-custom -->
          </div>
          <!-- end tabs -->
        </div>
    </div>
@stop

@section('js')
      
@stop

@section('adminlte_js')
    @auth
        <script>
            window.user = @json(auth()->user())
        </script>
    @endauth
    <script src="{{ asset('js/app.js')}}"></script> 
    <script src="{{ asset('js/apps/profile.js')}}"></script> 
    <script src="{{ asset('js/blockClick.js') }}"></script>
@stop