<template>
    <form @submit.prevent="submitForm(formObject)">
        <div class="card form">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-8">
                        <h2>File2 SMS Add</h2>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">
                        <div class="row mb-2 mt-4">
                            <div class="col-md-3">
                                <span><label>Upload Excel File (<a :href="getImage(null,'files/excelFormat.xlsx')" target="_blank">Download Format</a>) :</label></span>
                            </div>
                            <div class="col-md-8">
                               <excel-upload :type="4"></excel-upload>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <span><label>SMS Type :</label></span>
                            </div>
                            <div class="col-md-8">
                                <div class="input-group hstack gap-3 fs-15">
                                    <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>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <label>SMS content and Schedule :</label>
                            </div>
                            <div class="col-md-4">
                                <select v-validate="'required'" class="form-control" v-model="formObject.schedule">
                                    <option value="0">Send Now</option>
                                    <option value="1">Send Later</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <select v-validate="'required'" @change="setCharactersLimit()" class="form-control" v-model="formObject.content_type">
                                    <template v-for="(data, index) in contentType">
                                        <option :value="data.value">{{ data.name }}</option>
                                    </template>
                                </select>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <span><label>Select From Draft Messages (optional) :</label></span>
                            </div>
                            <div class="col-md-8">
                                <div class="row">
                                    <div class="col-10">
                                        <div class="input-group hstack gap-3 fs-15">
                                            <select class="form-control" v-model="selectedDraftId">
                                                <option value="">Select draft</option>
                                                <template v-for="(data, index) in getData">
                                                    <option :value="data.id">{{ data.body }}</option>
                                                </template>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-2">
                                        <a @click="deleteDraft(selectedDraftId)" name="delete" class="btn btn-outline-danger"><i class="fa fa-trash"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-3">
                                <span><label>Message :</label></span>
                            </div>
                            <div class="col-6">
                               <div>
                                    <textarea class="form-control" placeholder="Type or Copy past your Message" rows="7" v-model="formObject.body" v-validate="'required'" name="body"></textarea>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <character-limit-count :character-max="maxCharacters" :limit-total="totalLimit" :sms-body="formObject.body"></character-limit-count>
                            </div>
                        </div>
                        <div class="row mb-2" v-if="parseInt(formObject.schedule) === 1">
                            <div class="col-md-3">
                                <label>Schedule Date & Time :</label>
                            </div>
                            <div class="col-9 row">
                                <div class="col-md-3">
                                    <datepicker input_class="form-control" v-model="formObject.date" name="date"></datepicker>
                                </div>
                                <div class="col-md-2">
                                    <input type="time" name="time" class="form-control" v-model="formObject.time">
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                            </div>
                            <div class="col-9">
                                <a type="draft" @click="draftMessage()" name="draft" class="btn btn-success "><i class="fa fa-pencil"></i>  Save Draft</a>
                                <button  type="submit" name="submit" class="btn btn-primary "><i class="fa fa-paper-plane"></i>  Send SMS</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</template>
<script>
import formModal from "../../../components/formModal";
import SenderRequestForm from "../../settings/senders/SenderRequestForm";
import ExcelUpload from "../../../components/excelUpload";
import axios from "axios";
import CharacterLimitCount from "../characterLimitCount";
export default {
    name:"file_sms_add",
    components: {CharacterLimitCount, ExcelUpload, formModal,SenderRequestForm},
    data() {
        return {
            selectedDraftId:'',
        }
    },
    watch: {
        selectedDraftId(newValue) {
            const selectedDraft = this.getData.find(data => data.id === newValue);

            if (selectedDraft) {
                this.formObject.body = selectedDraft.body;
            } else {
                this.formObject.body = '';
            }
        }
    },
    methods: {
        draftMessage() {
            const _this = this;
            const draftContent = _this.formObject.body;
            axios.post('/api/draft_message', { body: draftContent })
                .then(response => {
                    console.log('Draft saved successfully');
                    _this.$toastr('success', response.data.message, 'Success');
                })
                .catch(error => {
                    console.error('Error saving draft:', error);
                    _this.$toastr('error', 'Whoops..!! something went wrong', 'Error');
                });
        },
        getDraftMessage(){
            const _this = this;
            axios.get('/api/draft_message').then(response =>{
                console.log(response);
                _this.getData = response.data.result;
            })
            .catch(error => {
                    console.error('Error saving draft:', error);
                });
        },
        deleteDraft(draftId) {
            const _this = this;
            axios.delete(`/api/draft_message/${draftId}`)
                .then(response => {
                    console.log('Draft deleted successfully');
                    _this.$toastr('success', response.data.message, 'Success');
                    _this.selectedDraftId = '';
                })
                .catch(error => {
                    console.error('Error deleting draft:', error);
                    _this.$toastr('error', 'Whoops..!! something went wrong', 'Error');
                });
        },
        assignDefault : function () {
            this.$set(this.formObject, 'body', '');
            this.$set(this.formObject, 'schedule','0',);
            this.$set(this.formObject, 'sender_id_type', '');
            this.$set(this.formObject, 'date', '');
            this.$set(this.formObject, 'content_type', '1');
        }
    },
    mounted() {
        const _this = this;
        this.getDraftMessage();
        this.assignDefault();
        this.getGeneralData(['SenderId', 'sender_types','characters'], function (retData) {
            _this.setCharactersLimit();
        });
    }
}
</script>
<style>
    .user-avatar.mb-2 {
        background: #ddd;
        padding: 12px;
    }
</style>
