{% extends 'layout.twig' %}

{% import 'messagesysteme.twig' as msgSyst %}

{% block content %}
	<div class="row">
		<div class="col col-md-12">
			<div class="callout callout-info">{{trad.admin_type_explications}}</div>

			{% if listeManquant != '' %}
				{{ msgSyst.messageAlerte(trad.type_resa_manquant_titre, trad.type_resa_manquant_msg ~ listeManquant) }}
            {% elseif listeManquant == ' ' %}
                {{ msgSyst.messageAlerte(trad.type_resa_manquant_titre, trad.type_resa_vide_msg) }}
			{% endif %}

			<div class="box">
				<div class="box-header">
					<h3 class="box-title">{{trad.admin_type}}</h3> <a class="btn pull-right bg-green"href="?p=admin_type_modify&id=0">{{trad.display_add_type}}</a>
				</div>
				<!-- /.box-header -->
				<div class="box-body no-padding">
				  <table class="table table-striped">
					<tr>
					  <th style="width: 10px">{{trad.type_num}}</th>
					  <th>{{trad.type_name}}</th>
					  <th style="width: 20px">{{trad.type_color}}</th>
					  <th>{{trad.type_order}}</th>
					  <th>{{trad.disponible_pour}}</th>
					  <th>{{trad.action}}</th>
					</tr>
					{% for type in types %}
						<tr>
							<td>{{type.type_letter}}</td>
							<td>{{type.type_name}}</td>
							<td style="background-color:{{type.couleurhexa}};color:{{type.couleurtexte}};">Texte</td>
							<td>{{type.order_display}}</td>
							<td>
							{% if type.disponible == 2 %}
								{{trad.all}}
							{% elseif type.disponible == 3 %}
								{{trad.gestionnaires_et_administrateurs}}
							{% elseif type.disponible == 5 %}
								{{trad.only_administrators}}
							{% endif %}
							</td>
							<td>
								<a href="?p=admin_type_modify&id_type={{type.id}}" class="btn btn-info btn-md"><i class="icon fa fa-edit"></i></a> 
								<button type="button" class="btn btn-warning btn-md" data-bs-toggle="modal" data-bs-target="#modal-warning" data-texte="{{trad.confirm_del}} : {{type.type_letter}}" data-idsup="{{type.id}}"><i class="icon fa fa-trash"></i></button>
							</td>
						</tr>
					{% endfor %}
				  </table>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="modal-warning" style="display: none;" aria-hidden="true">
		<form action="?p=admin_type" id="formmodal">
		  <div class="modal-dialog">
			<div class="modal-content bg-warning">
			  <div class="modal-header">
				<h4 class="modal-title">{{trad.confirm_del}}</h4>
				<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
				  <span aria-hidden="true">×</span>
				</button>
			  </div>
			  <div class="modal-body">
				<span class="modaltexte" id="modaltexte"></span><span class="modalidsup" id="modalidsup" hidden></span>
			  </div>
			  <div class="modal-footer justify-content-between">
				  <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">{{trad.NO}}</button>
				  <button type="submit" id="liensup" class="btn btn-outline-dark">{{trad.YES}}</button>
			  </div>
			</div><!-- /.modal-content -->
		  </div><!-- /.modal-dialog -->
		</form>
	  </div><!-- /.modal -->
{% endblock %}

{% block javascript %}
	<script>
		// Modal
		$('#modal-warning').on('show.bs.modal', function (event) {
			var button = $(event.relatedTarget) // Button that triggered the modal
			var idasup = button.data('idsup')// Extract info from data-* attributes
			var texte = button.data('texte')
		    // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
		    // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
		    var modal = $(this)
		    modal.find('.modalidsup').text(idasup)
			modal.find('.modaltexte').text(texte)
		})

		$(function(){
			$('#formmodal').submit(function(e) {
			  e.preventDefault()
			  var $form = $(this)
			  var v=document.getElementById('modalidsup').innerHTML
			  $.post($form.attr('action'), $form.serialize())
			  .done(function(data) {
				$('#html').html(data);
				$('#modal-warning').modal('hide');
				document.location.href='?p=admin_type&type_del='+v+'&action_del=yes&jsconfirmed=1';
			  })
			  .fail(function() {
				alert('Une erreur est survenue : GRRJS')
			  })
			})
		})
	</script>
{% endblock %}