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

{% block title %}STRATEGIE MAPSI{% endblock %}

{% block headertitle %}
   Plan stratégique
{% endblock %}	
{% block headercreate %}
	<a class="dropdown-item dropdowncreate" href="{{path('axe_create')}}"><b class="bi bi-plus-circle" style="font-size: 1.2rem;"></b>  Nouvel axe</a>
{% endblock %}


{% block body %}
<div class="wrapper wrapper-content animated fadeIn">
	<div class="row">
		<div class="col-lg-12">
			<div class="tabs-container">
				<ul class="nav nav-tabs" role="tablist">
					<li><a class="nav-link active show" data-toggle="tab" href="#tab-liste"> Liste</a></li>
					<li><a class="nav-link" data-toggle="tab" href="#tab-files"> Documents</a></li>
				</ul>
				<div class="tab-content">
					<div role="tabpanel" id="tab-liste" class="tab-pane active show">
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-12">
									<section class="axe">
										<div class="table-responsive">
											<table class="table table-bordered dataTables-axe" >
												<thead>
												<tr>
													<th scope="col">ID</th>
													<th scope="col">Volet stratégique</th>
													<th scope="col">Titre</th>
													<th scope="col">Désignation</th>
													<th scope="col">Action stratégique</th>
													<th scope="col">Action portfolio</th>
												</tr>
												</thead>
												<tbody>
													{% for axe in axes %}
														<article>
															<tr>
																<th scope="row" data-order="{{ axe.id }}"><span class="badge badge-secondary">ID-{{ axe.id }}</span></th>
																<th scope="row">{{ axe.volet.designation | default("N/C")  }}</th>
																<th scope="row" data-order="{{ axe.id }}">{{ axe.title | default("N/C")  }}</th>
																<th scope="row"><a class="" href="{{path('axe_edit',{'id' : axe.id} ) }}">{{ axe.designation | upper }}</a></th>
																<td scope="row">
																	<table class="table table-borderless table-striped">
																	<thead>
																		<tr>
																			<th><small>Code</small></th>
																			<th><small>Désignation</small></th>
																			<th><small>Budget.</small></th>
																			<th><small>Prog.</small></th>
																		</tr>
																	</thead>
																	<tbody>
																			{% for actionstrat in axe.actionstrats %}
																			<tr class="info">
																				<td class="align-middle" style="padding: 0 5px 0 5px !important">
																					<a class="text-dark" href="{{path('axe_edit',{'id' :axe.id} ) }}">
																						<small>ACS-{{ actionstrat.code | default("N/C") }}</small>
																					</a>
																				</td>
																				<td style="padding: 0 5px 0 5px !important">
																					<a class="text-dark" href="{{path('axe_edit',{'id' :axe.id} ) }}">
																						<small>{{ actionstrat.designation |  default("N/C") }}</small>
																					</a>
								
																				</td>
																				<td style="padding: 0 5px 0 5px !important" width=45px class="text-center align-middle small">
																				</td>
																				<td style="padding: 0 5px 0 5px !important" width=40px class="text-center align-middle small">
																				{% set sumj = 0 %}
																				{% set sumu = 0 %}
																				{% for action in actionstrat %}
																					{% set sumj = sumj + action.progression %} 
																					{% set sumu = loop.index0 + 1 %} 
																					{{ action.progression | default("0") }}
																				{% endfor %}
																				{{ sumj | number_format(0, '.', ' ') | default("0") }}%<br>
																				</td>
																			</tr>
																			{% endfor %}
																	</tbody>
																</table>
															
															</td>
															<td scope="row"><button class="btn btn-primary btn-circle" type="button">{{ axe.actions | length }}</button></td>
															</tr>
														</article>
													{% endfor %}
												</tbody>
											</table>
										</div>
									</section>
								</div>
							</div>
						</div>
					</div>
					<div id="tab-files" class="tab-pane">
						<div class="panel-body">
							<div class="row">
								<div class="col-md-12"><h3>Gestionnaire de fichiers</h3></div>
							</div>
							<br>			                                
							<div class="form-group row">				
								<div class="col-sm-12">
									
									<iframe id="myframe" src="{{ path('file_manager', {module:1, conf:'entity', tree:0, extra: {'customer':app.user.customer.id, 'bigentity': 'Axes'}}) }}" width="100%" height="500" frameborder="0"></iframe>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

{% endblock %}


{% block javascripts %}
    <!-- Page-Level Scripts -->
    <script>
        $(document).ready(function(){
	        
            $('.dataTables-axe').DataTable({
                pageLength: 25,
                responsive: true,
                dom: '<"html5buttons"B>lTfgitp',
                buttons: [
                    {extend: 'copy'},
                    {extend: 'csv'},
                    {extend: 'excel', title: 'Axe'},
                    {extend: 'pdf', title: 'Axe'},

                    {extend: 'print',
                     customize: function (win){
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');

                            $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('font-size', 'inherit');
                    }
                    }
                ]

            });

        });

    </script>
{% endblock %}