@extends ('layouts.default')
@section ('content')
    @include('xero.partials._header')

    <div class="row">
        @if (Session::has('error'))
            <div class="alert alert-warning m-b-20">
                {{{ Session::get('error') }}}
            </div>
        @endif
    </div>

    <div class="row">
        <div class="text-center turnover m-t-20">
            {{ $organisation->org_name }}
        </div>
        <input type="hidden" id="location_id" value="{{ $organisation->id }}" />
    </div>

    <div class="row m-t-10">
        <div class="text-center turnover col-xs-3">
            <div class="btn btn-figero text-left padding-10 uppercase-text smallest-text" data-toggle="modal" data-target="#newquestionmodal">
                Add More Info
            </div>
        </div>
    </div>

    <div class="text-center m-t-15" style="color:white;">Required by all branches</div>
    <div class="row m-t-5 padding-20">
        <form>
        @foreach($allquestions as $allq)
            <div class="col-xs-12 m-b-5">
                <a class="menu-buttons">
                    <div class="btn btn-primary text-left full-width padding-10 uppercase-text smallest-text">
                        {{ $allq->question }}
                        @if (isset($allq->answer))
                            <i class="fa fa-2x fa-check pull-right m-r-5 tooler" title="You answered this question" aria-hidden="true"></i>
                            @else
                            <i class="fa fa-2x fa-exclamation-triangle pull-right m-r-5 tooler" title="You still need to answer this question" aria-hidden="true"></i>
                        @endif
                    </div>
                    <div class="btn text-left full-width padding-20 uppercase-text smallest-text">
                        @if($allq->type == "countrydropdown")
                            Please select Country :
                            <select name="countries" id="question_{{ $allq->id }}">
                                @foreach($countries as $key => $value)
                                    <option value="{{ $key }}" {{ (isset($allq->answer) && ($allq->answer == $key)) ? 'selected' : '' }} title="{{  htmlspecialchars($value) }} "> {{ htmlspecialchars($value) }}</option>
                                @endforeach
                            </select>
                        @endif
                        <i class="fa fa-2x fa-save pull-right m-r-5 tooler" onclick="saveNormal( {{$allq->id}} )" title="SAVE & UPDATE" aria-hidden="true"></i>
                    </div>
                </a>
            </div>
        @endforeach
        </form>
    </div>

    <!--<div class="text-center m-t-15" style="color:white;">Required by region</div>
    <div class="row m-t-15 padding-20">
        <form>
            @foreach($specquestions as $specq)
                <div class="col-xs-12 m-b-5">
                    <a class="menu-buttons">
                        <div class="btn btn-dark-gray text-left full-width padding-10 uppercase-text smallest-text">
                            {{ $specq->question }}
                            @if (isset($specq->answer))
                                <i class="fa fa-2x fa-check pull-right m-r-5 tooler" title="You answered this question" aria-hidden="true"></i>
                            @else
                                <i class="fa fa-2x fa-exclamation-triangle pull-right m-r-5 tooler" title="You still need to answer this question" aria-hidden="true"></i>
                            @endif
                        </div>
                        <div class="btn text-left full-width padding-10 uppercase-text smallest-text">
                            @if($specq->type == "countrydropdown")
                                Please select Country :
                                <select name="countries" id="ques_{{ $specq->id }}">
                                    @foreach($countries as $key => $value)
                                        <option {{ (isset($specq->answer) && ($specq->answer == $key)) ? 'selected' : '' }} value="{{ $key }}" title="{{  htmlspecialchars($value) }} "> {{ htmlspecialchars($value) }}</option>
                                    @endforeach
                                </select>
                            @endif
                            @if($specq->type == "text")
                                <input value="{{ (isset($specq->answer)) ? $specq->answer : '' }}" id="question_{{ $specq->id }}" {{ ($specq->required == 1) ? 'required' : '' }} {{ ($specq->min > 0) ? 'min="'.$specq->min. '"' : '' }} {{ ($specq->max > 0) ? 'max="'.$specq->max. '"' : '' }} type="text" style="width:90%;" />
                            @endif
                            @if($specq->type == "numeric")
                                <input value="{{ (isset($specq->answer)) ? $specq->answer : '' }}" id="question_{{ $specq->id }}" {{ ($specq->required == 1) ? 'required' : '' }} {{ ($specq->min > 0) ? 'min="'.$specq->min. '"' : '' }} {{ ($specq->max > 0) ? 'max="'.$specq->max. '"' : '' }} type="number" style="width:90%;" />
                            @endif
                            <i class="fa fa-2x fa-save pull-right m-r-5 tooler" onclick="saveNormal( {{$specq->id}} )" title="SAVE & UPDATE" aria-hidden="true"></i>
                        </div>
                    </a>
                </div>
            @endforeach
        </form>
    </div>-->

    <div class="text-center m-t-15" style="color:white;">Customer added info</div>
    <div class="row m-t-15 padding-20">
        <form>
            @foreach($userquestions as $question)
                <div class="col-xs-12 m-b-5">
                    <a class="menu-buttons">
                        <div class="btn btn-info text-left full-width padding-10 uppercase-text smallest-text">
                            {{ $question->question }}
                            @if (isset($question->answer))
                                <i class="fa fa-2x fa-check pull-right m-r-5 tooler" title="You answered this question" aria-hidden="true"></i>
                            @else
                                <i class="fa fa-2x fa-exclamation-triangle pull-right m-r-5 tooler" title="You still need to answer this question" aria-hidden="true"></i>
                            @endif
                        </div>
                        <div class="btn text-left full-width padding-10 uppercase-text smallest-text">
                            <input value="{{ (isset($question->answer)) ? $question->answer : '' }}" id="question_{{ $question->id }}" type="text" style="width:90%;" />
                            <i class="fa fa-2x fa-save pull-right m-r-5 tooler" onclick="saveUser( {{$question->id}} )" title="SAVE & UPDATE" aria-hidden="true"></i>
                        </div>
                    </a>
                </div>
            @endforeach
        </form>
    </div>

    @include('xero.partials._footer')

    <div id="newinfo" class="modal" tabindex="-1" role="dialog">

    </div>

    <div id="newquestionmodal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Info</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <form id="new_question_form">
                        <input type="hidden" id="model_id" />
                        <div class="form-group">
                            <label for="model_question">What is your info heading ?</label>
                            <input type="text" class="form-control" id="model_question" aria-describedby="emailHelp" placeholder="Enter info heading">
                            <small id="help" class="form-text text-muted">Please enter the heading for the info you want to add.</small>
                        </div>
                        <div class="form-group">
                            <label for="model_answer">What is your info content ?</label>
                            <textarea class="form-control" rows="5" id="model_answer" aria-describedby="answerhelp" placeholder="Enter info content"></textarea>
                            <small id="answerhelp" class="form-text text-muted">Please enter the content.</small>
                        </div>
                        <div class="form-check">
                            <input id="model_others" class="form-check-input" type="checkbox" value="" />
                            <label class="form-check-label" for="defaultCheck1">
                                Add this to all my other branches
                            </label>
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button type="button" onclick="saveUserQuestion();" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        function saveNormal(i){
            var qid = i;
            var answer = $("#question_" + i).val();

            var q = {};
            q.id = qid;
            q.answer = answer;
            q.location_id = $('#location_id').val();

            $.ajax({
                contentType: 'application/json',
                data: JSON.stringify(q),
                dataType: 'json',
                success: function(data){
                    console.log(data);
                },
                error: function(){
                    console.log("fail");
                },
                processData: false,
                type: 'POST',
                url: '/questions/saveanswer',
            });
        }

        function saveUser(i){
            var qid = i;
            var answer = $("#question_" + i).val();

            var q = {};
            q.id = qid;
            q.answer = answer;
            q.location_id = $('#location_id').val();

            $.ajax({
                contentType: 'application/json',
                data: JSON.stringify(q),
                dataType: 'json',
                success: function(data){
                    console.log(data);
                },
                error: function(){
                    console.log("fail");
                },
                processData: false,
                type: 'POST',
                url: '/questions/saveuseranswer',
            });
        }

        function saveUserQuestion(){
            var question = $('#model_question').val();
            var answer = $('#model_answer').val();
            var others = $('#model_others').is(":checked");
            var type = 'text';
            var min = 0;
            var max = 0;
            var required = 1;
            var q = {};
            q.question = question;
            q.type = type;
            q.min = min;
            q.max = max;
            q.required = required;
            q.location_id = $('#location_id').val();
            q.answer = answer;
            q.others = others;

            $.ajax({
                contentType: 'application/json',
                data: JSON.stringify(q),
                dataType: 'json',
                success: function(data){
                    console.log(data);
                    location.reload();
                },
                error: function(){
                    console.log("fail");
                },
                processData: false,
                type: 'POST',
                url: '/questions/saveuserquestion',
            });
        }
    </script>
@stop