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

{% block title %}
	COSAP - Modules
{% 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 module-->
			{% 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 %}
									module</h5><hr>
								{{ include('Actions/Modules/action.html.twig') }}
							</div>
						</div>
					</div>
				</section>
			{% endif %}
			<!-- fin partie pour l'ajout ou la modif d'un module-->
			<!-- début partie pour recherche module-->
			<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-12">
											<div class="form-group position-relative">
												<label for="search_input">label :</label>
												<div class="form-group position-relative">
													<input type="text" 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>
								</form>
							</div>
						</div>
					</div>
				</div>
			</section>
			<!-- fin partie pour recherche module-->


			<section class="row">
				<div class="col-12">
					<div class="card">
						<div class="card-header">
							<h5 style="font-weight: 500;">{% trans %}Liste des modules{% endtrans %}
								<span class="badge badge badge-info badge-pill mr-2">{{ Modules.getTotalItemCount }}</span>
							</h5>
							<div class="heading-elements mt-0">
								{% if app.user and is_granted('ROLE_AJOUTER_MODULE') %}
									<a class="btn btn-cyan btn-sm" href="{{ path('Add_module') }}" 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('Modules_list') }}" title="{% trans %}Actualiser{% endtrans %}">
									<i class="fa fa-refresh"></i>
								</a>
							</div>
						</div>
						<div class="card-body">
							<!-- debut show table -->
							{% if not Modules|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;">Label</th>
                                                                                                
                                                                                                {% if app.user and is_granted('ROLE_MODIFIER_MODULES') %}
                                                                                                    <th style="text-align:center;">Actions</th>
                                                                                                {% endif %}

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

													<td style="text-align:left;">
														{{ module.label }}
													</td>
                                                                                                        {% if app.user and is_granted('ROLE_MODIFIER_MODULES') %}
                                                                                                            <td style="text-align: center; min-width:150px; width:120px;">

                                                                                                                    <span class="dropdown" style="line-height:1.4;border-radius:3px;">
                                                                                                                            <a data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" class="btn btn-sm dropdown-toggle dropdown-menu-right" style="background-color:#00b5b8;color: white">
                                                                                                                                    <i class="fa fa-cogs" title="Actions"></i>
                                                                                                                            </a>
                                                                                                                            <span aria-labelledby="btnSearchDrop31" class="dropdown-menu mt-1" style="min-width: fit-content;">

                                                                                                                                    {% if app.user and is_granted('ROLE_MODIFIER_MODULES') %}
                                                                                                                                            <a class="dropdown-item" href="{{ path('Edit_module',{id:module.id,search_input:search_input,page:page}) }}" title="{% trans %}Modifier{% endtrans %}">
                                                                                                                                                    <i class="fa fa-pencil-square-o" style="color:#00b5b8"></i>
                                                                                                                                            </a>
                                                                                                                                    {% endif %}

                                                                                                                                    {% if app.user and is_granted('ROLE_SUPPRIMER_MODULES') %}
                                                                                                                                            <a class="dropdown-item delete_data" id="delete_data" data-id="{{ module.id }}" data-toggle="modal" data-target="#modal_delete_data" title="{% trans %}Supprimer{% endtrans %}">
                                                                                                                                                    <i class="fa fa-trash-o" style="color:#00b5b8"></i>
                                                                                                                                            </a>
                                                                                                                                    {% endif %}

                                                                                                                            </span>
                                                                                                                    </span>



                                                                                                            </td>
                                                                                                        {% endif %}
												</tr>
											{% endfor %}
										</tbody>
									</table>
									<div class="navigation pull-right" style="margin-left:20px;">
										{{ knp_pagination_render(Modules) }}
									</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="application/javascript" data-main="static/js/main" src="static/js/libs/require/2.1.11/require.js"></script>
    <script type="text/javascript" src="/template/app-assets/fancybox/jquery.fancybox.min.js"></script>

    <script type="text/javascript">

	    $('#module_collaborateurs').select2({closeOnSelect:false});

        $('#dateDebut').bootstrapMaterialDatePicker({weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $('#dateFin').bootstrapMaterialDatePicker({weekStart: 0, time: false, disabledDays: [], lang: 'fr', cancelText: 'Annuler', weekStart: 1});

        $('.summernote').summernote({
            lang: "fr-FR",
            height: 120
        });
        
        $(".word").fancybox({

            'type': 'iframe'

        });
        
        $('.show-fancybox').fancybox();

        {% 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/Modules/ajax/delete.html.twig') %}

{% endblock %}