{% 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 breadcrumb_buttons %}
    <div class="breadcrumb_button" style="display:none">
        <a href="#!" class="waves-effect custom_print_button"><i class="fas fa-print"></i></a>
    </div>
{% endblock %}

{% block body %}

<div class="container-fluid uniqueprintbutton">
    {% if can_validate == 2 %}
        <div>{{ 'actionchoose.pending_valitation'|trans|upper   }}</div>
    {% elseif can_validate == 4 %}
        <div>{{ 'actionchoose.validate'|trans|upper   }}</div>
    {% elseif can_validate == 5 %}
        <div>{{ 'actionchoose.rejected'|trans|upper   }}</div>
    {% endif %}
    {% if plan%}
    <div class="selection_plan">
        <div class="row">
            <div class="col-md-12">
                {% if active_plans is not empty and active_plans|length > 1 %}
                <select id="plan_selection" class="mdb-select md-form">
                    {% for active_plan in active_plans %}
                    <option value="{{active_plan.rowid}}" {% if plan.rowid == active_plan.rowid %}selected="selected"{%endif%} >{{active_plan.title}}</option>
                    {% endfor %}
                </select>
                <label class="mdb-main-label">{{ 'actionchoose.choose_plans'|trans }}</label>
                {% elseif plan %}
                {{plan.title}}
                {% endif %}
            </div>
        </div>
    </div>
    <div class="row mb-3" id="plan_execution_container">
        <div class="col-md-4 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>
                <span class="title">{{ "Mandatory actions"|trans }}</span>
                <div class="d-flex">
                    <i class="far fa-3x fa-lock align-self-baseline mr-3"></i>
                    <span class="info align-self-baseline mr-1">{{ number_mandatory_actions }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-4 px-1">
            <div class="plan_execution_info bg-green small-box mb-0 text-uppercase h-100">
                <div class="icon"><i class="far fa-tasks"></i></div>
                <span class="title mb-1">{{ "Actions currently selected"|trans }}</span>
                <div class="row">
                {% for pc in partner_contracts %}
                    <div class="col text-center"><div class="px-2 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="row">
                    {% for code, number_selected_action_pc in number_selected_actions %}
                    <div class="selected col text-center">
                        <div data-code="{{code}}"><span class="selected small-info">{{ number_selected_action_pc }}</span></div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        <div class="col-md-4 px-1">
            <div class="plan_execution_info small-box mb-0 text-uppercase">
                <div class="icon"><i class="far fa-tasks"></i></div>
                <span class="title mb-1">{{ "Actions needed to complete plan"|trans }}</span>
                <div class="row">
                {% for pc in partner_contracts %}
                    <div class="col text-center"><div class="px-2 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="row">                  
                    {% for code, number_needed_actions_pc in number_needed_actions %}
                    <div class="needed col text-center">
                        <div data-code="{{code}}"><span class="needed small-info">{{ (number_needed_actions_pc > 0)?number_needed_actions_pc:0 }}</span></div>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
    <h5 class="pl-2">{{ 'choose_actions.actions_by_department_and_contract'|trans  }}</h5>
    <div class="row" id="plan_execution_container">
        {% for department in departments %}
            <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 mb-1 text-center">{{department.name}}</h5>
                    <div class="row">
                        <div class="col-md-1 px-2 not_started">
                             <div class="d-flex justify-content-center mb-1">
                                <span class="title">&nbsp;</span>
                            </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 department_selected" data-department="{{department.rowid}}">
                            <div class="d-flex justify-content-center mb-1"><span class="title">Selected</span></div>
                            {% for code, department_action_selected_pc in department.actions_selected %}
                                <div class="mb-1 xsmall-info font-weight-normal" data-code="{{code}}"><span class="selected font-weight-bold">{{ department_action_selected_pc }}</span> {{ 'n_of_m'|trans }} <span class="font-weight-bold">{{ department.actions_needed_max}}</span> ({{ department.actions_needed_min}} {{ 'n_min'|trans }})</div>
                            {% endfor %}
                        </div>
                        <div class="col-md px-2 text-center department_needed" data-department="{{department.rowid}}">
                            <div class="d-flex justify-content-center mb-1"><span class="title">Needed</span></div>
                            {% for code, department_actions_needed_pc in department.actions_needed %}
                                <div class="mb-1 xsmall-info font-weight-normal" data-code="{{code}}"><span class="needed font-weight-bold">{{ (department_actions_needed_pc > 0)?department_actions_needed_pc:0 }}</span> {{ 'n_more'|trans }}</div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        {% 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>{{ 'choose_actions.selected'|trans }}</th>
                <th>{{ 'choose_actions.title'|trans }}</th>
                <th>{{ 'choose_actions.description'|trans }}</th>
                <th>{{ 'choose_actions.timing'|trans }}</th>
                <th>{{ 'choose_actions.warn_on'|trans }}</th>
                <th>{{ 'choose_actions.responsible_person'|trans }}</th>
            </tr>
        </thead>
        <tbody>
            {% if datatable_ajax == false %}
            {% for action in actions %}
            	
                {% set bmandatory = (( action.fklevel.code == "europe" or action.fklevel.code == "market") and action.mandatory == 1) %}
                <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 apc in action.partnerContracts %}
                                            <div style="background-color: #{{apc.color}} !important;" class="minibadge text-uppercase" data-toggle="tooltip" title="{{apc.name|capitalize}}">{{apc.code}}</div>
                                        {% endfor %}
                                    {% endif %}
                                </div> 
                            </div>
                        </div>
                    </td>
                    <td>
                        {% set max_action_reached = 0 %}
                        {% for apc in action.partnerContracts %}
                            {% for key, value in departments[action.fkDepartment.rowid].max_actions_reached_pc %}
                                {% if key == apc.code and value == 1 %}
                                 {% set max_action_reached = 1 %}
                                {% endif %}
                            {% endfor %}
                        {% endfor %}
                        <div class="form-check">
                            <input type="checkbox" 
                                   class="form-check-input" 
                                   name="actions" 
                                   id="action_{{ action.getRowid() }}"
                                   data-element="{{ action.getRowid() }}" 
                                   {{ (bmandatory or ( max_action_reached and not action.checked))?"readonly":"" }} 
                                   {{ (action.checked)?"checked":"" }} 
                                   data-department="{{action.fkDepartment.rowid}}"
                                   data-partner-contracts="{{action.getPartnerContractsCodeList}}"
                                   {{(can_validate == 2 or can_validate == 4)?"disabled":""}}
                                   >
                            <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>

                        <select class="mdb-select md-form select_contacts" name="contacts" searchable="Search here..">
                            <option value="" disabled selected>{{ 'choose_actions.choose_reponsible_person'|trans }}</option>
                            {% for contact in contacts %}
                                <option value="{{ contact.rowid }}" {{ (action.checked and contact.getRowid() == action.contact_id)? "selected" : ""}}>{{ contact.getName() }}</option>
                            {% endfor %}
                        </select>

                    </td>
                </tr>
            {% endfor %}
            {% endif %}
        </tbody>
    </table>

    <form name="actions_choosen" action="" method="post" id="actions_choosen">
        <div class="row">
            
            {% if app.user.hasRole("ROLE_PARTNER") and privileges.canAction({"user": app.user, "plan": plan, "role": "ROLE_CREATE"}) and can_validate != 2 and can_validate != 4%}
            <div class="col-md">
                <a href="{{ path("new_action") }}" type="button" id="new_action" name="new_action" class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect">Add new action</a>
            </div>
            {% endif %}

            <div class="col-md">
                <button data-path="{{ path("update_actions_choosed", {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> 

            {% if app.user.hasRole("ROLE_PARTNER") and (can_validate == 1 or can_validate == 5) %}
                <div class="col-md">
                    <button data-path="{{ path("request_approve_plan_partner", {plan_rowid: plan.rowid, company_entity_rowid: company_entity.rowid}) }}" type="submit" id="validate_plan" name="validate_plan" class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect">{{'choose_actions.request_validation'|trans}}</button>
                </div>
            {% endif %}
            {% if is_granted("ROLE_MARKET") and is_granted("ROLE_APPROVE") and can_validate == 2 and privileges.canAction({"user": app.user, "plan": plan, "role": "ROLE_APPROVE"})%}           
                <div class="col-md">
                    <button data-path="{{ path("approve_plan_partner", {plan_rowid: plan.rowid, company_entity_rowid: company_entity.rowid, plan_approve_status:1}) }}" type="submit" id="approve_plan" name="validate_plan" class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect">{{'choose_actions.approve'|trans}}</button>
                </div>
                <div class="col-md">
                    <button data-path="{{ path("approve_plan_partner", {plan_rowid: plan.rowid, company_entity_rowid: company_entity.rowid, plan_approve_status:0}) }}" type="submit" id="reject_plan" name="validate_plan" class="btn btn-outline-info btn-rounded btn-block z-depth-0 my-4 waves-effect">{{'choose_actions.rejected'|trans}}</button>
                </div>
            {% endif %}
        </div>
    </form>
    {% endif %}
</div>

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/lib/adminlte.min.js') }}"></script>
<script src="{{ asset('js/partner/actionsListChoose.js') }}"></script>
<script>
    $("table.custom_datatable").DataTable({
        "ordering": false,
        "paging":   false,
        "columnDefs": [
            {
                "targets": [ 0 ],
                "visible": false,
                "searchable": false
            }
        ]
        , "dom": 'Bfrtip'
        , "buttons": [
        {
            extend: 'print'
            ,autoPrint: true
            ,exportOptions: {
                columns: [':visible:not(.d-print-none)']
                ,stripHtml: false
            },customize: function ( win ) {
                $(win.document.body).attr("style", "background-color:#FFFFFF !important; border-top: 3px solid #00897b; padding: 25px 15px 15px 15px; margin-top: 15px !important");
                $(win.document.body).find("h1").attr("style", "margin-bottom:30px !important");
                var mdb_selects = $(win.document.body).find( 'div.mdb-select' );
                mdb_selects.each(function(){
                    var options_selected = $(this).find("option:selected");
                    var html_to_insert = "";
                    for(var i = 0; i < options_selected.length; i++){
                        var option_selected = $(options_selected[i]);
                        var value = option_selected.text();
                        html_to_insert += value + ","
                    }
                    $(this).replaceWith(html_to_insert.slice(0,-1));
                })
                $(win.document.body).find( 'select ul' ).css("display", "none")
            }
        }
]
    });

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