<script>
import { computed, ref } from "vue";
import { Inertia } from "@inertiajs/inertia";
import { Link, useForm } from "@inertiajs/inertia-vue3";
import JetButton from "@/Jetstream/Button.vue";
import JetFormSection from "@/Jetstream/FormSection.vue";
import JetInput from "@/Jetstream/Input.vue";
import JetInputError from "@/Jetstream/InputError.vue";
import JetLabel from "@/Jetstream/Label.vue";
import JetActionMessage from "@/Jetstream/ActionMessage.vue";
import JetSecondaryButton from "@/Jetstream/SecondaryButton.vue";
import { currentLocation } from "@/composables/location";
import Mobile from "@/components/Inputs/Mobile";
import GeneralRadioGroup from "@/components/Inputs/Selects/Radios/GeneralRadioGroup.vue";

export default {
    components: {
        JetButton,
        JetFormSection,
        JetInput,
        JetInputError,
        JetLabel,
        JetActionMessage,
        JetSecondaryButton,
        Mobile,
        GeneralRadioGroup,
    },
    props: {
        firm: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            form: useForm({
                daily_rate: this.firm.daily_rate,
                monthly_rate: this.firm.monthly_rate,
                yearly_rate: this.firm.yearly_rate,
            }),
        };
    },
    methods: {
        submit() {
            this.form.post(route("firm-profile-information.update"), {
                errorBag: "updateProfileInformation",
                preserveScroll: true,
                onError: (error) => {
                    console.log(error);
                },
            });
        },
    },

    computed: {
        calculatedDailyRate() {
            return this.calculateMuhandisinProfit(this.form.daily_rate);
        },
        calculatedMonthlyRate() {
            return this.calculateMuhandisinProfit(this.form.monthly_rate);
        },
        calculatedYearlyRate() {
            return this.calculateMuhandisinProfit(this.form.yearly_rate);
        },
    },
};
</script>

<template>
    <JetFormSection @submitted="submit">
        <template #title> {{ $t('profile.rates') }} </template>

        <template #description> {{ $t('profile.rates_text') }} </template>

        <template #form="{ valid }">
            <!-- Profile Photo -->
            <div class="col-span-6">
                <ul class="grid grid-cols-3 gap-5 mb-3">
                    <li>
                        <span
                            class="block mb-4 text-xs font-semibold text-gray-300"
                            >{{ $t('Register.rate_day') }}</span
                        >
                        <FormKit
                            id="rates[daily]"
                            v-model="form.daily_rate"
                            :classes="{
                                outer: 'mb-0',
                                input: 'text-[10px]',
                                label: '!text-gray-200',
                            }"
                            :label="$t('Register.your_rate')"
                            name="rates[daily]"
                            placeholder="5.00"
                            required
                            type="number"
                            validation="required|min:1.00"
                            validation-label="daily rate"
                        >
                            <template #prefix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ activeCurrency() }}
                                </span>
                            </template>
                            <template #suffix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ $t('Register.day') }}
                                </span>
                            </template>
                        </FormKit>
                        <FormKit
                            v-model="calculatedDailyRate"
                            :classes="{
                                outer: 'mb-0',
                                input: 'text-[10px]',
                                label: '!text-gray-200',
                            }"
                            disabled
                            :label="$t('Register.your_recieve')"
                            placeholder="4.00"
                            required
                            type="number"
                        >
                            <template #prefix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ activeCurrency() }}
                                </span>
                            </template>
                            <template #suffix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ $t('Register.day') }}
                                </span>
                            </template>
                        </FormKit>
                    </li>
                    <li>
                        <span
                            class="block mb-4 text-xs font-semibold text-gray-300"
                            >{{ $t('Register.rate_month') }}</span
                        >
                        <FormKit
                            id="rates[monthly]"
                            v-model="form.monthly_rate"
                            :classes="{
                                outer: 'mb-0',
                                input: 'text-[10px]',
                                label: '!text-gray-200',
                            }"
                            :label="$t('Register.your_rate')"
                            name="rates[monthly]"
                            placeholder="1100.00"
                            required
                            type="number"
                            validation="required|min:1.00"
                            validation-label="monthly rate"
                        >
                            <template #prefix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ activeCurrency() }}
                                </span>
                            </template>
                            <template #suffix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ $t('Register.month') }}
                                </span>
                            </template>
                        </FormKit>
                        <FormKit
                            v-model="calculatedMonthlyRate"
                            :classes="{
                                outer: 'mb-0',
                                input: 'text-[10px]',
                                label: '!text-gray-200',
                            }"
                            disabled
                            :label="$t('Register.your_recieve')"
                            placeholder="1000.00"
                            required
                            type="number"
                        >
                            <template #prefix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ activeCurrency() }}
                                </span>
                            </template>
                            <template #suffix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ $t('Register.month') }}
                                </span>
                            </template>
                        </FormKit>
                    </li>
                    <li>
                        <span
                            class="block mb-4 text-xs font-semibold text-gray-300"
                            >{{ $t('Register.rate_year') }}</span
                        >
                        <FormKit
                            id="rates[yearly]"
                            v-model="form.yearly_rate"
                            :classes="{
                                outer: 'mb-0',
                                input: 'text-[10px]',
                                label: '!text-gray-200',
                            }"
                            :label="$t('Register.your_rate')"
                            name="rates[yearly]"
                            placeholder="14,500.00"
                            required
                            type="number"
                            validation="required|min:1.00"
                            validation-label="yearly rate"
                        >
                            <template #prefix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ activeCurrency() }}
                                </span>
                            </template>
                            <template #suffix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ $t('Register.year') }}
                                </span>
                            </template>
                        </FormKit>
                        <FormKit
                            v-model="calculatedYearlyRate"
                            :classes="{
                                outer: 'mb-0',
                                input: 'text-[10px]',
                                label: '!text-gray-200',
                            }"
                            disabled
                            :label="$t('Register.your_recieve')"
                            placeholder="13,750.00"
                            required
                            type="number"
                        >
                            <template #prefix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ activeCurrency() }}
                                </span>
                            </template>
                            <template #suffix>
                                <span
                                    class="text-[10px] text-gray-200 select-none cursor-default px-0.5"
                                >
                                    {{ $t('Register.year') }}
                                </span>
                            </template>
                        </FormKit>
                    </li>
                </ul>
                <Link
                    class="text-[10px] font-medium underline"
                    href="/terms"
                    rel="noopener noreferrer"
                    target="_blank"
                    >View terms & conditions
                </Link>

                <JetInputError :message="form.errors.photo" class="mt-2" />
            </div>
        </template>

        <template #actions="{ valid }">
            <JetActionMessage :on="form.recentlySuccessful" class="mr-3">
                {{ $t("Register.saved") }}
            </JetActionMessage>

            <JetButton type="submit" :disabled="!valid || form.processing">
                {{ $t("Register.save") }}
            </JetButton>
        </template>
    </JetFormSection>
</template>
