{% extends 'bundles/SonataAdminBundle/standard_layout.html.twig' %}


{% block stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
{% endblock %}

{# Define the variable out of the block to prevent error if someone is overriding the list_table and not the list_footer #}

{% block list_table %}
	<div
		class="col-xs-12 col-md-12">
		{# Add a margin if no pager to prevent dropdown cropping on window #}
		<div class="date_range date_range_stat">
			<div class="input-group">
				<div class="input-group date" id="dp_filtercreatedAt">
					<input type="text" id="filtercreatedAt" name="filtercreatedAt" data-date-format="DD-MM-YYYY" class="form-control">
					<span class="input-group-addon">
						<span class="fa-calendar fa"></span>
					</span>
				</div>
			</div>
		</div>
		<div class="box box-primary newbox" style="margin-bottom: 100px;">
			<div class="box-body">

				{% block list_header %}{% endblock %}

				{% block table %}
					{% block table_header %}{% endblock %}
					{% block table_body %}

					 	{% if is_granted('ROLE_ADMIN') %}
							<div class="row">
								<div class="chartbox col-md-12">
									<div id="chart100"></div>
								</div>
							</div>
						{% endif %}

            <div class="row">
              <div class="col-md-12">
                <div class="employes">
                  <select class="form-control" name="employes" id="employes">
                    {% for item in employes %}
                      <option value="{{ item.id }}">{{item.getFullname }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
							<div class="chartbox col-md-12">
                  <div id="chart110"></div>
							</div>
						</div>

						<div class="row">
							<div class="chartbox col-md-12">
                  <div id="chart111"></div>
							</div>
						</div>
					 {% if is_granted('ROLE_ADMIN') %}
							<div class="row">
								<div class="col-md-6 chartbox">
									<div id="chart60"></div>
								</div>
								<div class="col-md-6 chartbox">
									<div id="chart70"></div>
								</div>
							</div>
					{% endif %}

					{% endblock %}
					{% block table_footer %}{% endblock %}
				{% endblock %}
			</div>
		</div>
	</div>
  <input type="hidden" name="startdate" id="startdate"/>
  <input type="hidden" name="enddate"   id="enddate"/>

{% endblock %}

{% block javascripts %}
	{{ parent() }}
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
	<script src="{{ asset('admin/js/chart.js')}}"></script>
{% endblock %}