@extends('layouts.user_app')
@section('content')
@if (session()->has('message'))
    <div class="alert alert-success">{{ session()->get('message') }}</div>
@endif
@if (session()->has('error'))
    <div class="alert alert-danger">{{ session()->get('error') }}</div>
@endif
<select name="" class="right-container" id="lang-change">

    @foreach (config('app.allowed_languages') as $ln_key => $ln_value)
        <option class="text-black" value="{{ $ln_key }}" {{ App::getLocale() == $ln_key ? 'selected' : '' }}>{{ $ln_value }}</option>
    @endforeach
</select>

<form action="{{ route('QAFormSave')}}" method="POST">
    @csrf
    <div class="row">
        <div class="col-12 col-md-12">
            <div class="form-group">
                <h3>1. Select Your Language<span class="important">*</span></h3>
                <div class="left-space">
                    <h5>(Seleccione su idioma.)</h5>
                    <ul class="check-lists">
                        <li>
                            <input type="radio" class="custom-radio-s1" id="english" name="language" value="english" {{ old('language')=="english" ? 'checked=' .'"'.'checked'.'"' : '' }}>
                            <label for="english">English</label>
                        </li>
                        <li>
                            <input type="radio" class="custom-radio-s1" id="spanish" name="language" value="spanish" {{ old('language')=="spanish" ? 'checked=' .'"'.'checked'.'"' : '' }}>
                            <label for="spanish">Español</label>
                        </li>
                    </ul>
                    <!-- <form id="language-form" action="{{ route('switchlocale') }}" method="POST">
                        @csrf
                        <ul class="check-lists">
                            <li>
                                <input type="radio" class="custom-radio-s1" id="english" name="language" value="en" {{ old('language') == "english" ? 'checked' : '' }}>
                                <label for="english">English</label>
                            </li>
                            <li>
                                <input type="radio" class="custom-radio-s1" id="spanish" name="language" value="es" {{ old('language') == "spanish" ? 'checked' : '' }}>
                                <label for="spanish">Español</label>
                            </li>
                        </ul>
                    </form> -->
                    <!-- <div class="sm-qa-card-box" id="language_other_options">
                        <div class="inner-card-body">
                            <h4>Does Someone in Your Home Speak English?</h4>
                            <ul class="check-lists2">
                                <li>
                                    <input type="radio" class="custom-radio-s2" id="yes1" value="Yes, there is an adult that speaks English." {{ old('someone_speack_language')=="Yes, there is an adult that speaks English." ? 'checked=' .'"'.'checked'.'"' : '' }} name="someone_speack_language" >
                                    <label for="yes1">Yes, there is an adult that speaks English.</label>
                                </li>
                                <li>
                                    <input type="radio" class="custom-radio-s2" value="Yes, there is a child that speaks English." id="yes2" {{ old('someone_speack_language')=="Yes, there is a child that speaks English." ? 'checked=' .'"'.'checked'.'"' : '' }} name="someone_speack_language">
                                    <label for="yes2">Yes, there is a child that speaks English.</label>
                                </li>
                                <li>
                                    <input type="radio" class="custom-radio-s2" value="no" id="no" {{ old('someone_speack_language')=="no" ? 'checked=' .'"'.'checked'.'"' : '' }} name="someone_speack_language">
                                    <label for="no">No.</label>
                                </li>
                            </ul>
                        </div>
                    </div> -->
                    <div class="language-options-container" style="display: none;">
                        <div class="sm-qa-card-box" id="language_other_options">
                            <div class="inner-card-body">
                                <h4>Si desea traducir esta aplicación al español, puede utilizar el conmutador situado en la esquina superior derecha de la página.</h4>
                            </div>
                        </div>
                    </div>
                    <div class="language-options-container" style="display: none;">
                        <div class="sm-qa-card-box" id="language_other_options">
                            <div class="inner-card-body">
                                <h4>¿Alguien en su hogar habla inglés?</h4>
                                <ul class="check-lists2">
                                    <li>
                                        <input type="radio" class="custom-radio-s2" id="yes1" value="Yes, there is an adult that speaks English." {{ old('someone_speack_language')=="Yes, there is an adult that speaks English." ? 'checked=' .'"'.'checked'.'"' : '' }} name="someone_speack_language" >
                                        <label for="yes1">Sí, hay un adulto que habla inglés.</label>
                                    </li>
                                    <li>
                                        <input type="radio" class="custom-radio-s2" value="Yes, there is a child that speaks English." id="yes2" {{ old('someone_speack_language')=="Yes, there is a child that speaks English." ? 'checked=' .'"'.'checked'.'"' : '' }} name="someone_speack_language">
                                        <label for="yes2">Sí, hay un niño que habla inglés.</label>
                                    </li>
                                    <li>
                                        <input type="radio" class="custom-radio-s2" value="no" id="no" {{ old('someone_speack_language')=="no" ? 'checked=' .'"'.'checked'.'"' : '' }} name="someone_speack_language">
                                        <label for="no">No.</label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    @error('language')
                        <div class="error" style="color:red;">{{ $message }}</div>
                    @enderror
                    @error('someone_speack_language')
                        <div class="error" style="color:red;">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-group">
                <h3>2. {{ __('form.terms_condition') }}<span class="important">*</span></h3>
                <div class="left-space">
                    <h5>({{ __('form.terms_description') }})</h5>
                    <ul class="check-lists2">
                        <li>
                            <input type="checkbox" class="custom-checkbox-s2" id="trm_con1" name="terms_conditions[]" value ="v1" @if(in_array('v1', old('terms_conditions', []))) checked @endif>
                            <label for="trm_con1">{{ __('form.c1') }}</label>
                        </li>
                        <li>
                            <input type="checkbox" class="custom-checkbox-s2" id="trm_con2" name="terms_conditions[]" value ="v2" @if(in_array('v2', old('terms_conditions', []))) checked @endif>
                            <label for="trm_con2">{{ __('form.c2') }}</label>
                        </li>
                        <li>
                            <input type="checkbox" class="custom-checkbox-s2" id="trm_con3" name="terms_conditions[]" value ="v3" @if(in_array('v3', old('terms_conditions', []))) checked @endif>
                            <label for="trm_con3">{{ __('form.c3') }}</label>
                        </li>
                        <li>
                            <input type="checkbox" class="custom-checkbox-s2" id="trm_con4" name="terms_conditions[]" value ="v4" @if(in_array('v4', old('terms_conditions', []))) checked @endif>
                            <label for="trm_con4">{{ __('form.c4') }}
                            </label>
                        </li>
                        <li>

                            <input type="checkbox" class="custom-checkbox-s2" id="trm_con5" name="terms_conditions[]" value ="v5" @if(in_array('v5', old('terms_conditions', []))) checked @endif>
                            <label for="trm_con5">{{ __('form.c5.1') }} {{$settings->max_age_of_child_served}} {{ __('form.c5.2')}}
                            </label> 
                        </li>

                        <li>
                            <input type="checkbox" class="custom-checkbox-s2" id="trm_con6" name="terms_conditions[]" value ="v6" @if(in_array('v6', old('terms_conditions', []))) checked @endif>
                            <label for="trm_con6">{{ __('form.c6') }}</label>
                        </li>
                    </ul>
                    @if($errors->has('terms_conditions'))
                        <div class="error" style="color:red;">{{ $errors->first('terms_conditions') }}</div>
                    @endif


                </div>
            </div>
        </div>

        <!-- <div class="col-12 col-md-12">
            <div class="form-group">
                <h3>3. Are you a recipient of any other Santa’s or children’s gifting
                    assistance this season?</h3>
                <div class="left-space">
                    <ul class="check-lists">
                        <li>
                            <input type="radio" class="custom-radio-s1" id="rgs_yes" value="yes" name="recipient_gift_status" {{ old('recipient_gift_status')=="yes" ? 'checked=' .'"'.'checked'.'"' : '' }}>
                            <label for="rgs_yes">Yes</label>
                        </li>
                        <li>
                            <input type="radio" class="custom-radio-s1" id="rgs_no" value="no" name="recipient_gift_status" {{ old('recipient_gift_status')=="no" ? 'checked=' .'"'.'checked'.'"' : '' }}>
                            <label for="rgs_no">No</label>
                        </li>
                    </ul>
                </div>
                @error('recipient_gift_status')
                    <div class="error" style="color:red;">{{ $message }}</div>
                @enderror
            </div>
        </div> -->
        <div class="col-12 col-md-12">
            <div class="form-group">
                <h3>3. {{ __('form.question3') }}<span class="important">*</span></h3>
                <div class="left-space">
                    <ul class="check-lists">
                        <li>
                            <input type="radio" class="custom-radio-s1" id="rgs_yes" value="yes" name="recipient_gift_status" {{ old('recipient_gift_status')=="yes" ? 'checked=' .'"'.'checked'.'"' : '' }}>
                            <label for="rgs_yes">{{ __('form.yes') }}</label>
                        </li>
                        <li>
                            <input type="radio" class="custom-radio-s1" id="rgs_no" value="no" name="recipient_gift_status" {{ old('recipient_gift_status')=="no" ? 'checked=' .'"'.'checked'.'"' : '' }}>
                            <label for="rgs_no">No</label>
                        </li>
                    </ul>
                </div>
                @error('recipient_gift_status')
                    <div class="error" style="color:red;">{{ $message }}</div>
                @enderror
                <div id="recipientGiftError" class="errortest" style="color:red; display: none;">{{ __('form.error_1') }}</div>
            </div>
        </div>
        <div class="col-12 col-md-12">
            <div class="form-action-group">
                <div class="proced-btns">
                    <span>{{ __('form.proceed') }}</span> <button class="theme-btn">{{ __('form.next_step') }} <i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>
    </div>
