@extends('layouts.basico')
@section('content')
    <title>Perfil Usuário - CDA</title>

        <div class="container" data-aos="fade-up">
            <main id="main" class="main">
                <section class="section profile">
                    <div class="flex row">

                        <div class="col-md-3" id="card-perfil-usuario">
                            <div class="card" id="painel-perfil-user">
                                <div class="card-body profile-card pt-4 d-flex flex-column align-items-center">
                                    @if($informacoesUsuario['foto'] === null)
                                        <img src="{{asset('img/user-img.png')}}" alt="Profile" class="rounded-circle">
                                    @endif
                                    @if($informacoesUsuario['foto'] != null)
                                        <img src="http://chamados.casasdaagua.com.br/storage/{{$informacoesUsuario['foto']}}" alt="Profile" class="rounded-circle">
                                    @endif
                                    <h2 class="titulo-usuario-perfil">{{ $informacoesUsuario['usuario']}}</h2>
                                    <h3>{{ $informacoesUsuario['cargo']}}</h3>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="card" id="card-perfil-geral">
                                <div class="card-body pt-3">
                                    <ul class="nav nav-tabs nav-tabs-bordered">
                                        <li class="nav-item">
                                        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#profile-overview">Perfil</button>
                                        </li>

                                        <li class="nav-item">
                                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-edit">Edit Perfil</button>
                                        </li>

                                        <li class="nav-item">
                                        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#profile-change-password">Alterar Senha</button>
                                        </li>
                                    </ul>
                                    <div class="tab-content pt-2">

                                        <div class="tab-pane fade show active profile-overview" id="profile-overview">

                                            <h5 class="card-title">Informações Pessoais</h5>

                                            <div class="flex row">
                                                <div class="col-lg-3 col-md-4 label ">Nome</div>
                                                <div class="col-lg-9 col-md-8"><span>{{ $informacoesUsuario['usuario']}}</span></div>
                                            </div>

                                            <div class="flex row">
                                                <div class="col-lg-3 col-md-4 label">Cargo</div>
                                                <div class="col-lg-9 col-md-8">{{ $informacoesUsuario['cargo']}}</div>
                                            </div>

                                            <div class="flex row">
                                                <div class="col-lg-3 col-md-4 label">Email</div>
                                                <div class="col-lg-9 col-md-8">{{ $informacoesUsuario['email']}}</div>
                                            </div>

                                        </div>

                                        <div class="tab-pane fade profile-edit pt-3" id="profile-edit">
                                            <form method="POST" action="http://chamados.casasdaagua.com.br/api/trocafoto" class="flex row g-3 needs-validation" enctype="multipart/form-data">
                                                @csrf
                                                <div class="flex row mb-3">
                                                    <label for="profileImage" class="col-md-4 col-lg-3 col-form-label">Foto Perfil</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        @if($informacoesUsuario['foto'] === null)
                                                            <img src="{{asset('img/user-img.png')}}" class="atualPhoto" alt="Profile" id="profileImage">
                                                        @else
                                                            <img src="http://chamados.casasdaagua.com.br/storage/{{$informacoesUsuario['foto']}}" class="atualPhoto" alt="Profile" id="profileImage">
                                                        @endif                                                            
                                                        <img src="" class="newPhoto hidden" alt="Profile" id="newProfileImage">
                                            
                                                        <div class="pt-2">
                                                            <label for="apply" id="label-apply" title="Adicionar foto">
                                                                <input type="file" name="imagem" id="apply" accept="image/png, image/jpeg" width="120" height="120" onchange="addPhoto(event)">
                                                                <i class="bi bi-upload"></i>
                                                            </label>
                                                            <input type="hidden" id="fieldPhotoVerifica" name="photo" value="{{ $informacoesUsuario['foto'] }}">
                                                            <input type="hidden" name="id" value="{{ $informacoesUsuario['id'] }}">

                                                            <a class="" id="removeFoto" onclick="clearFieldPhoto()" title="Remover foto"><i class="bi bi-trash" id="delete-photo"></i></a>
                                                            <span class="badge border-danger border-1 text-danger hidden" id="foto-removida"><i class="bi bi-check-circle me-1"></i>Foto removida! Salve as informações!</span>
                                                            <span class="badge border-success border-1 text-success hidden" id="foto-add"><i class="bi bi-check-circle me-1"></i>Foto adicionada! Salve as informações!</span>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="flex row mb-3">
                                                    <label for="fullName" class="col-md-4 col-lg-3 col-form-label">Nome</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <input name="name" type="text" class="form-control" id="fieldName" value="{{ $informacoesUsuario['usuario'] }}">
                                                    </div>
                                                </div>

                                                <div class="flex row mb-3">
                                                    <label for="Job" class="col-md-4 col-lg-3 col-form-label">Cargo</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <input name="role" type="text" class="form-control" id="fieldOffice" value="{{ $informacoesUsuario['cargo'] }}">
                                                    </div>
                                                </div>

           

                                                <div class="flex row mb-3">
                                                    <label for="Email" class="col-md-4 col-lg-3 col-form-label">Email</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <input name="email" type="email" class="form-control" id="fieldEmail" value="{{ $informacoesUsuario['email'] }}">
                                                    </div>
                                                </div>

                                                <div class="text-center">
                                                    <button type="submit" class="btn btn-primary">Salvar</button>
                                                </div>
                                            </form>
                                        </div>

                                        <div class="tab-pane fade pt-3" id="profile-change-password">
                                            <form method="POST" action=" {{ route('alterarSenhaUsuario') }} " class="flex row g-3">
                                                @csrf
                                                <div class="flex row mb-3">
                                                    <label for="newPassword" class="col-md-4 col-lg-3 col-form-label">Nova senha</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <input name="newPassword" type="password" class="form-control" min="6" id="newPassword" required >
                                                    </div>
                                                </div>

                                                <div class="flex row mb-3">
                                                    <label for="codeSecurity" class="col-md-4 col-lg-3 col-form-label">Validador</label>
                                                    <div class="col-md-2 col-lg-2">
                                                        <input type="password" name="codeSecurity" class="form-control" id="codeSecurity" required >
                                                    </div>
                                                </div>

                                                <div class="text-center">
                                                    <button type="submit" class="btn btn-primary">Salvar</button>
                                                </div>
                                            </form>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            @if(session('msgSuccess'))
                                <div class="col-md-12 alert alert-success bg-success text-light border-0 alert-dismissible fade show" role="alert">
                                    <i class="bi bi-check-lg"></i> {{ session('msgSuccess') }}
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif
                            @if(session('msgAlteracaoError'))
                                <div class="col-md-12 alert alert-danger bg-danger text-light border-0 alert-dismissible fade show" role="alert">
                                    <i class="bi bi-emoji-fflex rown"></i> {{ session('msgAlteracaoError') }}
                                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            @endif
                        </div>
                    </div>
                </section>
            </main>
        </div>
@endsection