@extends('survey_master')

@section('title')
    <title>Survey Start</title>
@endsection

@section('content')
    <div class="container mt-3" style=" height:100%; margin:0; display:flex; flex-direction:column;">
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col-md-6">
                <ul class='nav' style="margin-bottom: 10px;">
                    <li>
                        <a href="{{ url('/lang/en') }} ">EN</a>|
                    </li>
                    <li>
                        <a href="{{ url('/lang/cn')}} ">CN</a>|
                    </li><li>
                        <a  href="{{ url('/lang/bm') }} ">BM</a>|
                    </li>
                </ul>
            </div>
        </div>
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col-md-6">
                <form id="regForm" >
                    <div class="tab">
                        <div class="form-group" >
                            <p>1. {{__('messages.are_you_smoker')}}</p>
                            <p class="checkerror" id="smoker-error" style="display:none;">{{__('messages.error_select_answer')}}</p>
                            <label class="options">{{__('messages.yes')}}<input type="radio" name="smoker" value="yes" oninput="this.className = ''"> <span class="checkmark"></span> </label>
                            <label class="options">{{__('messages.no')}}<input type="radio" name="smoker" value="no" oninput="this.className = ''"> <span class="checkmark"></span> </label>
                            </div>

                            <div class="form-group">
                            <p>2. {{__('messages.are_you_18_above')}}</p>
                            <p class="checkerror" id="agecheck-error" style="display:none;">{{__('messages.error_select_answer')}}</p>
                            <label class="options">{{__('messages.yes')}}<input type="radio" name="agecheck" value="yes" oninput="this.className = ''"> <span class="checkmark"></span> </label>
                            <label class="options">{{__('messages.no')}}<input type="radio" name="agecheck" value="no" oninput="this.className = ''"> <span class="checkmark"></span> </label>
                        </div>

                        <div style="overflow:auto;">
                            <div style="float:right;">
                                <button type="button" id="submit-check" onclick="eligibility()">{{__('messages.submit')}}</button> </div>
                        </div>
                    </div>
                    <div class="tab">
                        <div class="text-center" >
                            <h3 style="font-size:1.3rem;">{{__('messages.personal_data_protection_act')}}</h3>
                            <br>
                            <p style="text-align: justify;">
                                {{__('messages.pdpa_1')}}
                            </p>
                            <p style=" text-align: justify;">
                                <a style=" font-weight: bolder; color: #f36b08;;" target="_blank" href="/pdpa">
                                    {{__('messages.pdpa_read_more')}}
                                </a>
                            </p>
                            <p style=" text-align: justify;">
                                <b>
                                    {{__('messages.pdpa_consent')}}
                                </b>
                            </p>
                            <label class="options" style="text-align: justify;">{{__('messages.pdpa_agree')}}<input type="radio" name="pdpacheck" id="pdpacheck" value="no" oninput="this.className = ''" onclick="checkAgree();"> <span class="checkmark"></span></label>
                        </div>
                        <div style="overflow:auto;" id="nextprevious">
                            <div>
                                <button style="width: 100%;" type="button" id="confirm_pdpa" onclick="goToProfile()" disabled>{{__('messages.agree')}}</button>
                            </div>
                        </div>
                    </div>

                    <div class="thanks-message text-center" id="text-message">
                        <img src="{{ asset('images/cross-mark.png') }}" width="100" class="mb-4">
                        <h3>{{__('messages.eligible_error_1')}}</h3> <span>{{__('messages.eligible_error_2')}}</span>
                    </div>
                </form>
            </div>
        </div>
        <footer style="  margin-top:auto;">
            <div class="row d-flex justify-content-center align-items-center">
                <div class="col-md-6">
                    <p>{{__('messages.footer_disclaimer')}}</p>
                </div>
            </div>
        </footer>
    </div>
@endsection

@section('script')
    <script src="{{ asset('js/questionnaire.js') }}"></script>
    <script>

    function eligibility(){
        var block = false;
        var q1_ans = getCheckedCheckboxesFor('smoker');
        var q2_ans = getCheckedCheckboxesFor('agecheck');
        if(q1_ans.length === 0){
            $('#smoker-error').show();
            block = true;
        }else{
            $('#smoker-error').hide();
        }
        if(q2_ans.length === 0){
            $('#agecheck-error').show();
            block = true;
        }else{
            $('#agecheck-error').hide();
        }

        if(block == false && q1_ans[0] == 'yes' && q2_ans[0] == 'yes'){
            nextPrev(1);
        }else if(block == false){
            $('#text-message').show();
            $('#submit-check').hide();
            $('.tab').hide();
        }
    }

    function getCheckedCheckboxesFor(checkboxName) {
        var checkboxes = document.querySelectorAll('input[name="' + checkboxName + '"]:checked'), values = [];
        Array.prototype.forEach.call(checkboxes, function(el) {
            values.push(el.value);
        });
        return values;
    }

    function goToProfile(){
        $url = '/profile/{{$request_id}}'
        window.location.href = $url;
    }

    function checkAgree(){
        if (document.getElementById('pdpacheck').checked) {
            document.getElementById("confirm_pdpa").disabled = false;
        } else {
            document.getElementById("confirm_pdpa").disabled = true;
        }
    }

</script>
@endsection