{% extends "industry_reforged/base.html" %}
{% load i18n humanize %}
{% load industry_tags %}

{% block details %}
<div class="container-fluid">
    <div class="row mb-3">
        <div class="col-12 d-flex justify-content-between align-items-center">
            <h3>{% trans "Industrialist Dashboard" %}</h3>
            <a href="{% url 'industry_reforged:industrialist_leaderboard' %}" class="btn btn-success"><i
                    class="fas fa-trophy"></i> {% trans "Leaderboards & History" %}</a>
        </div>
    </div>

    <div class="card border-info bg-dark mb-4 shadow-sm" style="border: 1px solid #17a2b8;">
        <div class="card-body pb-2">
            <h4 class="card-title text-white mb-3"><i class="fas fa-bullhorn text-warning"></i> {% trans "Message of the Day & Industry Status" %}</h4>

            {% if motd %}
                <p class="mb-3 text-white fs-5">{{ motd.message|linebreaksbr }}</p>
                <div class="text-end mt-1 mb-2">
                    <small class="text-muted">{% trans "Last updated:" %} <span class="numeric">{{ motd.updated_at|date:"Y-m-d H:i" }}</span></small>
                </div>
            {% else %}
                <p class="mb-3 text-white fs-5 fst-italic">{% trans "Welcome to the Industrialist Dashboard. Happy building!" %}</p>
            {% endif %}

            <div class="text-center mt-2 mb-1">
                <span class="text-warning fst-italic"><i class="fas fa-quote-left fa-sm me-2 opacity-50"></i>{{ dynamic_motd_stats.slogan }}<i class="fas fa-quote-right fa-sm ms-2 opacity-50"></i></span>
            </div>

            <hr style="border-color: rgba(255,255,255,0.1);">

            <div class="row text-center mt-3">
                <div class="col-6 col-md-3 mb-3">
                    <h5 class="text-muted mb-1" style="font-size: 0.9rem;"><i class="fas fa-industry"></i> {% trans "Orders in Production" %}</h5>
                    <h3 class="text-primary numeric mb-0">{{ dynamic_motd_stats.orders_in_production }}</h3>
                </div>
                <div class="col-6 col-md-3 mb-3">
                    <h5 class="text-muted mb-1" style="font-size: 0.9rem;"><i class="fas fa-clipboard-list"></i> {% trans "Open Job Market" %}</h5>
                    <h3 class="text-warning numeric mb-0">{{ dynamic_motd_stats.open_tasks }}</h3>
                </div>
                <div class="col-6 col-md-3 mb-3">
                    <h5 class="text-muted mb-1" style="font-size: 0.9rem;"><i class="fas fa-cogs"></i> {% trans "Active Corp Jobs" %}</h5>
                    <h3 class="text-info numeric mb-0">{{ dynamic_motd_stats.active_jobs }}</h3>
                </div>
                <div class="col-6 col-md-3 mb-3">
                    <h5 class="text-muted mb-1" style="font-size: 0.9rem;"><i class="fas fa-coins"></i> {% trans "Value in Progress" %}</h5>
                    <h4 class="text-success numeric mb-0">{{ dynamic_motd_stats.value_in_progress|eve_isk }}</h4>
                </div>
            </div>
        </div>
    </div>

    <div class="card border-0 mb-4 bg-transparent">
        <div class="card-header p-0 border-bottom-0">
            <ul class="nav nav-tabs" id="industrialist-tabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="jobmarket-tab" data-bs-toggle="tab" data-bs-target="#jobmarket-pane" type="button" role="tab" aria-controls="jobmarket-pane" aria-selected="true">Job Market</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="member-tab" data-bs-toggle="tab" data-bs-target="#member-pane" type="button" role="tab" aria-controls="member-pane" aria-selected="false">Member Tasks</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="corporate-tab" data-bs-toggle="tab" data-bs-target="#corporate-pane" type="button" role="tab" aria-controls="corporate-pane" aria-selected="false">Corporate Jobs</button>
                </li>
            </ul>
        </div>
        <div class="card-body p-0 mt-3">
            <div class="tab-content" id="industrialist-tabsContent">

                <!-- TAB 1: JOB MARKET -->
                <div class="tab-pane fade show active" id="jobmarket-pane" role="tabpanel" aria-labelledby="jobmarket-tab" tabindex="0">
                    <div class="row">
                        <div class="col-12 mb-4">
                            <div class="card border-0 h-100">
                                <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
                                    <h4 class="card-title mb-0"><i class="fas fa-store"></i> {% trans "Job Market (Unclaimed)" %}</h4>
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="input-group input-group-sm" style="width: 250px;">
                                            <span class="input-group-text bg-dark border-secondary text-muted"><i class="fas fa-search"></i></span>
                                            <input type="text" id="marketSearchInput" class="form-control bg-dark border-secondary text-white" placeholder="{% trans 'Search item name...' %}">
                                        </div>
                                        <button type="button" onclick="submitShoppingList('unclaimed')" class="btn btn-sm btn-warning"><i class="fas fa-shopping-cart"></i> BOM</button>
                                        <div class="vr bg-secondary mx-1"></div>
                                        <form method="post" action="{% url 'industry_reforged:bulk_claim_tasks' %}" id="bulkClaimForm" class="d-flex align-items-center gap-1 mb-0">
                                            {% csrf_token %}
                                            <select name="character_id" class="form-select form-select-sm bg-dark text-white border-secondary w-auto" required>
                                                <option value="" disabled selected>{% trans "Select Character" %}</option>
                                                {% for ownership in request.user.character_ownerships.all %}
                                                <option value="{{ ownership.character.character_id }}">{{ ownership.character.character_name }}</option>
                                                {% endfor %}
                                            </select>
                                            <button type="button" onclick="submitBulkClaim()" class="btn btn-sm btn-success"><i class="fas fa-hand-holding-usd"></i> {% trans "Claim Selected" %}</button>
                                        </form>
                                    </div>
                                </div>
                                <div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
                                    <div class="table-responsive" id="unclaimedTableContainer">
                                        <table class="table table-striped table-hover m-0">
                                            <thead>
                                                <tr>
                                                    <th style="width: 40px;" class="text-center"><input type="checkbox" onclick="toggleSelectAllUnclaimed(this)"></th>
                                                    <th>{% trans "Item" %}</th>
                                                    <th class="text-end">{% trans "Qty" %}</th>
                                                    <th class="text-end">{% trans "Reward Value" %}</th>
                                                    <th class="text-end">{% trans "Action" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for task in unclaimed_tasks %}
                                                <tr>
                                                    <td class="text-center">
                                                        <input type="checkbox" name="task_ids" value="{{ task.id }}" class="unclaimed-checkbox" data-task-id="{{ task.id }}" data-parent-id="{{ task.bom_parent_id|default:'' }}" onchange="toggleTaskAndChildren(this)">
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center" style="padding-left: {% widthratio task.depth|default:0 1 25 %}px;">
                                                            {% if task.depth > 0 %}
                                                                <i class="fas fa-level-up-alt fa-rotate-90 text-muted me-2" style="font-size: 0.8rem;"></i>
                                                            {% endif %}
                                                            <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';" src="https://images.evetech.net/types/{{ task.item_type.id }}/icon?size=32"
                                                                alt="{{ task.item_type.name }}" width="24" height="24"
                                                                class="me-2 rounded">
                                                            <div>
                                                                <span>{{ task.item_type.name }}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-end numeric">{{ task.quantity }}</td>
                                                    <td class="text-end numeric text-warning">
                                                        {{ task.builder_reward|eve_isk }}
                                                    </td>
                                                    <td class="text-end">
                                                        <form method="post" action="{% url 'industry_reforged:claim_task' task.id %}"
                                                            class="d-inline">
                                                            {% csrf_token %}
                                                            <select name="character_id"
                                                                class="form-select form-select-sm d-inline w-auto me-1 bg-dark text-white border-secondary"
                                                                required>
                                                                {% for ownership in request.user.character_ownerships.all %}
                                                                <option value="{{ ownership.character.character_id }}">
                                                                    {{ownership.character.character_name }}</option>
                                                                {% endfor %}
                                                            </select>
                                                            <button type="submit" class="btn btn-sm btn-success">Claim</button>
                                                        </form>
                                                    </td>
                                                </tr>
                                                {% empty %}
                                                <tr>
                                                    <td colspan="5" class="text-center text-muted py-4">No open tasks available. Good
                                                        job!</td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- End Row -->
                </div> <!-- End Tab 1 -->

                <!-- TAB 2: MEMBER TASKS -->
                <div class="tab-pane fade" id="member-pane" role="tabpanel" aria-labelledby="member-tab" tabindex="0">
                    <div class="row">
                        <!-- My Active Production -->
                        <div class="col-12 mb-4">
                            <div class="card border-0 h-100">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h4 class="card-title mb-0"><i class="fas fa-hammer"></i> {% trans "My Active Production" %}</h4>
                                    <div class="d-flex align-items-center gap-2">
                                        <button type="button" onclick="submitShoppingList('active')" class="btn btn-sm btn-warning"><i class="fas fa-shopping-cart"></i> BOM</button>
                                        <div class="vr bg-secondary mx-1"></div>
                                        <form method="post" action="{% url 'industry_reforged:bulk_complete_tasks' %}" id="bulkCompleteForm" class="d-flex align-items-center mb-0">
                                            {% csrf_token %}
                                            <button type="button" onclick="submitBulkComplete()" class="btn btn-sm btn-success"><i class="fas fa-check-double"></i> {% trans "Complete Selected" %}</button>
                                        </form>
                                    </div>
                                </div>
                                <div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
                                    <div class="table-responsive" id="activeTableContainer">
                                        <table class="table table-striped table-hover m-0">
                                            <thead>
                                                <tr>
                                                    <th style="width: 40px;" class="text-center"><input type="checkbox" onclick="toggleSelectAllActive(this)"></th>
                                                    <th>{% trans "Item" %}</th>
                                                    <th class="text-end">{% trans "Qty" %}</th>
                                                    <th>{% trans "Assigned To" %}</th>
                                                    <th class="text-end">{% trans "Reward" %}</th>
                                                    <th class="text-end">{% trans "Action" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for task in my_tasks %}
                                                <tr>
                                                    <td class="text-center">
                                                        <input type="checkbox" name="task_ids" value="{{ task.id }}" class="active-checkbox" data-task-id="{{ task.id }}" data-parent-id="{{ task.bom_parent_id|default:'' }}" onchange="toggleTaskAndChildrenActive(this)">
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center" style="padding-left: {% widthratio task.depth|default:0 1 25 %}px;">
                                                            {% if task.depth > 0 %}
                                                                <i class="fas fa-level-up-alt fa-rotate-90 text-muted me-2" style="font-size: 0.8rem;"></i>
                                                            {% endif %}
                                                            <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';" src="https://images.evetech.net/types/{{ task.item_type.id }}/icon?size=32"
                                                                alt="{{ task.item_type.name }}" width="24" height="24"
                                                                class="me-2 rounded">
                                                            <div>
                                                                <span>{{ task.item_type.name }}</span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-end numeric">{{ task.quantity }}</td>
                                                    <td>{{ task.assigned_to.character_name }}</td>
                                                    <td class="text-end numeric text-warning">{{ task.builder_reward|eve_isk }}</td>
                                                    <td class="text-end">
                                                        <form method="post" action="{% url 'industry_reforged:complete_task' task.id %}"
                                                            class="d-inline">
                                                            {% csrf_token %}
                                                            {% if task.incomplete_children_count > 0 %}
                                                            <button type="submit" class="btn btn-sm btn-secondary" disabled title="{% trans 'Sub-tasks must be completed first' %}"><i
                                                                    class="fas fa-times"></i> Complete</button>
                                                            {% else %}
                                                            <button type="submit" class="btn btn-sm btn-primary"><i
                                                                    class="fas fa-check"></i> Complete</button>
                                                            {% endif %}
                                                        </form>
                                                    </td>
                                                </tr>
                                                {% empty %}
                                                <tr>
                                                    <td colspan="6" class="text-center text-muted py-4">You have no active tasks. Claim
                                                        some from the Job Market!</td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- My Completed Tasks -->
                        <div class="col-12 mb-4">
                            <div class="card border-0 h-100">
                                <div class="card-header">
                                    <h4 class="card-title mb-0"><i class="fas fa-check-circle"></i> {% trans "My Completed Tasks" %}</h4>
                                </div>
                                <div class="card-body p-0" style="max-height: 500px; overflow-y: auto;">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover m-0">
                                            <thead>
                                                <tr>
                                                    <th>{% trans "Item" %}</th>
                                                    <th class="text-end">{% trans "Qty" %}</th>
                                                    <th>{% trans "Assigned To" %}</th>
                                                    <th class="text-end">{% trans "Reward Earned" %}</th>
                                                    <th class="text-end">{% trans "Completed At" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for task in my_completed_tasks %}
                                                <tr>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';" src="https://images.evetech.net/types/{{ task.item_type.id }}/icon?size=32"
                                                                alt="{{ task.item_type.name }}" width="24" height="24"
                                                                class="me-2 rounded opacity-50">
                                                            <div>
                                                                <span class="text-muted text-decoration-line-through">{{ task.item_type.name }}</span>
                                                                {% if task.bom_parent %}
                                                                <br><small class="text-muted"><i class="fas fa-level-up-alt fa-rotate-90"></i> {% trans "Sub-component of" %} {{ task.bom_parent.item_type.name }}</small>
                                                                {% endif %}
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-end numeric text-muted">{{ task.quantity }}</td>
                                                    <td class="text-muted">{{ task.assigned_to.character_name }}</td>
                                                    <td class="text-end numeric text-success">{{ task.builder_reward|eve_isk }}</td>
                                                    <td class="text-end text-muted numeric">{{ task.completed_at|date:"Y-m-d H:i" }}</td>
                                                </tr>
                                                {% empty %}
                                                <tr>
                                                    <td colspan="4" class="text-center text-muted py-4">No recently completed tasks.</td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- End Row -->
                </div> <!-- End Tab 2 -->

                <!-- TAB 3: CORPORATE JOBS -->
                <div class="tab-pane fade" id="corporate-pane" role="tabpanel" aria-labelledby="corporate-tab" tabindex="0">
                    <div class="row">
                        <div class="col-12 mb-4">
                            <div class="card border-0 mb-4">
                                <div class="card-header">
                                    <h4 class="card-title mb-0"><i class="fas fa-industry"></i> {% trans "Corp Active Jobs Overview" %}
                                    </h4>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover m-0">
                                            <thead>
                                                <tr>
                                                    <th>{% trans "Product" %}</th>
                                                    <th class="text-end">{% trans "Runs" %}</th>
                                                    <th>{% trans "Installer" %}</th>
                                                    <th>{% trans "End Date" %}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for job in corp_active_jobs %}
                                                <tr>
                                                    <td>
                                                        {% if job.product_type %}
                                                        <div class="d-flex align-items-center">
                                                            <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';" src="https://images.evetech.net/types/{{ job.product_type.id }}/icon?size=32"
                                                                alt="{{ job.product_type.name }}" width="24" height="24"
                                                                class="me-2 rounded">
                                                            <span>{{ job.product_type.name }}</span>
                                                        </div>
                                                        {% else %}
                                                        <span class="text-muted">Unknown</span>
                                                        {% endif %}
                                                    </td>
                                                    <td class="text-end numeric">{{ job.runs }}</td>
                                                    <td>{{ job.installer.character_name|default:"Unknown" }}</td>
                                                    <td class="numeric">{{ job.end_date|date:"Y-m-d H:i" }}</td>
                                                </tr>
                                                {% empty %}
                                                <tr>
                                                    <td colspan="4" class="text-center text-muted">No active corp jobs found.</td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> <!-- End Row -->
                </div> <!-- End Tab 3 -->

            </div> <!-- End Tab Content -->
        </div> <!-- End Card Body -->
    </div> <!-- End Card wrapper -->
