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

{% block title %}Len's Backoffice - Reparations
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="/css/reparations.css">
{% endblock %}

{% block header %}

	<div class="submenu">
		<div class="d-flex flex-column item">

			<a href="{{path('reparations',{submenu : 'processing'})}}" class="p-3 border  text-white {% if submenu == 'processing' %}border-3 border-dark{% endif %}">
				<img src="/img/process.svg" alt="processing" width="50">
				<div>A traiter ({{statusRep.find(3).getReparations() | length}})</div>
			</a>
			<a href="{{path('reparations',{submenu : 'diag'})}}" class="p-3 border  {% if submenu == 'diag' %}border-3 border-dark{% endif %}">
				<img src="/img/magnify.svg" alt="processing" width="50">
				<div>Diagnostique ({{statusRep.find(12).getReparations() | length}})</div>
			</a>
		</div>

		<div class="d-flex flex-column item">
			<a href="{{path('reparations',{submenu : 'devis_waiting'})}}" class="p-3 border  {% if submenu == 'devis_waiting' %}border-3 border-dark{% endif %}">
				<img src="/img/file-earmark.svg" alt="devis" width="50">
				<div>Devis ({{devisRepo.findRepByStatus(13) | length}})</div>

			</a>

			<a href="{{path('reparations',{submenu : 'devis_send'})}}" class="p-3 border  {% if submenu == 'devis_send' %}border-3 border-dark{% endif %}">
				<img src="/img/send.svg" alt="devis" width="50">
				<div>Devis Envoyé ({{ (devisRepo.findRepByStatus(25)  | length) -  devisRepo.countLongWaiting() }})</div>

			</a>
			<a href="{{path('reparations',{submenu : 'devis_long'})}}" class="p-3 border  {% if submenu == 'devis_long' %}border-3 border-dark{% endif %}">
				<img src="/img/send.svg" alt="devis" width="50">
				<div>Devis Envoyé > 1 mois ({{devisRepo.countLongWaiting()  }})</div>
			</a>
			<a href="{{path('reparations',{submenu : 'devis_accept'})}}" class="p-3 border  {% if submenu == 'devis-accept' %}border-3 border-dark{% endif %}">
				<img src="/img/file-earmark.svg" alt="devis" width="50">
				<div>Devis accepté({{devisRepo.findRepByStatus(14) | length}})</div>
			</a>
			<a href="{{path('reparations',{submenu : 'devis_deny'})}}" class="p-3 border  {% if submenu == 'devis_deny' %}border-3 border-dark{% endif %}">
				<img src="/img/file-earmark.svg" alt="devis" width="50">
				<div>Devis refusé({{devisRepo.findRepByStatus(4) | length }})</div>

			</a>
		</div>


		<div class="d-flex flex-column">
			<div class="d-flex justify-content-center">
			<a href="{{path('reparations',{submenu : 'all'})}}" class="p-3 border  {% if submenu == 'all' %}border-3 border-dark{% endif %}">
				<img src="/img/tools.svg" alt="tools" width="50">
				<div>Toutes les Réparations ({{countRep}})</div>
			</a>
			</div>
			<div class="submenu">
				<a href="{{path('reparations',{submenu : 'progress'})}}" class="p-3 border  {% if submenu == 'progress' %}border-3 border-dark{% endif %}">
					<img src="/img/tools.svg" alt="reparation" width="50">
					<div>Reparation en cours ({{statusRep.find(16).getReparations() | length}})</div>

				</a>
				<a href="{{path('reparations',{submenu : 'waiting'})}}" class="p-3 border  {% if submenu == 'waiting' %}border-3 border-dark{% endif %}">
					<img src="/img/pause.svg" alt="pause" width="50">
					<div>En attente ({{ countWaiting}})</div>

				</a>
				<div class="d-flex flex-column item">

					<a href="{{path('reparations',{submenu : 'finish'})}}" class="p-3 border  {% if submenu == 'finish' %}border-3 border-dark{% endif %}">
						<img src="/img/check.svg" alt="check" width="50">
						<div class="ms-3">Reparation terminée ({{ (statusRep.find(15).getReparations() | length) - repRepo.countLongFinish() }})</div>

					</a>
					<a href="{{path('reparations',{submenu : 'finish_long'})}}" class="p-3 border  {% if submenu == 'finish_long' %}border-3 border-dark{% endif %}">
						<img src="/img/check.svg" alt="check" width="50">
						<div class="ms-3">Reparation terminée > 1 mois ({{ repRepo.countLongFinish()}})</div>


					</a>
					<a href="{{path('reparations',{submenu : 'cancel'})}}" class="p-3 border  {% if submenu == 'cancel' %}border-3 border-dark{% endif %}">
						<img src="/img/cancel.svg" alt="cancel" width="50">
						<div class="ms-3">Reparation refusée ({{statusRep.find(4).getReparations() | length}})</div>

					</a>
					<a href="{{path('reparations',{submenu : 'recycle'})}}" class="p-3 border  {% if submenu == 'recycle' %}border-3 border-dark{% endif %}">
						<img src="/img/recycle.svg" alt="recycle" width="50">
						<div class="ms-3">Equipement recyclé ({{statusRep.find(26).getReparations() | length}})</div>

					</a>

				</div>
				<a href="{{path('reparations',{submenu : 'out'})}}" class="p-3 border  {% if submenu == 'waiting' %}border-3 border-dark{% endif %}">
					<img src="/img/shipping.svg" alt="sortie" width="50">
					<div>Reparation sortie ({{ statusRep.find(22).getReparations() | length}})</div>


				</a>
			</div>

		</div>


	</div>
{% endblock %}

