{% extends "base.html" %}

{% block header %}
Audit Fitting
{% endblock %}

{% block description %}
{{object.name}}
<p id="{{object.pk}}" class="fitting-id" hidden></p>
{% endblock %}



{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="box box-danger box-solid">
            <div class="box-header">
                <h3 class="box-title">Pilot Check</h3>
            </div>
            <div class="box-body">
                <div class="dataTables_wrapper form-inline dt-bootstrap">
                    <table class="table table-bordered table-striped dataTable">
                        <thead>
                            <th class="col-lg-1 col-md-1 col-xs-1"></th>
                            <th class="col-lg-3 col-md-3 col-xs-2">Character Name</th>
                            <th class="col-lg-2 col-md-2 hidden-xs">Skill Check</th>
                            <th class="col-lg-2 col-md-2 hidden-xs">Hangar Check</th>
                        </thead>
                        <tbody>
                            {% for character in object.character_list %}
                            <tr>
                                <td class="text-center">
                                    <img src="https://imageserver.eveonline.com/Character/{{character.external_id}}_64.jpg"
                                        class="img-circle" alt="Avatar" width="32px"
                                        title="{{character.character.name}}">
                                </td>
                                <td>
                                    {{character.name}}
                                </td>
                                <td id="s_{{character.external_id}}" class="skillcheck">
                                    <i class="fa fa-1x fa-spinner fa-spin" aria-hidden="true"></i>

                                </td>
                                <td id="h_{{character.external_id}}" class="hangarcheck">
                                    <i class="fa fa-1x fa-spinner fa-spin" aria-hidden="true"></i>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block scripts %}
<script>
    $.fn.DataTable.ext.pager.numbers_length = 5;
    $(function () {
        $('table').DataTable({
            'paging': true,
            'lengthChange': true,
            'searching': true,
            'ordering': true,
            'order': [[1, 'asc']],
            'pageLength': 5,
            "autoWidth": false,
        })
    })
</script>

<script>
    document.addEventListener("DOMContentLoaded", async function () {
        var fittingId = document.querySelectorAll('.fitting-id')[0].id
        var skillCheckObjects = document.querySelectorAll('.skillcheck')
        var hangarCheckObjects = document.querySelectorAll('.hangarcheck')

        for (var i = 0; i < skillCheckObjects.length; i++) {
            const id = skillCheckObjects[i].id.slice(2)
            const res = await fetch('/eveonline/api/skillcheck?external_id=' + id + '&fitting_id=' + fittingId)
            if (res.status == 204) {
                skillCheckObjects[i].innerHTML = '<i class="fa fa-check text-success"></i>'
            }
            else {
                skillCheckObjects[i].innerHTML = '<i class="fa fa-times text-danger"></i>'
            }

        }

        for (var i = 0; i < hangarCheckObjects.length; i++) {
            const id = hangarCheckObjects[i].id.slice(2)
            const res = await fetch('/eveonline/api/hangarcheck?external_id=' + id + '&fitting_id=' + fittingId)
            if (res.status == 204) {
                hangarCheckObjects[i].innerHTML = '<i class="fa fa-check text-success"></i>'
            }
            else {
                hangarCheckObjects[i].innerHTML = '<i class="fa fa-times text-danger"></i>'
            }
        }
    })
</script>
{% endblock %}