{% extends 'blacklist/base.html' %}
{% load evelinks %}
{% load i18n %}
{% load humanize %}

{% block page_title %}{% trans "Pilot Log" %}{% endblock %}

{% block tb_block %}
    {% translate "Pilot Log" as translated_header %}
    {% include "tnnt_templates/includes/header/page-header.html" with header_text=translated_header %}

    <div class="panel panel-default clearfix">
        <div class="panel-heading">
            <div class="panel-title">
                {% translate "All Notes" %}

                <div class="pull-right" style="margin-top: -7px;">
                    {% if add_note %}
                        <button class="btn btn-success modal-add-new" title="Add New">{% translate "Add New" %}</button>
                    {% endif %}

                    <button class="btn btn-default" title="{% translate 'Select Search Character' %}" href="/blacklist/set/">
                        {% if search_char %}
                            {{search_char.character_name}}
                        {% else %}
                            {% translate "Select Search Character!" %}
                        {% endif %}
                    </button>
                </div>
            </div>
        </div>

        <div class="panel-body clearfix" id="all-notes">
            {% if notes %}
                <table class="table table-striped" style="width: 100%;" id="notes-table">
                    <thead>
                        <tr>
                            <th style="max-width: 64px;"></th>
                            <th>{% translate "Name" %}</th>
                            <th>{% translate "Date Added" %}</th>
                            <th>{% translate "Added By" %}</th>
                            <th>{% translate "Reason" %}</th>
                            <th>{% translate "Added By" %}</th>
                            <th>{% translate "Category" %}</th>
                            <th>{% translate "Corporation" %}</th>
                            <th>{% translate "Alliance" %}</th>
                            <th></th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for note in notes %}
                            <tr>
                                <td>
                                    {% if note.eve_catagory == "character" %}
                                        <img src="{{ note.eve_id|character_portrait_url:64 }}" alt="{{ note.eve_name }}" title="{{ note.eve_name }}">
                                    {% elif note.eve_catagory == "corporation" %}
                                        <img src="{{ note.eve_id|corporation_logo_url:64 }}" alt="{{ note.eve_name }}" title="{{ note.eve_name }}">
                                    {% elif note.eve_catagory == "alliance" %}
                                        <img src="{{ note.eve_id|alliance_logo_url:64 }}" alt="{{ note.eve_name }}" title="{{ note.eve_name }}">
                                    {% endif %}
                                </td>

                                <td>
                                    <p>
                                        {{ note.eve_name }}

                                        {% if note.eve_catagory == 'character' %}
                                            <br><span class="label label-default">{{ note.corporation_name }}</span>
                                            <br><span class="label label-default">{{ note.alliance_name|default_if_none:'' }}</span>
                                        {% endif %}

                                        {% if note.blacklisted %}
                                            <br><span class="label label-danger">{% translate "BLACKLISTED" %}</span>
                                        {% endif %}

                                        {% if note.restricted %}
                                            <br><span class="label label-warning">{% translate "RESTRICTED" %}</span>
                                        {% endif %}
                                    </p>
                                </td>

                                <td>
                                    <p>
                                        {{ note.added_at|date:"Y-m-d H:i"}}</p><p>{{ note.added_at|naturaltime }}
                                    </p>
                                </td>

                                <td>
                                    <p>{{ note.added_by }}</p>
                                </td>

                                <td>
                                    <p>{{ note.reason }}</p>
                                </td>

                                <!-- for filtering -->
                                <td>{{ note.added_by }}</td>
                                <td>{{ note.eve_catagory }}</td>
                                <td>{{ note.corporation_name }}</td>
                                <td>{{ note.alliance_name }}</td>
                                <td>
                                    <div class="text-right">
                                        {% if view_comment or add_comment %}
                                            <button class="btn btn-primary btn-sm modal-comments-button" id="{{ note.id }}"  title="Comments for: {{note.eve_name}}">
                                                <i class="fa fa-comments"></i>
                                            </button>
                                        {% endif %}

                                        {% if edit_note %}
                                            <button class="btn btn-info btn-sm modal-edit-button" id="{{ note.id }}" title="Edit: {{note.eve_name}}">
                                                <i class="fa fa-edit"></i>
                                            </button>
                                        {% endif %}

                                        {% if add_comment %}
                                            <button class="btn btn-primary btn-sm modal-add-comment-button" id="{{ note.id }}" title="Add Comment for: {{note.eve_name}}">
                                                <i class="fa fa-comment"></i>
                                            </button>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <div class="alert alert-warning text-center">{% translate "No notes have been added!" %}</div>
            {% endif %}
        </div>
    </div>

    <div class="modal fade" id="modal-main" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>

                    <div class="modal-title" id="main-modal-title"></div>
                </div>

                <div id="main-modal-body" class="modal-body"  style="overflow-y:auto;"></div>
            </div>
        </div>
    </div>
{% endblock %}

