{% extends "cloud/base_login.html" %}
{% load i18n %}
{% block main %}
    <div class="zk-login-col">
        <div class="col-md-9 col-md-offset-3">
            {% block logo_box %}
                {{ block.super }}
            {% endblock %}
            <div class="mb-3 card zk-login-card  text-white register-company">
                <div class="card-header border-0 p-0 text-center">
                    <img class="img-responsive" src="{% static 'cloud/static/images/login-curve.svg' %}"
                         alt="login">
                    <div class="curve-text">{% trans "register_your_company" %}</div>
                </div>
                <div class="card-body p-0">
                    <form>
                        <input type="hidden" name="email" value="{{ email }}" id="email">
                        <input type="hidden" name="code" value="{{ code }}" id="code">
                    </form>
                    <div class="">
                        <h4 class="text-center text-dark">{% trans "acnt_activated_successfully" %}<br>
                            {% trans "pls_create_or_join_company" %}
                        </h4>
                        <div class="verfication-successful">
                            <div class="row">
                                <div class="col-md-8 col-md-offset-2">
                                    <a id="link_auth1" href="javascript:void(0)"
                                       class="btn  btn-block blue-btn mb-4 text-white"
                                       onclick="create_company()">{% trans "create_new_company" %}</a>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-8 col-md-offset-2">
                                    <a id="link_auth2" href="javascript:void(0)"
                                       class="btn  btn-block blue-btn mb-4 text-white"
                                       onclick="join_company()">{% trans "join_company" %}</a>
                                </div>
                            </div>
                            {% if not company_name %}
                            <div class="row">
                                <div class="col-md-8 col-md-offset-2">
                                    <a id="link_auth3" href="javascript:void(0)"
                                       class="btn  btn-block blue-btn mb-4 text-white"
                                       onclick="join_as_vendor()">{% trans "join_as_vendor" %}</a>
                                </div>
                            </div>
                            {% endif %}
                            <div class="row">

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 col-md-offset-8 mt-m20">
                    <p class="text-center text-dark"><a href="{% url 'biotime:login' %}"
                                                        class="text-warning text-underline">{% trans "back_to_login" %}</a>
                    </p>
                </div>
            </div>
            <div class="mb-3 card zk-login-card  text-white create-company-div" style="display:none;">
                <div class="card-header border-0 p-0 text-center">
                    <img class="img-responsive" src="{% static 'cloud/static/images/login-curve.svg' %}"
                         alt="login">
                    <div class="curve-text">{% trans "create_new_company" %}</div>
                </div>
                <div class="card-body p-0">
                    <form action="" class="zk-login-form" onsubmit="return false;" id="cloud-1">
                        {% csrf_token %}
                        <div class="input-group input-grp-cmpny">
                                            <span class="input-group-addon"><i class="fa fa-building"
                                                                               aria-hidden="true"></i></span>
                            <input type="text" class="form-control text-center input-lg" id="company_name"
                                   placeholder="Enter company name" required/>
                            <span
                                    class="input-group-addon input-addon-right">.{{ main_domain_name }}</span>
                        </div>
                        <p class="text-center text-capitalize text-danger" id="create-company-msg"></p>
                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <button id="btn-reg" type="submit" onclick="create_company_name()"
                                        class="btn btn-lg btn-block btn-primary zk-btn">{% trans "Continue" %}
                                </button>
                            </div>

                        </div>
                    </form>
                    <div class="col-md-4 col-md-offset-8 mt-m20">
                        <p class="text-center text-dark"><a href="javascript:void(0)"
                                                            class="text-warning text-underline"
                                                            onclick="go_back()">{% trans "cloud_back_page" %}</a>
                        </p>
                    </div>
                </div>

            </div>
            <div class="mb-3 card zk-login-card  text-white join-company-div" style="display:none;">
                <div class="card-header border-0 p-0 text-center">
                    <img class="img-responsive" src="{% static 'cloud/static/images/login-curve.svg' %}"
                         alt="login">
                    <div class="curve-text">{% trans "join_company" %}</div>
                </div>
                <div class="card-body p-0">
                    <form action="" class="zk-login-form" onsubmit="return false;" id="cloud-2">
                        {% csrf_token %}
                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-envelope"
                                                                               aria-hidden="true"></i></span>
                            <input type="text" id="join-company-email" class="form-control text-center input-lg"
                                   name="email" placeholder="Enter Email ID or Employee Id" value=""
                                   readonly/>
                        </div>
                        <div class="input-group input-grp-cmpny">
                                            <span class="input-group-addon"><i class="fa fa-building"
                                                                               aria-hidden="true"></i></span>
                            <input type="text" class="form-control text-center input-lg" id="join-company_name"
                                   placeholder="Enter company name" required/>
                            <span
                                    class="input-group-addon input-addon-right">.{{ main_domain_name }}</span>
                        </div>
                        <p class="text-center text-capitalize text-danger" id="join-company-msg"></p>
                        <div class="row">
                            <div class="col-md-4 col-md-offset-4">
                                <button id="btn-reg" type="submit" onclick="join_company_create()"
                                        class="btn btn-lg btn-block btn-primary zk-btn">{% trans "Continue" %}
                                </button>
                            </div>
                        </div>
                    </form>
                    <div class="col-md-4 col-md-offset-8 mt-m20">
                        <p class="text-center text-dark"><a href="javascript:void(0)"
                                                            class="text-warning text-underline"
                                                            onclick="go_back()">{% trans "cloud_back_page" %}</a>
                        </p>
                    </div>
                </div>

            </div>
            <div class="mb-3 card zk-login-card  text-white display-result-div" style="display:none;">
                <div class="card-header border-0 p-0 text-center">
                    <img class="img-responsive" src="{% static 'cloud/static/images/login-curve.svg' %}"
                         alt="login">
                    <div class="curve-text">{% trans "Verification" %}</div>
                </div>
                <div class="card-body p-0">
                    <form class="zk-login-form">
                        <div class="verfication-box mb-3" style="padding: 5em 3em">
                            <div>
                                <p class="text-center opacity-9" id="">An email request has been sent to admin
                                    successfully.</p>
                            </div>
                        </div>
                    </form>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-8 mt-m20">
                            <p class="text-center text-dark"><a href="{% url 'biotime:login' %}"
                                                                class="text-warning text-underline">{% trans "back_to_login" %}</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mb-3 card zk-login-card text-white join-as-vendor-div" style="display:none;">
                <div class="card-header border-0 p-0 text-center">
                    <img class="img-responsive" src="{% static 'cloud/static/images/login-curve.svg' %}"
                         alt="login">
                    <div class="curve-text">{% trans "join_as_vendor" %}</div>
                </div>
                <div class="card-body p-0">
                    <form action="" class="zk-login-form" onsubmit="return false;" id="cloud-3">
                        {% csrf_token %}
                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-envelope"
                                                                               aria-hidden="true"></i></span>
                            <input type="text" id="join-vendor-email" class="form-control text-center input-lg"
                                   name="email" placeholder="Enter Email ID or Employee Id" value=""
                                   readonly/>
                        </div>
                        <div class="input-group input-grp-cmpny">
                                            <span class="input-group-addon"><i class="fa fa-building"
                                                                               aria-hidden="true"></i></span>
                            <input type="text" class="form-control text-center input-lg" id="join-vendor-company-name"
                                   placeholder="Enter company name" required/>
                            <span
                                    class="input-group-addon input-addon-right">.{{ main_domain_name }}</span>
                        </div>
                        <div class="input-group">
                                       <span class="input-group-addon">
                                       <i class="fa fa-building" aria-hidden="true"></i>
                                       </span>
                            <input type="text" class="form-control text-center input-lg" id="vendor_name"
                                   name="vendor_name" value=""
                                   placeholder="Enter vendor company name" required/>
                        </div>
                        <div class="input-group">
                                       <span class="input-group-addon">
                                       <i class="fa fa-phone" aria-hidden="true"></i>
                                       </span>
                            <input type="text" class="form-control text-center input-lg" name="vendor_phone"
                                   id="vendor_phone"
                                   value=""
                                   placeholder="Enter vendor company phone" required/>
                        </div>
                        <div class="input-group">
                                       <span class="input-group-addon">
                                       <i class="fa fa-id-badge" aria-hidden="true"></i>
                                       </span>
                            <input type="text" class="form-control text-center input-lg"
                                   placeholder="Enter vendor company registration id" name="vendor_cnr" id="vendor_cnr"
                                   value="" required/>
                        </div>
                        <p class="text-center text-capitalize text-danger" id="join-vendor-msg"></p>
                        <div class="row">
                            <div class="row">
                                <div class="col-md-4 col-md-offset-4">
                                    <button id="btn-reg" type="submit" onclick="join_as_vendor_create()"
                                            class="btn btn-lg btn-block btn-primary zk-btn">{% trans "Continue" %}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="col-md-4 col-md-offset-8 mt-m20">
                        <p class="text-center text-dark"><a href="javascript:void(0)"
                                                            class="text-warning text-underline"
                                                            onclick="go_back()">{% trans "cloud_back_page" %}</a>
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>
{% endblock main %}
{% block page_script %}
    <script>
        $(window).ready(function () {
            $("#cloud-1, #cloud-2, #cloud-3").on("keypress", function (event) {
                var keyPressed = event.keyCode || event.which;
                if (keyPressed === 13) {
                    event.preventDefault();
                    return false;
                }
            });
        });
        var email = $('#email').val();
        var code = $('#code').val();

        function create_company() {
            $('.register-company').css('display', 'none');
            $('.create-company-div').css('display', 'block');
        }

        function join_company() {
            $('.register-company').css('display', 'none');
            $('.join-company-div').css('display', 'block');
            $('#join-company-email').val(email);
        }

        function join_as_vendor() {
            $('.register-company').css('display', 'none');
            $('.join-as-vendor-div').css('display', 'block');
            $('#join-vendor-email').val(email);
        }

        function user_login() {
            window.location.href = "{% url 'biotime:login' %}";
        }

        function go_back() {
            $('#company_name').val('');
            $('#join-company_name').val('');
            $('#join-company-email').val('');
            $('#join-vendor-email').val('');
            $('#join-vendor-company-name').val('');
            $('#vendor_name').val('');
            $('#vendor_phone').val('');
            $('#vendor_cnr').val('');
            $('#join-company-msg').text('');
            $('#create-company-msg').text('');
            $('#join-vendor-msg').text('');
            $('.create-company-div').css('display', 'none');
            $('.join-company-div').css('display', 'none');
            $('.join-as-vendor-div').css('display', 'none');
            $('.register-company').css('display', 'block');
        }

        function create_company_name() {
            var email = $('#email').val();
            var company_name_input = $('#company_name');
            var data = {
                'company_name': company_name_input.val(),
                'email': email,
                'code': $('#code').val(),
                csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken]").val()
            };
            if (company_name_input.val() !== '') {
                $.ajax({
                    url: "{% url 'biotime:create_new_company' %}",
                    type: "POST",
                    data: data,
                    dataType: "json",
                    success: function (result) {
                        var ret = result.ret;
                        if (ret === 0 || ret === 3) {
                            window.location.href = "{% url 'biotime:login' %}";
                        } else {
                            company_name_input.val('');
                            company_name_input.blur();
                            $('#create-company-msg').text(result.msg);
                        }
                    },
                })
            }
        }

        function join_company_create() {
            var email = $('#email').val();
            var code = $('#code').val();
            var compan_name_input = $('#join-company_name');
            var company_name = compan_name_input.val();
            var data = {
                'email': email,
                'code': code,
                'company_name': company_name,
                csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken]").val()
            };
            if (company_name !== '') {
                $.ajax({
                    url: "{% url 'biotime:join_existing_company' %}",
                    type: "POST",
                    data: data,
                    dataType: "json",
                    success: function (callback) {
                        var result = callback.ret;
                        if (result !== 0) {
                            compan_name_input.val('');
                            compan_name_input.blur();
                            $('#join-company-msg').text(callback.msg);
                        } else {
                            $('.join-company-div').css('display', 'none');
                            $('.display-result-div').css('display', 'block');
                        }
                    },
                })
            }
        }

        function join_as_vendor_create() {
            var email = $('#email').val();
            var compan_name_input = $('#join-vendor-company-name');
            var company_name = compan_name_input.val();
            var vendor_name = $('#vendor_name').val();
            var vendor_phone = $('#vendor_phone').val();
            var vendor_cnr = $('#vendor_cnr').val();
            var code = $('#code').val();
            var data = {
                'email': email,
                'code': code,
                'company_name': company_name,
                'vendor_name': vendor_name,
                'vendor_phone': vendor_phone,
                'vendor_cnr': vendor_cnr,
                csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken]").val()
            };
            if (email !== '' && compan_name_input.val() !== '' && company_name !== '' && vendor_name !== '' && vendor_phone !== '' && vendor_cnr !== '') {
                $.ajax({
                    url: "{% url 'biotime:join_as_vendor' %}",
                    type: "POST",
                    data: data,
                    dataType: "json",
                    success: function (callback) {
                        var result = callback.ret;
                        if (result !== 0) {
                            compan_name_input.val('');
                            compan_name_input.blur();
                            $('#join-vendor-msg').text(callback.msg);
                        } else {
                            $('.join-as-vendor-div').css('display', 'none');
                            $('.display-result-div').css('display', 'block');
                        }
                    },
                })
            }
        }
    </script>
{% endblock page_script %}