{% extends 'base.html' %}
{% load staticfiles %}
{% load i18n %}
{% block stylesheets %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'css/DateTimePicker.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/select2.css' %}"/>
{% endblock stylesheets %}
{% 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">
                {% trans 'Preview' %}
            </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>{% trans 'refresh'|capfirst %}
                </a>
                <button class="button primary" type="submit" title="Go ahead and create the listed bags">
                    <span class="on-left icon-checkmark"></span>{% trans 'create'|capfirst %}
                </button>

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

                <p style="margin-top: 8px;">
                    {% trans 'Hit preview first. Only the items displayed in the list box will get created. Refer to the manual for details.' %}
                </p>

            </div>
        </div>

        {% csrf_token %}

    </form>

    <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 %}