@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 name="regForm" id="regForm" method="post">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}">
                    <div class="tab">
                        <h2 style="font-size:1.2rem;">{{__('messages.profile')}}</h2>
                        <div class="form-group">
                            <label for="fname">{{__('messages.fullname')}}</label>
                            <input type="text" class="form-control" id="fname" name="fname" placeholder="{{__('messages.enter')}} {{__('messages.fullname')}}">
                        </div>
                        <div class="form-group">
                            <label for="gender">{{__('messages.gender')}}</label>
                            <select class="form-control" id="gender" name="gender">
                                <option value="Male">{{__('messages.male')}}</option>
                                <option value="Female">{{__('messages.female')}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="race">{{__('messages.race')}}</label>
                            <select class="form-control" id="race" name="race">
                                <option value="Malay">{{__('messages.race_malay')}}</option>
                                <option value="Chinese">{{__('messages.race_chinese')}}</option>
                                <option value="Indian">{{__('messages.race_indian')}}</option>
                                <option value="Others">{{__('messages.race_others')}}</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="gender">{{__('messages.age')}}</label>
                            <select class="form-control" id="age" name="age">
                                <option value="18-25">18-25</option>
                                <option value="26-35">26-35</option>
                                <option value="36-45">36-45</option>
                                <option value="45+">45+</option>
                            </select>
                        </div>
                        <div class="form-group">

                            <label for="fname">{{__('messages.mobile_number')}}</label>

                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="" style="font-size: inherit !important;">60</span>
                                </div>
                                <input type="text" class="form-control" name="mobile" id="mobile" placeholder="Enter mobile number eg. 123456789" onchange="doDelayedSearch(this.value);">

                            </div>
                            <small id="invalid_mobile" class="form-text" style="display:none; color:red;">Invalid mobile or mobile number has been used</small>

                        </div>
                        <div class="form-group">
                            <label for="address">{{__('messages.address')}}</label>
                            <input type="text" class="form-control" id="address" name="address" placeholder="{{__('messages.enter')}} {{__('messages.address')}}">
                        </div>
                        <div class="form-group">
                            <label for="city">{{__('messages.city')}}</label>
                            <input type="text" class="form-control" id="city" name="city" placeholder="{{__('messages.enter')}} {{__('messages.city')}}">
                        </div>
                        <div class="form-group">
                            <label for="state">{{__('messages.state')}}</label>
                            <select class="form-control" id="state" name="state">
                                <option value="Johor">Johor</option>
                                <option value="Kedah">Kedah</option>
                                <option value="Kelantan">Kelantan</option>
                                <option value="Melaka">Melaka</option>
                                <option value="Negeri Sembilan">Negeri Sembilan</option>
                                <option value="Pahang">Pahang</option>
                                <option value="Penang">Penang</option>
                                <option value="Perak">Perak</option>
                                <option value="Perlis">Perlis</option>
                                <option value="Sabah">Sabah</option>
                                <option value="Sarawak">Sarawak</option>
                                <option value="Selangor">Selangor</option>
                                <option value="Terrenganu">Terrenganu</option>
                                <option value="W.P Kuala Lumpur">W.P Kuala Lumpur</option>
                                <option value="W.P Labuan">W.P Labuan</option>
                                <option value="W.P Putrajaya">W.P Putrajaya</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="postcode">{{__('messages.postcode')}}</label>
                            <input type="text" class="form-control" id="postcode" name="postcode" placeholder="{{__('messages.enter')}} {{__('messages.postcode')}}">
                        </div>
                        <div class="form-group">
                            <label for="country">{{__('messages.country')}}</label>
                            <input type="text" class="form-control" id="country" name="country" value="Malaysia" placeholder="{{__('messages.enter')}} {{__('messages.country')}}">
                        </div>
                        {{--<div class="form-group">--}}
                            {{--<label for="brand">{{__('messages.brand_smoke')}}</label>--}}
                            {{--<select class="form-control selectpicker" id="brand" name="brand" data-live-search="true" onchange="changebrand()">--}}
                                {{--@foreach ($brand as $x => $value)--}}
                                    {{--<option value="{{$x}}">{{$value}}</option>--}}
                                {{--@endforeach--}}
                            {{--</select>--}}
                        {{--</div>--}}
                        {{--<div class="form-group">--}}
                            {{--<label for="variant">{{__('messages.variant_smoke')}}</label>--}}
                            {{--<select class="form-control selectpicker" id="variant" name="variant" data-live-search="true">--}}
                                {{--@foreach ($variant['Benson_Hedges'] as $y => $var)--}}
                                    {{--<option value="{{$y}}">{{$var}}</option>--}}
                                {{--@endforeach--}}
                            {{--</select>--}}
                        {{--</div>--}}

                        <div id="parent" class="form-group">
                            <label for="brand">Brand</label>
                            <input type="text" id="brand" name="brand" class="form-control"/>

                        </div>
                        <div id="parent" class="form-group">
                            <label for="variant">Variant</label>
                            <input type="text" id="variant" name="variant" class="form-control" />
                        </div>

                        <div style="overflow:auto; margin-top:15px;" id="nextprevious">
                            <div style="float:right;">
                                <button type="button" id="prevBtn" onclick="nextPrev(-1)"><i class="fas fa-arrow-left"></i></button>
                                <button type="button" id="nextBtn" onclick="nextPrev(1)" disabled><i class="fas fa-arrow-right"></i></button>
                            </div>
                        </div>
                    </div>
                    <div class="tab">
                        <div class="form-group">
                            <label for="tac">{{__('messages.mobile_validation')}}</label>
                            <input type="text" class="form-control" name="otp" id="otp" aria-describedby="tacHelp" placeholder="Enter Verification Code">
                            <small id="tacHelp" class="form-text text-muted" style="display:none;">Please enter 4-digit Verification Code received at <span id="mobile_span">6012345678</span></small>
                        </div>
                        <div>
                            <button type="button" id="tacbutton" onclick="requestOtp()" style="background-color: #4b82c7">Request Verification Code</button>
                            <small id="otpresult" style="color :green; display:none;" >Verification Code Sent!</small>
                            <small id="otpfail" style="color :red; display:none;" >Wrong Verification Code!</small>
                        </div>
                        <div style="overflow:auto; margin-top:15px;" id="nextprevious">
                            <div style="float:right;">
                                <button type="button" id="prevBtn" onclick="nextPrev(-1)"><i class="fas fa-arrow-left"></i></button>
                                <button type="button" onclick="verifyOTP()"><i class="fas fa-check"></i></button>
                            </div>
                        </div>
                    </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>


    </script>


    <script src="{{ asset('js/questionnaire.js') }}"></script>
{{--    <script src="{{ asset('js/bootstrap-autocomplete.js') }}"></script>--}}

    <script>
    var src = {}

    var counter =0;
    var variant = {!! json_encode($variant) !!}
    var brand = {!! json_encode($brand) !!}


    $('#brand').autocomplete({
        source: brand,
        onSelectItem:   function (item, element) {
            document.getElementById('brand').value=item.value;
            changebrand();

        },
        highlightClass: 'text-danger',
        treshold: 2,
    });



    function changebrand(){

        $selected_brand = $("#brand").val();
        $formatted_selected_brand = $selected_brand.replace(/\s+/g, '_');
        $formatted_selected_brand =$formatted_selected_brand.replace(/([.,\-*+?${}()|\[\]\/\\])/g, "");

        switch($formatted_selected_brand) {
                case 'Benson_Hedges' :
                    var obj = variant.Benson_Hedges;
                    break;

                case 'Bond_Street' :
                    var obj = variant.Bond_Street;
                    break;

                case 'Dunhill' :
                    var obj = variant.Dunhill;
                    break;

                case 'Kent' :
                    var obj = variant.Kent;
                    break;

                case 'LM' :
                    var obj = variant.LM;
                    break;

                case 'Marlboro' :
                    var obj = variant.Marlboro;
                    break;

                case 'Pall_Mall' :
                    var obj = variant.Pall_Mall;
                    break;

                case 'Peter_Stuyvesant' :
                    var obj = variant.Peter_Stuyvesant;
                    break;

                case 'Sampoerna' :
                    var obj = variant.Sampoerna;
                    break;
            }

        $('#variant').autocomplete({
            source: obj,
            onSelectItem:   function (item, element) {
                console.log('itemv   ' + item.value);
                document.getElementById('variant').value = item.value;
            },
            highlightClass: 'text-danger',
            treshold: 2,
        });
    }

    function requestOtp(){
        counter = counter +1;
        var postObj = {
            mobile : '60'+$("input[name='mobile']").val()
        }

        $.ajax({
            type: 'post',
            url: "{{ url('/requestotp') }}",
            dataType: 'json',
            data: postObj,
            success: function (data) {
                if(data.success == 'success'){
                    disable();
                    $('#otpresult').show();
                    $('#tacHelp').show();
                }
            }, error: function (data) {
                console.log(data);
            }
        });
    }

    function disable(){
        document.getElementById("tacbutton").disabled = true;
        if(counter< 3){
            setTimeout(function(){document.getElementById("tacbutton").disabled = false;},5000);
        }
    }

    function verifyOTP(){
        var postObj = {
            mobile : '60'+$("input[name='mobile']").val(),
            otp : $("input[name='otp']").val()
        }

        $.ajax({
            type: 'post',
            url: "{{ url('/verifytac') }}",
            dataType: 'json',
            data: postObj,
            success: function (data) {
                if(data.success == 'success'){
                    $('#regForm').submit();
                    $('#otpfail').hide();

                }else if(data.success == 'fail'){
                    $('#otpresult').hide();
                    $('#otpfail').show();
                }
            }, error: function () {
                console.log(data);
            }
        });
    }

    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 appendMobile(){
        $mobile_no = $("#mobile").val();
        $("#mobile_span").html('60'+$mobile_no);
    }

    var timeout = null;

    function doDelayedSearch(val) {

        if (timeout) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function() {

            var mobile_number = $("input[name='mobile']").val();
            var patt = new RegExp("^(1)[02-46-9]-*[0-9]{7}$|^(1)[1]-*[0-9]{8}$");
            if(patt.test(mobile_number)) {
                var postObj = {
                    mobile: mobile_number,
                }

                $.ajax({
                    type: 'post',
                    url: "{{ url('/checkmobile') }}",
                    dataType: 'json',
                    data: postObj,
                    success: function (data) {
                        if (data.success == 'success') {
                            document.getElementById("nextBtn").disabled = false;
                            $('#invalid_mobile').hide();
                            appendMobile();

                        } else if (data.success == 'fail') {
                            document.getElementById("nextBtn").disabled = true;
                            $('#invalid_mobile').show();
                        }
                    }, error: function () {
                        console.log(data);
                    }
                });
            }else{
                document.getElementById("nextBtn").disabled = true;
                $('#invalid_mobile').show();
            }

        }, 1000);

    }

    function nextPrev(n) {
        var x = document.getElementsByClassName("tab");
        if (n == 1 && !validateForm()) { console.log('aaa false!'); return false; }
        x[currentTab].style.display = "none";
        currentTab = currentTab + n;
        if (currentTab >= x.length) {
            console.log('daaao something');
            document.getElementById("nextprevious").style.display = "none";
            document.getElementById("all-steps").style.display = "none";
            document.getElementById("register").style.display = "none";
            document.getElementById("text-message").style.display = "block";
        }
        showTab(currentTab);
    }

    function validateForm() {
        var x, y, i, valid = true;
        x = document.getElementsByClassName("tab");
        y = x[currentTab].getElementsByTagName("input");
        if(y.length > 0){
            if(y[0].type== 'radio'){
                i = 0;
                var stopcheck = false;
                var questionname = y[0].name;

                do {
                    if (y[i].checked) {
                        stopcheck = true;
                    }else{
                        console.log('a')
                        stopcheck = false;
                    }
                    i++
                }
                while (stopcheck == false && i < y.length);

                if(stopcheck == false ){
                    valid = false;
                    $('#'+questionname+'-error').show();
                }else{
                    $('#'+questionname+'-error').hide();
                }

            }else{
                for (i = 0; i < y.length; i++) {
                    if(y[i].type =='search'){
                        continue;
                    }

                    if (y[i].value == "") {
                        y[i].className += " invalid";
                        valid = false;
                    }
                }
            }
        }
        return valid;
    }

    </script>
@endsection