@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">LET'S BUILD YOUR PERSONAL PROFILE</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 continuing, you agree to our <a href="#">Terms of Service</a> | <a href="#">Privacy Policy</a>
    </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: "How old are you?", input: true },
        { question: "What is your height? (in cm)", input: true },
        { question: "What is your weight? (in kg)", input: true },
        { question: "Do you want to lose or gain weight?", options: ["Lose", "Gain"], conditionalInput: true, inputLabel: "How many kgs?" },
        { question: "What is your location?", input: true },
        { question: "Do you have any allergy from food?", options: ["No", "Yes"], conditionalInput: true, inputLabel: "Please specify your allergy" },
        { question: "Did you take any medicine or antibiotics?", options: ["No", "Yes"], conditionalInput: true, inputLabel: "Please specify your medicine" },
        { question: "Did you join gym before?", options: ["No", "Yes"] },
        { question: "How many persons for training?", options: ["1", "2", "3", "4"] },
        { question: "Select your package (classes & price):", options: [] },
    ];

    let currentStep = 0;
    let answers = [];

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

        if (step === 9 && steps[8].selectedPersons) {
            const packages = {
                "1": [
                    { text: "8 classes - 2400 AED", value: "8 classes - 2400 AED" },
                    { text: "12 classes - 3000 AED", value: "12 classes - 3000 AED" },
                    { text: "16 classes - 3500 AED", value: "16 classes - 3500 AED" },
                ],
                "2": [
                    { text: "8 classes - 3200 AED", value: "8 classes - 3200 AED" },
                    { text: "12 classes - 4000 AED", value: "12 classes - 4000 AED" },
                    { text: "16 classes - 4500 AED", value: "16 classes - 4500 AED" },
                ],
                "3": [
                    { text: "8 classes - 3500 AED", value: "8 classes - 3500 AED" },
                    { text: "12 classes - 4400 AED", value: "12 classes - 4400 AED" },
                    { text: "16 classes - 5000 AED", value: "16 classes - 5000 AED" },
                ],
                "4": [
                    { text: "8 classes - 4000 AED", value: "8 classes - 4000 AED" },
                    { text: "12 classes - 4600 AED", value: "12 classes - 4600 AED" },
                    { text: "16 classes - 5400 AED", value: "16 classes - 5400 AED" },
                ]
            };

            const selectedPackages = packages[steps[8].selectedPersons] || [];
            html += `<div class="d-flex justify-content-center flex-wrap gap-3">`;
            selectedPackages.forEach(pkg => {
                html += `<button class="btn btn-outline-primary step-option" data-answer="${pkg.value}">${pkg.text}</button>`;
            });
            html += `</div>`;

        } else 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" placeholder="Enter value">
                        <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="text" 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', () => {
            answers[0] = card.getAttribute('data-age');
            currentStep = 1;
            renderStep(currentStep);
            new bootstrap.Modal(document.getElementById('wizardModal')).show();
        });
    });

    document.getElementById('wizard-steps').addEventListener('click', function(e) {
        if (e.target.classList.contains('step-option')) {
            document.querySelectorAll('.step-option').forEach(btn => btn.classList.remove('active'));
            e.target.classList.add('active');

            const answer = e.target.getAttribute('data-answer');

            if (currentStep === 8) {
                steps[8].selectedPersons = answer;
                currentStep++;
                renderStep(currentStep);
            } else if ((currentStep === 3 || currentStep === 5 || currentStep === 6) && answer === "Yes") {
                answers[currentStep] = "";
                document.getElementById('conditional-input-wrapper').classList.remove('d-none');
            } else if ((currentStep === 3 && (answer === "Lose" || answer === "Gain"))) {
                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 selectedOption = document.querySelector('.step-option.active');
            const inputVal = document.getElementById('conditional-input').value.trim();
            if (selectedOption && inputVal) {
                const optionType = selectedOption.getAttribute('data-answer');
                if (currentStep === 3) {
                    answers[currentStep] = `${optionType} ${inputVal} kg`;
                } else {
                    answers[currentStep] = inputVal;
                }
                currentStep++;
                if (currentStep < steps.length) {
                    renderStep(currentStep);
                } else {
                    showComplete();
                }
            } else {
                Swal.fire('Please fill all required fields.');
            }
        }

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

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

    function showComplete() {
    fetch("{{ route('client.save.session') }}", {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': "{{ csrf_token() }}"
        },
        body: JSON.stringify({
            age: answers[0],
            height_cm: answers[1],
            weight_kg: answers[2],
            goal_weight_change: answers[3],
            location: answers[4],
            food_allergy: answers[5],
            medicine_history: answers[6],
            gym_experience: answers[7],
            number_of_persons: steps[8].selectedPersons ?? '',
            selected_package: answers[9],
        })
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            window.location.href = "{{ route('physical_clients_checkout') }}"; // Redirect here
        } else {
            Swal.fire('Something went wrong, please try again.');
        }
    })
    .catch(error => {
        Swal.fire('Error while saving. Try again later.');
    });
}

});
</script>
@endsection