{% block drawer_button %}
	<button id="drawer_button" class="btn btn-info m-3" onclick="openSubmenuDrawer()">
		Sous-Menu
	</button>
{% endblock %}

{% block body %}
	<div id="drawer">
		<button onclick="closeSubmenuDrawer()">
			<img src="/img/cross.svg" alt="" width="30">
		</button>
		<a href="{{path('reparations',{submenu : 'all'})}}" class="p-3 border  {% if submenu == 'all' %}border-3 border-dark{% endif %}">
			<img src="/img/tools.svg" alt="tools" width="50">
			<div>Toutes les Réparations ({{countRep}})</div>
		</a>
		<a href="{{path('reparations',{submenu : 'processing'})}}" class="p-3 border  text-white {% if submenu == 'processing' %}border-3 border-dark{% endif %}">
			<img src="/img/process.svg" alt="processing" width="50">
			<div>A traiter ({{statusRep.find(3).getReparations() | length}})</div>
		</a>
		<a href="{{path('reparations',{submenu : 'diag'})}}" class="p-3 border  {% if submenu == 'diag' %}border-3 border-dark{% endif %}">
			<img src="/img/magnify.svg" alt="processing" width="50">
			<div>Diagnostique ({{statusRep.find(12).getReparations() | length}})</div>
		</a>


		<a href="{{path('reparations',{submenu : 'devis_waiting'})}}" class="p-3 border  {% if submenu == 'devis_waiting' %}border-3 border-dark{% endif %}">
				<img src="/img/file-earmark.svg" alt="devis" width="50">
				<div>Devis ({{devisRepo.findRepByStatus(13) | length}})</div>

			</a>

			<a href="{{path('reparations',{submenu : 'devis_send'})}}" class="p-3 border  {% if submenu == 'devis_send' %}border-3 border-dark{% endif %}">
				<img src="/img/send.svg" alt="devis" width="50">
				<div>Devis Envoyé ({{ (devisRepo.findRepByStatus(25)  | length) -  devisRepo.countLongWaiting() }})</div>

			</a>
			<a href="{{path('reparations',{submenu : 'devis_long'})}}" class="p-3 border  {% if submenu == 'devis_long' %}border-3 border-dark{% endif %}">
				<img src="/img/send.svg" alt="devis" width="50">
				<div>Devis Envoyé > 1 mois ({{devisRepo.countLongWaiting()  }})</div>
			</a>
			<a href="{{path('reparations',{submenu : 'devis_accept'})}}" class="p-3 border  {% if submenu == 'devis-accept' %}border-3 border-dark{% endif %}">
				<img src="/img/file-earmark.svg" alt="devis" width="50">
				<div>Devis accepté({{devisRepo.findRepByStatus(14) | length}})</div>
			</a>
			<a href="{{path('reparations',{submenu : 'devis_deny'})}}" class="p-3 border  {% if submenu == 'devis_deny' %}border-3 border-dark{% endif %}">
				<img src="/img/file-earmark.svg" alt="devis" width="50">
				<div>Devis refusé({{devisRepo.findRepByStatus(4) | length }})</div>

			</a>


		<a href="{{path('reparations',{submenu : 'progress'})}}" class="p-3 border  {% if submenu == 'progress' %}border-3 border-dark{% endif %}">
			<img src="/img/tools.svg" alt="reparation" width="50">
			<div>Reparation en cours ({{statusRep.find(16).getReparations() | length}})</div>

		</a>
		<a href="{{path('reparations',{submenu : 'waiting'})}}" class="p-3 border  {% if submenu == 'waiting' %}border-3 border-dark{% endif %}">
			<img src="/img/pause.svg" alt="pause" width="50">
			<div>En attente ({{ countWaiting}})</div>

		</a>

		<a href="{{path('reparations',{submenu : 'finish'})}}" class="p-3 border  {% if submenu == 'finish' %}border-3 border-dark{% endif %}">
						<img src="/img/check.svg" alt="check" width="50">
						<div class="ms-3">Reparation terminée ({{ (statusRep.find(15).getReparations() | length) - repRepo.countLongFinish() }})</div>

					</a>
					<a href="{{path('reparations',{submenu : 'finish_long'})}}" class="p-3 border  {% if submenu == 'finish_long' %}border-3 border-dark{% endif %}">
						<img src="/img/check.svg" alt="check" width="50">
						<div class="ms-3">Reparation terminée > 1 mois ({{ repRepo.countLongFinish()}})</div>


					</a>
		<a href="{{path('reparations',{submenu : 'cancel'})}}" class="p-3 border  {% if submenu == 'cancel' %}border-3 border-dark{% endif %}">
			<img src="/img/cancel.svg" alt="cancel" width="50">
			<div class="ms-3">Reparation refusée ({{statusRep.find(4).getReparations() | length}})</div>

		</a>
		<a href="{{path('reparations',{submenu : 'recycle'})}}" class="p-3 border  {% if submenu == 'recycle' %}border-3 border-dark{% endif %}">
			<img src="/img/recycle.svg" alt="recycle" width="50">
			<div class="ms-3">Equipement recyclé ({{statusRep.find(26).getReparations() | length}})</div>

		</a>

		<a href="{{path('reparations',{submenu : 'out'})}}" class="p-3 border  {% if submenu == 'waiting' %}border-3 border-dark{% endif %}">
			<img src="/img/shipping.svg" alt="sortie" width="50">
			<div>Reparation sortie ({{ statusRep.find(22).getReparations() | length}})</div>


		</a>


	</div>
	<div class="mx-3 ">
		<div class="d-flex  sticky-top bg-white pt-1"><input class="form-control search " id="search" placeholder="Search" autocomplete="off" value="{{ q }}">
			<a class="btn btn-success" id="createReparationButton" href="{{path('reparation.new')}}">
				<img src="/img/plus.svg" alt="plus" width="40">
			</a>
		</div>


		<table class="table mt-3">
			<thead>
				<tr class="text-center">
					<td></td>
					<td></td>
					<td>Date de création</td>
					{% if 'devis' not in submenu %}
						<td>
							<div class='d-flex align-items-center'>

								<div>Temps</div>

								{% include "utils/sort_row.html.twig" with {col : 'temps'} %}
							</div>
						</td>


					{% endif %}

					<td>Client</td>
					<td>Ref Réparation</td>
					<td>Ref devis</td>
					<td>Montant</td>
					<td>Materiel</td>
					<td>Problème</td>
					<td>Status</td>
					<td>Casier</td>
					<td></td>

				</tr>
			</thead>
			<tbody id='tbody'></tbody>
		</table>

	</div>
	{% include 'utils/templates/modals.html.twig' %}
	{% include 'CRUD/livraison/modal.html.twig' with {type : 'rep'} %}
	
	<!-- Modal Printing -->
	<div class="modal fade" id="modalPrinting" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Imprimer</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div>
					<a href="{{path('reparation.print',{submenu : 'entree'})}}" target="_blank" class="print-link">
						<img src="/img/printer.svg" alt="printer" width="40">
						<p>Bon d'entrée</p>
					</a>
					<a href="{{path('reparation.print',{submenu : 'diag'})}}" target="_blank" class="print-link">
						<img src="/img/printer.svg" alt="printer" width="40">
						<p>Diagnostique</p>
					</a>
					{% if submenu in ['progress'] %}
						<a href="{{path('reparation.print',{submenu : 'devisOnce'})}}" target="_blank" class="print-link">
							<img src="/img/printer.svg" alt="printer" width="40">
							<p>Devis</p>
						</a>


					{% else %}

						<a href="{{path('reparation.print',{submenu : 'devis'})}}" target="_blank" class="print-link">
							<img src="/img/printer.svg" alt="printer" width="40">
							<p>Devis</p>
						</a>
					{% endif %}
					<a href="{{path('reparation.print',{submenu : 'invoice'})}}" target="_blank" class="print-link">
						<img src="/img/printer.svg" alt="printer" width="40">
						<p>Facture</p>
					</a>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Fermer</button>

				</div>
			</div>
		</div>
	</div>

	<!-- Modal edit  reparation-->
	<div class="modal fade" id="editRepModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Modification Réparation</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>

				<div>
					<a href="{{path('reparation.edit',{submenu : 'entree'})}}" class="print-link">
						<img src="/img/edit.svg" alt="edit" width="40">
						Bon d'entrée

					</a>

					<a href="{{path('reparation.edit',{submenu : 'diag'})}}" class="print-link">


						<img src="/img/edit.svg" alt="edit" width="40">
						Diagnostic


					</a>
					{% if submenu in ['progress','finish'] or 'devis' in submenu %}
						<a href="{{path('reparation.edit',{submenu : 'devis'})}}" class="print-link">


							<img src="/img/edit.svg" alt="edit" width="40">
							Devis


						</a>

					{% endif %}


				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
				</div>


			</div>
		</div>
	</div>
	<!-- Modal Info devis-->
	<div class="modal fade" id="infosRepModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

		<div class="modal-dialog infos">
			<div class="modal-content w-150">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Informations Réparation</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>

				<div class="modal-body">
					<div class="fetched-data"></div>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
				</div>


			</div>
		</div>
	</div>

	<!-- Modal Infos en attente-->
	<div class="modal fade" id="waitingModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Mise en attente</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<form action="{{path('reparation.set',{status : 13})}}" method="get">
					<div class="modal-body">
						<div class="fetched-data"></div>
						<label for="reason">Raison :</label>
						<textarea name="reason" id="waiting_reason" rows="10" cols="50" class="form-control"></textarea>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-danger" data-bs-dismiss="modal">Annuler</button>
						<button type="submit" class="btn btn-success">Valider</button>
					</div>
				</form>

			</div>
		</div>
	</div>



	<!-- Modal Echange Client Commande-->
	<div class="modal fade" id="echangeClientModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Nouvel échange client</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>

				<div class="modal-body">
					<a id="btn_send_devis" href="{{path('reparation.send.devis')}}" class="btn btn-success">
						<img src="/img/send.svg" alt="send" width="30">
						Envoyer le / les devis</a>
					{{form_start(form)}}
					<div class="fetched-data"></div>
	 					{{form_row(form.methode)}}

					{{form_row(form.raison)}}

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
					{{form_row(form.submit)}}

					{{form_end(form)}}
				</div>


			</div>
		</div>
	</div>



	<!-- Modal Composant Limitant-->
	<div class="modal fade" id="compoLimitantModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="exampleModalLabel">Composant Limitant</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="fetched-data"></div>

				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
				</div>

			</div>
		</div>
	</div>

	<script src="/js/reparation.js"></script>
	<script src="/js/sav.js"></script>

	<script>
		let req = "{{ path('reparation.get',{submenu : submenu}) }}";


