@extends('admin.layouts.master')

@section('content')
    <div class="knowledge-layout">
        <div class="knowledge-layout-header">
            <div class="flex-align gap-3">
                <span class="knowledge-sidebar-toggle">
                    <i class="fa-solid fa-bars"></i>
                </span>
                <a href="{{ route('admin.knowledge.list') }}" class=" fs-14 text--dark">
                    <i class="fa-solid fa-arrow-left"></i>
                    @lang('Back')
                </a>
            </div>
            <a href="{{ route('admin.knowledge.add') }}" class="link">
                <i class="las la-plus"></i>
                <span class="text">@lang('Create New Article')</span>
            </a>
        </div>

        <div class="knowledge-layout-wrapper">
            <div class="knowledge-layout-sidebar">
                <div class="knowledge-layout-sidebar-close">
                    <i class="fa-solid fa-xmark"></i>
                </div>

                <ul class="knowledge-setting-nav">
                    <li class="knowledge-setting-nav-item">
                        <a href="{{ route('admin.knowledge.analytics') }}" class="knowledge-setting-nav-link">
                            @include('admin.partials.svg.analytics')
                            <span class="text">@lang('Analytics')</span>
                        </a>
                    </li>
                    <li class="knowledge-setting-nav-item has-dropdown">
                        <a href="{{ route('admin.knowledge.category.list') }}" class="knowledge-setting-nav-link active">
                            @include('admin.partials.svg.setting')
                            <span class="text">@lang('Knowledge Category')</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="knowledge-layout-body">
                <div class="knowledge-setting-header">
                    <p class="fs-14 py-1">
                        @lang('Category')
                    </p>
                </div>

                <div class="category-wrapper">

                    @if ($activeCategory)
                        <div class="category-card mb-4">
                            <div class="category-card-top">
                                <div class="category-card-thumb">
                                    <img src="{{ getImage(getFilePath('knowledgeCategory') . '/' . $activeCategory->image, getFileSize('knowledgeCategory')) }}" alt="Company" />
                                </div>
                                <div class="category-card-right">
                                    <div class="category-card-content">
                                        <p class="fw-medium text--dark">{{ __($activeCategory->name) }}</p>
                                        <p class="fs-14">@lang('Description')</p>
                                        <p class="fs-14"><span class="text--dark fw-medium"></span>{{ __($activeCategory->description) }}</p>
                                    </div>
                                    <div class="category-card-action">
                                        <button class="link category-offcanvas-toggle editCategory" data-category="{{ $activeCategory }}" data-image="{{ getImage(getFilePath('knowledgeCategory') . '/' . $activeCategory->image) }}" data-subcategory="0">
                                            @include('admin.partials.svg.edit')
                                        </button>
                                        <button class="link confirmationBtn" data-action="{{ route('admin.knowledge.category.delete', $activeCategory->id) }}" data-question="@lang('Are you sure to delete this category?')">
                                            @include('admin.partials.svg.delete')
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <div class="category-card-info">
                                <div class="category-card-info-item">
                                    <p class="title">@lang('Created by')</p>
                                    <p class="value">{{ __($activeCategory->admin->name) }}</p>
                                </div>
                                <div class="category-card-info-divider"></div>
                                <div class="category-card-info-item">
                                    <p class="title">@lang('Created at')</p>
                                    <p class="value">{{ showDateTime($activeCategory->created_at, 'd-M-Y') }}</p>
                                </div>
                                <div class="category-card-info-divider"></div>
                                <div class="category-card-info-item">
                                    <p class="title">@lang('No. of Subcategory')</p>
                                    <p class="value knowledge-category-value">{{ str_pad($activeCategory->subcategories->count(), 2, '0', STR_PAD_LEFT) }}</p>
                                </div>
                                <div class="category-card-info-divider"></div>
                                <div class="category-card-info-item">
                                    <p class="title">@lang('Total Articles')</p>
                                    <p class="value knowledge-category-value">{{ str_pad($activeCategory->knowledge->count(), 2, '0', STR_PAD_LEFT) }}</p>
                                </div>
                            </div>
                        </div>
                    @endif

                    <div class="category-view-wrapper">
                        <div class="category-view">
                            <div class="category-view-header">
                                <div class="flex-align gap-2">
                                    <span class="text--dark">
                                        @include('admin.partials.svg.knowledge_category')
                                    </span>
                                    <span class="text--dark">@lang('Category Name')</span>
                                </div>

                                <button class="text--base category-offcanvas-toggle addCategory" data-subcategory="0">@lang('Add')</button>
                            </div>

                            <div class="category-view-list">
                                @forelse ($categories as $category)
                                    <div class="category-view-item {{ $category->id == $activeCategory->id ? 'active' : '' }}">
                                        <a href="{{ url()->current() }}?category={{ $category->id }}" class="category-view-item-content">
                                            <p class="title">{{ __($category->name) }}</p>
                                            <p class="value">{{ $category->knowledge_count }} @lang('Articles')</p>
                                        </a>
                                        <div class="category-view-item-action">
                                            <div class="form--switch sm-style">
                                                <input type="checkbox" class="form-check-input categoryStatus" data-id="{{ $category->id }}" @checked($category->status) />
                                            </div>
                                            <div class="dropdown action-dropdown">
                                                <button class="dropdown-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                    <span class="icon"><i class="fa-solid fa-ellipsis-vertical"></i></span>
                                                </button>
                                                <ul class="dropdown-menu">
                                                    <li class="dropdown-item">
                                                        <button class="dropdown-link category-offcanvas-toggle editCategory" data-category="{{ $category }}" data-image="{{ getImage(getFilePath('knowledgeCategory') . '/' . $category->image) }}" data-subcategory="0">
                                                            <span class="icon">
                                                                @include('admin.partials.svg.edit')
                                                            </span>
                                                            <span class="text">@lang('Edit')</span>
                                                        </button>
                                                    </li>
                                                    <li class="dropdown-item">
                                                        <button class="dropdown-link confirmationBtn" data-action="{{ route('admin.knowledge.category.delete', $category->id) }}" data-question="@lang('Are you sure to delete this category?')">
                                                            <span class="icon">
                                                                @include('admin.partials.svg.delete')
                                                            </span>
                                                            <span class="text">@lang('Delete')</span>
                                                        </button>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <x-empty-message message="No category found" />
                                @endforelse
                            </div>
                        </div>
                        <div class="category-view">
                            <div class="category-view-header">
                                <div class="flex-align gap-2">
                                    <span class="text--dark">
                                        @include('admin.partials.svg.knowledge_category')
                                    </span>
                                    <span class="text--dark">@lang('Subcategory')</span>
                                </div>
                                @if ($activeCategory)
                                    <button class="text--base category-offcanvas-toggle addCategory" data-subcategory="1">@lang('Add')</button>
                                @endif
                            </div>

                            <div class="category-view-list">
                                @if ($activeCategory)
                                    @forelse ($activeCategory->subcategories as $subcategory)
                                        <div class="category-view-item">
                                            <div class="category-view-item-content">
                                                <p class="title">{{ __($subcategory->name) }}</p>
                                                <p class="value">{{ $subcategory->subcategories_knowledge_count }} @lang('Articles')</p>
                                            </div>
                                            <div class="category-view-item-action">
                                                <div class="form--switch sm-style">
                                                    <input type="checkbox" class="form-check-input categoryStatus" data-id="{{ $subcategory->id }}" @checked($subcategory->status) />
                                                </div>
                                                <div class="dropdown action-dropdown">
                                                    <button class="dropdown-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                                                        <span class="icon"><i class="fa-solid fa-ellipsis-vertical"></i></span>
                                                    </button>
                                                    <ul class="dropdown-menu">
                                                        <li class="dropdown-item">
                                                            <button class="dropdown-link category-offcanvas-toggle editCategory" data-category="{{ $subcategory }}" data-image="{{ getImage(getFilePath('knowledgeCategory') . '/' . $subcategory->image) }}" data-subcategory="1">
                                                                <span class="icon">
                                                                    @include('admin.partials.svg.edit')
                                                                </span>
                                                                <span class="text">@lang('Edit')</span>
                                                            </button>
                                                        </li>
                                                        <li class="dropdown-item">
                                                            <button class="dropdown-link confirmationBtn" data-action="{{ route('admin.knowledge.category.delete', $category->id) }}" data-question="@lang('Are you sure to delete this category?')">
                                                                <span class="icon">
                                                                    @include('admin.partials.svg.delete')
                                                                </span>
                                                                <span class="text">@lang('Delete')</span>
                                                            </button>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <x-empty-message message="No subcategory found" />
                                    @endforelse
                                @else
                                    <x-empty-message message="No subcategory found" />
                                @endif

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="add-category-offcanvas">
        <form class="categoryForm" method="POST" enctype="multipart/form-data">
            @csrf
            <input type="hidden" name="category_id">
            <div class="flex-between mb-20">
                <h5 class="title fw-semibold formTitle"></h5>
                <button class="add-category-offcanvas-close">
                    <i class="las la-times fs-18"></i>
                </button>
            </div>
            <div class="mb-20">
                <div class="image-uploader imageUploader style-two">
                    <label class="image-uploader-preview">
                        <img src="" class="imagePreview" alt="@lang('Preview')">
                        <span class="icon">
                            <i class="fa-solid fa-plus"></i>
                        </span>

                        <input type="file" name="image" class="imageInput d-none" accept=".png, .jpg, .jpeg">
                    </label>
                    <div class="image-uploader-content">
                        <p class="title">@lang('Category Image')</p>
                        <p class="note">
                            @lang('Supported formats'): @lang('PNG, JPG, JPEG.')
                        </p>
                    </div>
                </div>
            </div>
            <div class="mb-20">
                <div class="d-flex flex-wrap justify-content-between">
                    <label class="form--label style-two">@lang('Name')</label>
                    <a href="javascript:void(0)" class="buildSlug fs-14 fs-"><i class="las la-link"></i> @lang('Make Slug')</a>
                </div>
                <input type="text" class="form--control md-style" name="name" placeholder="@lang('Category Name')" required />
            </div>
            <div class="mb-20">
                <label class="form--label style-two">@lang('Slug')</label>
                <input type="text" class="form--control md-style" name="slug" placeholder="@lang('Category Slug')" required />
            </div>

            <div class="mb-20">
                <label class="form--label style-two">@lang('Description')</label>
                <textarea class="form--control sm-style" name="description" placeholder="@lang('Description')" required></textarea>
            </div>

            <div class="mt-5">
                <div class="flex-align gap-2">
                    <button class="btn btn--sm btn--base">@lang('Save')</button>
                    <button class="btn btn--sm btn-outline--secondary add-category-offcanvas-close" type="button">@lang('Cancel')</button>
                </div>
            </div>
        </form>
    </div>

    <x-confirmation-modal />

