{% extends 'aacampaign/base.html' %}

{% load i18n %}
{% load humanize %}

{% block details %}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'aacampaign:index' %}">{% translate "Campaigns" %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{{ campaign.name }}</li>
        </ol>
    </nav>

    {% if top_kills %}
        <div class="d-flex flex-row flex-nowrap overflow-auto mb-4 pb-2 justify-content-center">
            {% for kill in top_kills %}
                <div class="text-center mx-2" style="min-width: 140px; max-width: 140px;">
                    <a href="https://zkillboard.com/kill/{{ kill.killmail_id }}/" target="_blank" style="text-decoration: none; color: inherit;">
                        <div class="text-info text-truncate mb-1" style="font-size: 0.9rem;" title="{{ kill.ship_type_name }}">
                            {{ kill.ship_type_name }}
                        </div>
                        <img src="https://images.evetech.net/types/{{ kill.ship_type_id }}/render?size=128"
                             class="img-fluid rounded mb-2 shadow"
                             style="background-color: #000;"
                             alt="{{ kill.ship_type_name }}">
                        <div class="fw-bold mb-1" style="font-size: 0.9rem;">
                            {{ kill.total_value|intword }} ISK
                        </div>
                        <div class="text-info text-truncate" style="font-size: 0.8rem;" title="{% if kill.victim_id %}{{ kill.victim_name }}{% else %}{{ kill.victim_corp_name }}{% endif %}">
                            {% if kill.victim_id %}{{ kill.victim_name }}{% else %}{{ kill.victim_corp_name }}{% endif %}
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <div class="row">
        <div class="col-md-4">
            <div class="card card-primary">
                <div class="card-header">
                    <h3 class="card-title">{% translate "Campaign Stats" %}</h3>
                </div>
                <div class="card-body">
                    <table class="table">
                        <tr>
                            <th>{% translate "Kills" %}</th>
                            <td class="text-end">{{ stats.total_kills|default:0 }}</td>
                        </tr>
                        <tr>
                            <th>{% translate "Losses" %}</th>
                            <td class="text-end">{{ stats.total_losses|default:0 }}</td>
                        </tr>
                        <tr>
                            <th>{% translate "Kill Value" %}</th>
                            <td class="text-end text-success">{{ stats.total_kill_value|default:0|intword }} ISK</td>
                        </tr>
                        <tr>
                            <th>{% translate "Loss Value" %}</th>
                            <td class="text-end text-danger">{{ stats.total_loss_value|default:0|intword }} ISK</td>
                        </tr>
                        <tr>
                            <th>{% translate "Efficiency" %}</th>
                            <td class="text-end">{{ efficiency|floatformat:1 }}%</td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="card card-info">
                <div class="card-header" role="button" data-bs-toggle="collapse" data-bs-target="#shipClassStats" aria-expanded="false" aria-controls="shipClassStats">
                    <h3 class="card-title">
                        {% translate "Ship Class Stats" %}
                        <i class="fas fa-chevron-down float-end"></i>
                    </h3>
                </div>
                <div id="shipClassStats" class="collapse">
                    <div class="card-body">
                        <table class="table table-sm table-striped w-100" id="table-ship-stats">
                            <thead>
                                <tr>
                                    <th>{% translate "Ship Class" %}</th>
                                    <th class="text-end">{% translate "Killed" %}</th>
                                    <th class="text-end">{% translate "Lost" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for group, values in ship_stats.items %}
                                    <tr>
                                        <td>{{ group }}</td>
                                        <td class="text-end text-success">{{ values.killed|default:0|intcomma }}</td>
                                        <td class="text-end text-danger">{{ values.lost|default:0|intcomma }}</td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card card-info">
                <div class="card-header">
                    <h3 class="card-title">{% translate "Description" %}</h3>
                </div>
                <div class="card-body">
                    {{ campaign.description|linebreaks|default:"-" }}
                </div>
            </div>

            <div class="card card-info">
                <div class="card-header">
                    <h3 class="card-title">{% translate "Configuration" %}</h3>
                </div>
                <div class="card-body">
                    <strong>{% translate "Locations" %}:</strong>
                    <ul>
                        {% for system in campaign.systems.all %}
                            <li>{{ system.name }} ({% translate "System" %})</li>
                        {% endfor %}
                        {% for constellation in campaign.constellations.all %}
                            <li>{{ constellation.name }} ({% translate "Constellation" %})</li>
                        {% endfor %}
                        {% for region in campaign.regions.all %}
                            <li>{{ region.name }} ({% translate "Region" %})</li>
                        {% endfor %}
                        {% if not campaign.systems.exists and not campaign.constellations.exists and not campaign.regions.exists %}
                            <li><em>{% translate "Global" %}</em></li>
                        {% endif %}
                    </ul>
                    <hr>
                    <strong>{% translate "Members" %}:</strong>
                    <ul>
                        {% for member in campaign.members.all %}
                            <li>{{ member }}</li>
                        {% empty %}
                            <li><em>{% translate "None defined" %}</em></li>
                        {% endfor %}
                    </ul>
                    <hr>
                    <strong>{% translate "Targets" %}:</strong>
                    <ul>
                        {% for target in campaign.targets.all %}
                            <li>{{ target }}</li>
                        {% endfor %}
                        {% if not campaign.targets.exists %}
                            <li><em>{% translate "Any (in location)" %}</em></li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-md-8">
            <ul class="nav nav-tabs mb-3" id="campaignTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="leaderboard-tab" data-bs-toggle="tab" data-bs-target="#leaderboard" type="button" role="tab" aria-controls="leaderboard" aria-selected="true">{% translate "Leaderboard" %}</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="killmails-tab" data-bs-toggle="tab" data-bs-target="#killmails" type="button" role="tab" aria-controls="killmails" aria-selected="false">{% translate "Killmails" %}</button>
                </li>
            </ul>

            <div class="tab-content" id="campaignTabsContent">
                <div class="tab-pane fade show active" id="leaderboard" role="tabpanel" aria-labelledby="leaderboard-tab">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">{% translate "Leaderboard" %}</h3>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table table-striped table-hover" id="table-leaderboard" style="width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>{% translate "Character" %}</th>
                                            <th class="text-center">{% translate "Kills" %}</th>
                                            <th class="text-end">{% translate "Value" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="tab-pane fade" id="killmails" role="tabpanel" aria-labelledby="killmails-tab">
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">{% translate "Recent Killmails" %}</h3>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-sm table-hover align-middle mb-0">
                                    <thead>
                                        <tr>
                                            <th>{% translate "Time" %}</th>
                                            <th>{% translate "Ship" %}</th>
                                            <th>{% translate "Location" %}</th>
                                            <th>{% translate "Victim" %}</th>
                                            <th>{% translate "Final Blow" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% regroup recent_killmails by killmail_time|date:"Y-m-d" as killmails_by_day %}
                                        {% for day in killmails_by_day %}
                                            <tr class="table-dark">
                                                <td colspan="5" class="py-1 small text-muted">
                                                    <i class="ps-2"><strong>{{ day.grouper }}</strong></i>
                                                </td>
                                            </tr>
                                            {% for km in day.list %}
                                                <tr>
                                                    <td class="text-nowrap" style="border-left: 5px solid {% if km.is_loss %}#dc3545{% else %}#198754{% endif %};">
                                                        <a href="https://zkillboard.com/kill/{{ km.killmail_id }}/" target="_blank" style="text-decoration: none;">
                                                            <div class="ps-2 {% if km.is_loss %}text-danger{% else %}text-success{% endif %}">
                                                                {% if km.is_loss %}<i class="fas fa-times-circle"></i>{% else %}<i class="fas fa-check-circle"></i>{% endif %}
                                                                <strong>{{ km.killmail_time|date:"H:i" }}</strong>
                                                            </div>
                                                        </a>
                                                        <div class="ps-2 small text-muted">{{ km.total_value|intword }}</div>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            <img src="https://images.evetech.net/types/{{ km.ship_type_id }}/render?size=32" class="me-2 rounded shadow-sm" alt="">
                                                            <div class="text-truncate" style="max-width: 150px;" title="{{ km.ship_type_name }}">
                                                                <a href="https://zkillboard.com/kill/{{ km.killmail_id }}/" target="_blank" class="text-info fw-bold" style="text-decoration: none;">
                                                                    {{ km.ship_type_name }}
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td class="small">
                                                        <div class="text-truncate" title="{{ km.solar_system.name }}">{{ km.solar_system.name }}</div>
                                                        <div class="text-muted text-truncate" title="{{ km.solar_system.eve_constellation.eve_region.name }}">{{ km.solar_system.eve_constellation.eve_region.name }}</div>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            {% if km.victim_id %}
                                                                <img src="https://images.evetech.net/characters/{{ km.victim_id }}/portrait?size=32" class="me-2 rounded shadow-sm" alt="">
                                                            {% else %}
                                                                <img src="https://images.evetech.net/corporations/{{ km.victim_corp_id }}/logo?size=32" class="me-2 rounded shadow-sm" alt="">
                                                            {% endif %}
                                                            <div class="small">
                                                                <div class="text-info text-truncate fw-bold" style="max-width: 150px;">
                                                                    {% if km.victim_id and km.victim_name != "Unknown" %}
                                                                        {{ km.victim_name }}
                                                                    {% else %}
                                                                        {{ km.victim_corp_name }}
                                                                    {% endif %}
                                                                </div>
                                                                <div class="text-muted text-truncate" style="max-width: 150px;">
                                                                    {% if km.victim_id and km.victim_name != "Unknown" %}
                                                                        {{ km.victim_corp_name }}
                                                                    {% else %}
                                                                        {{ km.victim_alliance_name|default:"" }}
                                                                    {% endif %}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                    <td>
                                                        <div class="d-flex align-items-center">
                                                            {% if km.final_blow_char_id %}
                                                                <img src="https://images.evetech.net/characters/{{ km.final_blow_char_id }}/portrait?size=32" class="me-2 rounded shadow-sm" alt="">
                                                                <div class="small">
                                                                    <div class="text-info text-truncate fw-bold" style="max-width: 150px;">
                                                                        {{ km.final_blow_char_name }}
                                                                        {% if km.attackers.count > 1 %}
                                                                            <span class="text-muted small">({{ km.attackers.count }})</span>
                                                                        {% endif %}
                                                                    </div>
                                                                    <div class="text-muted text-truncate" style="max-width: 150px;">{{ km.final_blow_corp_name }}</div>
                                                                </div>
                                                            {% elif km.final_blow_corp_id %}
                                                                <img src="https://images.evetech.net/corporations/{{ km.final_blow_corp_id }}/logo?size=32" class="me-2 rounded shadow-sm" alt="">
                                                                <div class="small">
                                                                    <div class="text-info text-truncate fw-bold" style="max-width: 150px;">
                                                                        {{ km.final_blow_corp_name }}
                                                                        {% if km.attackers.count > 1 %}
                                                                            <span class="text-muted small">({{ km.attackers.count }})</span>
                                                                        {% endif %}
                                                                    </div>
                                                                    <div class="text-muted text-truncate" style="max-width: 150px;">{{ km.final_blow_alliance_name|default:"" }}</div>
                                                                </div>
                                                            {% else %}
                                                                <div class="text-muted small"><em>{% translate "Unknown" %}</em></div>
                                                            {% endif %}
                                                        </div>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        {% empty %}
                                            <tr>
                                                <td colspan="5" class="text-center p-4">{% translate "No killmails recorded yet." %}</td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_css %}
    {% include "bundles/datatables-2-css-bs5.html" %}
    {% include "bundles/datatables-2-columncontrol-css-bs5.html" %}
{% endblock %}

