@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
<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</h3>
                <div class="left-space">
                    <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">Spanish</label>
                        </li>
                    </ul>
                    <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>
                    @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. Terms and Conditions<span class="important">*</span></h3>
                <div class="left-space">
                    <ul class="check-lists2">
                        <li>
                            <input type="checkbox" class="custom-checkbox-s2" id="trm_con1" name="terms_conditions1" value ="v1" {{ old('terms_conditions1')=="v1" ? 'checked='.'"'.'checked'.'"' : '' }}>
                            <label for="trm_con1">I understand that applying does not guarantee
                                service.</label>
                        </li>
                        <li>
                            <input type="checkbox" class="custom-checkbox-s2" id="trm_con2" name="terms_conditions2" value ="v2" {{ old('terms_conditions2')=="v2" ? 'checked='.'"'.'checked'.'"' : '' }}>
                            <label for="trm_con2">I have only applied once to Blue Santa during <server year>
                                    .</label>
                        </li>
                        <li>
                            <input type="checkbox" class="custom-checkbox-s2" id="trm_con3" name="terms_conditions3" value ="v3" {{ old('terms_conditions3')=="v3" ? 'checked='.'"'.'checked'.'"' : '' }}>
                            <label for="trm_con3">I will only be applying for the family members that live
                                with
                                me.</label>
                        </li>
                        <li>
                            <input type="checkbox" class="custom-checkbox-s2" id="trm_con4" name="terms_conditions4" value ="v4" {{ old('terms_conditions4')=="v4" ? 'checked='.'"'.'checked'.'"' : '' }}>
                            <label for="trm_con4">It is the applicant’s responsibility to notify Operation
                                Blue
                                Santa of any changes to this application before December 1,
                                <server year>.  Non-accurate information could cause delivery failures.
                            </label>
                        </li>
                        <li>
                            <input type="checkbox" class="custom-checkbox-s2" id="trm_con5" name="terms_conditions5" value ="v5" {{ old('terms_conditions5')=="v5" ? 'checked='.'"'.'checked'.'"' : '' }}>
                            <label for="trm_con5">Operation Blue Santa is only able to serve children that
                                are <xmp>
                                    <insert MAX_AGE from backend>
                                </xmp> years of age or under
                                on or before Christmas Day of this year.
                            </label>
                        </li>
                    </ul>
                    @foreach ($errors->all() as $k=> $error)
                        @if(($k==1) && ($k<=4))
                            <div class="error" style="color:red;">{{ $error }}</div>
                            @endif
                    @endforeach

                </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-action-group">
                <div class="proced-btns">
                    <span>Proceed to</span> <button class="theme-btn">Next Step <i class="fa fa-angle-double-right" aria-hidden="true"></i></button>
                </div>
            </div>
        </div>
    </div>
</form>

@endsection
<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();
  });
});
</script>