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

{% block title %}Len's Backoffice - Devis Commande
{% endblock %}

{% block stylesheets %}
	<link rel="stylesheet" href="{{ asset('css/commande.css') }}">
	<link rel="stylesheet" href="{{ asset('css/devis.css') }}">
{% endblock %}

{% block header %}

	<div class="submenu">
		<a href="{{path('commande.devis',{submenu : 'all'})}}" class="p-3 border  {% if submenu == 'all' %}border-3 border-dark{% endif %}">
			<img src="/img/file-earmark.svg" alt="devis" width="50">

			<div>Devis ({{devisRepo.findByFilter('','','commande') | length}})</div>
		</a><a href="{{path('commande.devis',{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>Devis à traiter({{status.find(3).getDevis() | length}})</div>

		</a>
	</div>

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

		<a href="{{path('commande.devis',{submenu : 'waiting'})}}" class="p-3 border  {% if submenu == 'waiting' %}border-3 border-dark{% endif %}">
			<img src="/img/pause.svg" alt="pause" width="50">
			<div>Devis Traité ({{ devisRepo.findByFilter('','waiting','commande') | length }})</div>
		</a>	
		<a href="{{path('commande.devis',{submenu : 'send'})}}" class="p-3 border  {% if submenu == 'send' %}border-3 border-dark{% endif %}">
			<img src="/img/send.svg" alt="send" width="50">
			<div>Devis envoyée ({{ devisRepo.findByFilter('','send','commande') | length }})</div>
		</a>
		</div>

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

			<a href="{{path('commande.devis',{submenu : 'accept'})}}" class="p-3 border  {% if submenu == 'accept' %}border-3 border-dark{% endif %}">
				<img src="/img/check.svg" alt="check" width="50">
				<div class="ms-3">Devis Accepté ({{ devisRepo.findByFilter('','accept','commande') | length }})</div>
			</a>
			<a href="{{path('commande.devis',{submenu : 'deny'})}}" class="p-3 border  {% if submenu == 'deny' %}border-3 border-dark{% endif %}">
				<img src="/img/cancel.svg" alt="check" width="50">
				<div class="ms-3">Devis Refusé ({{devisRepo.findByFilter('','deny','commande') | length}})</div>

			</a>

		</div>
	<a href="{{path('commande.devis',{submenu : 'ready'})}}" class="p-3 border  {% if submenu == 'ready' %}border-3 border-dark{% endif %}">
			<img src="/img/check.svg" alt="check" width="50">
			<div>Commandes Prêtes ({{devisRdy | length}})</div>

		</a>
	</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('commande.devis',{submenu : 'all'})}}" class="p-3 border  {% if submenu == 'all' %}border-2 border-dark{% endif %}">
			<img src="/img/file-earmark.svg" alt="devis" width="50">

			<div>Devis ({{devisRepo.findByFilter('','','commande') | length}})</div>
		</a>
		<a href="{{path('commande.devis',{submenu : 'processing'})}}" class="p-3 border  text-white {% if submenu == 'processing' %}border-2 border-dark{% endif %}">
			<img src="/img/process.svg" alt="processing" width="50">
			<div>Devis à traiter({{status.find(3).getDevis() | length}})</div>

		</a>
		
		<a href="{{path('commande.devis',{submenu : 'waiting'})}}" class="p-3 border  {% if submenu == 'waiting' %}border-3 border-dark{% endif %}">
			<img src="/img/pause.svg" alt="pause" width="50">
			<div>Devis Traité ({{ devisRepo.findByFilter('','waiting','commande') | length }})</div>
		</a>	
		<a href="{{path('commande.devis',{submenu : 'send'})}}" class="p-3 border  {% if submenu == 'send' %}border-2 border-dark{% endif %}">
			<img src="/img/send.svg" alt="send" width="50">
			<div>Devis envoyée ({{ devisRepo.findByFilter('','send','commande') | length }})</div>
		</a>


		<a href="{{path('commande.devis',{submenu : 'accept'})}}" class="p-3 border  {% if submenu == 'accept' %}border-2 border-dark{% endif %}">
			<img src="/img/check.svg" alt="check" width="50">
			<div class="ms-3">Devis Accepté ({{ devisRepo.findByFilter('','accept','commande') | length }})</div>
		</a>
		<a href="{{path('commande.devis',{submenu : 'deny'})}}" class="p-3 border  {% if submenu == 'deny' %}border-2 border-dark{% endif %}">
			<img src="/img/cancel.svg" alt="check" width="50">
			<div class="ms-3">Devis Refusé ({{devisRepo.findByFilter('','deny','commande') | length}})</div>

		</a>
<a href="{{path('commande.devis',{submenu : 'ready'})}}" class="p-3 border  {% if submenu == 'ready' %}border-2 border-dark{% endif %}">
			<img src="/img/check.svg" alt="check" width="50">
			<div>Commandes Prêtes ({{devisRdy | length}})</div>

		</a>

	</div>

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


		<table class="table mt-3">
			<thead>
				<tr class="text-center">
					<td></td>
					<td>Date du devis</td>
					<td>Client</td>
					<td>Ref devis</td>
					<td>Montant</td>
					<td>Status</td>
					<td></td>
					<td></td>
				</tr>
			</thead>
			<tbody id='tbody'></tbody>
		</table>

	</div>


	<!-- Modal Info Commande-->
	<div class="modal fade" id="infoDevisModal" 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 Devis</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 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('commande.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>
	{% include 'utils/templates/modals.html.twig' %}

	<script src="/js/commande.js"></script>
	<script>
		let path = "{{ path('commande.devis.get',{submenu : submenu}) }}";


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


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

}
});
});

$(document).ready(function () {

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

}
});
});

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


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

$.ajax({
method: "POST",
url: "{{ path('commande.devis.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 + '"/>');


});
	</script>
{% endblock %}