/* ========================= WRAPPER ARCHIVIO ========================= */ #courses-archive{ width:100%; } /* ========================= TOP BAR ========================= */ #courses-archive .courses-topbar{ display:flex; gap:16px; margin-bottom:34px; flex-wrap:wrap; } #courses-archive .courses-search, #courses-archive .courses-filter{ height:54px; border:none; border-radius:16px; padding:0 18px; font-size:16px; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.06); } #courses-archive .courses-search{ flex:1; min-width:280px; } #courses-archive .courses-filter{ min-width:220px; cursor:pointer; } /* NASCONDE SOTTOCATEGORIE */ #courses-archive #subFilter.hidden{ display:none; } /* ========================= EMPTY STATE ========================= */ #courses-archive .empty-state{ background:#fff; border-radius:24px; padding:80px 30px; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.05); } #courses-archive .empty-state-title{ font-size:30px; font-weight:700; color:#111; margin-bottom:14px; } #courses-archive .empty-state-text{ font-size:18px; color:#666; line-height:1.5; max-width:600px; margin:auto; } /* ========================= GRID ========================= */ #courses-archive #courses-container{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:24px; } @media(max-width:1200px){ #courses-archive #courses-container{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:768px){ #courses-archive #courses-container{ grid-template-columns:repeat(1,minmax(0,1fr)); } } /* ========================= CARD ========================= */ #courses-archive .course-card{ background:#fff; border-radius:24px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.08); display:flex; flex-direction:column; height:100%; } #courses-archive .course-card img{ width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff; display:block; } #courses-archive .course-content{ padding:22px; display:flex; flex-direction:column; flex-grow:1; } #courses-archive .course-title{ font-size:18px; line-height:1.3; font-weight:700; margin-bottom:22px; color:#111; min-height:90px; } /* ========================= CARD PREZZI ========================= */ #courses-archive .course-card-price-wrapper{ margin-top:auto; margin-bottom:18px; text-align:center; } #courses-archive .course-card-old-price{ display:block; font-size:14px; color:#888; text-decoration:line-through; margin-bottom:2px; } #courses-archive .course-card-price{ display:block; font-size:24px; font-weight:800; color:#0f67a6; line-height:1; } #courses-archive .course-btn{ background:#0f67a6; color:#fff; border:none; padding:12px 20px; border-radius:999px; cursor:pointer; font-weight:700; transition:.3s; align-self:center; } #courses-archive .course-btn:hover{ background:#0c5488; } /* ========================= MODAL ========================= */ #courses-archive .course-modal{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; justify-content:center; align-items:center; z-index:999999; padding:20px; overflow-y:auto; } #courses-archive .course-modal.active{ display:flex; } #courses-archive .course-modal-box{ width:100%; max-width:1000px; background:#fff; border-radius:24px; overflow:hidden; position:relative; } #courses-archive .course-close{ position:absolute; top:12px; right:18px; font-size:34px; cursor:pointer; z-index:99999; color:#111; line-height:1; background:#fff; width:42px; height:42px; border-radius:999px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.15); } /* ========================= MODAL GRID ========================= */ #courses-archive .modal-grid{ display:flex; flex-wrap:wrap; } #courses-archive .modal-left{ width:55%; } #courses-archive .modal-right{ width:45%; } /* ========================= LEFT ========================= */ #courses-archive .modal-left{ background:#0f67a6; color:#fff; padding:42px; } #courses-archive .modal-title{ font-size:34px; line-height:1.1; margin-bottom:22px; font-weight:700; } #courses-archive .modal-description{ font-size:16px; line-height:1.5; color:rgba(255,255,255,.95); } /* ========================= RIGHT ========================= */ #courses-archive .modal-right{ background:#f5f5f5; padding:28px 28px 40px; display:flex; flex-direction:column; } #courses-archive .modal-right img{ width:100%; border-radius:18px; margin-bottom:34px; } /* ========================= DETAILS ========================= */ #courses-archive .course-details-title{ font-size:24px; margin-bottom:18px; color:#111; font-weight:700; } #courses-archive .course-detail{ margin-bottom:12px; font-size:16px; line-height:1.35; color:#222; } /* ========================= PREZZI POPUP ========================= */ #courses-archive .course-price-wrapper{ margin-bottom:28px; } #courses-archive .course-old-price{ font-size:22px; color:#888; text-decoration:line-through; margin-bottom:6px; } #courses-archive .course-price{ font-size:34px; font-weight:800; color:#0f67a6; line-height:1; } /* ========================= CTA ========================= */ #courses-archive .modal-cta{ display:inline-flex; align-items:center; justify-content:center; margin-top:24px; padding:18px 26px; background:#0f67a6; color:#fff; text-decoration:none; border-radius:999px; font-weight:700; transition:.3s; } #courses-archive .modal-cta:hover{ background:#0c5488; } /* ========================= MOBILE ========================= */ @media(max-width:900px){ #courses-archive .course-modal{ align-items:flex-start; padding:10px; } #courses-archive .course-modal-box{ margin-top:20px; margin-bottom:20px; } #courses-archive .modal-left, #courses-archive .modal-right{ width:100%; } #courses-archive .modal-right{ order:1; background:#fff; padding:24px; } #courses-archive .modal-left{ order:2; padding:30px 24px; } #courses-archive .modal-title{ font-size:28px; } #courses-archive .course-details-title{ font-size:24px; } #courses-archive .course-title{ min-height:auto; } } let allCourses = []; let clientPrices = {}; /* ========================= CATEGORIE VISIBILI ========================= */ const visibleCategories = [ "Scuola", "Università", "Test di ammissione", "Concorsi", "Formazione professionalizzante", "Microcredenziali", "Formazione aziendale", "Pubblica Amministrazione" ]; /* ========================= PREZZI CLIENTE ========================= */ function handleClientPrices(response){ const rows = response.table.rows; rows.forEach(row => { const id = row.c[0]?.v; if (!id) return; clientPrices[id] = { prezzo_base: row.c[2]?.v || "", prezzo_scontato: row.c[3]?.v || "" }; }); } /* ========================= HANDLE COURSES ========================= */ function handleCourses(response){ const rows = response.table.rows; allCourses = rows.map(row => { const course = { id: row.c[0]?.v || "", titolo: row.c[1]?.v || "", descrizione: row.c[2]?.v || "", immagine: row.c[3]?.v || "", validita: row.c[4]?.v || "", carico_ore: row.c[5]?.v || "", materie: row.c[6]?.v || 0, ore_video: row.c[7]?.v || 0, dispense: row.c[8]?.v || 0, cfp: row.c[9]?.v || "", macro_categoria: row.c[10]?.v || "", sotto_categoria: row.c[11]?.v || "", prezzo_base: row.c[12]?.v || "", prezzo_scontato: row.c[13]?.v || "" }; const customPrices = clientPrices[course.id]; if (customPrices) { course.prezzo_base = customPrices.prezzo_base || course.prezzo_base; course.prezzo_scontato = customPrices.prezzo_scontato || course.prezzo_scontato; } return course; }); populateFilters(); updateSubCategories(); renderEmptyState(); } /* ========================= POPOLA FILTRI ========================= */ function populateFilters(){ const macroSelect = document.getElementById("macroFilter"); macroSelect.innerHTML = 'Tutte le macroaree'; visibleCategories.forEach(category => { const option = document.createElement("option"); option.value = category; option.textContent = category; macroSelect.appendChild(option); }); } /* ========================= UPDATE SUBCATEGORIES ========================= */ function updateSubCategories(){ const macro = document .getElementById("macroFilter") .value; const subSelect = document.getElementById("subFilter"); subSelect.innerHTML = 'Tutte le sottocategorie'; subSelect.value = ""; if(!macro){ subSelect.classList.add("hidden"); return; } subSelect.classList.remove("hidden"); let filteredCourses = allCourses.filter(course => visibleCategories.includes(course.macro_categoria) && course.macro_categoria === macro ); const subCategories = [ ...new Set( filteredCourses.map(course => course.sotto_categoria) ) ]; subCategories.sort(); subCategories.forEach(sub => { if(!sub) return; const option = document.createElement("option"); option.value = sub; option.textContent = sub; subSelect.appendChild(option); }); } /* ========================= EMPTY STATE ========================= */ function renderEmptyState(){ const container = document.getElementById("courses-container"); container.innerHTML = ` `; } /* ========================= RENDER COURSES ========================= */ function renderCourses(courses){ const container = document.getElementById("courses-container"); let html = ""; courses.forEach(course => { html += ` `; }); container.innerHTML = html; } /* ========================= FILTER COURSES ========================= */ function filterCourses(){ const search = document .getElementById("courseSearch") .value .toLowerCase(); const macro = document .getElementById("macroFilter") .value; const sub = document .getElementById("subFilter") .value; if(!search && !macro){ renderEmptyState(); return; } const filtered = allCourses.filter(course => { const matchSearch = course.titolo.toLowerCase().includes(search); const matchMacro = !macro || course.macro_categoria === macro; const matchSub = !sub || course.sotto_categoria === sub; const visible = visibleCategories.includes(course.macro_categoria); return ( matchSearch && matchMacro && matchSub && visible ); }); renderCourses(filtered); } /* ========================= OPEN MODAL ========================= */ function openModal(courseId){ const course = allCourses.find(c => c.id == courseId); const modalContent = document.getElementById("modalContent"); modalContent.innerHTML = ` `; document .getElementById("courseModal") .classList.add("active"); document.body.style.overflow = "hidden"; } /* ========================= CLOSE MODAL ========================= */ function closeModal(){ document .getElementById("courseModal") .classList.remove("active"); document.body.style.overflow = ""; } /* ========================= EVENTI ========================= */ document .getElementById("closeModal") .addEventListener("click", closeModal); document .getElementById("courseModal") .addEventListener("click", function(e){ if(e.target.id === "courseModal"){ closeModal(); } }); document .getElementById("courseSearch") .addEventListener("input", filterCourses); document .getElementById("macroFilter") .addEventListener("change", function(){ updateSubCategories(); filterCourses(); }); document .getElementById("subFilter") .addEventListener("change", filterCourses);