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

{% block title %}
	COSAP - Projets
{% endblock %}

{% block stylesheets %}
	{{ parent() }}
    <link rel="stylesheet" type="text/css" href="/template/app-assets/fancybox/jquery.fancybox.css">

	<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
		}

		.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 projet-->
				{% 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 %}
										projet</h5><hr>
									{{ include('Actions/Projets/action.html.twig') }}
								</div>
							</div>
						</div>
					</section>
				{% endif %}
				<!-- fin partie pour l'ajout ou la modif d'un projet-->
				<!-- début partie pour recherche projet-->
				<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">Intitulé :</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 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\\Projet::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 projet-->

				<section class="row">
					<div class="col-12">
						<div class="card">
							<div class="card-header">
								<h5 style="font-weight: 500;">{% trans %}Liste des projets{% endtrans %}
									<span class="badge badge badge-info badge-pill mr-2">{{ Projets.getTotalItemCount }}</span>
								</h5>
								<div class="heading-elements mt-0">
									{% if app.user and is_granted('ROLE_AJOUTER_PROJET') %}
										<a class="btn btn-cyan btn-sm" href="{{ path('Add_projet') }}" 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('Projets_list') }}" title="{% trans %}Actualiser{% endtrans %}">
										<i class="fa fa-refresh"></i>
									</a>
								</div>
							</div>
							<div class="card-body">
								<!-- debut show table -->
								{% if not Projets|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:center;">Intitulé</th>
													<th style="text-align:center;">Type</th>
													<th style="text-align:center;">Responsable technique</th>
													<th style="text-align:center;">Responsable commercial</th>
													<th style="text-align:center;">Actions</th>

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

														<td style="text-align:center;">
															{{ projet.intitule }}
														</td>
														<td style="text-align:center;">

															{{ constant('App\\Entity\\Projet::TYPE')[constant('App\\Entity\\Projet::'~projet.type)] }}
														</td>
														<td style="text-align:center;">
															{{ projet.responsableTechnique }}
														</td>
														<td style="text-align:center;">
															{{ projet.responsableCommercial }}
														</td>
														<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_PROJETS') %}
																		<a class="dropdown-item" href="{{ path('Edit_projet',{id:projet.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_AFFICHER_PROJETS') %}
																		<a class="dropdown-item show_modules_projet" id="modules_projet" data-id="{{ projet.id }}" data-page="{{ page }}" data-toggle="modal" data-target="#modal_module_projet" title="{% trans %}Les modules{% endtrans %}">
																			<i class="fa fa-sitemap" style="color:#00b5b8"></i>
																		</a>
																	{% endif %}

																	{% if app.user and is_granted('ROLE_AJOUTER_PIECESJOINTES_PROJET') %}
																		<a class="dropdown-item pieces_jointes_projet" id="pieces_jointes_projet" data-id="{{ projet.id }}" data-page="{{ page }}" data-toggle="modal" data-target="#modal_piecesJointes_projet" title="{% trans %}Les pièces-jointes{% endtrans %}">
																			<i class="fa fa-paperclip" style="color:#00b5b8"></i>
																		</a>
																	{% endif %}

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

																</span>
															</span>


															
														</td>
													</tr>
												{% endfor %}
											</tbody>
										</table>
										<div class="navigation pull-right" style="margin-left:20px;">
											{{ knp_pagination_render(Projets) }}
										</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 -->

<!--  start modal show modules projet -->

<div id="modal_module_projet" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static" style="overflow: hidden;">
	<div class="modal-dialog modal-lg">
		<div class="modal-content" style="max-height: calc(100vh - 35px);">
			<div class="modal-header">
				<h5 class="modal-title text-primary" id="myLargeModalLabel">{% trans %}Modules projet{% 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" style="overflow: hidden;overflow-y: auto;" >

				<div id="loading_module" style="position:absolute; left:45%; top:30%;">
					<div>
						<img src="{{ asset('template/app-assets/images/icons/loading.gif')}}" height="70"/>
					</div>
				</div>

				<div class="row" id="modules_content" style="visibility: hidden;">
					<div class="col-md-12">
						<div class="col-md-12" style="margin-top: 10px;margin-bottom: 10px;">
							<div class="form-group list-group">
							    <div class="card" id="formNouvModal" style="display: none;">
									<div class="card-body">
										<div class="row">
											<div class="col-md-12">
												<h6 class="modal-title text-primary"> Nouveau module </h6>
												<div class="form-group mt-1">

													<label for="input3">label :
													<span class=" text-danger">*</span>
													</label>

													<input type="text" class="form-control" id="labelmodule" name="labelmodule" required>

												</div>
												
												<form method="post" novalidate>
													<div class="row" id="action_bar" style="margin-bottom: 20px;">

														<div class="col-md-12">

															<a class="btn btn-danger waves-effect pull-left text-white btn-sm" style=" padding: 7px;" onclick="showNewModule('none')"><i class="ft-x-square"></i> {% trans %}Annuler{% endtrans %}</a>
                                                                                                                        
															<a class="btn btn-success waves-effect pull-right text-white btn-sm" style="color:white;margin: 0;padding:7px;" data-token-ajout="{{ csrf_token('ajout-module') }}" id="confirmer_ajout"><i class="ft-check-square"></i> {% trans %}Enregistrer{% endtrans %}</a>

														</div>

													</div>

													<hr>

												</form>	
											</div>
										</div>
									</div>
								</div>
								
								
							    <div class="card">
									<div class="card-body">
									    <div class="row">
											<div class="col-md-12">
												<label style="width: 100%" for="oldselectmodules">Liste modules :

												   {% if app.user and is_granted('ROLE_MODIFIER_PROJETS') %}
												   
												   		<a class="btn btn-cyan text-white btn-sm pull-right" onclick="showNewModule('block')" style=" padding: 7px;">
															<i class="fa fa-plus mr-0" aria-hidden="true"></i> nouvel enregistrement									
														</a>
															
													{% endif %}

												</label>
											</div>
											
											<div class="col-md-12">	
												<select style="width: 100%" id="selectmodules" class="select2 form-group" placeholder="Selectionnez un ou plusieurs modules" multiple="true" {% if not(app.user) or not(is_granted('ROLE_MODIFIER_PROJETS')) %} disabled {% endif %}></select>
											</div>
										</div>	
									</div>
								</div>

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

				</div>
			</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>
                                        {% if app.user and is_granted('ROLE_MODIFIER_PROJETS') %}
					<a class="btn btn-success waves-effect pull-right btn-sm" style="color:white;margin: 0;padding:7px;" data-token-affect="{{ csrf_token('affect-modules') }}" id="confirmer_affectation_modules"><i class="ft-check-square"></i> {% trans %}Confirmer{% endtrans %}</a>
                                        {% endif %}
				</div>
			</form>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!--  end modal show modules projet -->
</div>

<!--  end modal show modules projet -->

<!--  start modal suppression data -->

<div id="modal_piecesJointes_projet" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-keyboard="false" data-backdrop="static" style="overflow: hidden;">
	<div class="modal-dialog modal-lg">
		<div class="modal-content" style="max-height: calc(100vh - 35px);">
			<div class="modal-header">
				<h5 class="modal-title" id="myModalLabel" style="color:#4b50fc">{% trans %}Pièces jointes{% 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>
			<form method="post" class="form-validate-summernote form-disable" id="form_add_attach_project" validate="validate" enctype="multipart/form-data" style="overflow: hidden;overflow-y: auto;" role="form">
				<div class="modal-body">
					<div id="loading_attachements" style="position:absolute; left:45%; top:30%;">
						<div>
						<img src="{{ asset('template/app-assets/images/icons/loading.gif')}}" height="70"/>
						</div>
					</div>

					<div class="row" id="attachements_content" style="visibility: hidden;">
						<div class="col-md-12">
							<div class="col-md-12" style="margin-top: 10px;margin-bottom: 10px;">
								<div class="form-group list-group">
									<div class="card" id="formNouvAttachModal" style="display: none;">
										<div class="card-body">
											<div class="row">
												<div class="col-md-12">
													<h6 class="modal-title text-primary"> Nouvelle(s) pièce(s)-jointe(s) </h6>
													<div class="pl-2 pr-2" style="border:solid 2px black;">
														<div class="listeFilesProject" id="attachesProject" ></div>
														<div class="mb-2 mt-2">
															<button id="AddFilesProject" type="button" style=" padding: 7px;" class="btn mr-1 mb-1 btn-outline-success btn-sm">
															<i class="fa fa-plus"></i>
															{% trans %}Ajouter fichier{% endtrans %}
															</button>
														</div>
													</div>

													<hr>
													
													<form method="post" novalidate>
														<div class="row" style="margin-bottom: 20px;">

															<div class="col-md-12">

																<a class="btn btn-danger waves-effect pull-left text-white btn-sm" style=" padding: 7px;" onclick="showNewAttach('none')"><i class="ft-x-square"></i> {% trans %}Annuler{% endtrans %}</a>
																<a class="btn btn-success waves-effect pull-right text-white btn-sm" style="color:white;margin: 0;padding:7px;" id="confirmer_ajout_attach_projet"><i class="ft-check-square"></i> {% trans %}Enregistrer{% endtrans %}</a>

															</div>

														</div>

													</form>	
												</div>
											</div>
										</div>
									</div>
									
									
									<div class="card">
										<div class="card-body">
											<div class="row">
												<div class="col-md-12">
													<label style="width: 100%" for="oldselectattach">Liste pièces jointes :
													
														<a class="btn btn-cyan text-white btn-sm pull-right" onclick="showNewAttach('block')" style=" padding: 7px;">
															<i class="fa fa-plus mr-0" aria-hidden="true"></i> nouvel enregistrement									
														</a>
																
													</label>
												</div>
												
												<div class="col-md-12" id="contentOldAttach">	
													
												</div>
											</div>	
										</div>
									</div>

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

					</div>
				</div>
			</form>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>

<!--  end  modal suppression data -->


<!--  debut  modal suppression file -->
<div id="modal_delete_fichier_projet" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

	<div class="modal-dialog">

		<div class="modal-content">

			<div class="modal-header">

				<h5 class="modal-title" id="myModalLabel" style="color:#4b50fc">Suppression fichier</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;">Voulez vous vraiment supprimer ce fichier ?</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>
						Annuler</a>

					<a class="btn btn-success waves-effect btn-sm" data-token-file-projet="{{ csrf_token('delete-file-projet') }}" style="color:white;padding:7px;" id="confirmer_delete_fichier_projet">
						<i class="ft-check-square"></i>
						Confirmer</a>

				</div>

			</form>

		</div>

		<!-- /.modal-content -->

	</div>

	<!-- /.modal-dialog -->

</div>
<!-- /.modal delete file action -->



{% endblock %}

{% block javascripts %}
{{ parent() }}

    <script type="text/javascript" src="/template/app-assets/fancybox/jquery.fancybox.min.js"></script>

    <script type="text/javascript">

	    $('#projet_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/Projets/ajax/delete.html.twig') %}
{% include('Actions/Projets/ajax/modules.html.twig') %}
{% include('Actions/Projets/ajax/pieces_jointes.html.twig') %}

{% endblock %}