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

{% block content %}
    {% import _self as macros %}
    
<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>
                Σε αυτή την καρτέλα θα καταχωρήσετε πληροφορίες που αφορούν στον 
                εξοπλισμό που θέλετε να αναβαθμίσετε ή/και στον νέο εξοπλισμό που 
                θέλετε να αποκτήσετε, στο πεδίο <strong>«Αιτιολογία χρήσης»</strong> περιγράφεται 
                συνοπτικά την εκπαιδευτική χρήση του προτεινόμενου εξοπλισμού.
            </p>
            <p>
                Στο πεδίο <strong>«Σχόλια/Παρατηρήσεις»</strong> περιγράφεται το πως θα 
                υποστηρίζονται οι εκπαιδευτικοί του σχολείου σας στην χρήση του 
                συνόλου των νέων ψηφιακών υποδομών που θέλετε να αποκτήσετε και
                συνοπτικά το σχέδιο του σχολείου σας για την χρήση των νέων ψηφιακών 
                υποδομών στην μαθησιακή διαδικασία με ενδοσχολικές δραστηριότητες 
                αλλά και δράσεις ανοιχτές στην τοπική κοινωνία. 
            </p>
            <p>
                Ελέγχετε προσεκτικά όλες τις καρτέλες και τα πεδία της αίτησης 
                του σχολείου σας πριν την υποβάλετε και συνέχεια την εκτυπώνεται
                σε PDF αρχείο για να έχετε ένα πλήρες αντιγραφο για τα αρχεία 
                σας. 
            </p>
            <p>
                Θα ενημερωθείτε στο ηλεκτρονικό σας ταχυδρομείο εάν έχει επιλεγεί 
                το σχολείο σας και με ποιον από τον προτεινόμενο εξοπλισμό να 
                συμμετάσχει στην 1η φάση Αναβάθμισης Ψηφιακών Υποδομών των 
                Σχολείων. 
            </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>
                {{ macros.text('comments', 'Σχόλια/Παρατηρήσεις', form.value.comments) }}
            </fieldset>
        </div>
        <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 %}