<template>
    <form @submit.prevent="submitForm(formObject, false, false, false, false, {}, '/admin/campaign_sms')">
        <div class="card form">
            <div class="card-header">
                <div class="row">
                    <div class="col-md-8">
                        <h2>Send Campaign SMS</h2>
                    </div>
                    <div class="col-md-4 d-flex flex-row-reverse hstack gap-3 fs-15">
                        <router-link to="/admin/campaign_sms" class="btn btn-primary">
                            <i class="fa-solid fa-arrow-left"></i> SMS List Page
                        </router-link>
                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-12">

                        <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">
                                <span><label>Recipients Number:</label></span>
                            </div>
                            <div class="col-md-8">
                                <div class="input-group hstack gap-3 fs-15">
                                    <select class="form-control" v-model="formObject.campaign_id" v-validate="'required'" name="campaign_id">
                                        <option value="">Select</option>
                                        <template v-for="(eachData, index) in requiredData.CampaignData">
                                            <option :value="eachData.id">{{ eachData.campaign_name }}</option>
                                        </template>
                                    </select>
                                    <span class="btn btn-primary" @click="modalForm('createModal')"><i class="fas fa fa-add"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <span><label>Range Start :</label></span>
                            </div>
                            <div class="col-md-4">
                               <input type="number" class="form-control" placeholder="1">
                            </div>
                            <div class="col-md-4">
                               <input type="text" class="form-control" placeholder="All">
                            </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)" class="btn btn-outline-danger"><i class="fa fa-trash"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row mb-2">
                            <div class="col-md-3">
                                <span><label>Message :</label></span>
                            </div>
                            <div class="col-md-5">
                               <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-save"></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>
        <formModal modal-id="createModal" @submit="onTimeCreate('api/campaigns', 'CampaignData', true)" :reset-form-data="false" modal-size="modal-lg">
           <CampaignForm></CampaignForm>
        </formModal>
    </form>
</template>
<script>
import formModal from "../../../components/formModal";
import CampaignForm from "../../PhoneBook/campaign/CampaignForm"
import axios from "axios";
import CharacterLimitCount from "../characterLimitCount";
export default {
    name:"campaign_sms_add",
    components: {CharacterLimitCount, formModal,CampaignForm},
    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: {
        modalForm(){
            const _this = this;
            _this.$set(_this.formObject, 'number_type', 1);
            _this.openModal('createModal', 'Campaign Added', true);
        },
        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, 'sender_id_type','');
            this.$set(this.formObject, 'campaign_id','');
            this.$set(this.formObject, 'body','');
            this.$set(this.formObject, 'schedule','0',);
            this.$set(this.formObject, 'date', '');
            this.$set(this.formObject, 'content_type', '1');
        }
    },
    mounted(){
        const _this = this;
        this.getDraftMessage();
        this.assignDefault();
        this.getGeneralData(['SenderId','CampaignData', 'sender_types','characters'], function (retData) {
            _this.setCharactersLimit();
        });

        if (this.$route.query.campaign_id !== undefined) {
            this.$set(this.formObject, 'campaign_id', this.$route.query.campaign_id);
        }
    }
}
</script>
<style>

</style>