@endsection


@push('script')
    @include('admin.setting.status_change_script')

    <script>
        (function($) {
            "use strict";

            let imagePreview;
            let categoryForm = $('.categoryForm');
            let action = `{{ route('admin.knowledge.category.save') }}`;

            $('.addCategory').on('click', function() {
                categoryForm[0].reset();
                categoryForm.attr('action', action);
                imagePreview = `{{ getImage(null, getFileSize('knowledgeCategory')) }}`;
                $('.imagePreview').attr('src', imagePreview);

                if ($(this).data('subcategory')) {
                    $('.formTitle').text(`@lang('Add Subcategory of ') {{ $activeCategory->name ?? '' }}`);
                    $('[name=category_id]').val(`{{ $activeCategory->id ?? 0 }}`);
                } else {
                    $('.formTitle').text(`@lang('Add Category')`);
                    $('[name=category_id]').val(0);
                }
                $('[name=slug]').val('');
            });

            $('.editCategory').on('click', function() {
                categoryForm[0].reset();

                let category = $(this).data('category');
                let image = $(this).data('image') || `{{ getImage(null, getFileSize('knowledgeCategory')) }}`;

                categoryForm.attr('action', action + '/' + category.id);
                $('[name=category_id]').val(category.id ?? 0);
                $('[name=name]').val(category.name ?? '');
                $('[name=slug]').val(category.slug ?? '');
                $('[name=description]').val(category.description ?? '');
                $('.imagePreview').attr('src', image);

                if ($(this).data('subcategory')) {
                    $('.formTitle').text(`@lang('Update Subcategory')`);
                } else {
                    $('.formTitle').text(`@lang('Update Category')`);
                }
            });

            $('.buildSlug').on('click', function() {
                let categoryName = $(this).closest('.categoryForm').find('[name=name]').val().trim();
                let slug = categoryName.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]+/g, '').replace(/-+/g, '-').replace(/^-+|-+$/g, '');
                $(this).closest('.categoryForm').find('[name=slug]').val(slug);
            });

            handleStatusToggle('.categoryStatus', `{{ route('admin.knowledge.category.status', '') }}`, 'category');

        })(jQuery);
    </script>
@endpush
