@extends('layout.home', ['valor' => 'perfil'])

@section('content')
    <div class="container" style="margin: 0 auto; padding: 20px; background-color: #f9f9f9; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
        <h1 style="text-align: center; color: #333;">Perfil de Usuario</h1>
        <div class="profile" style="display: flex; align-items: flex-start; text-align: left; margin: 5vh;">
            <div style="width: 150px; height: 150px; border-radius: 50%; margin-right: 20px; background-color: #ccc; display: flex; align-items: center; justify-content: center; font-size: 50px; color: white;">
            <span>{{ substr($authUser->nombre, 0, 1) }}</span>
            </div>
            <div style="flex: 1;">
            <h1 class="mb-3"><strong>Datos del usuario</strong></h1>
            <h2 style="color: #555;">Nombre: <strong>{{ $authUser->nombre }}</strong></h2>
            <p style="color: #777;">Email: {{ $authUser->email ?? 'No tiene' }}</p>
            <p style="color: #777;">Fecha de Registro: {{ $authUser->created_at->format('d-m-Y') ?? 'Sin fecha'}}</p>
            </div>
            <div style="flex: 1;">
            <h1 class="mb-3"><strong>Datos del servidor</strong></h1>
            <h2 style="color: #555;">Host: <strong>oficina.itego.com.ar</strong></h2>
            <p style="color: #777;">Puerto: 33833</p>
            <p style="color: #777;">FTP Usuario: {{ $cliente->ftp_usuario ?? 'Sin datos' }}</p>
            <p style="color: #777;">FTP Contraseña: 
                <span id="ftp-password" style="letter-spacing: 3px;">{{ str_repeat('*', strlen($cliente->ftp_password ?? '')) }}</span>
                <button onclick="togglePassword()" style="background: none; border: none; cursor: pointer;">
                    <svg id="toggle-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-fill" viewBox="0 0 16 16">
                    <path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/>
                    <path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"/>
                    </svg>
                </button>
            </p>
            <script>
                function togglePassword() {
                    var passwordSpan = document.getElementById('ftp-password');
                    var toggleIcon = document.getElementById('toggle-icon');
                    if (passwordSpan.textContent.includes('*')) {
                        passwordSpan.textContent = "{{ $cliente->ftp_password ?? 'Sin datos' }}";
                        toggleIcon.setAttribute('class', 'bi bi-eye-slash-fill');
                        toggleIcon.innerHTML = '<path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7 7 0 0 0 2.79-.588M5.21 3.088A7 7 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474z"/><path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12z"/>';

                    } else {
                        passwordSpan.textContent = "{{ str_repeat('*', strlen($cliente->ftp_password ?? '')) }}";
                        toggleIcon.setAttribute('class', 'bi bi-eye-fill');
                        toggleIcon.innerHTML = '<path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0"/><path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8m8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7"/>';
                    }
                }
            </script>
            </div>
        </div>
    </div>
@endsection