{% extends "allianceauth/base.html" %}
{% load bootstrap %}
{% load static %}
{% load i18n %}

{% load humanize %}
{% block page_title %}Srp Fleet Data{% endblock page_title %}
{% block extra_css %}
    {% include 'bundles/datatables-css.html' %}
    {% include 'bundles/x-editable.css.html' %}
    <link href="{% static 'css/checkbox.css' %}" rel="stylesheet" type="text/css">
    <style>
        .copy-text-fa-icon:hover {
            cursor: pointer;
        }
        .radio label, .checkbox label {
            padding-left: 10px;
        }
        .editable {
            width:150px;
            text-align: center;
        }
        .editableform .form-control {
            width: 95%;
            text-align: center;
            margin-left: 10px;
        }

        .editable-input {
            width: 95%;
        }
        .radio, .checkbox {
            margin-top: 0px;
            margin-bottom: 0px;
        }
        .editable-error-block {
            white-space: nowrap;
        }
        .editable-click, a.editable-click, a.editable-click:hover {
            border-bottom: none;
        }
        .tooltip-inner {
            white-space:pre;
            max-width: none;
        }
    </style>
{% endblock extra_css %}

{% block content %}
    <div class="col-lg-12">
        <div class="row">
            <h1 class="page-header text-center">{% translate "SRP Fleet Data" %}
                <div class="text-right">
                    {% if perms.auth.srp_management %}
                        {% if fleet_status == "Completed" %}
                            <a href="{% url 'srp:mark_uncompleted' fleet_id %}" class="btn btn-warning">
                                {% translate "Mark Incomplete" %}
                            </a>
                        {% else %}
                            <a href="{% url 'srp:mark_completed' fleet_id %}" class="btn btn-success">
                                {% translate "Mark Completed" %}
                            </a>
                        {% endif %}
                    {% endif %}
                </div>
            </h1>

            {% if srpfleetrequests %}
                <form method="POST">
                    {% csrf_token %}
                    <div class="alert alert-info" role="alert">
                        <div class="text-right">
                            <b><span style="padding-right:2.5em">{% translate "Total Losses:" %} {{ srpfleetrequests.count }}</span></b>
                            <b><span style="padding-right:2.5em">{% translate "Total ISK Cost:" %} {{ totalcost | intcomma }}</span></b>
                            {% if perms.auth.srp_management %}
                                <button type="submit" title="Approve" class="btn btn-success" formaction="{% url 'srp:request_approve' %}">
                                    <span class="glyphicon glyphicon-ok"></span>
                                </button>
                                <button type="submit" title="Reject" class="btn btn-warning" formaction="{% url 'srp:request_reject' %}">
                                    <span class="glyphicon glyphicon-remove"></span>
                                </button>
                                <button type="submit" title="Remove" onclick="return confirm('{% translate "Are you sure you want to delete SRP requests?" %}')" class="btn btn-danger" formaction="{% url 'srp:request_remove' %}">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </button>
                            {% endif %}
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table srplist">
                            <thead>
                                <th class="text-center">{% translate "Pilot Name" %}</th>
                                <th class="text-center">{% translate "Killboard Link" %}</th>
                                <th class="text-center">{% translate "Additional Info" %}</th>
                                <th class="text-center">{% translate "Ship Type" %}</th>
                                <th class="text-center">{% translate "Killboard Loss Amt" %}</th>
                                <th class="text-center">{% translate "SRP ISK Cost" %}
                                <i class="glyphicon glyphicon-question-sign" rel="tooltip" title="{% blocktrans trimmed %}Click value to edit
