{% extends "allianceauth/base.html" %}
{% load i18n %}
{% load humanize %}
{% load invoices %}

{% block page_title %}
    {% invoice_app_name %}
{% endblock %}
{% block content %}
    <br />
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button"
                        class="navbar-toggle collapsed"
                        data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1"
                        aria-expanded="false">
                    <span class="sr-only">{% translate "Toggle navigation" %}</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{% url 'invoices:list' %}">{% invoice_app_name %}</a>
            </div>

            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    {% if perms.invoices.admin %}
                        <li>
                            <a class="" href="{% url 'invoices:admin' %}">{% translate "Invoice Managment" %}</a>
                        </li>
                    {% endif %}
                </ul>
            </div>

        </div>
    </nav>

    <div class="col-lg-12">
        <div class="col-lg-10 col-lg-offset-1 container">
            <div class="col-md-8">
                <div class="panel panel-{% if outstanding_isk > 0 %}warning{% else %}success{% endif %}">
                    <div class="panel-heading text-center">
                        <h3 class="panel-title">{% translate "Outstanding" %}</h3>
                    </div>
                    {% if outstanding_isk > 0 %}
                        <div class="panel-body">
                            <div class="col-sm-12">
                                <h3 class="text-center">Ƶ {{ outstanding_isk|intcomma }}</h3>
                                <br />
                            </div>
                            <div class="col-sm-6">
                                <p class="text-center">
                                    <small>
                                        {% blocktrans trimmed %}
                                            All Payments are to be made to <a href="https://evewho.com/corporation/{{ recipt_corp.corporation_id }}">{{ recipt_corp }}</a>
                                            <br />
                                            All payments made to other places will not be receipted!
                                        {% endblocktrans %}
                                    </small>
                                </p>
                            </div>
                            <div class="col-sm-6">
                                <p class="text-center">
                                    <small>
                                        {% blocktrans trimmed %}
                                            All Payments <b>MUST</b> include the Reference in the Reason Field
                                            <br />
                                            Contact an Admin for assistance, if you made an error
                                        {% endblocktrans %}
                                    </small>
                                </p>
                            </div>
                        </div>
                    {% else %}
                        <div class="panel-body">
                            <div class="col-sm-12">
                                <h3 class="text-center">{% translate "No Payment Required" %}</h3>
                                <br />
                            </div>
                            <div class="col-sm-6">
                                <p class="text-center">
                                    <small>
                                        {% blocktrans trimmed %}
                                            All Payments are to be made to <a href="https://evewho.com/corporation/{{ recipt_corp.corporation_id }}">{{ recipt_corp }}</a>
                                            <br />
                                            All payments made to other places will not be receipted!
                                        {% endblocktrans %}
                                    </small>
                                </p>
                            </div>
                            <div class="col-sm-6">
                                <p class="text-center">
                                    <small>
                                        {% blocktrans trimmed %}
                                            All Payments <b>MUST</b> include the Reference in the Reason Field
                                            <br />
                                            Contact an Admin for assistance, if you made an error.
                                        {% endblocktrans %}
                                    </small>
                                </p>
                            </div>
                        </div>
                    {% endif %}
                </div>
            </div>
            <div class="col-md-4">
                <div class="panel panel-default">
                    <div class="panel-heading text-center">
                        <h3 class="panel-title">{% translate "Key" %}</h3>
                    </div>
                    <div class="panel-body">
                        <table class="table table-hover text-center" style="width:100%">
                            <tr class="info">
                                <td>{% translate "Paid" %}</td>
                            </tr>
                            <tr class="">
                                <td>{% translate "Outstanding" %}</td>
                            </tr>
                            <tr class="danger">
                                <td>{% translate "Overdue" %}</td>
                            </tr>

                        </table>
                    </div>
                </div>
            </div>
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading text-center">
                        <h3 class="panel-title">{% translate "Your Contributions" %}</h3>
                    </div>
                    <div class="panel-body">
                        <div class="col-md-12 table-responsive">
                            <table class="table table-hover" id="outstanding-table" style="width:100%;">
                                <thead>
                                    <th></th>
                                    <th>{% translate "Character" %}</th>
                                    <th>{% translate "Corporation" %}</th>
                                    <th>{% translate "Amount" %}</th>
                                    <th>{% translate "Reference" %}</th>
                                    <th>{% translate "Due Date" %}</th>
                                    <th>{% translate "Note" %}</th>
                                    <th>{% translate "Paid" %}</th>
                                </thead>
                                <tbody>
                                    {% for inv in invoices %}
                                        <tr {% if inv.is_past_due %}class="danger"{% else %}class=""{% endif %}>
                                            <td>
                                                <img src="{{ inv.character.portrait_url_32 }}" class="img-circle" />
                                            </td>
                                            <td>
                                                {{ inv.character }}
                                                <br />
                                                <span class="badge badge-default">{{ inv.character.character_ownership.user.profile.main_character.character_name }}</span></span>
                                            </td>
                                            <td>{{ inv.character.character_ownership.user.profile.main_character.corporation_name }}</td>
                                            <td style="white-space: nowrap;">{{ inv.amount|intcomma }}</td>
                                            <td style="white-space: nowrap;">{{ inv.invoice_ref }}</td>
                                            <td>{{ inv.due_date|date:"Y-m-d h:i" }}</td>
                                            <td>{{ inv.note }}</td>
                                            <td>{% translate "No" %}</td>
                                        </tr>
                                    {% endfor %}
                                    {% for inv in complete_invoices %}
                                        <tr class="info">
                                            <td>
                                                <img src="{{ inv.character.portrait_url_32 }}" class="img-circle" />
                                            </td>
                                            <td>
                                                {{ inv.character }}
                                                <br />
                                                <span class="badge badge-default">{{ inv.character.character_ownership.user.profile.main_character.character_name }}</span></span>
                                            </td>
                                            <td>{{ inv.character.character_ownership.user.profile.main_character.corporation_name }}</td>
                                            <td style="white-space: nowrap;">{{ inv.amount|intcomma }}</td>
                                            <td style="white-space: nowrap;">{{ inv.invoice_ref }}</td>
                                            <td>{{ inv.due_date|date:"Y-m-d h:i" }}</td>
                                            <td>{% translate "Paid:" %} {{ inv.payment.date|date:"Y-m-d h:i" }}</td>
                                            <td>{% translate "Yes" %}</td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            {% if admin_invoices|length > 0 %}
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-heading text-center">
                            <h3 class="panel-title">{% translate "Outstanding Contributions" %}</h3>
                        </div>
                        <div class="panel-body">
                            {% if admin_invoices %}
                                <div class="col-md-12 table-responsive">
                                    <table class="table table-hover" id="paid-table" style="width:100%; vertical-align: middle;">
                                        <thead>
                                            <th></th>
                                            <th>{% translate "Character" %}</th>
                                            <th>{% translate "Corporation" %}</th>
                                            <th>{% translate "Alliance" %}</th>
                                            <th>{% translate "Amount" %}</th>
                                            <th>{% translate "Reference" %}</th>
                                            <th>{% translate "Due Date" %}</th>
                                            <th>{% translate "Note" %}</th>
                                            <th>{% translate "Character" %}</th>
                                            <th>{% translate "Main Character" %}</th>
                                        </thead>
                                        <tbody>
                                            {% for inv in admin_invoices %}
                                                <tr {% if inv.is_past_due %}class="danger"{% endif %}>
                                                    <td>
                                                        <img src="{{ inv.character.portrait_url_32 }}" class="img-circle" />
                                                    </td>
                                                    <td>
                                                        {{ inv.character }}
                                                        <br />
                                                        <span class="badge badge-default">{{ inv.character.character_ownership.user.profile.main_character.character_name }}</span></span>
                                                    </td>
                                                    <td>{{ inv.character.corporation_name }}</td>
                                                    <td>{{ inv.character.alliance_name }}</td>
                                                    <td style="white-space: nowrap;">{{ inv.amount|intcomma }}</td>
                                                    <td style="white-space: nowrap;">{{ inv.invoice_ref }}</td>
                                                    <td>{{ inv.due_date|date:"Y-m-d h:i" }}</td>
                                                    <td>{{ inv.note }}</td>
                                                    <td>{{ inv.character }}</td>
                                                    <td>{{ inv.character.character_ownership.user.profile.main_character.character_name }}</td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock content %}
{% block extra_css %}
    <style>
        .form-control {
            margin: 2px;
        }

        table.dataTable tbody td {
            vertical-align: middle;
        }
    </style>
    {% include "bundles/datatables-css.html" %}
{% endblock extra_css %}
{% block extra_javascript %}
    {% include "bundles/datatables-js.html" %}
    <script>
        ! function(t) {
            function e(t) {
                var e = {
                    columns: [],
                    columnsIdxList: [],
                    bootstrap: !1,
                    autoSize: !0,
                    label: "Filter "
                };
                if ("bootstrap" in t && "boolean" == typeof t.bootstrap && (e.bootstrap = t.bootstrap), "autoSize" in t && "boolean" == typeof t.autoSize && (e.autoSize = t.autoSize), "label" in t && "string" == typeof t.label && (e.label = t.label), "columns" in t)
                    for (var i = 0; i < t.columns.length; i++) {
                        var n = t.columns[i];
                        if ("idx" in n && "number" == typeof n.idx) {
                            var o = n.idx;
                            e.columns[o] = {
                                title: null,
                                maxWidth: null,
                                autoSize: !0
                            }, e.columnsIdxList.push(o), "title" in n && "string" == typeof n.title && (e.columns[o].title = n.title), "maxWidth" in n && "string" == typeof n.maxWidth && (e.columns[o].maxWidth = n.maxWidth), "autoSize" in n && "boolean" == typeof n.autoSize && (e.columns[o].autoSize = n.autoSize)
                        }
                    }
                return e
            }
            t(document).on("preInit.dt", function(i, n) {
                if ("dt" === i.namespace) {
                    var o = new t.fn.dataTable.Api(n),
                        a = o.table().node().id,
                        l = o.init();
                    if ("filterDropDown" in l) {
                        var r = e(l.filterDropDown);
                        if (0 != r.columns.length) {
                            var u = o.table().container(),
                                s = a + "_filterWrapper",
                                c = s + " " + (r.bootstrap ? "form-inline" : "");
                            t(u).prepend('<div id="' + s + '" class="' + c + '">' + r.label + "</div>"), o.columns(r.columnsIdxList).every(function() {
                                var e = this.index(),
                                    i = null !== r.columns[e].title ? r.columns[e].title : t(this.header()).html();
                                "" == i && (i = "column " + (e + 1));
                                var n = "form-control " + a + "_filterSelect",
                                    o = a + "_filterSelect" + e;
                                t("#" + s).append('<select id="' + o + '" class="' + n + '"></select>');
                                var l = t("#" + o).empty().append('<option value="">(' + i + ")</option>");
                            })
                        }
                    }
                }
            }), t(document).on("init.dt", function(i, n) {
                if ("dt" === i.namespace) {
                    var o = new t.fn.dataTable.Api(n),
                        a = o.table().node().id,
                        l = o.init();
                    if ("filterDropDown" in l) {
                        var r = e(l.filterDropDown);
                        o.table().container();
                        o.columns(r.columnsIdxList).every(function() {
                            var e = this,
                                i = e.index(),
                                n = t("#" + (a + "_filterSelect" + i));
                            n.on("change", function() {
                                var i = t.fn.dataTable.util.escapeRegex(t(this).val());
                                e.search(i ? "^" + i + "$" : "", !0, !1).draw()
                            }), e.data().unique().sort().each(function(t, e) {
                                "" != t && n.append('<option value="' + t + '">' + t + "</option>")
                            })
                        })
                    }
                }
            })
        }(jQuery);
    </script>
{% endblock extra_javascript %}
{% block extra_script %}
    $(document).ready(function() {
    $('#outstanding-table').DataTable({
    "filterDropDown": {
    columns: [
    {
    idx: 7
    }
    ]
    },
    "lengthMenu": [
    [25, 50, -1],
    [25, 50, "All"]
    ],
    "order": [
    [5, "asc"]
    ],
    "columnDefs": [{
    "visible": false,
    "targets": [7]
    },
    {
    "sortable": false,
    "targets": 0
    }]
    });
    $('#paid-table').DataTable({
    "filterDropDown": {
    columns: [{
    idx: 2
    },{
    idx: 3
    },{
    idx: 9
    }]
    },
    "lengthMenu": [
    [25, 50, -1],
    [25, 50, "All"]
    ],
    "order": [
    [6, "asc"]
    ],
    "columnDefs": [{
    "visible": false,
    "targets": [8,9]
    },
    {
    "sortable": false,
    "targets": 0
    }]
    });
    });
{% endblock extra_script %}