<script setup>
import StartOverPupup from '@/views/pages/home/StartOverPupup.vue';
import cardiologyCategory from '@/views/pages/questionere/form-category';
import formview from '@/views/pages/questionere/form.vue';
import CustomNav from '../layouts/components/navbar-custom.vue';
import axios from '@axios';
import {
    requiredValidator
} from '@validators';
import { onBeforeMount, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import Cart from '../layouts/components/cart.vue';
const store = useStore()
const router = useRouter()
const route = useRoute()
// const categoryName = 'doctor_intake_request';
// const currentForm = cardiologyCategory[categoryName.replace(/[\s_]/g, '')]
const planName = ref(null)
const planAmount = ref(null)
const list_one_title = ref(null)
const list_sub_title = ref(null)
const list_two_title = ref(null)
const prescription_required = ref(null)
const shipping_price = ref(null)
const categoryName = ref(null);
const currentForm = ref(null);
const isMobile = ref(window.innerWidth <= 768); // Assuming mobile width is less than or equal to 768px
const currentDialoagkey = ref('')
const isTonalSnackbarVisible = ref(false)
const patientResponse = ref(false)
const isLoadingVisible = ref(false)
const questionForm = ref()
const answers = ref([]);
const storeAnswers = ref();
const isDialogVisible = ref(false)
const patient_id = localStorage.getItem('patient_id')
const access_token = store.access_token;
const seetingPlanLogo = ref(null);
const redirectTo = '/thankyou'
const redirectBack = '/review-appointment'
const patientExist = localStorage.getItem('exist')
const products = JSON.parse(localStorage.getItem('cart_products'));
const productCategoryName = ref(null)
const questions = ref([
    {
        question_key: 'why_interested_hrt',
        question: "What aspects of hormone replacement therapy (HRT) intrigue you?",
        type: "text",
    },
    {
        question_key: 'goal_loss_weight',
        question: "Is your objective with the program to achieve weight loss?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'what_biological_sex',
        question: "What is your assigned sex at birth?",
        type: "radio",
        options: ["Male", "Female"],
    },
    {
        question_key: '3_years_physical_test',
        question: "Have you undergone a comprehensive physical examination by a medical professional within the past three years, which included assessments of vital signs such as weight, blood pressure, and heart rate?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'medical_problems',
        question: "Did you experience any medical issues? If so, could you please elaborate?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'have_prostate_cancer',
        question: "Have you ever received a diagnosis of prostate cancer?",
        type: "radio",
        options: ["Yes", "No"],
    },
    // {
    //     question_key: 'what_height',
    //     question: "How tall are you?",
    //     type: "dropdown",
    //     options: ["5 ft 1 in",
    //         "5 ft 2 in",
    //         "5 ft 3 in",
    //         "5 ft 4 in",
    //         "5 ft 5 in",
    //         "5 ft 6 in",
    //         "5 ft 7 in",
    //         "5 ft 8 in",
    //     ],
    // },
    // {
    //     question_key: 'whight',
    //     question: "What is your weight?",
    //     type: "text",
    // },
    // {
    //     question_key: 'birthdate',
    //     question: "When were you born?",
    //     type: "date",
    //     sub_title: 'To proceed with medication, kindly input your accurate date of birth using the format mm/dd/yyyy.'
    // },
    {
        question_key: 'past_harmone_treatments',
        question: "Have you been prescribed any hormone treatments currently or in the past?",
        type: "radio",
        options: ["Thyroid Medication", "Testosterone Treatment", "Estrogen Blocker", "HGH", "Ipamoreline", "Colomipheine", "HCG", "Other", "None"],
    },
    {
        question_key: 'take_medications',
        question: "Are you currently using or have you used any over-the-counter or prescription medications, excluding hormone treatments? (Please note that your responses will be cross-checked against prescription and insurance records. Failure to disclose current prescriptions and/or medical conditions may result in disapproval for your safety.)",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'have_medications_allegies',
        question: "Do you have any allergies to medications?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'plan_children',
        question: "Do you intend to have children at some point in the future?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'partner_pregnant',
        question: "Is your partner currently pregnant or breastfeeding?",
        type: "radio",
        options: ["Yes", "No", "Not Applicable"],
    },
    {
        question_key: 'experience_ed',
        question: "Are you currently experiencing any erectile dysfunction (ED) issues?",
        type: "radio",
        options: ["Never", "Almost Never", "Occasionally", "Almost Always", "Always"],
    },
    {
        question_key: 'thyroid_disorders',
        question: "Have you ever been diagnosed with thyroid disorders such as hypothyroidism (underactive thyroid), hyperthyroidism (overactive thyroid), Hashimoto's Disease, or Graves' Disease?",
        type: "radio",
        options: ["Yes", "No"],
    },
    {
        question_key: 'family_history',
        question: "Does your family have a history of any of the following disorders?",
        type: "radio",
        options: ["Drug Alcohol", "Cancer", "Heart Disease", "Thyroid Disease", "Low Testosterone",
            "None"],
    },
    {
        question_key: 'patient_concent',
        question: "Please read and  accept",
        linktext: "Patient Content",
        type: "signalCheckbox",
    },
    {
        question_key: 'appointment_cancel',
        question: "Please read and  accept",
        linktext: "Appointment Cancel",
        type: "signalCheckbox",
    },
    {
        question_key: 'medicare_disclaimer',
        question: "Please read and  accept",
        linktext: "Medicare Disclaimer",
        type: "signalCheckbox",
    },
    {
        question_key: 'telehealth_concent',
        question: "Please read and  accept",
        linktext: "Telehealth Concent",
        type: "signalCheckbox",
    },
    {
        question_key: 'secondary_contact',
        question: "Please read and  accept",
        linktext: "Secondary Contact Disclosure(optional)",
        type: "signalCheckbox",
    },

]);
onBeforeMount(async () => {
    store.dispatch('updateIsLoading', true)
    store.dispatch('updateCurrentPage', 'additional-information')
    localStorage.setItem('currentPage', 'additional-information')
    await store.dispatch('getPatientInfo')
    await store.dispatch('getPlanInfo')
    // await store.dispatch('getPatientAppointment')
    await store.dispatch('getAdditionalInformation')

    planName.value = store.getters.getPatientPlan.plan_name
    planAmount.value = store.getters.getPatientPlan.plan_amount
    list_one_title.value = store.getters.getPatientPlan.list_one_title
    list_sub_title.value = store.getters.getPatientPlan.list_sub_title
    list_two_title.value = store.getters.getPatientPlan.list_two_title
    prescription_required.value = store.getters.getPatientPlan.prescription_required
    shipping_price.value = store.getters.getPatientPlan.shipping_price

    storeAnswers.value = store.getters.getAdditionalInformation.answers
    if (storeAnswers.value) {
        let tempAns = storeAnswers.value
        for (let answer of tempAns) {
            answers.value[answer.question_key] = answer.answer
        }
    }
    
    let productsData = products.filter(item => item.title !== "Doctor Visit")
    productsData.forEach(product => {
        if(product.category_name)
            productCategoryName.value = product.category_name.toLowerCase().replace(/\s+|-/g, '_')
    })
    console.log('---->', productCategoryName.value)
    if (productCategoryName.value) {
        categoryName.value = productCategoryName.value
    } else {
        categoryName.value = 'weight_loss';
    }
    currentForm.value = cardiologyCategory[categoryName.value.replace(/[\s_]/g, '')]
    store.dispatch('updateIsLoading', false)
})
const validateQuestion = async () => {
    const { valid: isValid } = await questionForm.value?.validate();
    console.log('isValid ', isValid);
    if (isValid)
        saveAnswers()
};

onMounted(async () => {
    window.addEventListener('resize', checkIfMobile);
    let setting = await axios.post('/api/settings', {})
    // console.log(setting.data)
    seetingPlanLogo.value = '/assets/logo/' + setting.data.logo
})
// Detach event listener on component unmount
onUnmounted(() => {
    window.removeEventListener('resize', checkIfMobile);

});
const checkIfMobile = () => {
    isMobile.value = window.innerWidth <= 768;
};


const saveAnswers = async () => {
    isLoadingVisible.value = true;
    const patient_id = localStorage.getItem('patient_id');
    const jsonData = {
        questions: questions.value.reduce((accumulator, question, index) => {
            const answerValue = answers.value[question.question_key];

            if (answerValue !== undefined) {
                accumulator.push({
                    question_key: question.question_key,
                    type: question.type,
                    answer: answerValue,
                });
            }

            return accumulator;
        }, []),
    };
    let qaData = Array({ 'answers': jsonData.questions });
    console.log('answers ', JSON.stringify(qaData));

    await store.dispatch('saveAdditionalInformation', {
        answers: jsonData.questions,
    })
    router.replace(route.query.to && route.query.to != '/additional-information' ? String(route.query.to) : '/thankyou')
};
const getCurrentDate = () => {
    const today = new Date();
    const year = today.getFullYear();
    let month = today.getMonth() + 1;
    let day = today.getDate();

    // Format the date to match the input type="date" format
    month = month < 10 ? `0${month}` : month;
    day = day < 10 ? `0${day}` : day;

    return `${month}-${day}-${year}`;
};
const openDialog = (question_key) => {
    currentDialoagkey.value = question_key;
    isDialogVisible.value = true;
    window.addEventListener('click', closeDialogOnOutsideClick);
};
const closeDialogOnOutsideClick = (event) => {
    const dialogElement = refs.myDialog.$el;
    if (!dialogElement.contains(event.target)) {
        isDialogVisible.value = false;
        window.removeEventListener('click', closeDialogOnOutsideClick);
    }
};
const handleContinueClick = (currentDialoagkey) => {
    isDialogVisible.value = false; // Hide the dialog
    answers.value[currentDialoagkey] = true; // Update the answers object
};
const backFun = () => {
    store.dispatch('updateIsLoading', true)
    router.replace(route.query.to && route.query.to != '/additional-information' ? String(route.query.to) : '/review-appointment')
}
</script>

<template>
    <StartOverPupup :showPopup="store.getters.getShowStartOverPupup"></StartOverPupup>
    <!-- <VDialog v-model="store.getters.getIsLoading" width="110" height="150" color="primary">
        <VCardText class="" style="color: white !important;">
            <div class="demo-space-x">
                <VProgressCircular :size="40" color="primary" indeterminate />
            </div>
        </VCardText>
    </VDialog> -->
    <VRow><CustomNav :logo='seetingPlanLogo'></CustomNav></VRow>
    <VRow
    style="min-height: 100dvh; margin: 0px;"
    :style="isMobile ? { marginTop: '90px' } : { marginTop: '60px' }"
    >
        <!-- <VCol cols="12" md="5" class="bg-custom col-order-1"
            :class="isMobile ? '' : 'auth-wrapper d-flex align-center justify-center pa-4'">
            <Cart></Cart>
        </VCol> -->
        <VCol cols="12" md="12" class="bg-custom-color col-order-2"
            :class="isMobile ? '' : 'auth-wrapper d-flex align-center justify-center pa-4'">
            <!-- <div class="auth-wrapper d-flex align-center justify-center pa-4"> -->
            <VCard class="auth-card pa-2 rounded-5" style="" :class="isMobile ? '' : 'card-wid'">

                <VRow class=" mx-0 gy-3 px-lg-5">
                    <VCol cols="12" lg="12" md="12">
                        <router-link to="/" class="text-center mb-2 mt-2"
                            style="width: 100%;position: relative;display: block;padding-top: 20px;">
                            <span class="text-center">
                                <VImg :src="seetingPlanLogo" width="250" height="50" class="logo-img" />
                                <!-- <svg width="32" height="22" viewBox="0 0 32 22" fill="none"
                    xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
                        fill="#7367F0" />
                    <path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd"
                        d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z"
                        fill="#161616" />
                    <path opacity="0.06" fill-rule="evenodd" clip-rule="evenodd"
                        d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z"
                        fill="#161616" />
                    <path fill-rule="evenodd" clip-rule="evenodd"
                        d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
                        fill="#7367F0" />
                </svg> -->
                            </span>
                        </router-link>
                    </VCol>
                    <VCol cols="12" md="12">
                        <!-- 👉 Title and subtitle -->
                        <div class="text-left">
                            <h5 class="text-h5 pricing-title mb-0">
                                Doctor Intake Request
                            </h5>
                            <p>Please complete the medical intake form before your appointment to ensure a smooth consultation with the doctor.</p>
                        </div>
                    </VCol>
                    <VCol cols="12" md="12">
                        <formview v-if="currentForm" :questionCategory="categoryName" :steps="currentForm.steps"
                            :schema="currentForm.schema" :redirectTo="redirectTo" :redirectBack="redirectBack"
                            :finishLabel="'All done'" :newForm="true" :returningUser="patientExist">
                        </formview>
                    </VCol>
                </VRow>
                <VRow>
                    <VDialog v-model="isDialogVisible" refs="myDialog" persistent width="500">
                        <!-- Dialog Content -->
                        <VCard>
                            <VCardText v-if="currentDialoagkey == 'patient_concent'"
                                title="Male Harmone therapy Patient consent">

                                <!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
                                <VCardText class="pt-0"><b>Med Excel Clinic, P.A. ("Hgh HRT")</b>
                                </VCardText>
                                <VCardText><b>Nature of Hormone replacement and supplements therapy</b>
                                </VCardText>
                                <VDivider class="m-0"></VDivider>
                                <VCardText class="scrollable-text px-0 py-3">
                                    I hereby give my consent to be treated using hormone replacement
                                    therapy.
                                    (antioxidants), and other medications prescribed to aid in improving my
                                    overall health. I further consent to receive hormone replacement
                                    therapy.


                                </VCardText>
                                <VCardText class="p-0">
                                    <VRow>
                                        <VCol cols="12" lg="6" md="6">
                                            <VTextField v-model="patient_concent_Signature" label="Full Name Signature"
                                                :rules="[requiredValidator]" />

                                        </VCol>
                                        <VCol cols="12" lg="6" md="6">
                                            <VTextField v-model="date" type="date" disabled label="date"
                                                :rules="[requiredValidator]" />
                                        </VCol>
                                    </VRow>
                                </VCardText>
                                <VCardText class="text-end pt-0 mt-5">
                                    <VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
                                        Continue
                                    </VBtn>
                                </VCardText>


                            </VCardText>
                            <VCardText v-if="currentDialoagkey == 'appointment_cancel'" title="">
                                <v-card-title class="p-0">
                                    <span class="headline"><b>Medical Provider consultation
                                            cancellation</b></span>
                                </v-card-title>
                                <VDivider></VDivider>
                                <!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
                                <VCardText class="scrollable-text px-0 py-3">
                                    I acknowledge that Hgh Medical charges a $59 for missed
                                    appiontments.
                                </VCardText>
                                <VCardText class="p-0">
                                    <VRow>
                                        <VCol cols="12" lg="6" md="6">
                                            <VTextField v-model="appointment_cancel_Signature"
                                                label="Full Name Signature" :rules="[requiredValidator]" />

                                        </VCol>
                                        <VCol cols="12" lg="6" md="6">
                                            <VTextField v-model="date" type="date" disabled label="date"
                                                :rules="[requiredValidator]" />
                                        </VCol>
                                    </VRow>
                                </VCardText>
                                <VCardText class="text-end pt-0 mt-5">
                                    <VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
                                        Continue
                                    </VBtn>
                                </VCardText>
                            </VCardText>
                            <VCardText v-if="currentDialoagkey == 'medicare_disclaimer'">
                                <v-card-title class="p-0">
                                    <span class="headline"><b>DISCLAIMER OF MEDICARE / <br> INSURANCE
                                            BENEFIT</b></span>
                                </v-card-title>
                                <VDivider></VDivider>
                                <!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
                                <VCardText class="scrollable-text px-0 py-3">
                                    The patient acknowledge Hgh HRT or any of its
                                    representatives
                                    have made no representation or warranty that the treatment or any
                                    portion
                                    thereof qualifies or will qualify for reimbursement or assignment under
                                    any
                                    other government or private insurance program.
                                </VCardText>
                                <VCardText class="p-0">
                                    <VRow>
                                        <VCol cols="12" lg="6" md="6">
                                            <VTextField v-model="medicare_disclaimer_Signature"
                                                label="Full Name Signature" :rules="[requiredValidator]" />

                                        </VCol>
                                        <VCol cols="12" lg="6" md="6">
                                            <VTextField v-model="date" type="date" disabled label="date"
                                                :rules="[requiredValidator]" />
                                        </VCol>
                                    </VRow>

                                </VCardText>
                                <VCardText class="text-end pt-0 mt-5">
                                    <VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
                                        Continue
                                    </VBtn>
                                </VCardText>
                            </VCardText>
                            <VCardText v-if="currentDialoagkey == 'telehealth_concent'" title="">
                                <v-card-title class="p-0">
                                    <span class="headline"><b>Hgh Medical, P.A. Telehealth <br> Informed
                                            Consent</b></span>
                                </v-card-title>
                                <VDivider></VDivider>
                                <!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
                                <VCardText class="scrollable-text px-0 py-3">
                                    Telehealth involves the use of secure electronic communications,
                                    information technology, or other means to enable a healthcare provider
                                    and
                                    a patient at different locations to communicate and share individual
                                    patient
                                    health information for the purpose of rendering clinical care. This
                                    "Telehealth Informed Consent" informs the patient ("patient," "you")
                                </VCardText>
                                <VCardText class="p-0">
                                    <VRow>
                                        <VCol cols="12" lg="6" md="6">
                                            <VTextField v-model="telehealth_concent_Signature"
                                                label="Full Name Signature" :rules="[requiredValidator]" />

                                        </VCol>
                                        <VCol cols="12" lg="6" md="6">
                                            <VTextField v-model="date" type="date" disabled label="date"
                                                :rules="[requiredValidator]" />
                                        </VCol>
                                    </VRow>

                                </VCardText>
                                <VCardText class="text-end pt-0 mt-5">
                                    <VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
                                        Continue
                                    </VBtn>
                                </VCardText>
                            </VCardText>
                            <VCardText v-if="currentDialoagkey == 'secondary_contact'" title="">
                                <!-- <DialogCloseBtn variant="text" size="small" @click="isDialogVisible = false" /> -->
                                <v-card-title class="p-0">
                                    <span class="headline"><b>Secondary Disclosure</b></span>
                                </v-card-title>
                                <VDivider></VDivider>
                                <VCardText class="scrollable-text pt-0 px-0 py-0">
                                    Hgh HRT , PC is not permitted by law to provide information
                                </VCardText>
                                <VCardText class="p-0">
                                    <VRow>
                                        <VCol cols="12" lg="12" md="6">
                                            <VTextField v-model="auth_information"
                                                label="Authorize Release of Medical Information to (enter name)    "
                                                :rules="[requiredValidator]" />
                                        </VCol>
                                    </VRow>
                                    <VRow>
                                        <VCol cols="12" md="6">
                                            <VTextField v-model="dob_auth_person" type="date" :max="getCurrentDate()"
                                                label="DOB of authorized person above " :rules="[requiredValidator]" />
                                        </VCol>
                                        <VCol cols="12" md="6">
                                            <VTextField v-model="relationship_auth_person"
                                                label="Relationship of authorize person" :rules="[requiredValidator]" />
                                        </VCol>
                                    </VRow>
                                </VCardText>

                                <VCardText class="p-0">
                                    <VRow>
                                        <VCol cols="12" lg="6" md="6">
                                            <VTextField v-model="secondary_contact_Signature"
                                                label="Full Name Signature" :rules="[requiredValidator]" />

                                        </VCol>
                                        <VCol cols="12" lg="6" md="6">
                                            <VTextField v-model="date" type="date" disabled label="date"
                                                :rules="[requiredValidator]" />
                                        </VCol>
                                    </VRow>

                                </VCardText>
                                <VCardText class="text-end pt-0 mt-5">
                                    <VBtn @click.prevent="handleContinueClick(currentDialoagkey)">
                                        Continue
                                    </VBtn>
                                </VCardText>


                            </VCardText>
                        </VCard>

                    </VDialog>
                </VRow>
            </VCard>
        </VCol>
    </VRow>

</template>
<style scoped>
@media only screen and (max-width: 768px) {
    .card-wid {
        max-width: 600px !important;
        min-width: auto !important;
    }

    .col-order-1 {
        order: 2;
    }

    .col-order-2 {
        order: 1;
    }
}

@media only screen and (min-width: 769px) {
    .col-order-1 {
        order: 1;
    }

    .col-order-2 {
        order: 2;
    }
}

.total-font {
    font-size: 20px;
    margin-bottom: 5px;
}

.bg-custom {
    background: #F3F3F3;
}

.bg-custom-color {
    background: #E0F0E3;
}

.bg-white bg-change-bk .current-plan {
    border: 2px solid rgb(var(--v-theme-primary));
}

.cut-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: line-through;
    text-decoration-color: red;
    text-decoration-thickness: 1px;
}

