<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Jam Session</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <style>
        :root { 
            --jam-green: #005f5f; 
            --jam-bordeaux: #6d0101;
            --current-bg: var(--jam-green);
            --jam-orange: #d35400; 
            --jam-dark: #333; 
            /* 1. SFONDO PIÙ CHIARO */
            --bg-list: #f8f9fa; 
        }
        
        body { background: #fff; font-family: sans-serif; font-size: 1.1rem; color: var(--jam-dark); }
        
        .top-bar { background: var(--current-bg); color: white; padding: 20px 30px; display: flex; justify-content: flex-start; align-items: center; position: relative; transition: 0.3s; }
        
        .header-tabs { display: flex; gap: 15px; }
        
        .jam-tab { 
            padding: 10px 25px; 
            border-radius: 15px; 
            text-decoration: none;
            color: white;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.05);
            transition: 0.2s;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .jam-tab:hover { background: rgba(255,255,255,0.15); color: white; }
        .jam-tab.active { 
            background: rgba(255,255,255,0.2); 
            border: 1px solid rgba(255,255,255,0.5);
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }

        .jam-title-text { font-size: 1.4rem; font-weight: 900; line-height: 1; margin-bottom: 2px; }
        .jam-date-text { font-size: 0.8rem; font-weight: 600; opacity: 0.8; }

        .nav-right { position: absolute; right: 30px; display: flex; align-items: center; gap: 15px; }
        .countdown-box { background: white; color: var(--jam-orange); padding: 5px 12px; border-radius: 6px; font-weight: 800; }

        .input-section { background: #fff; padding: 25px 0; border-bottom: 2px solid #ddd; }
        .input-row { display: flex; gap: 15px; justify-content: center; align-items: flex-end; flex-wrap: wrap; max-width: 1100px; margin: 0 auto; padding: 0 15px; }
        .field-group { display: flex; flex-direction: column; flex: 1; min-width: 200px; }
        .field-group label { font-size: 0.8rem; font-weight: 700; color: #777; text-transform: uppercase; margin-bottom: 6px; }
        .custom-input { border: 1px solid #ccc; padding: 10px; border-radius: 4px; font-size: 1rem; height: 46px; width: 100%; }
        .band-container { border: 1px solid #ccc; border-radius: 4px; display: flex; align-items: center; height: 46px; background: #fff; padding: 0 10px; gap: 10px; }
        .btn-orange { background: var(--jam-orange); color: white; border: none; padding: 0 30px; border-radius: 4px; font-weight: 700; text-transform: uppercase; height: 46px; min-width: 140px; }

        .song-list-wrapper { background: var(--bg-list); padding: 30px 0; min-height: 80vh; }
        .song-container { max-width: 1100px; margin: 0 auto; padding: 0 15px; }
        
        .song-card { background: white; border-radius: 10px; padding: 15px 25px; margin-bottom: 12px; display: flex; align-items: center; border: 1px solid #dee2e6; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: 0.3s; }
        .song-card.played { filter: grayscale(100%); opacity: 0.6; }
        
        .move-arrows { display: flex; flex-direction: column; gap: 4px; margin-right: 25px; color: #bbb; font-size: 1.4rem; width: 30px; align-items: center; justify-content: center; }
        .move-arrows i:hover { color: var(--jam-orange); cursor: pointer; }

        .song-main { flex: 0 0 280px; }
        .song-title { font-size: 1.2rem; font-weight: 800; text-transform: uppercase; color: var(--current-bg); margin-bottom: 2px; }
        .song-author { font-size: 1rem; font-weight: 400; color: #000; }
        .badge-open { background: #198754; color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: 800; }

        .song-instruments { flex-grow: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
        .instr-tag { border: 1px solid #ddd; padding: 4px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 400; cursor: pointer; background: white; color: #555; }
        .instr-tag.booked { background: var(--jam-orange); color: white; border-color: var(--jam-orange); }

        .song-actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; margin-left: 20px; }
        .btn-sq { width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 6px; display: flex; align-items: center; justify-content: center; text-decoration: none; color: #555; }
        .check-box { width: 40px; height: 40px; border: 1px solid #ddd; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: #fff; }
        .check-box i { font-size: 1.1rem; font-weight: 900; color: #000; }

        @media (max-width: 768px) { 
            .desktop-only { display: none !important; } 
            .nav-right { display: none; }
            .top-bar { justify-content: center; padding: 15px; }
            .song-card { flex-direction: column; align-items: flex-start; padding: 15px; gap: 0; }
            .song-main { width: 100%; flex: none; border-bottom: 1px solid #eee; padding-bottom: 8px; }
            .song-instruments { width: 100%; flex: none; justify-content: flex-start; padding: 10px 0; gap: 5px; }
            .song-actions { width: 100%; flex: none; justify-content: flex-start; margin-left: 0; border-top: 1px solid #eee; padding-top: 10px; gap: 10px; }
            .input-row { flex-direction: column; align-items: stretch; }
            .field-group { width: 100%; min-width: unset; }
        }
    </style>
</head>
<body>

<div class="top-bar">
    <div class="header-tabs">
        <a href="/jazz" class="jam-tab active">
            <div class="jam-title-text">JAM JAZZ</div>
            <div class="jam-date-text">VENERDÌ 10 APRILE 2026</div>
        </a>
        <a href="/pop" class="jam-tab">
            <div class="jam-title-text">JAM POP</div>
            <div class="jam-date-text">MARTEDÌ 7 APRILE 2026</div>
        </a>
    </div>
    
    <div class="nav-right">
        <div id="countdown" class="countdown-box shadow-sm">--:--:--</div>
        <i class="bi bi-calendar3 fs-4 cursor-pointer" onclick="document.getElementById('dateSetter').showPicker()"></i>
        <input type="date" id="dateSetter" value="2026-04-10" style="position:absolute; visibility:hidden;" onchange="updateDate(this.value)">
    </div>
</div>

<div class="input-section">
    <div class="input-row">
        <div class="field-group">
            <label>Band & Stato</label>
            <div class="band-container">
                <input type="text" id="addBand" placeholder="Nome Band" style="border:none; outline:none; flex-grow:1;">
                <div class="d-flex align-items-center gap-1 border-start ps-2">
                    <input type="checkbox" id="addOpen" style="width:18px; height:18px; accent-color:green;">
                    <span style="font-size:0.75rem; font-weight:800;">OPEN</span>
                </div>
            </div>
        </div>
        <div class="field-group"><label>Titolo Brano</label><input type="text" id="addTitolo" class="custom-input"></div>
        <div class="field-group"><label>Autore</label><input type="text" id="addAutore" class="custom-input"></div>
        <button class="btn-orange" onclick="aggiungi()">Aggiungi</button>
    </div>
</div>

<div class="song-list-wrapper">
    <div class="song-container">
        <div class="song-card shadow-sm">
            <div class="move-arrows desktop-only">
                <i class="bi bi-caret-up-fill" data-id="53203403-ac4f-4965-8352-1116f17a43df" onclick="sposta(this.dataset.id, -1)"></i>
                <i class="bi bi-caret-down-fill" data-id="53203403-ac4f-4965-8352-1116f17a43df" onclick="sposta(this.dataset.id, 1)"></i>
            </div>
            <div class="song-main">
                <div class="song-title">So Tender</div>
                <div class="song-author text-capitalize">keith jarrett</div>
                <div class="small fw-bold text-muted mt-1"><span>Michele</span> </div>
            </div>
            <div class="song-instruments">
                <span class="instr-tag" 
                      data-sid="53203403-ac4f-4965-8352-1116f17a43df" data-name="Batteria" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Batteria</span><span class="instr-tag" 
                      data-sid="53203403-ac4f-4965-8352-1116f17a43df" data-name="Basso" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Basso</span><span class="instr-tag" 
                      data-sid="53203403-ac4f-4965-8352-1116f17a43df" data-name="Chitarra" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Chitarra</span><span class="instr-tag booked" 
                      data-sid="53203403-ac4f-4965-8352-1116f17a43df" data-name="Piano" data-player="Michele"
                      onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Piano: Michele</span><span class="instr-tag" 
                      data-sid="53203403-ac4f-4965-8352-1116f17a43df" data-name="Voce" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Voce</span>
                <span class="instr-tag" data-id="53203403-ac4f-4965-8352-1116f17a43df" onclick="nuovoStrumento(this.dataset.id)">+</span>
            </div>
            <div class="song-actions">
                <a href="https://www.youtube.com/results?search_query=%22So Tender%22+%22Keith Jarrett%22+song" target="_blank" class="btn-sq"><i class="bi bi-youtube"></i></a>
                <a href="https://www.google.com/search?q=%22So Tender%22+%22Keith Jarrett%22+score+filetype:pdf" target="_blank" class="btn-sq"><i class="bi bi-file-earmark-music"></i></a>
                <a href="https://www.google.com/search?q=%22So Tender%22+%22Keith Jarrett%22+lyrics" target="_blank" class="btn-sq fw-bold">T</a>
                <div class="btn-sq cursor-pointer" data-id="53203403-ac4f-4965-8352-1116f17a43df" onclick="modaleNote(this.dataset.id)"><i class="bi bi-journal-text"></i></div>
                <div class="btn-sq cursor-pointer" data-id="53203403-ac4f-4965-8352-1116f17a43df" onclick="modaleModifica(this.dataset.id)"><i class="bi bi-three-dots-vertical"></i></div>
                <div class="check-box desktop-only" data-id="53203403-ac4f-4965-8352-1116f17a43df" onclick="toggleSuonato(this.dataset.id)"><i class="bi bi-check2"></i></div>
            </div>
        </div>
        <div class="song-card shadow-sm">
            <div class="move-arrows desktop-only">
                <i class="bi bi-caret-up-fill" data-id="f8031ec9-c1c5-480a-9393-dfd8be14f9c0" onclick="sposta(this.dataset.id, -1)"></i>
                <i class="bi bi-caret-down-fill" data-id="f8031ec9-c1c5-480a-9393-dfd8be14f9c0" onclick="sposta(this.dataset.id, 1)"></i>
            </div>
            <div class="song-main">
                <div class="song-title">Bluesette</div>
                <div class="song-author text-capitalize">toots thielemans</div>
                <div class="small fw-bold text-muted mt-1"><span>Michele</span> <span class="badge-open ms-2">OPEN</span></div>
            </div>
            <div class="song-instruments">
                <span class="instr-tag" 
                      data-sid="f8031ec9-c1c5-480a-9393-dfd8be14f9c0" data-name="Batteria" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Batteria</span><span class="instr-tag" 
                      data-sid="f8031ec9-c1c5-480a-9393-dfd8be14f9c0" data-name="Basso" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Basso</span><span class="instr-tag" 
                      data-sid="f8031ec9-c1c5-480a-9393-dfd8be14f9c0" data-name="Chitarra" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Chitarra</span><span class="instr-tag booked" 
                      data-sid="f8031ec9-c1c5-480a-9393-dfd8be14f9c0" data-name="Piano" data-player="Michele"
                      onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Piano: Michele</span><span class="instr-tag" 
                      data-sid="f8031ec9-c1c5-480a-9393-dfd8be14f9c0" data-name="Voce" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Voce</span>
                <span class="instr-tag" data-id="f8031ec9-c1c5-480a-9393-dfd8be14f9c0" onclick="nuovoStrumento(this.dataset.id)">+</span>
            </div>
            <div class="song-actions">
                <a href="https://www.youtube.com/results?search_query=%22Bluesette%22+%22Toots Thielemans%22+song" target="_blank" class="btn-sq"><i class="bi bi-youtube"></i></a>
                <a href="https://www.google.com/search?q=%22Bluesette%22+%22Toots Thielemans%22+score+filetype:pdf" target="_blank" class="btn-sq"><i class="bi bi-file-earmark-music"></i></a>
                <a href="https://www.google.com/search?q=%22Bluesette%22+%22Toots Thielemans%22+lyrics" target="_blank" class="btn-sq fw-bold">T</a>
                <div class="btn-sq cursor-pointer" data-id="f8031ec9-c1c5-480a-9393-dfd8be14f9c0" onclick="modaleNote(this.dataset.id)"><i class="bi bi-journal-text"></i></div>
                <div class="btn-sq cursor-pointer" data-id="f8031ec9-c1c5-480a-9393-dfd8be14f9c0" onclick="modaleModifica(this.dataset.id)"><i class="bi bi-three-dots-vertical"></i></div>
                <div class="check-box desktop-only" data-id="f8031ec9-c1c5-480a-9393-dfd8be14f9c0" onclick="toggleSuonato(this.dataset.id)"><i class="bi bi-check2"></i></div>
            </div>
        </div>
        <div class="song-card shadow-sm">
            <div class="move-arrows desktop-only">
                <i class="bi bi-caret-up-fill" data-id="4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32" onclick="sposta(this.dataset.id, -1)"></i>
                <i class="bi bi-caret-down-fill" data-id="4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32" onclick="sposta(this.dataset.id, 1)"></i>
            </div>
            <div class="song-main">
                <div class="song-title">Eiderdown</div>
                <div class="song-author text-capitalize">steve swallow</div>
                <div class="small fw-bold text-muted mt-1"><span>Michele</span> <span class="badge-open ms-2">OPEN</span></div>
            </div>
            <div class="song-instruments">
                <span class="instr-tag" 
                      data-sid="4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32" data-name="Batteria" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Batteria</span><span class="instr-tag" 
                      data-sid="4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32" data-name="Basso" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Basso</span><span class="instr-tag" 
                      data-sid="4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32" data-name="Chitarra" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Chitarra</span><span class="instr-tag booked" 
                      data-sid="4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32" data-name="Piano" data-player="Michele"
                      onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Piano: Michele</span><span class="instr-tag" 
                      data-sid="4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32" data-name="Voce" onclick="modaleInstr(this.dataset.sid, this.dataset.name, this.dataset.player)">Voce</span>
                <span class="instr-tag" data-id="4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32" onclick="nuovoStrumento(this.dataset.id)">+</span>
            </div>
            <div class="song-actions">
                <a href="https://www.youtube.com/results?search_query=%22Eiderdown%22+%22Steve Swallow%22+song" target="_blank" class="btn-sq"><i class="bi bi-youtube"></i></a>
                <a href="https://www.google.com/search?q=%22Eiderdown%22+%22Steve Swallow%22+score+filetype:pdf" target="_blank" class="btn-sq"><i class="bi bi-file-earmark-music"></i></a>
                <a href="https://www.google.com/search?q=%22Eiderdown%22+%22Steve Swallow%22+lyrics" target="_blank" class="btn-sq fw-bold">T</a>
                <div class="btn-sq cursor-pointer" data-id="4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32" onclick="modaleNote(this.dataset.id)"><i class="bi bi-journal-text"></i></div>
                <div class="btn-sq cursor-pointer" data-id="4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32" onclick="modaleModifica(this.dataset.id)"><i class="bi bi-three-dots-vertical"></i></div>
                <div class="check-box desktop-only" data-id="4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32" onclick="toggleSuonato(this.dataset.id)"><i class="bi bi-check2"></i></div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalGeneric" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered"><div class="modal-content" style="border-radius:10px;">
        <div class="modal-header border-0 pb-0"><h6 class="modal-title fw-bold" id="mTitle"></h6><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
        <div class="modal-body p-4" id="mBody"></div>
    </div></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    const songs = [{"id":"53203403-ac4f-4965-8352-1116f17a43df","titolo":"So Tender","autore":"Keith Jarrett","band":"Michele","open":false,"played":false,"note":"","ordine":0,"youtubeUrl":"","scoreUrl":"","lyricsUrl":"","strumenti":[{"musicista":"","nome":"Batteria"},{"musicista":"","nome":"Basso"},{"musicista":"","nome":"Chitarra"},{"musicista":"Michele","nome":"Piano"},{"musicista":"","nome":"Voce"}]},{"id":"f8031ec9-c1c5-480a-9393-dfd8be14f9c0","titolo":"Bluesette","autore":"Toots Thielemans","band":"Michele","open":true,"played":false,"note":"","ordine":1,"youtubeUrl":"","scoreUrl":"","lyricsUrl":"","strumenti":[{"musicista":"","nome":"Batteria"},{"musicista":"","nome":"Basso"},{"musicista":"","nome":"Chitarra"},{"musicista":"Michele","nome":"Piano"},{"musicista":"","nome":"Voce"}]},{"id":"4c83c2e9-f4e0-4a7e-b4ed-2c0178470c32","titolo":"Eiderdown","autore":"Steve Swallow","band":"Michele","open":true,"played":false,"note":"","ordine":2,"youtubeUrl":"","scoreUrl":"","lyricsUrl":"","strumenti":[{"musicista":"","nome":"Batteria"},{"musicista":"","nome":"Basso"},{"musicista":"","nome":"Chitarra"},{"musicista":"Michele","nome":"Piano"},{"musicista":"","nome":"Voce"}]}];
    const rawDate = "2026-04-10";
    const jamType = "jazz";
    const modal = new bootstrap.Modal(document.getElementById('modalGeneric'));

    function countdown() {
        setInterval(() => {
            const target = new Date(rawDate + "T20:30:00").getTime();
            const now = new Date().getTime();
            const d = target - now;
            if (d < 0) { document.getElementById('countdown').innerText = "LIVE!"; return; }
            const gg = Math.floor(d / 86400000);
            const hh = Math.floor((d % 86400000) / 3600000);
            const mm = Math.floor((d % 3600000) / 60000);
            const ss = Math.floor((d % 60000) / 1000);
            document.getElementById('countdown').innerText = (gg>0?gg+"d ":"")+hh+"h "+mm+"m "+ss+"s";
        }, 1000);
    }

    async function aggiungi() {
        const s = { titolo: document.getElementById('addTitolo').value, autore: document.getElementById('addAutore').value, band: document.getElementById('addBand').value, open: document.getElementById('addOpen').checked, ordine: songs.length };
        await fetch(`/${jamType}/save`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(s)});
        location.reload();
    }

    async function sposta(id, dir) {
        await fetch(`/${jamType}/move`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({id, direction: dir})});
        location.reload();
    }

    function modaleInstr(sid, name, player) {
        const p = (player && player !== 'undefined') ? player : '';
        document.getElementById('mTitle').innerText = name;
        document.getElementById('mBody').innerHTML = `
            <input type="text" id="mInputPlayer" class="form-control mb-4" value="${p}" placeholder="Nome musicista">
            <div class="d-flex justify-content-between">
                <button class="btn btn-outline-danger" onclick="eliminaInstr('${sid}', '${name}')"><i class="bi bi-trash"></i> Rimuovi</button>
                <button class="btn btn-orange px-4" onclick="salvaInstr('${sid}', '${name}')">SALVA</button>
            </div>`;
        modal.show();
    }

    async function salvaInstr(sid, name) {
        const s = songs.find(x => x.id == sid);
        s.strumenti.find(i => i.nome == name).musicista = document.getElementById('mInputPlayer').value;
        await fetch(`/${jamType}/save`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(s)});
        location.reload();
    }

    async function eliminaInstr(sid, name) {
        if(!confirm("Rimuovere lo strumento?")) return;
        const s = songs.find(x => x.id == sid);
        s.strumenti = s.strumenti.filter(i => i.nome !== name);
        await fetch(`/${jamType}/save`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(s)});
        location.reload();
    }

    function modaleModifica(sid) {
        const s = songs.find(x => x.id == sid);
        document.getElementById('mTitle').innerText = "Modifica Brano";
        document.getElementById('mBody').innerHTML = `
            <div class="mb-2"><label class="small fw-bold">TITOLO</label><input type="text" id="eTit" class="form-control" value="${s.titolo}"></div>
            <div class="mb-2"><label class="small fw-bold">AUTORE</label><input type="text" id="eAut" class="form-control" value="${s.autore}"></div>
            <div class="mb-2"><label class="small fw-bold">BAND</label><input type="text" id="eBan" class="form-control" value="${s.band}"></div>
            <div class="mb-3 form-check"><input type="checkbox" id="eOpe" class="form-check-input" ${s.open?'checked':''}><label class="form-check-label">OPEN</label></div>
            <hr>
            <div class="mb-2"><label class="small fw-bold text-danger">YouTube URL</label><input type="text" id="eYT" class="form-control" value="${s.youtubeUrl || ''}"></div>
            <div class="mb-2"><label class="small fw-bold text-primary">Spartito URL</label><input type="text" id="eSC" class="form-control" value="${s.scoreUrl || ''}"></div>
            <div class="mb-3"><label class="small fw-bold text-dark">Testo URL</label><input type="text" id="eLY" class="form-control" value="${s.lyricsUrl || ''}"></div>
            <div class="d-flex justify-content-between">
                <button class="btn btn-outline-danger" onclick="eliminaBrano('${sid}')">ELIMINA</button>
                <button class="btn btn-orange px-4" onclick="eseguiModifica('${sid}')">SALVA</button>
            </div>`;
        modal.show();
    }

    async function eseguiModifica(sid) {
        const s = songs.find(x => x.id == sid);
        s.titolo = document.getElementById('eTit').value;
        s.autore = document.getElementById('eAut').value;
        s.band = document.getElementById('eBan').value;
        s.open = document.getElementById('eOpe').checked;
        s.youtubeUrl = document.getElementById('eYT').value;
        s.scoreUrl = document.getElementById('eSC').value;
        s.lyricsUrl = document.getElementById('eLY').value;
        await fetch(`/${jamType}/save`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(s)});
        location.reload();
    }

    function nuovoStrumento(sid) {
        document.getElementById('mTitle').innerText = "Aggiungi Strumento";
        document.getElementById('mBody').innerHTML = `
            <div class="mb-2"><label class="small fw-bold">Strumento</label><input type="text" id="nInst" class="form-control"></div>
            <div class="mb-3"><label class="small fw-bold">Musicista</label><input type="text" id="nPlay" class="form-control"></div>
            <button class="btn btn-orange w-100" onclick="eseguiNuovoInstr('${sid}')">AGGIUNGI</button>`;
        modal.show();
    }

    async function eseguiNuovoInstr(sid) {
        const s = songs.find(x => x.id == sid);
        s.strumenti.push({nome: document.getElementById('nInst').value, musicista: document.getElementById('nPlay').value});
        await fetch(`/${jamType}/save`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(s)});
        location.reload();
    }

    function modaleNote(sid) {
        const s = songs.find(x => x.id == sid);
        document.getElementById('mTitle').innerText = "Note";
        document.getElementById('mBody').innerHTML = `<textarea id="nText" class="form-control mb-3" rows="5">${s.note || ''}</textarea><button class="btn btn-orange w-100" onclick="salvaNote('${sid}')">SALVA</button>`;
        modal.show();
    }

    async function salvaNote(sid) {
        const s = songs.find(x => x.id == sid);
        s.note = document.getElementById('nText').value;
        await fetch(`/${jamType}/save`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(s)});
        location.reload();
    }

    async function toggleSuonato(id) { const s = songs.find(x => x.id == id); s.played = !s.played; await fetch(`/${jamType}/save`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(s)}); location.reload(); }
    async function updateDate(d) { await fetch(`/${jamType}/saveDate`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({date: d})}); location.reload(); }
    async function eliminaBrano(id) { if(confirm("Eliminare?")) { await fetch(`/${jamType}/delete`, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({id})}); location.reload(); } }

    countdown();
</script>
</body>
</html>