{% extends "base.html.twig" %}
{% block title %}
	Donnée du jour
{% 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 -->


        <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">
                            <h2>Donnée du jour</h2>
                            <form action="" class="from_sous_titre">
                                <input type="date">
                            </form>
                        </div>
                    </section>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-sm-12 col-xs-12">

                    <div
                        class="tab_content" id="data_days">

                        <!-- formulaire total -->

                        {{ form_start(form) }}
                            <div class="h4_titre">
                                <h4>Hébergement</h4>
                            </div>
                            <div class="data_form">
                                <div class="form-group">
                                    <label for="t_o">Taux d'occupation :
                                    </label>
                                     {{ form_widget(form.heb_to, {
                                        'attr' : {
                                            'class' : 'input_pourcent',
                                           
                                            'max' : '100',
                                        }
                                    }) }}
                                    <span class="span__pourcent">%</span>
                                </div>
                                <div class="form-group">
                                    <label for="c_a">Chiffre d'affaire :
                                    </label>
                                    {# <input type="text" maxlength="23" class="input_nombre" id="heb_ca"> #}
                                    {{ form_widget(form.heb_ca, {
                                        'attr' : {
                                            'class' : 'input_nombre',
                                            
                                            'maxlength' : '23',
                                        }
                                    }) }}
                                    <span class="span__ar">Ar</span>
                                </div>
                            </div>
                            <section class="sous_form">
                                <h4 class="label__titre">Nouveau client</h4>
                                <div class="sous_data_form">
                                    <div>
                                        <span class="span__label"></span><input type="text" class="input__text" placeholder="Nom" name="" id ="nom_client">
                                        <span class="span__label span_prenom"></span><input type="text" class="input__text" placeholder="Prénom" name="" id = "prenom_client">
                                    </div>
                                    <div>
                                        <div class="form-group">
                                            <label for="date_arrive" class="label_date">Date d'arrivé :</label>
                                            <input type="date" id="date_arrivee">
                                            <input type="hidden" id="hide_pseudo_hotel" value="{{ hotel }}">
                                        </div>
                                        <div class="form-group">
                                            <label for="date_arrive" class="label_date">Date de départ :</label>
                                            <input type="date" id="date_depart">
                                        </div>
                                    </div>
                                    <div>
                                        <button class="btn btn-default" id = "ajouter_client">
                                            <span class="fa fa-plus"></span>
                                            <span>Ajouter</span>
                                        </button>
                                    </div>
                                </div>
                            </section>

                            <div class="tableau" id="tab_client_present">
                                <div class="sous_titre">
                                    <h4 class="label__titre">Client présent</h4>
                                </div>
                                <section class=" filtre">
                                    <div class="sous_titre_filtre">
                                        <h3>Filtre</h3>
                                    </div>

                                    <div>
                                        <input type="date">
                                        <input type="date">
                                    </div>

                                </section>
                                <div>
                                    <table class="display" style="width: 100%" id="tableau_client_donnee_jour">
                                        <thead>
                                            <tr>
                                                <td>
                                                    <span>NOM</span>
                                                </td>
                                                <td>
                                                    <span>DATE D'ARRIVEE</span>
                                                </td>
                                                <td>
                                                    <span>DATE DU DEPART</span>
                                                </td>
                                                <td>
                                                    <span>DUREE DU SEJOUR</span>
                                                </td>
                                                <td>
                                                    <span>ACTIONS</span>
                                                </td>
                                            </tr>
                                        </thead>
                                        <tbody id ="tbody_load">
                                            
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <div class="h4_titre">
                                <h4>Restaurant</h4>
                            </div>
                            <div class="data_form">
                                <div class="form-group">
                                    <label for="n_couvert">Nombre de couvert :
                                    </label>
                                    {# <input type="text" max="100" maxlength="18" class="input_nombre" id="res_n_couvert"> #}
                                     {{ form_widget(form.res_n_couvert, {
                                        'attr' : {
                                            'class' : 'input_nombre',
                                            
                                            'maxlength' : '23',
                                            'max' : '100',
                                        }
                                    }) }}
                                </div>
                                <div class="form-group">
                                    <label for="c_a_rest">Chiffre d'affaire :
                                    </label>
                                    {# <input type="text" maxlength="23" class="input_nombre" id = "res_ca"> #}
                                    {{ form_widget(form.res_ca, {
                                        'attr' : {
                                            'class' : 'input_nombre',
                                        
                                            'maxlength' : '23',
                                            'max' : '100',
                                        }
                                    }) }}
                                    <span class="span__ar">Ar</span>
                                </div>
                            </div>
                            <div class="data_form">
                                <div class="form-group">
                                    <label for="p_dejeuner">Petit déjeuner :
                                    </label>
                                    {# <input type="text" max="100" maxlength="18" class="input_nombre" id="res_p_dej"> #}
                                     {{ form_widget(form.res_p_dej, {
                                        'attr' : {
                                            'class' : 'input_nombre',
                                        
                                            'maxlength' : '23',
                                            'max' : '100',
                                        }
                                    }) }}
                                </div>
                                <div class="form-group">
                                    <label for="dejeuner">Déjeuner :
                                    </label>
                                    {# <input type="text" max="100" maxlength="18" class="input_nombre" id = "res_dej"> #}
                                    {{ form_widget(form.res_dej, {
                                        'attr' : {
                                            'class' : 'input_nombre',
                                        
                                            'maxlength' : '18',
                                            'max' : '100',
                                        }
                                    }) }}
                                </div>
                            </div>
                            <div class="data_form">
                                <div class="form-group">
                                    <label for="dinner">Dinner :
                                    </label>
                                    {# <input type="text" max="100" maxlength="18" class="input_nombre" id = "res_dinner"> #}
                                    {{ form_widget(form.res_dinner, {
                                        'attr' : {
                                            'class' : 'input_nombre',
                                        
                                            'maxlength' : '18',
                                            'max' : '100',
                                        }
                                    }) }}
                                </div>
                            </div>
                            <div class="h4_titre">
                                <h4>Spa</h4>
                            </div>
                            <div class="data_form">
                                <div class="form-group">
                                    <label for="c_a_spa">Chiffre d'affaire :
                                    </label>
                                    {# <input type="text" maxlength="23" class="input_nombre" id = "spa_ca"> #}
                                    {{ form_widget(form.spa_ca, {
                                        'attr' : {
                                            'class' : 'input_nombre',
                                        
                                            'maxlength' : '23',
                                        }
                                    }) }}
                                    <span class="span__ar">Ar</span>
                                </div>
                                <div class="form-group">
                                    <label for="n_abonne">Nombre d'abonné :
                                    </label>
                                    {# <input type="text" max="100" maxlength="18" class="input_nombre" id = "spa_n_abonne"> #}
                                     {{ form_widget(form.spa_n_abonne, {
                                        'attr' : {
                                            'class' : 'input_nombre',
                                        
                                            'maxlength' : '18',
                                            'max' : '100',
                                        }
                                    }) }}
                                </div>
                            </div>
                            <div class="data_form">

                                <div class="form-group">
                                    <label for="c_unique">Client unique :
                                    </label>
                                    {# <input type="text" max="100" maxlength="18" class="input_nombre" id = "spa_c_unique"> #}
                                     {{ form_widget(form.spa_c_unique, {
                                        'attr' : {
                                            'class' : 'input_nombre',
                                        
                                            'maxlength' : '18',
                                            'max' : '100',
                                        }
                                    }) }}
                                </div>
                            </div>

                            <!-- text area  -->
                            <div class="h4_titre">
                                <h4>Compte rendu journalier</h4>
                            </div>
                            <div class="data_form crj">
                                <div class="form-group">
                                    <label for="c_a_spa">Direction :
                                    </label>
                                    {# <textarea class="form-control" id = "crj_direction"></textarea> #}
                                     {{ form_widget(form.crj_direction, {
                                        'attr' : {
                                            'class' : 'form-control',
                                        }
                                    }) }}
                                </div>
                                <div class="form-group">
                                    <label for="c_a_spa">Service RH :
                                    </label>
                                    {# <textarea class="form-control" id = "crj_service_rh"></textarea> #}
                                    {{ form_widget(form.crj_service_rh, {
                                        'attr' : {
                                            'class' : 'form-control',
                                        }
                                    }) }}
                                </div>
                            </div>
                            <div class="data_form crj">
                                <div class="form-group">
                                    <label for="c_a_spa">Commercial :
                                    </label>
                                    {# <textarea class="form-control" id ="crj_commercial"></textarea> #}
                                    {{ form_widget(form.crj_commercial, {
                                        'attr' : {
                                            'class' : 'form-control',
                                        }
                                    }) }}
                                </div>
                                <div class="form-group">
                                    <label for="c_a_spa">Compatble :
                                    </label>
                                    {# <textarea class="form-control" id = "crj_comptable"></textarea> #}
                                     {{ form_widget(form.crj_comptable, {
                                        'attr' : {
                                            'class' : 'form-control',
                                        }
                                    }) }}
                                </div>
                            </div>
                            <div class="data_form crj">
                                <div class="form-group">
                                    <label for="c_a_spa">Réception :
                                    </label>
                                    {# <textarea class="form-control" id ="crj_reception"></textarea> #}
                                     {{ form_widget(form.crj_reception, {
                                        'attr' : {
                                            'class' : 'form-control',
                                        }
                                    }) }}
                                </div>
                                <div class="form-group">
                                    <label for="c_a_spa">Restaurant :
                                    </label>
                                    {# <textarea class="form-control" id ="crj_restaurant"></textarea> #}
                                    {{ form_widget(form.crj_restaurant, {
                                        'attr' : {
                                            'class' : 'form-control',
                                        }
                                    }) }}
                                </div>
                            </div>
                            <div class="data_form crj">
                                <div class="form-group">
                                    <label for="c_a_spa">Spa :
                                    </label>
                                    {# <textarea class="form-control" id ="crj_spa"></textarea> #}
                                    {{ form_widget(form.crj_spa, {
                                        'attr' : {
                                            'class' : 'form-control',
                                        }
                                    }) }}
                                </div>
                                <div class="form-group">
                                    <label for="c_a_spa">Service techniques :
                                    </label>
                                    {# <textarea class="form-control" id ="crj_s_technique"></textarea> #}
                                    {{ form_widget(form.crj_s_technique, {
                                        'attr' : {
                                            'class' : 'form-control',
                                        }
                                    }) }}
                                </div>
                            </div>
                            <div class="data_form crj">
                                <div class="form-group">
                                    <label for="c_a_spa">Litiges :
                                    </label>
                                    {# <textarea class="form-control" id ="crj_litiges"></textarea> #}
                                     {{ form_widget(form.crj_litiges, {
                                        'attr' : {
                                            'class' : 'form-control',
                                        }
                                    }) }}
                                </div>
                            </div>

                            <!-- / textarea -->

                            <div class="btn-list">
                                <ul>
                                    <li><button type="submit" id = "btn_add_donnee_dj" class="btn btn-warning"><span>Enregistrer</span></button></li>
                                </ul>
                            </div>
                        {{ form_end(form) }}

                        <!-- / formulaire total -->
                    </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 modal_modif_client">
                                    
                                </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">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h3 class="modal-title" style="text-align: center;">Voulez-vous vraiment supprimer cet élément ?</h3>
                                </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  -->

                </div>

            </div>
        </div>

    </section>
    <div class="load_modif">
        <p>Patienter...</p>
    </div>


{% endblock %}

{% block javascripts %}
<!-- un plugin tres important pour les input -->

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


<script>

    document.querySelector(".input_pourcent").onkeyup = function(){
        handleChange(this);
       // alert('kjh')
    }



	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;
    }

    }
</script>

<!-- limiter les  -->

<script>

	/* utilisation de cleave.js pour les input */

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


new Cleave('.input_pourcent', {blocks: [4]});


/* fin utilisation de cleave.js pour les input */

</script>
<script>

	$(document).ready(function () {
        
});
</script>

<script>

        // ajout de client 

        $(document).ready(function(){
            /* table */
                var pseudo_hotel = $('#hide_pseudo_hotel').val();
        //alert(pseudo_hotel);
        var table = $('#tableau_client_donnee_jour').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/select_client/today", // 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);

            /*  fiun table */

            $("#ajouter_client").click(function (e) { 
                e.preventDefault();
                // alert('ksg')
                var nom = $('#nom_client').val();
                var prenom = $('#prenom_client').val();
                var date_arrivee = $('#date_arrivee').val();
                var date_depart = $('#date_depart').val();
                var data = {
                    "nom_client" : nom,
                    "prenom_client" : prenom,
                    "date_arrivee" : date_arrivee,
                    "date_depart" : date_depart
                };

                // test

                //alert("nom = "+nom+" prenom = "+prenom+ "  date ar = "+date_arrivee+" date dep = "+date_depart); 

                // ajax 

                $.ajax({
                    url : "{{ path('hebergement', {'pseudo_hotel' : hotel}) }}",
                    type : "POST",
                    data : data,
                    beforeSend : function(){
                        $("#ajouter_client").html('<span>Patienter...</span>');
                    },
                    success : function (response) {
                        if(response == "ok"){
                            // on initialise le formulaire
                            $('#nom_client').val("");
                            $('#prenom_client').val("");
                            $('#date_arrivee').val("d-m-YYYY");
                            $('#date_depart').val("d-m-YYYY");
                            
                        }
                    },
                    complete : function(){
                            table.ajax.reload(null, false);
                         $("#ajouter_client").html('<span class="fa fa-plus"></span><span>Ajouter</span>');
                    },
                    error : function() {
                        alert('Erreur dans le serveur')
                    },

                })
                
            });

            // suppression client présent 

            $(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_client",
                     data : {
                         "client_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 suppression client dans donnée du jour ');
                     },
                })
            })

            /* fin suppression client*/

            /* debut modif client */

            $(document).on('click', '.btn_client_modif', function(ev){
                ev.preventDefault();
                 var id = $(this).attr('data-id');
                 //alert(id);
                 $.ajax({
                     url : "/admin/check_client",
                     data : {
                         "client_id" : id,
                     },
                     type : "POST",
                    
                     success : function(response){
                         $('.modal_modif_client').html(response);
                          $('#modal_form').modal('show');
                     },
                     error : function(error){
                         alert('erreur de server');
                     },
                })
            })

            $(document).on('click', '#a_modal_modif_client', function(ev){
                ev.preventDefault();
                var id = $(this).attr("data-id");
                var nom = $('#modif_nom_client').val();
                var prenom = $('#modif_prenom_client').val();
                var date_arrivee = $('#modif_date_arrivee').val();
                var date_depart = $('#modif_date_depart').val();
                //alert(id+"/"+nom+"/"+date_depart+"/"+date_arrivee+"/"+prenom);
                // ajax
                $.ajax({
                     url : "/admin/edit_client",
                     data : {
                         "id" : id,
                         "nom" : nom,
                         "prenom" : prenom,
                         "date_arrivee" : date_arrivee,
                         "date_depart" : date_depart,
                     },
                     type : "POST",
                    beforeSend : function(){
                       $('#a_modal_modif_client').html('<span>Patienter...</span>'); 
                    },
                     success : function(response){
                        if(response == "ok"){
                            table.ajax.reload(null, false);
                             $('#modal_form').modal('hide');
                        }
                     },
                     error : function(error){
                         alert('erreur de server');
                     },
                     complete : function(){
                          $('#a_modal_modif_client').html('<span>Enregistrer</span>'); 
                     },
                })
            })
            


            
        })


</script>


{% endblock %}