</form>

@endsection
<style>
.right-container {
    float: right;
    margin-right: 20px; /* Adjust the margin as needed */
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
// $(document).ready(function(){
//   $("#spanish").click(function(){
//     $("#language_other_options").show();
//   });
//   $("#english").click(function(){
//     $("#language_other_options").hide();
//   });
// });
$(document).ready(function(){
    // Hide the language-options-container by default
    $('.language-options-container').hide();

    // Check the selected language on page load and show/hide the language-options-container accordingly
    if ($('#spanish').prop('checked')) {
        $('.language-options-container').show();
    } else {
        $('.language-options-container').hide();
    }

    // Show/hide the language-options-container based on the selected language
    $("#spanish").click(function(){
        $('.language-options-container').show();
    });

    $("#english").click(function(){
        $('.language-options-container').hide();
    });

    $('#lang-change').change(function(e){
        console.log('hi');
        location.href = `{{ route('switchlocale') }}/${ $(this).val() }`;
    })
});



function validateForm() {
        if ($('input[name="recipient_gift_status"]:checked').val() === "yes") {
            $("#recipientGiftError").show();
            $(".theme-btn").prop("disabled", true);
        } else {
            $("#recipientGiftError").hide();
            $(".theme-btn").prop("disabled", false);
        }
    }

    // Call the function on page load
    validateForm();

    // Call the function when the radio button changes
    $('input[name="recipient_gift_status"]').change(function() {
        validateForm();
    });

    // Function to submit the form if it's valid
    function submitForm() {
        // Check if the recipient_gift_status is 'yes', if so, show the error message and prevent form submission
        if ($('input[name="recipient_gift_status"]:checked').val() === "yes") {
            $("#recipientGiftError").show();
            return false;
        }

        // Otherwise, submit the form
        return true;
    }

    // Add an event listener for form submission
    $('form').on('submit', function() {
        return submitForm();
    });

</script>