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

{% load i18n %}
{% load humanize %}
{% load static %}
{% load evelinks %}

{% block member_data %}
    {% if corpstats %}
        <div class="aa-corpstats-corpstats">
            <div class="card card-default mb-3">
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-4 text-center">
                            <figure>
                                <img
                                    class="rounded"
                                    src="{{ corpstats.corp.corporation_id|corporation_logo_url:256 }}"
                                    alt="{{ corpstats.corp.corporation_name }}"
                                >
                                <figcaption class="figure-caption">{{ corpstats.corp.corporation_name }}</figcaption>
                            </figure>
                        </div>

                        {% if corpstats.corp.alliance %}
                            <div class="col-md-4 text-center">
                                <figure>
                                    <img
                                        class="rounded"
                                        src="{{ corpstats.corp.alliance.alliance_id|alliance_logo_url:256 }}"
                                        alt="{{ corpstats.corp.alliance.alliance_name }}"
                                    >
                                    <figcaption class="figure-caption">{{ corpstats.corp.alliance.alliance_name }}</figcaption>
                                </figure>
                            </div>
                        {% endif %}

                        <div class="col-md-4 text-center">
                            <div class="mb-3">
                                <h4>{% translate 'Corp Info' %}</h4>

                                <span class="badge bg-{% if auth_percent >= 95 %}success{% elif auth_percent >= 80 %}warning{% else %}danger{% endif %}">
                                    {% translate 'Authenticated' %}: {{ members|length }}/{{ total_members }} ({{ auth_percent|floatformat:0|intcomma }}%)
                                </span>
                                <br>
                                <span class="badge bg-primary">
                                    {% translate 'Main/Alt Ratio' %}: {{ alt_ratio|floatformat:2|intcomma }}
                                </span>
                            </div>

                            <div>
                                <h4>{% translate 'Services Active' %}</h4>

                                {% for service, perc in service_percent.items %}
                                    <span class="d-inline-block badge bg-{% if perc.percent >= 95 %}success{% elif perc.percent >= 80 %}warning{% else %}danger{% endif %}">
                                        {{ service|title }} {% translate 'Activated' %}: {{ perc.cnt }}/{{ total_mains }} ({{ perc.percent|floatformat:0|intcomma }}%)
                                    </span>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card card-default">
                <div class="card-header clearfix">
                    <ul class="nav nav-pills float-start">
                        <li class="nav-item" role="presentation">
                            <a
                                class="nav-link active"
                                id="mains"
                                data-bs-toggle="tab"
                                href="#tab-mains"
                                role="tab"
                                aria-controls="tab-mains"
                                aria-selected="true"
                            >
                                {% translate 'Mains' %} ({{ total_mains }})
                            </a>
                        </li>

                        <li class="nav-item" role="presentation">
                            <a
                                class="nav-link"
                                id="members"
                                data-bs-toggle="tab"
                                href="#tab-members"
                                role="tab"
                                aria-controls="tab-members"
                                aria-selected="false"
                            >
                                {% translate 'Members' %} ({{ total_members }})
                            </a>
                        </li>

                        <li class="nav-item" role="presentation">
                            <a
                                class="nav-link"
                                id="unregistered"
                                data-bs-toggle="tab"
                                href="#tab-unregistered"
                                role="tab"
                                aria-controls="tab-unregistered"
                                aria-selected="false"
                            >
                                {% translate 'Unregistered' %} ({{ total_unreg }})
                            </a>
                        </li>

                        <li class="nav-item" role="presentation">
                            <a
                                class="nav-link"
                                id="orphans"
                                data-bs-toggle="tab"
                                href="#tab-orphans"
                                role="tab"
                                aria-controls="tab-orphans"
                                aria-selected="false"
                            >
                                {% translate 'Orphans' %} ({{ total_orphans }})
                            </a>
                        </li>

                        <li class="nav-item" role="presentation">
                            <a
                                class="nav-link"
                                id="tracking"
                                data-bs-toggle="tab"
                                href="#tab-tracking"
                                role="tab"
                                aria-controls="tab-tracking"
                                aria-selected="false"
                            >
                                {% translate 'Member Tracking' %}
                            </a>
                        </li>
                    </ul>

                    <div class="float-end">
                        {% translate "Last update:" %} {{ corpstats.last_update|naturaltime }}

                        <a
                            class="btn btn-success"
                            type="button"
                            href="{% url 'corpstat:update' corpstats.corp.corporation_id %}"
                            title="{% translate 'Update Now' %}"
                        >
                            <span class="fa-solid fa-rotate"></span>
                        </a>

                        <a
                            class="btn btn-primary"
                            type="button"
                            href="{%  url 'corpstat:export' corpstats.corp.corporation_id %}"
                            title="{% translate 'Export' %}"
                        >
                            <span class="fa-solid fa-download"></span>
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <div class="tab-content">
                        <div id="tab-mains" class="tab-pane fade show active card card-default border-0" role="tabpanel" aria-labelledby="tab-mains">
                            {% if mains %}
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover w-100" id="table-mains">
                                        <thead>
                                            <tr>
                                                <th style="max-width: 300px;">{% translate "Main Character" %}</th>
                                                <th></th>

                                                {% for service in service_percent %}
                                                    <th>{{ service|title }}</th>
                                                {% endfor %}
                                            </tr>
                                        </thead>

                                        <tbody>
                                            {% for id, main in mains.items %}
                                                <tr>
                                                    <td class="text-center valign-middle">
                                                        <img
                                                            class="rounded"
                                                            src="{{ main.main.character_id|character_portrait_url:64 }}"
                                                            alt="{{ main.main.character_name }}"
                                                        >

                                                        <div class="caption text-center">
                                                            {{ main.main.character_name }}
                                                            <br>
                                                            {% for service, active in main.services.items %}
                                                                <span
                                                                    class="d-inline-block badge bg-{% if active %}success{% else %}danger{% endif %}"
                                                                >
                                                                    {{ service|title }}
                                                                </span>
                                                            {% endfor %}
                                                        </div>
                                                    </td>

                                                    <td>
                                                        <table class="table table-striped table-hover w-100">
                                                            <thead>
                                                                <tr>
                                                                    <th>{% translate "Character" %}</th>
                                                                    <th>{% translate "Corporation" %}</th>
                                                                    <th>{% translate "Alliance" %}</th>
                                                                    <th></th>
                                                                </tr>
                                                            </thead>

                                                            <tbody>
                                                                {% for alt in main.alts %}
                                                                    <tr>
                                                                        <td style="width: 30%;">
                                                                            <img
                                                                                class="rounded"
                                                                                src="{{ alt.character_id|character_portrait_url:32 }}"
                                                                                alt="{{ alt.character_name }}"
                                                                                style="margin-right: 0.25rem;"
                                                                            >
                                                                            {{ alt.character_name }}
                                                                        </td>

                                                                        <td style="width: 30%;">
                                                                            <img
                                                                                class="rounded"
                                                                                src="{{ alt.corporation_id|corporation_logo_url:32 }}"
                                                                                alt=" {{ alt.corporation_name }}"
                                                                                style="margin-right: 0.25rem;"
                                                                            >
                                                                            {{ alt.corporation_name }}
                                                                        </td>

                                                                        <td style="width: 30%;">
                                                                            {% if alt.alliance_name %}
                                                                                <img
                                                                                    class="rounded"
                                                                                    src="{{ alt.alliance_id|alliance_logo_url:32 }}"
                                                                                    alt=" {{ alt.alliance_name }}"
                                                                                    style="margin-right: 0.25rem;"
                                                                                >
                                                                                {{ alt.alliance_name }}
                                                                            {% endif %}
                                                                        </td>

                                                                        <td style="width: 5%;">
                                                                            <a
                                                                                class="badge bg-danger"
                                                                                href="{{ alt.character_id|zkillboard_character_url }}"
                                                                                target="_blank"
                                                                            >
                                                                                {% translate "Killboard" %}
                                                                            </a>
                                                                        </td>
                                                                    </tr>
                                                                {% endfor %}
                                                            </tbody>
                                                        </table>
                                                    </td>

                                                    {% for service, active in main.services.items %}
                                                        <td>
                                                            {% if active %}
                                                                {% translate 'Active' %}
                                                            {% else %}
                                                                {% translate 'Inactive' %}
                                                            {% endif %}
                                                        </td>
                                                    {% endfor %}
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% endif %}
                        </div>

                        <div id="tab-members" class="tab-pane fade card card-default border-0" role="tabpanel" aria-labelledby="tab-members">
                            {% if members %}
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover w-100" id="table-members">
                                        <thead>
                                            <tr>
                                                <th>{% translate "Character" %}</th>
                                                <th></th>
                                                <th>{% translate "Main Character" %}</th>
                                                <th>{% translate "Main Corporation" %}</th>
                                                <th>{% translate "Main Alliance" %}</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            {% for member in members %}
                                                <tr>
                                                    <td>
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.character_id|character_portrait_url:32 }}"
                                                            alt="{{ member.character_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.character_name }}
                                                    </td>

                                                    <td class="text-center">
                                                        <a
                                                            href="{{ member.character_id|zkillboard_character_url }}"
                                                            class="badge bg-danger"
                                                            target="_blank"
                                                        >
                                                            {% translate "Killboard" %}
                                                        </a>
                                                    </td>

                                                    <td>
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.character_ownership.user.profile.main_character.character_id|character_portrait_url:32 }}"
                                                            alt="{{ member.character_ownership.user.profile.main_character.character_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.character_ownership.user.profile.main_character.character_name }}
                                                    </td>

                                                    <td>
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.character_ownership.user.profile.main_character.corporation_id|corporation_logo_url:32 }}"
                                                            alt="{{ member.character_ownership.user.profile.main_character.corporation_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.character_ownership.user.profile.main_character.corporation_name }}
                                                    </td>

                                                    <td>
                                                        {% if member.character_ownership.user.profile.main_character.alliance_name %}
                                                            <img
                                                                class="rounded"
                                                                src="{{ member.character_ownership.user.profile.main_character.alliance_id|alliance_logo_url:32 }}"
                                                                alt="{{ member.character_ownership.user.profile.main_character.alliance_name }}"
                                                                style="margin-right: 0.25rem;"
                                                            >
                                                            {{ member.character_ownership.user.profile.main_character.alliance_name }}
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}

                                            {% for member in unregistered %}
                                                <tr class="table-warning">
                                                    <td>
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.portrait_url }}"
                                                            alt="{{ member.character_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.character_name }}
                                                    </td>

                                                    <td class="text-center" style="width: 5%;">
                                                        <a
                                                            class="badge bg-danger"
                                                            href="{{ member.character_id|zkillboard_character_url }}"
                                                            target="_blank"
                                                        >
                                                            {% translate "Killboard" %}
                                                        </a>
                                                    </td>

                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                </tr>
                                            {% endfor %}

                                        </tbody>
                                    </table>
                                </div>
                            {% endif %}
                        </div>

                        <div id="tab-unregistered" class="tab-pane fade card card-default border-0" role="tabpanel" aria-labelledby="tab-unregistered">
                            {% if unregistered %}
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover w-100" id="table-unregistered">
                                        <thead>
                                            <tr>
                                                <th>{% translate "Character" %}</th>
                                                <th></th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            {% for member in unregistered %}
                                                <tr>
                                                    <td>
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.character_id|character_portrait_url:32 }}"
                                                            alt="{{ member.character_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.character_name }}
                                                    </td>

                                                    <td class="text-center" style="width: 5%;">
                                                        <a
                                                            class="badge bg-danger"
                                                            href="{{ member.character_id|zkillboard_character_url }}"
                                                            target="_blank"
                                                        >
                                                            {% translate "Killboard" %}
                                                        </a>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <div class="col-md-12 alert alert-success">
                                    <strong>{% translate 'No Unregistered Characters' %}</strong>.
                                </div>
                            {% endif %}
                        </div>

                        <div id="tab-orphans" class="tab-pane fade card card-default border-0" role="tabpanel" aria-labelledby="tab-orphans">
                            {% if orphans %}
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover w-100" id="table-orphans">
                                        <thead>
                                            <tr>
                                                <th>{% translate "Character" %}</th>
                                                <th></th>
                                                <th>{% translate "Main Character" %}</th>
                                                <th>{% translate "Main Corporation" %}</th>
                                                <th>{% translate "Main Alliance" %}</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            {% for member in orphans %}
                                                <tr>
                                                    <td>
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.character_id|character_portrait_url:32 }}"
                                                            alt="{{ member.character_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.character_name }}
                                                    </td>

                                                    <td class="text-center" style="width: 5%;">
                                                        <a
                                                            class="badge bg-danger"
                                                            href="{{ member.character_id|zkillboard_character_url }}"
                                                            target="_blank"
                                                        >
                                                            {% translate "Killboard" %}
                                                        </a>
                                                    </td>

                                                    <td>
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.character_ownership.user.profile.main_character.character_id|character_portrait_url:32 }}"
                                                            alt="{{ member.character_ownership.user.profile.main_character.character_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.character_ownership.user.profile.main_character.character_name }}
                                                    </td>

                                                    <td>
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.character_ownership.user.profile.main_character.corporation_id|corporation_logo_url:32 }}"
                                                            alt="{{ member.character_ownership.user.profile.main_character.corporation_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.character_ownership.user.profile.main_character.corporation_name }}
                                                    </td>

                                                    <td>
                                                        {% if member.character_ownership.user.profile.main_character.alliance_name %}
                                                            <img
                                                                class="rounded"
                                                                src="{{ member.character_ownership.user.profile.main_character.alliance_id|alliance_logo_url:32 }}"
                                                                alt="{{ member.character_ownership.user.profile.main_character.alliance_name }}"
                                                                style="margin-right: 0.25rem;"
                                                            >
                                                            {{ member.character_ownership.user.profile.main_character.alliance_name }}
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <div class="col-md-12 alert alert-success">
                                    <strong>{% translate 'No Orphaned Characters' %}</strong>.
                                </div>
                            {% endif %}
                        </div>

                        <div id="tab-tracking" class="tab-pane fade card card-default border-0" role="tabpanel" aria-labelledby="tab-tracking">
                            {% if members %}
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover w-100" id="table-tracking">
                                        <thead>
                                            <tr>
                                                <th>{% translate 'Character' %}</th>
                                                <th>{% translate 'Ship' %}</th>
                                                <th>{% translate 'Last Online' %}</th>
                                                <th>{% translate 'Joined' %}</th>
                                                <th>{% translate 'Registered' %}</th>
                                            </tr>
                                        </thead>

                                        <tbody>
                                            {% for member in unregistered %}
                                                <tr class="table-warning">
                                                    <td>
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.character_id|character_portrait_url:32 }}"
                                                            alt="{{ member.character_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.character_name }}
                                                    </td>

                                                    <td>
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.ship_type_id|type_render_url:32 }}"
                                                            alt="{{ member.ship_type_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.ship_type_name }}
                                                    </td>

                                                    <td>
                                                        {{ member.logoff_date|date:"Y-m-d H:i" }}
                                                        <br>
                                                        <span class="badge bg-primary">
                                                            {% blocktrans with member.logon_date|timesince as time_since %}
                                                                {{ time_since }} ago
                                                            {% endblocktrans %}
                                                        </span>
                                                        <br>
                                                        <span class="badge bg-secondary">
                                                            {% blocktrans with member.logon_date|timesince:member.logoff_date as duration %}
                                                                Duration: {{ duration }}
                                                            {% endblocktrans %}
                                                        </span>
                                                    </td>

                                                    <td>
                                                        {{ member.start_date|date:"Y-m-d H:i" }}
                                                        <br>
                                                        <span class="badge bg-primary">
                                                            {{ member.start_date|timesince }}
                                                        </span>
                                                    </td>

                                                    <td class="text-center align-middle" style="width: 5%;">
                                                        <span class="fa-solid fa-xmark fa-xl"></span>
                                                    </td>
                                                </tr>
                                            {% endfor %}

                                            {% for member in tracking %}
                                                <tr >
                                                    <td style="vertical-align:middle">
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.character_id|character_portrait_url:32 }}"
                                                            alt="{{ member.character_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.character_name }}
                                                    </td>

                                                    <td>
                                                        <img
                                                            class="rounded"
                                                            src="{{ member.ship_type_id|type_render_url:32 }}"
                                                            alt="{{ member.ship_type_name }}"
                                                            style="margin-right: 0.25rem;"
                                                        >
                                                        {{ member.ship_type_name }}
                                                    </td>

                                                    <td>
                                                        {{ member.logoff_date|date:"Y-m-d H:i" }}
                                                        <br>
                                                        <span class="badge bg-primary">
                                                            {% blocktrans with member.logon_date|timesince as time_since %}
                                                                {{ time_since }} ago
                                                            {% endblocktrans %}
                                                        </span>
                                                        <br>
                                                        <span class="badge bg-default">
                                                            {% blocktrans with member.logon_date|timesince:member.logoff_date as duration %}
                                                                Duration: {{ duration }}
                                                            {% endblocktrans %}
                                                        </span>
                                                    </td>

                                                    <td>
                                                        {{ member.start_date|date:"Y-m-d H:i" }}<br>
                                                        <span class="badge bg-primary">
                                                            {{ member.start_date|timesince }}
                                                        </span>
                                                    </td>

                                                    <td class="text-center align-middle" style="width: 5%;">
                                                        <span class="fa-solid fa-check fa-lg"></span>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block extra_css %}
    {% include 'bundles/datatables-css-bs5.html' %}
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js-bs5.html' %}
    {% include 'bundles/filterdropdown-js.html' %}

    <script>
        $(document).ready(() => {
            const service_cols = []

            {% for service in service_percent %}
                service_cols.push(1 + {{ forloop.counter }})
            {% endfor %}

            $('#table-mains').DataTable({
                columnDefs: [
                    {
                        sortable: false,
                        targets: [1]
                    },
                    {
                        visible: false,
                        targets: service_cols
                    }
                ],
                filterDropDown: {
                    columns: [
                        {% for service in service_percent %}
                            {
                                idx: 1 + {{ forloop.counter }}
                            },
                        {% endfor %}
                    ],
                    autoSize: true,
                    bootstrap: true,
                    bootstrap_version: 5,
                }
            });

            $('#table-members').DataTable({
                columnDefs: [
                    {
                        searchable: false,
                        targets: [1]
                    },
                    {
                        sortable: false,
                        targets: [1]
                    },
                ],
                order: [[0, 'asc']]
            });

            $('#table-unregistered').DataTable({
                columnDefs: [
                    {
                        searchable: false,
                        targets: [1]
                    },
                    {
                        sortable: false,
                        targets: [1]
                    },
                ],
                order: [[0, 'asc']]
            });

            $('#table-tracking').DataTable({
                columnDefs: [
                    {
                        searchable: false,
                        targets: [4]
                    },
                    {
                        sortable: false,
                        targets: [4]
                    },
                ],
                order: [[0, 'asc']]
            });
        });
    </script>
{% endblock %}