@extends('layouts.app')
@section('titulo', 'Editar Cuenta')
@section('contenido')
    <form action="{{ route('cuenta.update') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <!-- Información de usuario -->
        <div class="row">
            <div class="col-md-12">
                <div class="form-floating">
                    <input type="email" class="form-control" name="email" value="{{ old('email', $usuario->email) }}" required placeholder="Correo Electrónico">
                    <label for="email">Correo Electrónico</label>
                </div>
            </div>
        </div>

        <!-- Contraseña -->
        <div class="row my-3">
            <div class="col-md-6">
                <div class="form-floating">
                    <input type="password" class="form-control" name="password" placeholder="Nueva Contraseña">
                    <label for="password">Nueva Contraseña</label>
                </div>
            </div>
            <div class="col-md-6">
                <div class="form-floating">
                    <input type="password" class="form-control" name="password_confirmation" placeholder="Confirmar Contraseña">
                    <label for="password_confirmation">Confirmar Contraseña</label>
                </div>
            </div>
        </div>

        <!-- Campo para subir foto de perfil -->
        <div class="row my-3">
            <div class="col-md-{{$usuario->imagen_perfil ? 6 : 12}}">
                <div class="form-floating">
                    <input type="file" class="form-control" name="imagen_perfil" id="imagen_perfil" accept="image/*">
                    <label for="imagen_perfil" class="form-label">Foto de Perfil</label>
                </div>
            </div>

            @if($usuario->imagen_perfil)
                <div class="col-md-6">
                    <img src="{{ asset('storage/' . $usuario->imagen_perfil) }}" alt="Foto de Perfil" class="avatar img-fluid rounded" width="100"><br>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" name="eliminar_imagen" value="1" id="eliminar_imagen">
                        <label class="form-check-label" for="eliminar_imagen">
                            Eliminar Foto de Perfil
                        </label>
                    </div>
                </div>


            @endif
        </div>

        <button type="submit" class="btn btn-primary">EDITAR PERFIL</button>
    </form>
@endsection