<template>
    <form @submit.prevent="submitForm(formObject, false, false, true, false, {}, '/admin/sender_id')">
        <div class="card form">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-8">
                        <h3>CLI Configurations</h3>
                    </div>
                    <div class="col-md-4 d-flex flex-row-reverse hstack gap-3 fs-15">
                        <router-link to="/admin/sender_id" class="btn btn-primary">
                            <i class="fa-solid fa-arrow-left"></i> CLI List
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-10">
                        <div class="row mb-2" v-if="requiredData.users !== undefined && requiredData.users.length > 0">
                            <div class="col-md-3">
                                <label class="control-label">User<span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <select class="form-control" @change="getGeneralData({maskings:{user_id:formObject.user_id}})" v-model="formObject.user_id" v-validate="'required'" name="user_id">
                                    <option value="">Select User</option>
                                    <template v-for="(data, index) in requiredData.users">
                                        <option :value="data.id">{{data.name}}</option>
                                    </template>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">Operator<span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <select v-model="formObject.operator_id" v-validate="'required'" name="operator_id" class="form-control">
                                    <option value="">Select</option>
                                    <template v-for="(operator, index) in requiredData.operators">
                                        <option :value="operator.id">{{operator.name}}</option>
                                    </template>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">API UserName <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" class="form-control" placeholder="Enter username" v-validate="'required'" name="username" v-model="formObject.username">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">Password <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" class="form-control" placeholder="Enter Password" v-validate="'required'" name="password" v-model="formObject.password">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">Title <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" class="form-control" placeholder="Enter title" v-validate="'required'" name="title" v-model="formObject.title">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">BillMsisdn <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" class="form-control" placeholder="Enter BillMsisdn" v-validate="'required'" name="billMsisdn" v-model="formObject.billMsisdn">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">ApiKey <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" class="form-control" placeholder="Enter ApiKey" v-validate="'required'" name="apiKey" v-model="formObject.apiKey">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">TransactionType <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" class="form-control" placeholder="Enter transactionType" v-validate="'required'" name="transactionType" v-model="formObject.transactionType">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">Message Type <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" class="form-control" placeholder="Enter message Type" v-validate="'required'" name="transactionType" v-model="formObject.messageType">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">CampaignId <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" class="form-control" placeholder="Enter campaignId" v-validate="'required'" name="campaignId" v-model="formObject.campaignId">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">SMS Rate <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" class="form-control" placeholder="Enter SMS Rate" v-validate="'required'" name="sms_rates" v-model="formObject.sms_rates">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">Details <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <textarea type="text" class="form-control" placeholder="Enter Details" v-validate="'required'" name="details" v-model="formObject.details"></textarea>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-12">
                                <h4 class="control-label">Masking Information</h4>
                                <hr>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">CLI <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <input type="text" class="form-control" placeholder="Enter CLI" v-validate="'required'" name="cli" v-model="formObject.cli">
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">Sender ID Type <span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <select v-model="formObject.sender_id_type" v-validate="'required'" name="sender_id_type" class="form-control">
                                    <option value="">Select</option>
                                    <template v-for="(type, index) in requiredData.sender_types">
                                        <option :value="type.value">{{type.name}}</option>
                                    </template>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label class="control-label">Masking Name<span class="text-danger">*</span></label>
                            </div>
                            <div class="col-md-9">
                                <select v-model="formObject.masking_name" v-validate="'required'" name="masking_name" class="form-control">
                                    <option value="">Select</option>
                                    <template v-for="(type, index) in requiredData.maskings">
                                        <option :value="type.key">{{type.name}}</option>
                                    </template>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-12">
                                <h4 class="control-label">Document</h4>
                                <hr>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">Masking Paper</div>
                            <div class="col-md-9 text-left">
                                <div @click="clickImageInput('image')" class="mb-2">
                                    <div class="form-group image_upload"
                                         :style="{backgroundImage: 'url(' + getImage(null, 'images/upload.png') + ')',}">
                                        <img v-if="formObject.image" :src="getImage(formObject.image)"/>
                                        <input name="thumbnail" :v-validate="formType === 1 ? 'required' : 'sometimes'" style="display: none" id="image" type="file" @change="UploadImage($event, formObject, 'image')"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                            </div>
                            <div class="col-md-9 text-end">
                                <button type="submit" name="submit" class="btn btn-primary "><i class="fa fa-paper-plane"></i>Submit</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</template>
<script>
export default {
    name:"SenderRequestForm",
    methods : {
        getEditData : function (id){
            const _this = this;
            _this.getData(`${_this.urlGenerate()}/${id}/edit`, 'get', {},{}, function (retData){
                _this.$store.commit('formObject', retData);
                _this.getGeneralData({maskings:{user_id:retData.user_id}});
            })
        },
        setDefault: function () {
            const _this = this;
            _this.$set(_this.formObject, 'sender_id_type', '');
            _this.$set(_this.formObject, 'user_id', '');
            _this.$set(_this.formObject, 'operator_id', '');
            _this.$set(_this.formObject, 'masking_name', '')
        }
    },
    mounted() {
        const _this = this;
        _this.getGeneralData(['users','operators','sender_types']);
        _this.setDefault();
        if (_this.$route.params.id){
            if (_this.$route.query.copy === undefined){
                _this.$store.commit('formType', 2);
                _this.$store.commit('updateId', _this.$route.params.id);
            }
            _this.getEditData(_this.$route.params.id);
        }
    }
}
</script>
<style scoped>
</style>
