{% extends 'industry_reforged/base.html' %}
{% load i18n %}
{% 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">
            <ul class="nav nav-pills mb-3" 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">History</button>
                </li>
            </ul>

            <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>Activity</th>
                                    <th>Item</th>
                                    <th class="text-end">Runs</th>
                                    <th class="text-end">Success Prob.</th>
                                    <th class="text-end">Cost (ISK)</th>
                                    <th>Wallet</th>
                                    <th>Status</th>
                                    <th>End Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for job in active_jobs %}
                                <tr>
                                    <td>
                                        {% if job.installer %}
                                        <div class="d-flex align-items-center">
                                            <img onerror="this.onerror=null; this.src='https://images.evetech.net/characters/1/portrait?size=32';" src="https://images.evetech.net/characters/{{ job.installer.character_id }}/portrait?size=32" alt="{{ job.installer.character_name }}" title="{{ job.installer.character_name }}" class="rounded-circle me-2" width="24" height="24">
                                            <span>{{ job.installer.character_name }}</span>
                                        </div>
                                        {% else %}
                                        <span class="text-muted">Unknown</span>
                                        {% endif %}
                                    </td>
                                    <td><span class="badge bg-secondary">{{ job.activity_name }}</span></td>
                                    <td>
                                        {% if job.product_type %}
                                            <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';" src="https://images.evetech.net/types/{{ job.product_type.id }}/icon?size=32" alt="{{ job.product_type.name }}" title="{{ job.product_type.name }}" width="24" height="24" class="me-2">
                                            {{ job.product_type.name }}
                                        {% elif job.blueprint_type %}
                                            <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';" src="https://images.evetech.net/types/{{ job.blueprint_type.id }}/icon?size=32" alt="{{ job.blueprint_type.name }}" title="{{ job.blueprint_type.name }}" width="24" height="24" class="me-2">
                                            {{ job.blueprint_type.name }}
                                        {% else %}
                                            <span class="text-muted">Unknown Item</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end numeric">{{ job.runs }}</td>
                                    <td class="text-end numeric">{% if job.probability %}{{ job.probability|floatformat:2 }}%{% endif %}</td>
                                    <td class="text-end numeric text-warning">{{ job.cost|floatformat:2|intcomma }}</td>
                                    <td>{{ job.wallet_division }}</td>
                                    <td>
                                        <span class="badge {% if job.is_ready %}bg-success{% elif job.status == 'active' %}bg-primary{% else %}bg-secondary{% endif %}">
                                            {% if job.is_ready %}Ready{% else %}{{ job.status|title }}{% endif %}
                                        </span>
                                    </td>
                                    <td class="numeric">{{ job.end_date|date:"Y-m-d H:i" }}</td>
                                </tr>
                                {% endfor %}
                            </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>Activity</th>
                                    <th>Item</th>
                                    <th class="text-end">Runs</th>
                                    <th class="text-end">Successful</th>
                                    <th class="text-end">Cost (ISK)</th>
                                    <th>Wallet</th>
                                    <th>Status</th>
                                    <th>End Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for job in history_jobs %}
                                <tr>
                                    <td>
                                        {% if job.installer %}
                                        <div class="d-flex align-items-center">
                                            <img onerror="this.onerror=null; this.src='https://images.evetech.net/characters/1/portrait?size=32';" src="https://images.evetech.net/characters/{{ job.installer.character_id }}/portrait?size=32" alt="{{ job.installer.character_name }}" title="{{ job.installer.character_name }}" class="rounded-circle me-2" width="24" height="24">
                                            <span>{{ job.installer.character_name }}</span>
                                        </div>
                                        {% else %}
                                        <span class="text-muted">Unknown</span>
                                        {% endif %}
                                    </td>
                                    <td><span class="badge bg-secondary">{{ job.activity_name }}</span></td>
                                    <td>
                                        {% if job.product_type %}
                                            <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';" src="https://images.evetech.net/types/{{ job.product_type.id }}/icon?size=32" alt="{{ job.product_type.name }}" title="{{ job.product_type.name }}" width="24" height="24" class="me-2">
                                            {{ job.product_type.name }}
                                        {% elif job.blueprint_type %}
                                            <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';" src="https://images.evetech.net/types/{{ job.blueprint_type.id }}/icon?size=32" alt="{{ job.blueprint_type.name }}" title="{{ job.blueprint_type.name }}" width="24" height="24" class="me-2">
                                            {{ job.blueprint_type.name }}
                                        {% else %}
                                            <span class="text-muted">Unknown Item</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end numeric">{{ job.runs }}</td>
                                    <td class="text-end numeric">{{ job.successful_runs|default_if_none:"-" }}</td>
                                    <td class="text-end numeric text-warning">{{ job.cost|floatformat:2|intcomma }}</td>
                                    <td>{{ job.wallet_division }}</td>
                                    <td>
                                        <span class="badge {% if job.status == 'delivered' %}bg-primary{% elif job.status == 'cancelled' %}bg-danger{% else %}bg-secondary{% endif %}">
                                            {{ job.status|title }}
                                        </span>
                                    </td>
                                    <td class="numeric">{{ job.end_date|date:"Y-m-d H:i" }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script>
    $(document).ready(function() {
        $('#corporate-jobs-active-table').DataTable({
            "order": [[ 8, "desc" ]] // Sort by End Date
        });
        $('#corporate-jobs-history-table').DataTable({
            "order": [[ 8, "desc" ]] // Sort by End Date
        });
    });
</script>
{% endblock %}
