{% extends "base.html.twig" %}
{% block title %}
	Restaurant
{% endblock %}

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

{% block body %}
    
<section
	id="contents" class="container-fluid">
	<!-- entete content -->
	<div id="top-content">
        <div id="entete_fixed">
            <ul>
                <li>
                    <a href="#" id="btn_drop_side_menu">
                        <i data-show="show-side-navigation1" class="fa fa-bars show-side-btn"></i>
                    </a>
                </li>
               <li
								{% if hotel == "royal_beach" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('royal_beach', {'current_page' : current_page }) }}">
									<div>
										<img src="{{asset('images/hazo1.png')}}" alt="logo1">
									</div>
								</a>
							</li>
							<li
								{% if hotel == "calypso" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('calypso', {'current_page' : current_page }) }}">
									<div>
										<img src="{{ asset('images/hazo2.png') }}" alt="logo2">
									</div>
								</a>
							</li>
							<li 
								{% if hotel == "baobab_tree" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('baobab_tree', {'current_page' : current_page }) }}">
									<div>
										<img src="{{ asset('images/hazo3.png') }}" alt="logo3">
									</div>
								</a>
							</li>
							<li
								{% if hotel == "vanila_hotel" %}
									class="logo_active"
								{% endif %}
							>
								<a href="{{ path('vanila_hotel', {'current_page' : current_page }) }}">
									<div>
										<img src="{{ asset('images/hazo4.png') }}" alt="logo4">
									</div>
								</a>
							</li>
                <li id="log_out_entete">
                    <div>
                         <a href="{{ path('app_logout') }}">
                            <span aria-hidden="true" class="fa fa-power-off fa-2x"></span>
                        </a>
                    </div>
                </li>
            </ul>
        </div>

	</div>
	<!-- / entete content -->

	<!-- contenue  -->
	<div id="hrs_content">
		<div>
			<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12 col-xs-12">
				<section class="section_part" id="section_part_top">
					<div class="sous_titre">
						<h3>Historique Restaurant</h3>
					</div>
				</section>
			</div>
			<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12 col-xs-12">
				<section class="section_part tab_content margin_tab">
					<section class=" filtre">
						<div class="sous_titre_filtre">
							<h3>Filtre</h3>
						</div>
						<form action="" class="tri">
							<input type="date">
							<input type="date">
							<button class="btn btn-primary btn-xs btn_filter"><span>Filtrer</span></button>
						</form>
					</section>
					<div class="section">

						<div class="tableau tab_historique">
							<table class="display" id="tableau_historique_res" style="width:100%">
								<thead>
									<tr>
										<td>
											<span>CHIFFRE D'AFFAIRE</span>
										</td>
										<td>
											<span>PETIT DEJEUNER</span>
										</td>
										<td>
											<span>DEJEUNER</span>
										</td>
										<td>
											<span>DINNER</span>
										</td>
										<td>
											<span>TOTAL</span>
										</td>
										<td>
											<span>DATE</span>
										</td>
										<td>
											<span>ACTIONS</span>
										</td>
									</tr>
								</thead>
								<tbody>


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

					<!-- Modal modif  -->
					<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog opacity-animate4">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal">&times;</button>
									<h3 class="modal-title" style="text-align: center;">Modification</h3>
								</div>
								<div class="modal-body" id = "modal_modif_ddj">
									
								</div>

							</div>
						</div>
					</div>
					<!-- fin Modal modif  -->

					<!-- Modal suppr  -->
					<div class="modal fade" id="modal_form_confirme" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog opacity-animate4">
							<div class="modal-content">
								<div class="modal-header">
									<h3 class="modal-title" style="text-align: center;">Voulez-vous vraiment supprimer cet élément ?</h3>
									<button type="button" class="close" data-dismiss="modal">&times;</button>

								</div>
								<div class="modal-body">
                                    <div id="div__conf">
                                        <button class="btn btn-warning supprimer" data-id = ""  data-dismiss="modal" data-confirm = "oui">Supprimer</button>
                                        <button class="btn btn-warning annuler" data-dismiss="modal" data-confirm = "non">Annuler</button>
                                    </div>
                                </div>

							</div>
						</div>
					</div>
					<!-- fin Modal suppr  -->

				</section>
			</div>
		</div>
	</div>
	<!-- / contenue  -->
</section>


{% endblock %}

{% block javascripts %}

