<!DOCTYPE html>

<html lang="ca">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css">
    </head>
    <body>
        <style>
            .buttons.grid {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                
                justify-content: center;
                align-items : center;
            }

            .buttons.grid .button {
                flex: 1 0 20%;
                margin: 10px;
                padding: 40px 20px;
                line-height: 0px;
            }

            .buttons.grid .complex-button {
                flex: 1 0 34%;
                margin: 15px 10px;
            }
            
            .section {
                padding-top: 1rem;
            }

            #dev-mode {
              background: #d23f31;
              border: 1px solid #3e2723;
              box-shadow: 0 0 4px rgba(0,0,0,.14), 0 2px 4px rgba(0,0,0,.28);
              color: #fff;
              font-size: 10px;
              font-weight: 700;
              right: 20px;
              line-height: 18px;
              margin: -9px -50px;
              opacity: .87;
              position: absolute;
              text-align: center;
              text-shadow: 1px 1px 0 #4e342e;
              top: 20px;
              transform: rotate(45deg);
              width: 100px;
              z-index: 99;
              cursor: pointer;
            }

            #dev-mode.hidden {
              display: none;
            }
        </style>
        
        <script>
            var elements = document.getElementsByClassName("button");
            Array.from(elements).forEach(function(element) {
                element.addEventListener('click', clickButton);
                element.parent = element.parentNode.id;
            });
            var elements = document.getElementsByClassName("complex-button");
            Array.from(elements).forEach(function(element) {
                element.addEventListener('click', clickButton);
                element.parent = element.parentNode.id;
            });

            var final_JSON = {
                "class": null,
                "number": "",
                "letter": ""
            };

            function fillInSummary() {
              var begins = new Date(parseInt(final_JSON.class.begins)*1000);
              var ends = new Date(parseInt(final_JSON.class.ends)*1000);

              document.getElementById('subject-final').textContent = final_JSON.class.friendly_name;
              document.getElementById('classroom-final').textContent = final_JSON.class.room;
              document.getElementById('date-final').textContent = begins.toLocaleDateString();
              document.getElementById('time-final').textContent = formatDate(begins) + ' - ' + formatDate(ends);
              document.getElementById('letter-final').textContent = final_JSON.letter;
              document.getElementById('number-final').textContent = final_JSON.number;
            }

            function clickButton(element) {
                var btn = element.currentTarget;
                var parent = btn.parent;

                if (parent == "subject-container") {
                    // Canvi de background del button
                    var selectedClass = JSON.parse(btn.getAttribute('data-class'));
                    $("#subject-container .complex-button").removeClass("is-link")
                    btn.classList.add("is-link");
                    // Canvi JSON
                    final_JSON["class"] = selectedClass;
                    // Anchor següent pregunta
                    switchSection("section-2");
                } else if (parent == "number-container") {
                    // Canvi de background del button
                    $("#number-container .button").removeClass("is-link is-light is-active")
                    btn.classList.add("is-link", "is-light", "is-active");
                    // Canvi JSON
                    final_JSON["number"] = btn.getAttribute('data-number');
                    // Introducció de totes les dades al resum final
                    fillInSummary();
                    // Anchor següent pregunta
                    switchSection("section-send");
                } else if (parent == "letter-container") {
                    // Canvi de background del button
                    $("#letter-container .button").removeClass("is-link is-light is-active")
                    btn.classList.add("is-link", "is-light", "is-active");
                    // Canvi JSON
                    final_JSON["letter"] = btn.getAttribute('data-letter');
                    // Anchor següent pregunta
                    switchSection("section-3");
                }
            }
            
            function formatDate(d) {
                var str = "";
                if (d.getHours() < 10) str += "0";
                str += d.getHours();
                str += ":";
                if (d.getMinutes() < 10) str += "0";
                str += d.getMinutes();
                return str;
            }

          var api_url;

          window.addEventListener('load', _ => {
            // Check if user is signed in
            if (localStorage.getItem('devMode') == 'true') {
              var banner = document.getElementById('dev-mode');
              banner.addEventListener('click', _ => {
                localStorage.devMode = 'false';
                location.reload();
              });
              banner.classList.remove('hidden');
              api_url = localStorage.getItem('apiUrl') || 'https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/'
            } else {
              api_url = "https://covid-tracability-backend-prod.sandbox.avm99963.com/api/v1/";
            }
            fetch(api_url + "isSignedIn", {
              "mode": "cors",
              "credentials": "include"
            })
                .then(response => response.json())
                .then(data => {
                    if (!data.payload.signedIn) {
                        console.log("Not signed in!");
                        fetch(api_url + "getAuthUrl", {
                          "mode": "cors",
                          "credentials": "include"
                        })
                            .then(response => response.json())
                            .then(data => {
                                // TODO: redirect here
                                // location.href = data.payload.url;
                                console.warn('Log in here: ', data.payload.url);
                            });
                    }
                });

            fetch(api_url + "getCurrentClasses", {
              "mode": "cors",
              "credentials": "include"
            })
                .then(response => response.json())
                .then(data => {
                    for (var classe of data.payload.classes) {
                        console.log(classe);

                        var hora_inici = formatDate(new Date(parseInt(classe.begins)*1000));
                        var hora_final = formatDate(new Date(parseInt(classe.ends)*1000));
                        
                        var classeDiv = document.createElement('div');
                        classeDiv.classList.add('message', 'complex-button');
                        classeDiv.id = 'subject-' + classe.subject_id + '-' + classe.room;
                        classeDiv.setAttribute('data-class', JSON.stringify(classe));

                        var header = document.createElement('div');
                        header.classList.add('message-header');
                        header.textContent = classe.friendly_name;

                        var body = document.createElement('div');
                        body.classList.add('message-body');

                        var div1 = document.createElement('div');
                        var span = document.createElement('span');
                        span.textContent = classe.room;

                        div1.textContent = 'Aula ';
                        div1.appendChild(span);

                        var div2 = document.createElement('div');
                        div2.textContent = hora_inici + ' - ' + hora_final;

                        body.appendChild(div1);
                        body.appendChild(div2);

                        classeDiv.appendChild(header);
                        classeDiv.appendChild(body);

                        document.getElementById("subject-container").appendChild(classeDiv);
                    }

                    var elements = document.getElementsByClassName("button");
                    Array.from(elements).forEach(function(element) {
                        element.addEventListener('click', clickButton);
                        element.parent = element.parentNode.id;
                    });
                    var elements = document.getElementsByClassName("complex-button");
                    Array.from(elements).forEach(function(element) {
                        element.addEventListener('click', clickButton);
                        element.parent = element.parentNode.id;
                    });
                });
          });
        </script>

        <span id="dev-mode" class="hidden">Dev mode</span>
        
        <nav class="navbar is-link">
            <div class="navbar-brand">
                <div class="navbar-item has-text-weight-bold">Traçabilitat DAFME</div>
            </div>
        </nav>
        
        <section id="section-1" class="section">
            <!--
            <div class="field has-addons">
                <p class="control">
                    <button class="button">&lt;</button>
                </p>
                <p class="control">
                    <input type="date" class="button">
                </p>
                <p class="control">
                    <button class="button">&gt;</button>
                </p>
            </div>
            <div class="field has-addons">
                <p class="control">
                    <button class="button">&lt;</button>
                </p>
                <p class="control">
                    <input type="button" class="button" value="08:00 - 08:30">
                </p>
                <p class="control">
                    <button class="button">&gt;</button>
                </p>
            </div><br>
            -->
            <div id="subject-container" class="grid buttons"></div><br>
            
        </section>

        <section id="section-2" class="section" style="display: none;">
            <button class="button is-link is-light" onclick="switchSection('section-1')">Torna enrere (Classe)</button>

            <div id="letter-container" class="buttons grid">
                <button class="button" id="letter-A" data-letter="A">A</button>
                <button class="button" id="letter-B" data-letter="B">B</button>
                <button class="button" id="letter-C" data-letter="C">C</button>
                <button class="button" id="letter-D" data-letter="D">D</button>
                <button class="button" id="letter-E" data-letter="E">E</button>
                <button class="button" id="letter-F" data-letter="F">F</button>
                <button class="button" id="letter-G" data-letter="G">G</button>
                <button class="button" id="letter-H" data-letter="H">H</button>
                <button class="button" id="letter-I" data-letter="I">I</button>
                <button class="button" id="letter-J" data-letter="J">J</button>
                <button class="button" id="letter-K" data-letter="K">K</button>
                <button class="button" id="letter-L" data-letter="L">L</button>
            </div>
        </section>

        <section id="section-3" class="section" style="display: none;">
            <button class="button is-link is-light" onclick="switchSection('section-2')">Torna enrere (Lletra)</button>
            
            <div id="number-container" class="buttons grid">
                <button class="button" id="number-1" data-number="1">1</button>
                <button class="button" id="number-2" data-number="2">2</button>
                <button class="button" id="number-3" data-number="3">3</button>
                <button class="button" id="number-4" data-number="4">4</button>
                <button class="button" id="number-5" data-number="5">5</button>
                <button class="button" id="number-6" data-number="6">6</button>
                <button class="button" id="number-7" data-number="7">7</button>
                <button class="button" id="number-8" data-number="8">8</button>
                <button class="button" id="number-9" data-number="9">9</button>
                <button class="button" id="number-10" data-number="10">10</button>
            </div>
        </section>
        <section id="section-send" class="section" style="display: none;">
            <button class="button is-link is-light" onclick="switchSection('section-3')">Torna enrere (Número)</button>
            <br/><br/>
            <span class="has-text-weight-bold">Assignatura:</span>
            <span id="subject-final">Àlgebra Lineal</span><br>
            <span class="has-text-weight-bold">Aula:</span>
            <span id="classroom-final">Dele</span><br>
            <span class="has-text-weight-bold">Data:</span>
            <span id="date-final">14/3/1879</span><br>
            <span class="has-text-weight-bold">Hora:</span>
            <span id="time-final">En <strong>algun moment</strong></span><br>
            <span class="has-text-weight-bold">Posició:</span>
            <span id="letter-final">P</span><span id="number-final">2</span><br><br>

            <button id="send-button" class="button is-link is-large">Omple el formulari</button><br><br>
            
            Hi ha errors? <br /><a class="button is-link is-light" href="https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform">Completa el formulari manualment</a>
        </section>
        
        <script>
            var current_section = "section-1";

            function toggleVisibility(id) {
                var x = document.getElementById(id);
                if (x.style.display === "none") {
                    x.style.display = "block";
                } else {
                    x.style.display = "none";
                }
            }

            function switchSection(s) {
                setTimeout(function(){ 
                    toggleVisibility(current_section);
                    toggleVisibility(s);
                    current_section = s;
                }, 75);
            }

            const idsFormulari = {
              room: "1063142948",
              day: "2115504093",
              begins: "1749141911",
              ends: "1827359679",
              rows: {
                A: "208184485",
                B: "1077148310",
                C: "642851281",
                D: "1686039024",
                E: "697835787",
                F: "1511799646",
                G: "809853432",
                H: "182597499",
                I: "1890539481",
                J: "529159478",
                K: "1615241874",
                L: "1334263875"
              },
              notes: "1600275159"
            };
            const formBaseUrl = "https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform";

            function sendForm() {
                // Add subject to user
                fetch(api_url + "addUserSubject", {
                  "method": "POST",
                  "body": JSON.stringify({
                            subject: final_JSON.class.subject_id
                          }),
                  "mode": "cors",
                  "credentials": "include"
                })
                .then(res => res.json())
                .then(json => {
                  console.log("Subject added to user: ", json);

                  var begins = new Date(parseInt(final_JSON.class.begins)*1000);
                  var ends = new Date(parseInt(final_JSON.class.ends)*1000);

                  var params = new URLSearchParams();
                  params.append("entry." + idsFormulari.room, final_JSON.class.room); // class, number, letter
                  params.append("entry." + idsFormulari.day, begins.getFullYear().toString() + '-' + (begins.getMonth() + 1).toString().padStart(2, "0") + '-' + begins.getDate().toString().padStart(2, "0"));
                  params.append("entry." + idsFormulari.begins, formatDate(begins));
                  params.append("entry." + idsFormulari.ends, formatDate(ends));
                  params.append("entry." + idsFormulari.rows[final_JSON.letter], 'Columna ' + final_JSON.number);
                  params.append("entry." + idsFormulari.notes, '[Autogenerat per delefme/covid-tracability -- Assignatura seleccionada: ' + final_JSON.class.friendly_name + ']');

                  var formulari_link = formBaseUrl + '?' + params.toString();
                  window.location.href = formulari_link;
                });
             }
             
             document.getElementById("send-button").addEventListener('click', function (el) {              
                document.getElementById('send-button').classList.add('is-loading');

                sendForm();
             });
        </script>
    </body>
</html>