{% extends 'dashboard/base_dashboard.html' %}
{% load static %}
{% load humanize %}

{% block script_css %}
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css">
{% endblock script_css %}

{% block main_container %}
<div class="container">
    <div class="page-inner">
        <div class="d-flex align-items-left align-items-md-center flex-column flex-md-row pt-2 pb-4">
            <div>
                <h3 class="fw-bold mb-3">Dashboard</h3>
            </div>
            <div class="ms-md-auto py-2 py-md-0">
                <a href="{% url 'list_users' %}" class="btn btn-label-info btn-round me-2">Manage Users</a>
                <a href="{% url 'create_post' %}" class="btn btn-primary btn-round">Add Posts</a>
            </div>
        </div>

        {% include 'dashboard/top_summary.html' %}

        <div class="row">
            <div class="col-md-12">
                <div class="card card-round">
                    <div class="card-header">
                        <div class="card-head-row card-tools-still-right">
                            <div class="card-title">Posts</div>
                            <div class="card-tools">
                                <div class="input-group">
                                    <input
                                        type="text"
                                        id="custom-search"
                                        placeholder="Search ..."
                                        class="form-control"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Add forms for Category and Tag creation -->
<h3>Create a New Category</h3>
<form id="categoryForm">
    <input type="text" name="name" placeholder="Category Name" required>
    <textarea name="description" placeholder="Category Description"></textarea>
    <button type="submit">Create Category</button>
    <div id="categoryFormErrors"></div> <!-- To display form errors -->
</form>

<h3>Create a New Tag</h3>
<form id="tagForm">
    <input type="text" name="name" placeholder="Tag Name" required>
    <button type="submit">Create Tag</button>
    <div id="tagFormErrors"></div> <!-- To display form errors -->
</form>

                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <h3>Categories</h3>
                            <!-- Category Table -->
                            <table id="category-table" class="table table-striped align-items-center mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col" class="text-left">Name</th>
                                        <th scope="col" class="text-right">Slug</th>
                                        <th scope="col" class="text-right">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="category-list">
                                    <!-- Category rows will be inserted here via AJAX -->
                                </tbody>
                            </table>

                            <h3>Tags</h3>
                            <!-- Tag Table -->
                            <table id="tag-table" class="table table-striped align-items-center mb-0">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col" class="text-left">Name</th>
                                        <th scope="col" class="text-right">Slug</th>
                                        <th scope="col" class="text-right">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="tag-list">
                                    <!-- Tag rows will be inserted here via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock main_container %}

{% block script_js %}
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
<script>
    $(document).ready(function() {
    // Initialize DataTables for Categories
    $('#category-table').DataTable({
        "pageLength": 10,
        "lengthMenu": [10, 25, 50, 100],
        "ordering": true,
        "searching": true,
        "language": {
            "search": "",
            "searchPlaceholder": "Search Categories..."
        },
        "dom": 'rt<"bottom"lp><"clear">',
        "columnDefs": [
            { "orderable": false, "targets": 2 } // Disable ordering on the "Action" column
        ]
    });

    // Initialize DataTables for Tags
    $('#tag-table').DataTable({
        "pageLength": 10,
        "lengthMenu": [10, 25, 50, 100],
        "ordering": true,
        "searching": true,
        "language": {
            "search": "",
            "searchPlaceholder": "Search Tags..."
        },
        "dom": 'rt<"bottom"lp><"clear">',
        "columnDefs": [
            { "orderable": false, "targets": 2 } // Disable ordering on the "Action" column
        ]
    });

    // Fetch Categories and Tags after initializing DataTables
    fetchCategories();
    fetchTags();
});

// Function to fetch and display categories
function fetchCategories() {
    $.get('/categories/', function(data) {
        let categoryTable = $('#category-table').DataTable();
        categoryTable.clear(); // Clear any existing data
        if (data.categories.length > 0) {
            data.categories.forEach(function(category) {
                categoryTable.row.add([
                    category.name,
                    category.slug,
                    `<button onclick="deleteCategory(${category.id})">Delete</button>`
                ]).draw();
            });
        }
    });
}

// Function to fetch and display tags
function fetchTags() {
    $.get('/tags/', function(data) {
        let tagTable = $('#tag-table').DataTable();
        tagTable.clear(); // Clear any existing data
        if (data.tags.length > 0) {
            data.tags.forEach(function(tag) {
                tagTable.row.add([
                    tag.name,
                    tag.slug,
                    `<button onclick="deleteTag(${tag.id})">Delete</button>`
                ]).draw();
            });
        }
    });
}

// Delete Category function (AJAX)
function deleteCategory(id) {
    if (confirm('Are you sure you want to delete this category?')) {
        $.post(`/categories/${id}/delete/`, function(response) {
            if (response.success) {
                fetchCategories(); // Refresh category list after deletion
            } else {
                alert('Failed to delete category.');
            }
        });
    }
}

// Delete Tag function (AJAX)
function deleteTag(id) {
    if (confirm('Are you sure you want to delete this tag?')) {
        $.post(`/tags/${id}/delete/`, function(response) {
            if (response.success) {
                fetchTags(); // Refresh tag list after deletion
            } else {
                alert('Failed to delete tag.');
            }
        });
    }
}

</script>

<!-- jQuery for handling form submissions -->
<script>
    $(document).ready(function() {
        // Handle category form submission
        $('#categoryForm').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: "{% url 'category_create' %}",  // Ensure the URL matches the view
                data: $(this).serialize(),
                success: function(response) {
                    if (response.success) {
                        alert('Category created successfully!');
                        // Optionally reload categories list via AJAX
                    } else {
                        // Display form errors
                        let errors = '';
                        $.each(response.errors, function(field, error) {
                            errors += field + ': ' + error + '<br>';
                        });
                        $('#categoryFormErrors').html(errors);
                    }
                },
                error: function() {
                    alert('An error occurred while creating the category.');
                }
            });
        });

        // Handle tag form submission
        $('#tagForm').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: "{% url 'tag_create' %}",
                data: $(this).serialize(),
                success: function(response) {
                    if (response.success) {
                        alert('Tag created successfully!');
                        // Optionally reload tags list via AJAX
                    } else {
                        let errors = '';
                        $.each(response.errors, function(field, error) {
                            errors += field + ': ' + error + '<br>';
                        });
                        $('#tagFormErrors').html(errors);
                    }
                },
                error: function() {
                    alert('An error occurred while creating the tag.');
                }
            });
        });
    });
</script>
{% endblock script_js %}