@extends('root')
@section('title', 'Blog Categories')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Blog Categories',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.blog.posts.index'), 'label' => 'Blog'],
        ],
        'current' => 'Categories'
    ])

    <div class="row">
        <div class="col-md-8">
            <div class="card card-body">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h5 class="mb-0">Category List</h5>
                    <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#categoryModal" onclick="resetForm()">
                        <i class="ti ti-plus me-1"></i> Add Category
                    </button>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-striped" id="datatable">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Slug</th>
                                <th>Parent</th>
                                <th>Posts</th>
                                <th>Status</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Quick Info</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Total Categories</span>
                            <strong id="total-categories">0</strong>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>Active Categories</span>
                            <strong id="active-categories">0</strong>
                        </li>
                        <li class="list-group-item d-flex justify-content-between">
                            <span>With Posts</span>
                            <strong id="with-posts">0</strong>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Category Modal --}}
<div class="modal fade" id="categoryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-title">Add Category</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="category-form">
                <div class="modal-body">
                    <input type="hidden" id="category-id">
                    
                    <div class="mb-3">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="input-name" name="name" required>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Slug</label>
                        <input type="text" class="form-control" id="input-slug" name="slug" placeholder="auto-generate">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Parent Category</label>
                        <select class="form-select" id="input-parent" name="parent_id">
                            <option value="">None (Root)</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="input-description" name="description" rows="3"></textarea>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Meta Title</label>
                        <input type="text" class="form-control" id="input-meta-title" name="meta_title" maxlength="70">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Meta Description</label>
                        <textarea class="form-control" id="input-meta-description" name="meta_description" rows="2" maxlength="160"></textarea>
                    </div>

                    <div class="form-check form-switch">
                        <input class="form-check-input" type="checkbox" id="input-active" name="is_active" value="1" checked>
                        <label class="form-check-label" for="input-active">Active</label>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="btn-save">Save</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/js/blog-ajax.js') }}"></script>
<script>
var parentOptions = [];
var table;

function resetForm() {
    $('#category-id').val('');
    $('#input-name').val('');
    $('#input-slug').val('');
    $('#input-parent').val('');
    $('#input-description').val('');
    $('#input-meta-title').val('');
    $('#input-meta-description').val('');
    $('#input-active').prop('checked', true);
    $('#modal-title').text('Add Category');
    $('#category-form').find('.is-invalid').removeClass('is-invalid');
    $('#category-form').find('.invalid-feedback').remove();
    
    // Populate parent dropdown
    var options = '<option value="">None (Root)</option>';
    parentOptions.forEach(function(c) {
        options += '<option value="' + c.id + '">' + c.name + '</option>';
    });
    $('#input-parent').html(options);
}

$(document).ready(function() {
    // Initialize DataTable
    table = $('#datatable').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ route('admin.blog.categories.data') }}',
            dataSrc: function(res) {
                if (res.data) {
                    var total = res.data.length;
                    var active = res.data.filter(c => c.is_active).length;
                    var withPosts = res.data.filter(c => c.posts_count > 0).length;
                    
                    $('#total-categories').text(total);
                    $('#active-categories').text(active);
                    $('#with-posts').text(withPosts);

                    parentOptions = res.data.map(c => ({
                        id: c.id,
                        name: c.name,
                        parent_id: c.parent_id
                    }));
                }
                return res.data;
            }
        },
        columns: [
            { 
                data: 'name',
                render: function(data, type, row) {
                    var indent = row.parent_id ? '— ' : '';
                    return indent + '<strong>' + data + '</strong>';
                }
            },
            { data: 'slug' },
            { 
                data: 'parent_name',
                render: function(data) {
                    return data || '<span class="text-muted">-</span>';
                }
            },
            { data: 'posts_count' },
            {
                data: 'is_active',
                render: function(data) {
                    return data 
                        ? '<span class="badge bg-success">Active</span>'
                        : '<span class="badge bg-secondary">Inactive</span>';
                }
            },
            {
                data: null,
                orderable: false,
                searchable: false,
                render: function(data, type, row) {
                    return `
                        <div class="btn-group btn-group-sm">
                            <button class="btn btn-warning btn-edit" data-id="${row.id}">
                                <i class="ti ti-pencil"></i>
                            </button>
                            <button class="btn btn-danger btn-delete" data-id="${row.id}" ${row.posts_count > 0 ? 'disabled' : ''}>
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    `;
                }
            }
        ],
        order: [[0, 'asc']],
    });

    // Edit button
    $(document).on('click', '.btn-edit', function() {
        var id = $(this).data('id');
        var row = table.rows().data().toArray().find(r => r.id == id);
        
        if (row) {
            resetForm();
            $('#category-id').val(row.id);
            $('#input-name').val(row.name);
            $('#input-slug').val(row.slug);
            $('#input-parent').val(row.parent_id || '');
            $('#input-description').val(row.description || '');
            $('#input-meta-title').val(row.meta_title || '');
            $('#input-meta-description').val(row.meta_description || '');
            $('#input-active').prop('checked', row.is_active);
            $('#modal-title').text('Edit Category');
            
            // Remove self from parent options
            $('#input-parent option[value="' + row.id + '"]').remove();
            
            $('#categoryModal').modal('show');
        }
    });

    // Delete button using BlogAjax
    $(document).on('click', '.btn-delete', function() {
        var id = $(this).data('id');
        var url = '{{ route('admin.blog.categories.destroy', ':id') }}'.replace(':id', id);
        var btn = $(this);
        
        BlogAjax.delete(url, {
            btn: btn,
            reloadTable: table,
            confirmMessage: 'Yakin ingin menghapus category ini?'
        });
    });

    // Form submit using BlogAjax
    $('#category-form').on('submit', function(e) {
        e.preventDefault();
        
        var id = $('#category-id').val();
        var url = id 
            ? '{{ route('admin.blog.categories.update', ':id') }}'.replace(':id', id)
            : '{{ route('admin.blog.categories.store') }}';

        var data = {
            name: $('#input-name').val(),
            slug: $('#input-slug').val(),
            parent_id: $('#input-parent').val() || null,
            description: $('#input-description').val(),
            meta_title: $('#input-meta-title').val(),
            meta_description: $('#input-meta-description').val(),
            is_active: $('#input-active').prop('checked') ? 1 : 0
        };

        if (id) {
            data._method = 'PUT';
        }

        BlogAjax.post(url, data, {
            btn: $('#btn-save'),
            reloadTable: table,
            onSuccess: function() {
                $('#categoryModal').modal('hide');
            }
        });
    });
});
</script>
@endpush