    <style>
        .tab-buttons {
            display: flex;
            border-bottom: 2px solid #ccc;
        }
        .tab-buttons button {
            flex: 1;
            padding: 10px;
            cursor: pointer;
            background: #fff;
            border: none;
            border-bottom: 3px solid transparent;
            font-weight: bold;
        }
        button.tab-btn {
            display: flex;
            align-items: center;
            gap: .5rem;
            justify-content: center;
        }
        button.tab-btn svg {
            height: 1rem;
            display: none;
        }
        .tab-buttons button.active {
            background: #f1f1f1;
            border-bottom: 3px solid #0073aa;
            color: #0073aa;
        }
        .tab-content {
            display: none;
            padding: 20px;
            background: #fff;
        }
        .tab-content.active {
            display: block;
        }
        .form-item {
            display: flex;
            flex-direction: column;
            gap: .5rem;
        }
        form.tessera-calarena-form {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .form-item.calarena-checkbox-item {
            flex-direction: row;
            display: flex;
            align-items: center;
        }
        .form-item select, .form-item input {
            padding-top: .25rem;
            padding-bottom: .25rem;
            padding-left: .25rem;
            padding-right: .25rem;
            border: 1px solid #ccc;
            background: #fff;
            font-size: 1rem;
        }
        .form-item-submit button {
            background: #f79239;
            color: #fff;
            font-weight: bold;
            border: 0;
            padding: .5rem 1rem;
            box-sizing: border-box;
            cursor: pointer;
        }
        .calarena-ingressi-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
        @media screen and (min-width: 1200px) {
            button.tab-btn {
                justify-content: flex-start;
            }
            button.tab-btn svg {
                display: block;
            }
            .tab-wrapper {
                display: flex;
                align-items: flex-start;
                /* max-width: 1000px; */
            }
            .tab-buttons {
                display: flex;
                flex-direction: column;
                width: 25%;
                justify-content: flex-start;
            }
            .tab-content-wrapper {
                flex: 1;
                border-left: 2px solid #f1f1f1;
            padding-left: 2rem;
            }
            .tab-buttons {
                border-bottom: none;
            }
            .calarena-ingressi-grid {
            grid-template-columns: repeat(4, 1fr);
            }
        }
        form.tessera-calarena-form label {
            font-weight: bold;
        }
        .calarena-success-wrapper {
            background: #f1f1f1;
            padding: .5rem;
        }
        .calarena-error-wrapper {
            background: #9e1818;
            color: #fff;
            padding: .5rem;
        }
        .calarena-ingressi-item {
            background: #fff;
            text-align: center;
            padding: .25rem;
        }
        .modifica-ingressi-btn, .cancella-tessera-btn { display: none !important; }    </style>

            <div class="tab-wrappera">
            <div class="tab-content active" id="tab-all-users">
                <div id="controlla-ingressi-main-wrapper">
                    <form id="calarena-controlla-ingressi-form" class="tessera-calarena-form">
                        <p style="margin-top: 0; margin-bottom: 1rem;">È possibile consultare i dati di una tessera (data creazione, saldo ingressi disponibili, data degli ingressi, etc.) inserendone il codice nel box sottostante.</p>
                        <div class="form-item calarena-text-item">
                            <label for="controllo_ingresso_numero_tessera">Inserisci codice tessera:</label>
                            <input type="text" name="controllo_ingresso_numero_tessera" required placeholder="Codice seriale della tessera">
                        </div>
                        <div class="form-item-submit">
                            <button type="submit">Controlla gli ingressi</button>
                        </div>
                    </form>
                    <div id="controlla-ingressi-feedback" style="margin-top: 1em;"></div>
                </div>
                    <script>
                    jQuery(document).ready(function($) {
                        $('#calarena-controlla-ingressi-form').on('submit', function(e) {
                            e.preventDefault();

                            let ingresso_numero_tessera = $('input[name="controllo_ingresso_numero_tessera"]').val();
                            // Svuota il form
                            $(this).trigger('reset');

                            // Pulisce eventuali feedback precedenti
                            $('#controlla-ingressi-feedback').html('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_7NYg{animation:spinner_0KQs 1.2s cubic-bezier(0.52,.6,.25,.99) infinite}@keyframes spinner_0KQs{0%{r:0;opacity:1}100%{r:11px;opacity:0}}</style><circle class="spinner_7NYg" cx="12" cy="12" r="0"/></svg>');
                            
                            $.ajax({
                                type: 'POST',
                                url: 'https://www.lidocalarena.it/wp-admin/admin-ajax.php',
                                data: {
                                    action: 'calarena_controlla_ingressi',
                                    ingresso_numero_tessera: ingresso_numero_tessera,
                                    nonce: '7bb8c01149'
                                },
                                success: function(response) {
                                    if (response.success) {
                                        const data = response.data;

                                        let html = `
                                            <div class="calarena-success-wrapper"sss>
                                                <p>Codice tessera: <strong>${data.codice}</strong></p>
                                                <p>Data di creazione: <strong>${data.data_creazione}</strong></p>
                                                <p>Postazione: <strong>${data.postazione_cliente}</strong></p>
                                                <p>Ingressi totali: <strong>${data.ingressi_totali}</strong></p>
                                                <p>Ingressi residui: <strong>${data.ingressi_residui}</strong></p>
                                        `;

                                        if (data.ingressi_registrati.length > 0) {
                                            html += `
                                            <p>Ingressi registrati:</p>
                                            <div class="calarena-ingressi-grid">
                                            `;

                                            let dataIngressi = data.ingressi_registrati;
                                            let dataIngressiReversed = dataIngressi.reverse();
                                            dataIngressiReversed.forEach(function(data_ingresso) {
                                                html += `
                                                    <div class="calarena-ingressi-item">
                                                        ${data_ingresso}
                                                    </div>
                                                `;
                                            });

                                            html += `
                                                </div>
                                            `;
                                        } else {
                                            html += `<p><em>Nessun ingresso registrato.</em></p>`;
                                        }

                                        html += `<p><em>Tessera utilizzabile solamente nella corrente stagione balneare</em></p>`;
                                        html += `</div>`;

                                        $('#controlla-ingressi-feedback').html(html);
                                    } else {
                                        $('#controlla-ingressi-feedback').html('<div class="calarena-error-wrapper"><p>Errore: ' + response.data + '</p></div>');
                                    }
                                },
                                error: function() {
                                    $('#controlla-ingressi-feedback').html('<div class="calarena-error-wrapper"><p>Errore di comunicazione col server.</p></div>');
                                }
                            });
                        });
                    });
                    </script>
            </div>
        </div>
    
    <script>
    // Gestion tabs
    document.addEventListener('DOMContentLoaded', function() {
        const buttons = document.querySelectorAll('.tab-btn');
        const contents = document.querySelectorAll('.tab-content');

        const feedbackDivs = [
            '#controlla-ingressi-feedback',
            '#recupera-tessera-feedback',
            '#registra-ingresso-feedback',
            '#creazione-tessera-feedback'
        ];

        buttons.forEach(btn => {
            btn.addEventListener('click', () => {
                buttons.forEach(b => b.classList.remove('active'));
                contents.forEach(c => c.classList.remove('active'));

                btn.classList.add('active');
                const target = document.getElementById(btn.dataset.tab);
                if (target) target.classList.add('active');

                // Svuota i div di feedback
                feedbackDivs.forEach(selector => {
                    const el = document.querySelector(selector);
                    if (el) el.innerHTML = '';
                });
            });
        });
    });
    </script>

    {"id":4636,"date":"2020-01-31T13:43:07","date_gmt":"2020-01-31T12:43:07","guid":{"rendered":"https:\/\/www.lidocalarena.it\/?page_id=4636"},"modified":"2025-06-13T15:16:31","modified_gmt":"2025-06-13T13:16:31","slug":"card-management","status":"publish","type":"page","link":"https:\/\/www.lidocalarena.it\/en\/card-management\/","title":{"rendered":"Card management"},"content":{"rendered":"<p>[vc_row row_content_width=&#8221;grid&#8221; css=&#8221;.vc_custom_1749565822582{margin-top: 20px !important;padding-top: 50px !important;padding-bottom: 50px !important;}&#8221;][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row row_content_width=&#8221;grid&#8221; css=&#8221;.vc_custom_1749565822582{margin-top: 20px !important;padding-top: 50px !important;padding-bottom: 50px !important;}&#8221;][vc_column][vc_column_text][\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"full-width.php","meta":{"footnotes":""},"class_list":["post-4636","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.lidocalarena.it\/en\/wp-json\/wp\/v2\/pages\/4636","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lidocalarena.it\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lidocalarena.it\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lidocalarena.it\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lidocalarena.it\/en\/wp-json\/wp\/v2\/comments?post=4636"}],"version-history":[{"count":3,"href":"https:\/\/www.lidocalarena.it\/en\/wp-json\/wp\/v2\/pages\/4636\/revisions"}],"predecessor-version":[{"id":4686,"href":"https:\/\/www.lidocalarena.it\/en\/wp-json\/wp\/v2\/pages\/4636\/revisions\/4686"}],"wp:attachment":[{"href":"https:\/\/www.lidocalarena.it\/en\/wp-json\/wp\/v2\/media?parent=4636"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}