{% extends "base.html" %}

{% block content %}
    <form action="#" onsubmit="searchISBN()">
        <label for="isbn" id="id_isbn_label">ISBN :</label>
        <input type="text" id="isbn" autofocus />
        <input type="submit" id="isbn_search" />
    </form>
    <ul id="result"></ul>
{% endblock %}

{% block extrajavascript %}
    <script>
    function searchISBN() {
        let isbn = document.getElementById("isbn").value;
        let result_div = document.getElementById("result");
        result_div.innerHTML = "<li id='recap-isbn'>Recherche : " + isbn + "</li>";

        document.getElementById("isbn").value = "";
        document.getElementById("isbn").focus();

        let bd_request = new XMLHttpRequest();
        bd_request.open('GET', '/api/media/bd/?search=' + isbn, true);
        bd_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(bd => {
                result_div.innerHTML += "<li id='bd_" + bd.id + "'>" +
                    "<a href='/database/media/bd/" + bd.id + "/change/'>BD : "
                    + bd.title + (bd.subtitle ? " - " + bd.subtitle : "") + "</a></li>";
            });
        }
        bd_request.send();

        let manga_request = new XMLHttpRequest();
        manga_request.open('GET', '/api/media/manga/?search=' + isbn, true);
        manga_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(manga => {
                result_div.innerHTML += "<li id='manga_" + manga.id + "'>" +
                    "<a href='/database/media/manga/" + manga.id + "/change/'>Manga : "
                    + manga.title + (manga.subtitle ? " - " + manga.subtitle : "") + "</a></li>";
            });
        }
        manga_request.send();

        let cd_request = new XMLHttpRequest();
        cd_request.open('GET', '/api/media/cd/?search=' + isbn, true);
        cd_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(cd => {
                result_div.innerHTML += "<li id='cd_" + cd.id + "'>" +
                    "<a href='/database/media/cd/" + cd.id + "/change/'>CD : " + cd.title + "</a></li>";
            });
        }
        cd_request.send();

        let vinyle_request = new XMLHttpRequest();
        vinyle_request.open('GET', '/api/media/vinyle/?search=' + isbn, true);
        vinyle_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(vinyle => {
                result_div.innerHTML += "<li id='vinyle_" + vinyle.id + "'>" +
                    "<a href='/database/media/vinyle/" + vinyle.id + "/change/'>Vinyle : " + vinyle.title + "</a></li>";
            });
        }
        vinyle_request.send();

        let roman_request = new XMLHttpRequest();
        roman_request.open('GET', '/api/media/roman/?search=' + isbn, true);
        roman_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(roman => {
                result_div.innerHTML += "<li id='roman_" + roman.id + "'>" +
                    "<a href='/database/media/roman/" + roman.id + "/change/'>Roman : " + roman.title + "</a></li>";
            });
        }
        roman_request.send();

        let future_request = new XMLHttpRequest();
        future_request.open('GET', '/api/media/future/?search=' + isbn, true);
        future_request.onload = function () {
            let data = JSON.parse(this.response);
            data.results.forEach(future => {
                result_div.innerHTML += "<li id='future_" + future.id + "'>" +
                    "<a href='/database/media/future/" + future.id + "/change/'>Medium non traité : "
                    + future.title + "</a></li>";
            });
        }
        future_request.send();
    }
    </script>
{% endblock %}