{% extends 'base_emine.html.twig' %}

{% block title %}
	{{parent()}}-Projet d'exploitation-Plan
{% endblock %}

{% block content %}
	<div class="content-wrapper" style="margin-top:180px;">
		<div class="container-full">
			<div class="row d-flex justify-content-center align-items-center min-vh-100 py-5">
				<div class="col-sm-10 col-md-8 col-lg-5 col-xl-5 col-xxl-5">
					<a class="d-flex d-flex justify-content-center align-items-center text-decoration-none mb-4" href="#">
						<div class="d-flex align-items-center fw-bolder fs-3 d-inline-block"><img src="{{asset('images/province.png')}}" alt="phoenix" width="130"/>
						</div>
					</a>
					<div class="text-center mb-7">
						<h3 class="text-body-highlight">Affichage de plan d'exploitation</h3>
						<p class="text-body-tertiary">Remplissez le formulaire ci-dessous</p>
					</div>

					<form method="POST" action="{{path('app_projet_exploitation_plan_show')}}">
						<div class="mb-3 text-start">
							<label class="form-label" for="email"><strong>Projet</strong></label>
							<div class="form-icon-container">
								<select class="form-control js-choice1" style="width: 100%;" name="projet">
                                    {% for item in projets %}
                                        <option value="{{item.id}}">{{item.nom}} ({{item.operateur ? item.operateur.denomination : ''}})</option>
                                    {% endfor %}
                                </select>
							</div>
						</div>
                        <br>
						<div class="mb-3 text-start">
							<label class="form-label" for="password"><strong>Plan</strong></label>
							<div class="form-icon-container">
								<select class="form-control js-choice2" style="width: 100%;" name="registre">
									{% for item in registres %}
										<option value="{{loop.index0}}">{{item.name}}</option>
									{% endfor %}
                                </select>
							</div>
						</div>
                        <br>
						<div class="mb-3 text-start">
							<label class="form-label" for="password"><strong>Mois-Année du rapport</strong></label>
							<div class="form-icon-container" data-password="data-password">
								<input class="form-control input-lg" name="moisAnnee" style="height: 45px;" id="datepicker" type="text" placeholder="Sélectionnez le mois et l'année du rapport" data-options="{&quot;disableMobile&quot;:true,&quot;dateFormat&quot;:&quot;m-Y&quot;}" readonly="readonly" required>
							</div>
						</div>
                        <br>
                        <div class="mt-5 d-grid gap-2">
						    <button class="btn btn-primary btn-block mt-10" style="background-color:#17418a;">Valider</button>
                        </div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<elevenlabs-convai agent-id="agent_0701kh8g5nenf9y9jcwbs8qfmvyw"></elevenlabs-convai><script src="https://unpkg.com/@elevenlabs/convai-widget-embed" async type="text/javascript"></script>
{% endblock %}

{% block javascripts %}
	{{parent()}}

	<script>
		window.onload = function () {
			var element = document.querySelector('.js-choice1');
  			const choices = new Choices(element);

            var element1 = document.querySelector('.js-choice2');
  			const choices1 = new Choices(element1);

            flatpickr("#datepicker", {dateFormat: "m-Y"});
        }
    </script>
{% endblock %}