🏓

Pickleball Squad Scheduler

Who's filling in?

Mon

Tue

Wed

Thu

Fri

Sat

Sun

👆 Tap a date to set available hours

🏆 Best Times to Play

${activePlayer} — ${label}

Tap hour blocks you're free

`; PERIODS.forEach(period=>{html+=`

${period.label}

`;}); html+=`

`;wrap.innerHTML=html; PERIODS.forEach(period=>{ const container=document.getElementById(`hg-${period.key}`); HOURS.filter(h=>h.period===period.key).forEach(h=>{ const active=availability[selectedDateKey][activePlayer].has(h.key); const btn=document.createElement("button");btn.className="hour-btn"; btn.style.borderColor=active?period.color:"#334155";btn.style.background=active?period.color+"33":"#0f172a";btn.style.color=active?period.color:"#475569"; btn.textContent=h.label; btn.onclick=()=>{const s=availability[selectedDateKey][activePlayer];s.has(h.key)?s.delete(h.key):s.add(h.key);saveAvail();renderCalendar();renderTimePicker();}; container.appendChild(btn); }); }); } function renderAll(){renderWeekNav();renderPlayerGrid();renderCalendar();renderTimePicker();} // ── BEST TIMES ── function renderSummary(){ const days=getWindowDays(summaryWeekOffset); document.getElementById("summary-week-label").textContent=getWindowLabel(summaryWeekOffset); document.getElementById("summary-week-sub").textContent=getWindowSub(summaryWeekOffset); const bl=document.getElementById("best-list");bl.innerHTML=""; const results=[]; days.forEach(d=>{ const k=dateKey(d); HOURS.forEach(h=>{ const who=PLAYERS.filter(p=>availability[k]?.[p]?.has(h.key)); if(who.length>=2)results.push({d,slot:h.key,label:h.label,count:who.length,who}); }); }); results.sort((a,b)=>b.count-a.count); if(!results.length){ // Show how many slots each player has for debugging const totalSlots=days.reduce((sum,d)=>{ const k=dateKey(d); return sum+PLAYERS.reduce((ps,p)=>ps+(availability[k]?.[p]?.size||0),0); },0); bl.innerHTML=`

⏳

No overlaps yet for this period!

${totalSlots} total slots marked across all players

`; return; } results.slice(0,10).forEach(({d,label,count,who},idx)=>{ const isTop=idx===0,sc=getHourColor(results[idx].slot); const whoTags=who.map(w=>`${w}`).join(""); bl.innerHTML+=`

${DAY_NAMES[d.getDay()]}

${d.getDate()}

${MONTH_NAMES[d.getMonth()]}

${label}

${whoTags}

${count}

`; }); } // ── BOOKINGS ── function renderPayGrid(){ const grid=document.getElementById("b-pay-grid");grid.innerHTML=""; PLAYERS.forEach((p,i)=>{ const isPaying=bookingPayStatus[p]!==false; // default true const row=document.createElement("div");row.className="pay-toggle-row"; row.innerHTML=`${p}

`; grid.appendChild(row); }); } function setPayStatus(p,val){bookingPayStatus[p]=val;renderPayGrid();} function openBookingModal(){ bookingPayStatus={};PLAYERS.forEach(p=>bookingPayStatus[p]=true); document.getElementById("b-date").value=new Date().toISOString().split('T')[0]; document.getElementById("b-court").value=""; document.getElementById("b-time").value=""; document.getElementById("b-cost").value=""; document.getElementById("b-notes").value=""; renderPayGrid(); document.getElementById("booking-modal").classList.add("open"); } function closeBookingModal(){document.getElementById("booking-modal").classList.remove("open");} function saveBooking(){ const court=document.getElementById("b-court").value.trim(); const date=document.getElementById("b-date").value; const time=document.getElementById("b-time").value.trim(); const cost=parseFloat(document.getElementById("b-cost").value)||0; const notes=document.getElementById("b-notes").value.trim(); const payingPlayers=PLAYERS.filter(p=>bookingPayStatus[p]!==false); if(!court||!date){alert("Please fill in court and date.");return;} const id=uid(); db.ref("bookings/"+id).set({id,court,date,time,cost,notes,payStatus:{...bookingPayStatus},createdAt:Date.now()}); closeBookingModal(); } function deleteBooking(id){if(confirm("Delete this booking?"))db.ref("bookings/"+id).remove();} function renderBookings(){ const list=document.getElementById("bookings-list");if(!list)return; const items=Object.values(bookings).sort((a,b)=>a.date.localeCompare(b.date)); if(!items.length){list.innerHTML=`

📋

No bookings yet!