.plan-card {
    margin: 0rem;
    margin-bottom: 0;
}

.card-wid {
    max-width: 600px;
    border-radius: 10px !important;
}

.layout-wrapper {
    justify-content: center;
}

.error-message {
    color: #ff2f2f;
    font-size: 15px;
}
</style>
<style lang="scss">
.bg-custom {
    background: #F3F3F3;
}

.bg-custom-color {
    background: #E0F0E3;
}

.total-font {
    font-size: 20px;
    margin-bottom: 5px;
}

.card-title {
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.v-list-item-title {
    white-space: inherit !important;
    ;
}

.logo-img {
    display: block;
    position: relative;
    margin: 0 auto;
}

.v-list {
    min-height: 168px;
}

@media (min-width: 320px) and (max-width: 768px) {
    .v-container {
        padding: 0px !important;
    }

    .auth-wrapper {
        padding: 0px !important;
    }

    .input-width {
        max-width: 100% !important;
    }
}

// .input-width {
//     max-width: 50%;
// }

.form-check-input[type=checkbox] {
    border-radius: 0.25em;
}

.form-check .form-check-input {
    float: left;
    margin-right: 0.5em;
}

.form-check-input {
    cursor: pointer;
}

.form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.135em;
    vertical-align: top;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border: 2px solid #dbdade;
    appearance: none;
}

.form-check .form-check-input:checked,
.form-check .form-check-input[type=checkbox]:indeterminate {
    box-shadow: 0 0.125rem 0.25rem rgba(165, 163, 174, 0.3);
}

.form-check-input:checked[type=checkbox] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='13' viewBox='0 0 15 14' fill='none'%3E%3Cpath d='M3.41667 7L6.33333 9.91667L12.1667 4.08333' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.form-check-input:checked,
.form-check-input[type=checkbox]:indeterminate {
    background-color: #7367f0;
    border-color: #7367f0;
}

.form-check-input:checked {
    background-color: #7367f0;
    border-color: #7367f0;
}

.form-check-input[type=checkbox] {
    border-radius: 0.25em;
}
</style>
