@extends('backend.layout.main')

@section('title', 'Blog Category Management')

@section('content')
<div class="page-wrapper">
    <div class="content">

        <!-- PAGE HEADER -->
        <div class="d-md-flex page-breadcrumb mb-3">
            <div class="my-auto mb-2">
                <h2 class="mb-1">Blog Category Management</h2>
            </div>
            <div class="ms-auto">
                <button class="btn btn-primary"
                        data-bs-toggle="offcanvas"
                        data-bs-target="#categoryOffcanvas">
                    <i class="fa fa-plus me-2"></i> Add Category
                </button>
            </div>
        </div>

        <!-- CATEGORY TABLE -->
        <div class="card mb-3">
            <div class="card-body">
                <table class="table table-bordered" id="categoryTable">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Title</th>
                            <th>Slug</th>
                            <th>Status</th>
                            <th width="120">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>

        <!-- OFFCANVAS FORM -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="categoryOffcanvas">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title">Add / Update Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
            </div>

            <div class="offcanvas-body">
                <form id="categoryForm">
                    @csrf
                    <input type="hidden" name="id" id="id">

                    <div class="mb-3">
                        <label>Category Title</label>
                        <input type="text"
                               name="title"
                               id="title"
                               class="form-control"
                               placeholder="Enter category title">
                    </div>

                    <div class="d-flex gap-2 mt-3">
                        <button type="button"
                                class="btn btn-secondary w-50"
                                data-bs-dismiss="offcanvas">
                            Cancel
                        </button>
                        <button type="submit"
                                class="btn btn-primary w-50"
                                id="submitBtn">
                            Save
                        </button>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>
@endsection

@push('scripts')
<script>
let categoryTable;

$(document).ready(function () {

    fetchCategories();

    function initDataTable() {
        categoryTable = $('#categoryTable').DataTable({
            destroy: true,
            responsive: true,
            pageLength: 10,
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'collection',
                    text: '<i class="fa fa-download me-1"></i> Export',
                    className: 'btn btn-primary',
                    buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
                },
                {
                    extend: 'colvis',
                    text: '<i class="fa fa-columns me-1"></i> Columns',
                    className: 'btn btn-secondary'
                }
            ]
        });
    }

    function fetchCategories() {
        $.get("{{ route('admin.blogcategories.fetch') }}", function (res) {

            let rows = '';
            $.each(res.data, function (i, item) {
                rows += `
                <tr>
                    <td>${item.id}</td>
                    <td>${item.title}</td>
                    <td>${item.slug ?? '-'}</td>
                    <td class="text-center">
                        <button class="toggle-status btn btn-sm ${item.status ? 'btn-success':'btn-danger'}"
                                data-id="${item.id}">
                            ${item.status ? 'Active':'Inactive'}
                        </button>
                    </td>
                    <td>
                        <button class="btn btn-sm edit"
                                data-item='${JSON.stringify(item)}'>
                            <i class="fa fa-edit text-info"></i>
                        </button>
                        <button class="btn btn-sm delete"
                                data-id="${item.id}">
                            <i class="fa fa-trash text-danger"></i>
                        </button>
                    </td>
                </tr>`;
            });

            // Destroy old datatable
            if ($.fn.DataTable.isDataTable('#categoryTable')) {
                categoryTable.destroy();
            }

            $('#categoryTable tbody').html(rows);

            // Re-init datatable
            initDataTable();
        });
    }

    // SUBMIT FORM
    $('#categoryForm').submit(function (e) {
        e.preventDefault();

        $.post("{{ route('admin.blogcategories.store') }}",
            $(this).serialize(),
            function (res) {
                toastr.success(res.message);
                $('#categoryForm')[0].reset();
                $('#id').val('');

                let canvas = document.getElementById('categoryOffcanvas');
                bootstrap.Offcanvas.getInstance(canvas).hide();

                fetchCategories();
            }
        );
    });

    // EDIT
    $(document).on('click', '.edit', function () {
        let item = $(this).data('item');
        $('#id').val(item.id);
        $('#title').val(item.title);
        $('#submitBtn').text('Update');

        let canvas = new bootstrap.Offcanvas('#categoryOffcanvas');
        canvas.show();
    });

    // DELETE
    $(document).on('click', '.delete', function () {
        if (!confirm('Delete this category?')) return;

        $.ajax({
            url: "{{ route('admin.blogcategories.delete') }}",
            type: "DELETE",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                fetchCategories();
            }
        });
    });

    // TOGGLE STATUS
    $(document).on('click', '.toggle-status', function () {
        $.ajax({
            url: "{{ route('admin.blogcategories.toggle') }}",
            type: "PATCH",
            data: {
                _token: '{{ csrf_token() }}',
                id: $(this).data('id')
            },
            success: function (res) {
                toastr.success(res.message);
                fetchCategories();
            }
        });
    });

});
</script>
@endpush