{% extends "@EasyAdmin/page/content.html.twig" %}
{% set titre ='Réservation' %}
{% block content_title %}
	{{ titre }}
	pour
	{{ schedule.company }}
	du
	{{ schedule.scheduleDate|date('d/m/Y') }}
{% endblock %}
{% block header %}
	{{ parent() }}
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
{% endblock %}
{% block head_stylesheets %}
	<link rel="stylesheet" href="{{ asset('app.css', ea.assets.defaultAssetPackageName) }}">
{% endblock %}
{% block main %}
	<section class="mt-7 py-0">
		<div class="bg-holder w-50 bg-right d-none d-lg-block" style="background-image:url({{ asset('assets/img/gallery/hero-section-1.png')}});"></div>
		<!--/.bg-holder-->
		{% set tarifs = schedule.typeTarif.tarif %}
		{% set firstname ='' %}
		{% set lastname ='' %}

		{% set arrayTarifs = [] %}
		{% for tarif in tarifs %}
			{% if ((tarif.company == schedule.company) and (tarif.depart == schedule.depart) and (tarif.arrivee == schedule.arrivee)) %}
				{% set arrayTarifs = arrayTarifs|merge([{ id: tarif.id, name: tarif.name, amount: tarif.amount }]) %}
			{% endif %}
		{% endfor %}
		<div data-tarifs="{{ arrayTarifs | json_encode() }}" id="mydiv"></div>
		<div class="container-sm">
			{{ form_start(form) }}
			{% for message in app.flashes('echec') %}
				<div class="alert alert-warning">
					{{ message }}
				</div>
			{% endfor %}
			{% if schedule.company.image is null %}
				<img class="img-thumbnail" src="{{ asset('assets/img/company/')}}0.jpg" width=" 120" height=" 60">
			{% else %}
				<img class="img-thumbnail" src="{{ asset('assets/img/company/')}}{{schedule.company.image}}" width="120" height="60">
			{% endif %}

			<div class="row">
				<div class="col-12 col-md-8 col-xl-5">
					<div class="row">
						<table class="table table-responsive{-sm|-md|-lg|-xl|-xxl}">
							<tr>
								<td>
									<div class="input-group">
										{{ form_row(form.agenceDepart)}}
									</div>
								</td>
								<td>
									<div class="input-group">
										{{ form_row(form.agenceArrivee)}}
									</div>
								</td>
							</tr>
							<tr>
								<th style="border:0px">Départ > Arrivée</th>
								<td style="border:0px">{{ schedule.departureTime|date('H:i') }}
									>
									{{ schedule.estimatedArrivalTime|date('H:i') }}</td>
							</tr>
							<tr>
								<th style="border:0px">Tarif</th>
								<td style="border:0px">{{ schedule.typeTarif }}</td>
							</tr>
							<tr>
								<th style="border:0px">Nb de places/Montant</th>
								<td style="border:0px">
									<div class="input-group">
										<div id="numberOfSeats" name="numberOfSeats">{{ numberOfSeats }}</div>
										&nbsp;/&nbsp;
										{% if (arrayTarifs is empty) %}
											{% set tarif0 = 0 %}
										{% else %}
											{% set tarif0 = arrayTarifs[0].amount %}
										{% endif %}
										<span style="font-weight:bold;color:green;" id="totalAmount" name="totalAmount" id="totalAmount">{{ tarif0 }}</span>
										<span>&nbsp;XAF</span>
									</div>
								</td>
							</tr>
						</table>
					</div>
					<div id="infosPassagers">

						<table id="dynamic_field">
							<tr>
								<td style="border:0px">
									<input type="text" class="form-control" value="{{ lastname }}" name="lastname[]" placeholder="Nom" class="input-group" required/>
								</td>
								<td style="border:0px">
									<input type="text" class="form-control" value="{{ firstname }}" name="firstname[]" placeholder="Prénom" class="input-group" required/>
								</td>
								<td style="width:150px ; border:0px">
									<select onchange="calcul()" class="form-select" id="codetarif1" title='codetarif' placeholder="codetarif" name="codetarif[]">
										{%  for tarif in arrayTarifs %}
											<option value="{{ tarif.id }}">{{ tarif.name }}:{{ tarif.amount }}</option>
										{% endfor %}
									</select>
								</td>
							</tr>
						</table>
						<button type="button" name="addpassager" id="addpassager" class="btn btn-primary">Ajout passager</button>
					</div>
					<div>
						<table>
							<tr>
								<td style="border:0px">
									{{ form_row(form.phone)}}
								</td>
								<td style="border:0px">
									{{ form_row(form.email)}}
								</td>
							</tr>
						</table>
					</div>
					<table>
						<tr>
							<td>
								<div style='background-color:yellow; display:none' id='momoMessage'></div>
							</td>
						</tr>
						<tr>
							<td>
								<div class="input-group">
									<div id="prefixPhone">
										<div class="input-group-text">Code secret</div>
									</div>
									<div id="phone">
										{{ form_row(form.codeSecret)}}
									</div>
									<div>
										{{ form_row(form.send)}}
									</div>
								</div>
							</td>
						</tr>
					</table>
				</div>
				<div class="col-lg-2 d-none d-lg-block">
					<img
					width="500" src="{{ asset('assets/img/gallery/KD-PROFIL-4.jpg')}}" alt="Description de l'image">
				{# <img src="{{ asset('assets/img/gallery/hero-section-1.png')}}" alt="Description de l'image"> #}
				</div>

			</div>
			<input type="hidden" name="id" value="{{scheduleId}}">
			<input type="hidden" name="nd" value="{{numdossier}}">
			{{ form_end(form) }}
			<button class="btn btn-link">
				<a href="admin?routeName=app_admin_schedule">Retour au planning</a>
			</button>
		</div>
	</section>

{% endblock %}
{% block body_javascript %}
	<script src="{{asset('assets/js/travels.js')}}"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
	<script src="{{asset('assets/js/theme.min.js')}}"></script>
{% endblock %}