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

{% set array_title = {'delais_actions':'délai actions'} %}

{% block title %}
	COSAP -
	{{ array_title[current_menu]  }}
{% endblock %}

{% block stylesheets %}
	{{ parent() }}

	<style type="text/css">
		tbody {
			line-height: 40px;
			font-size: 12px !important;
		}

		.title span {
			font-size: 12px !important;
		}

		.app-contacts .chat-fixed-search {
			/*position: fixed;*/
			z-index: 999;
			background: #FFFFFF;
			width: 300px;
			border-bottom: 1px solid #E4E7ED;
			height: 120px
		}

		.orgchart {
			background: #fff;
		}
		.orgchart td.left,
		.orgchart td.right,
		.orgchart td.top {
			border-color: #aaa;
		}
		.orgchart td > .down {
			background-color: #aaa;
		}
		.orgchart .middle-level .title {
			background-color: #7FC3C0;
		}
		.orgchart .middle-level .content {
			border-color: #7FC3C0;
		}
		.orgchart .product-dept .title {
			background-color: #4682B4;
		}
		.orgchart .product-dept .content {
			border-color: #4682B4;
		}
		.orgchart .rd-dept .title {
			background-color: #993366;
		}
		.orgchart .rd-dept .content {
			border-color: #993366;
		}
		.orgchart .pipeline1 .title {
			background-color: #cbb545;
		}
		.orgchart .pipeline1 .content {
			border-color: #cbb545;
		}
		.orgchart .frontend1 .title {
			background-color: #cc0066;
		}
		.orgchart .frontend1 .content {
			border-color: #cc0066;
		}
		.orgchart .frontend2 .title {
			background-color: #cb25ed;
		}
		.orgchart .frontend2 .content {
			border-color: #cb25ed;
		}

		.orgchart .second-menu-icon {
			transition: opacity 0.5s;
			opacity: 0;
			right: -5px;
			top: -5px;
			z-index: 2;
			color: rgba(68, 157, 68, 0.5);
			font-size: 18px;
			position: absolute;
		}
		.orgchart .second-menu-icon:hover {
			color: #449d44;
		}
		.orgchart .node:hover .second-menu-icon {
			opacity: 1;
		}
		.orgchart .second-menu-icon {
			transition: opacity 0.5s;
			opacity: 0;
			right: -5px;
			top: -5px;
			z-index: 2;
			color: rgba(68, 157, 68, 0.5);
			font-size: 18px;
			position: absolute;
		}
		.orgchart .second-menu-icon:hover {
			color: #449d44;
		}
		.orgchart .node:hover .second-menu-icon {
			opacity: 1;
		}
		.orgchart .node .second-menu {
			display: none;
			position: absolute;
			top: 0;
			right: -70px;
			border-radius: 35px;
			box-shadow: 0 0 10px 1px #999;
			background-color: #fff;
			z-index: 1;
		}
		.orgchart .node .second-menu .avatar {
			width: 60px;
			height: 60px;
			border-radius: 30px;
			float: left;
			margin: 5px;
		}

		.orgchart .node .title .action_vue {
			float: center;
			margin-top: 4px;
			margin-right: 5px;
			margin-left: 2px
		}

		.orgchart .node .title .symbol {
			display: none;
		}

		.table th,
		.table tbody td {
			padding-left: 5px;
			padding-right: 5px;
		}
		.popover {
			z-index: unset;
		}


		.class_blocked_action {
			background-color: #fea2a2;
		}

		.class_to_do__action {
			background-color: #8beda8;
		}

		.class_waiting_action {
			background-color: #fad58e;
		}

		.class_new_action {
			background-color: #84def2;
		}

		.badge-pill {
			padding-right: 0.4em !important;
			padding-left: 0.4em !important;
		}

		.example-wrapper {
			margin: 1em auto;
			max-width: 800px;
			width: 95%;
			font: 18px / 1.5 sans-serif;
		}

		.example-wrapper code {
			background: #F5F5F5;
			padding: 2px 6px;
		}

		/*-------------------------------------------*/
		.alarme_icon {
			box-shadow: 0 0 10px red;
			-webkit-animation-name: clignote_alarme; /*on affecte l'animation clignote à notre bouton*/
			-webkit-animation-duration: 1s; /*on définit la durée de l'animation à 1s */
			-webkit-animation-iteration-count: infinite; /*on dit que l'animation se répétera à l'infini.*/
		}

		@-webkit-keyframes clignote_alarme {
			0% {
				box-shadow: 0 0 10px red;
			}
			50% {
				box-shadow: 0 0 0 red;
			}
			100% {
				box-shadow: 0 0 10px red;
			}
		}

		/*----------------------------------------------*/

		.alarme_clock {
			box-shadow: 0 0 10px rgb(82, 92, 233);
			-webkit-animation-name: clignote_clock; /*on affecte l'animation clignote à notre bouton*/
			-webkit-animation-duration: 1s; /*on définit la durée de l'animation à 1s */
			-webkit-animation-iteration-count: infinite; /*on dit que l'animation se répétera à l'infini.*/
		}

		@-webkit-keyframes clignote_clock {
			0% {
				box-shadow: 0 0 10px rgb(82, 92, 233);
			}
			50% {
				box-shadow: 0 0 0 rgb(82, 92, 233);
			}
			100% {
				box-shadow: 0 0 10px rgb(82, 92, 233);
			}
		}

		/*-------------------------------------------------*/
    .table tbody td {
        padding-top: 5px;
        padding-bottom: 5px;        
    }
	</style>


