Revise paste choose from bank

<template>
    <div>
        <div v-if="!submitted">
            <div class="step-indicator">
                <div class="progress-bar" :style="{ width: progressWidth }"></div>
                <div v-for="step in totalSteps" :key="step" class="step"
                    :class="{ active: currentStep === step, completed: currentStep > step, }">
                    <div class="step-number">{{ step }}</div>
                    <div class="step-title">{{ stepTitles[step - 1] }}</div>
                </div>
            </div>

<form @submit.prevent="handleSubmit">
                <div class="form-content">
                    
                    <div class="container step-content" :class="{ active: currentStep === 1 }">
                        <div class="row border border-2 mb-2" v-for="(item, index) in formData" :key="index">
                            <div class="col-4 form-group p-2">
                                <InputLabel label="Question Bank" required />
                                <v-select 
                                    v-model="item.bank_id" 
                                    :options="questionBanks"
                                    :reduce="(option) => option.id" 
                                    class="text-uppercase clickoutside" 
                                    label="name"
                                    placeholder='Select Bank' 
                                />
                                <input-errors
                                    :name="`${index}.bank_id`"
                                    :errors="errors"
                                />
                            </div>
                            <div class="col-4 form-group p-2">
                                <InputLabel label="Question Format" />
                                <v-select v-model="item.format" :options="questionFormats"
                                    :get-option-label="(option) => option.replace(/_/g, ' ')" class="text-uppercase"
                                    placeholder="Select Format" />
                            </div>

<div class="col-3 form-group p-2">
                                <InputLabel label="Question Topic" />
                                <v-select v-model="item.topic" :options="questionTypeOptions"
                                    :reduce="(option) => option.id" class="text-uppercase"
                                    placeholder="Select a topic" />
                            </div>

</div>
                        <div class="d-flex justify-content-end">
                            <button type="button" class="btn btn-danger" @click="addForm(index)">Add More</button>
                        </div>
                    </div>

<div class="step-content" :class="{ active: currentStep === 2 }">
                        <div class="d-flex flex-column gap-3">
                            <template v-for="question in quizzes" :key="question.id">
                                
                                <div v-if="!question.quizzes.length"
                                    :class="['question-card', { selected: isSelected(question.id) }]"
                                    @click="toggleQuestion(question)">
                                    <div class="d-flex gap-3 align-items-start">
                                        <div class="icon-box flex-shrink-0">
                                            <input type="checkbox" :checked="isSelected(question.id)"
                                                class="form-check-input" />
                                        </div>
                                        <div class="flex-grow-1">
                                            <p v-html="question.title" class="mb-2 text-dark lh-base"></p>
                                            <div class="d-flex gap-2 flex-wrap">
                                                <span class="badge bg-info">
                                                    {{ formatType(question.type) }}
                                                </span>
                                                <span class="badge bg-primary">
                                                    {{ formatType(question.question_type) }}
                                                </span>
                                                <span class="badge bg-dark">
                                                    {{ capitalizeFirst(question.difficulty) }}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

<div v-else class="border rounded p-3" style="background-color: #f8f9fa">
                                    <div :class="['question-card mb-3', { selected: isSelected(question.id) }]"
                                        @click="toggleQuestion(question)">
                                        <div class="d-flex gap-3 align-items-start">
                                            <div class="icon-box flex-shrink-0">
                                                <input type="checkbox" :checked="isSelected(question.id)"
                                                    class="form-check-input" />
                                            </div>
                                            <div class="flex-grow-1">
                                                <h5 v-html="question.title" class="mb-2 fw-semibold text-dark"></h5>                                            </div>
                                        </div>
                                    </div>
                                    <div class="d-flex flex-column gap-2 ms-4">
                                        <div v-for="subQuestion in question.questions" :key="subQuestion.id"
                                            :class="['question-card', { selected: isSelected(subQuestion.id) }]"
                                            @click="toggleQuestion(subQuestion)">
                                            <div class="d-flex gap-3 align-items-start">
                                                <div class="icon-box flex-shrink-0">
                                                    <input type="checkbox" :checked="isSelected(subQuestion.id)"
                                                        class="form-check-input" />
                                                </div>
                                                <div class="flex-grow-1">
                                                    <p class="mb-2 text-dark lh-base">{{question.title}}</p>
                                                    <div class="d-flex gap-2 flex-wrap">
                                                        <span class="badge bg-info">
                                                            {{ formatType(subQuestion.type) }}
                                                        </span>
                                                        <span class="badge bg-primary">
                                                            {{ formatType(subQuestion.question_type) }}
                                                        </span>
                                                        <span class="badge bg-dark">
                                                            {{ capitalizeFirst(subQuestion.difficulty) }}
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </div>

<div class="d-flex justify-content-between gap-2 mt-4">
                    <button type="button" class="btn-prev" @click="prevStep" :disabled="currentStep === 1">
                        Previous
                    </button>
                    <button v-if="currentStep < totalSteps" type="button" class="btn-next" @click="nextStep">
                        Next
                    </button>
                    <button v-else type="submit" class="btn-submit">
                        Submit
                    </button>
                </div>
            </form>
        </div>
    </div>
</template>

const props = defineProps({
    questionBanks: Array,
    questionFormats: Array,
    questionTypeOptions: Array,
    difficultyLabels: Array
})

