<template>
  <BaseLayout>
    <BaseContainer>
      <div class="pb-5">
        <Heading tag="h1" level="primary">A warm welcome from Taakd.</Heading>
        <Heading tag="h2" level="secondary-2" class="mt-1">
          Let’s set up your account. All fields below are required.
        </Heading>
      </div>
      <p class="my-5">[User's Name]</p>
      <form>
        <div class="py-5">
          <Heading class="my-1" tag="h3" level="secondary-2"
            >Create New Password</Heading
          >
          <div class="py-3 lg:w-1/2">

            <!-- <StyledInput
              @input-change="handleChange"
              labelText="Enter password"
              isMandatory="true"
              infoText="ghfg"
              inputType="password"
              name="password"
              id="password"
              :isValid="data.password.isValid"
            :validationMessage="data.password.validationMessage"
            /> -->
            <FormControl
              :type="'password'"
              size="sm"
              variant="subtle"
              placeholder="Placeholder"
              :disabled="false"
              label="Enter password"
              v-model="enterPassword"
              :class="[
                'mb-2 text-sm flex items-center',
                {
                  [`text-${labelColor}`]: true,
                },
              ]"
            />
          </div>
          <div class="py-3 lg:w-1/2">
            <!-- <StyledInput
              @input-change="handleChange"
              labelText="Enter password"
              isMandatory="true"
              infoText="ghfg"
              name="passwordConfirm"
              id="passwordConfirm"
              inputType="password"
              :isValid="data.passwordConfirm.isValid"
            :validationMessage="data.passwordConfirm.validationMessage"
            /> -->
            <FormControl 
              :type="'password'"
              size="sm"
              variant="subtle"
              placeholder="Placeholder"
              :disabled="false"
              label="Confirm Password"
              v-model="confirmPassword"
              :class="[
                'mb-2 text-sm flex items-center',
                {
                  [`text-${labelColor}`]: true,
                },
              ]"
            />
          </div>
        </div>
        <div class="py-5">
          <Heading class="my-1" tag="h3" level="secondary-2"
            >Text notifications</Heading
          >
          <p class="text-sm font-medium"
            >Would you like to subscribe to text messages for notifications and
            password resets?</p
          >
          <div>
            <div class="flex items-start gap-1 py-2">
              <div class="h-fit pt-1 lg:pt-0 lg:pb-2"><input type="radio" name="trem" /></div>
              <div class="text-sm font-normal">
                <Label class="block"> Yes, </Label>
                <p class="mt-1"
                  >I acknowledge and agree that I may receive texts for
                  notifications and password resets, and that standard data and
                  text charges may apply.</p
                >
              </div>
            </div>
            <div class="flex gap-1 py-2">
              <div class="h-fit pt-1"><input type="radio" name="trem" /></div>
              <div class="text-sm font-normal">
                <Label class="block"> No, </Label>
                <p class="mt-1"
                  >I acknowledge and agree that I may receive texts for
                  notifications and password resets, and that standard data and
                  text charges may apply.</p
                >
              </div>
            </div>
          </div>
        </div>
        <div class="pt-5 flex w-full justify-center">
          <Button @click="handleChange" label="Button" :class="['bg-secondary hover:bg-secondary_hover px-4 py-2 text-white'] "> Next -> </Button>
        </div>
      </form>
    </BaseContainer>
  </BaseLayout>
</template>
<script setup>
import { ref } from 'vue';
import { Button, FormControl } from 'frappe-ui';
import Heading from "../components/heading.vue";
import BaseContainer from "../components/baseContainer.vue";
import BaseLayout from "../layouts/baseLayout.vue";

const enterPassword = ref('');
const confirmPassword = ref('');
const disabled = ref(true);

const handleChange = (field) => {
  console.log("********************************************")
  if (field === 'confirmPassword') {
    if (enterPassword.value === confirmPassword.value) {
      disabled.value = false;
    } else {
      disabled.value = true;
    }
  }
};

// Optional: If you need to define a method for submission
const confirmData = () => {
  if (enterPassword.value === confirmPassword.value) {
    // perform your action
  } else {
    // handle mismatched passwords
  }
};
</script>
<!-- <script>
// import Button from "../components/button.vue";
import { Button ,FormControl  } from 'frappe-ui'
import Heading from "../components/heading.vue";
import BaseContainer from "../components/baseContainer.vue";
import BaseLayout from "../layouts/baseLayout.vue";
// import StyledInput from "../components/styledInput.vue";

export default {
  components: {
    BaseLayout,
    BaseContainer,
    Heading,
    // Button,
    // StyledInput,
  },
  name: "Reset",
  data() {
    return {
      disabled:true,
      data:{
        password:{
          value:null,
          isValid:null,
          validationMessage:null
        },
        passwordConfirm:{
          value:null,
          isValid:null,
          validationMessage:null
        }
      }
    };
  },
  methods: {
    handleChange(value) {
      if(value.name==="passwordConfirm"){
        if(this.data.password.value=== this.data.passwordConfirm.value){
          this.data.password.isValid=true;
        this.data.password.validationMessage="";
        this.data.passwordConfirm.isValid=true;
        this.data.passwordConfirm.validationMessage="";
        this.disabled=false;
        }else{
          this.data.password.isValid=false;
        this.data.password.validationMessage="not match";
        this.data.passwordConfirm.isValid=false;
        this.data.passwordConfirm.validationMessage="not match";
        }
     
      }
      
      this.data[value.name]["value"]=value.value // Update parent with child's value
    },
    confirmData(){
      if(this.data.password.value===this.data.passwordConfirm.value){
       ///call
      }else{
        this.data.password.isValid=false;
        this.data.password.validationMessage="";
        this.data.passwordConfirm.isValid=false;
        this.data.passwordConfirm.validationMessage="";
      }
    }
  },
};
</script> -->

<style scoped>
/* Custom styles if needed */
</style>