document.getElementById('search').addEventListener('keyup', (e) => {
const searchString = e.target.value;


$.ajax({
method: "POST",
url: req,
data: {
q: searchString

},
success: function (data) {
document.getElementById('tbody').innerHTML = data;

}
});
});

$(document).ready(function () {
$.ajax({
method: "POST",
url: req,
data: {
q: "{{ q }}",
sort: "{{ sort }}",
order: "{{ order }}"
},
success: function (data) {
document.getElementById('tbody').innerHTML = data;

}
});
});


$('#infosRepModal').on('show.bs.modal', function (e) {


var id = $(e.relatedTarget).data('id');

$.ajax({
method: "POST",
url: "{{ path('reparation.infos') }}",

data: {
num: id
},
success: function (data) {
$('.fetched-data').html(data);

}
});
});

$('#echangeClientModal').on('show.bs.modal', function (e) {

var id = $(e.relatedTarget).data('id');

document.getElementById('btn_send_devis').href += '?numero=' + id;
$('.fetched-data').html('<input type="hidden\" name="numero\" value="' + id + '"/>');


});

$('#compoLimitantModal').on('show.bs.modal', function (e) {


var id = $(e.relatedTarget).data('id');

$.ajax({
method: "POST",
url: "{{ path('reparation.template') }}",

data: {
url: 'compoLimitant',
num: id
},
success: function (data) {

$('.fetched-data').html(data);

}
});
});
	</script>

{% endblock %}