@extends('layouts.master')

@section('browser-title', 'Meu Perfil')

@include('plugins.parsley')
@include('plugins.notifyjs')
@include('plugins.croppie')
@include('plugins.sweetalerts.default')

@include('profile.scripts.page-js')
@include('profile.scripts.page-css')

@section('content')
    <div class="row">
        <div class="col-xl-3 col-xs-12">
            <div class="card">
                <div class="card-body">
                    <div class="text-center">
                        <img id="img-avatar" src="{{
                            auth()->user()->avatar?
                            asset('storage/images/users/'.auth()->user()->avatar):
                            asset('images/avatar-example.png')
                        }}" alt="profile-image" style="width: 145px;">
                        <div class="crop-image-container mt-3">
                            <div class="image-crop"></div>
                        </div>
                        <div class="crop-buttons row mt-3">
                            <div class="btn-group m-b-10 col-md-12">
                                <button type="button" id="cancel-crop"
                                        class="col-md-6 btn btn-danger btn-sm waves-effect waves-light btn-custom btn-full">
                                    <i class="fa fa-times"></i>
                                </button>
                                <button type="button" id="confirm-crop"
                                        class="col-md-6 btn btn-success btn-sm waves-effect waves-light btn-custom btn-full">
                                    <i class="fa fa-check"></i>
                                </button>
                            </div>
                        </div>
                        <div class="">
                            <h5 class="m-b-5">{{auth()->user()->email}}</h5>
                            <p class="text-muted small">{!! auth()->user()->roles->implode('name', '<br>') !!}</p>
                        </div>
                        <button type="button" onclick="$('#upload').trigger('click')"
                                class="btn btn-info btn-sm waves-effect m-t-10 waves-light" id="upload-button">
                            <span><i class="ion ion-md-images mr-2"></i> Alterar Imagem</span>
                        </button>
                        <input type="file" name="avatar" id="upload" value="Escolha um arquivo" accept="image/*"
                               style="display: none;">
                        <input type="hidden" name="avatar">
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-9 col-xs-12">
            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-pills nav-tabs-custom" role="tablist">
                        <li class="nav-item waves-effect waves-light">
                            <a class="nav-link active" data-toggle="tab" href="#settings" role="tab"
                               aria-selected="true">
                                <span class="d-block d-sm-none"><i class="ion ion-md-settings"></i></span>
                                <span class="d-none d-sm-block">Configurações</span>
                            </a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane p-3 active" id="settings" role="tabpanel">
                            {!! Form::model(auth()->user(),['route'=>'profile.update','method'=>'POST', 'id'=>'profile-update', 'files'=>true]) !!}
                            <form role="form">
                                <div class="form-group">
                                    <label for="FullName">Nome</label>
                                    {!! Form::text('name',null,['id'=>'name','class'=>'form-control', 'required']) !!}
                                </div>
                                <div class="form-group">
                                    <label for="FullName">Login</label>
                                    {!! Form::text('login',auth()->user()->email,['class'=>'form-control', 'readonly']) !!}
                                </div>
                                <div class="clearfix"></div>
                                <div class="row">
                                    <div class="form-group col-md-6 col-xs-12">
                                        <label for="Password">Senha Atual</label>
                                        {!! Form::password('old-password',['id'=>'password','class'=>'form-control']) !!}
                                    </div>
                                    <div class="form-group col-md-6 col-xs-12">
                                        <label for="RePassword">Senha Nova</label>
                                        {!! Form::password('new-password',['id'=>'new-password','class'=>'form-control']) !!}
                                    </div>
                                    <div class="col-md-12">
                                        <button class="btn btn-primary waves-effect waves-light pull-right"
                                                type="submit">
                                            <i class="ion ion-md-save mr-2"></i> Atualizar
                                        </button>
                                    </div>
                                </div>
                            </form>
                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection