@extends('layouts.app')
@section('title', 'قاعدة المعرفة')
@section('page_title', 'قاعدة المعرفة')
@section('page_subtitle', 'مقالات وأسئلة شائعة يستخدمها الموظف أثناء المكالمة')

@section('page_actions')
    @if (auth()->user()->hasPermission('knowledge.manage'))
        <button class="btn btn-primary" id="btnAdd"><i class="bi bi-plus-lg"></i> مقال جديد</button>
    @endif
@endsection

@section('content')
<div class="card">
    <div class="card-body table-responsive">
        <table class="table table-hover w-100" id="kbTable">
            <thead>
                <tr><th>#</th><th>العنوان</th><th>التصنيف</th><th>الوسوم</th><th>المشاهدات</th><th>الحالة</th><th>إجراءات</th></tr>
            </thead>
        </table>
    </div>
</div>

<div class="modal fade" id="kbModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <form id="kbForm" data-url="" data-method="POST">
                <div class="modal-header">
                    <h5 class="modal-title" id="kbModalTitle">إضافة مقال</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label">العنوان <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control" required>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">التصنيف</label>
                            <input type="text" name="category" class="form-control">
                        </div>
                        <div class="col-12">
                            <label class="form-label">المحتوى <span class="text-danger">*</span></label>
                            <textarea name="body" class="form-control" rows="10" required></textarea>
                        </div>
                        <div class="col-12">
                            <label class="form-label">الوسوم (مفصولة بفاصلة)</label>
                            <input type="text" name="tags" class="form-control">
                        </div>
                    </div>
                    <input type="hidden" name="is_published" value="0">
                    <div class="form-check form-switch mt-3">
                        <input class="form-check-input" type="checkbox" name="is_published" value="1" id="kb_published" checked>
                        <label class="form-check-label" for="kb_published">منشور</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
                    <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> حفظ</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="kbViewModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="kbViewTitle"></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="kbViewBody"></div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
jQuery(function ($) {
    const table = MR.table('#kbTable', '{{ route('knowledge.data') }}', [
        { data: 'id', name: 'id' },
        { data: 'title', name: 'title' },
        { data: 'category', defaultContent: '—' },
        { data: 'tags', defaultContent: '—' },
        { data: 'views', name: 'views', searchable: false },
        { data: 'status_badge', orderable: false, searchable: false },
        { data: 'actions', orderable: false, searchable: false }
    ]);

    const $modal = $('#kbModal'), $form = $('#kbForm');

    $('#btnAdd').on('click', function () {
        $form[0].reset();
        $form.data('url', '{{ route('knowledge.store') }}').data('method', 'POST');
        $('#kbModalTitle').text('إضافة مقال');
        $modal.modal('show');
    });

    $('#kbTable').on('click', '[data-action=edit]', function () {
        const id = $(this).data('id');
        $.getJSON('{{ url('knowledge') }}/' + id, function (res) {
            $form[0].reset();
            MR.fill($form, res.article);
            $form.data('url', '{{ url('knowledge') }}/' + id).data('method', 'PUT');
            $('#kbModalTitle').text('تعديل مقال');
            $modal.modal('show');
        });
    });

    $('#kbTable').on('click', '[data-action=view]', function () {
        $.getJSON('{{ url('knowledge') }}/' + $(this).data('id'), function (res) {
            $('#kbViewTitle').text(res.article.title);
            $('#kbViewBody').html($('<div>').text(res.article.body).html().replace(/\n/g, '<br>'));
            $('#kbViewModal').modal('show');
        });
    });

    $('#kbTable').on('click', '[data-action=delete]', function () {
        MR.remove($(this).data('url'), function () { table.ajax.reload(null, false); });
    });

    $form.on('submit', function (e) {
        e.preventDefault();
        MR.submit(this, { done: function () { $modal.modal('hide'); table.ajax.reload(null, false); } });
    });
});
</script>
@endpush