{% extends 'bom/bom-base.html' %}

{% load materializecss %}
{% load staticfiles %}

{% block head-title %}Create Your Organization{% endblock %}

{% block main %}
    <link rel="stylesheet" type="text/css" href="{% static 'bom/css/style.css' %}"/>
{% endblock %}

{% block content %}
    <div class="container">
        <h1 class="light header center">Welcome to IndaBOM!</h1>
        <h3 class="center">Let's create your organization.</h3>

        <p class="center"><a class="modal-trigger" href="#modal1">Join an existing organization.</a></p>
        <div id="modal1" class="modal">
            <div class="modal-content">
                <h4>Join an existing organization</h4>
                <p>To join a an existing organization, you must provide the e-mail address you signed up with to your IndaBOM organization owner. <br><br>Your e-mail address is {{ user.email }}, click
                    <a href="mailto:?subject=Add me to your IndaBOM Organization&body=Hi,%0D%0A%0D%0APlease add me to your IndaBOM organization. To do so, log in, go to Settings > Organization and add me via my e-mail address {{ user.email }}">here</a>
                    to send an email.</p>
            </div>
            <div class="modal-footer">
                <a href="#!" class="modal-close waves-effect waves-green btn-flat">Ok</a>
            </div>
        </div>

        <div style="padding-top: 24px">
            <form name="seller" action="{% url 'bom:organization-create' %}" method="post" class="col s12">
                <div class="row">
                    {% csrf_token %}
                    <div class="col s12" style="padding: 16px;">
                        <h4>1) Type a name for your organization.</h4>
                        <p>You can always change this later.</p>
                        {{ form.name|materializecss }}
                    </div>
                    <div class="col s12" style="padding: 16px;">
                        <h4>2) What type of numbering scheme do you want your organization to use?</h4>
                        <p><i>We recommend using "Semi-intelligent" numbering systems</i> to take advantage of all of the IndaBOM features.</p>
                        <ul class="browser-default">
                            <li><b>Semi-intelligent</b> IndaBOM part numbers are designed to be simple to assign and simple to subsequently write, type, or speak. They consist of 3 parts, a 3-digit part
                                class, a N-digit part number, and a 2-digit variation. You define the part classes in your organization, and how long your N-digit part number is below.</li>
                            <li><b>Intelligent</b> part numbering on IndaBOM allows the user to assign any part number to a part. The part number contains descriptive details embedded within that provides
                                noteworthy information about the part. For example, a capacitor may be named C0402X5R33PF to indicate that it is a capacitor of size "0402", using a X5R dialectric, and is 33pF.</li>
                        </ul>
                        <p>You can read more about the options <a href="{% url 'bom:help' %}#part-numbering" target="_blank">here</a>. Some times the "intelligent" way isn't the best way 😉.</p>
                        <p><b>Important!</b> Once you've created parts, you cannot change your organization type.</p>
                        {{ form.number_scheme|materializecss }}
                    </div>
                    <div id="item-number-length" class="col s12" style="padding: 16px;">
                        <h4>3) How long do you want your item numbers to be?</h4>
                        <p>Your part numbers will have a part class (C), item number (N) and a variation (V) in the format CCC-NNNN-VV. You can always <i>increase</i> this number, but you can't decrease it. We recommend starting with 4 digits.</p>
                        {{ form.number_item_len|materializecss }}
                    </div>
                </div>
                <div class="row">
                    <div class="col s12 center-align">
                        <button class="waves-effect waves-light btn green lighten-1" type="submit" name="action">Let's Go!</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script>
        $(document).ready(function () {
            $('.modal').modal();
        });
    </script>
    <script type='text/javascript'>
        $(function () {
            $('select[name="number_scheme"]').change(function () {
                var numberScheme = $('select[name="number_scheme"]').val();
                if (numberScheme === 'S') {
                    $('#item-number-length').show();
                } else {
                    $('#item-number-length').hide();
                }
            });
        });
    </script>
{% endblock %}