{% extends "base.html.twig" %}
{% block title %}
	Fiche Hotel
{% 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" class="fiche_hotel">
		<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>Fiche hotel</h2>
					</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">

					<div class="h2_titre">
						<h2>Royal Beach Hotel & Spa</h2>
					</div>
					<div id = "load_fiche">
						
					</div>
					<section class="n_form">
						<div class="h4_titre">
							<h4>Equipement de l'etablissement</h4>
						</div>
						<div class="data_form">
							<div class="form-group">
								<span class="icone_fh">
                                    <img src="{{ asset('images/parking.png') }}" alt="parking">

								</span>
								<span class="text_fh">Parking gratuit</span>

							</div>
							<div class="form-group">
								<span class="icone_fh">
                                    <img src="{{ asset('images/piscine.png') }}" alt="piscine">

								</span>
								<span class="text_fh">2 Piscines</span>

							</div>
						</div>
						<div class="data_form">
							<div class="form-group">
								<span class="icone_fh">
                                    <img src="{{ asset('images/lounge.png') }}" alt=" lounge.png">

								</span>
								<span class="text_fh" data-span="lb">Lounge Bar</span>

							</div>
							<div class="form-group">
								<span class="icone_fh">
                                    <img src="{{ asset('images/kids.png') }}" alt="kids">

								</span>
								<span class="text_fh" data-span="p">2 Piscines</span>
							</div>
						</div>
						<div class="data_form">
							<div class="form-group">
								<span class="icone_fh">
									<img src="{{asset('images/spa_fh.png')}}" alt="span_fh.png">
								</span>
								<span class="text_fh">Spa</span>

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


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

	<!-- Modal modif  -->

	<div class="modal fade" id="modal_form_fh_1" 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">
					<form action="">
						<section>

							<div class="form-group">
								<label for="">Chambre prestige :</label>
								<input type="number" class="input_n_modal" id="mon_cp" value = "12" />
							</div>
							<div class="form-group">
								<label for="">Suite Familiales :
								</label>
								<input type="number" class="input_n_modal " id = "sf">
							</div>
						</section>
						<section>
							<div class="form-group">
								<label for="">Chambre Deluxe :
								</label>
								<input type="number" class="input_n_modal" id = "cd">
							</div>
							<div class="form-group">
								<label for="">Suite VIP :
								</label>
								<input type="number" class="input_n_modal" id = "sv">
							</div>
						</section>
						<section>
							<div class="form-group">
								<button type="submit" data-dismiss="modal" id="modif_suite" class="btn btn-warning"><span>Enregistrer</span></button>
							</div>
						</section>
					</form>
				</div>

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

	<!-- fin Modal modif  -->

	<!-- Modal modif  -->

	<div class="modal fade" id="modal_form_fh_2" 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">
					<form action="">
						<section>
							<div class="form-group">
								<label for="">Le Nautile :
								</label>
								<input type="number" class="input_n_modal" id = "ln">
							</div>
							<div class="form-group">
								<label for="">Sunset View :
								</label>
								<input type="number" class="input_n_modal" id = "sview">
							</div>
						</section>
						<section>
							<div class="form-group">
								<button type="submit" data-dismiss="modal" id="modif_nautile" class="btn btn-warning"><span>Enregistrer</span></button>
							</div>
						</section>
					</form>
				</div>

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

	<!-- fin Modal modif  -->

</section>


{% endblock %}

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

<script>

	$(document).ready(function () {
		var pseudo_hotel = "{{ hotel }}";
		$(document).on('click', 'button[data-target]', function(e){
			e.preventDefault();
            var tar = $(this).attr("data-target");
            if (tar == "#modal_form_fh_1") {
				
				var s_cp = $("#scp").text();
				var s_sf = $("#ssf").text();
				var s_cd = $("#scd").text();
				var s_sv = $("#ssv").text();

				var sf = $('#sf').val(s_sf);
				var cd = $('#cd').val(s_cd);
				var sv = $('#sv').val(s_sv);
				var cp = $('#mon_cp').val(s_cp);

				// alert(s_cp);

            } else if (tar == "#modal_form_fh_2") {
				var s_ln = $("#sln").text();

				var s_sview = $("#ssview").text();

				var ln = $('#ln').val(s_ln);

				var sview = $('#sview').val(s_sview);
            }
		})

		// ajax affichage

		function load_fiche(){
			
			$.ajax({
				url : "/profile/affiche_fiche/"+pseudo_hotel,
				type : "POST",
				success : function(response){
					$('#load_fiche').html(response);
				},
				error : function(params) {
					alert('erreur au niveau de load fiche');
				}
			})
		}

		load_fiche();

		$('#modif_suite').on('click', function(ev){
			ev.preventDefault();
			var cp = $('#mon_cp').val();
			var sf = $('#sf').val();
			var cd = $('#cd').val();
			var sv = $('#sv').val();
			var data = {
				'cp' : cp,
				'sf' : sf,
				'cd' : cd,
				'sv' : sv,
				'option' : 'chambre',
			}
			$.ajax({
				//url : "/admin/modif/fiche/"+pseudo_hotel,
				url : "/profile/modif_fiche/"+pseudo_hotel,
				type : "POST",
				data : data,
				success : function(response){
					if(response){
						load_fiche();
					}
				},
				error : function(error){
					alert('erreur au niveau de modif fiche chambre');
				}
			})
		})

		$('#modif_nautile').on('click', function(ev){
			ev.preventDefault();
			var ln = $('#ln').val();
			var sview = $('#sview').val();

			var data = {
				'ln' : ln,
				'sview' : sview,
				'option' : 'no-chambre',
			}
			$.ajax({
				url : "/profile/modif_fiche/"+pseudo_hotel,
				type : "POST",
				data : data,
				success : function(response){
					if(response){
						load_fiche();
					}
				},
				error : function(error){
					alert('erreur au niveau de modif fiche chambre');
				}
			})
		})


    })
</script>


{% endblock %}