  <?php
	include 'header.php';
 
	include 'post_trenutnavoznja.php'; ?>
	
	
	<?php
 
	//INICIRANJE VARIJABLI
	$ime = '';
	$prezime = '';
	$firma = '';
	$email = '';
	$telefon = '+41';
	$zemlja = '';
	$adresa = '';
	$grad = '';
	$postanski = '';
	$buking = '';
	$let = '';
	$letboard = '';
 

 

	include 'obrada_podataka.php';?>
 	
 	<div class="steps izborauta">
        <div class="steps-box active">
            <?php echo $prevoStepsVehicles;?>
        </div>
         
        <div class="steps-box active">
            <?php echo $prevoStepsPassengers;?>
        </div>
        <div class="steps-box">
            <?php echo $prevoStepsPayment;?>
        </div>
        <div class="steps-box">
            <?php echo $prevoStepsEnd;?>
        </div>
    </div>



	<?php
 	
	
		if ($pocetak != '' || ($distanca != '' && ($povratak == 'oneway' || $povratak == 'roundtrip' )) || ($distanca != 0 && ($povratak == 'oneway' || $povratak == 'roundtrip' )) ) { ?>
		
		<form id="form_guest" method="post" action="view_payment.php" autocomplete="off">
		<div class="prikaz_all ride">
			<div class="prikaz_lijevo colspan40 choosecar_left">
				<?php include 'view_trenutnavoznja.php'; ?>

				
			</div>
			
			<div class="prikaz_desno colspan60 choosecar_right">
				<div class="clr" style="overflow: visible;">
					<div class="podnaslov"><?php echo $prevodPassengerDetails;?></div>
					<div class="prikaz_all">
						<div class="prikaz_lijevo colspan45">
							<div class="form-box form-box-ime">
								<input id="ime" type="text" name="ime" value="<?php echo $ime;?>" placeholder="<?php echo $prevodName;?>">
								<label class="form_label" for="ime"><?php echo $prevodName;?>*</label>					
								<div id="ime_err" class="form_error"><?php echo $prevodErrorRequired;?></div>	
							</div>
						</div>
						<div class="prikaz_desno colspan50">
		 					<div class="form-box form-box-prezime">
			  					<input id="prezime" type="text" name="prezime" value="<?php echo $prezime;?>" placeholder="<?php echo $prevodSurname;?>">
			  					<label class="form_label" for="prezime"><?php echo $prevodSurname;?>*</label>
								<div id="prezime_err" class="form_error"><?php echo $prevodErrorRequired;?></div>
		 					</div>
	 					</div>
	 				</div>

 					<div class="form-box form-box-firma">
	   					<input id="firma" type="text" name="firma" value="<?php echo $firma;?>" placeholder="<?php echo $prevodInstitution;?>">
	   					<label class="form_label" for="firma"><?php echo $prevodInstitution;?></label>
   					</div>
 					
 					<div class="form-box form-box-email">
						<input id="email" type="text" name="email" value="<?php echo $email;?>" placeholder="E-mail" >
						<label class="form_label" for="email">E-mail*</label>
						<div id="email_err" class="form_error"><?php echo $prevodErrorRequired;?></div>
						<div id="email_err2" class="form_error"><?php echo $prevodErrorEmail;?></div>
					</div>
 					
 					<div class="form-box">
						
						<input id="telefon" type="tel" name="telefon" value="<?php echo $telefon;?>"  placeholder="<?php echo $prevodTelephone;?>">
						<label class="form_label" for="telefon"><?php echo $prevodTelephone;?>*</label>
						<div id="telefon_err" class="form_error"><?php echo $prevodErrorRequired;?></div>
						<div id="telefon_err2" class="form_error"><?php echo $prevodErrorEmail;?></div>


						<script src="int-tel/build/js/intlTelInput.js"></script>
						  <script>
						    var input = document.querySelector("#telefon");
						    
						    var  iti = window.intlTelInput(input, {
						      // allowDropdown: false,
						      autoHideDialCode: false,
						      // autoPlaceholder: "off",
						      // dropdownContainer: document.body,
						      // excludeCountries: ["us"],
						      // formatOnDisplay: false,
						      // geoIpLookup: function(callback) {
						      //   $.get("http://ipinfo.io", function() {}, "jsonp").always(function(resp) {
						      //     var countryCode = (resp && resp.country) ? resp.country : "";
						      //     callback(countryCode);
						      //   });
						      // },
						      // hiddenInput: "full_number",
						      initialCountry: "ch",
						      // localizedCountries: { 'de': 'Deutschland' },
						      // nationalMode: false,
						      // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
						      placeholderNumberType: "MOBILE",
						      preferredCountries: ['de', 'it', 'fr', 'gb' ],
						      separateDialCode: false,
						      utilsScript: "build/js/utils.js",
						    });

						    input.addEventListener("countrychange", function() { 
	 
							 	$(this).val( '+' + iti.getSelectedCountryData().dialCode ) ;
							 
							});

							$('#telefon').val( '+' + iti.getSelectedCountryData().dialCode ) ;
						  </script>
					</div>
 					
 				 
					<div class="podnaslov" style="margin-top:50px;"><?php echo $prevodOptions;?></div>

					<div class="prikaz_all">
						<div class="prikaz_lijevo colspan32">
				 			<div class="form-box form-box-putnici">
								<label class="form_label"><?php echo $prevodNoPassengers; ?></label>
								<select id="putnici" name="putnici">
									<?php 
									$i = 1;
									for ($i = 1; $i <= $klasa_putnici; $i++ ){
										echo '<option value="'.$i.'">'.$i.'</option>';
									}
									?>
								</select>
							</div>
						</div>

						<div class="prikaz_lijevo colspan32 form_guest_prtljag">
				 			<div class="form-box form-box-prtljag">
								<label class="form_label"><?php echo $prevodNoBaggage; ?></label>
								<select name="prtljag">
									<?php 
									$i = 0;
									for ($i = 0; $i <= $klasa_prtljag; $i++ ){
										echo '<option value="'.$i.'">'.$i.'</option>';
									}
									?>
								</select>
							</div>
						</div>

						<div class="prikaz_desno colspan32">
				 			<div class="form-box form-box-childseat">
								<label class="form_label"><?php echo $prevodChildSeat; ?></label>
								<select id="childseat_select" name="childseat_select">
									<?php 
								 
									for ($i = 0; $i <= ($klasa_putnici-1); $i++ ){
										echo '<option value="'.$i.'">'.$i.'</option>';
									}
									?>
								</select>
							</div>
						</div>
					</div>



					<div id="childseat_block_1" class="childseat_block form-box form-box-child" style="display: none;">
						<label class="form_label"><?php echo $prevodChildSeat; ?> #1 *</label>
						<select id="childseat_select_1" class="childseat_select" name="childseat_select_1">
							<option value=""><?php echo $prevodChoose; ?></option>
							<option value="childseat_baby"><?php echo $prevodBabySeat; ?> </option>
							<option value="childseat_child"><?php echo $prevodChild; ?></option>
							<option value="childseat_booster"><?php echo $prevodBooster; ?></option> 
						</select>
						<div id="childseat_select_1_err" class="childseat_select_err form_error"><?php echo $prevodErrorRequired;?></div>
					</div>

					<div id="childseat_block_2" class="childseat_block form-box form-box-child" style="display: none;">
						<label class="form_label"><?php echo $prevodChildSeat; ?> #2 *</label>
						<select id="childseat_select_2" class="childseat_select" name="childseat_select_2">
							<option value=""><?php echo $prevodChoose; ?></option>
							<option value="childseat_baby"><?php echo $prevodBabySeat; ?></option>
							<option value="childseat_child"><?php echo $prevodChild; ?></option>
							<option value="childseat_booster"><?php echo $prevodBooster; ?></option>
						</select>
						<div id="childseat_select_2_err" class="childseat_select_err form_error"><?php echo $prevodErrorRequired;?></div>
					</div>

					<div id="childseat_block_3" class="childseat_block form-box form-box-child" style="display: none;">
						<label class="form_label"><?php echo $prevodChildSeat; ?> #3 *</label>
						<select id="childseat_select_3" class="childseat_select" name="childseat_select_3">
							<option value=""><?php echo $prevodChoose; ?></option>
							<option value="childseat_baby"><?php echo $prevodBabySeat; ?></option>
							<option value="childseat_child"><?php echo $prevodChild; ?>s</option>
							<option value="childseat_booster"><?php echo $prevodBooster; ?></option> 
						</select>
						<div id="childseat_select_3_err" class="childseat_select_err form_error"><?php echo $prevodErrorRequired;?></div>
					</div>

					<div id="childseat_block_4" class="childseat_block form-box form-box-child" style="display: none;">
						<label class="form_label"><?php echo $prevodChildSeat; ?> #4 *</label>
						<select id="childseat_select_4" class="childseat_select" name="childseat_select_4">
							<option value=""><?php echo $prevodChoose; ?></option>
							<option value="childseat_baby"><?php echo $prevodBabySeat; ?></option>
							<option value="childseat_child"><?php echo $prevodChild; ?>s</option>
							<option value="childseat_booster"><?php echo $prevodBooster; ?></option> 
						</select>
						<div id="childseat_select_4_err" class="childseat_select_err form_error"><?php echo $prevodErrorRequired;?></div>
					</div>

					<div id="childseat_block_5" class="childseat_block form-box form-box-child" style="display: none;">
						<label class="form_label"><?php echo $prevodChildSeat; ?> #5 *</label>
						<select id="childseat_select_5" class="childseat_select" name="childseat_select_5">
							<option value=""><?php echo $prevodChoose; ?></option>
							<option value="childseat_baby"><?php echo $prevodBabySeat; ?></option>
							<option value="childseat_child"><?php echo $prevodChild; ?></option>
							<option value="childseat_booster"><?php echo $prevodBooster; ?></option> 
						</select>
						<div id="childseat_select_5_err" class="childseat_select_err form_error"><?php echo $prevodErrorRequired;?></div>
					</div>

					<div id="childseat_block_6" class="childseat_block form-box form-box-child" style="display: none;">
						<label class="form_label"><?php echo $prevodChildSeat; ?> #6 *</label>
						<select id="childseat_select_6" class="childseat_select" name="childseat_select_6">
							<option value=""><?php echo $prevodChoose; ?></option>
							<option value="childseat_baby"><?php echo $prevodBabySeat; ?></option>
							<option value="childseat_child"><?php echo $prevodChild; ?></option>
							<option value="childseat_booster"><?php echo $prevodBooster; ?></option>
						</select>
						<div id="childseat_select_6_err" class="childseat_select_err form_error"><?php echo $prevodErrorRequired;?></div>
					</div>
 


					<div class="prikaz_all">
					 	<div class="prikaz_all">
							<div class="prikaz_lijevo colspan45">
								<div class="form-box form-box-let">
									<input id="let" type="text" name="let" value="<?php echo $let;?>" placeholder="<?php echo $prevodFlight;?>">
									<label class="form_label" for="let"><?php echo $prevodFlight;?></label>					
								</div>
							</div>
							<div class="prikaz_desno colspan50">
			 					<div class="form-box form-box-letboard">
				  					<input id="letboard" type="text" name="letboard" value="<?php echo $letboard;?>" placeholder="<?php echo $prevodNameboard;?>">
				  					<label class="form_label" for="letboard"><?php echo $prevodNameboard;?></label>	 
			 					</div>
		 					</div>
		 				</div>
 
						<textarea rows="5" name="buking" value="<?php echo $buking;?>" style="width:100%;" placeholder="<?php echo $prevodBookingInformation;?>"></textarea>
 		
					</div>

					

					<?php include 'inputi_trenutnavoznja.php'; ?>

					<input type="text" name="klasa" value="<?php echo $klasa;?>" style="display:none;">
					<input type="text" name="cijena" value="<?php echo $cijena;?>"style="display:none;">
						
			 		<div class="submit_button">
		  				<input id="submit_guest" type="submit" name="submit_guest" value="<?php echo $prevodPayment;?>" />
		 			</div>

 				</div>		

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

<?php	}else{
			echo '
			<div class="prikaz_all">
				<div class="colspan50 uspijesa_rezervacija"><a class="link_nova_voznja" href="'.$url_pocetna.'">'.$prevodMainPage.'</a></div>
			</div>';
		}
 

	?>

