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

{% form_theme form inline_form_theme %}

{% block title "List Of WorkPlan Targets" %}
    
{% block newStyles %}
    <style>
        .nav-tabs > li.active > a, 
        .nav-tabs > li.active > a:focus, 
        .nav-tabs > li.active > a:hover {
            background-color: #337ab7;
            color: #fff;
        }
    </style>
{% endblock %}
    
{% block content %}
{{ include(workplan_links, {'show_search': false}, with_context = false) }}

{% set bill = constant('\\Alsuite\\ProjectBundle\\Entity\\Tactic::BILL') %}
{% set purchase = constant('\\Alsuite\\ProjectBundle\\Entity\\Tactic::PURCHASE') %}
<div class="row">
    <div class="col-md-4">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="center-text">
                    <span class="label">List Of WorkPlan Targets</span>
                </div>
            </div>
            <div class="panel-body">
                <div class="list-group">
                    {% for target in pagination %}
                    {% set id = target.getId() %}
                    
                    {% if tgt is not null %}
                    {% set selid = tgt.getId() %}
                    {% else %}
                    {% set selid = 0 %}
                    {% endif %}
                    
                    <a class="list-group-item {% if id == selid %}active{% endif %}" href="{{ path('target_home', {'id': wpid,'tgt': id, 'page': page, 'name': name}) }}">
                        {{ target.getDetail() }}<br/><br/>
                    </a>
                    {% else %}
                    There are no targets under this workplan.<br/>
                    <a class="{{ grey_sm_btn }}" href="{{ path('target_add', {'id': app.session.get('wplan')}) }}">Create a Target</a>
                    {% endfor %}
                </div>
                <div>
                    {{ knp_pagination_render(pagination) }}
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <div class="center-text">
                    <span class="label">Target Details</span>
                </div>
            </div>
            <div class="panel-body">
                {% if tgt is not null %}
                {% set id = tgt.getId() %}
                <span style="font-size: 14px; font-weight: 400;">{{ tgt.getDetail() }}</span><br/>
            
                <div id="target-tabs" style="margin-top: 2px;">
                    <ul class="nav nav-tabs nav-justified">
                        <li><a href="#tgt"><b>Target</b></a></li>
                        <li><a href="#inds"><b>Indicators</b></a></li>
                    </ul>
                
                    <div class="tab-content">
                        <div id="tgt">
                            <div style="{{ btnLinks }}">
                                <a class="{{ grey_sm_btn }}" href="{{ path('target_edit', {'id': id}) }}">Edit</a>
                                <a data-toggle="modal" class="{{ grey_sm_btn }}" href="#myModal{{ id }}">Delete</a>
                                <a class="{{ grey_sm_btn }}" href="{{ path('target_view_posts', {'id': id}) }}">View Transactions</a>
                                <div class="btn-group">
                                    <a class="{{ grey_sm_btn }} dropdown-toggle" data-toggle="dropdown">
                                        Activities <span class="caret"></span>
                                    </a>
                                    <div class="dropdown-menu" role="menu">
                                        <a title="View All Activities under Target" class="{{ gen_btn }}" href="{{ path('target_tactics', {'id': id}) }}">Show</a>
                                        <a class="{{ gen_btn }}" href="{{ path('tactic_create', {'id': id}) }}">Create An Activity</a>
                                        {# <a class="{{ gen_btn }}" href="{{ path('tactic_create', {'id': id, 'type': bill}) }}">Create A Bill</a>
                                        <a class="{{ gen_btn }}" href="{{ path('tactic_create', {'id': id, 'type': purchase}) }}">Create A Purchase</a> #}
                                    </div>
                                </div>

                                {{ include('AlsuiteProjectBundle:Target:targetDetails.html.twig', 
                                    {'target': tgt, 'view_act_blocks': 1, 'spent': spent, 'committed': committed}, 
                                    with_context = false)
                                }}

                                {{ include('AlsuiteProjectBundle:Target:del.html.twig',
                                    {'id': id, 'action': 'Delete', 'object': 'Target',
                                    'route': path('target_del', {'id': id})}, with_context = false)
                                }}
                            </div>
                        </div>
                            
                        <div id="inds">
                            <div style="{{ btnLinks }}">
                                <a class="{{ grey_sm_btn }}" href="{{ path('target_ind_create', {'id': id}) }}">Create</a>
                            </div>

                            {% if tgt.getIndicators()|length > 0 %}
                            <div id="ind-tabs">
                                <ul class="nav nav-tabs">
                                    {% for ind in tgt.getIndicators() %}
                                    {% set indId = ind.getId() %}
                                    {% set outInd = ind.getOutputIndicator() %}

                                    <li>
                                        <a class="list-group-item" title="{{ outInd.getDetails() }}" href="#ind{{ indId }}">
                                            {{ outInd.getDetails()|length > 30 ? 
                                                [outInd.getDetails()|slice(0, 30), '...']|join(' ') : 
                                                outInd.getDetails()
                                            }}
                                        </a>
                                    </li>
                                    {% endfor %}
                                </ul>

                                <div class="panels">
                                    {% for ind in tgt.getIndicators() %}
                                    {% set indId = ind.getId() %}
                                    {% set outInd = ind.getOutputIndicator() %}
                                    {% set oid = outInd.getId() %}

                                    <div id="ind{{ indId }}">
                                        <table class="table table-bordered table-striped" style="{{ tbl_margin }}">
                                            <tbody>
                                                <tr>
                                                    <td>{{ outInd.getDetails() }}</td>
                                                    <td>
                                                        <a href="{{ path('target_ind_edit', {'id': indId}) }}">Edit</a>
                                                        <a data-toggle="modal" href="#inddel{{ indId }}">Delete</a>

                                                        {% if outInd.isTrackedQualitatively() %}
                                                        <a href="{{ path('ind_qual_progress_add', {'outInd' : oid, 'targetInd' : indId}) }}">Record Progress</a>
                                                        {% else %}
                                                        <a href="{{ path('ind_quant_progress_add', {'outInd' : oid, 'targetInd' : indId}) }}">Record Progress</a>
                                                        {% endif %}

                                                        {{ include('AlsuiteProjectBundle:TargetIndicator:del.html.twig',
                                                            {'id': id, 'action': 'Delete', 'object': 'Target Indicator', 'modal': 'inddel',
                                                            'route': path('target_ind_del', {'id': id})})
                                                        }}
                                                    </td>
                                                </tr>
                                                <tr><th>Tracking Type</th><td>{{ outInd.getTrackingTypeLabel() }}</td></tr>
                                                <tr><th>Work Plan Target/Weight</th><td>{{ ind.getQty() }}</td></tr>
                                                <tr><th>Overall Target/Weight</th><td>{{ outInd.getTarget() }}</td></tr>
                                                <tr><th>Work Plan Achievement</th><td>{{ ind.getLatestScore() }}</td></tr>
                                                <tr><th>Overall Achievement</th><td>{{ outInd.getLatestScore() }}</td></tr>
                                            </tbody>
                                        </table>
                                        <table class="table table-bordered table-striped" style="{{ tbl_margin }}">
                                            <colgroup>
                                                <col style="width: 10%;"/><col style="width: 15%;"/>
                                                <col style="width: 50%;"/><col style="width: available;"/>
                                            </colgroup>
                                            <thead>
                                                <tr><th colspan="4" class="center-text">Progress Records</th></tr>
                                                <tr><th>Value</th><th>Date</th><th>Details</th><th>Options</th></tr>
                                            </thead>
                                            <tbody>
                                                {% for prg in ind.getProgress() %}
                                                {% set pid = prg.getId() %}
                                                <tr>
                                                    <td>
                                                        {{ outInd.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.getActivity() is null %}
                                                        {% if outInd.isTrackedQualitatively() %}
                                                        <a href="{{ path('ind_qual_progress_edit', {'progress': pid, 'redirect': 'target'}) }}">Edit</a>
                                                        {% else %}
                                                        <a href="{{ path('ind_quant_progress_edit', {'progress': pid, 'redirect': 'target'}) }}">Edit</a>
                                                        {% endif %}

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

                                                        {{ include('AlsuiteProjectBundle:TargetIndicator:delprg.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>
                                    {% endfor %}
                                </div>
                            </div>
                            {% else %}
                            There are no indicators under this target currently.
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% else %}
                Please click on a target in the left panel to view its details here.
                {% endif %}
            </div>
        </div>                          
    </div>
</div>
{% endblock %} 

{% block javascripts %}
<script text="text/javascript">
    $(document).ready(function() {
        $('#target-tabs, #ind-tabs').easytabs();
    });
</script>
{% endblock %}