@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('keywords', $metaTags['metaKeywords'])
@section('description', $metaTags['metaDescription'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@section('content')
    <div id="pageWrapper" class="FindchairPage Innerpage">
        <section id="Findchair">
            <div class="container">
                <div class="lSide">
                    <a href="{{ route('home') }}" class="logo" aria-label="Home">
                        <img src="{{ $siteCommonContent->header_logo_value }}" width="336" height="83" alt="Logo" loading="lazy">
                    </a>
                </div>
                <form method="post" action="{{ route('recommended.product') }}" id="findMyChairForm">
                    @csrf
                    <div class="wrapper">
                        <div class="clsIcon">
                            <a href="{{ url()->previous() !== url()->current() ? url()->previous() : route('home') }}"
                                class="findClose" aria-label="Close">
                                <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100"
                                    viewBox="0 0 40 40">
                                    <path
                                        d="M21 24.15L8.857 36.293 4.707 32.143 16.85 20 4.707 7.857 8.857 3.707 21 15.85 33.143 3.707 37.293 7.857 25.15 20 37.293 32.143 33.143 36.293z">
                                    </path>
                                    <path
                                        d="M33.143,4.414l3.443,3.443L25.15,19.293L24.443,20l0.707,0.707l11.436,11.436l-3.443,3.443 L21.707,24.15L21,23.443l-0.707,0.707L8.857,35.586l-3.443-3.443L16.85,20.707L17.557,20l-0.707-0.707L5.414,7.857l3.443-3.443 L20.293,15.85L21,16.557l0.707-0.707L33.143,4.414 M33.143,3L21,15.143L8.857,3L4,7.857L16.143,20L4,32.143L8.857,37L21,24.857 L33.143,37L38,32.143L25.857,20L38,7.857L33.143,3L33.143,3z">
                                    </path>
                                </svg>
                            </a>
                        </div>
                        @foreach ($questions as $question)
                            <div class="tab">
                                <div class="backTxt">
                                    <div class="vrTxt">{{ $findMyChairCms->background_title }}</div>
                                </div>
                                <div class="itemFlxBx">
                                    <div class="header">
                                        <div class="smtl">{{ $findMyChairCms->title }}</div>
                                        <div class="mdtl">{{ $question->title }}</div>
                                        <div class="txt">{{ $findMyChairCms->subtitle }}</div>
                                    </div>
                                    <div class="flBx">
                                        @foreach ($question->answers as $answer)
                                            <div class="itemBx">
                                                <div class="ttl">{{ $answer->title }}</div>
                                                <input class="selectClr" type="radio"
                                                    id="answer{{ $loop->parent->iteration }}{{ $loop->iteration }}"
                                                    name="answer[{{ $loop->parent->iteration }}]"
                                                    value="{{ base64_encode($answer->id) }}" required
                                                    oninput="this.className = ''">
                                                <label for="answer{{ $loop->parent->iteration }}{{ $loop->iteration }}">
                                                    <div class="bgImg">
                                                        <img src="{{ $answer->image_value }}" alt="{{ $answer->title }}">
                                                    </div>
                                                </label>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <div class="flxBtns">
                            <div class="pre">
                                <button type="button" id="prevBtn" class="prev" onclick="nextPrev(-1)"
                                    aria-label="Previous">
                                    Previous
                                </button>
                            </div>
                            <div class="Nxt">
                                <button type="button" id="nextBtn" class="nxt" onclick="nextPrev(1)"
                                    aria-label="Next">
                                    Next
                                </button>
                            </div>
                        </div>
                        <div class="box">
                            <div class="bgImg">
                                <svg xmlns="http://www.w3.org/2000/svg" width="44.337" height="67.244"
                                    viewBox="0 0 44.337 67.244">
                                    <path id="Path_104389" data-name="Path 104389"
                                        d="M246.517,211.677c0-3.233-2.124-5.358-6.835-5.358-5.08,0-8.128,3.417-9.975,7.758l-12.747-7.3c4.065-9.513,13.024-14.871,23.277-14.871s21.06,6.465,21.06,18.473c0,13.762-14.779,18.011-14.779,24.384H231.739c0-10.806,14.779-14.963,14.779-23.091Zm-16.164,38.7a8.775,8.775,0,1,1,8.775,8.775A8.831,8.831,0,0,1,230.352,250.378Z"
                                        transform="translate(-216.96 -191.91)" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </div>
@endsection
@push('js')
    <script>
        var currentTab = 0; // Current tab is set to be the first tab (0)
        showTab(currentTab); // Display the current tab

        function showTab(n) {
            // This function will display the specified tab of the form...
            var x = document.getElementsByClassName("tab");
            for (var i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            x[n].style.display = "block";

            // Fix the Previous/Next buttons:
            if (n === 0) {
                document.getElementById("prevBtn").disabled = true;
            } else {
                document.getElementById("prevBtn").disabled = false;
            }
            if (n === x.length - 1) {
                document.getElementById("nextBtn").innerHTML = "Submit";
            } else {
                document.getElementById("nextBtn").innerHTML = "Next";
            }
            // Display the correct step indicator:
            fixStepIndicator(n);
        }

        function nextPrev(n) {
            // This function will figure out which tab to display
            var x = document.getElementsByClassName("tab");

            // Exit the function if any field in the current tab is invalid:
            if (n === 1 && !validateForm()) {
                showToast("warning", 'Please select one.');
                return false;
            }

            // Hide the current tab:
            x[currentTab].style.display = "none";

            // Increase or decrease the current tab by n:
            currentTab += n;

            // If you have reached the end of the form...
            if (currentTab >= x.length) {
                // Display the last tab before submitting
                x[currentTab - 1].style.display = "block";
                // ... the form gets submitted:
                document.getElementById("findMyChairForm").submit();
                clearFormInputs()
                return false;
            }

            // Otherwise, display the correct tab:
            showTab(currentTab);
        }

        function validateForm() {
            // This function deals with validation of the form fields
            var x = document.getElementsByClassName("tab");
            var y = x[currentTab].getElementsByTagName("input");
            var valid = false;

            // Check if any radio button is checked in the current tab:
            for (var i = 0; i < y.length; i++) {
                if (y[i].type === "radio" && y[i].checked) {
                    valid = true;
                    break;
                }
            }

            return valid; // return the validation status
        }

        function fixStepIndicator(n) {
            // This function removes the "active" class of all steps...
            var x = document.getElementsByClassName("step");
            for (var i = 0; i < x.length; i++) {
                x[i].className = x[i].className.replace(" active", "");
            }
            //... and adds the "active" class on the current step:
            x[n].className += " active";
        }

        function clearFormInputs() {
            var radios = document.querySelectorAll("#findMyChairForm input[type='radio']");
            radios.forEach(function(radio) {
                radio.checked = false;
            });
        }
    </script>
@endpush