<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Link Page</title>
    <style>
        #loading {
            display: none;
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3498db;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<body>
    <h1>Links</h1>
    <form id="articleForm">
        <pre>
    Per vedere la lista -> "LIBRI IN PREVENDITA"
    in <span style="color: green;">VERDE</span> quelli in PreOrdine 
    in <span style="color: red;">ROSSO</span> quelli ancora non abilitati.
    cliccare sul link <span style="font-weight: bold;">Imposta in PREORDINE"</span> per abilitarlo.
</pre>
        <label for="article_id">ID Articolo or Ordine:</label>
        <input type="text" id="article_id" name="id" value="{{$id}}" />
        <input type="text" id="action" name="action" value="{{$action}}" hidden />
        <br>
        <button type="button" data-action="search">Cerca Articolo</button>
        <button type="button" data-action="search_isbn">Cerca ISBN</button>
        <button type="button" data-action="updateArtFromGM">Aggiorna Articolo da GM</button>
        <button type="button" data-action="checkPrevendita">E' in PreVendita?</button>
        <button type="button" data-action="setPreOrder">Impostalo in PreVendita!</button>
        <button type="button" data-action="setDataPubblicazione">Aggiorna Data Pubblicazione</button>
        <button type="button" data-action="showDettSingleOrdine">Dett. Ordine</button>
        <button type="button" data-action="showDettSingleOrdineWeb">Dett. Ordine Web</button>
        <br><br>

        <button type="button" data-action="showTest">Test</button>
        <button type="button" data-action="inprevendita">Libri in Prevendita</button>
        <button type="button" data-action="cartolibri">Cartolibri</button>
        <button type="button" data-action="riviste">Riviste</button>
        <button type="button" data-action="showOrdini">Mostra Ordini</button>
        <button type="button" data-action="showOrdiniWeb">Mostra Ordini Web</button>
        <button type="button" data-action="showArticoliFatturatiWeb">Mostra Fatturati</button>
        <button type="button" data-action="Vendite">Vendite</button>

        <button type="button" data-action="showDettOrdini">Dettaglio Ordini</button>
        <button type="button" data-action="showDettOrdiniWeb">Dettaglio Ordini Web</button>
    </form>
    <div>
        <a href="http://vps-88271abb.vps.ovh.net/apimacro/public/view-articles-sales" target="_blank">Articoli
            Venduti</a><br>
            
    </div>
    <div id="result"></div>
    <div id="loading"></div>

    <script>
        const form = document.getElementById('articleForm');
        const result = document.getElementById('result');
        const loading = document.getElementById('loading');

        const buttons = form.querySelectorAll('button');
        buttons.forEach(button => button.addEventListener('click', handleButtonClick));

        function handleButtonClick(event) {
            let action = event.target.dataset.action;
            let id = '0';
            try {
                id = form.querySelector('input[name="id"]').value;
                if (!action) {
                    action = form.querySelector('input[name="action"]').value;
                }
            } catch (e) {
                id = 0;
            }

            if (!id) {
                id = 0;
            }

            loading.style.display = 'block'; // Mostra la clessidra

            let baseUrl = window.location.href;
            baseUrl = baseUrl.slice(0, baseUrl.lastIndexOf('/'));

            fetch(`${baseUrl}/handle-article-action-pao/${id}/${action}`)
                .then(response => response.text())
                .then(data => {
                    result.innerHTML = data;
                    loading.style.display = 'none'; // Nasconde la clessidra una volta completato
                });
        }
    </script>
</body>

</html>