<template>
  <div class="lg:flex items-start justify-center mt-4">
    <FormSheet class="mx-2 lg:w-3/4">
      <ClientOnly>
        <Vueform>
          <div class="text-xl mb-4 col-span-12">
            <div class="border-b border-gray-300 pb-2">
              Record EverGrow Transaction
            </div>
          </div>
          <TextElement
            name="phone"
            label="What is your phone number?"
            rules="required"
          />
          <SelectElement
            name="tx"
            :native="false"
            label="Did you buy or sell a FarmStar product?"
            :items="{
              buy: 'Buy',
              sell: 'Sell',
            }"
          />
          <TextElement
            name="buy"
            label="Enter the phone number of the person you purchased a FarmStar product from."
            rules="required"
            :conditions="[['tx', 'buy']]"
          />
          <TextElement
            name="sell"
            label="Enter the phone number of the person you sold a FarmStar product to."
            rules="required"
            :conditions="[['tx', 'sell']]"
          />
          <DateElement
            name="buy_date"
            label="When did you make this purchase?"
            rules="required"
            :conditions="[['tx', 'buy']]"
          />
          <DateElement
            name="sell_date"
            label="When did you make this sale?"
            rules="required"
            :conditions="[['tx', 'sell']]"
          />
          <TextareaElement
            name="textarea"
            :conditions="[['tx', ['sell', 'buy']]]"
            label="Do you have any comments or feedback for FarmStar?"
          />
          <ButtonElement name="submit" add-class="mt-2" submits>
            Submit
          </ButtonElement>
        </Vueform>
      </ClientOnly>
    </FormSheet>
  </div>
</template>
