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

{% block details %}
    <div class="card border-0 mb-4">
        <div class="card-header">
            <h3 class="card-title"><i class="fas fa-building"></i> {{ title }}</h3>
            <div class="ms-auto">
                <a href="{% url 'industry_reforged:add_corporate_token' %}" class="btn btn-success btn-sm"><i class="fas fa-key"></i> Add Corporate Token</a>
            </div>
        </div>

        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <ul class="nav nav-pills" id="corp-pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="corp-pills-active-tab" data-bs-toggle="pill" data-bs-target="#corp-pills-active" type="button" role="tab" aria-controls="corp-pills-active" aria-selected="true">Active Jobs</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="corp-pills-history-tab" data-bs-toggle="pill" data-bs-target="#corp-pills-history" type="button" role="tab" aria-controls="corp-pills-history" aria-selected="false">{% translate "History" %}</button>
                    </li>
                </ul>
                <div class="d-flex align-items-center">
                    <label for="activity-filter" class="me-2 fw-bold text-nowrap"><i class="fas fa-filter text-muted"></i> Activity:</label>
                    <select id="activity-filter" class="form-select form-select-sm" style="width: auto;">
                        <option value="">-- All Activities --</option>
                        <option value="1">Manufacturing</option>
                        <option value="3">Research TE</option>
                        <option value="4">Research ME</option>
                        <option value="5">Copying</option>
                        <option value="8">Invention</option>
                        <option value="9">Reactions</option>
                    </select>
                </div>
            </div>

            <div class="tab-content" id="corp-pills-tabContent">
                <!-- Active Jobs Tab -->
                <div class="tab-pane fade show active" id="corp-pills-active" role="tabpanel" aria-labelledby="corp-pills-active-tab" tabindex="0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover dataTable m-0" id="corporate-jobs-active-table">
                            <thead>
                                <tr>
                                    <th>Installer</th>
                                    <th>{% translate "Activity" %}</th>
                                    <th>{% translate "Item" %}</th>
                                    <th class="text-end">{% translate "Runs" %}</th>
                                    <th class="text-end">Success Prob.</th>
                                    <th class="text-end">Cost (ISK)</th>
                                    <th>Wallet</th>
                                    <th>{% translate "Status" %}</th>
                                    <th>End Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- AJAX Content -->
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- History Jobs Tab -->
                <div class="tab-pane fade" id="corp-pills-history" role="tabpanel" aria-labelledby="corp-pills-history-tab" tabindex="0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover dataTable m-0" id="corporate-jobs-history-table">
                            <thead>
                                <tr>
                                    <th>Installer</th>
                                    <th>{% translate "Activity" %}</th>
                                    <th>{% translate "Item" %}</th>
                                    <th class="text-end">{% translate "Runs" %}</th>
                                    <th class="text-end">Successful</th>
                                    <th class="text-end">Cost (ISK)</th>
                                    <th>Wallet</th>
                                    <th>{% translate "Status" %}</th>
                                    <th>End Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- AJAX Content -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script>
    $(document).ready(function() {
        var activeTable = $('#corporate-jobs-active-table').DataTable({
            "serverSide": true,
            "ajax": {
                "url": "{% url 'industry_reforged:dt_corporate_jobs' %}?type=active",
                "data": function(d) {
                    d.activity = $('#activity-filter').val();
                }
            },
            "order": [[ 8, "desc" ]] // Sort by End Date
        });
        var historyTable = $('#corporate-jobs-history-table').DataTable({
            "serverSide": true,
            "ajax": {
                "url": "{% url 'industry_reforged:dt_corporate_jobs' %}?type=history",
                "data": function(d) {
                    d.activity = $('#activity-filter').val();
                }
            },
            "order": [[ 8, "desc" ]] // Sort by End Date
        });

        $('#activity-filter').on('change', function() {
            activeTable.ajax.reload();
            historyTable.ajax.reload();
        });
    });
</script>
{% endblock %}