{% extends "blacklist/base.html" %}
{% load i18n %}
{% load humanize %}
{% load blacklist_tags %}

{% block header_nav_brand %}
    {% translate "Pilot Log" %}
{% endblock %}
{% block page_title %}
    {% translate "Pilot Log" %}
{% endblock page_title %}

{% block header_nav_collapse_right %}
    <li>
        {% if add_note %}
            <li class="nav-item">
                <a
                    id="add-new"
                    href="{{ url }}"
                    class="nav-link py-lg-0"
                    data-bs-toggle="modal"
                    data-bs-target="#modal-main">
                    <span class="btn btn-success d-none d-lg-inline-block">
                        <i class="fas fa-plus me-2"></i>
                        {% translate "Add New" %}
                    </span>
                    <span class="d-inline-block d-lg-none">
                        <i class="fas fa-plus me-2"></i>
                        {% translate "Add New" %}
                    </span>
                </a>
            </li>
        {% endif %}

        {% if search_char %}
            {% include "framework/header/nav-collapse-button.html" with btn_modifier="secondary" url="/blacklist/set/" title=search_char.character_name %}
        {% else %}
            {% include "framework/header/nav-collapse-button.html" with btn_modifier="warning" url="/blacklist/set/" title="Select Search Char!" %}
        {% endif %}
    </li>
{% endblock %}

