<div class="col-sm-12">
    <div class="form-group">
        {!! Form::label('Faq\'s Title') !!}
        {!! Form::text('faqTitle', null , array('class' => 'form-control',$required) ) !!}
    </div>
</div>

<div class="col-sm-12">
    <div class="form-group">
        {!! Form::label('Faq\'s text') !!}
        {!! Form::textarea('faqText', null , array('id' => 'faqText','class' => 'form-control','rows' => 3, 'cols' => 3, 'style' => '',$required) ) !!}
    </div>
</div>
<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="visit_list">
                @if(!empty($faqs)>0)
                @foreach($faqs as $faq)
                <tr id="tr_{{ $loop->index }}">
                    <td id="title_{{ $loop->index }}" >{{$faq["title"]}}</td>
                    <td id="description_{{ $loop->index }}" >{{$faq["description"]}}</td>
                    <td><input type="text" name="faqs[{{ $loop->index }}][position]"  value="{{$faq["position"]}}"></td>
                    <td><a href="#_" id="{{ $loop->index }}" data-id="{{ $loop->index }}" class="edit_faq" >Edit</a></td>
                    <td><input type="checkbox" name="faqs[{{ $loop->index }}][status]" value="0" @if($faq['status']==0) checked="checked" @endif ></td>
                    <td><input type="checkbox" name="faqs[{{ $loop->index }}][remove]" value="1">
                        <input type="hidden" id="faqs_{{ $loop->index }}" name="faqs[{{ $loop->index }}][data]" value="{{json_encode($faq)}}"></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' => 'faq_title','placeHolder' => 'Enter Question','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' => 'faq_description' ,'rows' => 3, 'cols' => 3]) !!}

        </div>
    </div>
    <div class="col-sm-12">
        <div class="form-group">
            <input type="button" value="Add" id="save_faq">
            <input type="button" style="display: none" value="Save" id="update_faq">
            <input type="button" value="Clear" id="clear_faq">
            <input type="hidden" value="" id="faq_id">
        </div>
    </div>
</div>


@section('faqscript')
<script>

    var faqsCount = <?php echo!empty($faqs) ? count($faqs) : 0 ?>;

    var id = "";
    $("#update_faq").click(function () {

        var title = $('#faq_title').val();
        var description = CKEDITOR.instances['faq_description'].getData();
        var faqs = $('#faqs').val();

        var faq_id = $('#faq_id').val();
        var _token = $('#_token').val();

        var data = {title: title, description: description, id: faq_id, _token: _token, faqs: faqs};

        var url = "{{url('admin/packages/savefaqs')}}";
        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);

                    $('#faqs_' + id).val(JSON.stringify(response.input));

                    //showMessage('Saved');
                    clear();
                    $('#save_visit').show();
                    $('#update_visit').hide();
                } else {
                    showMessage('Error');
                }
            },
        });


    });

    function clear() {
        CKEDITOR.instances['faq_description'].setData(" ");
        $('#faq_title').val("");
    }

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

        clear();
    });



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

        id = $(this).attr("id");
        var faq = $("#faqs_" + id).val();
        var json = JSON.parse(faq);
        $('#faq_id').val(json.id);
        $('#faq_title').val(json.title);
         CKEDITOR.instances['faq_description'].setData(json.description);
        $('#save_faq').hide();
        $('#update_faq').show();

    });

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

        var title = $('#faq_title').val();
        
        var description = CKEDITOR.instances['faq_description'].getData();
        var faq_id = $('#faq_id').val();
        var _token = $('#_token').val();
        var position = $('#position').val();

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

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

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

                    $('#faq_title').val("");
                    CKEDITOR.instances['faq_description'].setData(" ");
                    var html = "";
                    faqsCount++;

                    html = "<tr id='tr_" + faqsCount + "' ><td class='first'>" + response.input.title + "</td><td>" + response.input.description + "</td><td><input type='text' name='faqs[" + faqsCount + "][position]' value=1 ></td><td><a href='#_' id='" + faqsCount + "' data-id='" + faqsCount + "' class='edit_faq' ></a></td><td><input type='checkbox' name='faqs[" + faqsCount + "][status]' value=0  ></td><td><input type='checkbox' name='faqs[" + faqsCount + "][remove]' value=1 ><input type='hidden' name='faqs[" + faqsCount + "][data]' value='" + JSON.stringify(response.input) + "' ></td></tr>";

                    $('#visit_list').append(html);
                } else {
                    showMessage('Error');
                }
            },
        });
    });
</script>
<script>
    $(document).ready(function () {

        CKEDITOR.config.allowedContent = true;
        CKEDITOR.replace("ckeditor", {filebrowserImageBrowseUrl: '/file-manager/ckeditor',
        });

    });

</script>
@endsection