</div>




<?php $conn->close(); ?>

 
<?php  include 'footer.php'; ?>


<script type="text/javascript">
	/*Resetujem greske*/
	$( "#ime" ).keyup(function() {
	    $("#ime").css({'border-color': '#ddd'});
	    $("#ime_err").css({'display':'none'}); 
	});
	$( "#prezime" ).keyup(function() {
	    $("#prezime").css({'border-color': '#ddd'});
	    $("#prezime_err").css({'display':'none'}); 
	});
 
	$( "#telefon" ).keyup(function() {
	    $("#telefon").css({'border-color': '#ddd'});
	    $("#telefon_err").css({'display':'none'}); 
	});
	$( "#email" ).keyup(function() {
	    $("#email").css({'border-color': '#ddd'});
	    $("#email_err").css({'display':'none'}); 
	    $("#email_err2").css({'display':'none'});
	});

	$( "#email" ).keyup(function() {
	    $("#email").css({'border-color': '#ddd'});
	    $("#email_err").css({'display':'none'}); 
	});

	$( ".childseat_select" ).change(function() {
	    $(this).css({'border-color': '#ddd'});
	    $(".childseat_select_err").css({'display':'none'}); 
	});
	 

	$('#submit_guest').click(function() {
		let uslov = uslov_ime = uslov_prezime = uslov_email = uslov_telefon = uslov_childseat = 1;


	    if($('#ime').val() == ''){
	        $("#ime").css({'border-color': '#cc0000'});
		    $("#ime_err").css({'display':'block'});  
	        uslov_ime = 0;
	     
	    }
	   
	    if($("#prezime").val() == ''){
		    $("#prezime").css({'border-color': '#cc0000'});
		    $("#prezime_err").css({'display':'block'}); 
		    uslov_prezime = 0;
		}

	    if($("#telefon").val().length < 5){
		    $("#telefon").css({'border-color': '#cc0000'});
		    $("#telefon_err").css({'display':'block'}); 
		     uslov_telefon = 0;
		}

		if($("#email").val() == ''){
		    $("#email").css({'border-color': '#cc0000'});
		    $("#email_err").css({'display':'block'}); 
		     uslov_email = 0;
		}

		if( !validateEmail($("#email").val()) ){
		    $("#email").css({'border-color': '#cc0000'});
		    $("#email_err2").css({'display':'block'}); 
		     uslov_email = 0;
		}

 

		for (i = 1; i <= $("#childseat_select").val(); i++) {
			if( $('#childseat_select_' + i).val() == '' ){
				$('#childseat_select_' + i).css({'border-color': '#cc0000'});
				$('#childseat_select_' + i + '_err').css({'display': 'block'});
				uslov_childseat *= 0;
			}	
		} 

	 
		uslov = uslov_ime * uslov_prezime * uslov_email * uslov_telefon * uslov_childseat;
		 
		
		if(uslov == 0){
			return false;
		}
	    
	});


	//inicajlno punjenje childseat selekta
	let putnici_no = $('#putnici').val();	
	let i;
	$('#childseat_select').find('option').remove(); //brisem sve opcije u childseat selektu
    for (i = 0; i < putnici_no; i++) {
	   $('#childseat_select')
	        .append($("<option></option>")
	        .attr("value", i)
	        .text( i ));
	} 


	//Broj sjedalica u zavisnosti od broja putnika
	$( "#putnici" ).change(function() {
	    let putnici_no = $('#putnici').val();

	    $('#childseat_select').find('option').remove(); //brisem sve opcije u childseat selektu
	    $(".childseat_block").css({'display' : 'none'}); // gasiv sve blokove
	    $(".childseat_block select").val(''); // resetujem sve pojedinacne selecte

	    let i;
	    for (i = 0; i < putnici_no; i++) {
		   $('#childseat_select')
		        .append($("<option></option>")
		        .attr("value", i)
		        .text( i ));
		} 	     
	});

	//Odradjujem ukljucene blokove sjedalica
	$( "#childseat_select" ).change(function() {
 
	    $(".childseat_block").css({'display' : 'none'});  // gasiv sve blokove
	    $(".childseat_block select").val('');  // resetujem sve pojedinacne selecte

	    let childseat_no = $(this).val();
 
	    let i;
	    for (i = 1; i <= childseat_no; i++) {
		   $('#childseat_block_' + i).css({'display' : 'block'});
		} 	     
	});




	function validateEmail(email) {
	    const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
	    return re.test(String(email).toLowerCase());
	}

</script>

