@php
use App\Helpers\Helper;
@endphp
@extends('layouts.master')
@section('title', 'Knowledge Base Area')
@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">
        
        @section('breadcrumbs')
        <nav aria-label="breadcrumb" class="d-flex custom-breadcrumbs flex-sm-nowrap flex-wrap ">
            <ol class="breadcrumb mb-0 me-1">
                <li class="breadcrumb-item">
                    <a href="{{ route('admin.dashboard') }}">Dashboard</a>
                </li>
                <li class="breadcrumb-item active">
                     Knowledge Base Area
                </li>

            </ol>
        </nav>
        @endsection
        
        
        <!-- Help Center Header -->
        @if (auth()->user()->can('create-knowledgebase'))
        <div class="text-end mb-4">
        <button type="button" data-bs-target="#addknowledagebaseareaModal" data-bs-toggle="modal"
                class="btn btn-primary flex-grow-1 flex-sm-grow-0 mt-sm-0 "><i
                class="fa-solid fa-plus"></i>
            &nbsp; Add Knowledge Base Area</button>    
        </div>
        
        @endif
        
         @include('admin.errors.error')
        
        <div
            class="help-center-header rounded d-flex flex-column justify-content-center align-items-center bg-help-center py-4 min-h-auto">
            <h3 class="text-center">Knowledge Base Area</h3>
            <div class="input-wrapper mb-3 input-group input-group-lg input-group-merge">
                <span class="input-group-text" id="basic-addon1"><i class="ti ti-search"></i></span>
                <input type="text" id="kenowledge_search" class="form-control" placeholder="Search" aria-label="Search"
                    aria-describedby="basic-addon1" onkeyup="return displayknowledgebaseArea()" />
            </div>
        </div>
        <!-- /Help Center Header -->

       
        
        <!-- Knowledge Base -->
        <div class="help-center-knowledge-base py-5 help-center-bg-alt bg-help-center">
            
            <div class="container-xl">
                
                <h3 class="text-center mt-4">Knowledge Base Area</h3>
                <div class="row">
                    <div class="col-lg-12 mx-auto">
                        <div class="row display_knowledge">


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('admin.knowledgebasearea.create')
    <div class="edit_knowldgebase_area">

    </div>
    @include('admin.confirmalert')
@endsection