</div> <!-- End Container Fluid -->

<!-- Shopping List Error Modal -->
<div class="modal fade" id="shoppingListErrorModal" tabindex="-1" aria-labelledby="shoppingListErrorModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="shoppingListErrorModalLabel">{% trans "Selection Required" %}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {% trans "Please select at least one task to generate a Shopping List." %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{% trans "OK" %}</button>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Restore active tab from sessionStorage
        var activeTab = sessionStorage.getItem('industrialistActiveTab');
        if (activeTab) {
            var triggerEl = document.querySelector('button[data-bs-target="' + activeTab + '"]');
            if (triggerEl) {
                var tab = new bootstrap.Tab(triggerEl);
                tab.show();
            }
        }

        // Save active tab to sessionStorage when changed
        var tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]');
        tabEls.forEach(function(el) {
            el.addEventListener('shown.bs.tab', function (event) {
                sessionStorage.setItem('industrialistActiveTab', event.target.getAttribute('data-bs-target'));
            });
        });
    });

    function toggleSelectAllUnclaimed(source) {
        checkboxes = document.getElementsByClassName('unclaimed-checkbox');
        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
        }
    }
    function toggleSelectAllActive(source) {
        checkboxes = document.getElementsByClassName('active-checkbox');
        for(var i=0, n=checkboxes.length;i<n;i++) {
            checkboxes[i].checked = source.checked;
        }
    }

    function submitShoppingList(type) {
        var checkboxes = document.getElementsByClassName(type + '-checkbox');
        var selectedIds = [];
        for(var i=0, n=checkboxes.length;i<n;i++) {
            if(checkboxes[i].checked) {
                selectedIds.push(checkboxes[i].value);
            }
        }

        if (selectedIds.length === 0) {
            var errorModal = new bootstrap.Modal(document.getElementById('shoppingListErrorModal'));
            errorModal.show();
            return;
        }

        var url = "{% url 'industry_reforged:shopping_list' %}?task_ids=" + selectedIds.join("&task_ids=");
        window.location.href = url;
    }

    document.addEventListener("DOMContentLoaded", function() {
        const searchInput = document.getElementById('marketSearchInput');
        if(searchInput) {
            searchInput.addEventListener('keyup', function() {
                const filter = this.value.toLowerCase();
                const table = document.getElementById('unclaimedTableContainer').querySelector('table');
                const trs = table.querySelectorAll('tbody tr');

                trs.forEach(function(tr) {
                    const td = tr.querySelectorAll('td')[1];
                    if (td) {
                        const text = td.textContent || td.innerText;
                        if (text.toLowerCase().indexOf(filter) > -1) {
                            tr.style.display = "";
                        } else {
                            tr.style.display = "none";
                        }
                    }
                });
            });
        }
    });

    function toggleTaskAndChildren(checkbox) {
        const taskId = checkbox.getAttribute('data-task-id');
        const isChecked = checkbox.checked;
        const children = document.querySelectorAll(`input.unclaimed-checkbox[data-parent-id="${taskId}"]`);
        children.forEach(child => {
            if (child.checked !== isChecked) {
                child.checked = isChecked;
                toggleTaskAndChildren(child);
            }
        });
    }

    function submitBulkClaim() {
        var checkboxes = document.getElementsByClassName('unclaimed-checkbox');
        var selectedIds = [];
        for(var i=0, n=checkboxes.length;i<n;i++) {
            if(checkboxes[i].checked) {
                selectedIds.push(checkboxes[i].value);
            }
        }

        if (selectedIds.length === 0) {
            var errorModal = new bootstrap.Modal(document.getElementById('shoppingListErrorModal'));
            document.getElementById('shoppingListErrorModalLabel').innerText = "{% trans 'Selection Required' %}";
            document.querySelector('#shoppingListErrorModal .modal-body').innerText = "{% trans 'Please select at least one task to claim.' %}";
            errorModal.show();
            return;
        }

        var form = document.getElementById('bulkClaimForm');
        var charSelect = form.querySelector('select[name="character_id"]');
        if (!charSelect.value) {
            var errorModal = new bootstrap.Modal(document.getElementById('shoppingListErrorModal'));
            document.getElementById('shoppingListErrorModalLabel').innerText = "{% trans 'Character Required' %}";
            document.querySelector('#shoppingListErrorModal .modal-body').innerText = "{% trans 'Please select a character to claim the tasks for.' %}";
            errorModal.show();
            return;
        }

        // Add hidden inputs for selected tasks
        selectedIds.forEach(function(id) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'task_ids';
            input.value = id;
            form.appendChild(input);
        });

        form.submit();
    }

    function toggleTaskAndChildrenActive(checkbox) {
        const taskId = checkbox.getAttribute('data-task-id');
        const isChecked = checkbox.checked;
        const children = document.querySelectorAll(`input.active-checkbox[data-parent-id="${taskId}"]`);
        children.forEach(child => {
            if (child.checked !== isChecked) {
                child.checked = isChecked;
                toggleTaskAndChildrenActive(child);
            }
        });
    }

    function submitBulkComplete() {
        var checkboxes = document.getElementsByClassName('active-checkbox');
        var selectedIds = [];
        for(var i=0, n=checkboxes.length;i<n;i++) {
            if(checkboxes[i].checked) {
                selectedIds.push(checkboxes[i].value);
            }
        }

        if (selectedIds.length === 0) {
            var errorModal = new bootstrap.Modal(document.getElementById('shoppingListErrorModal'));
            document.getElementById('shoppingListErrorModalLabel').innerText = "{% trans 'Selection Required' %}";
            document.querySelector('#shoppingListErrorModal .modal-body').innerText = "{% trans 'Please select at least one task to complete.' %}";
            errorModal.show();
            return;
        }

        var form = document.getElementById('bulkCompleteForm');

        // Add hidden inputs for selected tasks
        selectedIds.forEach(function(id) {
            var input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'task_ids';
            input.value = id;
            form.appendChild(input);
        });

        form.submit();
    }
</script>
{% endblock %}