<script setup>
import { useRouter } from 'vue-router';
import { ref } from 'vue';
import { useAuthStore } from '@/stores/Auth';

const router = useRouter();

const authStore = useAuthStore();
const user = authStore.user;

const changePasswordForm = ref({
    password: '',
    password_confirmation: '',
});

const passwordMessage = ref('');
const passwordErrors = ref({});

const changePassword = () => {
    passwordMessage.value = '';
    passwordErrors.value = {};

    authStore.changePassword(changePasswordForm.value).then(({ response, error }) => {
        if (response.status === 200 || response.status === 204) {
            passwordMessage.value = response.data.message;
            changePasswordForm.value.password = '';
            changePasswordForm.value.password_confirmation = '';
            router.push({ name: 'login' });
        } else {
            if (error.response && error.response.data.errors) {
                passwordErrors.value = error.response.data.errors;
            } else {
                // 👇 теперь ошибка записывается в passwordErrors.general
                passwordErrors.value.general = ['Ошибка при смене пароля'];
            }
        }
    });
    // });
};
</script>

<template>
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow-sm">
                    <div class="card-body">
                        <h3 class="card-title text-center mb-4">Профиль</h3>

                        <div class="mb-3 d-flex align-items-center">
                            <label class="form-control-plaintext">Имя:</label>
                            <p class="form-control-plaintext">{{ user.first_name }}</p>
                        </div>

                        <div class="mb-3 d-flex align-items-center">
                            <label class="form-control-plaintext">Отчество:</label>
                            <p class="form-control-plaintext">{{ user.middle_name }}</p>
                        </div>

                        <div class="mb-3 d-flex align-items-center">
                            <label class="form-control-plaintext">Фамилия:</label>
                            <p class="form-control-plaintext">{{ user.last_name }}</p>
                        </div>

                        <div class="mb-3 d-flex align-items-center">
                            <label class="form-control-plaintext">Логин:</label>
                            <p class="form-control-plaintext">{{ user.login }}</p>
                        </div>

                        <div class="mb-3 d-flex align-items-center">
                            <label class="form-control-plaintext">Роль:</label>
                            <p class="form-control-plaintext">{{ user.role?.name }}</p>
                        </div>

                        <div class="mb-3 d-flex align-items-center">
                            <label class="form-control-plaintext">Должность:</label>
                            <p class="form-control-plaintext">{{ user.position }}</p>
                        </div>

                        <div class="mb-4 d-flex align-items-center">
                            <label class="form-control-plaintext">Дата рождения:</label>
                            <p class="form-control-plaintext">{{ user.birthday }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style></style>
