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

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

{% block member_data %}
    {% if corpstats %}
        <div class="clearfix">
            <table class="table">
                <tr>
                    <td class="text-center {% if corpstats.corp.alliance %}col-md-4{% else %}col-md-8{% endif %}">
                        <img class="img-rounded ra-avatar" src="{{ corpstats.corp.logo_url_128 }}" alt="{{ corpstats.corp.corporation_name }}">
                    </td>

                    {% if corpstats.corp.alliance %}
                        <td class="text-center col-md-4">
                            <img class="img-rounded ra-avatar" src="{{ corpstats.corp.alliance.logo_url_128 }}" alt="{{ corpstats.corp.alliance.alliance_name }}">
                        </td>
                    {% endif %}

                    <td class="text-center col-md-4"  rowspan="2">
                        <h4>{% translate 'Corp Info' %}</h4>
                        <span style="background-color: {% if auth_percent >= 95 %}rgb(0 170 51){% elif auth_percent >= 80 %}rgb(255,144 0){% else %}rgb(170 0 0){% endif %};" class="label label-default">
                            {% translate 'Authenticated' %}: {{members|length}}/{{total_members}} ({{auth_percent|floatformat:0|intcomma}}%)
                        </span>
                        <br>
                        <span class="label label-default">
                            {% translate 'Main/Alt Ratio' %}: {{alt_ratio|floatformat:2|intcomma}}
                        </span>
                        <br>
                        <h4>{% translate 'Services Active' %}</h4>
                        {% for service, perc in service_percent.items %}
                            <span style="background-color: {% if perc.percent >= 95 %}rgb(0 170 51){% elif perc.percent >= 80 %}rgb(255,144 0){% else %}rgb(170 0 0){% endif %};" class="label label-default">
                                {{service|title}} {% translate 'Activated' %}: {{perc.cnt}}/{{ total_mains }} ({{perc.percent|floatformat:0|intcomma}}%)
                            </span>
                            <br>
                        {% endfor %}
                    </td>
                </tr>

                <tr>
                    <td class="text-center">{{ corpstats.corp.corporation_name }}</td>

                    {% if corpstats.corp.alliance_id %}
                        <td class="text-center">{{ corpstats.corp.alliance.alliance_name }}</td>
                    {% endif %}
                </tr>
            </table>
        </div>

        <div class="clearfix">
            <div class="panel panel-default">
                <div class="panel-heading clearfix">
                    <ul class="nav nav-pills pull-left">
                        <li class="active"><a href="#mains" data-toggle="pill">{% translate 'Mains' %} ({{ total_mains }})</a></li>
                        <li><a href="#members" data-toggle="pill">{% translate 'Members' %} ({{ total_members }})</a></li>
                        <li><a href="#unregistered" data-toggle="pill">{% translate 'Unregistered' %} ({{ total_unreg }})</a></li>
                        <li><a href="#orphans" data-toggle="pill">{% translate 'Orphans' %} ({{ total_orphans }})</a></li>
                        <li><a href="#tracking" data-toggle="pill">{% translate 'Member Tracking' %}</a></li>
                    </ul>

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

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

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

                <div class="panel-body">
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="mains">
                            {% if mains %}
                                <div class="table-responsive">
                                    <table class="table table-hover" id="table-mains" style="width: 100%;">
                                        <thead>
                                            <tr>
                                                <th>{% 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 src="{{ main.main.portrait_url_64 }}" class="img-rounded" alt="{{ main.main.character_name }}">
                                                        <div class="caption text-center">
                                                            {{ main.main.character_name }}
                                                            <br>
                                                            {% for service, active in main.services.items %}
                                                                <span style="background-color: {% if active %}rgb(0 170 51){% else %}rgb(170 0 0){% endif %};" class="label label-default">{{service|title}}</span>
                                                            {% endfor %}
                                                        </div>
                                                    </td>

                                                    <td>
                                                        <table class="table table-striped table-hover">
                                                            <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 class="valign-middle" style="width: 30%;">
                                                                            <img src="{{ alt.portrait_url_32 }}" class="img-rounded" alt="{{ alt.character_name }}" style="margin-right: 0.25rem;">
                                                                            {{ alt.character_name }}
                                                                        </td>
                                                                        <td class="valign-middle" style="width: 30%;">
                                                                            <img src="{{ alt.corporation_id|corporation_logo_url:32 }}" alt=" {{ alt.corporation_name }}" style="margin-right: 0.25rem;">
                                                                            {{ alt.corporation_name }}
                                                                        </td>
                                                                        <td class="valign-middle" style="width: 30%;">
                                                                            {% if alt.alliance_name %}
                                                                                <img src="{{ alt.alliance_id|alliance_logo_url:32 }}" alt=" {{ alt.alliance_name }}" style="margin-right: 0.25rem;">
                                                                                {{ alt.alliance_name }}
                                                                            {% endif %}
                                                                        </td>
                                                                        <td class="valign-middle" style="width: 5%;">
                                                                            <a href="https://zkillboard.com/character/{{ alt.character_id }}/" class="label label-danger" 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 class="tab-pane fade" id="members">
                            {% if members %}
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover" 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 class="valign-middle">
                                                        <img src="{{ member.portrait_url }}" class="img-rounded" alt="{{ member.character_name }}" style="margin-right: 0.25rem;">
                                                        {{ member.character_name }}
                                                    </td>
                                                    <td class="valign-middle">
                                                        <a
                                                            href="https://zkillboard.com/character/{{ member.character_id }}/"
                                                            class="label label-danger"
                                                            target="_blank"
                                                        >{% translate "Killboard" %}</a>
                                                    </td>
                                                    <td class="valign-middle">
                                                        <img src="{{ member.character_ownership.user.profile.main_character.character_id|character_portrait_url:32 }}" class="img-rounded" 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 class="valign-middle">
                                                        <img src="{{ member.character_ownership.user.profile.main_character.corporation_id|corporation_logo_url:32 }}" class="img-rounded" 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 class="valign-middle">
                                                        {% if member.character_ownership.user.profile.main_character.alliance_name %}
                                                            <img src="{{ member.character_ownership.user.profile.main_character.alliance_id|alliance_logo_url:32 }}" class="img-rounded" 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="danger">
                                                    <td class="valign-middle">
                                                        <img src="{{ member.portrait_url }}" class="img-rounded" alt="{{ member.character_name }}" style="margin-right: 0.25rem;">
                                                        {{ member.character_name }}
                                                    </td>
                                                    <td class="valign-middle">
                                                        <a
                                                            href="https://zkillboard.com/character/{{ member.character_id }}/"
                                                            class="label label-danger"
                                                            target="_blank"
                                                        >{% translate "Killboard" %}</a>
                                                    </td>
                                                    <td class="valign-middle"></td>
                                                    <td class="valign-middle"></td>
                                                    <td class="valign-middle"></td>
                                                </tr>
                                            {% endfor %}

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

                        <div class="tab-pane fade" id="unregistered">
                            {% if unregistered %}
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover" id="table-unregistered">
                                        <thead>
                                            <tr>
                                                <th>{% translate "Character" %}</th>
                                                <th></th>
                                            </tr>
                                        </thead>

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

                                                    <td class="valign-middle">
                                                        <a href="https://zkillboard.com/character/{{ member.character_id }}/" class="label label-danger" 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 class="tab-pane fade" id="orphans">
                            {% if orphans %}
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover" 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 class="danger">
                                                    <td class="valign-middle">
                                                        <img src="{{ member.portrait_url }}" class="img-rounded" alt="{{ member.character_name }}" style="margin-right: 0.25rem;">
                                                        {{ member.character_name }}
                                                    </td>
                                                    <td class="valign-middle">
                                                        <a href="https://zkillboard.com/character/{{ member.character_id }}/" class="label label-danger" target="_blank">
                                                            {% translate "Killboard" %}
                                                        </a>
                                                    </td>
                                                    <td class="valign-middle">
                                                        <img src="{{ member.character_ownership.user.profile.main_character.character_id|character_portrait_url:32 }}" class="img-rounded" 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 class="valign-middle">
                                                        <img src="{{ member.character_ownership.user.profile.main_character.corporation_id|corporation_logo_url:32 }}" class="img-rounded" 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 class="valign-middle">
                                                        {% if member.character_ownership.user.profile.main_character.alliance_name %}
                                                            <img src="{{ member.character_ownership.user.profile.main_character.alliance_id|alliance_logo_url:32 }}" class="img-rounded" 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 class="tab-pane fade" id="tracking">
                            {% if members %}
                                <div class="table-responsive">
                                    <table class="table table-striped table-hover" 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="danger">
                                                    <td class="valign-middle" style="vertical-align:middle">
                                                        <img src="{{ member.portrait_url }}" class="img-rounded" alt="{{ member.character_name }}" style="margin-right: 0.25rem;">
                                                        {{ member.character_name }}
                                                    </td>
                                                    <td class="valign-middle">
                                                        <img src="{{ member.ship_type_id|type_render_url:32 }}" class="img-rounded" alt="{{ member.ship_type_name }}" style="margin-right: 0.25rem;">
                                                        {{ member.ship_type_name }}
                                                    </td>
                                                    <td class="valign-middle">{{ member.logoff_date|date:"Y-m-d H:i" }}<br><span class="label label-primary">{{ member.logon_date|timesince }} ago</span><br><span class="label label-default">Duration: {{ member.logon_date|timesince:member.logoff_date }}</span></td>
                                                    <td class="valign-middle">{{ member.start_date|date:"Y-m-d H:i" }}<br><span class="label label-primary">{{ member.start_date|timesince }}</span></td>
                                                    <td class="text-center valign-middle">
                                                        <span class="glyphicon glyphicon-remove"></span>
                                                    </td>
                                                </tr>
                                            {% endfor %}

                                            {% for member in tracking %}
                                                <tr >
                                                    <td class="valign-middle" style="vertical-align:middle">
                                                        <img src="{{ member.portrait_url }}" class="img-rounded" alt="{{ member.character_name }}" style="margin-right: 0.25rem;">
                                                        {{ member.character_name }}
                                                    </td>
                                                    <td class="valign-middle">
                                                        <img src="{{ member.ship_type_id|type_render_url:32 }}" class="img-rounded" alt="{{ member.ship_type_name }}" style="margin-right: 0.25rem;">
                                                        {{ member.ship_type_name }}
                                                    </td>
                                                    <td class="valign-middle">{{ member.logoff_date|date:"Y-m-d H:i" }}<br><span class="label label-primary">{{ member.logon_date|timesince }} ago</span><br><span class="label label-default">Duration: {{ member.logon_date|timesince:member.logoff_date }}</span></td>
                                                    <td class="valign-middle">{{ member.start_date|date:"Y-m-d H:i" }}<br><span class="label label-primary">{{ member.start_date|timesince }}</span></td>
                                                    <td class="text-center valign-middle">
                                                        <span class="glyphicon glyphicon-ok"></span>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock %}

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

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

    <script>
        $(document).ready(function(){
            let 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: false,
                    bootstrap: true
                }
            });

            $('#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 %}
