@extends('layouts.question')
@section('title', 'Challenge')

@push('styles')
<link rel="stylesheet" href="{{ asset('front_assets/css/challenge.css') }}">
@endpush

@section('content')
<div class="container py-5 text-center">
    <button class="close-btn"><i class="fa fa-close"></i></button>
    <h2 class="fw-bold">WALL PILATES WORKOUT PLAN</h2>
    <p class="text-muted">BASED ON YOUR AGE</p>

    <div class="row justify-content-center my-4">
        @foreach([['18–29', 'age1.webp'], ['30–39', 'age2.webp'], ['40–49', 'age3.webp'], ['50+', 'age4.webp']] as [$age, $image])
        <div class="col-6 col-md-3 mb-4">
            <div class="card age-option border-0 shadow" data-age="{{ $age }}" style="cursor:pointer; background: #f2f2f2;">
                <img src="{{ asset('front_assets/img/' . $image) }}" class="card-img-top rounded-top" alt="Age {{ $age }}">
                <div class="card-body p-2 bg-pink text-black rounded-bottom card-custom">
                    <strong>Age: {{ $age }}</strong>
                    <span class="float-end"><i class="fa fa-arrow-right" style="font-size: 20px;font-weight: bold;"></i></span>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <p class="text-muted small">
        By <strong>choosing your age and continuing</strong>, you agree to our 
        <a href="#">Terms of Service</a> | <a href="#">Privacy Policy</a><br>
        Please review before continuing
    </p>
</div>

<!-- Wizard Modal -->
<div class="modal fade" id="wizardModal" tabindex="-1" aria-labelledby="wizardModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
        <div class="modal-body">
            <div id="wizard-steps"></div>
        </div>
    </div>
  </div>
</div>

<script>
document.querySelector('.close-btn').addEventListener('click', function () {
    location.href = "{{ route('home') }}";
});

document.addEventListener('DOMContentLoaded', () => {
    const steps = [
        { question: "What is your main goal right now?", options: ["Lose weight", "Build muscle", "Tone body", "Improve general health"] },
        { question: "Where do you prefer to work out?", options: ["At home", "At the gym", "Both"] },
        { question: "What’s your current fitness level?", options: ["Beginner", "Intermediate", "Advanced"] },
        { question: "Do you have any limitations or injuries?", options: ["No", "Yes"], conditionalInput: true, inputLabel: "Please specify your injury" },
        { question: "Do you follow any special diet or have food restrictions?", options: ["No", "Yes (keto, vegan, allergies, etc.)"] },
        { question: "How many days per week can you commit to training?", options: ["2–3 days", "4–5 days", "6–7 days"] },
        { question: "Are you interested in a personalized meal plan with your program?", options: ["Yes", "No"] },
        { question: "What is your height? (in cm)", input: true },
        { question: "What is your weight? (in kg)", input: true },
    ];

    let ageGroup = "";       // Separate variable for age
    let currentStep = 0;
    let answers = [];

    function renderStep(step) {
        const data = steps[step];
        let html = `<h4 class="text-center mb-4">${data.question}</h4>`;

        if (data.options) {
            html += `<div class="d-flex justify-content-center flex-wrap gap-3">
                ${data.options.map(option => `
                    <button class="btn btn-outline-primary step-option" data-answer="${option}">${option}</button>
                `).join('')}
            </div>`;

            if (data.conditionalInput) {
                html += `
                    <div class="mt-3 d-none" id="conditional-input-wrapper">
                        <label class="form-label">${data.inputLabel}</label>
                        <input type="text" class="form-control w-50 mx-auto" id="conditional-input">
                        <button class="btn btn-primary mt-3 continue-conditional">Continue</button>
                    </div>
                `;
            }
        } else if (data.input) {
            html += `
                <div class="d-flex justify-content-center">
                    <input type="number" class="form-control w-50" id="input-step" placeholder="Enter value">
                </div>
                <button class="btn btn-primary mt-3 next-input-step">Continue</button>
            `;
        }

        if (step > 0) {
            html += `<div class="text-center mt-3">
                        <button class="btn btn-secondary prev-step">Back</button>
                    </div>`;
        }

        document.getElementById('wizard-steps').innerHTML = html;
    }

    document.querySelectorAll('.age-option').forEach(card => {
        card.addEventListener('click', () => {
            ageGroup = card.getAttribute('data-age');
            currentStep = 0;
            renderStep(currentStep);
            new bootstrap.Modal(document.getElementById('wizardModal')).show();
        });
    });

    document.getElementById('wizard-steps').addEventListener('click', function(e) {
        if (e.target.classList.contains('step-option')) {
            const answer = e.target.getAttribute('data-answer');

            if (currentStep === 3 && answer === "Yes") {
                answers[currentStep] = "";
                document.querySelectorAll('.step-option').forEach(btn => btn.disabled = true);
                document.getElementById('conditional-input-wrapper').classList.remove('d-none');
            } else {
                answers[currentStep] = answer;
                currentStep++;
                if (currentStep < steps.length) {
                    renderStep(currentStep);
                } else {
                    showComplete();
                }
            }
        }

        if (e.target.classList.contains('continue-conditional')) {
            const val = document.getElementById('conditional-input').value.trim();
            if (val) {
                answers[currentStep] = val;
                currentStep++;
                if (currentStep < steps.length) {
                    renderStep(currentStep);
                } else {
                    showComplete();
                }
            } else {
                Swal.fire('Please specify your injury');
            }
        }

        if (e.target.classList.contains('next-input-step')) {
            const inputVal = document.getElementById('input-step').value;
            if (inputVal) {
                answers[currentStep] = inputVal;
                currentStep++;
                if (currentStep < steps.length) {
                    renderStep(currentStep);
                } else {
                    showComplete();
                }
            } else {
                Swal.fire('Please enter a valid number');
            }
        }

        if (e.target.classList.contains('prev-step')) {
            currentStep--;
            renderStep(currentStep);
        }
    });

    function showComplete() {
        // console.log(answers);
        @if(Auth::check())
        fetch("{{ route('client.save.userinfo') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                age: ageGroup,
                meal_goal: answers[0],
                workout_preference: answers[1],
                level: answers[2],
                diet: answers[3],
                training_days: answers[4],
                meal_plan_interest: answers[5],
                progress_tracking: answers[6],
                height_cm: answers[7],
                weight_kg: answers[8]
            })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                document.getElementById('wizard-steps').innerHTML = `
                    <div class="text-center">
                        <h4 class="text-success">🎉 Profile Updated Successfully!</h4>
                        <p class="mt-3">Your workout preferences have been saved.</p>
                        <a href="{{ route('client.dashboard') }}" class="btn btn-success mt-3">Go to Dashboard</a>
                    </div>
                `;
            } else {
                Swal.fire('Something went wrong. Please try again.');
            }
        });
        @else
        document.getElementById('wizard-steps').innerHTML = `
            <div class="text-center">
                <h4 class="text-success">🎉 You're all set!</h4>
                <p class="mt-3">We recommend our Wall Pilates Beginner Program.</p>
                <a href="#" class="btn btn-success mt-3">Start Plan</a>
            </div>
        `;
        @endif
    }
});
</script>
@endsection