<!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;
            }
        </style>
        
        <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 class="message complex-button" id="subject-1">
                    <div class="message-header">Àlgebra lineal</div>
                    <div class="message-body">
                        <div>Aula 001</div>
                        <div>08:00 - 09:00</div>
                    </div>
                </div>
                <div class="message complex-button" id="subject-2">
                    <div class="message-header">Càlcul I</div>
                    <div class="message-body">
                        <div>Aula 002</div>
                        <div>08:00 - 10:00</div>
                    </div>
                </div>
                <div class="message complex-button" id="subject-3">
                    <div class="message-header">Topologia</div>
                    <div class="message-body">
                        <div>Aula S02</div>
                        <div>08:00 - 09:00</div>
                    </div>
                </div>
                <div class="message complex-button" id="subject-4">
                    <div class="message-header">Informàtica</div>
                    <div class="message-body">
                        <div>Aula PC1</div>
                        <div>08:00 - 11:00</div>
                    </div>
                </div>
                <div class="message complex-button" id="subject-5">
                    <div class="message-header">Àlgebra lineal</div>
                    <div class="message-body">
                        <div>Aula 001</div>
                        <div>08:00 - 09:00</div>
                    </div>
                </div>
            </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">A</button>
                <button class="button" id="letter-B">B</button>
                <button class="button" id="letter-C">C</button>
                <button class="button" id="letter-D">D</button>
                <button class="button" id="letter-E">E</button>
                <button class="button" id="letter-F">F</button>
                <button class="button" id="letter-G">G</button>
                <button class="button" id="letter-H">H</button>
                <button class="button" id="letter-I">I</button>
                <button class="button" id="letter-J">J</button>
                <button class="button" id="letter-K">K</button>
                <button class="button" id="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">1</button>
                <button class="button" id="number-2">2</button>
                <button class="button" id="number-3">3</button>
                <button class="button" id="number-4">4</button>
                <button class="button" id="number-5">5</button>
                <button class="button" id="number-6">6</button>
                <button class="button" id="number-7">7</button>
                <button class="button" id="number-8">8</button>
                <button class="button" id="number-9">9</button>
                <button class="button" id="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="number-final">2</span><span id="letter-final">P</span><br><br>

            <button id="send-button" onclick="js: document.getElementById('send-button').classList.add('is-loading');" 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>
            // Check if user is signed in
            var api_url = "https://covid-tracability-backend-dev.sandbox.avm99963.com/api/v1/";
            fetch(api_url + "isSignedIn")
                .then(response => response.json())
                .then(data => {
                    if (!data.payload.signedIn) {
                        console.log("Not signed in!");
                        return fetch(api_url + "getAuthUrl");
                    }
                })
                .then(response => response.json())
                .then(data => {
                    // TODO: redirect here
                    // alert(data.payload.url);
                });
        </script>
        <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);
            }

        </script>
        <script>
            var subjects_texts = {
                "subject-1": "Àlgebra",
                "subject-2": "Càlcul I",
                "subject-3": "Topologia",
                "subject-4": "Informàtica",
                "subject-5": "Informàtica",
                "subject-6": "Informàtica",
            };
            
            function sendForm(data) {
                // Add subject to user
                fetch(api_url + "addUserSubject", {
                  "method": "POST",
                  "body": JSON.stringify({
                            subject: data["subject"]
                          }),
                  "mode": "cors",
                  "credentials": "include"
                })
                .then(res => res.json())
                .then(json => {
                  console.log("Subject added to user: ", json);
                  // TODO: Redirect to Google Forms
                  var formulari_link = "https://docs.google.com/forms/d/e/1FAIpQLSfT9o287VqLyhwR8LPdloAQWhuqCgA3NfdhgP5vb9_sVQHL-g/viewform?entry.1063142948=S03&entry.2115504093=2020-09-14&entry.1749141911=9:00&entry.1827359679=10:00&entry.208184485=Columna+3&entry.1600275159=[Autogenerat+per+delefme/covid-tracability]#i1";
                  window.location.href = formulari_link;
                });
             }
             
             document.getElementById("send-button").addEventListener('click', function (el) {
                // TODO: emplenar això amb informació real
                sendForm({
                    "aula": "001",
                    "subject": 1,
                    "data": "16/01/2020",
                    "hora-inici": "9:00",
                    "hora-final": "10:00",
                    "seient": "7D"
                });
             });
        </script>
        <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;
            });

            function clickButton(element) {
                var parent = element.currentTarget.parent;
                var id = element.currentTarget.id;
                var final_text = (id.split("-")[0] == "subject" ? subjects_texts[id] : id.split("-")[1]);

                if (parent == "subject-container") {
                    // Canvi de background del button
                    $(".current-subject").css("background-color", "white");
                    $("#subject-container .complex-button").removeClass("is-link")
                    $("#" + id).addClass("is-link");
                    // Canvi del text al final
                    $("#subject-final").html(final_text);
                    // Canvi JSON
                    // TODO
                    // 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")
                    $("#" + id).addClass("is-link is-light is-active");
                    // Canvi del text al final
                    $("#number-final").html(final_text);
                    // Canvi JSON
                    // TODO
                    // 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")
                    $("#" + id).addClass("is-link is-light is-active");
                    // Canvi del text al final
                    $("#letter-final").html(final_text);
                    // Canvi JSON
                    // TODO
                    // Anchor següent pregunta
                    switchSection("section-3");
                }
            }
        </script>

    </body>
</html>