{% extends 'base.html' %}
{% load staticfiles %}
{% block stylesheets %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'css/DateTimePicker.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/select2.css' %}"/>
{% endblock stylesheets %}
{% block button_bar %}
    <a href="#help" class="button"><span class="on-left icon-help"></span>Help</a>
{% endblock button_bar %}
{% block content %}
    <form method="post" onsubmit="submit()" id="batch_create_form">
        <table class="table">
            <thead>
            <tr>
                <th colspan="2">
                    <h5>
                        {{ form_header }}
                    </h5>
                </th>
            </tr>
            </thead>
            <tbody>

            <input type="hidden" id="bag_list" name="bag_list_data"/>

            {% for field in form %}
                {% if field.errors %}
                    <tr>
                        <td colspan="2">
                            <ul style="margin-bottom: 0; margin-top: 0;">
                                {% for err in field.errors %}
                                    <li><span class="icon-warning on-left fg-red"></span>{{ err }}</li>
                                {% endfor %}
                            </ul>
                        </td>
                    </tr>
                {% endif %}

                <tr>
                    <td>
                        {{ field.label_tag }}
                    </td>
                    <td>
                        {{ field }}
                    </td>
                </tr>

            {% endfor %}

            </tbody>

            <tfoot>
            <tr>
                <td colspan="2" align="right">
                    <a class="button" href="{{ form_back_url }}">Cancel</a>
                </td>
            </tr>
            </tfoot>
        </table>


        <div class="panel">
            <div class="panel-header">
                Preview and Continue
            </div>
            <div class="panel-content">

                <a id="update_preview_button" class="button"
                   title="Update the bag name preview list with the information from the above form.">
                    <span class="on-left icon-cycle"></span>Update
                </a>
                <button class="button primary" type="submit" title="Go ahead and create the listed bags">
                    <span class="on-left icon-checkmark"></span>Accept
                </button>

                <select id="preview_listbox" size="10" style="width: 80%; margin-top: 10px;">
                </select>

            </div>
        </div>

        {% csrf_token %}

    </form>

    <a id="help"></a>
    <div class="panel" style="margin-top: 10px;">
        <div class="panel-header">
            Help
        </div>
        <div class="panel-content">
            <h5>Overview</h5>
            The bag batch generation feature creates the names for new bags by using a pattern provided by you, where
            certain letters get replaced by the various components specified above. The usable pattern or template keys
            are:<br/>
            <ul>
                <li>A -- first optional fixed part</li>
                <li>B -- second optional fixed part</li>
                <li>V -- a variable part, see below</li>
            </ul>
            The manufacturing date and the material to use must both be specified in any case.<br/>
            The variable part specifies a range, either numerical or alphabetical.
            The pattern keys may be repeated and may appear in any order. Invalid pattern keys are ignored.
            You may preview the expected results by hitting the update button. If you're happy with the results, hit
            accept to
            actually create the bags. Bags where the name already exists are skipped during the actual generation. The
            amount
            of generated bag names is limited to 200.
            <h5>Examples</h5>

            <ol>
                <li>
                    <ul>
                        <li>(using letter range)</li>
                        <li>fixed parts: Bag_, XY</li>
                        <li>var. start: AA, var end: ZZ</li>
                        <li>pattern: AVB</li>
                        <li>results in: Bag_AAXY, Bag_ABXY, ..., Bag_AZXY, Bag_BAXY, ...</li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li>(using numeric range)</li>
                        <li>fixed part (just A in this case): Bag</li>
                        <li>var. start: 1, var end: 66</li>
                        <li>pattern: AVA</li>
                        <li>results in: Bag1Bag, Bag2Bag, ... Bag66Bag</li>
                    </ul>
                </li>
            </ol>

        </div>
    </div>


    <script type="application/javascript">

        function submit() {
            frm = $('#batch_create_form');

            frm.submit();
        }


        // credits to dagg nabbit/stackoverflow :)
        function toLetters(num) {
            "use strict";
            var mod = num % 26;
            var pow = num / 26 | 0;
            var out = mod ? String.fromCharCode(64 + mod) : (pow--, 'Z');
            return pow ? toLetters(pow) + out : out;
        }

        function fromLetters(str) {
            "use strict";
            var out = 0,
                    len = str.length,
                    pos = len;
            while ((pos -= 1) > -1) {
                out += (str.charCodeAt(pos) - 64) * Math.pow(26, len - 1 - pos);
            }
            return out;
        }

        $('#update_preview_button').click(function () {

            var fixed1 = $('#id_fixed1').val().trim();
            var fixed2 = $('#id_fixed2').val().trim();

            var var_part1 = $('#id_var_start').val().trim();
            var var_part2 = $('#id_var_end').val().trim();
            var pattern = $('#id_pattern').val().trim().toUpperCase();

            var var_list = [];
            var s;

            var limit = 200;

            // both var parts are numbers, just count up
            if (!isNaN(var_part1) && !isNaN(var_part2)) {
                for (s = Number(var_part1); s <= Math.min(Number(var_part2), limit); ++s) {
                    var_list.push(s);
                }
            }
            // both var parts (seem to be...) strings, try to enumerate
            else if (typeof var_part1 == 'string' && typeof var_part2 == 'string') {
                var start_as_num = fromLetters(var_part1.toUpperCase());
                var end_as_num = fromLetters(var_part2.toUpperCase());

                for (s = start_as_num; s <= Math.min(end_as_num, limit); ++s) {
                    var_list.push(toLetters(s));
                }

            }

            // run through the variable list and replace the pattern
            var lb = $('#preview_listbox');
            lb.empty();

            data_box = $('#bag_list').val('');

            var_list.forEach(function (item) {
                var next = "";
                for (var k = 0; k < pattern.length; ++k) {
                    // meh...
                    if (pattern[k] == 'A')
                        next += fixed1;
                    else if (pattern[k] == 'B')
                        next += fixed2;
                    else if (pattern[k] == 'V')
                        next += item;
                }

                next = next.trim();

                if (next.length == 0)
                    return false;

                lb.append("<option value='" + next + "'>" + next + "</option>");
                data_box.val(function (i, val) {
                    return val + (val ? ', ' : '') + next;
                });

            });

        });


    </script>



{% endblock content %}

{% block scripts %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/metro-calendar.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/metro-datepicker.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/select2.min.js' %}"></script>
    <script>
        $(document).ready(function () {
            // initialize jquery stuff after page load, fancier datepicker and select dropdown
            $(".select2").select2(
                    {
                        allowClear: true
                    }
            );

            $('#batch_create_form:not(.filter) :input:visible:enabled:first').focus();

        });

    </script>
{% endblock %}