{"id":682,"date":"2025-04-11T15:14:21","date_gmt":"2025-04-11T13:14:21","guid":{"rendered":"https:\/\/giorgioteli.it\/prenota\/?page_id=682"},"modified":"2025-05-12T09:17:55","modified_gmt":"2025-05-12T07:17:55","slug":"ingresso","status":"publish","type":"page","link":"https:\/\/giorgioteli.it\/prenota\/ingresso\/","title":{"rendered":"Ingresso Visitatori\/Giocatori"},"content":{"rendered":"\n\n\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function () {\n  const maxVisitatori = 30;\n  const container = document.getElementById('visitatori-wrapper');\n  const bottoneAggiungi = document.getElementById('aggiungi-visitatore');\n  const form = document.querySelector('.wpcf7 form');\n  const bottoneInvia = form.querySelector('input[type=\"submit\"]');\n  const tipoIngressoRadios = form.querySelectorAll('input[name=\"tipo-ingresso\"]');\n  const etichettaAggiungi = bottoneAggiungi.nextElementSibling;\n\n  function getLabelTipo() {\n    const selezionato = [...tipoIngressoRadios].find(radio => radio.checked);\n    return selezionato ? selezionato.value.includes('Giocatori') ? 'Giocatore' : 'Visitatore' : 'Visitatore';\n  }\n\n  function aggiornaEtichetteERimozione() {\n    const labelTipo = getLabelTipo();\n    const visitatori = container.querySelectorAll('.visitatore');\n    visitatori.forEach((div, index) => {\n      div.querySelector('.etichetta-visitatore').textContent = `${labelTipo} ${index + 1}`;\n      const colCognome = div.querySelector('[name=\"visitatori-cognome[]\"]').closest('div').parentNode;\n\n      const bottoneEsistente = colCognome.querySelector('.rimuovi-visitatore');\n      if (bottoneEsistente) bottoneEsistente.remove();\n\n      if (index > 0) {\n        const bottone = document.createElement('button');\n        bottone.type = 'button';\n        bottone.className = 'rimuovi-visitatore';\n        bottone.style.background = 'none';\n        bottone.style.border = 'none';\n        bottone.style.cursor = 'pointer';\n        bottone.innerHTML = `<img decoding=\"async\" src=\"https:\/\/giorgioteli.it\/prenota\/wp-content\/uploads\/2025\/04\/rimuovi.svg\" alt=\"Rimuovi\" style=\"width: 24px; height: 24px;\">`;\n\n        bottone.addEventListener('click', function () {\n          div.remove();\n          aggiornaEtichetteERimozione();\n          validaCampi();\n        });\n\n        colCognome.appendChild(bottone);\n      }\n    });\n\n    \/\/ Aggiorna testo del bottone \"Aggiungi\"\n    if (etichettaAggiungi) {\n      etichettaAggiungi.textContent = `Aggiungi ${labelTipo}`;\n    }\n  }\n\n  function creaNuovoVisitatore() {\n    const labelTipo = getLabelTipo();\n    const nuovoDiv = document.createElement('div');\n    nuovoDiv.className = 'visitatore';\n    nuovoDiv.style.display = 'flex';\n    nuovoDiv.style.flexDirection = 'column';\n    nuovoDiv.style.gap = '10px';\n    nuovoDiv.style.marginTop = '10px';\n\n    nuovoDiv.innerHTML = `\n      <div class=\"etichetta-visitatore\" style=\"font-weight: 600; font-size: 16px; color: #334155; margin-bottom: 4px;\">\n        ${labelTipo}\n      <\/div>\n      <div style=\"display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-end;\">\n        <div style=\"flex: 1 1 45%;\">\n          <label style=\"display:block; margin-bottom: 4px;\">Nome<\/label>\n          <input type=\"text\" name=\"visitatori-nome[]\" placeholder=\"Nome\" required>\n        <\/div>\n        <div style=\"flex: 1 1 45%; display: flex; align-items: flex-end; gap: 8px;\">\n          <div style=\"flex-grow: 1;\">\n            <label style=\"display:block; margin-bottom: 4px;\">Cognome<\/label>\n            <input type=\"text\" name=\"visitatori-cognome[]\" placeholder=\"Cognome\" required>\n          <\/div>\n        <\/div>\n      <\/div>\n    `;\n    container.appendChild(nuovoDiv);\n  }\n\n  bottoneAggiungi.addEventListener('click', function () {\n    const totale = container.querySelectorAll('.visitatore').length;\n    if (totale >= maxVisitatori) {\n      alert(`Puoi aggiungere al massimo ${maxVisitatori} nominativi.`);\n      return;\n    }\n    creaNuovoVisitatore();\n    aggiornaEtichetteERimozione();\n    validaCampi();\n    aggiungiEventiAiCampi();\n    applicaCapitalizzazioneLive();\n  });\n\n  function validaCampi() {\n    const nomi = form.querySelectorAll('input[name=\"visitatori-nome[]\"]');\n    const cognomi = form.querySelectorAll('input[name=\"visitatori-cognome[]\"]');\n    let valid = true;\n\n    nomi.forEach((input, i) => {\n      const nome = input.value.trim();\n      const cognome = cognomi[i].value.trim();\n\n      input.style.borderColor = nome ? 'green' : 'red';\n      cognomi[i].style.borderColor = cognome ? 'green' : 'red';\n\n      if (!nome || !cognome) valid = false;\n    });\n\n    bottoneInvia.disabled = !valid;\n    return valid;\n  }\n\n  function aggiungiEventiAiCampi() {\n    const tuttiInput = form.querySelectorAll('input[name=\"visitatori-nome[]\"], input[name=\"visitatori-cognome[]\"]');\n    tuttiInput.forEach(input => {\n      input.addEventListener('input', validaCampi);\n    });\n  }\n\n  function applicaCapitalizzazione(input) {\n    input.addEventListener('input', function () {\n      let parole = input.value.toLowerCase().split(' ');\n      parole = parole.map(parola => parola.charAt(0).toUpperCase() + parola.slice(1));\n      input.value = parole.join(' ');\n    });\n  }\n\n  function applicaCapitalizzazioneLive() {\n    document.querySelectorAll('input[name=\"visitatori-nome[]\"], input[name=\"visitatori-cognome[]\"]').forEach(input => {\n      if (!input.dataset.capitalizzato) {\n        applicaCapitalizzazione(input);\n        input.dataset.capitalizzato = \"true\";\n      }\n    });\n  }\n\n  \/\/ Cambia le etichette quando si cambia la selezione tra Visitatori e Giocatori\n  tipoIngressoRadios.forEach(radio => {\n    radio.addEventListener('change', () => {\n      aggiornaEtichetteERimozione();\n    });\n  });\n\n  \/\/ Iniziali\n  aggiornaEtichetteERimozione();\n  aggiungiEventiAiCampi();\n  validaCampi();\n  applicaCapitalizzazioneLive();\n\n  \/\/ Osserva nuovi campi aggiunti\n  const observer = new MutationObserver(() => {\n    applicaCapitalizzazioneLive();\n  });\n  observer.observe(container, { childList: true, subtree: true });\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-682","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/giorgioteli.it\/prenota\/wp-json\/wp\/v2\/pages\/682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/giorgioteli.it\/prenota\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/giorgioteli.it\/prenota\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/giorgioteli.it\/prenota\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/giorgioteli.it\/prenota\/wp-json\/wp\/v2\/comments?post=682"}],"version-history":[{"count":28,"href":"https:\/\/giorgioteli.it\/prenota\/wp-json\/wp\/v2\/pages\/682\/revisions"}],"predecessor-version":[{"id":883,"href":"https:\/\/giorgioteli.it\/prenota\/wp-json\/wp\/v2\/pages\/682\/revisions\/883"}],"wp:attachment":[{"href":"https:\/\/giorgioteli.it\/prenota\/wp-json\/wp\/v2\/media?parent=682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}