<template>
    <div>
        <h2 class="mb-4 text-lg font-semibold text-center text-gray-300">
            {{ $t("Register.new_account") }}
        </h2>

        <!-- <div class="" v-show="method == 'bank'"> -->
        <FormKit
            id="new_account"
            #default="{ state: { valid } }"
            :actions="false"
            name="new_account"
            type="form"
            @submit="submit"
        >
            <FormKit
                type="select"
                v-model="form.country"
                name="country"
                label="Country of account"
                :options="countries"
            />
            <FormKit
                id="city"
                v-model="form.city"
                label="City"
                placeholder="New York"
                required
                type="text"
                validation="required"
                validation-label="city"
            />
            <FormKit
                id="city"
                v-model="form.address"
                label="Address"
                placeholder="1493 Aubery Drive"
                required
                type="text"
                validation="required"
                validation-label="city"
            />
            <div class="flex items-center justify-center w-full">
                <Button
                    size="md"
                    type="submit"
                    :disabled="form.processing || !valid"
                    :loading="form.processing"
                    @click="submit"
                >
                    {{ $t("Register.submit") }}
                </Button>
            </div>
        </FormKit>
        <!-- <form @submit="createBankToken" class="flex flex-col gap-y-2">
                <div>
                    <label
                        for="acc_number"
                        class="text-sm font-medium text-gray-300"
                        >{{ $t("Register.account_number") }} (IBAN)</label
                    >
                    <input
                        v-model="bankData.account_number"
                        type="text"
                        id="acc_number"
                        name="acc_number"
                        class="h-8 rounded-lg w-96"
                        required
                    />
                </div>
                <div>
                    <label
                        for="holder_name"
                        class="text-sm font-medium text-gray-300"
                        >{{ $t("Register.holder_name") }}</label
                    >
                    <input
                        v-model="bankData.account_holder_name"
                        type="text"
                        id="holder_name"
                        name="holder_name"
                        class="h-8 rounded-lg w-96"
                        required
                    />
                </div>
                <div>
                    <label
                        for="routing_number"
                        class="text-sm font-medium text-gray-300"
                        >{{ $t("Register.routing_number") }}</label
                    >
                    <input
                        v-model="bankData.routing_number"
                        type="text"
                        id="routing_number"
                        name="routing_number"
                        class="h-8 rounded-lg w-96"
                        required
                    />
                </div>
                <div>
                    <label for="currency" class="text-sm font-medium">{{
                        $t("Register.account_currency")
                    }}</label>
                    <br />
                    <select
                        name="currency"
                        v-model="bankData.currency"
                        class="mt-1 text-sm font-medium rounded-lg h-9 w-28"
                        required
                    >
                        <option
                            :value="currency"
                            v-for="(currency, idx) in currencies"
                            :key="idx"
                            class="text-sm font-medium text-gray-300"
                        >
                            {{ currency }}
                        </option>
                    </select>
                </div>
                <div>
                    <h4 class="mb-1 text-sm font-medium text-gray-300">
                        {{ $t("Register.account_type") }}
                    </h4>
                    <div class="flex space-x-4">
                        <div>
                            <input
                                type="radio"
                                id="individual"
                                value="individual"
                                v-model="bankData.account_holder_type"
                                class="mx-2"
                            />
                            <label for="individual">{{
                                $t("Register.individual")
                            }}</label>
                        </div>
                        <div>
                            <input
                                type="radio"
                                id="company"
                                value="company"
                                v-model="bankData.account_holder_type"
                                class="mx-2"
                            />
                            <label for="company">{{
                                $t("Register.company")
                            }}</label>
                        </div>
                    </div>
                </div>
                <div class="flex items-center w-full mt-5">
                    <button
                        class="border border-blue-300 rounded-full mx-auto text-blue-300 font-medium text-sm px-4 py-1.5"
                    >
                        {{ $t("Register.confirm") }}
                    </button>
                </div>
            </form> -->
        <!-- </div> -->
        <!-- <div v-show="method != 'bank'" class="mx-4">
            <section id="stripe-payment-form" ref="card"></section>
            <div class="flex items-center w-full mt-5">
                <button
                    @click="createCardToken"
                    class="border border-blue-300 rounded-full mx-auto text-blue-300 font-medium text-sm px-4 py-1.5"
                >
                    {{ $t("Register.confirm") }}
                </button>
            </div>
        </div> -->
    </div>
</template>

<script>
import { useForm } from "@inertiajs/inertia-vue3";

import { StripeElementCard } from "@vue-stripe/vue-stripe";
import { loadStripe } from "@stripe/stripe-js";
import currencies from "@/assets/currencies.json";
import countries from "@/assets/countries.json";
import Button from "@/Jetstream/Button";
// window.location.href = route("user.wallet.create.account");

export default {
    components: {
        StripeElementCard,
        Button,
    },
    data() {
        return {
            form: useForm({
                country: "SA",
                city: "",
                address: "",
            }),
            countries: countries.countries,
        };
    },
    methods: {
        submit() {
            console.log(this.form);
            this.form.get(route("user.wallet.create.account"));
        },
    },
};
</script>

<style></style>
