@extends('layouts.admin')

@section('title', trans('admin.Knowledge'))
@section('page-title', trans('admin.Knowledge'))

@section('content')

<section class="dpage active">
    <div class="page-head">
        <div>
            <h2>{{ trans('admin.Knowledge') }}</h2>
            <p>{{ trans('admin.knowledge subtitle') }}</p>
        </div>
        <div class="page-head-actions">
            @if(auth('user')->user()->has_permission('update-settings'))
                <button type="button" class="btn btn-primary btn-sm" onclick="openKnowledgeModal('create')">＋ {{ trans('admin.Add knowledge') }}</button>
            @endif
        </div>
    </div>

    <div class="card">
        <div class="table-wrap">
            <table class="table" id="knowledgeTable" style="width:100%;">
                <thead>
                <tr>
                    <th>#</th>
                    <th>{{ trans('admin.Title') }}</th>
                    <th>{{ trans('admin.Created at') }}</th>
                    <th>{{ trans('admin.Actions') }}</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</section>

<!-- ============ MODAL: Add / Edit knowledge entry ============ -->
@if (auth('user')->user()->has_permission('update-settings'))
<div class="modal-backdrop" id="knowledgeModal">
  <div class="modal-box">
    <div class="modal-head">
      <h3 id="knowledgeModalTitle">{{ trans('admin.Add') }} {{ trans('admin.Knowledge') }}</h3>
      <button class="modal-close" onclick="closeModal('knowledgeModal')"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg></button>
    </div>
    <form id="knowledgeForm">
      @csrf
      <input type="hidden" name="knowledge_id" id="knowledgeId" value="">
      <div class="modal-body">
        <div class="field" style="margin-bottom:16px;">
          <label>{{ trans('admin.Title') }}</label>
          <input type="text" name="title" id="knowledgeTitle" required>
        </div>
        <div class="field">
          <label>{{ trans('admin.Content') }}</label>
          <textarea name="content" id="knowledgeContent" rows="6" required></textarea>
        </div>
        <div class="hint" id="knowledgeErrors" style="color:var(--red); margin-top:10px;"></div>
      </div>
      <div class="modal-foot">
        <button type="button" class="btn btn-ghost" onclick="closeModal('knowledgeModal')">{{ trans('admin.Close') }}</button>
        <button type="submit" class="btn btn-primary" id="knowledgeSubmitBtn">{{ trans('admin.Save') }}</button>
      </div>
    </form>
  </div>
</div>
@endif

@endsection

@section('script')
<script type="text/javascript">
    var knowledgeTable = $('#knowledgeTable').DataTable({
        processing: true,
        serverSide: true,
        pageLength: 10,
        lengthMenu: [10, 25, 50, 100],
        ajax: {
          "url": "{{ route('dashboard.knowledge.index') }}",
        },
        columns: [
            {data: 'id', name: 'id'},
            {data: 'title', name: 'title'},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ],
        language: {
            search: "{{ __('admin.search') }}: ",
            loadingRecords: "{{ __('admin.loading') }}",
            emptyTable: "{{ __('admin.no_result') }}",
            zeroRecords: "{{ __('admin.no_result') }}",
            lengthMenu: "{{ __('admin.Show') }} _MENU_ {{ __('admin.entries') }}",
            paginate: {
                previous: "{{ __('admin.previous') }}",
                next: "{{ __('admin.next') }}",
            }
        },
    });

    function openKnowledgeModal(mode, id){
        $('#knowledgeForm')[0].reset();
        $('#knowledgeId').val('');
        $('#knowledgeErrors').html('');

        if (mode === 'edit') {
            $('#knowledgeModalTitle').text("{{ trans('admin.Edit') }} {{ trans('admin.Knowledge') }}");
            $.get("{{ url('dashboard/knowledge') }}/" + id + "/edit", function(res){
                var data = res.data;
                $('#knowledgeId').val(data.id);
                $('#knowledgeTitle').val(data.title);
                $('#knowledgeContent').val(data.content);
                openModal('knowledgeModal');
            }).fail(function(){
                dashToast('✕', "{{ trans('admin.faild') }}");
            });
        } else {
            $('#knowledgeModalTitle').text("{{ trans('admin.Add') }} {{ trans('admin.Knowledge') }}");
            openModal('knowledgeModal');
        }
    }

    $(document).on('click', '.edit-knowledge', function(){
        openKnowledgeModal('edit', $(this).data('id'));
    });

    $('#knowledgeForm').on('submit', function(e){
        e.preventDefault();
        var $btn = $('#knowledgeSubmitBtn');
        var id = $('#knowledgeId').val();
        var url = id
            ? "{{ url('dashboard/knowledge') }}/" + id + "/edit"
            : "{{ route('dashboard.knowledge.store') }}";
        $('#knowledgeErrors').html('');
        $btn.prop('disabled', true);

        $.ajax({
            url: url,
            method: 'POST',
            data: $(this).serialize(),
            success: function(res){
                closeModal('knowledgeModal');
                $('#knowledgeForm')[0].reset();
                knowledgeTable.ajax.reload(null, false);
                dashToast('✓', "{{ trans('admin.success') }}");
            },
            error: function(xhr){
                if (xhr.status === 422) {
                    var errors = xhr.responseJSON.errors;
                    var html = '';
                    $.each(errors, function(key, val){ html += val[0] + '<br>'; });
                    $('#knowledgeErrors').html(html);
                } else {
                    dashToast('✕', "{{ trans('admin.faild') }}");
                }
            },
            complete: function(){
                $btn.prop('disabled', false);
            }
        });
    });
</script>
@endsection