{% 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>

    <script>
        $('.modal-comments-button').on('click', function () {
            let url = '{% url "blacklist:modal_comment" 123456 %}';
            const id = this.id;
            const title = this.title;

            url = url.replace('123456', id);

            $.get(url, function (data) {
                {#console.log(data);#}

                const modal_body = $('#main-modal-body')[0];
                const modal_title = $('#main-modal-title')[0];

                modal_title.innerHTML = title;
                modal_body.innerHTML = data;

                $('#modal-main').modal();
            });
        });

        $('.modal-edit-button').on('click', function () {
            let url = '{% url "blacklist:modal_edit" 123456 %}';
            const id = this.id;
            const title = this.title;

            url = url.replace('123456', id);

            $.get(url, function (data) {
                {#console.log(data);#}

                const modal_body = $('#main-modal-body')[0];
                const modal_title = $('#main-modal-title')[0];

                modal_title.innerHTML = title;
                modal_body.innerHTML = data;

                $('#modal-main').modal();
            });
        });

        $('.modal-add-comment-button').on('click', function () {
            let url = '{% url "blacklist:modal_add_comment" 123456 %}';
            const id = this.id;
            const title = this.title;

            url = url.replace('123456', id);

            $.get(url, function (data) {
                {#console.log(data);#}

                const modal_body = $('#main-modal-body')[0];
                const modal_title = $('#main-modal-title')[0];

                modal_title.innerHTML = title;
                modal_body.innerHTML = data;

                $('#modal-main').modal();
            });
        });

        $('.modal-add-new').on('click', function () {
            const url = '{% url "blacklist:search_names" %}';
            const id = this.id;
            const title = this.title;

            function search () {
                const url = '{% url "blacklist:search_names" %}';
                const title = this.title;

                const search_data = {'name': $('#id_name').val()};
                const token = document.getElementsByName('csrfmiddlewaretoken')[1].value;
                const modal_body = $('#main-modal-body')[0];

                modal_body.innerHTML = '<div class="text-center">' +
                    '<div class="lds-ellipsis">' +
                    '<div></div>' +
                    '<div></div>' +
                    '<div></div>' +
                    '<div></div>' +
                    '</div>' +
                    '</div>';

                $.ajax({
                    headers: {'X-CSRFToken': token},
                    method: 'POST',
                    url: url,
                    data: search_data,
                    success: search_post
                });
            }

            function search_post (data) {
                {#console.log(data);#}

                let modal_body = $('#main-modal-body')[0];
                const modal_title = $('#main-modal-title')[0];

                modal_title.innerHTML = title;
                modal_body.innerHTML = data;

                $('#modal-main').modal();

                $('#id_name').keypress(function (event) {
                    const keycode = (event.keyCode ? event.keyCode : event.which);

                    if (keycode === '13') {
                        event.preventDefault();
                        search();
                    }
                });

                $('.search-submit').on('click', function () {
                    modal_body = $('#main-modal-body')[0];

                    search();
                });

                $('.add-new-btn').on('click', function () {
                    let url = '{% url "blacklist:modal_add" 123456 %}';
                    const id = this.id;
                    const title = this.title;

                    url = url.replace('123456', id);

                    const modal_body = $('#main-modal-body')[0];
                    const token = document.getElementsByName('csrfmiddlewaretoken')[1].value;

                    modal_body.innerHTML = '<div class="text-center">' +
                        '<div class="lds-ellipsis">' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '<div></div>' +
                        '</div>' +
                        '</div>';

                    $.ajax({
                        headers: {'X-CSRFToken': token},
                        method: 'POST',
                        url: url,
                        success: search_post
                    });
                });

                $('#searched-names').DataTable({
                    'filterDropDown': {
                        columns: [{
                            idx: 2
                        }],
                        bootstrap: true
                    },
                    'columnDefs': [
                        {'searchable': false, 'targets': [0, 3]},
                        {'sortable': false, 'targets': [0, 3]}
                    ],
                    'order': [
                        [1, 'asc']
                    ],
                    'pageLength': 10,
                    'responsive': true
                });
            }

            $.get(url, search_post);
        });

        $('#modal-main').on('hide.bs.modal', () => {
            const modal_body = $('#main-modal-body');

            modal_body.html('');
        });

        $(document).ready(function () {
            $('#notes-table').DataTable({
                'filterDropDown': {
                    columns: [
                        {idx: 5},
                        {idx: 6},
                        {idx: 7},
                        {idx: 8}
                    ],
                    bootstrap: true
                },
                'columnDefs': [
                    {'searchable': false, 'targets': [0]},
                    {'sortable': false, 'targets': [0, 4, 9]},
                    {'visible': false, 'targets': [5, 6, 7, 8]}

                ],
                'order': [
                    [1, 'asc']
                ],
                'pageLength': 25,
                'responsive': true
            });
        });
    </script>
{% endblock %}