@section('scripts')
    <script>
        displayknowledgebaseArea()
        // `limit` is in bytes
        jQuery.validator.addMethod('fileSizeLimit', function(value, element) {
            if (!element.files[0] || (element.files[0].size > 19960589)) {
                return false;
            } else {
                return true;
            }
        }, '@lang('admin.fileSize')');

        /** Create KBA Validation */
        $("#createform").validate({
            rules: {
                name: {
                    required: true,
                    maxlength: 50
                },
                "file_name": {
                    required: true,
                    accept: "application/pdf",
                    fileSizeLimit: true
                },
                status: {
                    required: true,
                }
            },
            messages: {
                "file_name": {
                    accept: "Please select Pdf File only."
                }
            },
            submitHandler: function(form) {
                if ($("#createform").validate().checkForm()) {
                    $(".submitbutton").addClass("disabled");
                    $('.loader-btn').removeClass("d-none");
                    form.submit();
                }
            },
            errorPlacement: function(error, element) {
                if (element.attr("id") == "status") {
                    error.appendTo(element.parent("div"));
                } else {
                    error.insertAfter(element);
                }
            }
        });

        /** KBA Edit Validation */
        $(document).on('input', '#editname', function() {
            let val = $(this).val();
            if (!val) {
                $(this).addClass('error')
                $(this).after('<label id="name-error" class="error" for="name">This field is required.</label>')
                $('.editsubmit').attr("type", "button")
                return false;
            } else {
                $(this).removeClass('error');
                $('.editsubmit').attr("type", "submit");
                $('#name-error').remove();
                $('.editsubmit').attr('disabled', false);
                //$('.loader-btn').removeClass("d-none");
                return true;
            }
        });

        $(document).on('change', '#editstatus', function() {
            let val = $(this).val();
            let status = $('#editstatus').val();
            if (!val) {
                $(this).addClass('error')
                $(this).after('<label id="name-error" class="error" for="name">This field is required.</label>')
                $('.editsubmit').attr("type", "button")
                return false;
            } else {
                $(this).removeClass('error');
                $('.editsubmit').attr("type", "submit");
                $('#status-error').remove();
                $('.editsubmit').attr('disabled', false);
                return true;
            }
        })

        $(document).on('click', '.editsubmit', function(e) {

            e.preventDefault();
            let validatedname = $('#editname').val();
            let validatestatus = $('#editstatus').val();
            if (validatedname && validatestatus) {
                $('.loader-btn').removeClass('d-none');
                $('.editsubmit').attr('disabled', true);
                $('.editsubmit').attr('type', 'submit');
                $('#editform').submit();
            }
        })

        /* Display and Serch KBA */
        function displayknowledgebaseArea() {
            var search = $('#kenowledge_search').val();
            var assetURL = "{{ asset('storage/knowledgebase_attachment/') }}"
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': jQuery('meta[name="csrf-token"]').attr('content')
                }
            });
            $.ajax({
                type: "POST",
                url: "{{ route('admin.getknowledgebasearea') }}",
                data: {
                    'search': search,
                    'status': status
                },
                dataType: 'json',
                success: function(data) {
                    $('.display_knowledge').empty();
                    if (data.length != 0) {
                        $.each(data, function(indexInArray, valueOfElement) {
                            var html = `<div class="col-lg-3 col-sm-6 mb-4">
                                    <div class="card h-100">
                                        <div class="card-body d-flex flex-column">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge bg-label-warning p-2 rounded me-2"><i class="ti ti-book-2 ti-sm"></i></span>
                                                <h5 class="fw-semibold mt-3 ms-1">${valueOfElement.name}</h5>
                                            </div>
                                            <ul class="mt-auto">`;
                                    var route = "{{ url('admin/knowledgebasearea') }}";
                                    html +=
                                        `<li class="text-primary pb-1"><a href="${route+'/'+valueOfElement.get_knowledgebase_attachment.knowledgebase_id}" target='_blank'><i class=ti ti-download></i>View</a></li>`;
                               
                            html += `</ul>
                                            <p class="mb-0 fw-semibold">
                                                @if (auth()->user()->can('update-knowledgebase'))
                                                    <a href="javascript:void(0)"  class="btn btn-sm btn-label-primary waves-effect  edit_kba_${valueOfElement.id}" data-id="${valueOfElement.id}" onClick="return editKnowledge_base_area(${valueOfElement.id})"><i class="tf-icons ti ti-edit pb-1"></i> Edit</a>&nbsp;&nbsp;
                                                @endif
                                                @if (auth()->user()->can('delete-knowledgebase'))
                                                <a class="btn btn-sm btn-label-danger waves-effect delete_kba_${valueOfElement.id}" onclick="deleteValueSet(${valueOfElement.id})" data-bs-toggle='modal' data-bs-target='#delete-modal' data-id="${valueOfElement.id}" href="javascript:void(0)"><i class="ti ti-trash ti-sm pb-1"></i> Delete</a>
                                                @endif
                                            </p>
                                        </div>
                                    </div>
                                </div>`;
                            $('.display_knowledge').append(html);
                        });
                    } else {
                        $('.display_knowledge').append(
                            "<center><span>Knowledge Base Area Not Found.</span></center>");
                    }
                },
                error: function(data) {
                    console.log('Error:', data);
                }
            });
        }
        /** Edit KBA */
        function editKnowledge_base_area(id) {
            var id = $('.edit_kba_' + id).attr('data-id');
            $.ajax({
                type: "GET",
                url: 'knowledgebasearea/' + id + '/edit',
                data: {
                    'id': id
                },
                dataType: 'json',
                success: function(data) {
                    $('.edit_knowldgebase_area').html(data.html)
                    $('#editknowledagebaseareaModal').modal('show');
                }
            });
        }

        /** Delete Konwledge Base Area */

        $("#delete-record").on("click", function() {
            var id = $('.delete_kba_' + id).attr('data-id');
            var id = $("#id").val();
            var deleteUrl = baseUrl + '/admin/knowledgebasearea/' + id;
            $('#delete-modal').modal('hide');

            $.ajax({
                url: deleteUrl,
                type: "DELETE",
                dataType: 'json',
                success: function(data) {
                    toastr.success("@lang('admin.recordDelete')", "@lang('admin.success')");
                    displayknowledgebaseArea();
                },
                error: function(data) {
                    toastr.error("@lang('admin.oopserror')", "@lang('admin.error')");
                }
            });
        });
    </script>
@endsection