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

{% block title %}
	Vos clients
{% endblock %}
{% block body %}
	{# {% include 'app/modal.html.twig' %} #}
	<div class="row bg-white rounded p-3">
		<h2>Vos clients</h2>
		<div class="row">
			<div style="display:inline-block">
				<a href="{{ path('app_intermittent_client_new') }}">
					<button class="btn btn-warning picto-item" aria-label="Ajouter un client">
						<i class="fa fa-plus"></i>
						<span>Ajouter</span>
					</button>
				</a>
				<a href="{{ path('app_intermittent_client_archives') }}">
					<button class="btn btn-info picto-item" aria-label="Voir les clients archivés">
						<i class="fa fa-eye"></i>
						<span>Clients archivés ({{ clientsArchives|length }})</span>
					</button>
				</a>
			</div>
		</div><br/><br/>
		<div class="row">
			{% if clients|length > 0 %}
				<table class="table">
					<thead>
						<tr>
							<th>#</th>
							<th>Clients</th>
							<th>Projets</th>
						</tr>
					</thead>
					<tbody>
						{% for client in clients %}
							<tr>
								<td>
									<a href="{{ path('app_intermittent_client_edit', {'id': client.id}) }}">
										<button class="btn btn-info picto-item" aria-label="Modifier les informations client">
											<i class="fa fa-pen"></i>
											<span></span>
										</button>
									</a>
									<a href="{{ path('app_intermittent_client_adresse_facturation', {'id': client.id}) }}">
										<button class="btn btn-success picto-item" aria-label="Gérer les adresses de facturation du client">
											<i class="fa fa-list"></i>
											<span></span>
										</button>
									</a>
									<a href="{{ path('app_intermittent_client_set_archive', {'id': client.id}) }}">
										<button class="btn btn-danger picto-item" aria-label="Archiver le client">
											<i class="fa fa-archive"></i>
											<span></span>
										</button>
									</a>
								</td>
								<td>{{ client.nom }}</td>
								<td>
									<a href="#" class="viewProjets" id="{{client.id}}" name="{{client.nom}}">
										<button class="btn btn-info picto-item" aria-label="Voir les projets du client">
											{% set nbProjets = 0 %}
											{% for projet in client.projets %}
												{% if projet.isActive == true %}{% set nbProjets = nbProjets + 1 %}{% endif %}
											{% endfor %}
											Voir les projets ({{ nbProjets }})
										</button>
									</a>
									<a href="#" class="addProjet" id="{{client.id}}" name="{{client.nom}}">
										<button class="btn btn-success picto-item" aria-label="Ajouter un projet pour ce client">
											<i class="fa fa-plus"></i> Ajouter un projet
											<span></span>
										</button>
									</a>
								</td>
							</tr>

						{% endfor %}
					</tbody>
				</table>
			{% else %}
				{% include 'app/noResult.html.twig' %}
			{% endif %}
		</div>
	</div>
{% endblock %}
{% block javascripts %}
<script type="text/javascript">
$(document).ready(function () {
	$('.addProjet').click(function () {
		var id = this.id;
		var name = this.name;
		$('#modal-title').html("Ajout d'un projet pour le client " + name);
		$('#dataModal').modal("show");
		var url = Routing.generate('app_intermittent_projet_new_by_modal', {
			'id': id
		}, true);

		$.ajax({
			url: url,
			success: function (data) {
				$('#modal_detail').html($(data).html());
				$('#dataModal').modal("show");
			},
			error: function (xhr, ajaxOptions, thrownError) {
				if (xhr.status == 404) {
					$('#modal_detail').html("Aucun enregistrement.");
				}
			}
		});
	});

	$('.viewProjets').click(function () {
		var id = this.id;
		var name = this.name;
		$('#modal-title').html("Liste des projets avec le client " + name);
		$('#dataModal').modal("show");
		var url = Routing.generate('app_intermittent_projet_index_by_modal', {
			'id': id
		}, true);

		$.ajax({
			url: url,
			success: function (data) {
				$('#modal_detail').html($(data).html());
				$('#dataModal').modal("show");
			},
			error: function (xhr, ajaxOptions, thrownError) {
				if (xhr.status == 404) {
					$('#modal_detail').html("Aucun enregistrement.");
				}
			}
		});
	});
});
</script>
{% endblock %}