<!DOCTYPE html>
<html lang="ca">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Load Jquery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        
        <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>
        
        <style>
            body {
                background-color: lightgray;
            }
            
            #outter-container {
                margin: 40px 20px;
            }
            
            #inner-container {
                width: 80%;
                background-color: white;
                padding: 20px 50px;
                margin: 0 auto;
            }
            
            .label, .final {
                font-size: 36px;
            }
            
            .label {
                padding-top: 50px;
            }
            
            .final {
                color: gray;
            }
            
            section {
                padding: 10px 0;
            }
            
            .container {
                /* flexbox setup */
                display: -webkit-flex;
                -webkit-flex-direction: row;

                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                
                justify-content: center;
                align-items : center;
                
                height: 75vh;
                overflow-y: auto;
                margin: 50px 0;
            }
            
            .button {
                border: solid 2px #26bdff;
                color: black;
                font-size: 5vw;
                                            
                flex: 1 0 20%;
                margin: 20px;
                padding: 40px 20px;
                
                vertical-align: middle;
                text-align: center;
            }
            
            .selected {
                background-color: #c3ddff;
            }
            
            #subject-container .button {
                text-align: left;
                flex: 1 0 20%;
                height: auto;
            }
            
            .current-subject .title {
                font-size: 18px;
            }
            .current-subject .subtitle {
                font-size: 14px;
            }
            
            #send-button {
                font-size: 48px;
                width: 80%;
                margin: 50px auto;
                display: block;
                padding: 50px 30px;
                background-color: #26bdff;
                color: white;
            }
        </style>
    </head>
    
    <body>
        <div id="outter-container">
            <div id="inner-container">
                <section id="subject-section">
                    <div id="subject-container" class="container">
                        <div class="current-subject button" id="subject-1" onclick="js:clickButton(this.parentNode.id, this.id)">
                            <div class="title">Àlgebra Lineal</div>
                            <div class="subtitle">Aula 001</div>
                            <div class="subtitle">9.00 - 10.00</div>
                        </div>
                        <div class="current-subject button" id="subject-2">
                            <div class="title">Àlgebra Lineal</div>
                            <div class="subtitle">Aula 001</div>
                            <div class="subtitle">9.00 - 10.00</div>
                        </div>
                        <div class="current-subject button" id="subject-3">
                            <div class="title">Àlgebra Lineal</div>
                            <div class="subtitle">Aula 001</div>
                            <div class="subtitle">9.00 - 10.00</div>
                        </div>
                        <div class="current-subject button" id="subject-4">
                            <div class="title">Àlgebra Lineal</div>
                            <div class="subtitle">Aula 001</div>
                            <div class="subtitle">9.00 - 10.00</div>
                        </div>
                    </div>
                    <div class="showhide">
                        <span id="subject-label" class="label">Assignatura (Aula):</span>
                        <span id="subject-final" class="final"></span>
                    </div>
                </section>
                <section id="number-section">
                    <div id="number-container" class="container">
                        <div class="number button" id="number-1">1</div>
                        <div class="number button" id="number-2">2</div>
                        <div class="number button" id="number-3">3</div>
                        <div class="number button" id="number-4">4</div>
                        <div class="number button" id="number-5">5</div>
                        <div class="number button" id="number-6">6</div>
                        <div class="number button" id="number-7">7</div>
                        <div class="number button" id="number-8">8</div>
                        <div class="number button" id="number-9">9</div>
                        <div class="number button" id="number-10">10</div>
                    </div>
                    <div class="showhide">
                        <span id="number-label" class="label">Número de seient:</span>
                        <span id="number-final" class="final"></span>
                    </div>
                </section>
                <section id="letter-section">
                    <div id="letter-container" class="container">
                        <div class="letter button" id="letter-A">A</div>
                        <div class="letter button" id="letter-B">B</div>
                        <div class="letter button" id="letter-C">C</div>
                        <div class="letter button" id="letter-D">D</div>
                        <div class="letter button" id="letter-E">E</div>
                        <div class="letter button" id="letter-F">F</div>
                        <div class="letter button" id="letter-G">G</div>
                        <div class="letter button" id="letter-H">H</div>
                        <div class="letter button" id="letter-I">I</div>
                        <div class="letter button" id="letter-J">J</div>
                        <div class="letter button" id="letter-K">K</div>
                        <div class="letter button" id="letter-L">L</div>
                    </div>
                    <div class="showhide">
                        <span id="letter-label" class="label">Lletra de seient:</span>
                        <span id="letter-final" class="final"></span>
                    </div>
                </section>
                <section id="date-section">
                    <div class="showhide">
                        <span id="date-label" class="label">Data:</span>
                        <span id="date-final" class="final">16/01/2020</span>
                    </div>
                </section>
                <section id="hour-section">
                    <div class="showhide">
                        <span id="hour-label" class="label">Hora:</span>
                        <span id="hour-final" class="final">09.00 - 10.00</span>
                    </div>
                </section>
                <button id="send-button">
                    <span>Anar al formulari</span>
                </button>
            </div>
        </div>
        
        <script>
            var subjects_texts = {
                "subject-1": "Àlgebra",
                "subject-2": "Càlcul I",
                "subject-3": "Topologia",
                "subject-4": "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]";
                  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;
                console.log(element.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]);
                
                console.log(parent);
                console.log(id);
                
                if (parent == "subject-container") {
                    // Canvi de background del button
                    $(".current-subject").css("background-color", "white");
                    $("#" + id).css("background-color", "#c3ddff");
                    // Canvi del text al final
                    $("#" + parent).parent().find(".final").html(final_text);
                    // Canvi JSON
                    // TODO
                    // Anchor següent pregunta
                    document.getElementById("subject-label").scrollIntoView();
                } else if (parent == "number-container") {
                    // Canvi de background del button
                    $(".number").css("background-color", "white");
                    $("#" + id).css("background-color", "#c3ddff");
                    // Canvi del text al final
                    $("#" + parent).parent().find(".final").html(final_text);
                    // Canvi JSON
                    // TODO
                    // Anchor següent pregunta
                    document.getElementById("number-label").scrollIntoView();
                } else if (parent == "letter-container") {
                    // Canvi de background del button
                    $(".letter").css("background-color", "white");
                    $("#" + id).css("background-color", "#c3ddff");
                    // Canvi del text al final
                    $("#" + parent).parent().find(".final").html(final_text);
                    // Canvi JSON
                    // TODO
                    // Anchor següent pregunta
                    document.getElementById("letter-label").scrollIntoView();
                }
            }
        </script>
    </body>
</html>