<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Verifica Informatica - Gestione Prestazioni Mediche</title>
    <script>
        // 1. Vettore di oggetti per popolare la select con value (codice) e innerText (descrizione) distinti
        const elencoVisite = [
            {codiceEsame: "VIS-CARD", descrizioneVisita: "Visita Cardiologica con Elettrocardiogramma"},
            {codiceEsame: "VIS-ORTI", descrizioneVisita: "Visita Ortopedica Specialistica"},
            {codiceEsame: "VIS-DERM", descrizioneVisita: "Visita Dermatologica di Controllo"},
            {codiceEsame: "VIS-OCUL", descrizioneVisita: "Visita Oculistica Completa"},
            {codiceEsame: "VIS-ECOG", descrizioneVisita: "Ecografia Addominale"}
        ];
        function carSel() {
            let sel = document.getElementById("selectVisita")
            let codEsa;
            let val = 1;
            for (let i = 0; i < elencoVisite.length - 1; i++) {
                let opt = document.createElement("option")
                codEsa = elencoVisite[i].codiceEsame
                opt.setAttribute("id", codEsa)
                opt.value = val
                opt.innerText = elencoVisite[i].descrizioneVisita
                sel.appendChild(opt)
                val++
            }
        }
        function aggiungiPrestazione() {
            let table = document.getElementById("tabellaPrestazioni")
            let nome = document.getElementById("txtNomeCognome").value
            let data = document.getElementById("txtData").value
            let sel = document.getElementById("selectVisita").value
            let sel2 = document.getElementById("selectVisita")
            let par = document.getElementById("lblErrore")
            if (nome == ""|| data == ""||sel == "") {
                par.innerText = "Compilare tutti i campi obbligatoriamente!"
            }else {
            let row = table.insertRow()
            let c1 = row.insertCell(0)
            let cb = document.createElement("input")
            cb.setAttribute("type", "checkbox")
            cb.setAttribute("name", "cbTab")
            c1.appendChild(cb)
            let c2 = row.insertCell(1)
            c2.innerText = nome
            let c3 = row.insertCell(2)
            c3.innerText = data
            let c4 = row.insertCell(3)
            for (let i = 0; i < sel2.length; i++) {
                if (sel2[i].value == sel ) {
                c4.innerText = sel2[i].id
                }
            }
            let c5 = row.insertCell(4)
            for (let i = 0; i < sel2.length; i++) {
                if (sel2[i].value == sel ) {
                c5.innerText = sel2[i].innerText
                }
            }
            let c6 = row.insertCell(5)
            let btn = document.createElement("button")
            btn.innerText = "Modifica"
            btn.setAttribute("function", "modifica(this)")
            c6.appendChild(btn)
        }
        }
        function toggleSelezionaTutti(cbBoss) {
            let cb = document.getElementsByName("cbTab")
            for (let i = 0 ; i < cb.length; i++) {
            if (cbBoss.checked == true) {
                cb[i].checked = true
            } else {
                cb[i].checked = false
            }
        }
        }
        function eliminaSelezionati () {
            let cb = document.getElementsByName("cbTab")
            for (let i = 0 ; i < cb.length; i++) {
                if (cb[i].checked) {
                cb[i].closest("tr").remove()
                i--;;
            }
            }
        }
        function modifica(mod){
            let h2 = document.getElementById("titoloForm")
            h2.innerText = "Modifica Prenotazione"
            let table = document.getElementById("tabellaPrestazioni")
            let nome = document.getElementById("txtNomeCognome").value
            let data = document.getElementById("txtData").value
            let sel = document.getElementById("selectVisita").value
            let t = mod.closest("tr")
            let p = document.getElementById("ppp")
            let btn = document.getElementById("btnAggiungi")
            btn.setAttribute("style", "display:none")
            let btnSalva = document.getElementById("btnSalva")
            btnSalva.setAttribute("sytle", "display:inline;")
            let btnAnnulla = document.getElementById("btnAnnulla")
            btnAnnulla.setAttribute("sytle", "display:inline;")
            salvaMod()
            annMod()
        }
        function salvaMod() {

        }
        function annMod () {
            
        }
    </script>
</head>

<body onload="carSel()">

    <section>
        <h2 id="titoloForm">Inserisci Nuova Prenotazione</h2>

        <p>
            <label for="txtNomeCognome">Nome e Cognome:</label><br>
            <input type="text" id="txtNomeCognome" placeholder="Es. Mario Rossi">
        </p>

        <p>
            <label for="txtData">Data appuntamento:</label><br>
            <input type="date" id="txtData">
        </p>

        <!-- Select popolata dinamicamente da un vettore di oggetti con value (codice) e innerText (descrizione) -->
        <p>
            <label for="selectVisita">Tipologia Visita / Reparto:</label><br>
            <select id="selectVisita">
                <option value="">-- Seleziona prestazione medica --</option>
            </select>
        </p>

        <p>
            <button id="btnAggiungi" onclick="aggiungiPrestazione()">Aggiungi Prestazione</button>
            <button id="btnSalva" onclick="salvaModifica()" style="display: none;">Salva Modifiche</button>
            <button id="btnAnnulla" onclick="annullaModifica()" style="display: none;">Annulla</button>
        </p>

        <p id="lblErrore" style="color: red;" style="display: none;"></p>
    </section>

    <hr>

    <section>
        <h2>Elenco Prenotazioni</h2>

        <!-- Pulsante esterno alla tabella per eliminare la multiselezione -->
        <p>
            <button onclick="eliminaSelezionati()">Elimina selezionati</button>
        </p>

        <table border="1" cellpadding="8" cellspacing="0" id="tabellaPrestazioni">
            <thead>
                <tr>
                    <th>
                        <!-- Checkbox generale per selezionare/deselezionare tutto -->
                        <input type="checkbox" id="chkSelezionaTutti" onclick="toggleSelezionaTutti(this)">
                    </th>
                    <th>Paziente</th>
                    <th>Data Esame</th>
                    <th>Codice Esame</th>
                    <th>Descrizione Esame</th>
                    <th>Azioni</th>
                </tr>
            </thead>
            <tbody id="tblCorpo">
                <!-- Righe generate dinamicamente da JavaScript -->
                <tr>
                    <td><input type="checkbox" name="cbTab"></td>
                    <td>Luca Bianchi</td>
                    <td>02/11/2026</td>
                    <td>VIS-CARD</td>
                    <td>Visita Cardiologica con Elettrocardiogramma</td>
                    <td>
                        <button onclick="modifica(this)">Modifica</button>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" name="cbTab"></td>
                    <td>Giulia Verdi</td>
                    <td>15/10/2026</td>
                    <td>VIS-OCUL</td>
                    <td>Visita Oculistica Completa</td>
                    <td>
                        <button onclick="modifica(this)">Modifica</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </section>

</body>

</html>