{% block extra_javascript %}
    {% include "bundles/datatables-2-js-bs5.html" %}
    {% include "bundles/datatables-2-columncontrol-js-bs5.html" %}
    <script>
        $(document).ready(function() {
            $('#table-leaderboard').DataTable({
                ajax: {
                    url: '{% url "aacampaign:leaderboard_data" campaign.id %}',
                    dataSrc: 'data'
                },
                columns: [
                    {
                        data: 'character_name',
                        render: function (data, type, row) {
                            if (type === 'display' && row.rank && row.rank <= 5) {
                                return '<i class="fa-solid fa-' + row.rank + '"></i> ' + data;
                            }
                            return data;
                        }
                    },
                    {
                        data: 'kills',
                        className: 'text-center'
                    },
                    {
                        data: 'kill_value',
                        className: 'text-end',
                        render: function (data, type, row) {
                            if (type === 'display') {
                                return data.toLocaleString() + ' ISK';
                            }
                            return data;
                        }
                    }
                ],
                order: [[2, 'desc']],
                serverSide: true,
                processing: true,
                stateSave: true,
            });

            $('#table-ship-stats').DataTable({
                order: [[1, 'desc']],
                paging: true,
                searching: true,
                info: true,
                stateSave: true,
            });

            // Adjust columns on collapse shown
            $('#shipClassStats').on('shown.bs.collapse', function () {
                $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
            });
        });
    </script>
{% endblock %}