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

{% block title %}Admin - Projet{% endblock %}

{% block body %}

    {% include 'admin/_header.html.twig' %}


	<section class="about-section">
		<div class="auto-container">

			{% for label, messages in app.flashes %}
				{% for message in messages %}
					<div class="alert alert-{{ label }}" role="alert">
						{{ message }}
					</div>
				{% endfor %}
			{% endfor %}

		{% if tagshow is not empty %}
		
			<div class="row">
				<h2 class="mb-2 text-justify mx-auto">Les Photos du Projet : {{ projet.name }}</h2>
				<table class="table col-11  mx-auto">
					<thead class="thead-light">
						<tr>
							{# <th scope="col" width="50px">Id</th> #}
                            <th scope="col">Photo</th>
                            <th scope="col">Tag</th>
							<th scope="col" width="100px">Actions</th>
						</tr>
					</thead>
					<tbody id="sortable">
						{% for photo in photos %}
							<tr class="ui-state-default" data-photo-id="{{ photo.id }}">
								{# <th scope="row">{{ photo.id }}</th> #}
								<td>
									<a href="{{ asset('uploads/img/' ~ photo.link) }}" class="lightbox-image" data-fancybox="gallery">
										<img src="{{ asset('uploads/img/' ~ photo.link) }}" alt="{{ photo.link }}" style="max-height:50px;max-width:100px;">
									</a>
								</td>
								<td>
								{% if photo.idTag.name is defined %}
									{{ photo.idTag.name }}
								{% endif %}
								</td>
								<td>
									<form method="POST" action="{{ path('photo.delete', {id: photo.id}) }}" onsubmit="return confirm('Êtes-vous sur de vouloir supprimer cette photo ?')">
										<input type="hidden" name="_method" value="DELETE">
										<input type="hidden" name="_token" value="{{ csrf_token('deletePhoto' ~ photo.id) }}">
										<button class="btn btn-danger">Supprimer</button>
									</form>
								</td>
							</tr>
						{% endfor %}

						<tr>

							{{ form_start(form_photo) }}

							<td></td>

							<td>{{ form_row(form_photo.link, {label: false }) }}</td>

							<td>{{ form_row(form_photo.id_tag, {label: false, attr: {placeholder: 'Nom du Tag'} }) }}</td>

							<th style="width:100px;">
								<button class="theme-btn btn-style-three" style="width: 100px;display: flex;justify-content: center;" type="submit" name="submit-form">Envoyer</button>
							</th>

							{{ form_end(form_photo) }}

						</tr>

					</tbody>
				</table>
			</div>

		{% endif %}

			<div class="row mt-5">
				<h2 class="mb-2 text-justify mx-auto">Les Tags</h2>
				<table class="table col-11  mx-auto">
					<thead class="thead-light">
						<tr>
							<th scope="col">Id</th>
							<th scope="col">Nom du Tag</th>
							<th scope="col">Actions</th>
						</tr>
					</thead>
					<tbody>
						{% for tag in tagshow %}
							<tr>
								<th scope="row">{{ tag.id }}</th>
								<td>{{ tag.name }}</td>
								<td>
									<form method="POST" action="{{ path('tag.delete', {pro: projet.id,id: tag.id}) }}" onsubmit="return confirm('Êtes-vous sur de vouloir supprimer ce tag ?')">
										<input type="hidden" name="_method" value="DELETE">
										<input type="hidden" name="_token" value="{{ csrf_token('deleteTag' ~ tag.id) }}">
										<button class="btn btn-danger">Supprimer</button>
									</form>
								</td>
							</tr>
						{% endfor %}

						<tr>

							{{ form_start(form_tag) }}

							<th></th>

							<td>{{ form_row(form_tag.name, {label: false, attr: {placeholder: 'Nom du Tag'} }) }}</td>

							<th style="width:100px;">
								<button class="theme-btn btn-style-three" style="width: 100px;display: flex;justify-content: center;" type="submit" name="submit-form">Envoyer</button>
							</th>

							{{ form_end(form_tag) }}

						</tr>

					</tbody>
				</table>
			</div>


		</div>
	</section>


{% endblock %}

{% block extraScript %}
	<script>
		$(function()
		{
		    $( "#sortable" ).sortable();
		    $( "#sortable" ).disableSelection();
		});
		function getOrder() 
		{
		    var photoOrder = [];
		    $("#sortable tr").each(function(e)
		    {
		        photoOrder.push($(this).attr('data-photo-id'));
		    });
		    
		    $.ajax(
		    {
		    	method:'post',
		    	dataType:'JSON',
		    	url:"{{ path('admin.projet.modifier.ordre') }}",
		    	data:{photoOrder},
		    	success: function(data)
		    	{
		    		console.log('yo');
		    	}

		    });
		}
		$("#sortable").sortable(
		{
		    placeholder: "ui-state-highlight",
		    update: function(event,ui)
		    {
		        getOrder();
		    }
		});
	</script>
{% endblock %}