{% extends "base.html.twig" %}
{% block title %} Compte rendu journalier {% 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="crj_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>Compte rendu journalier</h2>
						<form action="" class="tri ">
							<div id="tri_annee">
								<h4>Filtre par Année :
								</h4>
								<section>
									<select name="" id="">
										<option value="">2020</option>
									</select>
								</section>
							</div>
							<div id="tri">
								<h4>Filtre par date :
								</h4>
								<section>
									<input type="date" class="date_compte_rendu date1">
									<input type="date" class="date_compte_rendu date2">
								</section>
							</div>
							<select name="" id="mois">
								<option value="">Tout service</option>
								<option value="">Direction</option>
								<option value="">Service RH</option>
								<option value="">Commercial</option>
								<option value="">Compta</option>
								<option value="">Réception</option>
								<option value="">Restaurant</option>
								<option value="">Spa</option>
								<option value="">Service techniques</option>
								<option value="">Litiges</option>
							</select>
						</form>
					</div>
				</section>
			</div>
				
				<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12 col-xs-12 ">

					<!-- il faut dynamiser page1 , page2 ,... -->
					
					<!-- unité compte rendu -->
					{% set i = 0 %}
					{% for item in items %}
							<div class="unite data_c">
								<div class="tab_content data_crj data_crj_active" id="page{% set i = i + 1 %}{{ i }}">
									<div class="sous_titre">
										<h3>{{ item.getCreatedAt() | date('d/m/Y') }}</h3>
									</div>
									<section class="service">
										<div class="data-service">
											<div class="direction">
												<h4>Direction</h4>
												<p>
													{{ item.getCrjDirection() }}
												</p>
											</div>
											<div class="service_rh">
												<h4>Service RH</h4>
												<p>
													{{ item.getCrjServiceRh() }}
												</p>
											</div>
										</div>
										<div class="data-service">
											<div class="commercial">
												<h4>Commercial</h4>
												<p>
													{{ item.getCrjCommercial() }}
												</p>
											</div>
											<div class="comptabilite">
												<h4>Comptabilité</h4>
												<p>
													{{ item.getCrjComptable }}
												</p>
											</div>
										</div>
										<div class="data-service">
											<div class="reception">
												<h4>Réception</h4>
												<p>
													{{ item.getCrjReception() }}
												</p>
											</div>
											<div class="restaurant">
												<h4>Restaurant</h4>
												<p>
													{{ item.getCrjRestaurant() }}
												</p>
											</div>
										</div>
										<div class="data-service">
											<div class="spa">
												<h4>Spa</h4>
												<p>
													{{ item.getCrjSpa() }}
												</p>
											</div>
											<div class="service_technique">
												<h4>Service techniques</h4>
												<p>
													{{ item.getCrjSTechnique() }}
												</p>
											</div>
										</div>
										<div class="data-service">
											<div class="litiges">
												<h4>Litiges</h4>
												<p>
													{{ item.getCrjLitiges() }}
												</p>
											</div>
										</div>
									</section>

								</div>
							</div>
					{% endfor %}

				<ul id="pagination-demo" class="pagination-lg pull-right"></ul>


			</div>

		</div>
	</div>

</section>


{% endblock %}

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


<!-- / un plugin tres important pour les input -->
<script src="{{ asset('js/jquery.twbsPagination.min.js') }}"></script>

<script>
	// nombre des coimpte rendu

	var nombre_crj = document.querySelectorAll(".data_crj").length;

	$('#pagination-demo').twbsPagination({

		totalPages: nombre_crj,
		// the current page that show on start
		startPage: 1,

		// maximum visible pages
		visiblePages: 5,

		initiateStartPageClick: true,

		// template for pagination links
		href: false,

		// variable name in href template for page number
		hrefVariable: '[[ number ]]',

		// Text labels
		first: 'Premier',
		prev: 'Précédent',
		next: 'Suivant',
		last: 'Dernier',

		// carousel-style pagination
		loop: false,

		// callback function
		onPageClick: function (event, page) {
			$('.data_crj_active').removeClass('data_crj_active');
			$('#page' + page).addClass('data_crj_active');
		},

		// pagination Classes
		paginationClass: 'pagination',
		nextClass: 'next',
		prevClass: 'prev',
		lastClass: 'last',
		firstClass: 'first',
		pageClass: 'page',
		activeClass: 'active',
		disabledClass: 'disabled'

	});

</script>


{% endblock %}