{{ define "delete_player" }}

<div class="modal fade" id="deletePlayerModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-3 text-danger fw-bold" id="deletePlayerModalLabel">Spieler löschen</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body fs-5">
                Möchtest du den Spieler <span class="text-warning fw-bold" id="player"></span> wirklich löschen?
                <br><br>
                Die Aktion kann nicht rückgängig gemacht werden.
            </div>
            <div class="modal-footer">
                <button type="submit" name="submit" class="btn btn-lg btn-danger">Löschen</button>
                <button type="button" class="btn btn-lg btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
            </div>
        </div>
    </div>
</div>

<script lang="javascript">
    document.addEventListener('DOMContentLoaded', function() {
        const deletePlayerModal = document.getElementById('deletePlayerModal')
        const deletePlayerModalBS = new bootstrap.Modal('#deletePlayerModal');
        if (deletePlayerModal) {
            deletePlayerModal.addEventListener('show.bs.modal', event => {
                const button = event.relatedTarget;
                const playerId = parseInt(button.getAttribute('data-bs-id'));

                const selectedPlayer = button.closest('.input-group').querySelector('span').innerText;
                const modalBodyInput = deletePlayerModal.querySelector('#player');
                modalBodyInput.innerText = selectedPlayer;

                const playerListId = button.closest('ul').parentElement.parentElement.id;
                const homeClanListIndex = document.getElementById('home-clan').selectedIndex;
                const oppClanListIndex = document.getElementById('opponent-clan').selectedIndex;

                const submitButton = deletePlayerModal.querySelector('button[name="submit"]');
                submitButton.addEventListener('click', function () {
                    fetch("/player/" + playerId, {
                        method: "DELETE",
                        headers: {
                            "Content-type": "application/json; charset=UTF-8"
                        }
                    })
                        .then(() => {
                            const sameClan = homeClanListIndex === oppClanListIndex;
                            if (playerListId === 'home-player-list' || sameClan)
                                htmx.ajax('GET', '/players_html', {target: '#home-player-list', values: {"clan_id": getSelectedClanId("home-clan")}});
                            if (playerListId === 'opponent-player-list' || sameClan)
                                htmx.ajax('GET', '/players_html', {target: '#opponent-player-list', values: {"clan_id": getSelectedClanId("opponent-clan")}});

                            deletePlayerModalBS.hide();
                        })
                        .catch((error) => {
                            alert('Fehler beim Löschen des Spielers: ' + error.message);
                        });
                }, { once: true });
            });
        }
    });
</script>

{{ end }}