{% 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-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="overview-tab" data-bs-toggle="tab"
                        data-bs-target="#overview-pane" type="button" role="tab" aria-controls="overview-pane"
                        aria-selected="true"><i class="fas fa-chart-bar"></i> Overview</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="jobmarket-tab" data-bs-toggle="tab"
                        data-bs-target="#jobmarket-pane" type="button" role="tab" aria-controls="jobmarket-pane"
                        aria-selected="false">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">Claimed Jobs</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="summary-tab" data-bs-toggle="tab" data-bs-target="#summary-pane"
                        type="button" role="tab" aria-controls="summary-pane" aria-selected="false">Build Steps</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>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="payout-tab" data-bs-toggle="tab" data-bs-target="#payout-pane"
                        type="button" role="tab" aria-controls="payout-pane" aria-selected="false"><i class="fas fa-file-invoice-dollar"></i> Payment Summary</button>
                </li>
            </ul>
        </div>
        <div class="card-body p-0 mt-3">
            <div class="tab-content" id="industrialist-tabsContent">

                <!-- TAB 0: OVERVIEW -->
                <div class="tab-pane fade show active" id="overview-pane" role="tabpanel" aria-labelledby="overview-tab" tabindex="0">
                    <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 and motd.message %}
                            <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>
                            {% endif %}

                            <div class="text-center mt-3 mb-2">
                                <h5 class="text-warning fst-italic fw-bold mb-0">
                                    <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>
                                </h5>
                            </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>

                <!-- TAB 1: JOB MARKET -->
                <div class="tab-pane fade" id="jobmarket-pane" role="tabpanel"
                    aria-labelledby="jobmarket-tab" tabindex="0">
                    <div class="card border-0 mb-4 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">


                                        <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 %}

                                            <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">
                                    <div class="table-responsive" id="unclaimedTableContainer">
                                        <table id="jobmarket-table" class="table table-striped table-hover m-0 w-100">
                                            <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 data-task-id="{{ task.id }}">
                                                    <td class="text-center">
                                                        <input type="checkbox" name="task_ids" value="{{ task.id }}"
                                                            class="unclaimed-checkbox" data-task-id="{{ task.id }}">
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <img onerror="handleImageFallback(this, {{ task.item_type.id }})"
                                                                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><span class="badge bg-secondary me-1">{{ task.activity_name }}</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">
                                                        {% if task.depth == 0 %}
                                                        <form method="post"
                                                            action="{% url 'industry_reforged:claim_task' task.id %}"
                                                            class="d-inline">
                                                            {% csrf_token %}
                                                            <button type="submit"
                                                                class="btn btn-sm btn-success">{% trans "Claim" %}</button>
                                                        </form>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                    </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="card border-0 mb-4 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-tasks"></i> {% trans "Claimed Jobs" %}</h4>
                                    <div class="d-flex align-items-center gap-2">
                                        <div id="list-view-controls" class="d-flex align-items-center gap-2">
                                            <label for="member-task-view-select"
                                                class="text-muted small mb-0 d-none d-md-block"><i
                                                    class="fas fa-filter"></i></label>
                                            <select id="member-task-view-select"
                                                class="form-select form-select-sm bg-dark text-white border-secondary w-auto"
                                                onchange="toggleMemberTaskView()">
                                                <option value="active">{% trans "Open (Active) Tasks Only" %}</option>
                                                <option value="completed">{% trans "Completed Tasks Only" %}</option>
                                                <option value="all">{% trans "Show All Tasks" %}</option>
                                            </select>
                                        </div>

                                        <div class="vr bg-secondary mx-1"></div>
                                        <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 class="vr bg-secondary mx-1"></div>
                                        <form method="post" action="{% url 'industry_reforged:bulk_unclaim_tasks' %}"
                                            id="bulkUnclaimForm" class="d-flex align-items-center mb-0">
                                            {% csrf_token %}
                                            <button type="button" onclick="submitBulkUnclaim()"
                                                class="btn btn-sm btn-outline-danger"><i class="fas fa-undo"></i> {% trans "Unclaim Selected" %}</button>
                                        </form>
                                        <div class="vr bg-secondary mx-1"></div>
                                        <div class="dt-search-placeholder" data-table-target="#active-production-table"></div>
                                    </div>
                                </div>
                                <div class="card-body p-0">

                                    <!-- My Active Production -->
                                    <div id="active-production-wrapper">
                                        <div class="d-flex flex-wrap align-items-center gap-3 p-2 bg-dark border-bottom border-secondary small">
                                            <span class="fw-bold text-muted"><i class="fas fa-info-circle"></i> {% trans "Legend:" %}</span>
                                            <span class="text-muted"><span class="badge bg-primary"><i class="fas fa-check"></i> {% trans "Complete" %}</span> = {% trans "Complete single task" %}</span>
                                            <span class="text-muted"><span class="badge bg-warning text-dark"><i class="fas fa-check"></i> {% trans "Complete" %}</span> = {% trans "Complete task and auto-complete all sub-tasks" %}</span>
                                        </div>
                                        <div class="table-responsive" id="activeTableContainer">
                                            <table id="active-production-table"
                                                class="table table-striped table-hover m-0 w-100">
                                                <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 "Claimed By" %}</th>
                                                        <th class="text-end">{% trans "Reward" %}</th>
                                                        <th class="text-end">{% trans "Action" %}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    {% for task in my_tasks %}
                                                    <tr data-task-id="{{ task.id }}">
                                                        <td class="text-center">
                                                            <input type="checkbox" name="task_ids" value="{{ task.id }}"
                                                                class="active-checkbox" data-task-id="{{ task.id }}"
                                                                onchange="toggleTaskAndChildrenActive(this)">
                                                        </td>
                                                        <td>
                                                            <div class="d-flex align-items-center">
                                                                <img onerror="handleImageFallback(this, {{ task.item_type.id }})"
                                                                    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><span class="badge bg-secondary me-1">{{ task.activity_name }}</span> {{ task.item_type.name }}</span>
                                                                    {% if task.linked_jobs.all %}
                                                                    <div class="mt-1 small">
                                                                        {% for link in task.linked_jobs.all %}
                                                                            {% with job=link.character_job|default:link.corporation_job %}
                                                                            <span class="badge {% if job.status == 'delivered' %}bg-success{% elif job.status == 'ready' %}bg-warning text-dark{% else %}bg-info text-dark{% endif %}" title="ESI Job: {{ job.job_id }}">
                                                                                <i class="fas fa-industry"></i> {{ job.status|title }} ({{ link.linked_runs }} runs)
                                                                            </span>
                                                                            {% endwith %}
                                                                        {% endfor %}
                                                                    </div>
                                                                    {% endif %}

                                                                    <!-- Material Progress (if part of a larger order) -->
                                                                    {% if task.status != 'COMPLETED' and task.order_total_qty and task.order_total_qty > task.quantity %}
                                                                    <div class="mt-1 small">
                                                                        <span class="badge bg-secondary border border-secondary" title="Completed: {{ task.order_completed_qty }} | Consumed: {{ task.order_consumed_qty }}">
                                                                            <i class="fas fa-boxes"></i> Material Progress: {{ task.order_available_qty }} / {{ task.order_total_qty }}
                                                                        </span>
                                                                    </div>
                                                                    {% endif %}

                                                                    <!-- EVE Progress (for this specific task) -->
                                                                    {% if task.eve_delivered_qty > 0 or task.eve_active_qty > 0 %}
                                                                    <div class="mt-1 small">
                                                                        <span class="badge bg-dark border border-secondary" title="EVE Online delivery progress">
                                                                            <i class="fas fa-industry"></i> EVE Delivered: {{ task.eve_delivered_qty }} / {{ task.quantity }}
                                                                        </span>
                                                                    </div>
                                                                    {% endif %}
                                                                </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">
                                                            <div class="d-flex justify-content-end gap-1">
                                                                <form method="post"
                                                                    action="{% url 'industry_reforged:unclaim_task' task.id %}"
                                                                    class="d-inline"
                                                                    id="unclaimForm-{{ task.id }}">
                                                                    {% csrf_token %}
                                                                    <button type="button" class="btn btn-sm btn-outline-danger" title="{% trans 'Unclaim' %}" onclick="showUnclaimConfirmModal('unclaimForm-{{ task.id }}')">
                                                                        <i class="fas fa-undo"></i>
                                                                    </button>
                                                                </form>
                                                                <form method="post"
                                                                    action="{% url 'industry_reforged:complete_task' task.id %}"
                                                                    class="d-inline"
                                                                    {% if task.incomplete_children_count > 0 %}
                                                                    onsubmit="return triggerCompleteModal(event, this);"
                                                                    {% endif %}>
                                                                    {% csrf_token %}
                                                                    <button type="submit" class="btn btn-sm {% if task.incomplete_children_count > 0 %}btn-warning{% else %}btn-primary{% endif %}"><i
                                                                            class="fas fa-check"></i> Complete</button>
                                                                </form>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>

                                        <!-- My Completed Tasks -->
                                        <div id="completed-tasks-wrapper" style="display: none;">
                                            <div class="bg-dark p-2 border-bottom border-top"
                                                id="completed-tasks-header" style="display: none;">
                                                <h6 class="mb-0 text-muted"><i class="fas fa-check-circle"></i> {% trans "Completed Tasks" %}</h6>
                                            </div>
                                            <div class="table-responsive">
                                                <table id="completed-tasks-table"
                                                    class="table table-striped table-hover m-0 w-100">
                                                    <thead>
                                                        <tr>
                                                            <th>{% trans "Item" %}</th>
                                                            <th class="text-end">{% trans "Qty" %}</th>
                                                            <th>{% trans "Claimed By" %}</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="handleImageFallback(this, {{ task.item_type.id }})"
                                                                        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">{{ 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 %}

                                                                        <!-- Material Progress (if part of a larger order) -->
                                                                        {% if task.status != 'COMPLETED' and task.order_total_qty and task.order_total_qty > task.quantity %}
                                                                        <div class="mt-1 small">
                                                                            <span class="badge bg-secondary border border-secondary" title="Completed: {{ task.order_completed_qty }} | Consumed: {{ task.order_consumed_qty }}">
                                                                                <i class="fas fa-boxes"></i> Material Progress: {{ task.order_available_qty }} / {{ task.order_total_qty }}
                                                                            </span>
                                                                        </div>
                                                                        {% endif %}

                                                                        <!-- EVE Progress (for this specific task) -->
                                                                        {% if task.eve_delivered_qty > 0 or task.eve_active_qty > 0 %}
                                                                        <div class="mt-1 small">
                                                                            <span class="badge bg-dark border border-secondary" title="EVE Online delivery progress">
                                                                                <i class="fas fa-industry"></i> EVE Delivered: {{ task.eve_delivered_qty }} / {{ task.quantity }}
                                                                            </span>
                                                                        </div>
                                                                        {% 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>
                                                        {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                    </div> <!-- End Tab 2 -->

                <!-- TAB 3: TASK SUMMARY -->
                <div class="tab-pane fade" id="summary-pane" role="tabpanel" aria-labelledby="summary-tab" tabindex="0">
                    <div class="card border-0 mb-4 h-100">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h4 class="card-title mb-0"><i class="fas fa-chart-pie"></i> {% trans "Build Steps" %}</h4>
                                    <div class="d-flex align-items-center gap-2 bg-dark p-1 px-2 rounded border border-secondary">
                                        <select id="summary-filter-select" class="form-select form-select-sm bg-dark text-white border-secondary" style="width: auto;" onchange="filterSummaryTable()">
                                            <option value="active">{% trans "Active" %}</option>
                                            <option value="completed">{% trans "Completed" %}</option>
                                            <option value="all">{% trans "All" %}</option>
                                        </select>
                                        <div class="vr bg-secondary mx-1"></div>
                                        <div class="input-group input-group-sm" style="width: 200px;">
                                            <span class="input-group-text bg-dark border-secondary text-muted"><i class="fas fa-search"></i></span>
                                            <input type="text" id="summary-search-input" class="form-control bg-dark text-white border-secondary" placeholder="{% trans 'Search item...' %}" onkeyup="filterSummaryTable()">
                                        </div>
                                    </div>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-striped table-hover m-0 w-100" id="summary-view-table">
                                            <thead>
                                                <tr>
                                                    <th>{% trans "Item" %}</th>
                                                    <th class="text-end">{% trans "Claimed" %}</th>
                                                    <th class="text-end">{% trans "Completed" %}</th>
                                                    <th class="text-end">{% trans "Remaining" %}</th>
                                                    <th class="text-end">{% trans "EVE In Progress" %}</th>
                                                </tr>
                                            </thead>
                                                {% regroup my_claimed_summary by activity_name as grouped_summary %}
                                                {% for group in grouped_summary %}
                                                <tbody class="summary-group">
                                                <tr class="table-dark summary-group-header">
                                                    <td colspan="5" class="fw-bold">{{ group.grouper }}</td>
                                                </tr>
                                                {% for sum_item in group.list %}
                                                <tr class="summary-row" data-status="{% if sum_item.remaining <= 0 %}completed{% else %}active{% endif %}">
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <img onerror="handleImageFallback(this, {{ sum_item.item_type_id }})"
                                                                src="https://images.evetech.net/types/{{ sum_item.item_type_id }}/icon?size=32"
                                                                alt="{{ sum_item.item_type_name }}" width="24"
                                                                height="24" class="me-2 rounded">
                                                            <div>
                                                                <span>
                                                                    <span class="badge bg-secondary me-1">{{ sum_item.activity_name }}</span>
                                                                    {{ sum_item.item_type_name }}
                                                                    <i class="far fa-copy ms-1 text-muted cursor-pointer" style="cursor: pointer;" onclick="navigator.clipboard.writeText('{{ sum_item.item_type_name|escapejs }}'); this.classList.remove('fa-copy', 'far'); this.classList.add('fa-check', 'fas', 'text-success'); setTimeout(() => { this.classList.remove('fa-check', 'fas', 'text-success'); this.classList.add('fa-copy', 'far'); }, 1500);" title="{% trans 'Copy to clipboard' %}"></i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="text-end numeric fw-bold text-info">{{ sum_item.to_build }}</td>
                                                    <td class="text-end numeric text-success">{{ sum_item.completed }}</td>
                                                    <td class="text-end numeric fw-bold {% if sum_item.remaining > 0 %}text-danger{% else %}text-success{% endif %}">{{ sum_item.remaining|floatformat:0 }}</td>
                                                    <td class="text-end numeric text-warning">{{ sum_item.in_progress|floatformat:0 }}</td>
                                                </tr>
                                                {% endfor %}
                                                </tbody>
                                                {% empty %}
                                                <tbody>
                                                <tr>
                                                    <td colspan="5" class="text-center text-muted">{% trans "You have not claimed any production tasks." %}</td>
                                                </tr>
                                                </tbody>
                                                {% endfor %}
                                        </table>
                                        <script>
                                            function filterSummaryTable() {
                                                const filter = document.getElementById('summary-filter-select').value;
                                                const searchInput = document.getElementById('summary-search-input');
                                                const searchTerm = searchInput ? searchInput.value.toLowerCase() : '';
                                                const groups = document.querySelectorAll('.summary-group');

                                                groups.forEach(group => {
                                                    const rows = group.querySelectorAll('.summary-row');
                                                    let visibleCount = 0;
                                                    rows.forEach(row => {
                                                        const status = row.getAttribute('data-status');
                                                        const rowText = row.textContent.toLowerCase();

                                                        const matchesStatus = (filter === 'all' || filter === status);
                                                        const matchesSearch = searchTerm === '' || rowText.includes(searchTerm);

                                                        if (matchesStatus && matchesSearch) {
                                                            row.style.display = '';
                                                            visibleCount++;
                                                        } else {
                                                            row.style.display = 'none';
                                                        }
                                                    });
                                                    const header = group.querySelector('.summary-group-header');
                                                    if (header) {
                                                        header.style.display = visibleCount > 0 ? '' : 'none';
                                                    }
                                                });
                                            }
                                            // Initialize filter on load
                                            document.addEventListener('DOMContentLoaded', filterSummaryTable);
                                        </script>
                                    </div>
                                </div>
                            </div>
                    </div> <!-- End Tab 3 -->

                <!-- TAB 4: CORPORATE JOBS -->
                <div class="tab-pane fade" id="corporate-pane" role="tabpanel" aria-labelledby="corporate-tab"
                        tabindex="0">
                    <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 id="corporate-jobs-table"
                                                class="table table-striped table-hover m-0 w-100">
                                                <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="handleImageFallback(this, {{ job.product_type.id }})"
                                                                    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>
                                                            {% elif job.blueprint_type %}
                                                            <div class="d-flex align-items-center">
                                                                <img onerror="handleImageFallback(this, {{ job.blueprint_type.id }})"
                                                                    src="https://images.evetech.net/types/{{ job.blueprint_type.id }}/icon?size=32"
                                                                    alt="{{ job.blueprint_type.name }}" width="24"
                                                                    height="24" class="me-2 rounded">
                                                                <span><span class="badge bg-secondary me-1">{{ job.activity_name }}</span> {{ job.blueprint_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>
                                                    {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                    </div> <!-- End Tab 4 -->

                <!-- TAB 5: PAYMENT SUMMARY -->
                <div class="tab-pane fade" id="payout-pane" role="tabpanel" aria-labelledby="payout-tab" tabindex="0">
                    <div class="card border-0 mb-4">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h4 class="card-title mb-0"><i class="fas fa-file-invoice-dollar"></i> {% trans "My Payouts & Payment Summary" %}</h4>
                            <div class="d-flex align-items-center gap-2 bg-dark p-1 px-2 rounded border border-secondary">
                                <select id="payout-filter-select" class="form-select form-select-sm bg-dark text-white border-secondary" style="width: auto;" onchange="$('#payout-summary-table').DataTable().draw()">
                                    <option value="all">{% trans "All" %}</option>
                                    <option value="paid">{% trans "Paid" %}</option>
                                    <option value="unpaid">{% trans "Unpaid" %}</option>
                                </select>
                                <div class="vr bg-secondary mx-1"></div>
                                <div class="dt-search-placeholder" data-table-target="#payout-summary-table"></div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table id="payout-summary-table" class="table table-striped table-hover m-0 w-100">
                                    <thead>
                                        <tr>
                                            <th>{% trans "Date Completed" %}</th>
                                            <th>{% trans "Item" %}</th>
                                            <th class="text-end">{% trans "Qty" %}</th>
                                            <th class="text-end">{% trans "Payout Value" %}</th>
                                            <th>{% trans "Payment ID" %}</th>
                                            <th>{% trans "Payment Date" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for task in my_payout_tasks %}
                                        <tr data-payment-status="{% if task.payout_batch and task.payout_batch.status == 'PAID' %}paid{% else %}unpaid{% endif %}">
                                            <td class="numeric">{{ task.completed_at|date:"Y-m-d H:i" }}</td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <img onerror="handleImageFallback(this, {{ task.item_type.id }})" 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">
                                                    <span>{{ task.item_type.name }}</span>
                                                </div>
                                            </td>
                                            <td class="text-end numeric">{{ task.quantity }}</td>
                                            <td class="text-end numeric text-success">{{ task.builder_reward|eve_isk }}</td>
                                            <td>
                                                {% if task.payout_batch %}
                                                    <span class="badge bg-secondary">{{ task.payout_batch.payment_reference }}</span>
                                                {% else %}
                                                    <span class="badge bg-dark text-muted">{% trans "Unbatched" %}</span>
                                                {% endif %}
                                            </td>
                                            <td>
                                                {% if task.payout_batch %}
                                                    {% if task.payout_batch.status == "PAID" %}
                                                        <span class="badge bg-success"><i class="fas fa-check-circle"></i> {{ task.payout_batch.paid_at|date:"Y-m-d H:i" }}</span>
                                                    {% else %}
                                                        <span class="badge bg-warning text-dark"><i class="fas fa-clock"></i> {% trans "Pending" %}</span>
                                                    {% endif %}
                                                {% else %}
                                                    <span class="badge bg-danger"><i class="fas fa-times-circle"></i> {% trans "Unpaid" %}</span>
                                                {% endif %}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div> <!-- End Tab 5 -->

                </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>

    <!-- Complete Confirmation Modal -->
    <div class="modal fade" id="confirmCompleteModal" tabindex="-1" aria-labelledby="confirmCompleteModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content bg-dark border-secondary text-white">
                <div class="modal-header border-bottom border-warning">
                    <h5 class="modal-title text-warning" id="confirmCompleteModalLabel"><i class="fas fa-exclamation-triangle"></i> {% trans "Confirm Completion" %}</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {% trans "You are about to complete tasks. If any of these have incomplete sub-tasks, doing so will recursively mark all sub-tasks as completed as well. Are you sure you want to proceed?" %}
                </div>
                <div class="modal-footer border-secondary">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="button" class="btn btn-warning" id="confirmCompleteBtn"><i class="fas fa-check"></i> {% trans "Proceed" %}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Unclaim Confirmation Modal -->
    <div class="modal fade" id="unclaimConfirmModal" tabindex="-1" aria-labelledby="unclaimConfirmModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="unclaimConfirmModalLabel">{% trans "Confirm Unclaim" %}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    {% trans "Are you sure you want to unclaim the selected task(s)? This will return them to the open market." %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="button" class="btn btn-danger" id="unclaimConfirmBtn">{% trans "Unclaim" %}</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Shopping List Loading Modal -->
    <div class="modal fade" id="shoppingListLoadingModal" data-bs-backdrop="static" data-bs-keyboard="false"
        tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content bg-dark border-secondary text-center p-5">
                <div class="modal-body">
                    <div class="spinner-border text-light mb-3" role="status" style="width: 4rem; height: 4rem;"></div>
                    <h4 class="text-light">{% trans "Calculating Shopping List..." %}</h4>
                    <p class="text-muted mb-0">{% trans "This may take a few seconds for large production trees." %}</p>
                </div>
            </div>
        </div>
    </div>
    {% endblock %}

    {% block extra_javascript %}
    {{ block.super }}
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // 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) {
                    var target = event.target.getAttribute('data-bs-target');
                    if(window.history.replaceState) {
                        window.history.replaceState(null, null, target);
                    } else {
                        window.location.hash = target;
                    }
                    sessionStorage.setItem('industrialistActiveTab', target);
                });
            });

            // Restore active tab from sessionStorage or URL Hash
            var activeTab = window.location.hash || sessionStorage.getItem('industrialistActiveTab');
            if (activeTab) {
                var triggerEl = document.querySelector('button[data-bs-target="' + activeTab + '"]');
                if (triggerEl) {
                    triggerEl.click();
                }
            }

            var completeBtn = document.getElementById('confirmCompleteBtn');
            if (completeBtn) {
                completeBtn.addEventListener('click', function() {
                    if (pendingCompleteForm) {
                        pendingCompleteForm.submit();
                    }
                });
            }
        });

        var pendingCompleteForm = null;

        function triggerCompleteModal(event, formElement) {
            event.preventDefault();
            pendingCompleteForm = formElement;
            var confirmModal = new bootstrap.Modal(document.getElementById('confirmCompleteModal'));
            confirmModal.show();
            return false;
        }

        function handleImageFallback(img, typeId) {
            if (!img.dataset.triedBp) {
                img.dataset.triedBp = "true";
                img.src = "https://images.evetech.net/types/" + typeId + "/bp?size=32";
            } else if (!img.dataset.triedBpc) {
                img.dataset.triedBpc = "true";
                img.src = "https://images.evetech.net/types/" + typeId + "/bpc?size=32";
            } else {
                img.onerror = null;
                img.src = "https://images.evetech.net/types/3514/icon?size=32";
            }
        }


        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 = bootstrap.Modal.getOrCreateInstance(document.getElementById('shoppingListErrorModal'));
                errorModal.show();
                return;
            }

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

            var loadingModal = bootstrap.Modal.getOrCreateInstance(document.getElementById('shoppingListLoadingModal'));
            loadingModal.show();

            window.location.href = url;
        }

        window.addEventListener('pageshow', function (event) {
            if (event.persisted) {
                var loadingModalEl = document.getElementById('shoppingListLoadingModal');
                if (loadingModalEl) {
                    var loadingModal = bootstrap.Modal.getInstance(loadingModalEl);
                    if (loadingModal) {
                        loadingModal.hide();
                    }
                }
            }
        });

        function toggleMemberTaskView() {
            var view = document.getElementById('member-task-view-select').value;
            var activeWrapper = document.getElementById('active-production-wrapper');
            var completedWrapper = document.getElementById('completed-tasks-wrapper');
            var completedHeader = document.getElementById('completed-tasks-header');

            if (view === 'active') {
                activeWrapper.style.display = 'block';
                completedWrapper.style.display = 'none';
            } else if (view === 'completed') {
                activeWrapper.style.display = 'none';
                completedWrapper.style.display = 'block';
                if (completedHeader) completedHeader.style.display = 'none';
            } else {
                activeWrapper.style.display = 'block';
                completedWrapper.style.display = 'block';
                if (completedHeader) completedHeader.style.display = 'block';
            }
        }

        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 = bootstrap.Modal.getOrCreateInstance(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');

            // 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 = bootstrap.Modal.getOrCreateInstance(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');

            // Remove existing hidden inputs to avoid duplicates
            var existingInputs = form.querySelectorAll('input[name="task_ids"]');
            for (var i = 0; i < existingInputs.length; i++) {
                existingInputs[i].remove();
            }

            // 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);
            });

            pendingCompleteForm = form;
            var confirmModal = new bootstrap.Modal(document.getElementById('confirmCompleteModal'));
            confirmModal.show();
        }

        function submitBulkUnclaim() {
            var checkboxes = document.querySelectorAll('.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 = bootstrap.Modal.getOrCreateInstance(document.getElementById('shoppingListErrorModal'));
                document.getElementById('shoppingListErrorModalLabel').innerText = "{% trans 'Selection Required' %}";
                document.querySelector('#shoppingListErrorModal .modal-body').innerText = "{% trans 'Please select at least one task to unclaim.' %}";
                errorModal.show();
                return;
            }

            var form = document.getElementById('bulkUnclaimForm');
            // Remove previous hidden inputs to avoid duplicates
            form.querySelectorAll('input[name="task_ids"]').forEach(e => e.remove());

            // 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);
            });

            showUnclaimConfirmModal('bulkUnclaimForm');
        }

        function showUnclaimConfirmModal(formId) {
            var modal = bootstrap.Modal.getOrCreateInstance(document.getElementById('unclaimConfirmModal'));
            var confirmBtn = document.getElementById('unclaimConfirmBtn');

            // Remove existing event listeners by replacing the button
            var newConfirmBtn = confirmBtn.cloneNode(true);
            confirmBtn.parentNode.replaceChild(newConfirmBtn, confirmBtn);

            newConfirmBtn.addEventListener('click', function() {
                document.getElementById(formId).submit();
            });

            modal.show();
        }

        $(document).ready(function () {
            var baseConfig = {
                "paging": true,
                "ordering": true,
                "info": true,
                "searching": true,
                "autoWidth": false,
                "order": [],
                "language": {
                    "search": "{% trans 'Search:' %}",
                    "lengthMenu": "{% trans 'Show _MENU_ entries' %}",
                    "info": "{% trans 'Showing _START_ to _END_ of _TOTAL_ entries' %}",
                    "infoEmpty": "{% trans 'No entries available' %}",
                    "emptyTable": "{% trans 'No entries available' %}"
                }
            };

            try {
                if ($('#active-production-table').length) {
                    var config1 = $.extend(true, {}, baseConfig);
                    config1.columnDefs = [{ "orderable": false, "targets": [0, 5] }];
                    $('#active-production-table').DataTable(config1);
                }
            } catch (e) { console.error("Error init active production table:", e); }

            try {
                if ($('#jobmarket-table').length) {
                    var config2 = $.extend(true, {}, baseConfig);
                    config2.columnDefs = [{ "orderable": false, "targets": [0, 4] }];
                    $('#jobmarket-table').DataTable(config2);
                }
            } catch (e) { console.error("Error init jobmarket table:", e); }

            try {
                if ($('#completed-tasks-table').length) {
                    $('#completed-tasks-table').DataTable($.extend(true, {}, baseConfig));
                }
            } catch (e) { console.error("Error init completed tasks table:", e); }

            try {
                if ($('#corporate-jobs-table').length) {
                    var config3 = $.extend(true, {}, baseConfig);
                    $('#corporate-jobs-table').DataTable(config3);
                }
            } catch (e) { console.error("Error init corporate jobs table:", e); }

            try {
                if ($('#payout-summary-table').length) {
                    $('#payout-summary-table').DataTable($.extend(true, {}, baseConfig));
                }
            } catch (e) { console.error("Error init payout summary table:", e); }

            $('button[data-bs-toggle="tab"], a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
                $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
            });

            // Move DataTables search boxes to custom filter bars
            $('.dt-search-placeholder').each(function() {
                var $placeholder = $(this);
                var targetId = $placeholder.data('table-target');
                if (targetId) {
                    var $table = $(targetId);
                    var $wrapper = $table.closest('.dataTables_wrapper');
                    if ($wrapper.length) {
                        var $search = $wrapper.find('.dataTables_filter');
                        if ($search.length) {
                            $search.appendTo($placeholder);
                            $search.find('input').removeClass('form-control-sm').addClass('form-control form-control-sm bg-dark text-white border-secondary');
                            $search.find('label').addClass('mb-0 text-white d-flex align-items-center gap-2');

                            // The length changer (Show X entries) is managed by base.html based on total records
                        }
                    }
                }
            });
        });



        $.fn.dataTable.ext.search.push(
            function(settings, data, dataIndex, rowData, counter) {
                var tableId = settings.nTable.id;

                if (tableId === 'payout-summary-table') {
                    var filter = $('#payout-filter-select').val();
                    if (!filter || filter === 'all') return true;
                    var rowNode = settings.aoData[dataIndex].nTr;
                    var status = $(rowNode).attr('data-payment-status');
                    return status === filter;
                }

                return true;
            }
        );


    </script>
    {% endblock %}