Enter to save & next
ESC to cancel{% endblocktrans %}"id="blah"></i></th>
                                <th class="text-center">{% translate "Post Time" %}</th>
                                <th class="text-center">{% translate "Status" %}</th>
                                {% if perms.auth.srp_management %}
                                    <th class="text-center">{% translate "Actions" %}</th>
                                {% endif %}
                            </thead>

                            <tbody>
                            {% for srpfleetrequest in srpfleetrequests %}
                                <tr>
                                    <td class="text-center">
                                        {% if srpfleetrequest.character.alliance.alliance_ticker %}
                                            {{ srpfleetrequest.character.alliance.alliance_ticker }}
                                        {% endif %}
                                        [{{ srpfleetrequest.character.corporation.corporation_ticker }}]
                                        {{ srpfleetrequest.character.character_name }}&nbsp;<i class="copy-text-fa-icon far fa-copy" data-clipboard-text="{{ srpfleetrequest.character.character_name }}"></i>
                                        </span>
                                    </td>
                                    <td class="text-center">
                                        <a href="{{ srpfleetrequest.killboard_link }}"
                                        target="_blank" class="label label-warning">Link</a>
                                    </td>
                                    <td class="text-center">{{ srpfleetrequest.additional_info }}</td>
                                    <td class="text-center">{{ srpfleetrequest.srp_ship_name }}</td>
                                    <td class="text-center" data-sort="{{ srpfleetrequest.kb_total_loss }}">{{ srpfleetrequest.kb_total_loss | intcomma }} ISK</td>
                                    <td class="srp text-center" data-name="srp_total_amount" data-type="number" data-pk="{{srpfleetrequest.id}}" data-url="{% url 'srp:request_update_amount' srpfleetrequest.id %}" data-params="{csrfmiddlewaretoken:'{{csrf_token}}'}" data-sort="{{ srpfleetrequest.srp_total_amount }}">{{ srpfleetrequest.srp_total_amount | intcomma }} ISK</td>
                                    <td class="text-center" data-sort="{{ srpfleetrequest.post_time | date:"Y-m-d H:i" }}">{{ srpfleetrequest.post_time | date:"Y-M-d H:i" }}</td>
                                    <td class="text-center">
                                        {% if srpfleetrequest.srp_status == "Approved" %}
                                            <div class="label label-success">
                                                {% translate "Approved" %}
                                            </div>
                                        {% elif srpfleetrequest.srp_status == "Rejected" %}
                                            <div class="label label-danger">
                                                {% translate "Rejected" %}
                                            </div>
                                        {% else %}
                                            <div class="label label-warning">
                                                {% translate "Pending" %}
                                            </div>
                                        {% endif %}
                                    </td>
                                    {% if perms.auth.srp_management %}
                                        <td class="text-center">
                                            <div class="checkbox">
                                                <label style="font-size: 1.5em">
                                                    <input type="checkbox" name="{{srpfleetrequest.id}}">
                                                    <span class="cr"><i class="cr-icon fas fa-check"></i></span>
                                                </label>
                                            </div>
                                        </td>
                                    {% endif %}
                                </tr>
                            {% endfor %}
                            <tbody>

                        </table>
                    </div>
                    <div class="alert alert-info" role="alert">
                        <div class="text-right">
                            <b><span style="padding-right:2.5em">{% translate "Total Losses:" %} {{ srpfleetrequests.count }}</span></b>
                            <b><span style="padding-right:2.5em">{% translate "Total ISK Cost:" %} {{ totalcost | intcomma }}</span></b>
                            {% if perms.auth.srp_management %}
                                <button type="submit" title="Approve" class="btn btn-success" formaction="{% url 'srp:request_approve' %}">
                                    <span class="glyphicon glyphicon-ok"></span>
                                </button>
                                <button type="submit" title="Reject" class="btn btn-warning" formaction="{% url 'srp:request_reject' %}">
                                    <span class="glyphicon glyphicon-remove"></span>
                                </button>
                                <button type="submit" title="Remove" onclick="return confirm('{% translate "Are you sure you want to delete SRP requests?" %}')" class="btn btn-danger" formaction="{% url 'srp:request_remove' %}">
                                    <span class="glyphicon glyphicon-trash"></span>
                                </button>
                            {% endif %}
                        </div>
                    </div>
                </form>
            {% else %}
                <div class="alert alert-warning text-center">
                    {% translate "No SRP requests for this fleet." %}
                </div>
            {% endif %}
        </div>
    </div>
{% endblock content %}

{% block extra_javascript %}
    {% include 'bundles/datatables-js.html' %}
    {% include 'bundles/x-editable-js.html' %}
    {% include 'bundles/moment-js.html' %}
    {% include 'bundles/clipboard-js.html' %}

    <script>
        var clipboard = new ClipboardJS('.copy-text-fa-icon');
        clipboard.on('success', function (e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);

        e.clearSelection();
        });

        clipboard.on('error', function (e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
        });
    </script>
{% endblock extra_javascript %}

{% block extra_script %}
    $(document).ready(function() {
        $.fn.editable.defaults.mode = 'inline';
        $.fn.editable.defaults.showbuttons = false;
        $.fn.editable.defaults.highlight = "#AAFF80";

        $.fn.dataTable.moment = function(format, locale) {
            let types = $.fn.dataTable.ext.type;

            // Add type detection
            types.detect.unshift(function(d) {
                return moment(d, format, locale, true).isValid() ?
                    'moment-' + format :
                    null;
            });

            // Add sorting method - use an integer for the sorting
            types.order[ 'moment-' + format+'-pre' ] = function(d) {
                return moment(d, format, locale, true).unix();
            };
        };
        $.fn.dataTable.moment('YYYY-MMM-D, HH:mm');

        $('.srp').editable({
            display: function(value, response) {
                return false;
            },
            success: function(response, newValue) {
                newValue = parseInt(newValue);
                let newValueOutput = newValue.toLocaleString() + " ISK";

                $(this).html(newValueOutput.bold());
            },
            validate: function(value) {
                if (value === null || value === '') {
                    return 'Empty values not allowed';
                }
            }
        });

        $('.srp').on('hidden', function(e, reason){
            if(reason === 'save' || reason === 'nochange') {
                let $next = $(this).closest('tr').next().find('.editable');

                setTimeout(function() {
                    $next.editable('show');
                }, 400);
            }
        });

        $('table.srplist').DataTable({
            "order": [[ 6, "asc" ]],
            "paging": false,
            "columnDefs": [
                {
                    "targets": [1, 8],
                    "orderable": false
                },
                {
                    "targets": [4, 5],
                    "type": "num"
                }
            ],
            "stateSave": true,
            "stateDuration": 0
        });

        // tooltip
        $("[rel=tooltip]").tooltip({ placement: 'top'});
    });
{% endblock extra_script %}