<script src="{{ asset('js/cleave.min.js') }}"></script>

<script>

	// pour espacer la saisie de chiffre d'affaire


	var n = document.querySelectorAll(".ca");
	for (var i = n.length - 1; i >= 0; i--) {
		new Cleave(n[i], { // prefix: 'Ar ',
		numeral: true,
		delimiter: [' '],
		numeralThousandsGroupStyle: 'thousand',
		numericOnly: true
		});
	}

	$(document).ready(function () {
		var pseudo_hotel = "{{ hotel }}" ;
		var table = $('#tableau_historique_res').DataTable({
				"language": {
				"sEmptyTable": "Aucune donnée disponible dans le tableau",
				"sInfo": "Affichage de l'élément _START_ à _END_ sur _TOTAL_ éléments",
				"sInfoEmpty": "Affichage de l'élément 0 à 0 sur 0 élément",
				"sInfoFiltered": "(filtré à partir de _MAX_ éléments au total)",
				"sInfoPostFix": "",
				"sInfoThousands": ",",
				"sLengthMenu": "Afficher _MENU_ éléments",
				"sLoadingRecords": "Chargement...",
				"sProcessing": "Traitement...",
				"sSearch": "Rechercher :",
				"sZeroRecords": "Aucun élément correspondant trouvé",
				"oPaginate": {
				"sFirst": "Premier",
				"sLast": "Dernier",
				"sNext": "Suivant",
				"sPrevious": "Précédent"
				},
				"oAria": {
				"sSortAscending": ": activer pour trier la colonne par ordre croissant",
				"sSortDescending": ": activer pour trier la colonne par ordre décroissant"
				},
				"select": {
				"rows": {
				"_": "%d lignes sélectionnées",
				"0": "Aucune ligne sélectionnée",
				"1": "1 ligne sélectionnée"
				}
				}
				},
				"ajax" : {
						url : "/profile/historique_res", // any am Clientcontroller
						type : 'POST', 
						data : {'pseudo_hotel' : pseudo_hotel},
						// success : function(response){
						//     alert(response);
						// }, 
						// error : function(){
						//     alert('erreur server');
						// },
						"dataSrc":"",
						
					},

					//annule le tri
					order : [[0 , 'asc']],
					ordering : false,
					responsive: true,
					scrollY: false,
					scrollX: true,
					scrollCollapse: true,
					paging: true,
					autoFill: true
				});
				new $.fn.dataTable.FixedHeader(table);

				/* modif  */
			// check out
			$(document).on('click', '.btn_ddj_modif', function(ev){
				ev.preventDefault();
				//alert('io');
				var id  = $(this).attr('data-id');
				
				$.ajax({
					url : "/profile/checkout_h_res",
					type : "POST",
					data : {
						"ddj_id" : id,
					},
					success : function (response) {
						if(response){
							$('#modal_modif_ddj').html(response);
								$('#modal_form').modal('show');
							 	var n = document.querySelectorAll(".ca");
								for (var i = n.length - 1; i >= 0; i--) {
									new Cleave(n[i], { // prefix: 'Ar ',
										numeral: true,
										delimiter: [' '],
										numeralThousandsGroupStyle: 'thousand',
										numericOnly: true
									});
								}
								new Cleave('.histo_pourcent', {blocks: [4]});
							
						}
					},
					error : function(error){
						alert('erreur server au niveau de checkout ddj');
					}
				})
			})

			$(document).on('click', '#btn_edit_ddj', function(ev){
				ev.preventDefault();
				var id = $(this).attr('data-id');
				$.ajax({
					url : "/profile/historique/res",
					type : "POST",
					data : {
						'id' : id,
						'res_ca' : $('#modal_modif_res_ca').val(),
						'res_p_dej' : $('#modal_modif_res_p_dej').val(),
						'res_dej' : $('#modal_modif_res_dej').val(),
						'res_dinner' : $('#modal_modif_res_dinner').val(),
					},
					beforeSend : function(){
						$('#btn_edit_ddj span').text('Patienter ...');
					},
					success : function(response){
						if(response == "ok"){

							table.ajax.reload(null, false);
							$('#modal_form').modal('hide');

						}
					},
					error : function(error){
						alert('erreur serveur au niveau du modif ddj dans modal');
					}, 
					complete : function () {
						$('#btn_edit_ddj span').text('Enregistrer');
					}
				})
			})
	});


</script>



{% endblock %}