@extends('backend.layouts.master')
@section('content')
    <div class="content-wrapper">
        <section class="content-header">
            @include('backend.common-views.messages')
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                    </div>
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Home</a></li>
                            <li class="breadcrumb-item active">FAQs</li>
                        </ol>
                    </div>
                </div>
            </div>
        </section>
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">FAQs</h3>
                                <div class="d-flex justify-content-end">
                                    <a href="javascript:void(0);" class="btn btn-success addFAQ btn-flat" onclick="openAddModal()"><i class="fa fa-plus"></i> Add FAQs</a>
                                </div>
                            </div>
                            <div class="card-body">
                                <table id="faq_table" class="table table-bordered table-striped">
                                    <thead>
                                        <tr>
                                            <th>SR No</th>
                                            <th>Question</th>
                                            <th>Order</th>
                                            <th>Action</th>
                                            <th>Type</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($faqs as $faq)
                                        <tr>
                                            <td>{{ $faq->sort_order }}</td>
                                            <td>
                                                {{ $faq->question }}
                                                <!-- @if($faq->include_in_AIF == 1)
                                                    <span class="badge badge-success float-right">AIF</span>
                                                @endif -->
                                            </td>
                                            <td>
                                                <a href="{{route('admin.moveup.faqs', $faq->id)}}" class="btn btn-info btn-sm" title="Move Up"><i class="fa fa-solid fa-arrow-up"></i></a>
                                                <a href="{{route('admin.movedown.faqs', $faq->id)}}" class="btn btn-info btn-sm" title="Move Down"><i class="fa fa-solid fa-arrow-down"></i></a>
                                            </td>
                                            <td id="{{$faq->id}}">
                                                <a onclick="editFAQ({{$faq->id}})" class="btn btn-info btn-sm mr-2" title="Edit"><i class="fas fa-edit"></i></a>
                                                <a  onclick="removeFAQ({{$faq->id}})" class="btn btn-danger btn-sm" title="Delete">
                                                    <i class="fa fa-trash"></i>
                                                </a>
                                            </td>
                                            <td>
                                                {{ $faq->is_aif_faq ? 'Alternative Investment Fund FAQs' : 'Dashboard FAQs' }}
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <div class="modal fade" id="add-faq-modal" aria-modal="true" role="dialog">
        <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
            <h4 class="modal-title" id="faq-title">Add FAQs</h4>
            <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
            </button>
            </div>
            <div class="modal-body">
                <form id="add-faq-modal-form" action="" method="POST">@csrf
                    <input type="hidden" id="faq-id" value="">
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <div class="custom-control custom-checkbox">
                                    <input class="custom-control-input" type="checkbox" id="include_in_AIF" name="include_in_AIF" onchange="updateCheckboxValue()">
                                    <label for="include_in_AIF" class="custom-control-label">Include in AIF</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="question">Enter Question:</label>
                                <input type="text" name="question" class="form-control" id="question">
                                <span class="error que-error"></span>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="answer">Enter Answer:</label>
                                <textarea name="answer" id="answer" class="form-control summernote" type="text" rows="5" cols="20"></textarea>
                                <span class="error ans-error"></span>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-primary" id="add-faq-modal-submit" onclick="updateFAQ()"><i class="fas fa-save"></i> Submit</button>
                <button type="button" class="btn btn-default" data-bs-dismiss="modal"><i class="fas fa-times"></i> Close</button>
            </div>
        </div>
        </div>
    </div>
@endsection
@push('js')
<script>
    var collapsedGroups = {};
    var groupColumn = 4;

    var oTable = $("#faq_table").DataTable({
        order: [[groupColumn, 'asc']],
        displayLength: 25,
        "responsive": true,
        "autoWidth": false,
        "columnDefs": [
            {orderable:false, visible: false, targets: groupColumn }, { "orderable": false, "targets": [2, 3] }
        ],
        rowGroup: {
            dataSrc: 4,
            startRender: function(rows, group) {
            var collapsed = !!collapsedGroups[group];
    
            rows.nodes().each(function(r) {
                r.style.display = 'none';
                if (collapsed) {
                r.style.display = '';
                }
            });
            
            return $('<tr/>')
            .append('<td colspan="5"><b>' + group + ' (' + rows.count() + ')</b></td>')
            .attr('data-name', group)
            .toggleClass('collapsed', collapsed);
            }
        }
    });

    $('#faq_table').on('click', 'tr.group-start', function() {
        var name = $(this).data('name');
        collapsedGroups[name] = !collapsedGroups[name];
        oTable.draw(false);
    });

    var isEditMode = false;
    var checkboxChecked;
    $('.summernote').summernote();

    function removeFAQ(id){
        if(confirm('Are you sure to delete this record ?')) {
            $('.loading-block').show();
            $.ajax({
                method : "DELETE",
                headers:{ 'X-CSRF-TOKEN': '{{ csrf_token() }}'},
                url : "{{url('/admin/faqs')}}/"+id ,
                success:function(data){
                    $('.loading-block').hide();
                    window.location.reload();
                }
            });
        }
    }

    function editFAQ(id){
        $('#faq-title').text('Edit FAQ');
        $('.loading-block').show();
        isEditMode = true;
        $.ajax({
            method : "GET",
            url : "{{url('admin/faqs')}}/"+id+"/edit",
            processData: false,
            contentType: false,
            success:function(data){
                $('.loading-block').hide();
                $('#question').val(data.question);
                $('#include_in_AIF').val(data.include_in_AIF);
                checkboxChecked = data.include_in_AIF;
                if (data.include_in_AIF === 1) {
                    $('#include_in_AIF').prop('checked', true);
                } else {
                    $('#include_in_AIF').prop('checked', false);
                }
                $('#faq-id').val(id);
                $('#answer').summernote();
                $('#answer').summernote('code', data.answer);
                $('#add-faq-modal').modal('show');
            }
        });
    }

    $('#add-faq-modal-form').submit(function(event) {
        event.preventDefault();
        updateFAQ();
    });

    function updateFAQ() {
        var id = $("#faq-id").val();
        $('.que-error, .ans-error').html('');
        $('.loading-block').show();
        var method = isEditMode ? "PATCH" : "POST";
        var url = isEditMode ? "{{ url('/admin/faqs') }}/" + id : "{{ url('/admin/faqs') }}";
        var data = {
            'question': $('#question').val(),
            'answer': $('#answer').val(),
            'include_in_AIF': checkboxChecked
        };
        if (isEditMode) {
            data.id = id;
        }
        $.ajax({
            method: method,
            headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            url: url,
            data: data,
            success: function (data) {
                $('.loading-block').hide();
                if (data.success == 1) {
                    window.location.reload();
                } else if (data.success == 0) {
                    if (data.message['question']) {
                        $('.que-error').html(data.message['question'][0])
                    }
                    if (data.message['answer']) {
                        $('.ans-error').html(data.message['answer'][0])
                    }
                }
            }
        });
    }

    function openAddModal() {
        $('#faq-title').text('Add FAQ');
        $('#faq-id').val('');
        $('#question').val('');
        $('#answer').summernote('code', '');
        isEditMode = false;
        $('#add-faq-modal').modal('show');
    }

    $('#add-faq-modal').on('hidden.bs.modal', function () {
        $('#question, #faq-id, .que-error, .ans-error').html('');
        $('#answer').summernote('code', '');
    });

    function updateCheckboxValue() {
        const checkbox = document.getElementById('include_in_AIF');
        checkboxChecked = checkbox.checked ? 1 : 0;
    }
</script>
@endpush