{% block tb_block %}
    <div id="all-notes">
        <table class="table table-striped text-nowrap" id="notes-table" style="width: 100%;">
            <thead>
                <tr>
                    <th></th>
                    <th>{% translate "Name" %}</th>
                    <th>{% translate "Date Added" %}</th>
                    <th>{% translate "Added By" %}</th>
                    <th>{% translate "Reason" %}</th>
                    <th>{% translate "Category" %}</th>
                    <th>{% translate "Corporation" %}</th>
                    <th>{% translate "Alliance" %}</th>
                    <th class="text-end">{% translate "Actions" %}</th>
                </tr>
            </thead>
        </table>
    </div>

    <div class="modal fade modal-xl" id="modal-main" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="main-modal-title">
                        <!-- Stuff goes here -->
                    </h5>
                </div>
                <div id="main-modal-body" class="modal-body"  style="overflow-y:auto;">
                    <!-- stuff goes here -->
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    <script src="https://cdn.datatables.net/2.3.6/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/2.3.6/js/dataTables.bootstrap5.js"></script>
    <script src="https://cdn.datatables.net/columncontrol/1.2.0/js/dataTables.columnControl.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.8/js/dataTables.responsive.min.js" integrity="sha384-jp1JS4vMvRmld4ZK9Co4AZftrm1tt3FbEZrCdFZIcoRiazQGkTqOS1QqI060oG2F" crossorigin="anonymous"></script>
    <script src="https://cdn.datatables.net/responsive/3.0.8/js/responsive.bootstrap5.js" integrity="sha384-hyp/YDWGBMFqg7pJuS+y+2VWJkwnOyX+oMN9fWcxINo2flqjC/SdNaHj8LIV4zKJ" crossorigin="anonymous"></script>
    <script>
        const token = document.getElementsByName('csrfmiddlewaretoken')[1].value;

        // Elems
        const searchModal = new bootstrap.Modal(document.getElementById('modal-main'))
        const addNewButton = document.getElementById('add-new')

        const loaderSpinner = `
            <div class="text-center">
                <div class="spinner-border" style="width: 6rem; height: 6rem;" role="status">
                    <span class="sr-only">Loading...</span>
                </div>
            </div>
        `;

        // URLS
        const search_url = "{% url 'blacklist:search_names' %}";
        const modal_comment_url = "{% url 'blacklist:modal_comment' 923456789 %}";
        const modal_edit_url = "{% url 'blacklist:modal_edit' 923456789 %}";
        const modal_add_comment_url = "{% url 'blacklist:modal_add_comment' 923456789 %}";
        const modal_add_url = "{% url 'blacklist:modal_add' 923456789 %}";

        // utils
        const replaceIDInURL = (url, id) => {
            return url.replace('923456789', id);
        };

        const updateModal = (title, body) => {
            const modalTitle = document.getElementById('main-modal-title')
            const modalBody = document.getElementById('main-modal-body')
            modalTitle.innerHTML = title;
            modalBody.innerHTML = body;
        };

        const getHTML = (response) => {
            const parser = new DOMParser()
            return parser.parseFromString(response.body, "text/html")
        };

        const search = (name) => {
            const search_data = new FormData();
            search_data.append("name", name);
            updateModal(
                `Searching for ${name}...`,
                loaderSpinner
            )
            fetch(
                search_url,
                {
                    headers: {
                        'X-CSRFToken': token,
                    },
                    method:"POST",
                    body:search_data,
                }
            ).then(
                response => {return response.text()}
            ).then( text => {
                    updateModal(
                        "Search",
                        text
                    )
                    setupSearch();
                }
            );
        };

        const addNote = (id) => {
            updateModal(
                `Collecting Detail...`,
                loaderSpinner
            )
            fetch(
                replaceIDInURL(modal_add_url, id),
                {
                    headers: {
                        'X-CSRFToken': token,
                    },
                    method:"POST",
                }
            ).then(
                response => {return response.text()}
            ).then( text => {
                    updateModal(
                        "Add New",
                        text
                    )
                }
            );
        };

        const setupSearch = () => {
            const token = document.getElementsByName('csrfmiddlewaretoken')[1].value;
            const searchButton = document.getElementById('search-submit');
            searchButton.addEventListener(
                "click",
                function() {
                    var name = document.getElementById('id_name').value;
                    search(name);
                }
            );
            const addButtons = document.getElementsByClassName('add-new-btn');
            for (var i = 0; i < addButtons.length; i++) {
                addButtons[i].addEventListener(
                    'click',
                    function() {
                        addNote(this.id)
                    },
                    false
                );
            }
            console.log("find table");
            $("#searched-names").DataTable({
                columnDefs: [
                    {
                        targets: [0,3],
                        columnControl: [],
                        sortable: false,
                        searchable: false

                    },
                    {
                        targets: [1,2,3],
                        columnControl: [
                            {
                                target: 0,
                                content: []
                            },
                            {
                                target: 1,
                                content: ['search']
                            }
                        ],
                    },
                ],
                order: [[1, "asc"]],
                pageLength: 10,
                responsive: true,
            });
        };

        const search_post = (title, body) => {
            updateModal(
                title,
                body
            );
        };

        // Main
        addNewButton.addEventListener(
            "click",
            function() {
                updateModal(
                    this.title,
                    loaderSpinner
                );
                fetch(
                    search_url
                ).then(
                    response => {return response.text()}
                ).then(text => {
                        updateModal(
                            "Search",
                            text
                        )
                        setupSearch()
                    }
                );
            }
        );

        $(document).ready(function () {
            $("#notes-table").DataTable({
                serverSide: true,
                ajax: "{% url 'blacklist:evenote_table' %}",
                columnDefs: [
                    {
                        targets: [0,2],
                        columnControl: [],
                        sortable: false,
                        searchable: false

                    },
                    {
                        targets: [1,3,4],
                        columnControl: [
                            {
                                target: 0,
                                content: []
                            },
                            {
                                target: 1,
                                content: ['search']
                            }
                        ],
                    },
                    { searchable: false, targets: [0] },
                    { sortable: false, targets: [0, 4, 8] },
                    { visible: false, targets: [5, 6, 7] },
                    { responsivePriority: 1, targets: [ 1, 4, 8, ] },
                    { responsivePriority: 99999999, targets: [ 0, ] }
                ],
                order: [
                    [1, "asc"]
                ],
                pageLength: 10,
                responsive: true,
                drawCallback: function(settings){
                    const commentButtons = document.getElementsByClassName('modal-comments-button')
                    const addCommentButtons = document.getElementsByClassName('modal-add-comment-button')

                    for (var i = 0; i < commentButtons.length; i++) {
                        commentButtons[i].addEventListener(
                            'click',
                            function() {
                                console.log("COMMENT", this.id)
                                updateModal(
                                    `Fetching Comments`,
                                    loaderSpinner
                                )
                                searchModal.show();
                                fetch(
                                    replaceIDInURL(modal_comment_url, this.id),
                                    {
                                        headers: {
                                            'X-CSRFToken': token,
                                        },
                                        method:"POST",
                                    }
                                ).then(
                                    response => {return response.text()}
                                ).then( text => {
                                        updateModal(
                                            "Comments",
                                            text
                                        )
                                    }
                                );

                            },
                            false
                        );
                    }

                    for (var i = 0; i < addCommentButtons.length; i++) {
                        addCommentButtons[i].addEventListener(
                            'click',
                            function() {
                                console.log("ADD COMMENT", this.id)
                                updateModal(
                                    `Fetching Comments`,
                                    loaderSpinner
                                )
                                searchModal.show();
                                fetch(
                                    replaceIDInURL(modal_add_comment_url, this.id),
                                    {
                                        headers: {
                                            'X-CSRFToken': token,
                                        },
                                        method:"POST",
                                    }
                                ).then(
                                    response => {return response.text()}
                                ).then( text => {
                                        updateModal(
                                            "Comments",
                                            text
                                        )
                                    }
                                );
                            },
                            false
                        );
                    }
                }
            });
        });
    </script>
{% endblock %}
{% block extra_css %}
    <link rel="stylesheet" href="https://cdn.datatables.net/2.3.6/css/dataTables.bootstrap5.css" />
    <link href="https://cdn.datatables.net/columncontrol/1.2.0/css/columnControl.bootstrap5.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/responsive/3.0.8/css/responsive.bootstrap5.min.css" rel="stylesheet" integrity="sha384-seyUnB//1QOFEqox9uI7YTLBgz9jBwFRqZvsEPFrTw6NAsFEo70nhBWsQfODqiYA" crossorigin="anonymous">

{% endblock %}