<template>
    <div class="card shadow my-4 mx-auto" >
      <img v-if="imgSrc" :src="imgSrc" class="card-img-top" >
      <div class="card-body">
        <h5 class="card-title">{{title}}</h5>
        <div class="card-text d-flex flex-column align-items-start">
            <div class="form-check form-switch">
                <label class="form-check-label" for="flexSwitchCheckChecked">Edit</label>
                <input class="form-check-input" type="checkbox" role="switch" v-model="editMode">
            </div>
            
            <ol class="list-group list-group-numbered w-100">
                    <li v-for="(term, index) in newTerms" :key="index" class="list-group-item d-flex justify-content-between align-items-start">
                        <div class="ms-2 me-auto" v-if="!editMode">
                            {{ term }}
                            <!-- <div class="fw-bold">{{ term }}</div> -->
                        </div>
                        <div class="ms-2 me-auto" v-else>
                            <input type="text" class="form-control py-0 w-100" v-model="newTerms[index]" />
                        </div>
                        <button v-if="editMode" class="btn btn-sm btn-info rounded-4 bi bi-chevron-double-up" @click.prevent="movTerm(index,-1)" :disabled="index==0"></button>
                        <button v-if="editMode" class="btn btn-sm btn-primary rounded-4 bi bi-chevron-double-down" @click.prevent="movTerm(index,+1)" :disabled="index== (newTerms.length-1)"></button>
                        <button v-if="editMode" @click="removeTerm(index)" class="btn btn-warning rounded-4 btn-sm bi bi-trash float-end" tooltip="Remove"></button>
                    </li>
            </ol>
        </div>
        
            <textarea
                class="form-control my-1"
                placeholder="Add your terms and condtions here"   
                v-model="newTerm"
            />
            <button class="btn btn-primary" :class="newTerm==null? 'disabled':'' " @click.prevent="addTerm(newTerm)">Add New Term</button>
        
      </div>
    </div>
</template>
<script>
export default{
    emits:['terms'],
    name: 'termsInput',
    props: {
        terms: {
            type: Array,
            required: true
        },
        imgSrc: {
            type: String,
            default: null
        },
        title: {
            type: String,
            default: 'Terms & Conditions'
        }
    },
    data() {
        return {
            newTerms: this.terms,
            newTerm: null,
            editMode: false
        }
    },
    methods: {
        addTerm(term) {
                this.newTerms.push(term);
                this.$emit('terms',this.newTerms);
                this.newTerm=null;
        },
        removeTerm(index) {
            this.newTerms.splice(index, 1);
            this.$emit('terms',this.newTerms);
        },
        movTerm(index,direction) {
            if (index > 0 && index < this.newTerms.length) {
                // Swap the terms
                [this.newTerms[index],this.newTerms[index+direction]] = [this.newTerms[index+direction],this.newTerms[index]];                
            }
            this.$emit('terms',this.newTerms);
        },
    },
    watch: {
        terms: {
            handler(newTerms) {
                this.newTerms = newTerms;
            },
            immediate: true
        }
    }
}
</script>
<style scoped>
.list-group-item:nth-child(odd) {
    background-color: #f8f9fa; /* Light gray for odd items */
  }

  .list-group-item:nth-child(even) {
    background-color: #ffffff; /* White for even items */
  }
</style>