
<script>

import { signup } from '../api';

export default {
  methods: {
    async handleSubmit() {
      const name = this.$refs.nameInput.value.trim();
      const phone = this.$refs.phoneInput.value.trim();
      const password = this.$refs.passwordInput.value.trim();
      const confirmPassword = this.$refs.confirmPasswordInput.value.trim();
      const firstName = name.split(' ')[0];
      const lastName = name.split(' ')[1];
      const phoneRegex = /^7\d{10}$/;
      if (!phoneRegex.test(phone)) {
        alert('Invalid phone number');
        return;
      }
      if (password !== confirmPassword) {
        alert('Passwords do not match');
        return;
      }
      const data = {
        phone,
        password,
        firstName,
        lastName,
      };
      const response = await signup(data);
      console.log(response.data)
    },
  },
};
</script>

<template>
    <div class="blur"/>
    <div class="container">
        <div class="input">
            <div class="input-icon">
                <i class="material-icons">person</i>
            </div>
            <input type="text" placeholder="Имя фамилия" class="input-field" ref="nameInput">
        </div>

        <div class="input">
            <div class="input-icon">
                <i class="material-icons">call</i>
            </div>
            <input type="text" placeholder="7 (999) 999 99 99" class="input-field" ref="phoneInput">
        </div>

        <div class="input">
            <div class="input-icon">
                <i class="material-icons">lock</i>
            </div>
            <input type="text" placeholder="• • • •" class="input-field" ref="passwordInput">
        </div>

        <div class="input">
            <div class="input-icon">
                <i class="material-icons">lock</i>
            </div>
            <input type="text" placeholder="• • • •"  class="input-field" ref="confirmPasswordInput">
        </div>

        <div class="button" style="margin-top: 36px;" @click="handleSubmit">
            <div class="button-text">Зарегистрироваться</div>
        </div>
    </div>
</template>

<style scoped>


.blur {
    z-index: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.7) 35%, rgba(0,0,0,0) 100%);
    backdrop-filter: blur(8px);
}


.input {
    color: #aaaaa9;
    z-index: 1;
    display: flex;
    flex-direction: row;
    background-color: rgb(208, 208, 208);
    height: 64px;
    width: 100%;
    box-shadow: 24px;
    margin-bottom: 12px;
}

.input-icon {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: #F2F2F2FF 1px solid;
    box-shadow: 1px 1px 1px 1px #F2F2F282;
}

.input-field {
    flex: 1;
    padding-left: 16px;
    border: #F2F2F2FF 1px solid;
    box-shadow: 1px 1px 1px 1px #F2F2F282;
}

.container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    padding: 24px 24px;
    background-image: url("../assets/background.png");
}

.button {
    z-index: 1;
    height: 64px; 
    background-color: #657f94; 
    display: flex; 
    width: 100%;
    align-items: center; 
    justify-content: center;
}

.button-text {
    flex: 1; 
    text-align: center; 
    font-weight: bold;
}
</style>