{% extends "::base.html.twig" %}
{% form_theme form inline_form_theme %}

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

{% block content %}
<div style="margin-top: 3px;">
    {{ form(form) }}
</div>

<div class="row" style="margin-top: 10px;">
    <div class="col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="col-md-3 center center-text">
                    <span class="label">List Of Output Indicators</span>
                </div>
            </div>
            <div class="panel-body">
                <div class="list-group">
                    {% for oi in pagination %}
                    {% set id = oi.getId() %}
                    
                    {% if indicator is not null %}
                    {% set sid = indicator.id %}
                    {% else %}
                    {% set sid = 0 %}
                    {% endif %}
                    
                    <a class="list-group-item {% if id == sid %}active{% endif %}" href="{{ path('output_indicator_list', {'indicator': id, 'page': page, 'project': selected_prj, 'ftext': ftext}) }}">
                        {{ oi.output.outcome.project.name }}<br/>
                        {{ oi.details }}
                    </a>
                    {% else %}
                    There are no output indicators recorded yet.
                    {% endfor %}
                    <div>
                        {{ knp_pagination_render(pagination) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="col-md-3 center center-text">
                    <span class="label">Output Indicator Details</span>
                </div>
            </div>
            <div class="panel-body">
                {% if indicator is not null %}
                {% set id = indicator.id %}
                <table class="table table-bordered table-bordered table-striped" style="{{ tbl_margin }}">
                    <tbody>
                        <tr><td colspan="2" style="font-size: 13px;">{{ indicator.details }}</td></tr>
                        <tr>
                            <td>Output</td>
                            <td>
                                <a href="{{ path('output_list', {'output': indicator.output.id, 'project': indicator.output.outcome.project.id}) }}">{{ indicator.output.output }}</a>
                            </td>
                        </tr>
                        <tr>
                            <td>Outcome</td>
                            <td>
                                <a href="{{ path('outcome_list', {'outcome': indicator.output.outcome.id, 'project': indicator.output.outcome.project.id}) }}">{{ indicator.output.outcome.outcome }}
                            </td>
                        </tr>
                        <tr><td>Project</td><td>{{ indicator.output.outcome.project.name }}</td></tr>
                        <tr>
                            <td>Strategic Plan Output Indicator</td>
                            <td>
                                {% if indicator.spIndicator is not null %}
                                {{ indicator.spIndicator.details }}
                                {% endif %}
                            </td>
                        </tr>
                    </tbody>
                </table>
                    
                <div id="ind-tabs" style="margin-top: 2px;">
                    <ul class="nav nav-tabs nav-justified">
                        <li><a href="#ind"><b>Details</b></a></li>
                        <li><a href="#prg"><b>Progress</b></a></li>
                        <li><a href="#ms"><b>Milestones</b></a></li>
                    </ul>
                
                    <div class="panel-container">
                        <div id="ind">
                            <div style="{{ btnLinks }}">
                                <a class="{{ grey_sm_btn }}" href="{{ path('output_ind_edit', {'oi': id}) }}">Edit</a>
                                <a class="{{ grey_sm_btn }}" data-toggle="modal" href="#inddel{{ id }}">Delete</a>

                                {{ include('AlsuiteProjectBundle:OutputIndicator:del.html.twig',
                                    {'id': id, 'action': 'Delete', 'object': 'Indicator', 
                                    'modal': 'inddel', 
                                    'route': path('output_ind_del', {'id': id})})
                                }}
                            </div>
                            <table class="table table-bordered table-striped">
                                <tbody>
                                    <tr>
                                        <th>Is Tracked</th><td>{{ indicator.getTrackingTypeLabel() }}</td>
                                    </tr>
                                    <tr>
                                        <th>Weight</th><td>{{ [indicator.getWeight(), '%']|join }}</td>
                                    </tr>
                                    <tr>
                                        <th>Baseline</th><td>{{ indicator.getBaseline() }}</td>
                                    </tr>
                                    <tr>
                                        <th>Target</th><td>{{ indicator.getTarget() }}</td>
                                    </tr>
                                    <tr>
                                        <th>Achieved</th>
                                        <td>
                                            {{ indicator.getLatestScore() }}{% if indicator.isTrackedQualitatively() %}%{% endif %}
                                        </td>
                                    </tr>
                                    {% if indicator.isTrackedThroughCumulativeAggregates() %}
                                    <tr>
                                        <th>Achieved %</th>
                                        <td>
                                            {% if indicator.target is not null or indicator.target != 0 %}
                                            {{ ((indicator.getLatestScore()/indicator.getTarget())*100)|round|number_format(0) ~ '%' }}
                                            {% else %}
                                            0
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% endif %}
                                </tbody>
                            </table>
                        </div>
                        <div id="prg">
                            <div style="{{ btnLinks }}">
                                {% if indicator.isTrackedQualitatively() %}
                                <a class="{{ grey_sm_btn }}" href="{{ path('ind_qual_progress_add', {'outInd' : id}) }}">Add Progress</a>
                                {% else %}
                                <a class="{{ grey_sm_btn }}" href="{{ path('ind_quant_progress_add', {'outInd' : id}) }}">Add Progress</a>
                                {% endif %}
                            </div>
                            <table class="table table-bordered table-striped">
                                <colgroup>
                                    <col style="width: 10%;"/><col style="width: 15%;"/>
                                    <col style="width: 50%;"/><col style="width: available;"/>
                                </colgroup>
                                <thead>
                                    <tr><th>Value</th><th>Date</th><th>Details</th><th>Options</th></tr>
                                </thead>
                                <tbody>
                                    {% for prg in indicator.getProgress() %}
                                    {% set pid = prg.getId() %}
                                    <tr>
                                        <td>
                                            {{ indicator.isTrackedQualitatively() ? 
                                                prg.getWeightContributed() : prg.getQtyAchieved() 
                                            }}
                                        </td>
                                        <td>
                                            {% if prg.AchievedOn is not null %}
                                                {{ prg.getAchievedOn()|date(date_format) }}
                                            {% endif %}
                                        </td>
                                        <td>{{ prg.getDetails()|raw }}</td>
                                        <td>
                                            {% if prg.getTargetIndicator() is null %}
                                            {% if indicator.isTrackedQualitatively() %}
                                            <a class="{{ tbl_link }}" href="{{ path('ind_qual_progress_edit', {'progress': pid, 'redirect': 'output' }) }}">Edit</a>
                                            {% else %}
                                            <a class="{{ tbl_link }}" href="{{ path('ind_quant_progress_edit', {'progress': pid, 'redirect': 'output'}) }}">Edit</a>
                                            {% endif %}

                                            <a class="{{ tbl_link }}" data-toggle="modal" href="#indprgdel{{ pid }}">Delete</a>

                                            {{ include('AlsuiteProjectBundle:OutputIndicatorProgress:del.html.twig',
                                                {'id': pid, 'action': 'Delete', 'object': 'Progress Record', 
                                                'modal': 'indprgdel', 
                                                'route': path('ind_progress_del', {'progress': pid})})
                                            }}
                                            {% endif %}
                                        </td>
                                    </tr>
                                    {% else %}
                                    <tr>
                                        <td colspan="4">
                                            There are no progress records currenlty.<br/>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        <div id="ms">
                            <div style="{{ btnLinks }}">
                                <a class="{{ grey_sm_btn }}" href="{{ path('milestone_add', {'oi': id}) }}">Add</a>
                            </div>
                            <table class="table table-bordered table-striped tablesorter">
                                <colgroup>
                                    <col style="width: 15%;"/><col style="width: 12%;"/>
                                    <col style="width: 10%;"/>
                                    <col style="width: 40%;"/><col style="width: available;"/>
                                </colgroup>
                                <thead>
                                    <tr>
                                        <th>Deadline</th><th>Weight/Target</th>
                                        <th>Achieved</th><th>Details</th><th>Options</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for ml in indicator.getMilestones() %}
                                    {% set mid = ml.getId() %}
                                    <tr>
                                        <td>
                                            {% if ml.deadline is not null %}
                                                {{ ml.getDeadline()|date(date_format) }}
                                            {% endif %}
                                        </td>
                                        <td>
                                            {{ ml.getTarget() is not null ? 
                                                ml.getTarget() : 
                                                [ml.getWeight(), '%']|join 
                                            }}
                                        </td>
                                        <td>{{ indicator.getLatestScore(ml.deadline) }}</td>
                                        <td>{{ ml.getDetail() }}</td>
                                        <td>
                                            <a class="{{ tbl_link }}" href="{{ path('milestone_edit', {'milestone': mid}) }}">Edit</a>
                                            <a class="{{ tbl_link }}" data-toggle="modal" href="#mls{{ mid }}">Delete</a>

                                            {{ include('AlsuiteProjectBundle:Milestone:del.html.twig',
                                                {'id': mid, 'action': 'Delete', 'object': 'Milestone', 
                                                'modal': 'mls', 
                                                'route': path('milestone_del', {'milestone': mid})})
                                            }}
                                        </td>
                                    </tr>
                                    {% else %}
                                    <tr>
                                        <td colspan="5">
                                            There are currently no milestones under this indicator.<br/>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                {% else %}
                Please click on an output indicator in the left panel to view its details here.
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block formjscripts %}
{{ parent() }}
<script type="text/javascript">
    $(document).ready( function() {
        $('#form_project').css('width', '300px');
        $('#form_type').css('width', '200px');
        $('#ind-tabs').easytabs();
        $('.tablesorter').tablesorter({
            sortList     : [[0,0]]
        });
    });
</script>
{{ form_javascript(form) }}
{% endblock %}