{% 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 : Génération de vol cache </h3>
			<form class="search-form"  role="search" action="{#/misterfly/oto/v1/public/flight/cache/import/#}" 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-6 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"  multiple name="search[from]"  
							        id="from" placeholder="Ville de départ" required   style="height: 50px;">
								<option value="PAR" selected>Paris</option>
								<option value="BOD">Bordeaux</option>
							    <option value="LYS">Lyon</option>
							    <option value="MRS">Marseille</option>
							    <option value="TLS">Toulouse</option>
							    <option value="NTE">Nantes</option>
							</select>

						</div>
					</div>
					<div class="col-md-2 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-2 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-2 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" style="margin-top:50px;">

				 	<div class="col-md-2 mb-3">
						<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text"><i class="fas fa-check"></i></span>
							</div>
							<button type="submit" class="form-control" id="submit-search"  value=" Rechercher" 
							style="background-color:#f8b805;color:white">Ajouter </button>

						</div>
					</div>
					<div class="col-md-8 mb-3"></div>
				 	<div class="col-md-2 mb-3">
				 		<div class="input-group">
							<div class="input-group-prepend">
								<span class="input-group-text"><i class="fas fa-chevron-right"></i></span>
							</div>

								<button  class="form-control"
								  onclick="window.location.href='/misterfly/oto/v1/public/flight/cache/export/'"
							      style="background-color:#f8b805;color:white">Envoyer </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 %}

<section>
	<div class="container">
		<div class="row">
		<table class="table d-none" id="displaySearchParams">
			  <thead>
			    <tr>
			      <th scope="col">Roundtrip</th>
			      <th scope="col">depCities</th>
			      <th scope="col">arrivalCity</th>
			      <th scope="col">depatureDate</th>
			      <th scope="col">returnDate</th>
			      <th scope="col">minStop</th>
			      <th scope="col">maxStop</th>
			      <th scope="col">outDateOffset</th>
			      <th scope="col">inDateOffset</th>
			    </tr>
			  </thead>
			  <tbody id="searchParams">
			  </tbody>
		</table>	

		</div>
</section>



	
{% endblock %}  


{% block javascripts %}

<script type="text/javascript">

 $(document).ready(function() {
   $("#from").select2().select2("val", ['PAR','BOD','MRS','LYS','NTE','TLS']);
});

/**
 * add product to cart with ajax process ( by seqvol )
 *
 */
$("#submit-search").on('click', function(e) {

    e.stopPropagation();
    e.preventDefault();

    var url, search;

     url = 'http://localhost/misterfly/oto/v1/public/flight/cache/import/';
    //url = '/misterfly/oto/v1/public/flight/cache/import/';
   // url = '/flight/cache/import/';

   var search ={
	    "roundtrip"			:1,
		"departureCities"	: $("#from").val(),
		"arrivalCity"		: $("#to").val(),
		"depatureDate"		: $("#departureDate").val(),
	    "returnDate"		: $("#returnDate").val(),
	    "minStopovers"	    :'0',
	    "maxStopovers"	    :'0',
	    "outDateOffset"		:'0',  // 0,-1,-2
	    "inDateOffset" 		:'0'  // 0,1,2
   };



    $.ajax({
        url: url,
        type: 'POST',
        data: JSON.stringify(search),
       // data: {'seqvol': '58885'},
        dataType: 'JSON',
        //contentType: 'application/json',
        beforeSend: function() {
            $(".ajax-loader").show();
            // console.log("ok1");
        },
       // error: function(response, statut, erreur) {},
        error: function (xhr, status, error) {
        	console.log("ok2");
            //  console.log(error);
        },
          complete: function() {
            $(".ajax-loader").hide();
             // console.log("ok3");
        },

        success: function(response) {

            //$(".ajax-loader").hide();
            criteria = jQuery.parseJSON(response);
           
            $( "#searchParams" ).empty();
            for (var i = 0; i < criteria.length; i++) {
               
                $( "#searchParams" ).append( "<tr>");
                for (var key in criteria[i]) {
                	//if( key!= 'departureCities'){
                       console.log(criteria[i][key]);
                       $( "#searchParams" ).append( "<td>"+criteria[i][key]+"</td>" );
    			      // html=+ "<td>"+criteria[i][key]+"</td>";
                   //}
			    }
			    $( "#searchParams" ).append( "</tr>");
            }
            $( "#displaySearchParams" ).removeClass( "d-none" ).addClass( "d-block" );

           /* var criteria;
            criteria = jQuery.parseJSON(response);
           // JSON.stringify(person)**/

        }
    });


});


//  window.location.hash='cart-total';

</script>

{% endblock %}