{# @var ea \EasyCorp\Bundle\EasyAdminBundle\Context\AdminContext #}
{% extends '@EasyAdmin/page/content.html.twig' %}

{% block content_title  %}{% endblock %}

{% block head_javascript %}
	{{ parent() }}
	<script src="{{ asset('assets/full-calendar/global/index.global.min.js')}}"></script>
	{# <script src="{{ asset('assets/full-calendar/bootstrap5/index.global.min.js')}}"></script> #}
	<script type="module" src="{{ asset('js/calendar/fullcalendar.js')}}"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
	<script  src="{{ asset('js/calendar/button.js')}}"></script>
	
{% endblock head_javascript %}

{% block head_stylesheets %}
	{{ parent() }}
	<link rel="stylesheet" href="{{ asset('css/planning.css') }}">
{# <link rel="stylesheet" href="{{ asset('css/assets/icons/font/bootstrap-icons.css') }}"> #}

{% endblock %}


{% block main %}

	<div class="container w-100">

		<div class="row w-100">
			<div id="message" style="color:red"></div>
			<div class="col-2 border border-secondary">
		
				<div class="d-flex flex-column mt-2">
					<div class="h7 p-1 m-1 bg-primary text-center text-white rounded-2">Salon</div>
				</div>

				<select id="salons" class="form-select form-select-sm mt-3"> 
						<option value="" disabled selected>Choisir un salon</option>
				</select>

				<div class="d-flex flex-column mt-2">
						<div class="h7 p-1 m-1 bg-warning text-center text-white rounded-2">Groupe de Devices</div>
				</div>
{# 
 				<div class="form-check">
  					<input class="form-check-input" type="checkbox" value="" id="deviceschecked">
  					<label class="form-check-label" for="deviceschecked">tous les devices</label>
  				</div> #}

				{# <select id="devices" class="form-select mt-1" multiple="multiple">  #}
				<select id="devicesgroups" class="form-select mt-1" multiple="multiple"> 
						
				</select>

				<div class="d-flex flex-column mt-2">
						<div class="h7 p-1 m-1 bg-secondary text-center text-white rounded-2">Publicités</div>
				</div>

				<select id="advertformat" class="form-select  form-select-sm mt-3"> 
						{# <option value="" disabled selected>
							Format 
						</option> #}
						<option value="bandeau">Bandeau</option>
  						<option value="bandeau haut">Bandeau Haut</option>
  						<option value="pleine ecran" selected>Pleine écran</option>
						<option value="bandeau bas wall" selected>Bandeau Bas wall</option>
				</select>


				{# <select id="adverts" class="form-select mt-3" multiple="multiple">  #}
				<select id="adverts" class="form-select mt-3" multiple="multiple"> 
					
				</select>

				<div class="d-flex align-items-center input-group mt-2">
					<div class="col-8">Intervalle (sec)</div>
  					<input id="interval" type="text" class="col-4 form-control" value="60" placeholder="Interval (secondes)">
				</div>

				
				
					{# <div class="h7 p-2 m-2 bg-secondary text-center text-white rounded-2">Bandeau</div>
					<div class="h7 p-2 m-2 bg-success text-center text-white rounded-2">Video</div> #}
				
			</div>


			<div id="spinner" class="spinner-border" role="status" style="z-index : 2"></div>


			<div class="col-10">
				<div id="calendar"></div>
				{# <div id="calendar2"></div> #}

			</div>
		</div>

			{# bandeau de boutons bas#}
		<div class="row w-100 mt-2 ">
			<div class="d-flex justify-content-center col-3">

					<div class=" col-8" id="events-campagns" style="display:none">
							
						<div>
							<button id="1" class="d-flex justify-content-around align-items-center 
										pt-1 pb-1 text-grey text-center fc-event fc-h-event btn btn-primary
										fc-daygrid-event fc-daygrid-block-event text-white rounded-2 w-100">
									Nouvelle campagne  <i class="fa-regular fa-file"></i>
							</button>
						</div>
									
					</div>				
			</div>
		   
		   <div class="d-flex justify-content-center col-3">
				<div class="col-8" >
					<button id="showcampagn" class="btn  btn-primary col-6 pt-1 pb-1 text-center rounded-2 w-100" disabled style="display:none">
								Voir la campagne
					</button> 
				</div>
			</div>			

  			<div class="d-flex justify-content-center col-3">
				<div class="col-8" >
					<button id="pushadvert" class="btn  btn-primary col-6 pt-1 pb-1 text-center rounded-2 w-100" style="display:none">
								Push des publicités
					</button> 
				</div>
			</div>
 
 			<div class="d-flex justify-content-center col-3">
				<div class="col-8" >
					<button id="removecampagn" class="btn btn-danger col-6 pt-1 pb-1 text-center rounded-2 w-100" disabled style="display:none"> 
								Suppression
					</button>
						
				</div>  	
			</div>
	
		</div>

	{% if app.user %}
		<input type="hidden" id="_user" value="{{ app.user.id }}">
	{% else %}
		<input type="hidden" id="_user" value="0">
	{% endif %}

	<div id="modalvideo" class="modal" tabindex="-1" style="display:none;">
		<div class="modal-dialog"  style="">
			<div class="modal-content" style="height: 70vh; overflow-y: auto;">
			<div class="modal-header">
				<h5 id="modaltitle" class="modal-title"></h5>
				<button id="modalclose" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			</div>
			<div id="modalbody" class="modal-body" >

				{# <div class="ratio ratio-16x9" style="height: 57vh;">
		        	<iframe id="videoFrame" src="" title="video" allowfullscreen></iframe>
        		</div> #}
			
			</div>
			</div>
		</div>
	</div>
		
	</div>





{% endblock %}