{% extends 'base.html.twig' %}

{% block title %}{{ 'Plan execution list'|trans  }}{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('css/lib/AdminLTE.min.css') }}">
{{ parent() }}
{% endblock %}
{% block body %}

<div class="container-fluid">
    <div class="row mb-3" id="plan_execution_container">
        <div class="col-md-2 px-1">
            <div class="plan_execution_info bg-gray small-box mb-0 text-uppercase">
                <div class="icon"><i class="far fa-tasks"></i></div>
                <h5 class="title">{{ 'validate_actions.not_started'|trans  }}</h5>
                <div class="d-flex">
                    <i class="far fa-3x fa-calendar-times align-self-baseline mr-3"></i>
                    <span class="info align-self-baseline mr-1">{{ number_actions_by_status['not_started'] }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-2 px-1">
            <div class="plan_execution_info bg-dark-gray small-box mb-0 text-uppercase">
                <div class="icon"><i class="far fa-tasks"></i></div>
                <h5 class="title">{{ 'validate_actions.started'|trans  }}</h5>
                <div class="d-flex">
                    <i class="far fa-3x fa-arrow-from-left align-self-baseline mr-3"></i>
                    <span class="info align-self-baseline mr-1">{{ number_actions_by_status['started'] }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-2 px-1">
            <div class="plan_execution_info bg-dark-gray small-box mb-0 text-uppercase">
                <div class="icon"><i class="far fa-tasks"></i></div>
                <h5 class="title">{{ 'validate_actions.validation_pending'|trans  }}</h5>
                <div class="d-flex">
                    <i class="far fa-3x fa-arrow-to-right align-self-baseline mr-3"></i>
                    <span class="info align-self-baseline mr-1">{{ number_actions_by_status['pending'] }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-2 px-1">
            <div class="plan_execution_info bg-red small-box mb-0 text-uppercase">
                <div class="icon"><i class="far fa-tasks"></i></div>
                <h5 class="title">{{ 'validate_actions.expired'|trans  }}</h5>
                <div class="d-flex">
                    <i class="far fa-3x fa-times align-self-baseline mr-3"></i>
                    <span class="info align-self-baseline mr-1">{{ number_actions_by_status['expired'] }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-2 px-1">
            <div class="plan_execution_info bg-green small-box mb-0 text-uppercase">
                <div class="icon"><i class="far fa-tasks"></i></div>
                <h5 class="title">{{ 'validate_actions.finished'|trans  }}</h5>
                <div class="d-flex">
                    <i class="far fa-3x fa-check-double align-self-baseline mr-3"></i>
                    <span class="info align-self-baseline mr-1">{{ number_actions_by_status['finished'] }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-2 px-1">
            <div class="plan_execution_info small-box mb-0 text-uppercase">
                <div class="icon"><i class="far fa-tasks"></i></div>
                <h5 class="title">{{ 'validate_actions.total'|trans  }}</h5>
                <div class="d-flex">
                    <i class="far fa-3x fa-th-list align-self-baseline mr-3"></i>
                    <span class="info align-self-baseline mr-1">{{ number_actions_by_status['total'] }}</span>
                </div>
            </div>
        </div>
    </div>
    <h4 class="pl-2">{{ 'validate_actions.actions_by_department_and_contract'|trans  }}</h4>
    <div class="row" id="plan_execution_container">
        {% for department in departments %}
            {% if department.rowid in departments_number_actions|keys %}
           
            <div class="col-xl-4 col-lg-6 px-1">
                <div class="plan_execution_info small-box border-top bg-gray" style="border-width: 10px !important; border-color:#{{department.color}} !important;">
                    <div class="icon"><i class="far fa-tasks"></i></div>
                    <h5 class="title text-center">{{department.name}}</h5>
                    <div class="row department_selected" data-department="{{department.rowid}}">
                        <div class="col-md-1 px-2 not_started">
                             <div class="d-flex justify-content-center mb-1">
                                <i class="fal fa-2x fa-fw">&nbsp;</i>
                            </div>
                            {% for pc in partner_contracts %}
                                <div class="mb-1"><div class="mr-2 px-1 d-inline-block rounded bg-light text-white font-weight-bold" style="background-color: #{{pc.color}} !important; text-shadow: 1px 1px 2px #000000;">{{ pc.code }}</div></div>
                            {% endfor %}
                        </div>
                        <div class="col-md px-2 text-center not_started">
                             <div class="d-flex justify-content-center mb-1">
                                <i class="fal fa-2x fa-calendar-times" data-toggle="tooltip" title="{{ 'validate_actions.not_started'|trans  }}"></i>
                            </div>
                            {% for code, action_number in departments_number_actions[department.rowid] %}
                                <div class="mb-1" data-code="{{code}}"><span class="value">{{ action_number["not_started"] }}</span> {{ 'n_of_m'|trans }} <span>{{action_number["total"] }}</span></div>
                            {% endfor %}
                        </div>
                        <div class="col-md px-2 text-center started">
                            <div class="d-flex justify-content-center mb-1">
                                <i class="fal fa-2x fa-arrow-from-left" data-toggle="tooltip" title="{{ 'validate_actions.started'|trans  }}"></i>
                            </div>
                            {% for code, action_number in departments_number_actions[department.rowid] %}
                                <div class="mb-1" data-code="{{code}}"><span class="value">{{ action_number["started"] }}</span> {{ 'n_of_m'|trans }} <span>{{action_number["total"]}}</span></div>
                            {% endfor %}
                        </div>
                        <div class="col-md px-2 text-center pending">
                            <div class="d-flex justify-content-center mb-1">
                                <i class="fal fa-2x fa-arrow-to-right" data-toggle="tooltip" title="{{ 'validate_actions.validation_pending'|trans  }}"></i>
                            </div>
                            {% for code, action_number in departments_number_actions[department.rowid] %}
                                <div class="mb-1" data-code="{{code}}"><span class="value">{{ action_number["pending"] }}</span> {{ 'n_of_m'|trans }} <span>{{action_number["total"] }}</span></div>
                            {% endfor %}
                        </div>
                        <div class="col-md px-2 text-center finished">
                            <div class="d-flex justify-content-center mb-1">
                                <i class="fal fa-2x fa-times" data-toggle="tooltip" title="{{ 'validate_actions.expired'|trans  }}"></i>
                            </div>
                            {% for code, action_number in departments_number_actions[department.rowid] %}
                                <div class="mb-1" data-code="{{code}}"><span class="value">{{ action_number["expired"] }}</span> {{ 'n_of_m'|trans }} <span>{{action_number["total"] }}</span></div>
                            {% endfor %}
                        </div>
                        <div class="col-md px-2 text-center finished">
                            <div class="d-flex justify-content-center mb-1">
                                <i class="fal fa-2x fa-check-double" data-toggle="tooltip" title="{{ 'validate_actions.finished'|trans  }}"></i>
                            </div>
                            {% for code, action_number in departments_number_actions[department.rowid] %}
                                <div class="mb-1" data-code="{{code}}"><span class="value">{{ action_number["finished"] }}</span> {{ 'n_of_m'|trans }} <span>{{action_number["total"] }}</span></div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}
        {% endfor %}
    </div>


    <table id="table_plan_ejecution_list" class="display table-hover custom_datatable" style="width:100%" data-datatable-ajax="{{ datatable_ajax }}" data-ajax-path="{{ path("get_actions_list_choose_datatable") }}">
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th>{{ 'Validate'|trans }}</th>
                <th>{{ 'Title'|trans }}</th>
                <th>{{ 'Description'|trans }}</th>
                <th>{{ 'Timing'|trans }}</th>
                <th>{{ 'Warn on'|trans }}</th>
                <th>{{ 'Contacts'|trans }}</th>
            </tr>
        </thead>
        <tbody>
            {% if datatable_ajax == false %}
            {% set  conditions = {
                'off': { title: 'validate_actions.action_date_not_reached'|trans  },
                'red': { title: 'validate_actions.action_deadline_reached'|trans  },
                'amber': { title: 'validate_actions.action_started'|trans  },
                'green': { title: 'validate_actions.action_finished'|trans }} %}
            {% set titlesbytimingperiod = {
            'before': {
                'not_started': 'The action planned start date has not been reached.',
                'started':  'The action planned start date has not been reached, but the action has been started.',
                'pending': 'The action planned start date has not been reached, but the action needs to be validated.',
                'finished': 'The action planned start date has not been reached, but the action has been finished.'
            },
            'in': {
                'not_started': 'The action should be started.',
                'started':  'The action has been started.',
                'pending': 'The action needs to be validated.',
                'finished': 'The action has been finished.'
            },
            'after': {
                'not_started': 'The action deadline has been reached, not marked as started.',
                'started':  'The action deadline has been reached, but validation has never been requested.',
                'pending': 'The action deadline has been reached, but never has been validated.',
                'finished': '-'
            }}
            %}

            {% for action_company_entity in actions_company_entities %}

            	{% set action = action_company_entity.fkAction %}
                {% set bmandatory = ((action.getFkLevel().getCode() == "europe" or action.getFkLevel().getCode() == "market") and action.getMandatory() == 1) %}
                {% set action_company_entity_status = action_company_entity.fkActionStatus.code %}
                
                {% if action_company_entity_status == "finished" %}
                    {% set condition = "green" %}
                {% elseif current_date < action.getTimingFrom() and action_company_entity_status != "started" and action_company_entity_status != "pending" %}
                    {% set condition = "off" %}
                {% elseif current_date > action.getTimingTo() and (action_company_entity_status != "finished") %}
                    {% set condition = "red" %}
                {% else %}
                    {% set condition = "amber" %}
                {% endif %}

                {% if current_date < action.timingfrom %}
                    {% set timingperiod = 'before' %}
                {% elseif ((current_date >= action.timingfrom) and (current_date <= action.timingto)) %}
                    {% set timingperiod = 'in' %}
                {% else %}
                    {% set timingperiod = 'after' %}
                {% endif %}

                <tr data-element="{{ action.rowid }}">
                    <td>{{ action.rowid }}</td>
                    <td>
                        <div class="w-100 text-center d-flex flex-row justify-content-start" style="">
                            {% if action.fklevel.code == "europe" %}
                            <div class="d-inline-block" style="line-height: {{ bmandatory ? 12 : 22 }}px; width: 40px;" data-toggle="tooltip" title="{{action.fklevel.code|capitalize}} action level{% if bmandatory %}, mandatory{% endif %}">
                                <div>
                                    <i class="fas fa-star" style="color: #ff8300;"></i>
                                    <i class="fas fa-star" style="color: #ff8300; margin-left: 1px;"></i>
                                </div>
                                {% if bmandatory %}
                                    <i class="fas fa-lock" style="color: red;"></i>
                                {%endif %}
                            </div>
                            {% elseif action.fklevel.code == "market" %}
                            <div class="d-inline-block" style="line-height: {{ bmandatory ? 12 : 22 }}px; width: 40px;" data-toggle="tooltip" title="{{action.fklevel.code|capitalize}} action level{% if bmandatory %}, mandatory{% endif %}">
                                <div><i class="fas fa-star" style="color: #ff8300;"></i></div>
                                {% if bmandatory %}
                                    <i class="fas fa-lock" style="color: red;"></i>
                                {%endif %}
                            </div>
                            {% else %}
                            <div class="d-inline-block" style="line-height: 12px; width: 40px;" data-toggle="tooltip" title="{{action.fkLevel.code|capitalize}} action level"></div>
                            {% endif %}
                            <div class="d-inline-block">
                                <div class="minibadge-container">
                                    <div style="background-color: #{{action.fkDepartment.color}} !important;" class="minibadge" data-toggle="tooltip" title="{{action.fkDepartment.name|capitalize}}">{{action.fkDepartment.code|upper}}</div>
                                </div>
                                <div class="minibadge-container">
                                    {% if action.partnerContracts|length == 3 %}
                                        <div style="background-color: #2F2F2F !important;" class="minibadge text-uppercase" data-toggle="tooltip" title="{{'all_contracts'|trans}}">{{'all'|trans}}</div>
                                    {% else %}
                                        {%for pc in action.partnerContracts %}
                                            <div style="background-color: #{{pc.color}} !important;" class="minibadge text-uppercase" data-toggle="tooltip" title="{{pc.name|capitalize}}">{{pc.code}}</div>
                                        {% endfor %}
                                    {% endif %}
                                </div> 
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex align-self-center">
                            <div class="align-self-center" style="width: 25px;text-align: center;">
                                <div class='agtlights material-tooltip-email' id='actiontlight' data-toggle='tooltip' title='{{ titlesbytimingperiod[timingperiod][action_company_entity_status] }}'>
                                    <div class='agtlight {{ (condition != 'red' ? 'off' : 'red') }}'></div>
                                    <div class='agtlight {{ (condition != 'amber' ? 'off' : 'amber')}}'></div>
                                    <div class='agtlight {{ (condition != 'green' ? 'off' : 'green')}}'></div>
                                </div>
                            </div>
                            <div class="align-self-center">
                                {% if action_company_entity_status == "started" or action_company_entity_status == "pending" or action_company_entity_status == "finished" %}
                                <i class="fas fa-check d-block {{ condition }}-text"></i>
                                {% endif %}
                                {% if action_company_entity_status == "pending" or action_company_entity_status == "finished" %}
                                <i class="fas fa-check d-block {{ condition }}-text"></i>
                                {% endif %}
                            </div>
                        </div>
                    </td>
                    <td>
                        {% if action_company_entity_status == "finished" %}
                        <div class="pl-3"><i class="fas fa-2x fa-lock green-text cursor-hand" data-toggle='tooltip' title='{{ "validate_actions.action_unvalidate_button"|trans }}'></i></div> 
                        {% endif %}
                        <div class="form-check {{ action_company_entity_status == "finished" ? " d-none" : "" }}">
                            <input type="checkbox" 
                                   class="form-check-input" 
                                   name="actions" 
                                   id="action_{{ action.getRowid() }}"
                                   data-element="{{ action.getRowid() }}" 
                                   {{ (action_company_entity.fkActionStatus.code != "finished" 
                                        and action_company_entity.fkActionStatus.code != "pending" 
                                        or not is_granted("ROLE_MARKET")
                                        or not privileges.canAction({"user": app.user, "plan": plan, "role": "ROLE_VALIDATE", "action": action}))?"readonly":"" }} 
                                   {{ (action_company_entity.fkActionStatus.code == "finished")?"checked":"" }}
                                   data-department="{{action.fkDepartment.rowid}}"
                                   data-partner-contracts="{{action.getPartnerContractsCodeList}}"
                                   >
                            <label class="form-check-label" for="action_{{ action.getRowid() }}"></label>
                            <span class="checked">{{bmandatory}}</span>
                        </div>
                    </td>
                    <td>{{ action.title }}</td>
                    <td>{{ action.description }}</td>
                    <td>{{ action.getTimingStringNormalize() }}</td>
                    <td>{{ action.getNotificationFromString() }}</td>
                    <td>{{ (action_company_entity.fkContact) ? action_company_entity.fkContact.name : "" }}</td>
                </tr>
            {% endfor %}
            {% endif %}
        </tbody>
    </table>

    <form name="actions_choosen" action="" method="post" id="actions_choosen">
        <div class="row">
            {% if (app.user.hasRole("ROLE_MARKET") or app.user.hasRole("ROLE_EUROPE")) and privileges.canAction({"user": app.user, "plan": plan, "role": "ROLE_VALIDATE"}) %}
            <div class="col-md">
                <button data-path="{{ path("update_actions_choosed_validate", {plan_rowid: plan.rowid, company_entity_rowid: company_entity.rowid}) }}" type="submit" id="save_actions" name="save_actions" class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect">{{'choose_actions.save'|trans}}</button>
            </div> 
            {% endif %}
        </div>
    </form>

</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/lib/adminlte.min.js') }}"></script>
<script src="{{ asset('js/market/validateActionsListChoose.js') }}"></script>
<script>
    $("table.custom_datatable").DataTable({
        "ordering": false,
        "paging":   false,
        "columnDefs": [
            { "visible": false, "searchable": false, "targets": [0] },
            { "width": "50px", "targets": [1,2] }
        ]
    });

    $('[data-toggle="tooltip"]').tooltip();
    
</script>
{% endblock %}