@extends('layout.app')

@section('content')
    <div class="wrapper pt-5">
        <div class="container">
            <form class="multisteps_form position-relative" method="GET" action="">
                <!------------------------- Step-1 ----------------------------->
                <div class="multisteps_form_panel">
                    <!-- Form-content -->
                    <h1 class="question_title text-center" id="lang">Choisissez une langue?</h1>
                    <!-- Form-items -->
                    <div class="form_items d-flex justify-content-center">
                        <ul class="ps-0">
                            <li
                                class="step_1 rounded-pill bg-white text-start animate__animated animate__fadeInRight animate_50ms">
                                <input type="radio" id="opt_fr" value="fr">
                                <label for="opt_fr">Francais</label>
                            </li>
                            <li
                                class="step_1 rounded-pill bg-white text-start animate__animated animate__fadeInRight animate_50ms">
                                <input type="radio" id="opt_ar" value="ar">
                                <label for="opt_ar">العربية</label>
                            </li>
                        </ul>
                    </div>
                    <!---------- 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>
        $(".step_1").on('click', function() {
            let value = $(this).find('input[type=radio]').val();
            $('form').attr('action', '/quiz/public/'+value);
            if(value == 'ar'){
                $('#lang').html('?اختر لغة')
            }
            else{
                $('#lang').html('Choisissez une langue?')
            }
        });
        $('input[type=radio]').change(function() {
            let value = $(this).val();
            $('form').attr('action', '/'+value);
            if(value == 'ar'){
                $('#lang').html('?اختر لغة')
            }
            else{
                $('#lang').html('Choisissez une langue?')
            }
        })
    </script>
@endsection