@include("messages")
<?php
$size = Config::get('params.best_faq_image_size');

$required = "";
$action = "faqs";
?>

<div class="row">
    <ul id="tabsJustified" class="nav nav-tabs">
        <li class="nav-item"><a href="#_" data-target="#about" data-toggle="tab" class="nav-link small text-uppercase active">About</a></li>
        <li class="nav-item"><a href="#_" data-target="#faq_questions" data-toggle="tab" class="nav-link small text-uppercase ">Questions</a></li>
    </ul>
</div>

<div id="tabsJustifiedContent" class="tab-content">


    <div id="about" class="tab-pane fade active show">
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    {!! Form::label('title') !!}
                    {!! Form::text('title', null , array('class' => 'form-control',$required) ) !!}
                </div>
            </div>
            
            <div class="col-sm-6">
                <div class="form-group">
                    {!! Form::label('Image id for Faqs Page') !!}
                    {!! Form::text('image_id', null , array('class' => 'form-control',$required) ) !!}
                </div>
            </div>

        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    {!! Form::label('Code') !!}
                    {!! Form::text('code', null , array('class' => 'form-control',$required) ) !!}
                </div>
            </div>

        </div>

        <div class="row">
            <div class="col-sm-6">
                <div class="form-group">
                    {!! Form::label('keywords') !!}
                    {!! Form::text('keywords', null , array('class' => 'form-control',$required) ) !!}
                </div>
            </div>
            
            <div class="col-sm-6">
                <div class="form-group">
                    {!! Form::label('meta description') !!}
                    {!! Form::textarea('meta_description', null, ['class'=>'form-control', 'rows' => 3, 'cols' => 3, 'style' => '']) !!}
                </div>
            </div>
        </div>
       <div class="row">
            <div class="col-sm-6">
                <div class="d-flex justify-content-start flex-wrap">
                    <div class="custom-control custom-switch custom-switch-success mr-2 mb-1">
                        <p class="mb-0">Status</p>
                        <input type="checkbox" 

                               @if(isset($model->status) && $model->status==1)
                               checked 
                               @endif
                               class="custom-control-input" name="status" id="status" value="1">
                               <label class="custom-control-label" for="status">Status</label>
                    </div>
                </div>
            </div>
            
        </div>
    </div>


    <div id="faq_questions" class="tab-pane fade">

        <div class="row">
            <div class="col-sm-12">
                <table cellspacing="0" class="table" id="media_gallery_content_grid" width="90%">
                    <thead>
                        <tr class="headings">
                            <th class="first">Title</th>
                            <th>Description</th>
                            <th>Sort Order</th>
                            <th>Edit</th>
                            <th>Exclude</th>
                            <th class="last">Remove</th>
                        </tr>
                    </thead>
                    <tbody id="questions_list">
                        @if(!empty($plans)>0)
                        @foreach($plans as $plan)
                        <tr id="tr_{{ $loop->index }}">
                            <td id="title_{{ $loop->index }}" >{{$plan["title"]}}</td>
                            <td id="description_{{ $loop->index }}" >{{$plan["description"]}}</td>
                            <td><input type="text" name="questions[{{ $loop->index }}][position]"  value="{{$plan["position"]}}"></td>
                            <td><a href="#_" id="{{ $loop->index }}" data-id="{{ $loop->index }}" class="edit_questions" >Edit</a></td>
                            <td><input type="checkbox" name="questions[{{ $loop->index }}][status]" value="0" @if($plan['status']==0) checked="checked" @endif ></td>
                            <td><input type="checkbox" name="questions[{{ $loop->index }}][remove]" value="1">
                                <input type="hidden" id="questions_{{ $loop->index }}" name="questions[{{ $loop->index }}][data]" value="{{json_encode($plan)}}"></td>
                        </tr>
                        @endforeach
                        @endif
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="100" class="last" style="padding:8px"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group">
                    {!! Form::label('Title') !!}
                    {!! Form::text(null, null , array('id' => 'question','placeHolder' => 'Day 1 - 3: Livingstone','class' => 'form-control',$required) ) !!}
                </div>
            </div>
            <div class="col-sm-12">
                <div class="form-group">
                    {!! Form::label('description') !!}
                    {!! Form::textarea(null,null, ['class'=>'form-control mb-20 ckeditor', 'id' => 'answer' ,'rows' => 3, 'cols' => 3]) !!}

                </div>
            </div>

            <div class="col-sm-12">
                <div class="form-group">
                    <input type="button" value="Add" id="save_question">
                    <input type="button" style="display: none" value="Save" id="update_question">
                    <input type="button" value="Clear" id="clear_question">
                    <input type="hidden" value="" id="questions_id">

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

    <br clear="all" />
    <div class="row">
        <div class="col-md-12">
            {!! Form::hidden('_token', csrf_token(),array("id"=>"_token")) !!}
            <button type="button" class="btn btn-primary mr-1 mb-1 waves-effect waves-light save float-right">Save</button>
            <a href="{{url('admin/faqs')}}" class="btn btn-outline-warning mr-1 mb-1 waves-effect waves-light float-right">Cancel</a>
        </div>
    </div>
