@include('frontend.includes.header')
<style>
    .question-div{
        user-select: none;
    }
    .language-div .d-flex{
        gap:10px;
    }
    .language-title{
        width:150px;
        padding: 10px 20px;
        border: 1px solid #4a68a1;
        border-radius: 10px;
    }
    .language-title.active{
        background-color: #4a68a1;
        color: white;
    }
    .language-title:hover{
        background-color: #4a68a1;
        color: white;
        transition: 0.5s;
    }
    .question-div{
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
    .choices a.active {
        background: linear-gradient(45deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.05));
        transform: translateY(-5px) scale(1.02);
        transition:all 0.5s ease;
    }
    .card{
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 1rem;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width:100%;
    }
    .question-title{
        margin-top: 15px;
        font-size: 3rem;
        font-weight: 700;
        text-align: center;
        color: #4a68a1;
    }
    .choice-div{
        margin-top: 30px;
        justify-content: center;
        align-content: center;
        padding-left:20px; 
        padding-right:20px; 
    }
    .choices{
        padding: 15px;
    }
    .choices a{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px 20px;
        border: 1px solid #4a68a1;
        border-radius: 10px;
        /* margin: 15px; */
        width: 100%;
    }
    .choices img{
        width: 200px;
        height:200px;
        object-fit: cover;
        mix-blend-mode: multiply;
    }
    .choices:hover a{
        background: linear-gradient(45deg, rgba(13, 110, 253, 0.1), rgba(13, 110, 253, 0.05));
        transform: translateY(-5px) scale(1.02);
        transition:all 0.5s ease;
    }
    .choices a span{
        margin-top: 10px;
        font-size: 2rem;
        font-weight: 600;
        text-align: center;
    } 
    .progress-div{
        margin-top: 20px;
    }
    .progress-div div{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    .progress-btn{
        display: block;
        padding: 5px;
        background-color: #4a68a1;
        color: #fff;
        border-radius: 10px;
        width: 100px;
        border: 1px solid #fff;
    }
    .progress-btn:hover{|
        color: #4a68a1;
        transition: 0.5s;
        background-color: #fff  !important;
        border: 1px solid #4a68a1;
      }
</style>
<div class="container text-center">
    <h1>
        Quiz
    </h1>
    <div class="row language-div">
        <div class="col-lg-12 d-flex justify-content-center ">
            <a href="javascript:void(0);" id="langHi" class="language-title">Hindi</a>
            <a href="javascript:void(0);" id="langEn"  class="language-title active">English</a>
        </div>
    </div>
</div>

<div class="container question-div">
    <div class="card">
        <div id="quizContent">
            <div class="question-title">
                Q.1 This is a question title
            </div>
            <div class="choice-div row">
                <div class="col-lg-3 choices">
                    <a href="javascript:void(0);">
                        <img src="{{url('frontend/custom/quiz/single.png')}}" alt="">
                        <span> aloo </span>
                    </a>
                </div>
                <div class="col-lg-3 choices">
                    <a href="javascript:void(0);" class="active">
                        <img src="{{url('frontend/custom/quiz/single.png')}}" alt="">
                        <span> aloo </span>
                    </a>
                </div>
                <div class="col-lg-3 choices">
                    <a href="javascript:void(0);">
                        <img src="{{url('frontend/custom/quiz/single.png')}}" alt="">
                        <span> aloo </span>
                    </a>
                </div>
                <div class="col-lg-3 choices">
                    <a href="javascript:void(0);">
                        <img src="{{url('frontend/custom/quiz/single.png')}}" alt="">
                        <span> aloo </span>
                    </a>
                </div>
            </div>
        </div>
        <div class="row progress-div">
            <div class="col-lg-12 text-center">
                <a class="progress-btn" id="prevBtn">Previous</a>
                <a class="progress-btn" id="nextBtn">Next</a>
            </div>
        </div>
    </div>
</div>



@include('frontend.includes.footer')

<script>
const quizSteps = [
    {
        title: {
            en: 'You will be finding right Mattress for:',
            hi: 'आप किसके लिए सही गद्दा खोज रहे हैं:'
        },
        options: [
            { label: { en: 'Single Person', hi: 'एक व्यक्ति' }, img: 'https://shamfoam.com/questionaire/SINGLE_PERSON.png' },
            { label: { en: 'Couple', hi: 'जोड़ा' }, img: 'https://shamfoam.com/questionaire/couple.png' },
            { label: { en: 'Elder or Patient', hi: 'बुज़ुर्ग या मरीज़' }, img: 'https://shamfoam.com/questionaire/ElderorPatient.png' },
            { label: { en: 'Guest', hi: 'मेहमान' }, img: 'https://shamfoam.com/questionaire/guest.png' },
        ],
    },
    {
        title: {
            en: 'What is your age group:',
            hi: 'आपका आयु वर्ग क्या है:'
        },
        options: [
            { label: { en: 'Energetic Explorers <br> (16-25)', hi: 'उत्साही खोजकर्ता <br> (16-25)' }, img: 'https://shamfoam.com/questionaire/age(16to25).png' },
            { label: { en: 'Energetic Titans <br> (25-40)', hi: 'ऊर्जावान टाइटन्स <br> (25-40)' }, img: 'https://shamfoam.com/questionaire/age(25to40).png' },
            { label: { en: 'Experienced Leaders <br> (40-60)', hi: 'अनुभवी नेता <br> (40-60)' }, img: 'https://shamfoam.com/questionaire/age(40to60).png' },
            { label: { en: 'Expert Pioneers <br> (60 above)', hi: 'विशेषज्ञ अग्रणी <br> (60 से ऊपर)' }, img: 'https://shamfoam.com/questionaire/age60above.png' },
        ],
    },
    {
        title: {
            en: "What's your preferred sleeping position?",
            hi: 'आपकी पसंदीदा सोने की स्थिति क्या है?'
        },
        options: [
            { label: { en: 'On your Back', hi: 'पीठ के बल' }, img: 'https://shamfoam.com/questionaire/SINGLE_PERSON.png' },
            { label: { en: 'Side Sleeper', hi: 'साइड स्लीपर' }, img: 'https://shamfoam.com/questionaire/on_your_side.png' },
            { label: { en: 'On your Stomach', hi: 'पेट के बल' }, img: 'https://shamfoam.com/questionaire/on_your_back_.png' },
            { label: { en: 'Switching Positions', hi: 'स्थिति बदलना' }, img: 'https://shamfoam.com/questionaire/switching_positions.png' },
        ],
    },
    {
        title: {
            en: 'What do you feel of this?',
            hi: 'आपको क्या महसूस होता है?'
        },
        options: [
            { label: { en: 'Disturbed Rest, Constant Tossing', hi: 'अशांत नींद, लगातार करवटें' }, img: 'https://shamfoam.com/questionaire/disturbed_rest.png' },
            { label: { en: 'Battle to <br> Initiate Sleep', hi: 'नींद शुरू करने के लिए संघर्ष' }, img: 'https://shamfoam.com/questionaire/battle_to_initiate_Sleep.png' },
            { label: { en: 'Awaken without feeling Refreshed', hi: 'ताज़गी के बिना जागना' }, img: 'https://shamfoam.com/questionaire/awaken_without_refreshed.png' },
            { label: { en: 'Start the Day Sweaty and Warm', hi: 'दिन की शुरुआत पसीने और गर्मी से करें' }, img: 'https://shamfoam.com/questionaire/start_the_day.jpeg' },
        ],
    },
    {
        title: {
            en: 'Any medical Condition?',
            hi: 'कोई चिकित्सीय स्थिति?'
        },
        options: [
            { label: { en: 'Arthritis', hi: 'गठिया' }, img: 'https://shamfoam.com/questionaire/arthritics.png' },
            { label: { en: 'Body Stiffness', hi: 'शरीर की कठोरता' }, img: 'https://shamfoam.com/questionaire/body_Stifness.png' },
            { label: { en: 'All day bedrest', hi: 'पूरे दिन बिस्तर पर रहना' }, img: 'https://shamfoam.com/questionaire/on_bed_more_than.jpeg' },
            { label: { en: 'None', hi: 'कोई नहीं' }, img: '{{url('frontend/custom/quiz/none.png')}}' },
        ],
    },
    {
        title: {
            en: 'Price Bracket:',
            hi: 'मूल्य श्रेणी:'
        },
        options: [
            { label: { en: 'Approx 10,000', hi: 'लगभग ₹10,000' }, img: '{{url('frontend/custom/quiz/rupee.png')}}' },
            { label: { en: '10,000 - 15,000', hi: '₹10,000 - ₹15,000' }, img: '{{url('frontend/custom/quiz/rupee.png')}}' },
            { label: { en: '15,000 - 25,000', hi: '₹15,000 - ₹25,000' }, img: '{{url('frontend/custom/quiz/rupee.png')}}' },
            { label: { en: 'I need the best for me', hi: 'कोई सीमा नहीं, मुझे सबसे अच्छा चाहिए' }, img: '{{url('frontend/custom/quiz/rupee.png')}}' },
        ],
    }
];

let currentStep = 0;
let currentLang = 'en';
let selectedAnswers = [];

function renderStep() {
    const step = quizSteps[currentStep];
    let html = `<div class="">
                    <div class="question-title">Q.${currentStep + 1} ${step.title[currentLang]}</div>
                    <div class="choice-div row">`;

    step.options.forEach((opt, index) => {
        const isActive = selectedAnswers[currentStep] === index ? 'active' : '';
        html += `
        <div class="col-lg-3 choices">
            <a href="javascript:void(0);" data-index="${index}" class="${isActive}">
                <img src="${opt.img}" alt="">
                <span>${opt.label[currentLang]}</span>
            </a>
        </div>`;
    });

    html += `</div></div>`;
    document.getElementById("quizContent").innerHTML = html;
}

document.addEventListener("click", function (e) {
    const choice = e.target.closest(".choices a");
    if (choice && choice.dataset.index !== undefined) {
        const index = parseInt(choice.dataset.index);
        selectedAnswers[currentStep] = index;
        nextBtn();
    }
});

document.getElementById("nextBtn").addEventListener("click", () => {
    if (document.querySelectorAll('.choices a.active').length === 0) {
        Swal.fire({
            title: "Please select an option.",
            icon: "error",
            timer: 2000,
        });
        return;
    }
    nextBtn();
});

document.getElementById("prevBtn").addEventListener("click", () => {
    if (currentStep > 0) {
        currentStep--;
        renderStep();
    }
});

function nextBtn() {
    if (currentStep < quizSteps.length - 1) {
        currentStep++;
        renderStep();
    } else {
        window.location.href = "{{ url('products/mattresses?param=random') }}";
    }
}

document.getElementById("langEn").addEventListener("click", () => {
    currentLang = 'en';
    renderStep();
    document.getElementById("langEn").classList.add("active");
    document.getElementById("langHi").classList.remove("active");
});

document.getElementById("langHi").addEventListener("click", () => {
    currentLang = 'hi';
    renderStep();
    document.getElementById("langHi").classList.add("active");
    document.getElementById("langEn").classList.remove("active");
});

// Initial render
renderStep();
</script>