`;return;} list.innerHTML=""; items.forEach(b=>{ const d=parseKey(b.date); const dayLabel=`${DAY_NAMES[d.getDay()]}, ${FULL_MONTHS[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`; const payingPlayers=PLAYERS.filter(p=>b.payStatus?b.payStatus[p]!==false:true); const splitAmt=payingPlayers.length>0?(b.cost/payingPlayers.length):0; const splitRows=PLAYERS.map(p=>{ const pays=b.payStatus?b.payStatus[p]!==false:true; const ci=PLAYERS.indexOf(p); return `

${p}${pays?"₱"+splitAmt.toFixed(2):"Free"}

`; }).join(""); list.innerHTML+=`

${dayLabel}

🏟 ${b.court}

${b.time?`

⏰ ${b.time}

`:""} ${b.notes?`

📝 ${b.notes}

`:""}

💰 Cost Split

${splitRows}

Total${formatPHP(b.cost)}

Each paying player₱${splitAmt.toFixed(2)}

`; }); } // ── OPEN PLAY ── function populateOpPlayers(){ const c=document.getElementById("op-players");c.innerHTML=""; PLAYERS.forEach((p,i)=>{ const isOn=opSelectedPlayers.has(p); const btn=document.createElement("button");btn.className="player-check"; btn.style.borderColor=isOn?PLAYER_COLORS[i]:"#334155";btn.style.background=isOn?PLAYER_COLORS[i]+"22":"#0f172a";btn.style.color=isOn?PLAYER_COLORS[i]:"#64748b"; btn.textContent=p; btn.onclick=()=>{isOn?opSelectedPlayers.delete(p):opSelectedPlayers.add(p);populateOpPlayers();}; c.appendChild(btn); }); } function openOpenPlayModal(){ opSelectedPlayers=new Set(); document.getElementById("op-date").value=new Date().toISOString().split('T')[0]; document.getElementById("op-court").value="";document.getElementById("op-time").value="";document.getElementById("op-notes").value=""; populateOpPlayers(); document.getElementById("openplay-modal").classList.add("open"); } function closeOpenPlayModal(){document.getElementById("openplay-modal").classList.remove("open");} function saveOpenPlay(){ const court=document.getElementById("op-court").value.trim(); const date=document.getElementById("op-date").value; const time=document.getElementById("op-time").value.trim(); const notes=document.getElementById("op-notes").value.trim(); const players=[...opSelectedPlayers]; if(!court||!date||!players.length){alert("Please fill in venue, date, and select players.");return;} const id=uid(); db.ref("openplays/"+id).set({id,court,date,time,notes,players,createdAt:Date.now()}); closeOpenPlayModal(); } function deleteOpenPlay(id){if(confirm("Delete this session?"))db.ref("openplays/"+id).remove();} let editingOpId=null,eopSelectedPlayers=new Set(); function populateEopPlayers(){ const c=document.getElementById("eop-players");if(!c)return;c.innerHTML=""; PLAYERS.forEach((p,i)=>{ const isOn=eopSelectedPlayers.has(p); const btn=document.createElement("button");btn.className="player-check"; btn.style.borderColor=isOn?PLAYER_COLORS[i]:"#334155";btn.style.background=isOn?PLAYER_COLORS[i]+"22":"#0f172a";btn.style.color=isOn?PLAYER_COLORS[i]:"#64748b"; btn.textContent=p; btn.onclick=()=>{if(eopSelectedPlayers.has(p))eopSelectedPlayers.delete(p);else eopSelectedPlayers.add(p);populateEopPlayers();}; c.appendChild(btn); }); } function openEditOpenPlayModal(id){ const op=openPlays[id];if(!op)return; editingOpId=id;eopSelectedPlayers=new Set(op.players||[]); document.getElementById("eop-court").value=op.court||""; document.getElementById("eop-date").value=op.date||""; document.getElementById("eop-time").value=op.time||""; document.getElementById("eop-notes").value=op.notes||""; populateEopPlayers(); document.getElementById("edit-openplay-modal").classList.add("open"); } function closeEditOpenPlayModal(){document.getElementById("edit-openplay-modal").classList.remove("open");editingOpId=null;} function saveEditOpenPlay(){ if(!editingOpId)return; const court=document.getElementById("eop-court").value.trim(); const date=document.getElementById("eop-date").value; const time=document.getElementById("eop-time").value.trim(); const notes=document.getElementById("eop-notes").value.trim(); const players=[...eopSelectedPlayers]; if(!court||!date){alert("Please fill in venue and date.");return;} db.ref("openplays/"+editingOpId).update({court,date,time,notes,players}); closeEditOpenPlayModal(); } function renderOpenPlays(){ const list=document.getElementById("openplay-list");if(!list)return; const items=Object.values(openPlays).sort((a,b)=>b.createdAt-a.createdAt); if(!items.length){list.innerHTML=`

🎾

No open play sessions yet!

`;return;} list.innerHTML=""; items.forEach(op=>{ const d=parseKey(op.date); const dayLabel=`${DAY_NAMES[d.getDay()]}, ${FULL_MONTHS[d.getMonth()]} ${d.getDate()}`; const playerTags=(op.players||[]).map(p=>`${p}`).join(""); list.innerHTML+=`

🎾 ${op.court}

${dayLabel}${op.time?" · "+op.time:""}

${op.notes?`

📝 ${op.notes}

`:""}

Players

${playerTags||'No players yet — tap Edit to add'}

`; }); } if('serviceWorker' in navigator)navigator.serviceWorker.register('/sw.js').catch(()=>{});