@extends('layouts.main')

    <title>Perfil - Indicadores</title>

    <header id="header" class="header fixed-top d-flex align-items-center">
        <div class="d-flex align-items-center justify-content-between">
            <a href="{{ route('acessoGerente') }}" class="logo d-flex align-items-center" id="logo-nome">
                <img src="{{asset('assets/img/logo.png')}}">
                <span class="d-none d-lg-block">INDICADORES</span>
            </a>
        </div>

        <nav class="header-nav ms-auto">
          <ul class="d-flex align-items-center">
                <li class="nav-item dropdown pe-3">
                    <a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
                        @if($informacoesUsuarioLogado->foto === null)
                            <img src="{{asset('assets/img/user-img.png')}}" alt="Profile" class="rounded-circle">
                        @endif
                        @if($informacoesUsuarioLogado->foto != null)
                            <img src="{{ asset('storage/'. $informacoesUsuarioLogado->foto) }}" alt="Profile" class="rounded-circle">
                        @endif
                        <span class="d-none d-md-block dropdown-toggle ps-2" id="usuario-logado">{{ $informacoesUsuarioLogado->usuario }}</span>
                    </a>

                    <ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
                        <li class="dropdown-header">
                            <h6>{{ $informacoesUsuarioLogado->usuario }}</h6>
                            <span>{{ $informacoesUsuarioLogado->cargo }}</span>
                        </li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        @if($informacoesUsuarioLogado->tipo_usuario == 3)
                        <li>
                            <a class="dropdown-item d-flex align-items-center" href="{{ route('acessoPerfil') }}">
                                <i class="bi bi-person"></i>
                                <span>Meu Perfil</span>
                            </a>
                        </li>
                        @endif
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        @if($informacoesUsuarioLogado->tipo_usuario == 3)
                        <li>
                            <a class="dropdown-item d-flex align-items-center" href="{{ route('acessoGerente') }}">
                                <i class="bi bi-card-checklist"></i>
                                <span>Indicadores</span>
                            </a>
                        </li>
                        @endif
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li>
                            <a class="dropdown-item d-flex align-items-center" href="{{ route('logoutUsuario') }}">
                                <i class="bi bi-box-arrow-right"></i>
                                <span>Logout</span>
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </nav>
    </header>

    <section class="testimonials" id="dash-perfil-testimonials">
        <div class="container" data-aos="fade-up">
            <main id="main" class="main">
                <section class="section profile">
                    <div class="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($informacoesUsuarioLogado['foto'] === null)
                                        <img src="{{asset('assets/img/user-img.png')}}" alt="Profile" class="rounded-circle">
                                    @endif
                                    @if($informacoesUsuarioLogado['foto'] != null)
                                        <img src="{{ asset('storage/'. $informacoesUsuarioLogado['foto']) }}" alt="Profile" class="rounded-circle">
                                    @endif
                                    <h2 class="titulo-usuario-perfil">{{ $informacoesUsuarioLogado['usuario']}}</h2>
                                    <h3>{{ $informacoesUsuarioLogado['cargo']}}</h3>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8">
                            <div class="card">
                                <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="row">
                                                <div class="col-lg-3 col-md-4 label ">Nome</div>
                                                <div class="col-lg-9 col-md-8"><span>{{ $informacoesUsuarioLogado['usuario']}}</span></div>
                                            </div>

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

                                            <div class="row">
                                                <div class="col-lg-3 col-md-4 label">Telefone</div>
                                                <div class="col-lg-9 col-md-8">{{ $informacoesUsuarioLogado['fone'] }}</div>
                                            </div>

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

                                        <div class="tab-pane fade profile-edit pt-3" id="profile-edit">
                                            <form method="POST" action="{{ route('editarPerfilUsuario') }}" class="row g-3 needs-validation" enctype="multipart/form-data">
                                                @csrf
                                                @method('PUT')
                                                <div class="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($informacoesUsuarioLogado['foto'] === null)
                                                            <img src="{{asset('assets/img/user-img.png')}}" alt="Profile">
                                                        @endif
                                                        @if($informacoesUsuarioLogado['foto'] != null)
                                                            <img src="{{ asset('storage/'. $informacoesUsuarioLogado['foto']) }}" alt="Profile">
                                                        @endif
                                                        <div class="pt-2">

                                                            <label for="apply" id="label-apply" title="Adicionar foto">
                                                                <input type="file" name="fieldPhotoUser" id="apply"  onclick="addPhoto()" accept="image/png, image/jpeg" width="120" height="120">
                                                                <i class="bi bi-upload"></i>
                                                            </label>
                                                            <input type="hidden" id="fieldPhotoVerifica" name="fieldPhotoVerifica" value="{{ $informacoesUsuarioLogado['foto'] }}">
                                                            <a class="btn btn-danger btn-sm" id="removeFoto" onclick="clearFieldPhoto()" title="Remove foto"><i class="bi bi-trash" id="delete-photo"></i></a>
                                                            <span class="badge border-danger border-1 text-danger" id="foto-removida" type="hidden"><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" id="foto-add" type="hidden"><i class="bi bi-check-circle me-1"></i>Foto adicionada! Salve as informações!</span>

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

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

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

                                                <div class="row mb-3">
                                                    <label for="telefoneUsuario" class="col-md-4 col-lg-3 col-form-label">Telefone</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <input name="telefoneUsuario" type="text" class="form-control" id="telefoneUsuario" value="{{ $informacoesUsuarioLogado['fone'] }}">
                                                    </div>
                                                </div>

                                                <div class="row mb-3">
                                                    <label for="emailUsuario" class="col-md-4 col-lg-3 col-form-label">Email</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <input name="emailUsuario" type="email" class="form-control" id="emailUsuario" value="{{ $informacoesUsuarioLogado['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="row g-3">
                                                @csrf
                                                <div class="row mb-3">
                                                    <label for="novaSenha" class="col-md-4 col-lg-3 col-form-label">Nova senha</label>
                                                    <div class="col-md-8 col-lg-9">
                                                        <input name="novaSenha" type="password" class="form-control" min="6" id="novaSenha" required >
                                                    </div>
                                                </div>

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

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

    <footer id="footer" class="footer">
        <div class="copyright">
            © Copyright <strong><span><a href="#">Casas da Água</a></span></strong>. Todos os direitos reservados
        </div>
    </footer>