<template>
    <div class="new_item">
        <div class="container-fluid px-0">
            <div class="row">
                <div class="col-sm-12">
                    <div class="card border-0 bg-transparent">
                        <div class="card-body border-0 bg-white rounded_8">
                            <h5 class="text-koulen mb-3">
                                <router-link :to="{ name: 'Currency' }">{{ $t('Currency') }}</router-link>
                                <label class="px-1">/</label>
                                <label>{{ $t('Add New') }}</label>
                            </h5>
                            <div class="menu">
                                <div class="row px-3 pt-2">
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label class="form-label">{{ $t('Currency EN') }}<sup class="text-danger">*</sup></label>
                                            <input type="text" class="form-control" v-model="form.currency_en" :placeholder="$t('Name EN')" :class="{ 'is-invalid': form.errors.has('currency_en') }" />
                                            <div class="valid text-danger" v-if="form.errors.has('currency_en')" v-html="form.errors.get('currency_en')">
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">{{ $t('Symbol') }}<sup class="text-danger">*</sup></label>
                                            <input type="text" class="form-control" v-model="form.symbol" :placeholder="$t('Symbol')" :class="{ 'is-invalid': form.errors.has('symbol') }" />
                                            <div class="valid text-danger" v-if="form.errors.has('symbol')" v-html="form.errors.get('symbol')">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <div class="mb-3">
                                            <label class="form-label">{{ $t('Currency KM') }}<sup class="text-danger">*</sup></label>
                                            <input type="text" class="form-control" v-model="form.currency_km" :placeholder="$t('Name KM')" :class="{ 'is-invalid': form.errors.has('currency_km') }" />
                                            <div class="valid text-danger" v-if="form.errors.has('currency_km')" v-html="form.errors.get('currency_km')">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex justify-content-end">
                                <button type="submit" :disabled="form.busy" class="btn btn-success " @click="store">
                                    <i class="fa-solid fa-floppy-disk"></i>
                                    {{ $t('Submit') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['id'],
    data() {
        return {
            form: new Form({
                id: '',
                currency_en: '',
                currency_km: '',
                symbol: '',
                
            }),
        }
    },
    created() {
        this.getCurrency();
    },
    methods: {
        getCurrency() {
            axios.get('admin-api/currency/create', {
                params:{'id': this.id,is_details:1}
             })
            .then((res) => {
                if(res.data.status == 1){
                    this.form.fill(res.data.data);
                    
                }
            }).catch((error) => {
                console.log(error);
            });
        },
        store() {
            this.form.post("admin-api/currency").then((res) => {
                if (res.data.status == 1) {
                    this.$toast.success(res.data.message);
                    this.$router.push({name:'Currency'})
                } else {
                    this.$toast.warning(res.data.message);
                }
            }).catch((error) => {
                console.log(error);
                this.$toast.warning(res.data.message);
            })
        },
    }
}
</script>
