{"id":528,"date":"2021-02-02T15:48:55","date_gmt":"2021-02-02T14:48:55","guid":{"rendered":"https:\/\/www.arcigraphic.com\/?page_id=528"},"modified":"2026-11-04T10:17:25","modified_gmt":"2026-11-04T09:17:25","slug":"ordini","status":"publish","type":"page","link":"https:\/\/www.arcigraphic.com\/index.php\/ordini\/","title":{"rendered":"Modulo Ordini"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"528\" class=\"elementor elementor-528\">\n\t\t\t\t\t\t<div class=\"elementor-inner\">\n\t\t\t\t<div class=\"elementor-section-wrap\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-940d060 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"940d060\" data-element_type=\"section\" data-settings=\"{&quot;ekit_has_onepagescroll_dot&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t\t\t<div class=\"elementor-row\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-af17087\" data-id=\"af17087\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-column-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4864017 elementor-widget elementor-widget-html\" data-id=\"4864017\" data-element_type=\"widget\" data-settings=\"{&quot;ekit_we_effect_on&quot;:&quot;none&quot;}\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!DOCTYPE html>\r\n<html lang=\"it\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>Modulo d'Ordine ARCISPORT<\/title>\r\n    <!-- Tailwind CSS CDN -->\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <!-- Lucide Icons -->\r\n    <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\r\n    <!-- SheetJS per la generazione nativa di file Excel (.xlsx) -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/xlsx@0.18.5\/dist\/xlsx.full.min.js\"><\/script>\r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n        body {\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n        @media print {\r\n            .no-print { display: none !important; }\r\n            .print-only { display: block !important; }\r\n            body { background: white !important; color: black !important; padding: 0 !important; }\r\n            .shadow-xl, .shadow-md, .shadow-sm { box-shadow: none !important; }\r\n            .border { border-color: #cbd5e1 !important; }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-100 min-h-screen text-slate-800 pb-12\">\r\n\r\n    <!-- Header \/ Nav -->\r\n    <header class=\"bg-slate-900 text-white sticky top-0 z-40 shadow-lg no-print\">\r\n        <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-3.5 flex items-center justify-between flex-wrap gap-3\">\r\n            <div class=\"flex items-center gap-3\">\r\n                <div class=\"bg-red-600 text-white p-2 rounded-xl font-black text-xl tracking-wider shadow-inner\">\r\n                    ARC\r\n                <\/div>\r\n                <div>\r\n                    <h1 class=\"font-extrabold text-lg sm:text-xl tracking-tight text-white leading-tight\">ARCISPORT<\/h1>\r\n                    <p class=\"text-xs text-slate-400\">Modulo Configurazione Ordine Abbigliamento<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Azioni Rapide Header -->\r\n            <div class=\"flex items-center gap-2 sm:gap-3 flex-wrap justify-end\">\r\n                <button onclick=\"window.print()\" class=\"flex items-center gap-2 bg-white\/10 hover:bg-white\/20 text-white px-3 py-2 rounded-lg text-sm font-medium transition backdrop-blur-sm border border-white\/20\">\r\n                    <i data-lucide=\"printer\" class=\"w-4 h-4\"><\/i>\r\n                    <span class=\"hidden md:inline\">Stampa \/ PDF<\/span>\r\n                <\/button>\r\n                <button onclick=\"exportExcel()\" class=\"flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-3 py-2 rounded-lg text-sm font-medium transition shadow-sm\">\r\n                    <i data-lucide=\"file-spreadsheet\" class=\"w-4 h-4\"><\/i>\r\n                    <span class=\"hidden md:inline\">Scarica Excel (.xlsx)<\/span>\r\n                <\/button>\r\n                <button onclick=\"submitOrder()\" class=\"flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm font-bold shadow-md hover:shadow-lg transition\">\r\n                    <i data-lucide=\"send\" class=\"w-4 h-4\"><\/i>\r\n                    Invia Ordine\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/header>\r\n\r\n    <!-- Main Container -->\r\n    <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6 space-y-6\">\r\n\r\n        <!-- Banner Titolo e Istruzioni -->\r\n        <div class=\"bg-white rounded-2xl p-6 shadow-sm border border-slate-200\">\r\n            <div class=\"flex flex-col md:flex-row md:items-center justify-between gap-4 border-b border-slate-100 pb-5 mb-5\">\r\n                <div>\r\n                    <span class=\"inline-block px-3 py-1 bg-red-50 text-red-600 text-xs font-bold rounded-full uppercase tracking-wider mb-2\">Modulo Unificato<\/span>\r\n                    <h2 class=\"text-2xl font-bold text-slate-900\">Ordine Abbigliamento Sportivo<\/h2>\r\n                    <p class=\"text-slate-500 text-sm mt-0.5\">Compila i dati richiesti, seleziona le quantit\u00e0 per taglia e inserisci il dettaglio atleti.<\/p>\r\n                <\/div>\r\n                <div class=\"bg-slate-50 p-3.5 rounded-xl border border-slate-200 text-xs space-y-1 md:max-w-xs\">\r\n                    <div class=\"font-semibold text-slate-700 flex items-center gap-1.5\">\r\n                        <i data-lucide=\"info\" class=\"w-4 h-4 text-blue-600\"><\/i>\r\n                        Note per la compilazione:\r\n                    <\/div>\r\n                    <p class=\"text-slate-500\">Compilare le taglie dalla pi\u00f9 piccola alla pi\u00f9 grande. La tabella atleti verr\u00e0 sincronizzata automaticamente.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Sezione 1: Dati Generali -->\r\n            <form id=\"orderForm\" onsubmit=\"event.preventDefault();\">\r\n                <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4\">\r\n                    <div>\r\n                        <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1\">Az. Che Ordina (Dealer)<\/label>\r\n                        <input type=\"text\" id=\"companyName\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-sm font-medium focus:ring-2 focus:ring-red-500 focus:bg-white outline-none transition\" placeholder=\"Nome dell'Azienda\">\r\n                    <\/div>\r\n                    <div>\r\n                        <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1\">Rif. Societ\u00e0 <span class=\"text-red-500\">*<\/span><\/label>\r\n                        <input type=\"text\" id=\"clubName\" required class=\"w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-sm font-medium focus:ring-2 focus:ring-red-500 focus:bg-white outline-none transition\" placeholder=\"Nome della Societ\u00e0 Sportiva\">\r\n                    <\/div>\r\n                    <div>\r\n                        <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1\">Sport \/ Disciplina<\/label>\r\n                        <select id=\"sportType\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-sm font-medium focus:ring-2 focus:ring-red-500 focus:bg-white outline-none transition\">\r\n                            <option value=\"Calcio\">Calcio<\/option>\r\n                            <option value=\"Calcio a 5\">Calcio a 5<\/option>\r\n                            <option value=\"Volley\">Volley<\/option>\r\n                            <option value=\"Basket\">Basket<\/option>\r\n                            <option value=\"Running\">Running \/ Atletica<\/option>\r\n                            <option value=\"Altro\">Altro Sport<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div>\r\n                        <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1\">Data Ordine<\/label>\r\n                        <input type=\"date\" id=\"orderDate\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-sm font-medium focus:ring-2 focus:ring-red-500 focus:bg-white outline-none transition\">\r\n                    <\/div>\r\n                <\/div>\r\n\r\n                <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mt-4 pt-4 border-t border-slate-100\">\r\n                    <div>\r\n                        <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1\">Modello Collo<\/label>\r\n                        <select id=\"collarType\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-sm font-medium focus:ring-2 focus:ring-red-500 focus:bg-white outline-none transition\">\r\n                            <option value=\"Girocollo Standard\">Girocollo Standard<\/option>\r\n                            <option value=\"Collo a V\">Collo a V<\/option>\r\n                            <option value=\"Collo Polo con Bottoni\">Collo Polo con Bottoni<\/option>\r\n                            <option value=\"Collo Coreana\">Collo Coreana<\/option>\r\n                            <option value=\"Personalizzato\">Personalizzato<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n                    <div>\r\n                        <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1\">Tessuto Maglia<\/label>\r\n                        <input type=\"text\" id=\"shirtFabric\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-sm font-medium focus:ring-2 focus:ring-red-500 focus:bg-white outline-none transition\" placeholder=\"Es. Poliestere Traspirante \/ Microforato\">\r\n                    <\/div>\r\n                    <div>\r\n                        <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-1\">Tessuto Pantaloncino<\/label>\r\n                        <input type=\"text\" id=\"pantFabric\" class=\"w-full bg-slate-50 border border-slate-300 rounded-lg px-3 py-2 text-sm font-medium focus:ring-2 focus:ring-red-500 focus:bg-white outline-none transition\" placeholder=\"Es. Poliestere Standard \/ Elasticizzato\">\r\n                    <\/div>\r\n                <\/div>\r\n            <\/form>\r\n        <\/div>\r\n\r\n        <!-- Sezione 2: Riepilogo Quantit\u00e0 & Taglie -->\r\n        <div class=\"bg-white rounded-2xl p-6 shadow-sm border border-slate-200\">\r\n            <div class=\"flex items-center justify-between mb-4 flex-wrap gap-2\">\r\n                <div class=\"flex items-center gap-2\">\r\n                    <i data-lucide=\"layout-grid\" class=\"w-5 h-5 text-red-600\"><\/i>\r\n                    <h3 class=\"text-lg font-bold text-slate-900\">Riepilogo Taglie e Quantit\u00e0<\/h3>\r\n                <\/div>\r\n                <div class=\"text-xs text-slate-500\">\r\n                    Inserisci il totale dei capi ordinati per ciascuna taglia\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"overflow-x-auto\">\r\n                <table class=\"w-full text-center border-collapse\">\r\n                    <thead>\r\n                        <tr class=\"bg-slate-800 text-white text-xs font-bold uppercase tracking-wider\">\r\n                            <th class=\"p-2.5 text-left rounded-tl-lg min-w-[120px]\">Articolo<\/th>\r\n                            <th class=\"p-2\">5XS<\/th>\r\n                            <th class=\"p-2\">4XS<\/th>\r\n                            <th class=\"p-2\">3XS<\/th>\r\n                            <th class=\"p-2\">2XS<\/th>\r\n                            <th class=\"p-2\">XS<\/th>\r\n                            <th class=\"p-2\">S<\/th>\r\n                            <th class=\"p-2\">M<\/th>\r\n                            <th class=\"p-2\">L<\/th>\r\n                            <th class=\"p-2\">XL<\/th>\r\n                            <th class=\"p-2\">XXL<\/th>\r\n                            <th class=\"p-2\">3XL<\/th>\r\n                            <th class=\"p-2\">4XL<\/th>\r\n                            <th class=\"p-2\">5XL<\/th>\r\n                            <th class=\"p-2.5 bg-red-700 rounded-tr-lg min-w-[80px]\">TOTALE<\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody class=\"divide-y divide-slate-200 text-sm font-medium\">\r\n                        <!-- Riga Maglie -->\r\n                        <tr class=\"hover:bg-slate-50 transition\">\r\n                            <td class=\"p-3 font-bold text-slate-900 text-left bg-slate-50 border-r border-slate-200\">MAGLIE<\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"5XS\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"4XS\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"3XS\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"2XS\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"XS\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"S\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"M\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"L\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"XL\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"XXL\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"3XL\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"4XL\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"shirt\" data-size=\"5XL\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td class=\"p-3 font-extrabold text-red-600 bg-red-50 border-l border-slate-200\" id=\"totalShirts\">0<\/td>\r\n                        <\/tr>\r\n                        <!-- Riga Pantaloncini -->\r\n                        <tr class=\"hover:bg-slate-50 transition\">\r\n                            <td class=\"p-3 font-bold text-slate-900 text-left bg-slate-50 border-r border-slate-200\">PANTA<\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"5XS\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"4XS\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"3XS\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"2XS\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"XS\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"S\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"M\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"L\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"XL\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"XXL\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"3XL\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"4XL\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td><input type=\"number\" min=\"0\" data-type=\"pant\" data-size=\"5XL\" class=\"size-input w-12 text-center p-1 border rounded focus:ring-2 focus:ring-red-500 outline-none\" value=\"0\" onchange=\"updateTotals()\"><\/td>\r\n                            <td class=\"p-3 font-extrabold text-red-600 bg-red-50 border-l border-slate-200\" id=\"totalPants\">0<\/td>\r\n                        <\/tr>\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/div>\r\n\r\n            <div class=\"mt-4 flex items-center justify-between flex-wrap gap-3 pt-3 border-t border-slate-100\">\r\n                <button onclick=\"syncRosterFromSizes()\" class=\"flex items-center gap-2 bg-slate-100 hover:bg-slate-200 text-slate-800 text-xs font-bold py-2 px-3.5 rounded-lg border border-slate-300 transition no-print\">\r\n                    <i data-lucide=\"refresh-cw\" class=\"w-3.5 h-3.5 text-slate-600\"><\/i>\r\n                    Sincronizza Roster Atleti in base alle quantit\u00e0\r\n                <\/button>\r\n                <div class=\"text-sm font-bold text-slate-800 bg-slate-100 px-4 py-2 rounded-lg border border-slate-200\">\r\n                    TOTALE CAPI ORDINATI: <span id=\"grandTotal\" class=\"text-red-600 text-base font-black ml-1\">0<\/span>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Sezione 3: Dettaglio Roster Atleti -->\r\n        <div class=\"bg-white rounded-2xl p-6 shadow-sm border border-slate-200\">\r\n            <div class=\"flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4\">\r\n                <div>\r\n                    <h3 class=\"text-lg font-bold text-slate-900 flex items-center gap-2\">\r\n                        <i data-lucide=\"users\" class=\"w-5 h-5 text-red-600\"><\/i>\r\n                        Elenco Dettagliato Atleti e Numerazioni\r\n                    <\/h3>\r\n                    <p class=\"text-xs text-slate-500\">Inserire le taglie ordina dalla pi\u00f9 piccola alla pi\u00f9 grande per ciascun componente.<\/p>\r\n                <\/div>\r\n                <div class=\"flex items-center gap-2 no-print\">\r\n                    <button onclick=\"addRosterRow()\" class=\"flex items-center gap-1.5 bg-red-600 hover:bg-red-700 text-white px-3 py-1.5 rounded-lg text-xs font-bold transition shadow-sm\">\r\n                        <i data-lucide=\"plus\" class=\"w-4 h-4\"><\/i>\r\n                        Aggiungi Atleta\r\n                    <\/button>\r\n                    <button onclick=\"clearRoster()\" class=\"text-xs text-slate-500 hover:text-red-600 px-2 py-1 transition\">\r\n                        Svuota Tabella\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <div class=\"overflow-x-auto\">\r\n                <table class=\"w-full text-left text-xs border-collapse\" id=\"rosterTable\">\r\n                    <thead>\r\n                        <tr class=\"bg-slate-800 text-white font-bold uppercase tracking-wider\">\r\n                            <th class=\"p-2.5 text-center w-10 rounded-tl-lg\">#<\/th>\r\n                            <th class=\"p-2.5 min-w-[160px]\">Nome Atleta<\/th>\r\n                            <th class=\"p-2.5 bg-slate-700 text-center\" colspan=\"5\">MAGLIA<\/th>\r\n                            <th class=\"p-2.5 bg-slate-900 text-center\" colspan=\"5\">PANTA<\/th>\r\n                            <th class=\"p-2.5 text-center w-12 rounded-tr-lg no-print\">Azi.<\/th>\r\n                        <\/tr>\r\n                        <tr class=\"bg-slate-700 text-slate-200 text-[10px] font-semibold border-b border-slate-600\">\r\n                            <th><\/th>\r\n                            <th><\/th>\r\n                            <!-- Maglia -->\r\n                            <th class=\"p-1.5 w-16 text-center\">Taglia<\/th>\r\n                            <th class=\"p-1.5 w-14 text-center\">N\u00b0<\/th>\r\n                            <th class=\"p-1.5 w-12 text-center\" title=\"Portiere\">POR<\/th>\r\n                            <th class=\"p-1.5 w-12 text-center\" title=\"Libero\">LIB<\/th>\r\n                            <th class=\"p-1.5 min-w-[100px]\">Note<\/th>\r\n                            <!-- Panta -->\r\n                            <th class=\"p-1.5 w-16 text-center bg-slate-800\">Taglia<\/th>\r\n                            <th class=\"p-1.5 w-14 text-center bg-slate-800\">N\u00b0<\/th>\r\n                            <th class=\"p-1.5 w-12 text-center bg-slate-800\" title=\"Portiere\">POR<\/th>\r\n                            <th class=\"p-1.5 w-12 text-center bg-slate-800\" title=\"Libero\">LIB<\/th>\r\n                            <th class=\"p-1.5 min-w-[100px] bg-slate-800\">Note<\/th>\r\n                            <th class=\"no-print\"><\/th>\r\n                        <\/tr>\r\n                    <\/thead>\r\n                    <tbody id=\"rosterBody\" class=\"divide-y divide-slate-200\">\r\n                        <!-- Le righe verranno popolate dinamicamente da JS -->\r\n                    <\/tbody>\r\n                <\/table>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Sezione 4: Caricamento File e Loghi -->\r\n        <div class=\"bg-white rounded-2xl p-6 shadow-sm border border-slate-200\">\r\n            <div class=\"flex items-center gap-2 mb-3\">\r\n                <i data-lucide=\"paperclip\" class=\"w-5 h-5 text-red-600\"><\/i>\r\n                <h3 class=\"text-lg font-bold text-slate-900\">Allegati & Loghi Grafici<\/h3>\r\n            <\/div>\r\n            <p class=\"text-xs text-slate-500 mb-4\">Carica qui vettoriali, loghi sponsor, stemmi della societ\u00e0 o documenti di riferimento per la stampa (Formati ammessi: AI, EPS, SVG, PNG, PDF, ZIP - Max 10MB cad).<\/p>\r\n\r\n            <!-- Dropzone -->\r\n            <div id=\"dropzone\" onclick=\"document.getElementById('fileInput').click()\" ondragover=\"handleDragOver(event)\" ondragleave=\"handleDragLeave(event)\" ondrop=\"handleDrop(event)\" class=\"border-2 border-dashed border-slate-300 hover:border-red-500 bg-slate-50 hover:bg-red-50\/30 rounded-xl p-6 text-center cursor-pointer transition group\">\r\n                <input type=\"file\" id=\"fileInput\" multiple class=\"hidden\" onchange=\"handleFileSelect(event)\">\r\n                <div class=\"flex flex-col items-center justify-center space-y-2\">\r\n                    <div class=\"p-3 bg-white rounded-full shadow-sm border border-slate-200 group-hover:scale-110 transition\">\r\n                        <i data-lucide=\"upload-cloud\" class=\"w-6 h-6 text-red-600\"><\/i>\r\n                    <\/div>\r\n                    <div>\r\n                        <span class=\"text-sm font-bold text-slate-700 group-hover:text-red-600\">Clicca per selezionare i file<\/span>\r\n                        <span class=\"text-sm text-slate-500\"> oppure trascinali qui<\/span>\r\n                    <\/div>\r\n                    <span class=\"text-[11px] text-slate-400\">PDF, PNG, JPG, SVG, AI, EPS o file archivio ZIP<\/span>\r\n                <\/div>\r\n            <\/div>\r\n\r\n            <!-- Lista File Caricati -->\r\n            <div id=\"fileList\" class=\"mt-4 space-y-2 hidden\">\r\n                <h4 class=\"text-xs font-bold text-slate-600 uppercase tracking-wider\">File selezionati (<span id=\"fileCount\">0<\/span>)<\/h4>\r\n                <div id=\"filesContainer\" class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <!-- Sezione 5: Note Aggiuntive e Pulsante Invio -->\r\n        <div class=\"bg-white rounded-2xl p-6 shadow-sm border border-slate-200\">\r\n            <label class=\"block text-xs font-bold text-slate-600 uppercase tracking-wider mb-2\">Note Generali o Istruzioni per la Produzione<\/label>\r\n            <textarea id=\"orderNotes\" rows=\"3\" class=\"w-full bg-slate-50 border border-slate-300 rounded-xl p-3 text-sm focus:ring-2 focus:ring-red-500 focus:bg-white outline-none transition\" placeholder=\"Specificare qui eventuali colori personalizzati, posizionamento loghi particolari, o indicazioni per la consegna...\"><\/textarea>\r\n\r\n            <div class=\"mt-6 flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-slate-100\">\r\n                <div class=\"text-xs text-slate-500 flex items-center gap-1.5\">\r\n                    <i data-lucide=\"shield-check\" class=\"w-4 h-4 text-emerald-600\"><\/i>\r\n                    Verifica i dati inseriti prima di inoltrare l'ordine.\r\n                <\/div>\r\n                <div class=\"flex items-center gap-3 w-full sm:w-auto\">\r\n                    <button onclick=\"exportExcel()\" type=\"button\" class=\"flex-1 sm:flex-none justify-center flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-5 py-2.5 rounded-xl text-sm font-bold shadow-sm transition\">\r\n                        <i data-lucide=\"file-spreadsheet\" class=\"w-4 h-4\"><\/i>\r\n                        Scarica Excel (.xlsx)\r\n                    <\/button>\r\n                    <button onclick=\"submitOrder()\" type=\"button\" class=\"flex-1 sm:flex-none justify-center flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-6 py-2.5 rounded-xl text-sm font-bold shadow-lg hover:shadow-red-200 transition\">\r\n                        <i data-lucide=\"send\" class=\"w-4 h-4\"><\/i>\r\n                        Invia Ordine\r\n                    <\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n    <\/main>\r\n\r\n    <!-- Modale Conferma Ordine \/ Riepilogo Invio -->\r\n    <div id=\"summaryModal\" class=\"fixed inset-0 bg-slate-900\/60 backdrop-blur-sm z-50 flex items-center justify-center p-4 hidden\">\r\n        <div class=\"bg-white rounded-2xl max-w-2xl w-full p-6 shadow-2xl max-h-[90vh] overflow-y-auto space-y-5\">\r\n            <div class=\"flex items-center justify-between border-b border-slate-100 pb-3\">\r\n                <div class=\"flex items-center gap-2\">\r\n                    <div class=\"p-2 bg-red-100 text-red-600 rounded-lg\">\r\n                        <i data-lucide=\"check-circle-2\" class=\"w-6 h-6\"><\/i>\r\n                    <\/div>\r\n                    <div>\r\n                        <h3 class=\"font-bold text-lg text-slate-900\">Riepilogo e Invio Ordine<\/h3>\r\n                        <p class=\"text-xs text-slate-500\">Destinatario: <span class=\"font-bold text-slate-800\">grafica@arcigraphic.com<\/span><\/p>\r\n                    <\/div>\r\n                <\/div>\r\n                <button onclick=\"closeModal()\" class=\"text-slate-400 hover:text-slate-600 p-1\">\r\n                    <i data-lucide=\"x\" class=\"w-5 h-5\"><\/i>\r\n                <\/button>\r\n            <\/div>\r\n\r\n            <!-- Contenuto Riepilogo Modale -->\r\n            <div class=\"space-y-3 text-sm\" id=\"modalDetails\">\r\n                <!-- Popolato via Javascript -->\r\n            <\/div>\r\n\r\n            <!-- Box Informativo sulle modalit\u00e0 di invio -->\r\n            <div class=\"bg-blue-50 border border-blue-200 text-blue-900 p-3.5 rounded-xl space-y-1\">\r\n                <p class=\"font-bold flex items-center gap-1.5 text-sm\">\r\n                    <i data-lucide=\"info\" class=\"w-4 h-4 text-blue-600\"><\/i>\r\n                    Come funziona l'invio dell'ordine:\r\n                <\/p>\r\n                <ol class=\"list-decimal list-inside space-y-1 text-slate-700 pl-1 text-xs\">\r\n                    <li>Verr\u00e0 aperto il tuo programma e-mail precompilato con tutti i dettagli dell'ordine diretti a <strong>grafica@arcigraphic.com<\/strong>.<\/li>\r\n                    <li>Verr\u00e0 scaricato automaticamente il file <strong>.XLSX (Excel)<\/strong> con il riepilogo dati e la scheda atleti.<\/li>\r\n                    <li><strong>Ricordati di allegare all'e-mail<\/strong> il file Excel scaricato e gli eventuali file di grafica\/loghi caricati.<\/li>\r\n                <\/ol>\r\n            <\/div>\r\n\r\n            <!-- Azioni Modale -->\r\n            <div class=\"flex items-center justify-end gap-3 pt-3 border-t border-slate-100\">\r\n                <button onclick=\"closeModal()\" class=\"px-4 py-2 rounded-xl text-sm font-semibold text-slate-600 hover:bg-slate-100 transition\">\r\n                    Modifica Dati\r\n                <\/button>\r\n                <button onclick=\"finalizeOrder()\" class=\"flex items-center gap-2 bg-red-600 hover:bg-red-700 text-white px-5 py-2 rounded-xl text-sm font-bold shadow-md transition\">\r\n                    <i data-lucide=\"mail\" class=\"w-4 h-4\"><\/i>\r\n                    Invia Email a grafica@arcigraphic.com\r\n                <\/button>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Script di Logica Applicativa -->\r\n    <script>\r\n        \/\/ Costanti e Configurazione globale\r\n        const DEST_EMAIL = \"grafica@arcigraphic.com\";\r\n        const SIZES = ['5XS', '4XS', '3XS', '2XS', 'XS', 'S', 'M', 'L', 'XL', 'XXL', '3XL', '4XL', '5XL'];\r\n        const FORMSPREE_ENDPOINT = \"\"; \/\/ Inserire eventuale endpoint Formspree per invio in background diretto\r\n        let uploadedFiles = [];\r\n\r\n        \/\/ Inizializzazione al caricamento\r\n        window.onload = function() {\r\n            lucide.createIcons();\r\n            \/\/ Imposta la data odierna come default\r\n            document.getElementById('orderDate').valueAsDate = new Date();\r\n            \/\/ Genera 5 righe iniziali per il roster\r\n            for(let i=0; i<5; i++) {\r\n                addRosterRow();\r\n            }\r\n            updateTotals();\r\n        };\r\n\r\n        \/\/ Calcola e aggiorna i totali delle taglie\r\n        function updateTotals() {\r\n            let totalShirts = 0;\r\n            let totalPants = 0;\r\n\r\n            SIZES.forEach(sz => {\r\n                const sQty = parseInt(document.querySelector(`input[data-type=\"shirt\"][data-size=\"${sz}\"]`)?.value) || 0;\r\n                const pQty = parseInt(document.querySelector(`input[data-type=\"pant\"][data-size=\"${sz}\"]`)?.value) || 0;\r\n                totalShirts += sQty;\r\n                totalPants += pQty;\r\n            });\r\n\r\n            document.getElementById('totalShirts').innerText = totalShirts;\r\n            document.getElementById('totalPants').innerText = totalPants;\r\n            document.getElementById('grandTotal').innerText = totalShirts + totalPants;\r\n\r\n            return { totalShirts, totalPants, grandTotal: totalShirts + totalPants };\r\n        }\r\n\r\n        \/\/ Genera opzioni HTML per le taglie\r\n        function getSizeOptionsHTML(selectedSize = '') {\r\n            let options = '<option value=\"\">-<\/option>';\r\n            SIZES.forEach(sz => {\r\n                const selected = sz === selectedSize ? 'selected' : '';\r\n                options += `<option value=\"${sz}\" ${selected}>${sz}<\/option>`;\r\n            });\r\n            return options;\r\n        }\r\n\r\n        \/\/ Aggiunge una riga al roster atleti\r\n        function addRosterRow(data = {}) {\r\n            const tbody = document.getElementById('rosterBody');\r\n            const rowCount = tbody.children.length + 1;\r\n\r\n            const tr = document.createElement('tr');\r\n            tr.className = \"hover:bg-slate-50 transition border-b border-slate-100\";\r\n            tr.innerHTML = `\r\n                <td class=\"p-2 text-center font-bold text-slate-400 row-index\">${rowCount}<\/td>\r\n                <td class=\"p-1.5\">\r\n                    <input type=\"text\" placeholder=\"Nome Cognome\" value=\"${data.name || ''}\" class=\"w-full p-1.5 bg-slate-50 border border-slate-200 rounded text-xs focus:ring-1 focus:ring-red-500 outline-none\">\r\n                <\/td>\r\n                <!-- MAGLIA -->\r\n                <td class=\"p-1 bg-slate-50\/50\">\r\n                    <select class=\"w-full p-1 border rounded text-xs text-center font-bold bg-white focus:ring-1 focus:ring-red-500\">\r\n                        ${getSizeOptionsHTML(data.shirtSize || '')}\r\n                    <\/select>\r\n                <\/td>\r\n                <td class=\"p-1 bg-slate-50\/50\">\r\n                    <input type=\"text\" placeholder=\"N\u00b0\" value=\"${data.shirtNumber || ''}\" class=\"w-full p-1 text-center border rounded text-xs font-bold bg-white focus:ring-1 focus:ring-red-500\">\r\n                <\/td>\r\n                <td class=\"p-1 bg-slate-50\/50 text-center\">\r\n                    <input type=\"checkbox\" ${data.shirtPor ? 'checked' : ''} class=\"rounded border-slate-300 text-red-600 focus:ring-red-500 w-3.5 h-3.5\">\r\n                <\/td>\r\n                <td class=\"p-1 bg-slate-50\/50 text-center\">\r\n                    <input type=\"checkbox\" ${data.shirtLib ? 'checked' : ''} class=\"rounded border-slate-300 text-red-600 focus:ring-red-500 w-3.5 h-3.5\">\r\n                <\/td>\r\n                <td class=\"p-1 bg-slate-50\/50\">\r\n                    <input type=\"text\" placeholder=\"Note maglia\" value=\"${data.shirtNotes || ''}\" class=\"w-full p-1 border rounded text-xs bg-white focus:ring-1 focus:ring-red-500\">\r\n                <\/td>\r\n                <!-- PANTA -->\r\n                <td class=\"p-1 bg-slate-100\/50\">\r\n                    <select class=\"w-full p-1 border rounded text-xs text-center font-bold bg-white focus:ring-1 focus:ring-red-500\">\r\n                        ${getSizeOptionsHTML(data.pantSize || '')}\r\n                    <\/select>\r\n                <\/td>\r\n                <td class=\"p-1 bg-slate-100\/50\">\r\n                    <input type=\"text\" placeholder=\"N\u00b0\" value=\"${data.pantNumber || ''}\" class=\"w-full p-1 text-center border rounded text-xs font-bold bg-white focus:ring-1 focus:ring-red-500\">\r\n                <\/td>\r\n                <td class=\"p-1 bg-slate-100\/50 text-center\">\r\n                    <input type=\"checkbox\" ${data.pantPor ? 'checked' : ''} class=\"rounded border-slate-300 text-red-600 focus:ring-red-500 w-3.5 h-3.5\">\r\n                <\/td>\r\n                <td class=\"p-1 bg-slate-100\/50 text-center\">\r\n                    <input type=\"checkbox\" ${data.pantLib ? 'checked' : ''} class=\"rounded border-slate-300 text-red-600 focus:ring-red-500 w-3.5 h-3.5\">\r\n                <\/td>\r\n                <td class=\"p-1 bg-slate-100\/50\">\r\n                    <input type=\"text\" placeholder=\"Note panta\" value=\"${data.pantNotes || ''}\" class=\"w-full p-1 border rounded text-xs bg-white focus:ring-1 focus:ring-red-500\">\r\n                <\/td>\r\n                <td class=\"p-1 text-center no-print\">\r\n                    <button onclick=\"removeRosterRow(this)\" class=\"text-slate-400 hover:text-red-600 p-1 rounded transition\">\r\n                        <i data-lucide=\"trash-2\" class=\"w-3.5 h-3.5\"><\/i>\r\n                    <\/button>\r\n                <\/td>\r\n            `;\r\n\r\n            tbody.appendChild(tr);\r\n            lucide.createIcons();\r\n            reindexRoster();\r\n        }\r\n\r\n        \/\/ Rimuove riga\r\n        function removeRosterRow(btn) {\r\n            btn.closest('tr').remove();\r\n            reindexRoster();\r\n        }\r\n\r\n        \/\/ Ricalcola indici #\r\n        function reindexRoster() {\r\n            const rows = document.querySelectorAll('#rosterBody tr');\r\n            rows.forEach((row, idx) => {\r\n                const cell = row.querySelector('.row-index');\r\n                if(cell) cell.innerText = idx + 1;\r\n            });\r\n        }\r\n\r\n        \/\/ Svuota roster\r\n        function clearRoster() {\r\n            if(confirm(\"Sei sicuro di voler svuotare l'elenco atleti?\")) {\r\n                document.getElementById('rosterBody').innerHTML = '';\r\n            }\r\n        }\r\n\r\n        \/\/ Sincronizza atleti vuoti in base alle quantit\u00e0 inserite nelle taglie\r\n        function syncRosterFromSizes() {\r\n            const tbody = document.getElementById('rosterBody');\r\n            tbody.innerHTML = ''; \/\/ Svuota prima\r\n\r\n            SIZES.forEach(sz => {\r\n                const sQty = parseInt(document.querySelector(`input[data-type=\"shirt\"][data-size=\"${sz}\"]`)?.value) || 0;\r\n                const pQty = parseInt(document.querySelector(`input[data-type=\"pant\"][data-size=\"${sz}\"]`)?.value) || 0;\r\n                const maxQty = Math.max(sQty, pQty);\r\n\r\n                for(let i=0; i < maxQty; i++) {\r\n                    addRosterRow({\r\n                        shirtSize: i < sQty ? sz : '',\r\n                        pantSize: i < pQty ? sz : ''\r\n                    });\r\n                }\r\n            });\r\n\r\n            if(tbody.children.length === 0) {\r\n                for(let i=0; i<3; i++) addRosterRow();\r\n            }\r\n        }\r\n\r\n        \/\/ GESTIONE DRAG & DROP E FILE\r\n        function handleDragOver(e) { e.preventDefault(); e.stopPropagation(); }\r\n        function handleDragLeave(e) { e.preventDefault(); e.stopPropagation(); }\r\n        function handleDrop(e) {\r\n            e.preventDefault();\r\n            e.stopPropagation();\r\n            if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {\r\n                addFiles(e.dataTransfer.files);\r\n            }\r\n        }\r\n        function handleFileSelect(e) {\r\n            if (e.target.files && e.target.files.length > 0) {\r\n                addFiles(e.target.files);\r\n            }\r\n        }\r\n\r\n        function addFiles(filesList) {\r\n            Array.from(filesList).forEach(file => {\r\n                \/\/ Evita duplicati col medesimo nome e dimensione\r\n                if (!uploadedFiles.some(f => f.name === file.name && f.size === file.size)) {\r\n                    uploadedFiles.push(file);\r\n                }\r\n            });\r\n            renderFileList();\r\n        }\r\n\r\n        function removeFile(index) {\r\n            uploadedFiles.splice(index, 1);\r\n            renderFileList();\r\n        }\r\n\r\n        function renderFileList() {\r\n            const container = document.getElementById('filesContainer');\r\n            const listWrapper = document.getElementById('fileList');\r\n            const fileCount = document.getElementById('fileCount');\r\n\r\n            container.innerHTML = '';\r\n            fileCount.innerText = uploadedFiles.length;\r\n\r\n            if (uploadedFiles.length === 0) {\r\n                listWrapper.classList.add('hidden');\r\n                return;\r\n            }\r\n\r\n            listWrapper.classList.remove('hidden');\r\n\r\n            uploadedFiles.forEach((file, idx) => {\r\n                const fileCard = document.createElement('div');\r\n                fileCard.className = \"flex items-center justify-between bg-slate-50 border border-slate-200 rounded-lg p-2.5 shadow-sm text-xs\";\r\n                \r\n                const formatSize = (bytes) => {\r\n                    if(bytes < 1024) return bytes + ' B';\r\n                    if(bytes < 1048576) return (bytes \/ 1024).toFixed(1) + ' KB';\r\n                    return (bytes \/ 1048576).toFixed(1) + ' MB';\r\n                };\r\n\r\n                const ext = file.name.split('.').pop().toUpperCase();\r\n\r\n                fileCard.innerHTML = `\r\n                    <div class=\"flex items-center gap-2 overflow-hidden mr-2\">\r\n                        <div class=\"bg-red-100 text-red-600 font-bold px-2 py-1 rounded text-[10px]\">\r\n                            ${ext}\r\n                        <\/div>\r\n                        <div class=\"truncate\">\r\n                            <p class=\"font-bold text-slate-800 truncate\">${file.name}<\/p>\r\n                            <p class=\"text-[10px] text-slate-400\">${formatSize(file.size)}<\/p>\r\n                        <\/div>\r\n                    <\/div>\r\n                    <button onclick=\"removeFile(${idx})\" class=\"text-slate-400 hover:text-red-600 p-1 transition\">\r\n                        <i data-lucide=\"x\" class=\"w-4 h-4\"><\/i>\r\n                    <\/button>\r\n                `;\r\n                container.appendChild(fileCard);\r\n            });\r\n            lucide.createIcons();\r\n        }\r\n\r\n        \/\/ Visualizza Modale di invio\r\n        function submitOrder() {\r\n            const club = document.getElementById('clubName').value;\r\n            if(!club) {\r\n                alert(\"Per favore inserisci il nome della Societ\u00e0 \/ Club.\");\r\n                document.getElementById('clubName').focus();\r\n                return;\r\n            }\r\n\r\n            const { totalShirts, totalPants, grandTotal } = updateTotals();\r\n            const modalDetails = document.getElementById('modalDetails');\r\n\r\n            modalDetails.innerHTML = `\r\n                <div class=\"bg-slate-50 p-3 rounded-xl space-y-1.5 border border-slate-200\">\r\n                    <p><strong>Societ\u00e0:<\/strong> ${club}<\/p>\r\n                    <p><strong>Dealer \/ Azienda:<\/strong> ${document.getElementById('companyName').value || 'N.D.'}<\/p>\r\n                    <p><strong>Sport:<\/strong> ${document.getElementById('sportType').value} | <strong>Collo:<\/strong> ${document.getElementById('collarType').value}<\/p>\r\n                <\/div>\r\n\r\n                <div class=\"grid grid-cols-3 gap-2 text-center py-2\">\r\n                    <div class=\"bg-slate-100 p-2 rounded-lg\"><span class=\"block text-xs text-slate-500\">Maglie<\/span><strong class=\"text-red-600 text-base\">${totalShirts}<\/strong><\/div>\r\n                    <div class=\"bg-slate-100 p-2 rounded-lg\"><span class=\"block text-xs text-slate-500\">Panta<\/span><strong class=\"text-red-600 text-base\">${totalPants}<\/strong><\/div>\r\n                    <div class=\"bg-slate-100 p-2 rounded-lg\"><span class=\"block text-xs text-slate-500\">Tot. Capi<\/span><strong class=\"text-slate-900 text-base\">${grandTotal}<\/strong><\/div>\r\n                <\/div>\r\n\r\n                <div class=\"text-xs text-slate-600 space-y-1\">\r\n                    <p><strong>File allegati:<\/strong> ${uploadedFiles.length > 0 ? uploadedFiles.map(f => f.name).join(', ') : 'Nessun file inserito'}<\/p>\r\n                    <p><strong>Atleti in distinta:<\/strong> ${document.querySelectorAll('#rosterBody tr').length}<\/p>\r\n                <\/div>\r\n            `;\r\n\r\n            document.getElementById('summaryModal').classList.remove('hidden');\r\n        }\r\n\r\n        function closeModal() {\r\n            document.getElementById('summaryModal').classList.add('hidden');\r\n        }\r\n\r\n        \/\/ Costruisce il corpo dell'e-mail\r\n        function buildEmailBody() {\r\n            const club = document.getElementById('clubName').value;\r\n            const company = document.getElementById('companyName').value || 'N.D.';\r\n            const sport = document.getElementById('sportType').value;\r\n            const collar = document.getElementById('collarType').value;\r\n            const shirtFab = document.getElementById('shirtFabric').value || 'Standard';\r\n            const pantFab = document.getElementById('pantFabric').value || 'Standard';\r\n            const date = document.getElementById('orderDate').value;\r\n            const notes = document.getElementById('orderNotes').value || 'Nessuna nota';\r\n\r\n            const { totalShirts, totalPants, grandTotal } = updateTotals();\r\n\r\n            let text = `=======================================\\n`;\r\n            text += `     ORDINE ABBIGLIAMENTO ARCISPORT    \\n`;\r\n            text += `=======================================\\n\\n`;\r\n            text += `DATI GENERALI:\\n`;\r\n            text += `- Societa \/ Club: ${club}\\n`;\r\n            text += `- Dealer \/ Azienda: ${company}\\n`;\r\n            text += `- Sport: ${sport}\\n`;\r\n            text += `- Data Ordine: ${date}\\n`;\r\n            text += `- Modello Collo: ${collar}\\n`;\r\n            text += `- Tessuto Maglia: ${shirtFab}\\n`;\r\n            text += `- Tessuto Panta: ${pantFab}\\n\\n`;\r\n\r\n            text += `RIEPILOGO CAPI:\\n`;\r\n            text += `- Totale Maglie: ${totalShirts}\\n`;\r\n            text += `- Totale Pantaloncini: ${totalPants}\\n`;\r\n            text += `- TOTALE CAPI: ${grandTotal}\\n\\n`;\r\n\r\n            text += `FILE ALLEGATI (${uploadedFiles.length}):\\n`;\r\n            if(uploadedFiles.length > 0) {\r\n                uploadedFiles.forEach((f, idx) => {\r\n                    text += `${idx+1}. ${f.name} (${(f.size\/1024).toFixed(1)} KB)\\n`;\r\n                });\r\n            } else {\r\n                text += `Nessun file allegato\\n`;\r\n            }\r\n\r\n            text += `\\nNOTE ORDINE:\\n${notes}\\n\\n`;\r\n            text += `(Il dettaglio completo dell'elenco atleti e delle taglie e stato esportato nel file Excel allegato).\\n`;\r\n\r\n            return text;\r\n        }\r\n\r\n        \/\/ Finalizza l'ordine e avvia mailto + download Excel\r\n        function finalizeOrder() {\r\n            closeModal();\r\n\r\n            const club = document.getElementById('clubName').value || 'Societ\u00e0';\r\n            const date = document.getElementById('orderDate').value;\r\n            const subject = encodeURIComponent(`NUOVO ORDINE ARCISPORT - ${club} (${date})`);\r\n            const body = encodeURIComponent(buildEmailBody());\r\n\r\n            \/\/ 1. Genera e scarica automaticamente il vero file Excel (.xlsx)\r\n            exportExcel();\r\n\r\n            \/\/ 2. Se \u00e8 stato configurato Formspree \/ backend personalizzato, invia in background\r\n            if (FORMSPREE_ENDPOINT && FORMSPREE_ENDPOINT.trim() !== \"\") {\r\n                fetch(FORMSPREE_ENDPOINT, {\r\n                    method: 'POST',\r\n                    headers: { 'Content-Type': 'application\/json' },\r\n                    body: JSON.stringify({\r\n                        email: DEST_EMAIL,\r\n                        subject: `NUOVO ORDINE ARCISPORT - ${club}`,\r\n                        message: buildEmailBody()\r\n                    })\r\n                }).then(res => {\r\n                    if(res.ok) alert(\"\u2705 Ordine inviato con successo a \" + DEST_EMAIL);\r\n                    else alert(\"Messaggio inviato. Si prega di verificare l'e-mail.\");\r\n                }).catch(() => {\r\n                    \/\/ Fallback su Mailto\r\n                    window.location.href = `mailto:${DEST_EMAIL}?subject=${subject}&body=${body}`;\r\n                });\r\n            } else {\r\n                \/\/ 3. Fallback standard: apre il client di posta predefinito con Mailto\r\n                setTimeout(() => {\r\n                    window.location.href = `mailto:${DEST_EMAIL}?subject=${subject}&body=${body}`;\r\n                }, 400);\r\n\r\n                alert(`\u2709\ufe0f Invio in corso!\\n\\nSi aprir\u00e0 il tuo programma di posta con l'e-mail precompilata per ${DEST_EMAIL}.\\n\\n\u26a0\ufe0f RICORDA: Allega all'e-mail il file Excel (.xlsx) generato automaticamente ed eventuali loghi o grafiche.`);\r\n            }\r\n        }\r\n\r\n        \/\/ Esportazione avanzata in vero formato Excel (.xlsx) tramite SheetJS\r\n        function exportExcel() {\r\n            const club = document.getElementById('clubName').value || 'Societa';\r\n            const date = document.getElementById('orderDate').value;\r\n            const { totalShirts, totalPants } = calculateTotals();\r\n\r\n            \/\/ Costruzione matrice dati Excel\r\n            const excelData = [];\r\n\r\n            \/\/ Intestazione\r\n            excelData.push([\"ARCISPORT - SCHEDA D'ORDINE ABBIGLIAMENTO SPORTIVO\"]);\r\n            excelData.push([\"Data Generazione Documento:\", new Date().toLocaleDateString('it-IT')]);\r\n            excelData.push([]); \/\/ Riga vuota\r\n\r\n            \/\/ 1. Dati Generali\r\n            excelData.push([\"1. DATI GENERALI ORDINE\"]);\r\n            excelData.push([\"Data Ordine\", date]);\r\n            excelData.push([\"Azienda \/ Dealer\", document.getElementById('companyName').value || '']);\r\n            excelData.push([\"Riferimento Societa \/ Club\", club]);\r\n            excelData.push([\"Sport\", document.getElementById('sportType').value]);\r\n            excelData.push([\"Tipo Collo Maglia\", document.getElementById('collarType').value]);\r\n            excelData.push([\"Tessuto Maglia\", document.getElementById('shirtFabric').value || '']);\r\n            excelData.push([\"Tessuto Pantaloncino\", document.getElementById('pantFabric').value || '']);\r\n            excelData.push([]);\r\n\r\n            \/\/ 2. Riepilogo Quantit\u00e0 & Taglie\r\n            excelData.push([\"2. RIEPILOGO QUANTIT\u00c0 & TAGLIE\"]);\r\n            const headerSizes = [\"Articolo\", ...SIZES, \"TOTALE\"];\r\n            excelData.push(headerSizes);\r\n\r\n            let shirtRow = [\"MAGLIA\"];\r\n            let pantRow = [\"PANTA\"];\r\n\r\n            SIZES.forEach(sz => {\r\n                const sQty = parseInt(document.querySelector(`input[data-type=\"shirt\"][data-size=\"${sz}\"]`)?.value) || 0;\r\n                const pQty = parseInt(document.querySelector(`input[data-type=\"pant\"][data-size=\"${sz}\"]`)?.value) || 0;\r\n                shirtRow.push(sQty);\r\n                pantRow.push(pQty);\r\n            });\r\n\r\n            shirtRow.push(totalShirts);\r\n            pantRow.push(totalPants);\r\n\r\n            excelData.push(shirtRow);\r\n            excelData.push(pantRow);\r\n            excelData.push([]);\r\n\r\n            \/\/ 3. Roster Atleti\r\n            excelData.push([\"3. ELENCO ATLETI (ROSTER)\"]);\r\n            excelData.push([\r\n                \"#\", \r\n                \"Nome Atleta\", \r\n                \"Taglia Maglia\", \r\n                \"N\u00b0 Maglia\", \r\n                \"Portiere Maglia\", \r\n                \"Libero Maglia\", \r\n                \"Note Maglia\", \r\n                \"Taglia Panta\", \r\n                \"N\u00b0 Panta\", \r\n                \"Portiere Panta\", \r\n                \"Libero Panta\", \r\n                \"Note Panta\"\r\n            ]);\r\n\r\n            const rows = document.querySelectorAll('#rosterBody tr');\r\n            rows.forEach((row, index) => {\r\n                const nameInput = row.querySelector('input[placeholder=\"Nome Cognome\"]');\r\n                const name = nameInput ? nameInput.value : '';\r\n                \r\n                const selects = row.querySelectorAll('select');\r\n                const shirtSize = selects[0] ? selects[0].value : '';\r\n                const pantSize = selects[1] ? selects[1].value : '';\r\n\r\n                const inputs = row.querySelectorAll('input[type=\"text\"]');\r\n                const shirtNum = inputs[1] ? inputs[1].value : '';\r\n                const shirtNotes = inputs[2] ? inputs[2].value : '';\r\n                const pantNum = inputs[3] ? inputs[3].value : '';\r\n                const pantNotes = inputs[4] ? inputs[4].value : '';\r\n\r\n                const checkboxes = row.querySelectorAll('input[type=\"checkbox\"]');\r\n                const shirtPor = checkboxes[0] && checkboxes[0].checked ? 'SI' : 'NO';\r\n                const shirtLib = checkboxes[1] && checkboxes[1].checked ? 'SI' : 'NO';\r\n                const pantPor = checkboxes[2] && checkboxes[2].checked ? 'SI' : 'NO';\r\n                const pantLib = checkboxes[3] && checkboxes[3].checked ? 'SI' : 'NO';\r\n\r\n                excelData.push([\r\n                    index + 1,\r\n                    name,\r\n                    shirtSize,\r\n                    shirtNum,\r\n                    shirtPor,\r\n                    shirtLib,\r\n                    shirtNotes,\r\n                    pantSize,\r\n                    pantNum,\r\n                    pantPor,\r\n                    pantLib,\r\n                    pantNotes\r\n                ]);\r\n            });\r\n\r\n            excelData.push([]);\r\n\r\n            \/\/ 4. Note e Allegati\r\n            excelData.push([\"4. NOTE & ALLEGATI\"]);\r\n            excelData.push([\"Note Generali\", document.getElementById('orderNotes').value || '']);\r\n            excelData.push([\"File Allegati Inseriti\", uploadedFiles.map(f => `${f.name} (${(f.size\/1024).toFixed(1)} KB)`).join(', ') || 'Nessun file']);\r\n\r\n            \/\/ Creazione Foglio di Lavoro Excel tramite SheetJS\r\n            const ws = XLSX.utils.aoa_to_sheet(excelData);\r\n\r\n            \/\/ Regolazione larghezza colonne automatiche\r\n            ws['!cols'] = [\r\n                { wch: 6 },  \/\/ #\r\n                { wch: 25 }, \/\/ Nome \/ Campo\r\n                { wch: 14 }, \/\/ Taglia M\r\n                { wch: 10 }, \/\/ N\u00b0 M\r\n                { wch: 14 }, \/\/ POR M\r\n                { wch: 14 }, \/\/ LIB M\r\n                { wch: 20 }, \/\/ Note M\r\n                { wch: 14 }, \/\/ Taglia P\r\n                { wch: 10 }, \/\/ N\u00b0 P\r\n                { wch: 14 }, \/\/ POR P\r\n                { wch: 14 }, \/\/ LIB P\r\n                { wch: 20 }  \/\/ Note P\r\n            ];\r\n\r\n            const wb = XLSX.utils.book_new();\r\n            XLSX.utils.book_append_sheet(wb, ws, \"Ordine ARCISPORT\");\r\n\r\n            \/\/ Download del file .xlsx\r\n            const cleanClub = club.replace(\/[^a-zA-Z0-9]\/g, '_');\r\n            XLSX.writeFile(wb, `Ordine_ARCISPORT_${cleanClub}_${date}.xlsx`);\r\n        }\r\n\r\n        \/\/ Funzione ausiliaria per calcolo rapido totali\r\n        function calculateTotals() {\r\n            let totalShirts = 0;\r\n            let totalPants = 0;\r\n\r\n            SIZES.forEach(sz => {\r\n                const sQty = parseInt(document.querySelector(`input[data-type=\"shirt\"][data-size=\"${sz}\"]`)?.value) || 0;\r\n                const pQty = parseInt(document.querySelector(`input[data-type=\"pant\"][data-size=\"${sz}\"]`)?.value) || 0;\r\n                totalShirts += sQty;\r\n                totalPants += pQty;\r\n            });\r\n\r\n            return { totalShirts, totalPants };\r\n        }\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Modulo d&#8217;Ordine ARCISPORT ARC ARCISPORT Modulo Configurazione Ordine Abbigliamento Stampa \/ PDF Scarica Excel (.xlsx) Invia Ordine Modulo Unificato Ordine Abbigliamento Sportivo Compila i dati richiesti, seleziona le quantit\u00e0 per taglia e inserisci il dettaglio atleti. Note per la compilazione: Compilare le taglie dalla pi\u00f9 piccola alla pi\u00f9 grande. La tabella atleti verr\u00e0 sincronizzata automaticamente. &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/www.arcigraphic.com\/index.php\/ordini\/\"> <span class=\"screen-reader-text\">Modulo Ordini<\/span> Leggi altro &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-global-header-display":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":""},"_links":{"self":[{"href":"https:\/\/www.arcigraphic.com\/index.php\/wp-json\/wp\/v2\/pages\/528"}],"collection":[{"href":"https:\/\/www.arcigraphic.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.arcigraphic.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.arcigraphic.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.arcigraphic.com\/index.php\/wp-json\/wp\/v2\/comments?post=528"}],"version-history":[{"count":8,"href":"https:\/\/www.arcigraphic.com\/index.php\/wp-json\/wp\/v2\/pages\/528\/revisions"}],"predecessor-version":[{"id":1412,"href":"https:\/\/www.arcigraphic.com\/index.php\/wp-json\/wp\/v2\/pages\/528\/revisions\/1412"}],"wp:attachment":[{"href":"https:\/\/www.arcigraphic.com\/index.php\/wp-json\/wp\/v2\/media?parent=528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}