<div class="u-mb-base">

</div>

<form id="-signup-social-form" class="fw__wrapper" onsubmit="window.ga && ga( 'send', 'event', 'Community');" method="post" novalidate>
    <fieldset data-toggle="-signup-social-fw__step" class="fw__inputs o-divider -signup-social-fw__step u-pl-none u-pr-none u-mb-medium">
        <div class="u-mb-large">
            <h2 class="u-heading-03 u-text-center">Scegli la tua zona preferita</h2>
            <p class="u-text-center">Scegli la tua zona di interesse preferita</p>
        </div>
        <div class="u-mb-base">
            <label class="c-form-switch u-relative">
                <input type="checkbox">
                <span class="c-form-switcher u-absolute u-top u-left u-right u-bottom u-cursor-pointer"></span>
                <span class="c-form-label">Utilizza la posizione attuale del dispositivo</span>
            </label>
        </div>
        <div class="u-flex u-column u-row@md">
            <div class="u-mb-base u-size-full u-size-3-4 u-mr-xsmall ">
                <div class="">

                    <label class="u-label-04 u-color-base" for="">Indirizzo</label>

                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                </div>

                <!-- TODO: REVIEW ICON POSITION -->

            </div>
            <div class="u-mb-base u-size-full u-size-1-4 ">
                <div class="">

                    <label class="u-label-04 u-color-base" for="">Civico</label>

                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                </div>

                <!-- TODO: REVIEW ICON POSITION -->

            </div>
        </div>
        <div class="u-flex u-column u-row@md">
            <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">

                <label class="u-label-04 u-color-base u-inline-block" for="">Provincia</label>

                <select class=" u-block u-size-full" name="select-name" id="select-id">

                    <option>option 1</option>

                    <option>option 2</option>

                    <option>option 3</option>

                    <option>option 4</option>

                </select>

            </div>
            <div class="u-mb-base u-size-full u-size-1-2 ">

                <label class="u-label-04 u-color-base u-inline-block" for="">Città</label>

                <select class=" u-block u-size-full" name="select-name" id="select-id">

                    <option>option 1</option>

                    <option>option 2</option>

                    <option>option 3</option>

                    <option>option 4</option>

                </select>

            </div>
        </div>
        <div class="u-mb-base ">
            <label class="c-form-switch u-relative">
                <input type="checkbox">
                <span class="c-form-switcher u-absolute u-top u-left u-right u-bottom u-cursor-pointer"></span>
                <span class="c-form-label">Desidero ricevere nutifiche della zona selezionata</span>
            </label>
        </div>
        <div class="fw__inputs o-divider__error">
            <p class="fw__inputs o-divider__error--message"></p>
        </div>

        <div class="u-flex u-items-center">

            <div class="u-size-full u-size-1-2 ">
                <input class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="← Indietro" onclick="back()" />
            </div>

            <div class="u-size-full u-size-1-2 u-text-right">
                <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="submit" value="" />
            </div>

        </div>

    </fieldset>
    <fieldset data-toggle="-signup-social-fw__step" class="fw__inputs o-divider -signup-social-fw__step u-pl-none u-pr-none u-mb-medium">
        <div class="u-mb-large">
            <h2 class="u-heading-03 u-text-center">Completa il tuo profilo personale</h2>
        </div>
        <div class="u-mb-large  u-text-center">

            <div class="c-form-avatar u-relative u-m-auto">
                <svg class="u-absolute u-overflow-hidden" style="width: 0; height: 0;">
                    <defs>
                        <clipPath id="mask" clipPathUnits="objectBoundingBox">
                            <path d="M0.5,1 C0.856900994,1 1,0.856900994 1,0.5 C1,0.143099006 0.856900994,0 0.5,0 C0.143099006,0 0,0.143099006 0,0.5 C0,0.856900994 0.143099006,1 0.5,1 Z" />
                        </clipPath>
                    </defs>
                </svg>
                <input class="u-none" type="file" name="image" accept="image/*" />
                <div class="c-form-avatar__mask u-size-full"></div>
                <div class="c-form-avatar__uploader u-absolute u-cursor-pointer u-p-xsmall u-radius-circle u-border-none" aria-labelledby="image" aria-describedby="image">
                    <svg class="o-icon o-icon--md o-link-text">
                        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-upload-cloud"></use>
                    </svg>
                </div>
            </div>

            <script>
                const UPLOAD_BUTTON = document.querySelector(".c-form-avatar__uploader");
                const FILE_INPUT = document.querySelector("input[type=file]");
                const AVATAR = document.querySelector(".c-form-avatar__mask");
                UPLOAD_BUTTON.addEventListener("click", () => FILE_INPUT.click());
                FILE_INPUT.addEventListener("change", event => {
                    const file = event.target.files[0];
                    const reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onloadend = () => {
                        AVATAR.setAttribute("aria-label", file.name);
                        AVATAR.style.background = `url(${reader.result}) center center/cover`;
                    };
                });
            </script>

        </div>
        <div class="u-mb-base ">
            <div class="">

                <label class="u-label-04 u-color-base" for="">Email</label>

                <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

            </div>

            <!-- TODO: REVIEW ICON POSITION -->

        </div>
        <div class="u-mb-base ">
            <div class="">

                <label class="u-label-04 u-color-base" for="">Cellulare</label>

                <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

            </div>

            <!-- TODO: REVIEW ICON POSITION -->

        </div>
        <div class="u-flex u-column u-row@md">
            <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
                <div class="">

                    <label class="u-label-04 u-color-base" for="">Nome</label>

                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                </div>

                <!-- TODO: REVIEW ICON POSITION -->

            </div>
            <div class="u-mb-base u-size-full u-size-1-2 ">
                <div class="">

                    <label class="u-label-04 u-color-base" for="">Cognome</label>

                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                </div>

                <!-- TODO: REVIEW ICON POSITION -->

            </div>
        </div>
        <div class="u-mb-base ">
            <div class="">

                <label class="u-label-04 u-color-base" for="">Data di nascita</label>

                <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

            </div>

            <!-- TODO: REVIEW ICON POSITION -->

        </div>
        <div class="u-mb-base ">

            <label class="u-label-04 u-color-base u-inline-block" for="">Sesso</label>

            <select class=" u-block u-size-full" name="select-name" id="select-id">

                <option>option 1</option>

                <option>option 2</option>

                <option>option 3</option>

                <option>option 4</option>

            </select>

        </div>
        <div class="u-flex u-column u-row@md">
            <div class="u-mb-base u-size-full u-size-1-2 u-mr-xsmall ">
                <div class="">

                    <label class="u-label-04 u-color-base" for="">Impiego</label>

                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                </div>

                <!-- TODO: REVIEW ICON POSITION -->

            </div>
            <div class="u-mb-base u-size-full u-size-1-2 ">
                <div class="">

                    <label class="u-label-04 u-color-base" for="">Settore</label>

                    <input class=" u-block u-size-full" type="text" placeholder="Placeholder tex">

                </div>

                <!-- TODO: REVIEW ICON POSITION -->

            </div>
        </div>
        <div class="u-mb-base ">

            <label class="c-form-label" for="">Biografia</label>

            <textarea class="c-form-input" placeholder="label" placeholder="Biografia"></textarea>

        </div>
        <div class="fw__inputs o-divider__error">
            <p class="fw__inputs o-divider__error--message"></p>
        </div>

        <div class="u-flex u-items-center">

            <div class="u-size-full u-size-1-2 ">
                <input class="c-btn c-btn--default u-label-03 u-cursor-pointer c-btn--large u-text-center" type="button" value="← Indietro" onclick="back()" />
            </div>

            <div class="u-size-full u-size-1-2 u-text-right">
                <input class="fw__button c-btn c-btn--primary u-label-03 u-cursor-pointer c-btn--large u-text-center" type="submit" value="" />
            </div>

        </div>

    </fieldset>
    <section data-toggle="-signup-social-fw__step" class="fw__result -signup-social-fw__step">
        <div class="u-mb-large">
            <h2 class="u-heading-03 u-text-center">Grazie per la tua iscrizione</h2>
            <p class="u-mb-large u-text-center">Ti ringraziamo per la tua iscrizione...</p>
            <div class="u-mb-base">
                <a href="#" class="c-btn c-btn--primary u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Leggi
                    le ultime notizie</a>
            </div>
            <div class="u-mb-base">
                <a href="#" class="c-btn c-btn--primary u-label-04 u-cursor-pointer c-btn--large u-text-center u-block u-no-underline">Scrivi
                    un contenuto</a>
            </div>
        </div>
        <div id="results" class="u-mb-large u-mt-large"></div>
    </section>
