<script setup>
import { ref } from 'vue'
import { NCard, NRadioGroup, NRadio, NInput, NDatePicker, NButton } from 'naive-ui'

const investmentType = ref('amount')
const amount = ref(10000)
const dividendType = ref('notReinvested')
const investmentDate = ref(null)

const handleSubmit = () => {
}
</script>

<template>
  <div class="flex-center h-70vh px-4 py-8 animate-bg-move">
    <n-card
      class="w-full max-w-[900px] glass-card animate-bounce-in shadow-xl border-none"
      :content-style="{padding: '32px 24px'}"
      :header-style="{background: 'transparent'}"
    >
      <div class="flex flex-col gap-8">
        <!-- 投资类型 -->
        <div>
          <div class="text-lg font-bold mb-3">Investment Type</div>
          <n-radio-group v-model:value="investmentType" name="investmentType">
            <n-radio value="amount">Amount invested (in dollars)</n-radio>
            <n-radio value="shares">Number of shares purchased</n-radio>
          </n-radio-group>
        </div>
        <!-- 金额与分红 -->
        <div>
          <div class="text-lg font-bold mb-3">Amount to Calculate</div>
          <n-input v-model:value="amount" type="number" class="mb-3" size="large" placeholder="Enter amount" />
          <n-radio-group v-model:value="dividendType" name="dividendType">
            <n-radio value="reinvested">Dividends reinvested</n-radio>
            <n-radio value="notReinvested">Dividends not reinvested</n-radio>
          </n-radio-group>
        </div>
        <!-- 投资日期 -->
        <div>
          <div class="text-lg font-bold mb-3">Investment Date</div>
          <n-date-picker v-model:value="investmentDate" type="date" class="w-full" size="large" placeholder="Select date" />
        </div>
      </div>
      <div class="flex justify-end mt-8">
        <n-button type="primary" size="large" class="px-8 py-2 rounded-full animate-bounce-in hover:scale-105 transition-transform duration-300 shadow" @click="handleSubmit">
          Submit
        </n-button>
      </div>
    </n-card>
  </div>
</template>

<style scoped>
.glass-card {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 6px 24px 0 rgba(31, 38, 135, 0.25);
  backdrop-filter: blur(10px);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.18);
}
</style>

