@extends('intranet/layout2')
@section('title', 'Mi Perfil')

@section('content2')

    <!-- Vista de Perfil de Usuario -->
    <div class="container-fluid mt-4 px-4 py-2">
        <!-- Encabezado -->
        <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
            <div>
                <h5 class="fw-bold mb-1">Mi Perfil</h5>
                <small class="text-muted">Aca puedes getionar tu Perfil</small>
            </div>
        </div>

        <div class="row g-4">
            <!-- Columna Izquierda: Foto + Información Básica -->
            <div class="col-md-4">
                <div class="card shadow rounded-4">
                    <div class="card-body text-center">
                        <img src="https://appcobranza.com/Sistema_Cobranza/Assets/app/usuarioazul_32.png" class="rounded-circle mb-3 border profile-img" alt="Foto de usuario">
                        <h5 class="card-title mb-0">Michel Cisneros</h5>
                        <small class="text-muted">Administrador</small>
                        <hr>
                        <ul class="list-group list-group-flush text-start">
                            <li class="list-group-item"><strong>Correo:</strong> michel@example.com</li>
                            <li class="list-group-item"><strong>Teléfono:</strong> +51 999 999 999</li>
                            <li class="list-group-item"><strong>Dirección:</strong> Iquitos, Perú</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Columna Derecha: Datos Profesionales / Actividad -->
            <div class="col-md-8">
                <div class="card shadow rounded-4">
                    <div class="card-body">
                        <h5 class="card-title">Información de la Cuenta</h5>
                        <div class="row mt-3">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Nombre de Usuario</label>
                                <input type="text" class="form-control form-control-sm" value="michel2025" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Rol</label>
                                <input type="text" class="form-control form-control-sm" value="Super Admin" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Último acceso</label>
                                <input type="text" class="form-control form-control-sm" value="29/07/2025 08:35 AM" readonly>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-semibold">Estado</label>
                                <span class="badge bg-success d-block py-2">Activo</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sección inferior: Más detalles -->
        <div class="row mt-4">
            <div class="col-12">
                <div class="card shadow rounded-4">
                    <div class="card-body">
                        <h5 class="card-title">Más Información</h5>
                        <p class="card-text text-muted">Aquí puedes agregar datos adicionales del usuario como historial de actividad, permisos asignados, registros de auditoría, etc.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

<style>
    .profile-img {
        width: 120px;
        height: 120px;
        object-fit: cover;
    }
    .card {
        border: none;
    }
</style>