</form>

<script>
    window.onload = function() {
        var stepIndex = 0;
    }
    // var modeToggle = document.getElementsByClassName("input:radio[name=c-tabs__choice]:checked");
    // const stepElements = document.querySelector('[data-toggle-step]');
    var stepElements = document.getElementsByClassName("mode-signup-social-fw__step");
    var form = document.getElementById("mode-signup-social-form");
    var breadcrumbsItems = document.getElementsByClassName("c-stepper__element");
    // Initialise the form
    function init() {
        // Reset the step
        stepIndex = 0;
        // Clear all fields
        form.reset();
        toggleBreadcrumbsStep();
        showCurrentStep();
        breadcrumbsItems.classList.add("c-stepper__element--active");
    }
    // Indicate the current step with breadcrumbs
    function toggleBreadcrumbsStep() {
        Array.from(breadcrumbsItems).forEach(function(el, index) {
            if (index <= stepIndex) {
                el.classList.add("c-stepper__element--active");
            } else {
                el.classList.remove("c-stepper__element--active");
            }
        });
    }
    // Show the current step and hide the rest
    function showCurrentStep() {
        Array.from(stepElements).forEach(function(el, index) {
            if (index !== stepIndex) {
                el.classList.add("u-none");
            } else {
                el.classList.remove("u-none");
            }
        });
    }
    // Next step action, all fields in current step must be validated before proceed to next step.
    function next() {
        const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
        // Increment step
        stepIndex++;
        toggleBreadcrumbsStep();
        showCurrentStep();
    }
    // Back button action to navigate 1 step back
    function back() {
        // Clear all fields in current step
        const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
        Array.from(fields).forEach(function(field) {
            const tagName = field.tagName;
            if (tagName.localeCompare("INPUT") === 0) {
                field.value = '';
            } else if (tagName.localeCompare("SELECT") === 0) {
                field.selectedIndex = 0;
            }
        });
        // Decrement step
        stepIndex--;
        toggleBreadcrumbsStep();
        showCurrentStep();
    }
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        const fields = stepElements[stepIndex].querySelectorAll("input:not([type=button]):not([type=submit]), select");
        // all fields in current step must be validated before submission.
        // Prepare the result in next view
        showResult();
        // Navigate to result
        stepIndex++;
        // toggleBreadcrumbsStep();
        showCurrentStep();
    }, false);

    function showResult() {
        const resultsContainer = document.getElementById("results");
        // Make sure the result page is empty
        resultsContainer.innerHTML = "";
        const fields = form.querySelectorAll("input:not([type=button]):not([type=submit]), select");
        // List out all data
        fields.forEach(field => {
            const fieldLabel = field.getAttribute("data-label");
            const fieldValue = field.value;
            const resultItem = document.createElement("li");
            resultItem.setAttribute("class", "fw__result__item");
            resultItem.innerHTML = '<span class="fw__result__label">' + fieldLabel + ':</span> <strong class="fw__result__value">' + fieldValue + '</strong>';
            resultsContainer.append(resultItem);
        });
    }
    init();
</script>