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

{% block title %}OTO {% endblock %}

{% block body %}


	<section id="search" style="background:url('/images/bg/aeroport.jpg') no-repeat;background-size: cover;">
		<div class="container">

			<br/><br/><br/><br/>
           <h3>Misterfly : recherche de vols</h3>
			<form class="search-form"  role="search" action="/misterfly/oto/v1/public/demo/flight/list/" method="POST">
                {#<h2 style="color:white" class="text-right">
                    <i class="fas fa-plane" style="transform: rotate(320deg)"></i>
                    Je réserve mon vol
                </h2>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="search[oneWay]" id="oneWay0" value="1" checked >
                    <label class="form-check-label" for="oneWay0">Aller simple</label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="search[oneWay]" id="oneWay1" value="0" >
                    <label class="form-check-label" for="oneWay1">Aller-Retour</label>
                </div>#}

				<div class="form-row">
					<div class="col-md-3 mb-3">
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
							</div>
							<select class="custom-select form-control"  id="from" name="search[from]" placeholder="Ville de départ" required >
								<option value="PAR" selected>Paris</option>
								<option value="BOD">Bordeaux</option>
							</select>

						</div>
					</div>
					<div class="col-md-3 mb-3">
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text"><i class="fas fa-map-marker-alt"></i></span>
							</div>
							<select class="custom-select form-control" name="search[to]" id="to" placeholder="Ville d'arrivée" required >
								<option value="DJE" selected>Djerba</option>
								<option value="TUN">Tunis</option>
							</select>
						</div>
					</div>

					<div class="col-md-3 mb-3">
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
							</div>
							<input type="text" class="form-control" id="departureDate" name="search[departureDate]" placeholder="Date aller" required />
						</div>
					</div>

					<div class="col-md-3 mb-3">
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text"><i class="far fa-calendar-alt"></i></span>
							</div>
							<input type="text" class="form-control" id="returnDate" name="search[returnDate]" placeholder="Date retour" required />
						</div>
					</div>
				</div>

				<div class="form-row">
					<div class="col-md-3 mb-3">
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text"><i class="fas fa-users"></i></span>
							</div>
							<select class="custom-select form-control" id="adulte" name="search[adult]" required >
								<option value="1"selected>Adulte +12 ans</option>
                                {% for i in 1..6 %}
									<option value="{{ i }}">{{ i }}</option>
                                {% endfor %}
							</select>
						</div>
					</div>
					<div class="col-md-3 mb-3">
						<div class="input-group">

							<select class="custom-select" class="form-control" id="child" name="search[child]" >
								<option value="0" selected>Enfant -11 ans</option>
                                {% for i in 0..6 %}
									<option value="{{ i }}">{{ i }}</option>
                                {% endfor %}
							</select>
						</div>
					</div>
					<div class="col-md-3 mb-3">
						<select class="custom-select" class="form-control" id="infant" name="search[infant]">
							<option value="0" selected>Bébé -2 ans</option>
                            {% for i in 0..4 %}
								<option value="{{ i }}">{{ i }}</option>
                            {% endfor %}
						</select>
					</div>
					<div class="col-md-3 mb-3">
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text"><i class="fas fa-search"></i></span>
							</div>
							<button type="submit" class="form-control" id="submit-search"  value=" Rechercher" style="background-color:#f8b805;color:white">Rechercher</button>

						</div>
					</div>
				</div>

				<div class="form-row  spinner d-none">
					<div class="d-flex justify-content-center">
						<div class="spinner-border" role="status">
							<span class="sr-only">Loading...</span>
						</div>
					</div>
				</div>

			</form>
		</div>

	</section>

 {% if flights is defined  %}
	<section id="search" style="background:url('/images/bg/aeroport.jpg') no-repeat;background-size: cover;">
		<div class="container">

		<div class="row">
			<div class="col-md-3">

				{% if flights.status is defined  %}
                {{ flights.code }}  : {{ flights.message }}
				{% else %}

					{{ flights.sessionid }}
					{% for key, flight in flights %}
						{% if key != "sessionid" %}
						 <li> {{ flight.fare.net}} </li>

							{% for ptop in flight.pointToPoints %}
								{{ ptop.id }}
							{% endfor %}

						 {% endif %}
					{% endfor %}
                {% endif %}
                {{ dump(flights) }}
			</div>
		</div>
		</div>
	</section>
	{% endif %}

{% block javascripts %}

<script type="text/javascript">

	$("#submit-search").on( "click", function() {
                $(".spinner").removeClass('d-none').addClass('d-block');
    });


{% endblock %}  <!-- /Optional js -->

{% endblock %}