{% endblock %}

{% block body %}
	{{ parent() }}
	<div class="content-detached content-right">
		<div class="content">
			<div class="content-overlay"></div>
			<!-- debut partie pour l'ajout ou la modif d'un délai-->
			{% if action == "add" or action == "edit" %}
				<section class="row">
					<div class="col-12">
						<div class="card">
							<div class="card-body">
								<h5 style="font-weight: 500;">
									{% if action == "add" %}
										Nouveaux
									{% elseif action == "edit" %}
										Modifier
									{% endif %}
									délais</h5><hr>
								{{ include('Actions/Delais/action.html.twig') }}
							</div>
						</div>
					</div>
				</section>
			{% endif %}
			<!-- fin partie pour l'ajout ou la modif d'un délai-->
			<!-- début partie pour recherche délai-->
			<section class="row">
				<div class="col-12">
					<div class="card">
						<div class="card-body">
						<h5 style="font-weight: 500;">Recherche avancée</h5><hr>
							<div class="bug-list-search-content">
								<form method="get" action="">
									<div class="row">
										<div class="col-6">
											<div class="form-group position-relative">
												<label for="search_input">délai :</label>
												<div class="form-group position-relative">
													<input type="number" id="search-contacts" name="search_input" value="{{ app.request.get('search_input')}}" class="form-control" placeholder="Recherche avancée...">
													<div class="form-control-position">
														<i class="fa fa-search text-size-base text-muted la-rotate-270"></i>
													</div>
												</div>
											</div>
										</div>
										<div class="col-6">
											<div class="form-group position-relative">
												<label for="search_input">Type :</label>
												<select class="select2 select_load" style="width: 100%;" name="search_type" onchange="this.form.submit()">
													<option value="">{% trans %}Choisir un type{% endtrans %}</option>
													{% for key,type in constant('App\\Entity\\DelaisAction::TYPE') %}
														<option value="{{ key }}" {% if app.request.get('search_type') == key %} selected {% endif %}>{{ type }}</option>
													{% endfor %}
												</select>
											</div>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- fin partie pour recherche délai-->


			<section class="row">
				<div class="col-12">
					<div class="card">
						<div class="card-header">
							<h5 style="font-weight: 500;">{% trans %}Liste des délais{% endtrans %}
								<span class="badge badge badge-info badge-pill mr-2">{{ DelaisActions.getTotalItemCount }}</span>
							</h5>
							<div class="heading-elements mt-0">
								{% if app.user and is_granted('ROLE_AJOUTER_DELAIS_ACTIONS') %}
									<a class="btn btn-cyan btn-sm" href="{{ path('Add_delais_action') }}" style=" padding: 7px;">
										<i class="fa fa-plus mr-0"></i>
										{% trans %}nouvel enregistrement{% endtrans %}
									</a>
								{% endif %}
								<a class="btn btn-warning btn-sm" style=" padding: 7px;" href="{{ path('Delais_action_list') }}" title="{% trans %}Actualiser{% endtrans %}">
									<i class="fa fa-refresh"></i>
								</a>
							</div>
						</div>
						<div class="card-body">
							<!-- debut show table -->
							{% if not DelaisActions|length %}

								<div class="alert alert-danger  mb-1 mt-1" role="alert">
									<i class="fa fa-info-circle mr-1"></i>
									Aucun enregistrement trouvé !
								</div>

							{% else %}


								<div class="table-responsive m-t-40" style="min-height: 250px;">
									<table class="display nowrap table table-hover table-bordered" cellspacing="0" width="100%" style="font-size:13.5px;">
										<thead>
											<tr>
												<th style="text-align:left;">délai</th>
												<th style="text-align:center;">Actions</th>

											</tr>
										</thead>
										<tbody style="line-height:40px;">
											{% for delais in DelaisActions %}
												<tr class="rowDetail" id="row{{ delais.id }}" data-id="{{ delais.id }}" {% if selected_row and delais.id == selected_row.id %} style="Background-color:#dcdfdc" {% endif %}>

													<td style="text-align:left;">
														{{ delais.getFullDelais() }}
													</td>
													<td style="text-align: center; min-width:150px; width:120px;">
														{% if app.user and is_granted('ROLE_MODIFIER_DELAIS_ACTIONS') %}
															<a class="btn btn-linkedin btn-sm" href="{{ path('Edit_delais_action',{id:delais.id,search_input:search_input,page:page}) }}" title="{% trans %}Modifier{% endtrans %}">
																<i class="fa fa-pencil-square-o text-white"></i>
															</a>
														{% endif %}
														{% if app.user and is_granted('ROLE_SUPPRIMER_DELAIS_ACTIONS') %}
															<a class="btn btn-danger btn-sm delete_data" id="delete_data" data-id="{{ delais.id }}" data-toggle="modal" data-target="#modal_delete_data" title="{% trans %}Supprimer{% endtrans %}">
																<i class="fa fa-trash-o text-white"></i>
															</a>
														{% endif %}
													</td>
												</tr>
											{% endfor %}
										</tbody>
									</table>
									<div class="navigation pull-right" style="margin-left:20px;">
										{{ knp_pagination_render(DelaisActions) }}
									</div>
								</div>
								<!-- end div table-responsive -->
							{% endif %}

						</div>
					</div>
				</div>
			</section>
		</div>
	</div>
