{% extends "layout.twig" %}

{% macro itemSelect(name, label, options, selected, index) %}
    <div class="form-group">
        <select class="form-control input-sm" name="items[{{ index | default('<%= index %>') | raw }}][{{ name }}]">
        <option value="" disabled selected>{{ label|striptags }}</option>
        {% for option in options %}
            <option value="{{ option.value|e }}"{% if selected == option.value %} selected{% endif %}>
                {{ option.label }}
            </option>
        {% endfor %}
        </select>
    </div>
{% endmacro %}

{% macro itemCount(name, label, value, index) %}
    <div class="form-group">
        <div class="col-xs-12 col-sm-12 col-md-9">
            <input placeholder="{{ label|striptags }}" class="form-control input-sm" min="1"
                type="number" name="items[{{ index | default('<%= index %>') | raw }}][{{ name }}]" value="{{ value|default('')|raw }}">
        </div>
    </div>
{% endmacro %}

{% macro itemReasons(name, label, value, index) %}
    <div class="form-group">
        <textarea class="form-control input-sm" name="items[{{ index | default('<%= index %>') | raw }}][{{ name }}]"
                  placeholder="{{ label|striptags }}"
                  rows="1" cols="20">{{ value|default('') }}</textarea>
    </div>
{% endmacro %}

{% macro select(name, label, options, selected) %}
    <div class="form-group">
        <label class="control-label hidden-xs hidden-sm" for="el-{{ name }}">{{ label|raw }}</label>
        <select class="form-control" name="{{ name }}" id="el-{{ name }}">
            <option value="" disabled selected>{{ label|striptags }}</option>
            {% for option in options %}
            <option value="{{ option.value|e }}"{% if selected == option.value %} selected{% endif %}>
                {{ option.label }}
            </option>
            {% endfor %}
        </select>
    </div>
{% endmacro %}

{% macro yesno(name, label, selected) %}
    <div class="form-group">
        <label class="control-label hidden-xs hidden-sm" for="el-{{ name }}">{{ label|raw }}</label>
        <select class="form-control" name="{{ name }}" id="el-{{ name }}">
            <option value="" disabled selected>{{ label|striptags }}</option>
            <option value="ΝΑΙ"{% if selected == 'ΝΑΙ' %} selected{% endif %}>Ναι</option>
            <option value="ΟΧΙ"{% if selected == 'ΟΧΙ' %} selected{% endif %}>Όχι</option>
        </select>
    </div>
{% endmacro %}

{% macro text(name, label, value) %}
    <div class="form-group">
        <label class="control-label hidden-xs hidden-sm" for="el-{{ name }}">{{ label|raw }}</label>
        <textarea class="form-control" name="{{ name }}" 
                  id="el-{{ name }}" 
                  placeholder="{{ label|striptags }}">{{ value|default('') }}</textarea>
    </div>
{% endmacro %}

{% import _self as macros %}

{% block content %}
<div id="app-form">
    <h1>
    {% block title %}
        Αίτηση <small>για νέο εξοπλισμό</small>
    {% endblock %}
    </h1>
    <form method="post" action="" data-is-valid="{{ form.is_valid | default(true) ? '1' : '0' }}"
          data-messages="{{ form.messages|default({})|json_encode }}">
        <div class="form-group">
            <p>
                Σε αυτή την καρτέλα θα καταχωρήσετε πληροφορίες που αφορούν στον 
                εξοπλισμό που θέλετε να αναβαθμίσετε ή/και στον νέο εξοπλισμό 
                που θέλετε να αποκτήσετε, υποβάλλοντας και τη σχετική αίτηση.
            </p>
        </div>
        
        <div class="table-responsive">
            <fieldset>
                <legend>Νέος εξοπλισμός</legend>
                <div id="items-list">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Πλήθος</th>
                                <th>Τύπος</th>
                                <th>Χώρος</th>
                                <th>Αιτιολογία χρήσης</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for itemIndex,item in form.values.items %}
                                <tr>
                                    <td>{{ macros.itemCount('qty', 'Πλήθος', item.qty, loop.index0) }}</td>
                                    <td>{{ macros.itemSelect('itemcategory_id', 'Τύπος', type_choices, item.itemcategory_id, loop.index0) }}</td>
                                    <td>{{ macros.itemSelect('lab_id', 'Χώρος', lab_choices, item.lab_id, loop.index0 ) }}</td>
                                    <td>{{ macros.itemReasons('reasons', 'Αιτιολογία χρήσης', item.reasons, loop.index0) }}</td>
                                    <td>
                                        {% if loop.index0 > 0 %}
                                        <button type="button" class="btn btn-xs text-danger remove-row">
                                        <i class="fa fa-remove"></i>
                                        {% endif %}
                                    </button</td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td>{{ macros.itemCount('qty', 'Πλήθος', '', 0) }}</td>
                                    <td>{{ macros.itemSelect('itemcategory_id', 'Τύπος', type_choices, '', 0) }}</td>
                                    <td>{{ macros.itemSelect('lab_id', 'Χώρος', lab_choices, '', 0 ) }}</td>
                                    <td>{{ macros.itemReasons('reasons', 'Αιτιολογία χρήσης', '', 0) }}</td>
                                    <td></td>
                                </tr>
                            {% endfor %}
                        </tbody>
                        <tfoot>
                            <tr>
                                <td colspan="5" class="text-right">
                                    <button type="button" class="btn btn-sm btn-primary add-row">
                                        <i class="fa fa-plus"></i>
                                        Προσθήκη εξοπλισμού
                                    </button>
                                </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </fieldset>
        </div>
        <fieldset>
            <legend>Επιπλέον</legend>
            {{ macros.select('apply_for', 'Αίτημα του σχολείου για', 
                apply_for_choices, form.values.apply_for) }}
            {{ macros.yesno('new_lab_perspective', 'Ύπαρξη - προοπτική αίθουσας για δημιουργία νέου εργαστηρίου',
                form.values.new_lab_perspective)}}
            {{ macros.text('comments', 'Σχόλια/Παρατηρήσεις', form.value.comments) }}

        </fieldset>
        <hr>
        <div class="form-group text-center">
            <button name="submit" value="submit" type="submit" class="btn btn-lg btn-primary">Υποβολή</button>
        </div>
        <input type="hidden" name="{{ csrf.name_key }}" value="{{ csrf.name }}">
        <input type="hidden" name="{{ csrf.value_key }}" value="{{ csrf.value }}">
    </form>
    <script type="text/template" id="app-form-item-row-template">
        <td>{{ macros.itemCount('qty', 'Πλήθος') }}</td>
        <td>{{ macros.itemSelect('itemcategory_id', 'Τύπος', type_choices) }}</td>
        <td>{{ macros.itemSelect('lab_id', 'Χώρος', lab_choices) }}</td>
        <td>{{ macros.itemReasons('reasons', 'Αιτιολογία χρήσης') }}</td>
        <td><button type="button" class="btn btn-xs text-danger remove-row">
            <i class="fa fa-remove"></i>
        </button</td>
    </script>
</div>
{% endblock %}

{% block inlinejs %}
    {{ parent() }}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
    <script src="{{ base_url }}/js/application_form/index.js"></script>
{% endblock %}