</div>

@include('vendor_script')
@section('myscript')
{{-- Page js files --}}
<script>
  
    var questionsCount = <?php echo!empty($plans) ? count($plans) : 0 ?>;
    function clear() {

        $('#question').val("");
        CKEDITOR.instances['answer'].setData(" ");
    }
    $(document).ready(function () {
        var id = "";

        $('#media_action').val("<?php echo $action; ?>");
        
        $(".save").click(function () {
            
            var url = $("#form").attr('action');
            var type = "POST";
            var dataType = "json";
            var data = new FormData($('#form')[0]);


//            var objEditor = CKEDITOR.instances["ckview1"];
//            var desc = objEditor.getData();

//            data.set('description', desc);

            var callBack = function (response) {
                //add one loader here   
                if (response.error === 1) {
                    alertMessage("error");
                } else
                {
                    window.top.location.href = '{{url("admin/faqs")}}';
                }
            };

            var errorCallBack = function (response) {
                alertMessage('success');
            };

            ajaxRequest(url, type, dataType, data, callBack, errorCallBack);

        });



        $("#add").click(function () {});

        $("#save_question").click(function () {

            var question = $('#question').val();
            var questions = $('#questions').val();
            var questions_id = $('#questions_id').val();
            var _token = $('#_token').val();
            var position = $('#position').val();
            
            var answer = CKEDITOR.instances['answer'].getData();

            var data = {title: question, description: answer, id: "", _token: _token};

            $.ajax({
                url: "{{url('admin/faqs/savequestion')}}",
                type: 'post',
                data: data,
                dataType: "json",
                success: function (response) {

                    var html = "";
                    if (response.error == false) {

                        $('#question').val("");
                       
                        CKEDITOR.instances['answer'].setData(" ");

                        var html = "";
                        questionsCount++;

                        html = "<tr id='tr_" + questionsCount + "' ><td class='first'>" + response.input.title + "</td><td>" + response.input.description + "</td><td><input type='text' name='questions[" + questionsCount + "][position]' value=1 ></td><td><input type='checkbox' name='questions[" + questionsCount + "][status]' value=0  ></td><td><input type='checkbox' name='questions[" + questionsCount + "][remove]' value=1 ><input type='hidden' name='questions[" + questionsCount + "][data]' value='" + JSON.stringify(response.input) + "' ></td></tr>";

                        $('#questions_list').append(html);
                    } else {
                        showMessage('Error');
                        alert("error");
                    }
                },
            });
        });

        $("#clear_question").click(function () {

            clear();
        });

        $(".edit_questions").click(function () {

            id = $(this).attr("id");
            var questions = $("#questions_" + id).val();
            var json = JSON.parse(questions)
            var hotels = json.hotels;
            var highlights = json.highlights;
            $('#questions_id').val(json.id);
            $('#question').val(json.title);
            CKEDITOR.instances['answer'].setData(json.description);
            $('#save_question').hide();
            $('#update_question').show();

        });

        $("#update_question").click(function () {

            var title = $('#question').val();
            var questions = $('#questions').val();
            var questions_id = $('#questions_id').val();
            var _token = $('#_token').val();
            var description = CKEDITOR.instances['answer'].getData();
            var data = {title: title, description: description, id: questions_id, _token: _token, questions: questions};

            var url = "{{url('admin/faqs/savequestion')}}";
            var type = 'post';
            var dataType = "json";
            $.ajax({
                url: url,
                type: type,
                data: data,
                dataType: dataType,
                success: function (response) {

                    var html = "";
                    if (response.error == false) {
                        $('#title_' + id).html(response.input.title);
                        $('#description_' + id).html(response.input.description);

                        $('#questions_' + id).val(JSON.stringify(response.input));
                        //showMessage('Saved');
                        clear();
                        $('#save_question').show();
                        $('#update_question').hide();
                    } else {
                        showMessage('Error');
                    }
                },
            });


        });

    });

</script>
<script>
    var ckview = document.getElementById("ckview1");
//    CKEDITOR.config.allowedContent = true;
    CKEDITOR.replace(ckview, {filebrowserImageBrowseUrl: '/file-manager/ckeditor',
    });



</script>
@endsection
