{% extends 'default/index.html.twig' %}

{% block heading %}
    {# Entête #}
	<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
		<h1 class="h2">Collaborateurs</h1>
		<div class="btn-toolbar mb-2 mb-md-0">
			<div class="btn-group mr-2">
				<button class="btn btn-sm btn-outline-secondary" id="btnAjouter">Ajouter</button>
				<button class="btn btn-sm btn-outline-secondary">Exporter</button>
			</div>
		</div>
	</div>
{% endblock %}

{% block main %}
	{# Contenu #}
	<div class="row">
		<div class="table-responsive">
			<table class="table table-striped table-condensed">
				<thead>
					<tr>
						<th>Nom</th>
						<th>Prénom</th>
						<th>Poste</th>
						<th>Commentaire</th>
						<th>Véhicule</th>
						<th>#</th>
					</tr>
				</thead>
				<tbody>
					{% for item in collaborateurs %}
						<tr>
							<td>
								<span class="editcollaborateur" data-item="{{ item.uuid }}"><a href="#">{{ item.nom }}</a></span>
							</td>
							<td>{{ item.prenom }}</td>
							<td>{{ item.poste }}</td>
							<td>{{ item.comment | default("") }}</td>
							<td>Aucun</td>
							<td>{% if item.actif %}<i class="bi bi-check fs-2 text-success"></i>{% else %}<i class="bi bi-x fs-2 text-danger"></i>{% endif %}</td>
						</tr>
					{% else %}
						<tr>
							<td colspan="6">Aucun enregistrement</td>
						</tr>
					{% endfor %}
				</tbody>
				<tfooter>
					<tr>
						<td colspan="2"></td>
						<th>Total</th>
						<th colspan="3">{{ collaborateurs|length }}</th>
					</tr>
				</tfooter>
			</table>
		</div>
	</div>
	<script type="module">
        import $ from "jquery";

        $(document).ready(function() {
            $("#btnAjouter").on('click', function () {
                showCollaborateur();
            });

            $(".editcollaborateur").on('click', function () {
                showCollaborateur(this.getAttribute('data-item'));
            });

        });

		function showCollaborateur(item = null) {
            var url = '{{ path('collaborateurs_new') }}';
            if (item != null) {
                url = '{{ path('collaborateurs_edit', {'uuid': '_item_'}) }}';
                url = url.replace('_item_', item);
            }
            $.ajax({
                url: url,
                type: 'GET',
                success: function (data) {
                    $('#defaultmodal').html(data);
					$('#modalcollaborateur').show();
                },
                error: function (error) {
                    console.error('Error:', error);
                }
            });
        }
	</script>
{% endblock %}