</div>

<!--  start modal suppression data -->

<div id="modal_delete_data" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="myModalLabel" style="color:#4b50fc">{% trans %}Suppression enregistrement{% endtrans %}</h5>
				<a class="btn btn-danger btn-sm" data-dismiss="modal" aria-hidden="true" title="{% trans %}Fermer{% endtrans %}">
					<i class="fa fa-close text-white"></i>
				</a>
			</div>
			<div class="modal-body">
				<p style="color:black;">{% trans %}Voulez vous vraiment supprimer cet enregistrement{% endtrans %}
					?</p>
			</div>
			<form method="post" novalidate>
				<div class="modal-footer" style="display:flex !important;justify-content:space-between;">
					<a class="btn btn-danger waves-effect pull-left btn-sm" data-dismiss="modal" style="color:white;padding: 7px;"><i class="ft-x-square"></i> {% trans %}Annuler{% endtrans %}</a>
					<a class="btn btn-success waves-effect btn-sm" data-token-delete="{{ csrf_token('delete-item') }}" style="color:white;padding: 7px;" id="confirmer_delete"><i class="ft-check-square"></i> {% trans %}Confirmer{% endtrans %}</a>
				</div>
			</form>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<!--  end  modal suppression data -->{% endblock %}{% block javascripts %}
{{ parent() }}

<script type="text/javascript">
	{% for flash_message in app.session.flashBag.get('success') %}

toastr.success('{{ flash_message }}', {
positionClass: 'toast-top-center',
containerId: 'toast-top-center'
});{% endfor %}{% for flash_message in app.session.flashBag.get('info') %}toastr.info('{{ flash_message }}', {
positionClass: 'toast-top-center',
containerId: 'toast-top-center'
});{% endfor %}{% for flash_message in app.session.flashBag.get('warning') %}toastr.warning('{{ flash_message }}', {
positionClass: 'toast-top-center',
containerId: 'toast-top-center'
});{% endfor %}{% for flash_message in app.session.flashBag.get('error') %}toastr.error('{{ flash_message }}', {
positionClass: 'toast-top-center',
containerId: 'toast-top-center'
});{% endfor %}

</script>

{% include('Actions/Delais/ajax/delete.html.twig') %}{% endblock %}