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

			<div class="row">
				<h2 class="mb-2 text-justify mx-auto">Les Projets</h2>
				<table class="table col-11  mx-auto">
					<thead class="thead-light">
						<tr>
							<th scope="col" width="50px">Id</th>
							<th scope="col">Nom du Projet</th>
                            <th scope="col">Catégorie</th>
                            <th scope="col" width="200px">Affiche</th>
							<th scope="col" width="100px">Actions</th>
						</tr>
					</thead>
					<tbody id="sortable">
						{% for projet in projetshow %}
							<tr class="ui-state-default" data-projet-id="{{ projet.id }}">
								<th scope="row">{{ projet.id }}</th>
								<td>
									<a href="{{ path('admin.projet.show', {id: projet.id}) }}">{{ projet.name }}</a>
								</td>
								<td>{{ projet.idCategory.name }}</td>
								<td>
									<a href="{{ asset('uploads/img/' ~ projet.cover) }}" class="lightbox-image" data-fancybox="gallery">
										<img src="{{ asset('uploads/img/' ~ projet.cover) }}" alt="{{ projet.cover }}" style="max-height:50px;max-width:100px;">
									</a>
								</td>
								<td>
									<form method="POST" action="{{ path('projet.delete', {id: projet.id}) }}" onsubmit="return confirm('Êtes-vous sur de vouloir supprimer ce projet ?')">
										<input type="hidden" name="_method" value="DELETE">
										<input type="hidden" name="_token" value="{{ csrf_token('deleteProject' ~ projet.id) }}">
										<button class="btn btn-danger">Supprimer</button>
									</form>
								</td>
							</tr>
						{% endfor %}

						<tr>

							{{ form_start(form_projet) }}

							<td></td>

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

							<td>{{ form_row(form_projet.id_category, {label: false, attr: {placeholder: 'Nom de la Catégorie'} }) }}</td>

							<td>{{ form_row(form_projet.cover, {label: false }) }}</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_projet) }}

						</tr>

					</tbody>
				</table>

			</div>

			<div class="row mt-5">
				<h2 class="mb-2 text-justify mx-auto">Les Catégories</h2>
				<table class="table col-11  mx-auto">
					<thead class="thead-light">
						<tr>
							<th scope="col">Id</th>
							<th scope="col">Nom de la Catégorie</th>
							<th scope="col">Actions</th>
						</tr>
					</thead>
					<tbody>
						{% for categorie in categoryshow %}
							<tr>
								<th scope="row">{{ categorie.id }}</th>
								<td>{{ categorie.name }}</td>
								<td>
									<form method="POST" action="{{ path('caterory.delete', {id: categorie.id}) }}" onsubmit="return confirm('Êtes-vous sur de vouloir supprimer cette catégorie ?')">
										<input type="hidden" name="_method" value="DELETE">
										<input type="hidden" name="_token" value="{{ csrf_token('deleteCategory' ~ categorie.id) }}">
										<button class="btn btn-danger">Supprimer</button>
									</form>
								</td>
							</tr>
						{% endfor %}

						<tr>

							{{ form_start(form_category) }}

							<th></th>

							<td>{{ form_row(form_category.name, {label: false, attr: {placeholder: 'Nom de la Catégorie'} }) }}</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_category) }}

						</tr>

					</tbody>
				</table>

			</div>


		</div>
	</section>


{% endblock %}

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

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