{% extends "base.html" %}
{% block content %}
<form id="multiStepForm" method="post">
    <!-- Step 0 -->
    <div class="step active">
        <div class="pad-inline my-3">
            <p>0 of 5 completed</p>
            <div class="progress">
                <div class="progress-bar bg-akuvox" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="steps-container pad-inline">
            <div class="form-group">
                <label for="privacyPolicyTextArea">Disclaimer <span id="invalidDisclaimer">*</span></label>
                <textarea class="form-control no-resize" id="disclaimerTextArea" readonly rows="8">
Before creating your account, please read this important information:

This account can only be used with devices purchased from Visiotech or one of its resellers.
If you purchased your devices from another reseller, this account will not work.

Please continue only if your devices were purchased from Visiotech.
                </textarea>
            </div>
            <div class="form-check mb-3">
                <input type="checkbox" class="form-check-input" id="disclaimer">
                <label class="form-check-label" for="disclaimer">I understand</label>
            </div>
        </div>
        <div class="row pad-inline">
            <div class="col-md-6 mb-3">
            </div>
            <div class="col-md-6 mb-3">
                <button type="button" class="btn btn-primary btn-block" id="next0">Next</button>
            </div>
        </div>
    </div>

    <!-- Step 1 -->
    <div class="step">
        <div class="pad-inline my-3">
            <p>1 of 5 completed</p>
            <div class="progress">
                <div class="progress-bar bg-akuvox" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="steps-container pad-inline">
            <div class="form-group">
                <label for="companyName">Company name <span id="invalidCompanyName">*</span></label>
                <input type="text" class="form-control" id="companyName" name="companyName" placeholder="Enter the official name of your company.">
            </div>
            <div class="form-group">
                <label for="email">Email <span id="invalidEmail">*</span></label>
                <input type="email" class="form-control" id="email" name="companyEmail" placeholder="Provide a valid email address for account verification.">
            </div>
            <div class="form-group">
                <label for="dealer">Dealer <span id="invalidDealer">*</span></label>
                <input type="text" class="form-control" id="dealer" name="companyDealer" placeholder="Enter the name of your associated dealer or distributor.">
            </div>
            <p>*Required fields</p>
        </div>
        <div class="row pad-inline">
            <div class="col-md-6 mb-3">
                <button type="button" class="btn btn-light btn-block" id="prev1">Previous</button>
            </div>
            <div class="col-md-6 mb-3">
                <button type="button" class="btn btn-primary btn-block" id="next1">Next</button>
            </div>
        </div>
    </div>

    <!-- Step 2 -->
    <div class="step">
        <div class="pad-inline my-3">
            <p>2 of 5 completed</p>
            <div class="progress">
                <div class="progress-bar bg-akuvox" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="steps-container pad-inline">
            <div class="form-group">
                <label for="privacyPolicyTextArea">Privacy Policy <span id="invalidPrivacyPolicy">*</span></label>
                <textarea class="form-control no-resize" id="privacyPolicyTextArea" readonly rows="8"></textarea>
            </div>
            <div class="form-check mb-3">
                <input type="checkbox" class="form-check-input" id="privacyPolicy">
                <label class="form-check-label" for="privacyPolicy">I accept the Privacy Policy</label>
            </div>
        </div>
        <div class="row pad-inline">
            <div class="col-md-6 mb-3">
                <button type="button" class="btn btn-light btn-block" id="prev2">Previous</button>
            </div>
            <div class="col-md-6 mb-3">
                <button type="button" class="btn btn-primary btn-block" id="next2">Next</button>
            </div>
        </div>
    </div>

    <!-- Step 3 -->
    <div class="step">
        <div class="pad-inline my-3">
            <p>3 of 5 completed</p>
            <div class="progress">
                <div class="progress-bar bg-akuvox" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="steps-container pad-inline">
            <div class="h-25">
                <label for="captcha-text">Captcha <span id="invalidCaptcha">*</span></label>
            </div>
            <div class="h-50">
                <img class="simple-captcha-img" src="data:image/jpeg;base64, {{ captcha.img }}">
            </div>
            <div class="h-25">
                <input type="text" class="form-control simple-captcha-text" id="captcha-text" name="captcha-text" placeholder="Enter the text you see on the image">
                <input type="hidden" name="captcha-hash" value="{{ captcha.hash }}">    
            </div>
        </div>
        <div class="row pad-inline">
            <div class="col-md-6 mb-3">
                <button type="button" class="btn btn-light btn-block" id="prev3">Previous</button>
            </div>
            <div class="col-md-6 mb-3">
                <button type="button" class="btn btn-primary btn-block" id="next3">Next</button>
            </div>
        </div>
    </div>

    <!-- Step 4 -->
    <div class="step">
        <div class="pad-inline my-3">
            <p>4 of 5 completed</p>
            <div class="progress">
                <div class="progress-bar bg-akuvox" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>
        <div class="steps-container pad-inline">
            <div class="form-group">
                <label for="summaryTextArea">Please, check that all the data is correct:</label>
                <textarea class="form-control no-resize" id="summaryTextArea" readonly rows="8">
                </textarea>
            </div>
        </div>
        <div class="row pad-inline">
            <div class="col-md-6 mb-3">
                <button type="button" class="btn btn-light btn-block" id="prev4">Previous</button>
            </div>
            <div class="col-md-6 mb-3">
                <button type="submit" id="submitButton" onclick="sendForm()" class="btn btn-success btn-block">Sign Up <span id="spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span></button>
            </div>
        </div>
    </div>
</form>
{% endblock %}