@extends('layout.app')

@section('content')
    <div class="wrapper pt-5">
        <div class="container">
            <form class="multisteps_form position-relative" method="GET" action="">
                <div id="categories"></div>
                <!------------------------- Step-1 ----------------------------->
                <div class="multisteps_form_panel">
                    <!-- Form-content -->
                    <h1 class="question_title text-center">{{ __('messages.select_category') }}?</h1>
                    <!-- Form-items -->
                    <ul style="list-style: none;" class="row form_items">
                        @foreach ($categories as $category)
                            <div class="col-sm-6 col-md-4">
                                <li
                                class="multi rounded-pill bg-white text-start animate__animated animate__fadeInRight animate_50ms">
                                    <input type="radio" id="opt_{{ $category->id }}" value="{{ $category->id }}">
                                    <label for="opt_{{ $category->id }}">{{ \App::getLocale() == 'fr' ? $category->name_fr :  $category->name_ar }}</label>
                                </li>
                            </div>
                        @endforeach
                    </ul>
                    <!---------- Form Button ---------->
                    <div class="form_btn text-center ms-5 mt-5">
                        <button type="submit" class="f_btn text-uppercase rounded-pill border-0">{{ __('messages.submit') }}</button>
                    </div>
                </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 categories = '';
            $('input[type=radio]:checked').each(function(index, item) {
                categories = categories + '<input type="hidden" name="categories[]" value="'+$(item).val()+'"/>';
            });
            $('form').find('#categories').html(categories)
            $('form').attr('action', '/quiz/public/'+lang+'/products')

        });
    </script>
@endsection