<!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>
        
        <style>
            body {
                background-color: lightgray;
            }
            
            #outter-container {
                margin: 40px 20px;
            }
            
            #inner-container {
                width: 80%;
                background-color: white;
                padding: 50px;
                margin: 0 auto;
            }
            
            .label, .final {
                font-size: 36px;
            }
            
            .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;
            }
            
            .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: 0 auto;
                display: block;
                margin-top: 50px;
                padding: 50px 30px;
                background-color: #26bdff;
                color: white;
            }
        </style>
    </head>
    
    <body>
        <div id="outter-container">
            <div id="inner-container">
                <section id="subject-section">
                    <div class="showhide">
                        <span id="subject-label" class="label">Assignatura (Aula):</span>
                        <span id="subject-final" class="final"></span>
                    </div>
                    <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>
                </section>
                <section id="number-section">
                    <div class="showhide">
                        <span id="number-label" class="label">Número de seient:</span>
                        <span id="number-final" class="final"></span>
                    </div>
                    <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>
                </section>
                <section id="letter-section">
                    <div class="showhide">
                        <span id="letter-label" class="label">Lletra de seient:</span>
                        <span id="letter-final" class="final"></span>
                    </div>
                    <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>
                </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"
            };
            
            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("number-section").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("letter-section").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("send-button").scrollIntoView();
                }
            }
        </script>
    </body>
</html>