@extends('usuarios.funcionarios.master.layout2')
{{-- @extends('usuarios.funcionarios.admin.menu') --}}
{{-- @extends('usuarios.funcionarios.usuario.menu') --}}

@section('conteudo')
<br>
<nav class="d-none">
    {{ $usuario= Auth::user() }}
    {{ $funcionario= $usuario->getFuncionario }}
    {{ $sector= $funcionario->getSector }}
    {{ $categoria= $funcionario->getCategoria }}
    {{ $pessoa= $usuario->getPessoa }}
</nav>
<div class="container ">
    <nav class="row">

        <nav class="col-12" style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">

            <ol class="breadcrumb justify-content-start">
                <li class="breadcrumb-item"> <a href=""> Usuário</a> </li>
                <li class="breadcrumb-item "  ><a href=""> Area restrita</a></li>
                <li class="breadcrumb-item active" aria-current="page">Perfil</li>
            </ol>
        </nav>
    </nav>
</div>
<div class="p-4">

    <label for="" class="m-3">Meu perfil</label>

    <nav class="container">

        <div class="row">
            <div class="col-4">
                <div class="row rounded p-3 border-5 border-success shadow border-top">
                   <div class="col-12 text-center">
                        <a  class="btn shadow-sm border border-3 btn-lg bg-light rounded-circle   " style="height: 150px; width:150px; background-repeat:no-repeat; background-size:90%; background-position:center; background-image:url({{ asset('storage/img/'.$usuario->avatar) }})">

                        </a>
                        <br><br>
                        <strong><h6>{{ $pessoa->nome }}</h6></strong>
                        <small href="" class="  ">  {{ $usuario->email }}  </small>


                        <br>

                        <div class="text-start">
                            <br>
                            <hr>
                            <b>Identificador:</b><small href="" class="  "> {{ $funcionario->id }}  </small>
                            <br>
                            <hr>
                            <b>Número mecanográfico:</b><small href="" class="  "> {{ $funcionario->nmec }}  </small>
                            <br>
                            <hr>
                            <b>Nome completo:</b><small href="" class="  "> {{ $pessoa->nome }}  </small>

                            <br>
                            <hr>
                            <b>Nome de usuário:</b><small href="" class="  ">    {{ $usuario->name }}  </small>

                            <br>
                            <hr>
                            <b>Email:</b><small href="" class="  ">      {{ $usuario->email }}  </small>

                            <br>
                            <hr>
                            <b>Telefone:</b><small href="" class="  ">   +244   {{ $pessoa->telefone }}  </small>
                            <br>
                            <hr>
                            <b>Sector:</b><small href="" class="  ">      {{ $sector->sector }} </small>

                            <br>
                            <hr>

                            <b>Categoria:</b><small href="" class="  ">      {{ $categoria->categoria }} </small>
                            <br>
                            <hr>

                            <b>Estado da conta:</b><small href="" class="  ">    {{ $usuario->estado }}</small>

                            <br>
                            <hr>
                            <b>Data de criação da conta:</b><small href="" class="  ">   {{ $funcionario->created_at }} </small>


                        </div>

                   </div>
                </div>
                {{-- <div class="row rounded p-3 mt-4 border-5 border-success shadow border-top">
                    <div class="col-12 text-start">

                        <br>
                        <strong><h6>SOBRE</h6></strong>

                        <br><br>

                        <div class="text-start">

                            <b><i class="fa fa-book"></i> Formação</b> <br>
                            <small class="text-justify" >
                                Lorem ipsum dolor, sit amet consectetur sit amet consectetur sit amet consectetur adipisicing elit.
                            </small>
                            <br>
                            <hr>
                        </div>
                        <div class="text-start">

                            <b><i class="fa fa-book"></i> Localização</b> <br>
                            <small class="text-justify" >
                                Lorem ipsum dolor, sit amet consectetur sit amet consectetur sit amet consectetur adipisicing elit.
                            </small>
                            <br>
                            <hr>
                        </div>
                        <div class="text-start">

                            <b><i class="fa fa-book"></i> Ligação com a GESTDOC</b> <br>
                            <small class="text-justify" >
                                Lorem ipsum dolor, sit amet consectetur sit amet consectetur sit amet consectetur adipisicing elit.
                            </small>
                            <br>
                            <hr>
                        </div>
                        <div class="text-start">

                            <b><i class="fa fa-book"></i> Habilidades</b> <br>
                            <small class="text-justify" >
                                Lorem ipsum dolor, sit amet consectetur sit amet consectetur sit amet consectetur adipisicing elit.
                            </small>
                            <br>
                            <hr>
                        </div>
                   </div>
                </div> --}}
            </div>
            <div class="col-7 offset-1">
                <div class="row rounded p-3 border-5 border-success shadow border-top">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                          <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Dashboard</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Pendentes</a>
                        </li>
                        <li class="nav-item" role="presentation">
                          <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Produtividade</a>
                        </li>
                      </ul>
                      <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active pt-5 text-justify" id="home" role="tabpanel" aria-labelledby="home-tab">

                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore commodi voluptatum labore! Quos veniam sunt facere dolorum maiores, nesciunt animi suscipit magnam ea quasi voluptate, sed aliquid ratione? Neque, obcaecati.
                            lotem
                        </div>
                        <div class="tab-pane fade pt-5 text-justify" id="profile" role="tabpanel" aria-labelledby="profile-tab">

                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore commodi voluptatum labore! Quos veniam sunt facere dolorum maiores, nesciunt animi suscipit magnam ea quasi voluptate, sed aliquid ratione? Neque, obcaecati.
                            lotem
                        </div>
                        <div class="tab-pane fade pt-5 text-justify" id="contact" role="tabpanel" aria-labelledby="contact-tab">

                            Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore commodi voluptatum labore! Quos veniam sunt facere dolorum maiores, nesciunt animi suscipit magnam ea quasi voluptate, sed aliquid ratione? Neque, obcaecati.
                            lotem
                        </div>
                      </div>

                </div>
            </div>
        </div>

    </nav>
</div>
@endsection