{% 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><i class="fas fa-chess-king"></i> {% trans "Director Control Panel" %}</h3>
            <div>
                <a href="{% url 'industry_reforged:director_inventory' %}" class="btn btn-primary"><i class="fas fa-boxes"></i>
                    Inventory Analytics</a>
                <a href="{% url 'industry_reforged:director_wallets' %}" class="btn btn-primary"><i class="fas fa-wallet"></i>
                    Wallets</a>
                <a href="{% url 'industry_reforged:director_config' %}" class="btn btn-success"><i class="fas fa-cogs"></i>
                    Configurations</a>
            </div>
        </div>
    </div>


    <div class="card border-0 mb-4">
        <div class="card-header p-0 border-bottom-0">
            <ul class="nav nav-tabs" id="director-tabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="orders-tab" data-bs-toggle="tab" data-bs-target="#orders-pane"
                        type="button" role="tab" aria-controls="orders-pane" aria-selected="true">
                        <i class="fas fa-shopping-cart"></i> Active Member Orders
                    </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">
                        <i class="fas fa-chart-pie"></i> Production Summary
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="tasks-tab" data-bs-toggle="tab" data-bs-target="#tasks-pane"
                        type="button" role="tab" aria-controls="tasks-pane" aria-selected="false">
                        <i class="fas fa-hammer"></i> Production Tasks
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="payouts-tab" data-bs-toggle="tab" data-bs-target="#payouts-pane"
                        type="button" role="tab" aria-controls="payouts-pane" aria-selected="false">
                        <i class="fas fa-money-bill-wave"></i> Pending Payouts
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="buy-orders-tab" data-bs-toggle="tab" data-bs-target="#buy-orders-pane"
                        type="button" role="tab" aria-controls="buy-orders-pane" aria-selected="false">
                        <i class="fas fa-shopping-basket"></i> Procurement Buy Orders
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="transactions-tab" data-bs-toggle="tab" data-bs-target="#transactions-pane"
                        type="button" role="tab" aria-controls="transactions-pane" aria-selected="false">
                        <i class="fas fa-book"></i> Ledger Transactions
                    </button>
                </li>
            </ul>
        </div>
        <div class="card-body">
            <div class="tab-content" id="director-tabContent">
                <!-- Orders Tab -->
                <div class="tab-pane fade show active" id="orders-pane" role="tabpanel" aria-labelledby="orders-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-center bg-dark p-2 rounded mb-3 border border-secondary dt-filter-bar">
                        <form method="get" action="#orders-pane" class="d-flex align-items-center mb-0 gap-2 custom-filters">
                        <select name="status" class="form-select bg-dark text-white border-secondary me-2 form-select-sm" style="width: auto;">
                            <option value="">{% trans "All Statuses" %}</option>
                            <option value="REQUESTED" {% if request.GET.status == 'REQUESTED' %}selected{% endif %}>{% trans "Requested" %}</option>
                            <option value="QUOTED" {% if request.GET.status == 'QUOTED' %}selected{% endif %}>{% trans "Quoted" %}</option>
                            <option value="ACCEPTED" {% if request.GET.status == 'ACCEPTED' %}selected{% endif %}>{% trans "Accepted" %}</option>
                            <option value="IN_PRODUCTION" {% if request.GET.status == 'IN_PRODUCTION' %}selected{% endif %}>{% trans "In Production" %}</option>
                            <option value="READY" {% if request.GET.status == 'READY' %}selected{% endif %}>{% trans "Ready" %}</option>
                            <option value="DELIVERED" {% if request.GET.status == 'DELIVERED' %}selected{% endif %}>{% trans "Delivered" %}</option>
                            <option value="REJECTED" {% if request.GET.status == 'REJECTED' %}selected{% endif %}>{% trans "Rejected" %}</option>
                            <option disabled>───────</option>
                            <option value="PAID" {% if request.GET.status == 'PAID' %}selected{% endif %}>{% trans "Payment: Paid" %}</option>
                            <option value="UNPAID" {% if request.GET.status == 'UNPAID' %}selected{% endif %}>{% trans "Payment: Unpaid" %}</option>
                        </select>
                        <select name="sort" class="form-select bg-dark text-white border-secondary me-2 form-select-sm" style="width: auto;">
                            <option value="-created_at" {% if request.GET.sort == '-created_at' %}selected{% endif %}>{% trans "Newest First" %}</option>
                            <option value="created_at" {% if request.GET.sort == 'created_at' %}selected{% endif %}>{% trans "Oldest First" %}</option>
                            <option value="-total_price" {% if request.GET.sort == '-total_price' %}selected{% endif %}>{% trans "Highest Price" %}</option>
                            <option value="total_price" {% if request.GET.sort == 'total_price' %}selected{% endif %}>{% trans "Lowest Price" %}</option>
                            <option value="id" {% if request.GET.sort == 'id' %}selected{% endif %}>{% trans "Order ID (Low-High)" %}</option>
                            <option value="-id" {% if request.GET.sort == '-id' %}selected{% endif %}>{% trans "Order ID (High-Low)" %}</option>
                        </select>
                        <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-filter"></i> {% trans "Apply Filter" %}</button>
                        </form>
                        <div class="dt-search-placeholder" data-table-target="#order-management-table"></div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 w-100 dataTable" id="order-management-table">
                            <thead>
                                <tr>
                                    <th>Order ID</th>
                                    <th>Character</th>
                                    <th>Total Price</th>
                                    <th>Payment Ref</th>
                                    <th>{% translate "Status" %}</th>
                                    <th>Progress</th>
                                    <th>{% translate "Action" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Tasks Tab -->
                <!-- Production Summary Tab -->
                <div class="tab-pane fade" id="summary-pane" role="tabpanel" aria-labelledby="summary-tab" tabindex="0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 w-100 dataTable" id="production-summary-table">
                            <thead>
                                <tr>
                                    <th>{% trans "Item" %}</th>
                                    <th class="text-end">{% trans "Total Required" %}</th>
                                    <th class="text-end">{% trans "Unclaimed" %}</th>
                                    <th class="text-end">{% trans "In Production" %}</th>
                                    <th class="text-end">{% trans "Completed" %}</th>
                                    <th class="text-center" style="width: 200px;">{% trans "Progress" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for row in production_summary %}
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <img onerror="handleImageFallback(this, {{ row.item_type_id }})" src="https://images.evetech.net/types/{{ row.item_type_id }}/icon?size=32" alt="{{ row.item_type__name }}" width="24" height="24" class="me-2 rounded">
                                            {{ row.item_type__name }}
                                        </div>
                                    </td>
                                    <td class="text-end numeric">{{ row.total_qty|intcomma }}</td>
                                    <td class="text-end numeric text-danger">{{ row.unclaimed_qty|default:0|intcomma }}</td>
                                    <td class="text-end numeric text-info">{{ row.in_production_qty|default:0|intcomma }}</td>
                                    <td class="text-end numeric text-success">{{ row.completed_qty|default:0|intcomma }}</td>
                                    <td class="align-middle">
                                        {% widthratio row.completed_qty row.total_qty 100 as prog_completed %}
                                        {% widthratio row.in_production_qty row.total_qty 100 as prog_in_prod %}
                                        <div class="progress mt-1" style="opacity: 0.8; height: 1.2rem;">
                                            <div class="progress-bar bg-success" role="progressbar" style="width: {{ prog_completed }}%; box-shadow: inset 0 0 5px rgba(0,0,0,0.2);" title="{% trans 'Completed' %}: {{ prog_completed }}%">
                                                <small class="fw-bold px-1 text-white" style="text-shadow: 1px 1px 2px rgba(0,0,0,0.8);">{% if prog_completed != '0' %}{{ prog_completed }}%{% endif %}</small>
                                            </div>
                                            <div class="progress-bar bg-info" role="progressbar" style="width: {{ prog_in_prod }}%; box-shadow: inset 0 0 5px rgba(0,0,0,0.2);" title="{% trans 'In Production' %}: {{ prog_in_prod }}%">
                                                <small class="fw-bold px-1 text-dark" style="text-shadow: 1px 1px 2px rgba(255,255,255,0.5);">{% if prog_in_prod != '0' %}{{ prog_in_prod }}%{% endif %}</small>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="tasks-pane" role="tabpanel" aria-labelledby="tasks-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-center bg-dark p-2 rounded mb-3 border border-secondary dt-filter-bar">
                        <form method="get" action="#tasks-pane" class="d-flex align-items-center mb-0 gap-2 custom-filters">
                        <select name="task_status" class="form-select bg-dark text-white border-secondary me-2 form-select-sm" style="width: auto;">
                            <option value="">{% trans "All Statuses" %}</option>
                            <option value="UNCLAIMED" {% if request.GET.task_status == 'UNCLAIMED' %}selected{% endif %}>{% trans "Unclaimed" %}</option>
                            <option value="IN_PRODUCTION" {% if request.GET.task_status == 'IN_PRODUCTION' %}selected{% endif %}>{% trans "In Production" %}</option>
                            <option value="COMPLETED" {% if request.GET.task_status == 'COMPLETED' %}selected{% endif %}>{% trans "Completed" %}</option>
                        </select>
                        <select name="task_assignee" class="form-select bg-dark text-white border-secondary me-2 form-select-sm" style="width: auto;">
                            <option value="">{% trans "All Assignees" %}</option>
                            {% for assignee_id, assignee_name in task_assignees %}
                            <option value="{{ assignee_id }}" {% if request.GET.task_assignee == assignee_id|stringformat:"s" %}selected{% endif %}>{{ assignee_name }}</option>
                            {% endfor %}
                        </select>
                        <select name="task_sort" class="form-select bg-dark text-white border-secondary me-2 form-select-sm" style="width: auto;">
                            <option value="-created_at" {% if request.GET.task_sort == '-created_at' %}selected{% endif %}>{% trans "Newest First" %}</option>
                            <option value="created_at" {% if request.GET.task_sort == 'created_at' %}selected{% endif %}>{% trans "Oldest First" %}</option>
                            <option value="-builder_reward" {% if request.GET.task_sort == '-builder_reward' %}selected{% endif %}>{% trans "Highest Reward" %}</option>
                            <option value="builder_reward" {% if request.GET.task_sort == 'builder_reward' %}selected{% endif %}>{% trans "Lowest Reward" %}</option>
                            <option value="id" {% if request.GET.task_sort == 'id' %}selected{% endif %}>{% trans "Task ID (Low-High)" %}</option>
                            <option value="-id" {% if request.GET.task_sort == '-id' %}selected{% endif %}>{% trans "Task ID (High-Low)" %}</option>
                        </select>
                        <button type="submit" class="btn btn-primary btn-sm"><i class="fas fa-filter"></i> {% trans "Apply Filter" %}</button>
                        </form>
                        <div class="dt-search-placeholder" data-table-target="#production-tasks-table"></div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 w-100 dataTable" id="production-tasks-table">
                            <thead>
                                <tr>
                                    <th>{% translate "Item" %}</th>
                                    <th>{% translate "Quantity" %}</th>
                                    <th>{% translate "Status" %}</th>
                                    <th>Priority</th>
                                    <th>{% trans "Claimed By" %}</th>
                                    <th class="text-end">Reward</th>
                                    <th class="text-end">{% translate "Action" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Payouts Tab -->
                <div class="tab-pane fade" id="payouts-pane" role="tabpanel" aria-labelledby="payouts-tab" tabindex="0">
                    <div class="row m-0">
                        <div class="col-md-5 mb-4 px-1">
                            <div class="card border-0 h-100">
                                <div class="card-header">
                                    <h5 class="card-title mb-0"><i class="fas fa-users"></i> {% trans "Payout Summary by Builder" %}</h5>
                                </div>
                                <div class="card-body p-0">
                                    <table class="table table-striped table-hover m-0 w-100 dataTable" id="payouts-table">
                                        <thead>
                                            <tr>
                                                <th>{% trans "Builder" %}</th>
                                                <th class="text-end">{% trans "Completed Tasks" %}</th>
                                                <th class="text-end">{% trans "Total Pending Payout" %}</th>
                                                <th class="text-end">{% trans "Action" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for summary in payout_summary %}
                                            <tr>
                                                <td class="fw-bold">{{ summary.assigned_to__character_name }}</td>
                                                <td class="text-end numeric">{{ summary.task_count }}</td>
                                                <td class="text-end numeric text-warning fw-bold">{{ summary.total_reward|eve_isk }}</td>
                                                <td class="text-end">
                                                    <form method="post" action="{% url 'industry_reforged:generate_payout_batch' %}" class="require-confirmation" data-action-msg="Generate a payout batch for {{ summary.assigned_to__character_name }}?" data-btn-class="btn-success">
                                                        {% csrf_token %}
                                                        <input type="hidden" name="builder_id" value="{{ summary.assigned_to__id }}">
                                                        <button type="submit" class="btn btn-sm btn-success">
                                                            <i class="fas fa-file-invoice-dollar"></i> Generate Batch
                                                        </button>
                                                    </form>
                                                </td>
                                            </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-7 mb-4">
                            <div class="card border-0 h-100">
                                <div class="card-header d-flex justify-content-between align-items-center">
                                    <h5 class="card-title mb-0"><i class="fas fa-list"></i> {% trans "Recent Completed Tasks with Rewards" %}</h5>
                                    <small class="text-muted">{% trans "Showing up to 200 tasks" %}</small>
                                </div>
                                <div class="card-body p-0">
                                    <table class="table table-striped table-hover m-0 w-100 dataTable" id="recent-completed-tasks-table">
                                        <thead>
                                            <tr>
                                                <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 "Completed" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-0 mt-4">
                        <div class="col-12 px-1">
                            <div class="card border-0">
                                <div class="card-header">
                                    <h5 class="card-title mb-0"><i class="fas fa-file-invoice"></i> {% trans "Active Payout Batches" %}</h5>
                                </div>
                                <div class="card-body p-0">
                                    <table class="table table-striped table-hover m-0 w-100 dataTable" id="activity-recent-tasks-table">
                                        <thead>
                                            <tr>
                                                <th>{% trans "Reference" %}</th>
                                                <th>{% trans "Builder" %}</th>
                                                <th class="text-end">{% trans "Total Amount" %}</th>
                                                <th>{% trans "Status" %}</th>
                                                <th class="text-end">{% trans "Generated On" %}</th>
                                                <th class="text-end">{% trans "Action" %}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for batch in payout_batches %}
                                            {% if batch.status == 'PENDING' %}
                                            <tr>
                                                <td>
                                                    <code>{{ batch.payment_reference }}</code>
                                                    <i class="far fa-copy ms-1 text-muted cursor-pointer" style="cursor: pointer;" onclick="navigator.clipboard.writeText('{{ batch.payment_reference|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>
                                                </td>
                                                <td>{{ batch.builder.character_name }}</td>
                                                <td class="text-end numeric text-warning fw-bold">
                                                    {{ batch.total_amount|eve_isk }}
                                                    <i class="far fa-copy ms-1 text-muted cursor-pointer" style="cursor: pointer;" onclick="navigator.clipboard.writeText('{{ batch.total_amount }}'); 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>
                                                </td>
                                                <td><span class="badge bg-warning text-dark">{{ batch.status }}</span></td>
                                                <td class="text-end numeric">{{ batch.created_at|date:"Y-m-d H:i" }}</td>
                                                <td class="text-end">
                                                    <form method="post" action="{% url 'industry_reforged:mark_payout_batch_paid' batch.id %}" class="d-inline require-confirmation" data-action-msg="Manually mark {{ batch.payment_reference }} as PAID?" data-btn-class="btn-success">
                                                        {% csrf_token %}
                                                        <button type="submit" class="btn btn-sm btn-outline-success">
                                                            <i class="fas fa-check-double"></i> Mark Paid
                                                        </button>
                                                    </form>
                                                </td>
                                            </tr>
                                            {% endif %}
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Buy Orders Tab -->
                <div class="tab-pane fade" id="buy-orders-pane" role="tabpanel" aria-labelledby="buy-orders-tab" tabindex="0">
                    <div class="alert alert-info shadow-sm mb-4">
                        <i class="fas fa-info-circle"></i> Procurement Buy Orders are generated from Low Stock deficits when the item is marked as <strong>"Buy"</strong> in the Item Configuration.
                    </div>
                    <div class="d-flex justify-content-end align-items-center bg-dark p-2 rounded mb-3 border border-secondary dt-filter-bar">
                        <div class="dt-search-placeholder" data-table-target="#buy-orders-table"></div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 w-100 dataTable" id="buy-orders-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>{% translate "Item" %}</th>
                                    <th class="text-end">Quantity Needed</th>
                                    <th>{% translate "Status" %}</th>
                                    <th>Created At</th>
                                    <th class="text-end">{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Transactions Tab -->
                <div class="tab-pane fade" id="transactions-pane" role="tabpanel" aria-labelledby="transactions-tab" tabindex="0">
                    <div class="d-flex justify-content-between align-items-center bg-dark p-2 rounded mb-3 border border-secondary dt-filter-bar">
                        <div class="d-flex align-items-center gap-2 custom-filters">
                            <select id="tx-filter-select" class="form-select bg-dark text-white border-secondary form-select-sm" style="width: auto;" onchange="$('#transactions-table').DataTable().draw()">
                                <option value="all">{% trans "All" %}</option>
                                <option value="payout">{% trans "Payouts" %}</option>
                                <option value="received">{% trans "Received" %}</option>
                                <option value="pending">{% trans "Pending (To be paid)" %}</option>
                            </select>
                        </div>
                        <div class="dt-search-placeholder" data-table-target="#transactions-table"></div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 w-100 dataTable" id="transactions-table">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Type</th>
                                    <th class="text-end">Amount</th>
                                    <th>Character</th>
                                    <th>Reference</th>
                                    <th>Director</th>
                                    <th>Notes</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- Generic Confirmation Modal -->
<div class="modal fade" id="actionModal" tabindex="-1" aria-labelledby="actionModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-dark border-secondary text-white">
            <div class="modal-header border-secondary">
                <h5 class="modal-title" id="actionModalLabel">{% trans "Confirm Action" %}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p id="actionModalMessage"></p>
            </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-primary" id="actionModalSubmitBtn">{% trans "Confirm" %}</button>
            </div>
        </div>
    </div>
</div>

<!-- Payment Modal -->
<div class="modal fade" id="paymentModal" tabindex="-1" aria-labelledby="paymentModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content bg-dark border-secondary text-white">
            <div class="modal-header border-secondary">
                <h5 class="modal-title" id="paymentModalLabel">{% trans "Process Payment" %}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="paymentModalForm" method="post" action="">
                {% csrf_token %}
                <div class="modal-body">
                    <p id="paymentModalMessage" class="text-info"></p>
                    <div class="mb-3">
                        <label for="paymentAmount" class="form-label">Amount (ISK)</label>
                        <input type="number" step="0.01" class="form-control bg-dark text-white border-secondary isk-format-input" id="paymentAmount" name="amount" placeholder="Leave empty for full remaining amount">
                        <div class="form-text text-secondary">Leave empty to mark the entire remaining balance as paid. <span id="paymentAmount-helper" class="text-warning fw-bold ms-2"></span></div>
                    </div>
                    <div class="mb-3">
                        <label for="paymentNote" class="form-label">Note (Optional)</label>
                        <input type="text" class="form-control bg-dark text-white border-secondary" id="paymentNote" name="note" placeholder="e.g. Paid in assets">
                    </div>
                </div>
                <div class="modal-footer border-secondary">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                    <button type="submit" class="btn btn-success">{% trans "Save Payment" %}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    let formToSubmit = null;
    let confirmModal = null;

    if (typeof bootstrap !== 'undefined') {
        confirmModal = new bootstrap.Modal(document.getElementById('actionModal'));
    }

    const urlParams = new URLSearchParams(window.location.search);
    const tabParam = urlParams.get('tab');
    let hash = window.location.hash;

    if (tabParam) {
        hash = '#' + tabParam + '-pane';
        const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + hash;
        window.history.replaceState({path:newUrl}, '', newUrl);
    }

    hash = hash || sessionStorage.getItem('directorDashboardTab');

    // Update the URL hash when a tab is shown
    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('directorDashboardTab', target);
        });
    });

    if (hash) {
        var triggerEl = document.querySelector('button[data-bs-target="' + hash + '"]');
        if (triggerEl) {
            triggerEl.click();
        }
    }

    document.body.addEventListener('submit', function(e) {
        if (e.target.matches('.require-confirmation')) {
            e.preventDefault();
            formToSubmit = e.target;
            const msg = formToSubmit.getAttribute('data-action-msg') || "Are you sure?";
            document.getElementById('actionModalMessage').textContent = msg;

            const btnClass = formToSubmit.getAttribute('data-btn-class') || 'btn-primary';
            const submitBtn = document.getElementById('actionModalSubmitBtn');
            submitBtn.className = 'btn ' + btnClass;

            if (confirmModal) {
                confirmModal.show();
            } else {
                if (confirm(msg)) {
                    formToSubmit.submit();
                }
            }
        }
    });

    document.getElementById('actionModalSubmitBtn').addEventListener('click', function() {
        if(formToSubmit) {
            formToSubmit.submit();
        }
    });

    document.body.addEventListener('click', function(e) {
        const btn = e.target.closest('.payment-modal-btn');
        if (btn) {
            const orderId = btn.getAttribute('data-order-id');
            const orderRef = btn.getAttribute('data-order-ref');
            const remaining = btn.getAttribute('data-order-remaining');
            const actionUrl = btn.getAttribute('data-action-url');

            document.getElementById('paymentModalForm').setAttribute('action', actionUrl);
            document.getElementById('paymentAmount').value = remaining;
            document.getElementById('paymentModalMessage').textContent = `Processing manual payment for Order #${orderId} (${orderRef})`;

            // Trigger input event to update helper format
            const event = new Event('input');
            document.getElementById('paymentAmount').dispatchEvent(event);
        }
    });

    function formatISK(val) {
        if(!val) return "";
        let num = parseFloat(val);
        if(isNaN(num)) return "";
        if(num >= 1000000000) return (num / 1000000000).toFixed(2) + "b";
        if(num >= 1000000) return (num / 1000000).toFixed(2) + "m";
        if(num >= 1000) return (num / 1000).toFixed(2) + "k";
        return num.toFixed(2);
    }

    document.querySelectorAll('.isk-format-input').forEach(input => {
        function updateHelper() {
            let helper = document.getElementById(input.id + '-helper');
            if(helper) {
                let formatted = formatISK(input.value);
                helper.textContent = formatted ? `( ${formatted} )` : '';
            }
        }
        input.addEventListener('input', updateHelper);
    });

    // Initialize DataTables
    if ($('#order-management-table').length) {
        $('#order-management-table').DataTable({
            "serverSide": true,
            "ajax": "{% url 'industry_reforged:dt_director_orders' %}" + window.location.search,
            "autoWidth": false,
            "order": [[ 0, "desc" ]],
            "columnDefs": [
                { "orderable": false, "targets": [6] }
            ]
        });
    }
    if ($('#production-summary-table').length) {
        $('#production-summary-table').DataTable({
            "autoWidth": false,
            "order": [[ 1, "desc" ]],
            "columnDefs": [
                { "orderable": false, "targets": [5] }
            ]
        });
    }
    if ($('#production-tasks-table').length) {
        $('#production-tasks-table').DataTable({
            "serverSide": true,
            "ajax": "{% url 'industry_reforged:dt_director_tasks' %}?type=all" + (window.location.search ? "&" + window.location.search.substring(1) : ""),
            "autoWidth": false,
            "order": [[ 0, "desc" ]],
            "columnDefs": [
                { "orderable": false, "targets": [6] }
            ]
        });
    }
    if ($('#payouts-table').length) {
        $('#payouts-table').DataTable({
            "autoWidth": false,
            "order": [[ 2, "desc" ]],
            "columnDefs": [
                { "orderable": false, "targets": [3] }
            ]
        });
    }
    if ($('#recent-completed-tasks-table').length) {
        $('#recent-completed-tasks-table').DataTable({
            "serverSide": true,
            "ajax": "{% url 'industry_reforged:dt_director_tasks' %}?type=recent",
            "autoWidth": false,
            "order": [[ 4, "desc" ]]
        });
    }
    if ($('#buy-orders-table').length) {
        $('#buy-orders-table').DataTable({
            "serverSide": true,
            "ajax": "{% url 'industry_reforged:dt_director_buy_orders' %}",
            "autoWidth": false,
            "order": [[ 4, "desc" ]],
            "columnDefs": [
                { "orderable": false, "targets": [5] }
            ]
        });
    }
    if ($('#transactions-table').length) {
        $('#transactions-table').DataTable({
            "serverSide": true,
            "ajax": {
                "url": "{% url 'industry_reforged:dt_director_transactions' %}",
                "data": function (d) {
                    d.tx_filter = $('#tx-filter-select').val();
                }
            },
            "autoWidth": false,
            "order": [[ 0, "desc" ]],
            "columns": [
                { "data": "date" },
                { "data": "type" },
                { "data": "amount", "className": "text-end text-warning fw-bold font-monospace" },
                { "data": "character" },
                { "data": "reference" },
                { "data": "director" },
                { "data": "notes" }
            ],
            "columnDefs": [
                { "orderable": false, "targets": [1, 4, 6] }
            ]
        });
    }
    if ($('#activity-recent-tasks-table').length) {
        $('#activity-recent-tasks-table').DataTable({
            "autoWidth": false,
            "order": [[ 4, "desc" ]],
            "columnDefs": [
                { "orderable": false, "targets": [5] }
            ]
        });
    }

    $('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
                }
            }
        }
    });
});
</script>

{% endblock %}