@extends('layout.app')

@section('content')
    <div class="wrapper pt-5">
        <div class="container">
            <form class="multisteps_form position-relative" id="wizard" method="GET" action="">
                <div id="products"></div>
                @foreach ($categories as $key => $category)
                <!------------------------- Step-{{ $key }}  ----------------------------->
                <div class="multisteps_form_panel">
                    <!-- Form-content -->
                    <h1 class="question_title text-center">{{ __('messages.select_product') }} ({{ \App::getLocale() == 'fr' ? $category->name_fr :  $category->name_ar }}) ?</h1>
                    <!-- Form-items -->

                    <ul style="list-style: none;" class="row form_items">
                        @foreach ($category->products as $product)
                            <div class="col-sm-6 col-md-4">
                                <li
                                    class="multi col-sm-6 col-md-4 mb-2 bg-white text-start animate__animated animate__fadeInRight animate_50ms">
                                    <label for="opt_{{ $product->id }}">
                                        <img style="width:150px;height:150px;    object-fit: contain;"
                                            src="{{ Storage::disk('public')->url('images/' . $product->image) }}"
                                            alt="image_not_found">
                                        <input type="radio" id="opt_{{ $product->id }}" value="{{ $product->id }}">
                                        {{ \App::getLocale() == 'fr' ? $product->name_fr : $product->name_ar }}

                                    </label>
                                </li>
                            </div>
                        @endforeach
                    </ul>
                </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="prevBtn"
                        onclick="nextPrev(-1)">{{ __('messages.previous_question') }}</button>
                    <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>
        let lang = "{{ \App::getLocale() }}";
        $(".multi").on('click', function(){
            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);
            }
            let products = '';
            $('input[type=radio]:checked').each(function(index, item) {
                products = products + '<input type="hidden" name="products[]" value="'+$(item).val()+'"/>';
            });
            $('form').find('#products').html(products)
            $('form').attr('action', '/quiz/public/'+lang+'/questions')

        });
    </script>
@endsection