<!-- <script>
import Button from "../../components/button.vue";


import FieldContainer from "../../components/fieldContainer.vue";


import ReviewLabel from "./components/reviewLabel.vue";
import ReviewValue from "./components/reviewValue.vue";

export default {
  components:{
    ReviewLabel,
    ReviewValue,
    Button,
    FieldContainer
  }
};
</script>

<template>
  
  <div class="container py-6">
    <h3 class="text-lg font-medium mb-3 text-black">Personal information</h3>

<div>
    <Button level="edit" >edit this section</Button>
    <FieldContainer>
        <ReviewLabel :isMandatory="true">Birth Date</ReviewLabel>
        <ReviewValue>22-5-2022</ReviewValue>
    </FieldContainer>
</div>
</div>


</template> -->

<template>
  <div class="pt-3 container">
    <h1 class="text-4xl font-bold ">Screening Disclosure and Authorization</h1>
    <p class=" mb-3 mt-2"> 
      I hereby provide my authorisation and consent for Taakd, on behalf of Requestor to:
    </p>
    <ul class="my-1">
      1.	process my Personal Data in accordance with the verifications set out in the Information Notice and below:
      <li class="ml-6">
       * Global Education	This check confirms academic credentials by verifying relevant education as determined by the Requestor,
         for example a degree, certificate or diploma claim directly with the awarding institution or its authorized agent
      </li>
      <li class="ml-6">
       * Global Employment	A check to confirm your work history. You will be asked to provide company name, location dates worked and position or title held.
         This information will then be verified by contacting HR or official sources at each company to be verified. The Requestor has also requested that your..
      </li>
    </ul>
    
    <div class="lg:grid grid-cols-2 lg:gap-2">
      <Button class="my-2" level="secondary" > Print the unsigned document </Button>
    </div>

    <div class="lg:grid grid-cols-2 lg:gap-2">
      <FieldContainer>
          <Select
            labelText="Other Languages"
            :isMandatory="false"
            infoText="Select other languages"
            name="other_languages"
            id="OtherLanguages"
            @input-change="handleInput"
            :options="languageOptions"
          />
        </FieldContainer>    </div>
        <div class="lg:grid grid-rows-1 lg:gap-2 ">
          <FieldContainer >
            <StyledInput
              labelText="Electronic Signature"
              :isMandatory="true"
              infoText="Please provide your electronic signature"
              inputType="text"
              name="electronic_signature"
              id="ElectronicSignature"
              @input-change="handleInput"
              :class="['h-20']"
            
            />
          </FieldContainer>
      </div>`
    <div class="lg:grid grid-cols-2 lg:gap-2">
      <FieldContainer>
        <StyledInput
          labelText="Full Name"
          :isMandatory="true"
          infoText="Please enter your full name"
          inputType="text"
          @input-change="handleInput"
          name="full_name"
          id="FullName"
        
        />
      </FieldContainer>
      <FieldContainer>
        <StyledInput
          labelText="Email Address"
          :isMandatory="true"
          infoText="Please enter your email address"
          inputType="email"
          name="email_address"
          id="EmailAddress"
          @input-change="handleInput"
       
        />
      </FieldContainer>
    </div>

    <div class="lg:grid grid-rows-2 lg:gap-2">
    <FieldContainer>
      <CheckBox name="i_agree_to_the_electronic_signature" id="AgreeToElectronicSignature" @input-change="handleInput">
        I certify that I am the person identified . My clicking the “Accept & Continue” button constitutes my electronic signature to this document       </CheckBox>
    </FieldContainer>
    <FieldContainer>
      <CheckBox name="i_acknowledge_the_above" id="Acknowledge" @input-change="handleInput">
        I understand that I am using electronic means to sign this document. *      </CheckBox>
    </FieldContainer>

    </div>


  </div>
</template>

<script setup>
import Button from '../../components/button.vue'
import CheckBox from '../../components/checkBox.vue'
import FieldContainer from '../../components/fieldContainer.vue'
import StyledInput from '../../components/styledInput.vue'
import Select from '../../components/select.vue'

import { ref } from 'vue'

// Props
const props = defineProps({
  stepData: {
    type: Object,
    required: true,
  },
})

// Language options for the multi-select field
const languageOptions = ref([
  { value: 'en', text: 'English' },
  { value: 'es', text: 'Spanish' },
  { value: 'fr', text: 'French' },
  // Add more languages as needed
])

// Methods
const handleInput = function (value) {
  props.stepData[value.name]['value'] = value.value;
}
</script>