{% extends "base.html.twig" %}
{% block title %}
	Hébergement
{% 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 Hébergement</h3>
					</div>
				</section>
			</div>
			<div class="col-lg-8 col-md-8 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_heb" style="width:100%">
								<thead>
									<tr>
										<td>
											<span>TAUX D'OCCUPATION</span>
										</td>
										<td>
											<span>CHIFFRE D'AFFAIRE</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">
									<h3 class="modal-title" style="text-align: center;">Modification</h3>

									<button type="button" class="close" data-dismiss="modal">&times;</button>
								</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>

	 function handleChange(input) {

        if (input.value < 0) {
            input.value = 0;
            } else if (input.value > 100) {
            input.value = 100;
            } else if (isNaN(input.value)) {
            input.value = 0;
        }

    }

   

	$(document).ready(function () {
		var pseudo_hotel = "{{ hotel }}" ;
		//alert(pseudo_hotel)
        var table = $('#tableau_historique_heb').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_heb", // 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, // raha scrollena de asina val ex 400
        scrollX: true,
        scrollCollapse: true,
        paging: true,
        autoFill: true
        });

        new $.fn.dataTable.FixedHeader(table);

		// suppression ddj 

            $(document).on('click', ".btn_client_suppr", function(ev){
                //ev.preventDefault();
                var id = $(this).attr('data-id');
                //alert(id);
                $('#div__conf button.supprimer').attr('data-id', id);
            })

            $('#div__conf button.supprimer').on('click', function(){
                 var id = $(this).attr('data-id');
                 //alert(id);
                 // ajax
                 $.ajax({
                     url : "/admin/suprimer_ddj",
                     data : {
                         "ddj_id" : id,
                         "pseudo_hotel" : pseudo_hotel,
                     },
                     type : "POST",
                     success : function(response){
                        if(response == "deleted"){
							table.ajax.reload(null, false);
						}
                     },
                     error : function(error){
                         alert('erreur de server au suppression donnee de jour');
                     },
                })
				
            })

            /* fin suppression ddj*/

			/* 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_heb",
					type : "POST",
					data : {
						"ddj_id" : id,
						"pseudo_hotel" : pseudo_hotel,
					},
					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/heb",
					type : "POST",
					data : {
						'id' : id,
						'heb_to' : $('#modal_modif_heb_to').val(),
						'heb_ca' : $('#modal_modif_heb_ca').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 %}