@extends('survey_master')

@section('title')
    <title>Generate QR</title>
@endsection

@section('content')
    <style>
        #qrcode-container{
            display:none;
        }

        .qrcode{
            /*padding: 16px;*/
        }
        .qrcode img{
            margin: 0 auto;
        }
        .fakeqr{
            width: auto;
            height: auto;
            min-height: 250px;
            padding: 10px;
            border: 5px solid gray;
            margin: auto;
        }
    </style>
    <div class="container mt-3">
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col-md-6">
                <ul class='nav'>
                    <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">
                {{--<p>{{__('messages.welcome')}}</p>--}}
                <form id="regForm">
                    <div class="tab">
                        <div class="form-group">
                            <label for="brand">Region</label>
                            <select class="form-control" id="region" name="region" onchange="changeregion()">
                                @foreach ($region as $x => $state)
                                    <option value="{{$x}}">{{$state}}</option>
                                @endforeach
                            </select>
                            <input style="display: none; margin-top: 20px;" type="text" class="form-control" name="region_others" id="region_others" placeholder="Enter a region">
                        </div>

                        <div class="form-group" id="location_div">
                            <label for="location">Location</label>
                            <select class="form-control" id="location" name="location" onchange="changelocation()">
                                @foreach ($location['Kuala_Lumpur'] as $y => $loc)
                                    <option value="{{$y}}">{{$loc}}</option>
                                @endforeach
                            </select>
                            <input style="display: none; margin-top: 20px;" type="text" class="form-control" name="location_others" id="location_others" placeholder="Enter a location">
                        </div>
                    </div>
                    <div class="tab">
                        <div class="text-center">
                            <p style="font-size:1rem;">Survey QR</p>
                            <div id="fakeqr" class="fakeqr">
{{--                                <img src="{{ asset('images/qr-sample.png')}}" class="rounded" alt="">--}}
                            </div>
                            <div id="qrcode-container">
                                <div id="qrcode" class="qrcode">
                                </div>
                                <p>Please scan the QR to proceed to survey</p>
                            </div>
                            <button type="button" id="qr" onclick="requestQR()" style="margin-top: 20px;">Generate new QR</button>
                        </div>
                    </div>
                    <div style="overflow:auto; margin-top:45px;" 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)"><i class="fas fa-arrow-right"></i></button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
@endsection

@section('script')
    <script src="{{ asset('js/questionnaire.js') }}"></script>
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
    <script>
        var locations = {!! json_encode($location) !!}
        var height = 210;

        function changeregion(){
            $selected_region = $("#region").val();
            $('#location_others').hide();
            if($selected_region == 'Others'){
                $('#region_others').show();
                $('#location_div').show();
                $("#location").val('Others');
                $("#location").hide();
                $('#location_others').show();
            }else{
                $('#region_others').hide();
                $('#location_others').hide();
                $('#location_div').show();
                $("#location").show();

                var options_string ="";

                if($selected_region == 'Kuala Lumpur'){
                    var obj = locations.Kuala_Lumpur;
                }else if($selected_region == 'Selangor'){
                    var obj = locations.Selangor;
                }else if($selected_region == 'Johor Bahru'){
                    var obj = locations.Johor_Bahru;
                }

                for( var key in obj ) {
                    options_string +="<option value='"+key+"'>"+obj[key]+"</option>";
                }
                $("#location").html(options_string);
            }
        }

        function changelocation(){
            $selected_location = $("#location").val();
            if($selected_location == 'Others'){
                $('#location_others').show();
            }else{
                $('#location_others').hide();
            }
        }

        function showTab(n) {
            var x = document.getElementsByClassName("tab");
            x[n].style.display = "block";
            height = $('#fakeqr').width();
            if (n == 0) {
                document.getElementById("prevBtn").style.display = "none";
            } else {
                document.getElementById("prevBtn").style.display = "inline";
            }
            if (n == (x.length - 1)) {
                document.getElementById("nextBtn").style.display = "none";
            } else {
                document.getElementById("nextBtn").style.display = "inline";
                document.getElementById("nextBtn").innerHTML = '<i class="fas fa-arrow-right"></i>';
            }
        }

        function nextPrev(n) {
            var x = document.getElementsByClassName("tab");
            if (n == 1 && !validateCustom()) return false;
            x[currentTab].style.display = "none";
            currentTab = currentTab + n;
            if (currentTab >= x.length) {
                document.getElementById("nextprevious").style.display = "none";
                document.getElementById("all-steps").style.display = "none";
            }
            showTab(currentTab);
        }

        function validateCustom(){
            if(currentTab == 0){
                $val_region = $("#region").val();
                if($val_region =='Others'){
                    $val_region_others = $("#region_others").val();
                    if($val_region_others == '' || $val_region_others == undefined){
                        $("#region_others").addClass( " invalid");
                        return false;
                    }else{
                        $("#region_others").removeClass("invalid");
                    }
                }

                $val_location = $("#location").val();
                if($val_location =='Others'){
                    $val_location_others = $("#location_others").val();
                    if($val_location_others == '' || $val_location_others == undefined){
                        $("#location_others").addClass( " invalid");
                        return false;
                    }else{
                        $("#location_others").removeClass("invalid");
                    }
                }
            }
            return true;
        }

        function requestQR(){
            $region_send = "";
            $location_send = "";

            $val_reg = $("#region").val();
            $val_loc = $("#location").val();

            if($val_reg =='Others'){
                $val_reg = $("#region_others").val();
            }
            $region_send = $val_reg;

            if($val_loc =='Others'){
                $val_loc = $("#location_others").val();
            }
            $location_send = $val_loc;

            var postObj = {
                region : $region_send,
                location : $location_send
            }

            $.ajax({
                type: 'post',
                url: "{{ url('/newlink') }}",
                dataType: 'json',
                data: postObj,
                success: function (data) {
                    console.log(data);
                    if(data.success == 'success'){
                        generateQRCode(data.link)
                    }else if(data.success =='nomore'){
                        alert("No more rewards! Please contact admin");
                    }else{
                        alert("Error! Please retry");
                    }
                }, error: function (data) {
                    console.log(data);
                }
            });
        }

        function generateQRCode(url) {
            if (url) {
                let qrcodeContainer = document.getElementById("qrcode");
                qrcodeContainer.innerHTML = "";
                new QRCode(qrcodeContainer, {
                    text: url,
                    width: height,
                    height: height,
                    colorDark: "#000000",
                    colorLight: "#ffffff",
                    correctLevel: QRCode.CorrectLevel.H
                });
                document.getElementById("qrcode-container").style.display = "block";
                $("#fakeqr").hide();

            } else {
                alert("Please enter a valid URL");
            }
        }

    </script>

@endsection