const currentStep = ref(2);
const totalSteps = 2;
const submitted = ref(false);

const stepTitles = ["Qurstion Bank Info", "Select Questions"];

const newData = { bank_id: '', format: '', topic: '' };

const formData = ref([
    { ...newData }
])

const questions = ref([
    {
        id: 1,
        text: "<p>q1</p>",
        type: "expression_of_ideas",
        difficulty: 'easy'
    },
    {
        id: 2,
        text: "Compare and contrast the perspectives of two characters in a text of your choice, focusing on their motivations and conflicts.",
        type: "expression_of_ideas",
        difficulty: 'hard'
    },
    {
        id: 3,
        text: "Write a persuasive essay arguing for or against the implementation of school uniforms in public schools.",
        type: "expression_of_ideas",
        difficulty: 'medium'
    },
    {
        id: 4,
        text: "Identify and explain three examples of figurative language in a poem we have studied this semester.",
        type: "expression_of_ideas",
        difficulty: 'easy'
    },
    {
        id: 5,
        text: "Passage Text",
        questions: [
            {
                id: 6,
                text: "Analyze how the author develops the theme of identity in the novel To Kill a Mockingbird.",
                type: "expression_of_ideas",
                difficulty: 'easy'
            },
            {
                id: 7,
                text: "Compare and contrast the perspectives of two characters in a text of your choice, focusing on their motivations and conflicts.",
                type: "expression_of_ideas",
                difficulty: 'easy'
            }
        ]
    }

]);

const quizzes = ref([]);
const errors = ref({});

const selectedQuestions = ref([]);

const progressWidth = computed(
    () => `${((currentStep.value - 1) / (totalSteps - 1)) * 100}%`
);

const isSelected = (questionId) => selectedQuestions.value.includes(questionId);

const toggleQuestion = (question) => {
    const ids = question.questions
        ? [question.id, ...question.questions.map((q) => q.id)]
        : [question.id];
    const allSelected = ids.every((id) => isSelected(id));

if (allSelected) {
        selectedQuestions.value = selectedQuestions.value.filter(
            (id) => !ids.includes(id)
        );
    } else {
        selectedQuestions.value = [
            ...new Set([...selectedQuestions.value, ...ids]),
        ];
    }
};

const prevStep = () => currentStep.value--;

const handleSubmit = () => {
    console.log("Form Data:", formData);
    submitted.value = true;
};

const addForm = () => {
    formData.value.push({ ...newData })
}

const removeForm = (index) => {
    formData.value.splice(index, 1)
}

const formatType = (type) => {
    return type?.split('_')?.length > 1
        ? type?.split('_').map(word => capitalizeFirst(word)).join(' ')
        : capitalizeFirst(type);
}

const capitalizeFirst = (str) => str?.charAt(0).toUpperCase() + str?.slice(1);

/* const withAllOptions = (selected, list) => {
    return selected.includes("All") ? ["All"] : ["All", ...list];
};

const getQuestionFormatOptions = computed(() =>
    withAllOptions(form.formats, props.questionFormats)
);

const getTypesOptions = computed(() =>
    withAllOptions(form.types, props.questionTypeOptions)
);

const getDifficultiesOptions = computed(() =>
    withAllOptions(form.difficulties, props.difficultyLabels)
); */

</script>

.step-indicator::before {
    content: "";
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    height: 3px;
    background: #e0e0e0;
    z-index: 0;
}

.step-indicator .progress-bar {
    position: absolute;
    top: 22px;
    left: 0;
    height: 3px;
    background: #667eea;
    z-index: 1;
    transition: width 0.3s ease;
}

.step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
}

.step-number {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    font-size: 18px;
}

.step.active .step-number {
    background: #667eea;
    color: white;
    transform: scale(1.15);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.step.completed .step-number {
    background: #48bb78;
    color: white;
}

.step-title {
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

.step.active .step-title {
    color: #667eea;
}

.step-content {
    display: none;
    animation: fadeIn 0.4s ease;
}

.step-content.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-content h3 {
    color: #333;
    margin-bottom: 25px;
    font-size: 22px;
}

button {
    padding: 12px 35px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: inherit;
}

.btn-prev {
    background: #6c757d;
    color: white;
}

.btn-prev:hover:not(:disabled) {
    background: #5a6268;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(108, 117, 125, 0.3);
}

.btn-next,
.btn-submit {
    background: #667eea;
    color: white;
    flex: 1;
}

.btn-next:hover,
.btn-submit:hover {
    color: white;
    background: #764ba2;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
}

button:disabled {
    background: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
}

button:disabled:hover {
    transform: none;
    box-shadow: none;
}

::v-deep(.vs__search) {
    height: calc(1.5em + 1rem + 2px);
}

::v-deep(.input-lg) {
    height: calc(1.5em + 1rem + 12px);
}

.single-quiz {
    background: #f6fefe;
    padding: 0.6rem;
    border-radius: 5px 5px 0 0;
}

.question-card {
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: white;
}

.question-card:hover {
    border-color: #a5b4fc;
    background-color: #f9fafb;
}

.question-card.selected {
    border-color: #6366f1;
    background-color: #eef2ff;
}

.icon-box {
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.selected-info {
    background-color: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 0.5rem;
}
</style>