<script setup>
import { ref } from 'vue'
import AppLayout from '../../../../resources/js/layouts/AppLayout.vue'
import ShadowedBox from '../../../Views/Components/ShadowedBox.vue'
import { request } from '../../../../resources/js/components/HttpClient.js'
import {toast} from "vue3-toastify";

const props = defineProps({
    username: String,
})

const password = ref('')
const passwordConfirmation = ref('')
const saving = ref(false)
const successMessage = ref('')
const errorMessage = ref('')

const submit = async () => {
    if (!password.value) {
        toast.error('Bitte gib ein neues Passwort ein')
        return;
    }

    if (password.value !== passwordConfirmation.value) {
        toast.error('Die Wiederholung des Passworts stimmt nicht mit dem Passwort überein')
        return;
    }


    saving.value = true
    successMessage.value = ''
    errorMessage.value = ''

    const result = await request('/api/v1/profile', {
        method: 'POST',
        body: {
            password: password.value,
            password_confirmation: passwordConfirmation.value,
        },
    })

    saving.value = false

    if (result?.success) {
        toast.success(result.message)
        password.value = ''
        passwordConfirmation.value = ''
    } else {
        toast.error(result?.message ?? 'Beim Speichern ist ein Fehler aufgetreten.')
    }
}
</script>

<template>
    <AppLayout title="Profil">
        <shadowed-box style="width: 95%; margin: 20px auto; padding: 20px; overflow-x: hidden;">
            <h2>Mein Profil</h2>
            <form @submit.prevent="submit">
                <table class="form-table" style="width: 90%; margin: auto;">
                    <tr>
                        <td style="width: 250px;">Anmeldename:</td>
                        <td>
                            <span>{{ username }}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>Neues Passwort:</td>
                        <td>
                            <input type="password" v-model="password" autocomplete="new-password" />
                        </td>
                    </tr>
                    <tr>
                        <td>Passwort wiederholen:</td>
                        <td>
                            <input type="password" v-model="passwordConfirmation" autocomplete="new-password" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="btn-row">
                            <button type="submit" class="button" :disabled="saving">
                                {{ saving ? 'Wird gespeichert…' : 'Passwort ändern' }}
                            </button>
                        </td>
                    </tr>
                </table>
            </form>
        </shadowed-box>
    </AppLayout>
</template>

<style scoped>
.feedback {
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-weight: 500;
}
.feedback.success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.feedback.error   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
</style>
