@extends ('layouts.bulma')
@section ('content')


    <nav class="navbar">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item " href="../">
                    <img src="/img/FIGERO-APP--LOGO-WHITE.png" width="112" height="28">
                </a>
                <div class="navbar-burger burger" data-target="navMenu">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
            <div id="navMenu" class="navbar-menu">
                <div class="navbar-start">
                    <a class="navbar-item" href="/adminaccounts">
                        Accounts
                    </a>
                    <a class="navbar-item" href="#">
                        Payments
                    </a>
                </div>

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

    <div class="container">
        <div class="columns">
            <div class="column is-2">
                <div class="column is-12">
                    <aside class="menu">
                        <p class="menu-label">
                            Admin
                        </p>
                        <ul class="menu-list">
                            <li><a href="/settings">Dashboard</a></li>
                        </ul>
                        <p class="menu-label">
                            Accounts
                        </p>
                        <ul class="menu-list">
                            <li><a href="/adminaccounts">Accounts</a></li>
                        </ul>
                        <p class="menu-label">
                            Payments
                        </p>
                        <ul class="menu-list">
                            <li><a>Payments</a></li>
                        </ul>
                        <p class="menu-label">
                            Locations
                        </p>
                        <ul class="menu-list">
                            <li><a href="/questions" class="is-active">Required Info</a></li>
                        </ul>
                    </aside>
                </div>
            </div>
            <div class="column is-12">
                <div class="column navb is-12">
                    <nav class="breadcrumb" aria-label="breadcrumbs">
                        <ul>
                            <li><a href="/customlogout">Logout</a></li>
                            <li class="is-active"><a aria-current="page">Admin</a></li>
                        </ul>
                    </nav>
                </div>

                <div class="column is-12">
                    <section class="section">
                        <div class="">
                            <h1 class="title">Manage Questions per Region</h1>
                            <div class="field">
                                <label class="label">Select a region to view questions</label>
                                <div class="control">
                                    <div class="select">
                                        <select id="country_select" onchange="onSelectChange(this)">
                                            <option value="NONE">Select Country</option>
                                            <option value="ALL">ALL</option>
                                            <!--<option value="RSA">South Africa</option>
                                            <option value="AUS">Australia</option>
                                            <option value="USD">United States</option>-->
                                        </select>
                                    </div>
                                    <a style="margin-left:30px;" onclick="newQuestion()" class="button is-primary">Add New Question</a>
                                </div>
                            </div>
                            <hr />
                            <div style="padding:10px;">
                                <h1>Questions</h1>
                                <br />

                                <div class="columns has-background-primary">
                                    <div class="column is-5">
                                        <b>Question</b>
                                    </div>
                                    <div class="column is-1">
                                        <b>Type</b>
                                    </div>
                                    <div class="column is-1">
                                        <b>Country</b>
                                    </div>
                                    <div class="column is-1">
                                        <b>Min</b>
                                    </div>
                                    <div class="column is-1">
                                        <b>Max</b>
                                    </div>
                                    <div class="column is-1">
                                        <b>Required</b>
                                    </div>
                                    <div class="column is-2">
                                        <b>Actions</b>
                                    </div>
                                </div>

                                <div id="results">

                                </div>

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

    <div id="newquestionmodal" class="modal">

        <div class="modal-background"></div>
        <div class="modal-content has-background-grey-light" style="padding:20px;">
            <form id="new_question_form">
            <input type="hidden" id="model_id" />
            <div class="field">
                <label class="label">Country</label>
                <div class="control">
                    <div class="select">
                        <select id="model_country">
                            <option value="ALL">ALL</option>
                            <option value="RSA">South Africa</option>
                            <option value="AUS">Australia</option>
                            <option value="USD">United States</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="field">
                <label class="label">Question</label>
                <div class="control">
                    <input class="input" type="text" id="model_question" placeholder="Question">
                </div>
            </div>

            <div class="field">
                <label class="label">Type</label>
                <div class="control">
                    <div class="select">
                        <select id="model_type">
                            <option value="text">Text</option>
                            <option value="numeric">Numeric</option>
                            <option value="countrydropdown">Country Dropdown</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="field">
                <label class="label">Minimum Text/Value ( leave 0 for none ) </label>
                <div class="control">
                    <input class="input" id="model_min" type="number" placeholder="Min">
                </div>
            </div>

            <div class="field">
                <label class="label">Maximum Text/Value ( leave 0 for none )</label>
                <div class="control">
                    <input class="input" id="model_max" type="number" placeholder="Min">
                </div>
            </div>

            <div class="field">
                <div class="control">
                    <label class="checkbox">
                        <input type="checkbox" id="model_required">
                        Required
                    </label>
                </div>
            </div>

            </form>
            <div class="field is-grouped">
                <div class="control">
                    <button class="button is-link" onclick="saveQuestion()">Submit</button>
                </div>
                <div class="control">
                    <button class="button is-text" onclick="toggleModal()">Cancel</button>
                </div>
            </div>
            <!-- <button class="modal-close is-large" aria-label="close" onclick="toggleModal()"></button> -->
        </div>


    </div>

    <nav class="navbar is-fixed-bottom">
        <div class="container">
            <div class="navbar-brand">
                <a class="navbar-item " href="../">
                    <img src="/img/FIGERO-APP--LOGO-WHITE.png" width="112" height="28">
                </a>
            </div>
        </div>
    </nav>

    <script type="application/javascript">
        const apiUrl = 'https://gateway.tabit.info/figero';
        var Qdata = null;

        function newQuestion(){
            $('#new_question_form')[0].reset();
            toggleModal();
        }

        function editQuestion(index){
            $('#new_question_form')[0].reset();
            var q = Qdata[index];
            $('#model_id').val(q.id);

            $('#model_country').val(q.country);
            $('#model_question').val(q.question);

            $('#model_type').val(q.type);
            $('#model_min').val(q.min);
            $('#model_max').val(q.max);

            $('#model_required').prop('checked', q.required);

            toggleModal();
        }
        function postQuestion(q){
            $.ajax({
                contentType: 'application/json',
                data: JSON.stringify(q),
                dataType: 'json',
                success: function(data){
                    console.log(data);
                    onSelectManualChange($('#country_select').val());
                    toggleModal();
                },
                error: function(){
                    console.log("fail");
                },
                processData: false,
                type: 'POST',
                url: apiUrl + '/questions',
            });
        }
        function toggleModal(){
            $('#newquestionmodal').toggleClass('is-active');
        }
        function saveQuestion(){
            var q = {};
            q.question = $('#model_question').val();
            q.type = $('#model_type').val();
            q.country = $('#model_country').val();
            q.min = parseInt( $('#model_min').val() );
            q.max = parseInt( $('#model_max').val() );
            var r = $('#model_required').is(":checked");
            if (r) q.required = 1; else q.required = 0;
            var d = $('#model_id').val();
            if (d.length > 0)
                q.id = parseInt(d);
            console.log(q);
            postQuestion(q);
            $('#new_question_form')[0].reset();
        }

        function onSelectManualChange(elem){
            if (elem !== "NONE"){
                $.ajax({
                    url: apiUrl + '/questions?country=' + elem,
                    data: null,
                    success: function(data){
                        console.log(data);
                        Qdata = data.data;
                        $('#results').html(' ');
                        data.data.forEach( function(elem , i){
                            console.log(elem);
                            console.log(i);
                            var add = '<div class="columns blueborderTable">';

                            add += '<div class="column is-5">' + elem.question + '</div>';
                            add += '<div class="column is-1">' + elem.type + '</div>';
                            add += '<div class="column is-1">' + elem.country + '</div>';
                            add += '<div class="column is-1">' + elem.min + '</div>';
                            add += '<div class="column is-1">' + elem.max + '</div>';
                            add += '<div class="column is-1">' + elem.required + '</div>';

                            add += '<div class="column is-2"><a onclick="editQuestion(' + i + ')" class="button is-small is-primary">Edit</a> | <a onclick="deleteQuestion(' + i + ')" class="button is-small is-danger">Delete</a></div></div>';

                            $('#results').append(add);
                        });
                    },
                    dataType: 'json'
                });
            }
        }

        function onSelectChange(elem){
            if (elem.value !== "NONE"){
                $.ajax({
                    url: apiUrl + '/questions?country=' + elem.value,
                    data: null,
                    success: function(data){
                        console.log(data);
                        Qdata = data.data;
                        $('#results').html(' ');
                        data.data.forEach( function(elem , i){
                            console.log(elem);
                            console.log(i);
                            var add = '<div class="columns blueborderTable">';

                            add += '<div class="column is-5">' + elem.question + '</div>';
                            add += '<div class="column is-1">' + elem.type + '</div>';
                            add += '<div class="column is-1">' + elem.country + '</div>';
                            add += '<div class="column is-1">' + elem.min + '</div>';
                            add += '<div class="column is-1">' + elem.max + '</div>';
                            add += '<div class="column is-1">' + elem.required + '</div>';

                            add += '<div class="column is-2"><a onclick="editQuestion(' + i + ')" class="button is-small is-primary">Edit</a> | <a onclick="deleteQuestion(' + i + ')" class="button is-small is-danger">Delete</a></div></div>';

                            $('#results').append(add);
                        });
                    },
                    dataType: 'json'
                });
            }
        }

        function deleteQuestion(i){
            const r = confirm('Are you sure you want to delete this entry ?');
            if (r === true) {
                var q = Qdata[i];
                $.ajax({
                    url: apiUrl + '/questions?id=' + q.id,
                    type: 'DELETE',
                    success: function(result) {
                        // Do something with the result
                        console.log(result);
                        onSelectManualChange($('#country_select').val());
                    }
                });

            }
        }


    </script>
@stop