{% extends "::base.html.twig" %}

{% block collection_widget %}
{% spaceless %}
    {% if prototype is defined %}
        {% set attr = attr|merge({'data-prototype': block('collection_item_widget') }) %}
    {% endif %}
    {% set attr = attr|merge({'data-allow-add': allow_add ? 1 : 0}) %}
    {% set attr = attr|merge({'data-allow-remove': allow_delete ? 1 : 0 }) %}
    {% set attr = attr|merge({'data-name-prefix': full_name}) %}
    <table class="table table-condensed table-striped splits-collection" {{ block('widget_attributes') }}>
        <thead>
            <tr>
                <td style="color: red; width: 25%;">Output</td>
                <td style="color: red; width: 10%;">
                    Weight<br/>
                    <span style="color: black;">
                        This is how much percent this output contributes to the outcome
                    </span>
                </td>
                <td style="color: red; width: 10%;">Starts On</td>
                <td style="color: red; width: 10%;">Ends On</td>
                <td style="width: 10%;">
                    Position<br/>
                    <span style="color: black;">
                        This is the position number at which this output will 
                        be listed in the outcome outputs
                    </span>
                </td>
                <td style="width: 25%;">SP Output</td>
                <td></td>
            </tr>
        </thead>
        <tbody>
            {% for rows in form %}
            <tr class="item">
                <td>{{ form_widget(rows.output) }}{{ form_errors(rows.output) }}</td>
                <td>{{ form_widget(rows.weight) }}{{ form_errors(rows.weight) }}</td>
                <td>{{ form_widget(rows.startsOn) }}{{ form_errors(rows.startsOn) }}</td>
                <td>{{ form_widget(rows.endsOn) }}{{ form_errors(rows.endsOn) }}</td>
                <td>{{ form_widget(rows.position) }}{{ form_errors(rows.position) }}</td>
                <td>{{ form_widget(rows.spOutput) }}{{ form_errors(rows.spOutput) }}</td>
                <td>
                    <a href="#" class="collection-remove btn btn-default btn-xs" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
                    <a href="#" class="collection-add btn btn-default btn-xs" title="Add"><span class="glyphicon glyphicon-plus-sign"></span></a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% endspaceless %}
{% endblock collection_widget %}

{% block collection_item_widget %}
{% spaceless %}
<tr class="item">
    <td>{{ form_widget(prototype.output) }}{{ form_errors(prototype.output) }}</td>
    <td>{{ form_widget(prototype.weight) }}{{ form_errors(prototype.weight) }}</td>
    <td>{{ form_widget(prototype.startsOn) }}{{ form_errors(prototype.startsOn) }}</td>
    <td>{{ form_widget(prototype.endsOn) }}{{ form_errors(prototype.endsOn) }}</td>
    <td>{{ form_widget(prototype.position) }}{{ form_errors(prototype.position) }}</td>
    <td>{{ form_widget(prototype.spOutput) }}{{ form_errors(prototype.spOutput) }}</td>
    <td>
        <a href="#" class="collection-remove btn btn-default btn-xs" title="Delete"><span class="glyphicon glyphicon-trash"></span></a>
        <a href="#" class="collection-add btn btn-default btn-xs" title="Add"><span class="glyphicon glyphicon-plus-sign"></span></a>
    </td>
</tr>
{% endspaceless %}
{% endblock collection_item_widget %}

{% block button_widget %}
{% spaceless %}
    {% if label is empty %}
    {% set label = name|humanize %}
    {% endif %}
    <button type="{{ type|default('button') }}" {{ block('button_attributes') }}>{{ label|title|trans({}, translation_domain) }}</button>
    {% if add_cancel_btn %}
    <a class="btn btn-default btn-sm pull-right space-buttons" href="{{ app.request.headers.get('referer') }}">{{ cancel_label|title }}</a>
    {% endif %}
    <button id="add_split" data-collection="splits" class="collection-action collection-add btn btn-success btn-sm pull-right space-buttons add-btn"><span class="glyphicon glyphicon-plus-sign"></span> Output</button>
    {% if add_antispam_button %}
    <button type="submit" {{ block('antispam_button_attributes') }}>
        {{ antispam_label|title }}
    </button>
    {% endif %}
{% endspaceless %}
{% endblock button_widget %}

{% form_theme form _self %}
{% form_theme form.outputs 
    'AlsuiteAssetsBundle:Form:collection-theme.html.twig'
    _self
%}

{% block title pageTitle %}
    
{% block submenu %}
    {{ include('AlsuiteBackendBundle:BreadCrumbs:logframe.html.twig') }}
{% endblock %}

{% block content %}
{% set project = outcome.project %}
<div class="panel panel-primary" style="margin-top: -2px;">
    <div class="panel-heading">
        <div class="col-lg-7 center center-text">
            <span class="label">Add Outputs</span>
        </div>
    </div>
    <table class="table table-bordered table-condensed" style="{{ tbl_margin }}">
        <tbody>
            <tr><th>Outcome</th><td>{{ outcome.outcome }}</td></tr>
            <tr><th>Project</th><td>{{ project.name }}</td></tr>
            <tr>
                <th>Project Period</th>
                <td>
                    {{ project.startsOn|date(date_format) ~ ' to ' ~  project.endsOn|date(date_format)}}<br/>
                    <span style="color: red;">Please ensure that the output dates are within this period.</span>
                </td>
            </tr>
        </tbody>
    </table>
    {{ form_start(form) }}
    <div class="panel panel-primary" style="margin-top: 3px;">
        <div class="panel-heading">
            <div class="col-lg-7 center center-text">
                <span class="label">
                    To add an output, click 
                    <span class="glyphicon glyphicon-plus-sign"></span> Output
                </span>
            </div>
        </div>
        <div id="splits" class="panel-body" style="padding: 0px 15px;">
            {{ form_row(form.outputs) }}
        </div>
        <div class="panel-footer">
            {{ form_end(form) }}
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    $(document).ready(function() {
        $('.splits-collection').collection({
            allow_up: false,
            allow_down: false, 
            elements_selector: 'tr.item',
            elements_parent_selector: '%id% tbody',
            custom_add_location: true, 
            after_add: function(collection, element) { 
                return afterAdd(); 
            }
        });
        
        var splits = $('.splits-collection tbody tr').length;
        if (splits === 0) {
            $('#add_split').click();
        }
        afterAdd();
        
        function afterAdd() {
            $('.help-block').css('display', 'none');
            $('select').select2();
        }
    });
</script>
{{ form_javascript(form) }}
{% endblock %}