@extends('layout.app')

@section('content')
    <div class="wrapper pt-5">
        <div class="container-fluid">
            <div class="row text-center">
                <!-- Circles which indicates the steps of the form: -->
                <div class="col step_progress d-flex d-none d-sm-block">
                    @foreach ($products as $product)
                        <span class="step bg-white rounded-pill {{ $loop->iteration == 1 ? 'active' : '' }}"></span>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="container">
            <form class="multisteps_form position-relative" id="wizard" method="POST" action="{{ route('products.questions.store',['locale' => App::getLocale()])}}">
                @csrf
                @foreach ($products as $key => $product)
                    <!------------------------- Step-{{ $loop->iteration }} ----------------------------->
                    <input type="hidden" value="{{ $product->id }}" name="products[]" />
                    <div class="multisteps_form_panel">
                        @foreach ($questions as $question)
                        <!-- Form-content -->
                        <span
                            class="question_number text-uppercase d-flex justify-content-center align-items-center">{{ __('messages.question') }} ({{ \App::getLocale() == 'fr' ? $product->name_fr : $product->name_ar }})</span>
                        <h2 class="question_title text-center">{{ \App::getLocale() == 'fr' ? $question->desc_fr :  $question->desc_ar }}?</h2>
                        <!-- Form-items -->
                        <div class="form_items d-flex justify-content-center">
                            <ul class="multi-list-{{ $key }} ps-0">
                                @foreach ($question->answers->sortDesc() as $answer)
                                    <li
                                        class="multi rounded-pill bg-white text-start animate__animated animate__fadeInRight animate_50ms">
                                        <input type="radio" id="opt_{{ $product->id }}_{{ $question->id }}_{{ $answer->id }}"
                                            name="stp_{{ $question->id }}_select_option[{{ $product->id }}]" value="{{ $answer->desc_fr }}">
                                        <label
                                            for="opt_{{ $product->id }}_{{ $question->id }}_{{ $answer->id }}">{{ \App::getLocale() == 'fr' ? $answer->desc_fr : $answer->desc_ar }}</label>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                        @endforeach
                    </div>
                @endforeach
                <!---------- Form Button ---------->
                <div class="form_btn text-center ms-5 mt-5">
                    <button type="button" class="f_btn text-uppercase rounded-pill border-0" id="nextBtn"
                        onclick="nextPrev(1)">{{ __('messages.next_question') }}</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(".multi").on('click', function(){
            $(this).parent().find('.multi').removeClass("active");
            $(this).parent().find('.multi').find('input[type=radio]').prop('checked', false);
            if($(this).hasClass('active')){
                $(this).removeClass("active");
                $(this).find('input[type=radio]').prop('checked', false);
            }
            else{
                $(this).addClass("active");
                $(this).find('input[type=radio]').prop('checked', true);
            }
        });
    </script>
@endsection