

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Comanda livrare GreenBox</title>

	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

	<link rel="stylesheet" href="sweet.css">

	<link rel="icon" type="image/x-icon" href="/livapp/favicon.ico">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
	<script src="sweet.js"></script>

	<script src="https://tiles.locationiq.com/v3/libs/maplibre-gl/1.15.2/maplibre-gl.js"></script>
	<link href="https://tiles.locationiq.com/v3/libs/maplibre-gl/1.15.2/maplibre-gl.css" rel="stylesheet" />
	<script src="https://tiles.locationiq.com/v3/js/liq-styles-ctrl-libre-gl.js?v=0.1.8"></script>
	<link href="https://tiles.locationiq.com/v3/css/liq-styles-ctrl-libre-gl.css?v=0.1.8" rel="stylesheet" />

	<script src="https://tiles.locationiq.com/v3/libs/gl-geocoder/4.5.1/locationiq-gl-geocoder.min.js?v=0.2.3"></script>
	<link rel="stylesheet" href="https://tiles.locationiq.com/v3/libs/gl-geocoder/4.5.1/locationiq-gl-geocoder.css?v=0.2.3" type="text/css" />
</head>

<style>
 body {
	margin: 0;
	font-family: calibri; 
//	background-color: #FFFFE0;
 }

 h2 {
	font-size: 18px;
	font-weight: bold;
 }

 h3 {
	font-size: 16.8px;
	font-weight: bold;
 }

.mainbtn {
  width:10vw;
  height: 10vh;
  overflow:hidden;
  align-items: center;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: transparent 0 0 0 3px,rgba(18, 18, 18, .1) 0 6px 20px;
  box-sizing: border-box;
  color: #121212;
  cursor: pointer;
  display: inline-flex; 
  flex: 1 1 auto;
  font-family: Inter,sans-serif;
  font-size: 1.3vw;
  font-weight: 700;
  justify-content: center;
  line-height: 1;
  margin:0.5vw;
  padding: 0.5vh 0.5vw;
  outline: none;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s,-webkit-box-shadow .2s;
  white-space: normal;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.mainbtn:hover {
  box-shadow: #121212 0 0 0 3px, transparent 0 0 0 0;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 2vh;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%;
  overflow: hidden;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
  background-color: #fefefe;
  margin: auto;
  margin-left: 7vw;
  margin-right: 0.5vw;
  border: 1px solid #888;
}

.center {
	position:absolute;
	margin:0;
    top:50%;
    left:50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.center-h {
	position:absolute;
	left: 50%;
	transform: translateX(-50%);
}

.mainwindow {
  margin-left: 0.1vw;
  margin-top: 2%;
  padding: 0;
  background-repeat: no-repeat;
  width: 50%;
  overflow: auto;
}

.orderboxes {
	width:96%;
	height:auto; /* 23% */
	margin:1%;
	padding: 1%;
	border-radius: 0% 0% 0% 0% / 0% 0% 0% 0% ;
	box-shadow: 10px 10px lime;
}

.effect {
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;
}

.ordertext {
	font-size: 1.8vh;
};

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

input[type=text], select, textarea {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=time] {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
  width: 140px;
  font-size: 16px;
}

.suplimentdiv {
  width: 100%;	
  font-size: 1.5em;
  margin-left: 2%;
}

.radiodiv {
  width: 100%;	
  font-size: 1.5em;
  margin-left: 2%;
}

input[type=radio] {
  display: inline-block;
  margin-left:2vw;
}

.full-h {
	width:100%;
}

.half-h {
	width:71%; /*60*/
}

.qrter-h {
	width:24%;
}

.xqrter-h {
	width:95%; /*74*/
}

.white {
	background-color: white;
	z-index: -1;
}

.blue {
	color: royalblue;
	font-weight:700;
}

.green {
	color: teal;
	font-weight:700;
}

.maroon {
	color: maroon;
	font-weight:700;
}

.orange {
	color: #ff8000;
	font-weight:700;
}

.olive {
	color: olive;
	font-weight:700;
}

.locselect {
	margin-left: 1vw;
	height: 4vh; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
    appearance: none; 
    padding: 0.5vh 0.5vw 0.5vh 1.5vh;
}

.vonal {
	display: inline-block;
	width: 10vw;
	margin-left: 1vw;
}

.header {
	background-color: LimeGreen;
	height: 10vh;
	padding: 0.25vw;
	width:100%;
	overflow: hidden;
}

logo {
  width: 100%;
  height: auto;
}

.motto {
	width:100%;
	font-size:1.2vw;
	color:white;
	text-align:center;
	margin-top:0;
	padding-top:0;
	line-height:1vw;
}

.double {
  zoom: 1.7;
  transform: scale(1.7);
  -ms-transform: scale(1.7);
  -webkit-transform: scale(1.7);
  -o-transform: scale(1.7);
  -moz-transform: scale(1.7);
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

/* C H E C K    L I S T !!! */

.serviciuales {
  /* background: #888; */
  background: #ccffcc; /* halvany zold */
}

.deschis {
	background: #f9f9f9;
}

.inchis {
	background: #f2f2f2; /* #ddd; */
}

.accordeonheader {
	width: 100%;
	text-align: left;
}

.accordeondiv {
	position:relative;
	display:none;
	height:12vh;
	background-color:#ffe8cc;
	text-align:left;
	font-size: 16px;	
}

.rightbottom {
	position: absolute; 
	right: 0.5vw; 
	bottom: 0.5vh; 
}

.bezar {
  position: absolute;
  z-index: 103;
  top: 0;
  right: 0;
  height: 2em;
  width: 2em;
  line-height: 2em;
  background-color: red;
  color: white;
  border-radius: 50%;
  text-align:center;
  cursor: pointer;
}

/* BUTTON */
.button-29 {
  align-items: center;
  appearance: none;
  background-image: radial-gradient(100% 100% at 100% 0, #6cbd45 0, #6cbd45 100%);
  border: 0;
  border-radius: 3px;
  box-shadow: rgba(45, 35, 66, .4) 0 2px 4px,rgba(45, 35, 66, .3) 0 7px 13px -3px,rgba(58, 65, 111, .5) 0 -3px 0 inset;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  height: 2em;
  justify-content: center;
  line-height: 1.1em;
  list-style: none;
  overflow: hidden;
  padding-left: 1em;
  padding-right: 1em;
  text-align: left;
  text-decoration: none;
  transition: box-shadow .15s,transform .15s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  white-space: nowrap;
  will-change: box-shadow,transform;
  font-size: 1.1em;
}

.button-29:focus {
  box-shadow: #3c4fe0 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
}

.button-29:hover {
  box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #3c4fe0 0 -3px 0 inset;
  transform: translateY(-2px);
}

.button-29:active {
  box-shadow: #3c4fe0 0 3px 7px inset;
  transform: translateY(2px);
}

@media only screen and (max-width: 600px) {
	.mainwindow {
		width: 100%;
		height: auto;
	}
	.header {
		height: 13vh;
		padding: 2%;
	}
	.orderboxes {
		text-align: center;
		width: 97%;
	}	
	.vonal {
		width: 30%;
	}
	.motto {
		font-size:4vw;
		line-height:2vh;
	}
	.xqrter-h {
		width: 98%;
	}
	.half-h {
		width: 65%;
	}

	.double {
		zoom: 1.1;
		transform: scale(1.4);
		-ms-transform: scale(1.4);
		-webkit-transform: scale(1.4);
		-o-transform: scale(1.4);
		-moz-transform: scale(1.4);
		transform-origin: 0 0;
		-ms-transform-origin: 0 0;
		-webkit-transform-origin: 0 0;
		-o-transform-origin: 0 0;
		-moz-transform-origin: 0 0;
	}
	.radiodiv {
		font-size: 1em;
		margin-top: 2vh;
	}
	.suplimentdiv {
		font-size: 1em;
		padding-top: 0.5em;
	}
	
	.accordeondiv {
		height: 15vh;
	}
	.rightbottom {
		right: 2vw; 
		bottom: 0.5em;
	}

	.newheader {
      background-color: #f2f2f2;
      padding: 20px;
      text-align: center;
    }

	.head1 {
      color: #333;
      font-size: 28px;
      margin: 0;
    }

	.para {
      color: #777;
      font-size: 16px;
    }

	.icon {
      color: #777;
      font-size: 24px;
      margin-right: 10px;
    }

	.btn {
      background-color: #333;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      margin: 10px;
      cursor: pointer;
    }

	#map, #map2 { position: relative;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 200px; /* Set a fixed height for the map container */
    margin-top: 10px;  }
}

</style>

<body oncontextmenu="return false">

	<script>window.onload = (event) => serviciuales('eveningdiv');</script>

	
	<div style="background-color: LimeGreen;@media (max-width: 767px) {height: 60vh;}padding: 20px;text-align: center;font-family: Calibri;">
		<div style="width:40%;display:inline-block; border: none;">
			<img src="greenbox WHITE (2).png" class="logo" width="120" height="50">
		</div>	
		<div style="color: #333;font-size: 24px;margin: 0;font-family: calibri;">
			<p style="margin-bottom: 1px; font-weight: bold; color: white;">CURIERAT RAPID Door to Door</p>
			<!-- <p style="margin-bottom: 1px;">Door to Door</p> -->
			<p style="font-size: 18px;color: white;">În 90 de minute sau și mai repede...</p>
		</div>
		<button style="background-image: radial-gradient(100% 100% at 100% 0, #338917 0, #338917 100%);padding: 10px 20px;border: none;border-radius: 4px;font-size: 16px;margin: 10px;cursor: pointer;font-family: Calibri, Arial, sans-serif;color:white;" onclick="window.location.href = 'https://www.greenboxdelivery.ro/livapp/comanda.php'"><i class="fas fa-bicycle"></i> Trimite in Targu Mures</button>
		<button style="background-image: radial-gradient(100% 100% at 100% 0, #338917 0, #338917 100%);padding: 10px 20px;border: none;border-radius: 4px;font-size: 16px;margin: 10px;cursor: pointer;font-family: Calibri, Arial, sans-serif;color:white;" onclick="window.location.href = 'https://www.greenboxdelivery.ro/livapp/comanda_judeteana.php'"><i class="fas fa-truck"></i> Trimite in judetul Mures</button>
		<button style="background-image: radial-gradient(100% 100% at 100% 0, #338917 0, #338917 100%);padding: 10px 20px;border: none;border-radius: 4px;font-size: 16px;margin: 10px;cursor: pointer;font-family: Calibri, Arial, sans-serif;color:white;" onclick="window.open('tel: +40799400888')"><i class="fas fa-phone"></i> +40 799 400 888</button>
		<button style="background-image: radial-gradient(100% 100% at 100% 0, #338917 0, #338917 100%);padding: 10px 20px;border: none;border-radius: 4px;font-size: 16px;margin: 10px;cursor: pointer;font-family: Calibri, Arial, sans-serif;color:white;" onclick="window.open('https://www.greenboxdelivery.ro/livapp/partner.php', '_blank')"><i class="fas fa-user"></i> Log In Partener B2B</button>
		<button style="background-image: radial-gradient(100% 100% at 100% 0, #338917 0, #338917 100%);padding: 10px 20px;border: none;border-radius: 4px;font-size: 16px;margin: 10px;cursor: pointer;font-family: Calibri, Arial, sans-serif;color:white;" onclick="window.open('https://www.greenboxdelivery.ro/livapp/preturi.php?xxx=REVGQVVMVA', '_blank'); document.cookie='visszakossz=comanda.php; path=/; domain=.greenboxdelivery.ro'"><i class="fas fa-info-circle"></i> Preturile noastre</button>
	</div>

	<!-- <div class="header" style="height: 14vh; display: flex; border: none;">
		<div style="width:40%;display:inline-block; border: none;">
			<img src="greenbox WHITE (2).png" class="logo" width="120" height="50">
		</div>	
		<div class="motto" style="border: none;">
			CURIERAT RAPID <br>
			Door to Door <br>
			În 90 de minute sau și mai repede...
		</div>
		<div style="width:59%;display:inline-block;text-align:right;overflow:hidden;border: none;">
			<!-- <a style="color:darkred;font-weight:700;" onclick="window.open('tel: +40799400888')">Tel.: +40 799 400 888</a> 
			📞<button role="button" onclick="window.open('tel: +40799400888')" id="sunacargobutton"> 0799 400 888 </button>
			<br><button role="button" onclick="window.open('tel: +40799400888')" id="sunacargobutton"> 0799 400 888 </button>
		</div>
	</div> -->

	
<div id="changeable" class="mainwindow center-h effect" style="position: relative;">
<div style="width: 100%;text-align:left; margin-top: 10px;">
<button class="button-29" style="background-image: radial-gradient(100% 100% at 100% 0, #6cbd45 0, #6cbd45 100%); margin-left: 7px;" onclick="return false;"><b> Trimite in Targu Mures </b></button>
<button class="button-29" style="background-image: radial-gradient(100% 100% at 100% 0, grey 0, grey 100%); margin-right: 25px;float:right;" onclick="window.location.href = 'https://www.greenboxdelivery.ro/livapp/verifica.php'"><b> Verifica pretul livrarii </b></button>
</div>
    <!--DATE PETRU RIDICARE-->
	<input type="hidden" id="aktiviti"/>
	<div class="orderboxes effect"> <!-- sursa -->
		<div>
			<div style="display:inline-block;width:48%;text-align:left;"><small class="ordertext blue">Date pentru RIDICARE</small></div>
		</div>
	
		
		<br>


		<div class="radiodiv" style="display: none;">
			<input type="radio" name="radio_sursa" id="adresa_sursa" value="adresa_sursa" checked onchange="amAutobuz('sursa');"/>
			<label for="adresa_sursa">Adresa</label>
			<input type="radio" name="radio_sursa" id="smaxi" value="smaxi" onchange="amAutobuz('sursa');"/>
			<label for="smaxi">Autobuz</label>
		</div>

		<div id="eltunok_sursa" style='height: 350px;'>
		<div class="vonal">
			<small class="ordertext" style="display: none;">Localitate</small>
		</div>	
		<input type="text" style="display: none;" list="localitate" class="ordertext locselect half-h" onchange="evallocalitate(this.value,'sursa');" id="selectsursa">
		<datalist id="localitate">

<option value='Targu Mures'>Targu Mures</option><option value='Sancrai'>Sancrai</option><option value='Santana'>Santana</option><option value='Sangiorgiu'>Sangiorgiu</option><option value='Livezeni sat'>Livezeni sat</option><option value='Corunca'>Corunca</option><option value='Budiu Mic'>Budiu Mic</option><option value='Cristesti'>Cristesti</option><option value='Remetea'>Remetea</option>		</datalist>
		<br>
		<small style="color:red;display:none;" id="notasursa" style="display: none;">*strada trebuie aleasa obligatoriu din lista!</small>
			<div id="map" style="overflow: visible;"></div>
        <br>	    	
		<div class="white" style='width: 100%;'>
			<table class='table hidden white' id='rezsursa' name='rezsursa'></table>
		</div>
		<div class="vonal">
			<small class="ordertext" style="display: none;">Numarul</small>
		</div>	
		<input type='text' style="display: none;" class="ordertext locselect half-h" id='nr_sursa' name='nr_sursa' placeholder='Numar, bloc, apartament..' autocomplete='off' reuquired>
		<div>
		</div>
		</div>

		<input type='text' class="ordertext locselect xqrter-h" id='mentiune_sursa' style="display: none" placeholder='Detalii autobuz...' onchange="megvan(document.getElementById('mentiune_sursa').value, 'sursa');" autocomplete='off'>

		<div class="vonal">
			<small class="ordertext">Timp ridicare</small>
		</div>	
		<input type="time" class="ordertext locselect half-h" style="width: 100px; margin-left:16px;" id="timp_ridicare" name="timp_ridicare" min="00:00" max="23:59" step="60" pattern="[0-2][0-9]:[0-5][0-9]" onchange="serviciuales('eveningdiv')">
		<br>
		<input type='text' class="ordertext locselect xqrter-h" id='sursa' name='sursa' placeholder='Adresa ridicare...' autocomplete='off' disabled >
		<!-- onblur="evalblurstrada('sursa');" oninput="fetchAPI();" onchange="calcAria();megvan(document.getElementById('sursa').value, 'sursa');" -->
		<br>
		<input type='text' id="nume_sursa" class="ordertext locselect xqrter-h" placeholder='Numele Dvs. sau denumirea firmei...' autocomplete='off'>
		<br>
		<input type='text' id="tel_sursa" class="ordertext locselect xqrter-h" placeholder='Numar de telefon...' autocomplete='off'>

		<script>
			const now = new Date();
			const inOneHour = new Date(now.getTime() + 60 * 60 * 1000);
			var formattedTime = inOneHour.toLocaleTimeString('en-GB', {hour: '2-digit', minute:'2-digit'});
			document.getElementById("timp_ridicare").setAttribute("min", formattedTime);
			document.getElementById("timp_ridicare").setAttribute("value", formattedTime);
		</script>

	</div>
	<!--DATE PENTRU DESTINATI-->
	<div class="orderboxes effect"> <!-- destinatia -->
		<div>
			<div style="display:inline-block;width:48%;text-align:left;"><small class="ordertext green">Date pentru DESTINAȚIE</small></div>
		</div>
		
		<br>

		<div class="radiodiv" style="display: none;">
			<input type="radio" name="radio_destinatia" id="adresa_destinatia" value="adresa_destinatia" checked onchange="amAutobuz('destinatia');"/>
			<label for="adresa_destinatia">Adresa</label>
			<input type="radio" name="radio_destinatia" id="dmaxi" value="dmaxi" onchange="amAutobuz('destinatia');"/>
			<label for="dmaxi">Autobuz</label>
		</div>

		<div id="eltunok_destinatia" style="height: 350px;">
		<div class="vonal">
			<small class="ordertext" style="display: none;">Localitate</small>
		</div>	
		<input type="text" style="display: none;" list="localitate" class="ordertext locselect half-h" onchange="evallocalitate(this.value,'destinatia');" id="selectdestinatia">
		<br>
		<small style="color:red;display:none;" id="notadestinatia">*strada trebuie aleasa obligatoriu din lista!</small>
		<div class="white" style='width: 100%;'>
			<table class='table hidden white' id='rezdest' name='rezdest'></table>
		</div>
		<div class="vonal">
			<small class="ordertext" style="display: none;">Numarul</small>
		</div>	
		<div id="map2" style="overflow: visible;"></div>
		<input type='text' style="display: none;" class="ordertext locselect half-h" id='nr_destinatia' name='nr_destinatia' placeholder='Numar, bloc, apartament..' autocomplete='off'>

		</div>

		<input type='text' class="ordertext locselect xqrter-h" id='mentiune_destinatia' style="display: none" name='' placeholder='Detalii autobuz...' onchange="megvan(document.getElementById('mentiune_destinatia').value, 'destinatia');" autocomplete='off'>

		<div>
		<div class="vonal">
			<small class="ordertext">Timp predare</small>
		</div>
			<input type="time" class="ordertext locselect half-h" style="width: 100px; margin-left:16px;" id="timp_predare" name="timp_predare" min="00:00" max="23:59" step="60" pattern="[0-2][0-9]:[0-5][0-9]">
			<input type='text' class="ordertext locselect xqrter-h" id='destinatia' name='destinatia' placeholder='Adresa destinatie...' list='strazi' autocomplete='off' disabled >
			<!-- onblur="evalblurstrada('destinatia');" onchange="calcAria();megvan(document.getElementById('destinatia').value, 'destinatia');" -->
			<input type='text' class="ordertext locselect xqrter-h" id='nume_destinatia' name='nume_destinatia' placeholder='Numele Dvs. sau denumirea firmei...' autocomplete='off'>
		<br>
		<input type='text' class="ordertext locselect xqrter-h" id='tel_destinatia' name='tel_destinatia' placeholder='Numar de telefon...' autocomplete='off'>
		</div>
		

		<script>
			const in90Min = new Date(now.getTime() + 90 * 60 * 1000);
			formattedTime = in90Min.toLocaleTimeString('en-GB', {hour: '2-digit', minute:'2-digit'});
			document.getElementById("timp_predare").setAttribute("min", formattedTime);
			document.getElementById("timp_predare").setAttribute("value", formattedTime);
		</script>

		<br>
		<div class="accordeonheader" style="border: 0.5px solid lightgrey;border-radius:3px;height:2.2em;background-color:#f2f2f2;">
			<div class="suplimentdiv" style="display:inline-block;width:60%;text-align:left;">
				<span style="font-size:0.85em;">Taxa de baza (90 minute)</span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<span id="totalprice" style="font-size:1.2em;font-weight:700;">0.00 lei</span>
			</div>
		</div>
		<br>
		<!--BUS-->
		<div class="accordeonheader" style="border: 0.5px solid lightgrey;border-radius:3px;height:2.2em;background-color:#f2f2f2;display:none;">
			<div class="suplimentdiv" style="display:inline-block;width:60%;text-align:left;">
				<span style="font-size:0.85em;">Taxa AUTOBUS</span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<span id="totalprice_maxi" style="font-size:1.2em;font-weight:700;">0.00 lei</span>
			</div>
		</div>
		<div class="accordeonheader" style="border: 0.5px solid lightgrey;border-radius:3px;height:2.2em;background-color:#f2f2f2;">
			<div class="suplimentdiv" style="display:inline-block;width:60%;text-align:left;">
				<span style="font-size:0.85em;">Distanta</span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<span id="distance" style="font-size:1.2em;font-weight:700;">0.00 km</span>
			</div>
		</div>
		
		
		<!--
		<div class="accordeonheader" style="border: 0.5px solid lightgrey;border-radius:3px;height:2.2em;background-color:#f2f2f2;">    
		    <div class="accordeonheader inchis" id="bus">
			<div class="radiodiv" style="display:inline-block;width:60%;text-align:left;">
				<input type="radio" id="busradio" name="busradio" onclick="return false;" />
				<span onclick="desface('bus');">BUS</span>
				<span><img src="info.png" width="20" height="20" onclick="desface('bus');"/></span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<h3 id="busprice" onclick="desface('bus');" >.</h3>
			</div>
		</div>
			<div class="accordeondiv" id="busdiv">
				Extraoptiunea se activeaza automat daca la locatia de ridicare sau la destinatie bifezi patratelul AUTOBUZ. Pentru un cost suplimentar de 5 RON/livrare noi asteptam autobuzul (sau maxi-taxi) si preluam/predam coletul tau.
				<button class="button-29 rightbottom" role="button" onclick="serviciuales(this.parentNode.id);" id="busbutton"> Alege </button>
			</div>
		-->	
		
	</div>

	<!--DETALII PACHET-->
	<div class="orderboxes effect"> <!-- detalii pachet -->
		<div>
			<div style="display:inline-block;width:48%;text-align:left;"><small class="ordertext olive">Detalii pachet/Greutate</small></div>
			<div style="display:inline-block;width:48%;text-align:right;">
			</div>
		</div>
<!--
		<input type='text' class="ordertext locselect xqrter-h" placeholder='Scurta descriere..' autocomplete='off'>
		<br>
-->
		<div class="radiodiv">
			<input type="radio" name="greutate" id="sub5kg" value="sub5kg" checked onchange="stabilirepret();"/>
			<label for="sub5kg">0-5kg</label>
			<input type="radio" name="greutate" id="sub20kg" value="sub20kg" onchange="stabilirepret();"/>
			<label for="sub20kg">5-20kg</label>	
			
			<div class="radiodiv">
				<p class="vonal ordertext">20kg+ (Cargo)</p>
				<button class="vonal ordertext" role="button" onclick="window.open('tel: +40799400888')" id="sunacargobutton"> Sună </button>
			</div>	
		</div>
		<br>
		<input type='text' class="ordertext locselect xqrter-h" id='dimensiuni' name='' placeholder='Mentiuni..' autocomplete='off'>
		<br>
		
		<div class="accordeonheader" style="border: 0.5px solid lightgrey;border-radius:3px;height:2.2em;background-color:#f2f2f2;">
			<div class="suplimentdiv" style="display:inline-block;width:60%;text-align:left;">
				<span style="font-size:0.85em;">Taxa greutate suplimentara</span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<span id="totalprice_greutate" style="font-size:1.2em;font-weight:700;">0.00 lei</span>
			</div>
		</div>

	</div>

	<div class="orderboxes effect"> <!-- servicii livrare -->
		<div>
			<div style="display:inline-block;width:48%;text-align:left;"><small class="ordertext maroon">Servicii livrare</small></div>
			<div style="display:inline-block;width:48%;text-align:right;"></div>
		</div>
		<br>
<!-- BASIC -->
		<!--<div class="accordeonheader serviciuales" id="basic">
			<div class="radiodiv" style="display:inline-block;width:60%;text-align:left;">
				<input type="radio" checked id="basicradio" name="basicradio" onclick="return false;" />
				<span onclick="desface('basic');">BASIC: 90 minute</span>
				<span><img src="info.png" width="20" height="20" onclick="desface('basic');"/></span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<h3 id="basicprice" onclick="desface('basic');" >.</h3>
			</div>
		</div>
			<div class="accordeondiv" id="basicdiv">
				Serviciul de livrare BASIC 90 minute este cel implicit valabil la toate livrarile noastre. Timp standard de livrare: aproximativ 90 de minute de la primirea comenzii, colet de pana la 5kg.
				<button class="button-29 rightbottom" role="button" onclick="serviciuales(this.parentNode.id);" id="basicbutton"> Renunta </button>
		</div>
		-->

<!-- SPEEDY -->
		<div class="accordeonheader deschis" id="speedy">
			<div class="radiodiv" style="display:inline-block;width:60%;text-align:left;">
				<input type="radio" id="speedyradio" name="speedyradio" onclick="desface('speedy'); return false;" />
				<span onclick="desface('speedy');">SPEEDY: 45 minute</span>
				<span><img src="info.png" width="20" height="20" onclick="desface('speedy');"/></span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<h3 id="speedyprice" onclick="desface('speedy');">.</h3>
			</div>
		</div>
			<div class="accordeondiv" id="speedydiv">
			Serviciul de livrare SPEEDY este o extraoptiune cand clientul vrea livrarea urgent in maximum 45 minute. Serviciul are un cost suplimentar de +5.00 RON.
				<button class="button-29 rightbottom" role="button" onclick="serviciuales(this.parentNode.id);" id="speedybutton"> Alege </button>
			</div>

<!-- SLOW -->
		<div class="accordeonheader inchis" id="slow">
			<div class="radiodiv" style="display:inline-block;width:60%;text-align:left;">
				<input type="radio" id="slowradio" name="slowradio" onclick="desface('slow'); return false;" />
				<span onclick="desface('slow');">SLOW: 3-4 ore</span>
				<span><img src="info.png" width="20" height="20" onclick="desface('slow');"/></span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<h3 id="slowprice" onclick="desface('slow');" >.</h3>
			</div>
		</div>
			<div class="accordeondiv" id="slowdiv">
			<span>Serviciul de livrare SLOW este o extraoptiune pentru comenzile care nu sunt atat de urgente. Timp de livrare este aproximativ 3-4 ora de la primirea comenzii si clientul are un avantaj de <b>-2.00 RON</b> versus pretul de baza.</span>
			<br>
			<button class="button-29 rightbottom" role="button" onclick="serviciuales(this.parentNode.id);" id="slowbutton"> Alege </button>
			</div>
			
<!-- EVENING -->
		<div class="accordeonheader deschis" id="evening" style="display: none;">
			<div class="radiodiv" style="display:inline-block;width:60%;text-align:left;">
				<input type="radio" id="eveningradio" name="eveningradio" onclick="desface('evening'); return false;" />
				<span onclick="desface('evening');">EVENING: intre 18h-22h</span>
				<span><img src="info.png" width="20" height="20" onclick="desface('evening');"/></span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<h3 id="eveningprice" onclick="desface('evening');">.</h3>
			</div>
		</div>
			<div class="accordeondiv" id="eveningdiv">
				Livrarile intre orele 18:00 si 22:00 vor avea un cost suplimentar de +5 RON. Taxa va fi adaugata automat, dupa setarea timpului de ridicare de mai sus.
				<button style="display: none;" class="button-29 rightbottom" role="button" onclick="serviciuales(this.parentNode.id);" id="eveningbutton"> Alege </button>
			</div>
			

<!-- TIME -->
		<div class="accordeonheader deschis" id="time" style="display:none;">
			<div class="radiodiv" style="display:inline-block;width:60%;text-align:left;">
				<input type="radio" id="timeradio" name="timeradio" onclick="desface('time'); return false;" />
				<span onclick="desface('time');">Save YOUR TIME</span>
				<span><img src="info.png" width="20" height="20" onclick="desface('time');"/></span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<h3 id="timeprice" onclick="desface('time');">.</h3>
			</div>
		</div>
			<div class="accordeondiv" id="timediv">
				Ne poti trimite la cumparaturi, putem sta la rand in locul tau la firme de curierat sau la ghisee etc. Practic iti oferim posibilitatea sa iti economisesti timpul mai pretios decat tariful nostru pentru aceasta extraoptiune: 5 RON/10min.
				<button class="button-29 rightbottom" role="button" onclick="serviciuales(this.parentNode.id);" id="timebutton"> Alege </button>
			</div>

<!-- BUS 
		
		<div class="accordeonheader inchis" id="bus">
			<div class="radiodiv" style="display:inline-block;width:60%;text-align:left;">
				<input type="radio" id="busradio" name="busradio" onclick="return false;" />
				<span onclick="desface('bus');">BUS</span>
				<span><img src="info.png" width="20" height="20" onclick="desface('bus');"/></span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<h3 id="busprice" onclick="desface('bus');" >.</h3>
			</div>
		</div>
			<div class="accordeondiv" id="busdiv">
				Extraoptiunea se activeaza automat daca la locatia de ridicare sau la destinatie bifezi patratelul AUTOBUZ. Pentru un cost suplimentar de 5 RON/livrare noi asteptam autobuzul (sau maxi-taxi) si preluam/predam coletul tau.
				<button class="button-29 rightbottom" role="button" onclick="serviciuales(this.parentNode.id);" id="busbutton"> Alege </button>
			</div>
	-->		
<!-- CIRCUIT -->
		<div class="accordeonheader inchis" id="circuit" style="display: none;">
			<div class="radiodiv" style="display:inline-block;width:60%;text-align:left;">
				<input type="radio" id="circuitradio" name="circuitradio" onclick="return false;" />
				<span onclick="desface('circuit');">CIRCUIT: peste 5 pachete</span>
				<span><img src="info.png" width="20" height="20" onclick="desface('circuit');"/></span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<h3 id="circuitprice" onclick="desface('circuit');" >.</h3>
			</div>
		</div>
			<div class="accordeondiv" id="circuitdiv">
				Acest serviciu este dedicat partenerilor care au de trimis mai multe pachete in acelasi timp. In cazul expedierii a 5-10 pachete oferim reducere de 10%, iar pentru peste 10 pachete de ridicat in acelasi timp din acelasi loc oferim 20%.
				<button class="button-29 rightbottom" role="button" onclick="serviciuales(this.parentNode.id);" id="circuitbutton"> Suna </button>
			</div>
			
<!-- CARGO -->
		<div class="accordeonheader deschis" id="cargo" style="display: none;">
			<div class="radiodiv" style="display:inline-block;width:60%;text-align:left;">
				<input type="radio" id="cargoradio" name="cargoradio" onclick="return false;" />
				<span onclick="desface('cargo');">CARGO</span>
				<span><img src="info.png" width="20" height="20" onclick="desface('cargo');"/></span>
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<h3 id="cargoprice" onclick="desface('cargo');">.</h3>
			</div>
		</div>
			<div class="accordeondiv" id="cargodiv">
				Servicul este destinat clientilor nostri care doresc sa livram pachete intre 20 si 300kg. Coletul poate avea dimensiune maxima: 1,5m x 1,2m si inaltime 1,10m. 
				<button class="button-29 rightbottom" role="button" onclick="serviciuales(this.parentNode.id);" id="cargobutton"> Suna </button>
			</div>
	</div>

	<div class="orderboxes effect"> <!-- sumar es checkout -->
		<div>
			<div style="display:inline-block;width:48%;text-align:left;"><small class="ordertext orange">Sumar</small></div>
			<div style="display:inline-block;width:48%;text-align:right;"></div>
		</div>
		<br>
		<div class="accordeonheader deshis effect">
			<div class="radiodiv" style="display:inline-block;width:60%;text-align:left;">
				TOTAL
			</div>
			<div style="display:inline-block;width:29%;text-align:right;">
				<h2 id="total">0.00 lei</h2>
			</div>
		</div>
		<br>
		<input type="checkbox" name="termeni" id="termeni">
		<label id="termeni_label" for="termeni">Accept</label><a id="termeni_label" href="greenboxdelivery.ro/termeni-de-livrare/" target="_blank"> Termeni de livrare.</a>
		<div style="width: 100%;text-align:center; margin-top: 10px;">
			<button class="button-29" role="button" id="trimite_comanda" onclick="trimiteComanda();"> Trimite comanda </button>
		</div>	
		<br>
	</div>

</div>

<script>
	var aria;
	var cartier_ridicare;
	var cartier_predare;
	var address_source;
	var address_destination;
	var address;
	var address2;
	var coordinates;
	var coordinates2;

	const apiKey = '5b3ce3597851110001cf62482f25cbf5ae504234a852364d21b180e8';

	//Add your LocationIQ Maps Access Token here (not the API token!)
	locationiq.key = 'pk.44dea3a2a30011dbb0ed593ce24bd887';
	//Define the map and configure the map's theme
	var map = new maplibregl.Map({
		container: 'map',
		style: locationiq.getLayer("Streets"),
		zoom: 12,
		center: [24.561196, 46.5446253]
	});
	
	//Define layers you want to add to the layer controls; the first element will be the default layer
	var layerStyles = {
		"Streets": "streets/vector",
		"Dark": "dark/vector",
		"Light": "light/vector"
	};
	
	//Add Geocoder control to the map
	var geocoder = new MapboxGeocoder({
		accessToken: locationiq.key,
		mapboxgl: maplibregl,
		limit: 5,
		dedupe: 1,
		viewbox: [24.46086645610846, 46.81476444349756, 24.75671923327672, 46.492846113099574],
		bounded: 1,
		marker: {
			color: 'green'
		},
		flyTo: {
			screenSpeed: 7,
			speed: 4
		}
	});

	// 24.54675365689657, 46.46935560601709, 24.696578442552482, 46.824995893709676
	
	//Add Geocoder control to the map
	map.addControl(geocoder, 'top-left');

	// Listen for the 'result' event
	geocoder.on('result', function(e) {
		// Retrieve address details from the event object
		address = e.result.address;
		coordinates = e.result.geometry.coordinates;
		console.log("Selected address:", address);
		address_source = (address.name != address.road ? address.name + (address.road !== undefined ? ", " + address.road : "") : (address.road !== undefined ? address.road : "")) + (address.house_number !== undefined ? " " + address.house_number : "") + ", " + address.city;
		document.getElementById("sursa").value = address_source;
		megvan(address_source, 'sursa');
	});

	map.resize();

	//Add your LocationIQ Maps Access Token here (not the API token!)
	locationiq.key = 'pk.44dea3a2a30011dbb0ed593ce24bd887';
	//Define the map and configure the map's theme
	var map2 = new maplibregl.Map({
		container: 'map2',
		style: locationiq.getLayer("Streets"),
		zoom: 12,
		center: [24.561196, 46.5446253]
	});
	
	//Define layers you want to add to the layer controls; the first element will be the default layer
	var layerStyles = {
		"Streets": "streets/vector",
		"Dark": "dark/vector",
		"Light": "light/vector"
	};

	var geocoder2 = new MapboxGeocoder({
		accessToken: locationiq.key,
		mapboxgl: maplibregl,
		limit: 5,
		dedupe: 1,
		viewbox: [24.46086645610846, 46.81476444349756, 24.75671923327672, 46.492846113099574],
		bounded: 1,
		marker: {
			color: 'green'
		},
		flyTo: {
			screenSpeed: 7,
			speed: 4
		}
	});
	
	//Add Geocoder control to the map
	map2.addControl(geocoder2, 'top-left');

	// Listen for the 'result' event
	geocoder2.on('result', function(e) {
		// Retrieve address details from the event object
		address2 = e.result.address;
		coordinates2 = e.result.geometry.coordinates;
		console.log("Selected address:", address2);
		address_destination = (address2.name != address2.road ? address2.name + (address2.road !== undefined ? ", " + address2.road : "") : (address2.road !== undefined ? address2.road : "")) + (address2.house_number !== undefined ? " " + address2.house_number : "") + ", " + address2.city;
		document.getElementById("destinatia").value = address_destination;
		megvan(address_destination, 'destinatia');
	});

	map2.resize();
    // 24.5577, 46.5407, 24.7111, 46.7750

	function getDistance() {
		const pickup = document.getElementById('sursa').value;
		const destinatie = document.getElementById('destinatia').value;

		if ((coordinates && coordinates.length === 2) || pickup) {
			if ((coordinates2 && coordinates2.length === 2) || destinatie) {
				var originPromise = coordinates ? Promise.resolve({latitude: coordinates[1], longitude: coordinates[0]}) : searchPlace(pickup);
				var destinationPromise = coordinates2 ? Promise.resolve({latitude: coordinates2[1], longitude: coordinates2[0]}) : searchPlace(destinatie);

				Promise.all([originPromise, destinationPromise])
				.then(([origin, destination]) => {
					console.log('Origin Latitude:', origin.latitude);
					console.log('Origin Longitude:', origin.longitude);

					console.log('Destination Latitude:', destination.latitude);
					console.log('Destination Longitude:', destination.longitude);

					// Calculate the distance between origin and destination
					return calculateDistance(`${origin.longitude},${origin.latitude}`, `${destination.longitude},${destination.latitude}`);
				})
				.then(distance => {
					console.log('Route Distance:', distance.toFixed(2), 'kilometers');
					document.getElementById("distance").innerHTML = distance.toFixed(2) + " km";
					calcAria();
					// megvan();
					distance = parseFloat(distance.toFixed(2));
					const ridicare = parseFloat(12.00);
					const km = parseFloat(1.20);
					const bus = parseFloat(5.00);
					const greutate = parseFloat(5.00);
					const urgenta = parseFloat(5.00);
					const slow = parseFloat(-2.00);
					const limitrofe = parseFloat(30.00);

					console.log(ridicare, km, distance, aria);

					const price = aria < 3 ? ridicare + Math.ceil(distance * 2) / 2 * 2 * km : limitrofe;

					document.getElementById('totalprice').innerHTML = price.toFixed(2) + " lei";

					stabilirepret();
				})
				.catch(error => {
					console.error(error);
				});
			}
		}
	}

	function searchPlace(query) {
		var latitude = "";
		var longitude = "";

		return fetch(`https://api.openrouteservice.org/geocode/search?api_key=${apiKey}&text=${encodeURIComponent(query)}`)
			.then(response => {
				if (!response.ok) {
					throw new Error('Error: Unable to make the API request.');
				}
				return response.json();
			})
			.then(openRouteData => {
				if (openRouteData.features && openRouteData.features.length > 0) {
					const result = openRouteData.features[0];
					const coordinates = result.geometry.coordinates;
					latitude = coordinates[1];
					longitude = coordinates[0];
					return { latitude, longitude };
				} else {
					throw new Error(`No results found for the search query: ${query}`);
				}
			})
			.catch(error => {
				// Handle errors
				console.error('Error:', error);
			});
	}

    function calculateDistance(origin, destination) {
        const url = `https://api.openrouteservice.org/v2/directions/foot-walking?api_key=${apiKey}&start=${origin}&end=${destination}`;
        return fetch(url)
            .then(response => {
            if (!response.ok) {
                throw new Error('Error: Unable to make the API request.');
            }
            return response.json();
            })
            .then(data => {
            if (data.features && data.features.length > 0) {
                const distance = data.features[0].properties.summary.distance / 1000;
                return distance;
            } else {
                throw new Error('Unable to calculate route distance.');
            }
        });
    }

	function removeSpecialCharacters(id) {
		return document.getElementById(id).value.replace(/[^a-zA-Z0-9.,:;\/\s]/g, '');
	}

	function trimiteComanda(tip = 'nou') {
		var errors = "";
		var now = new Date();
		var [hours, minutes] = document.getElementById("timp_ridicare").value.split(':');
		const offsetMinutes = now.getTimezoneOffset();
		now.setHours(hours); 
		now.setMinutes(minutes);
		const timp_ridicare = (now).toLocaleString('af-ZA', {
			timeZone: 'Europe/Bucharest',
			hour12: false,
			year: 'numeric',
			month: '2-digit',
			day: '2-digit',
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
		}).replace(',', '').replace('/', '-').replace('/', '-').substring(0, 19).replace("T", " ");

		[hours, minutes] = document.getElementById("timp_predare").value.split(':');
		now.setHours(hours);
		now.setMinutes(minutes);
		const timp_predare = (now).toLocaleString('af-ZA', {
			timeZone: 'Europe/Bucharest',
			hour12: false,
			year: 'numeric',
			month: '2-digit',
			day: '2-digit',
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
		}).replace(',', '').replace('/', '-').replace('/', '-').substring(0, 19).replace("T", " ");

		now = new Date();
		const timp_comanda = (now).toLocaleString('af-ZA', {
			timeZone: 'Europe/Bucharest',
			hour12: false,
			year: 'numeric',
			month: '2-digit',
			day: '2-digit',
			hour: '2-digit',
			minute: '2-digit',
			second: '2-digit'
		}).replace(',', '').replace('/', '-').replace('/', '-').substring(0, 19).replace("T", " ");


		if (!document.getElementById("termeni").checked) {
			errors += "Nu ai acceptat termenii!\n";
		}

		if (document.getElementById("nume_sursa").value == '') {
			errors += "Nu ai introdus numele expeditorului!\n";
		}

		if (document.getElementById("tel_sursa").value == '') {
			errors += "Nu ai introdus numarul de telefon al expeditorului!\n";
		}

		var json_text = '{' +
			'"data": "' + new Date().toJSON().slice(0, 10) + '", ' +
			'"nume_ridicare": "' + removeSpecialCharacters("nume_sursa") + '", ' +
			'"tel_ridicare": "' + removeSpecialCharacters("tel_sursa") + '", ';

		// var json_text = '{' +
		// 	'"data": "' + new Date().toJSON().slice(0, 10) + '", ' +
		// 	'"nume_ridicare": "' + document.getElementById("nume_sursa").value + '", ' +
		// 	'"tel_ridicare": "' + document.getElementById("tel_sursa").value + '", ';

		if (document.getElementById("adresa_sursa").checked) {
			if (document.getElementById("sursa").value == '') {
				errors += "Nu ai introdus adresa expeditorului!\n";
			}

			// if (document.getElementById("nr_sursa").value == '') {
			// 	errors += "Nu ai introdus numarul adresei expeditorului!\n";
			// }

			json_text = json_text +
				'"localitate_ridicare": "", ' +
				'"adresa_ridicare": "' + document.getElementById("sursa").value + '", ' +
				'"nr_ridicare": "", ' +
				'"autobuz_ridicare": "", ';

			// json_text = json_text +
			// 	'"localitate_ridicare": "' + document.getElementById("selectsursa").value + '", ' +
			// 	'"adresa_ridicare": "' + document.getElementById("sursa").value + '", ' +
			// 	'"nr_ridicare": "' + document.getElementById("nr_sursa").value + '", ';
		} else {
			if (document.getElementById("mentiune_sursa").value == '') {
				errors += "Nu ai introdus detaliile autobuzului de ridicare a pachetului!\n";
			}

			json_text = json_text +
				'"localitate_ridicare": "", ' +
				'"adresa_ridicare": "", ' +
				'"nr_ridicare": "", ' +
				'"autobuz_ridicare": "' + removeSpecialCharacters("mentiune_sursa") + '", ';
		}

		json_text = json_text +
				'"timp_ridicare": "' + timp_ridicare + '", ' + 
				'"cartier_ridicare": "' + cartier_ridicare + '", ';

		if (document.getElementById("nume_destinatia").value == '') {
			errors += "Nu ai introdus numele destinatarului!\n";
		}

		if (document.getElementById("tel_destinatia").value == '') {
			errors += "Nu ai introdus numarul de telefon al destinatarului!\n";
		}

		json_text = json_text +
			'"nume_predare": "' + removeSpecialCharacters("nume_destinatia") + '", '+
			'"tel_predare": "' + removeSpecialCharacters("tel_destinatia") + '", ';

		if (document.getElementById("adresa_destinatia").checked) {
			if (document.getElementById("destinatia").value == '') {
				errors += "Nu ai introdus adresa destinatarului!\n";
			}

			// if (document.getElementById("nr_destinatia").value == '') {
			// 	errors += "Nu ai introdus numarul adresei destinatarului!\n";
			// }

			json_text = json_text +
				'"localitate_predare": "", ' +
				'"adresa_predare": "' + document.getElementById("destinatia").value + '", ' +
				'"nr_predare": "", ' +
				'"autobuz_predare": "", ';
		} else {
			if (document.getElementById("mentiune_destinatia").value == '') {
				errors += "Nu ai introdus detaliile autobuzului pentru trimiterea pachetului!\n";
			}

			json_text = json_text +
				'"localitate_predare": "", ' +
				'"adresa_predare": "", ' +
				'"nr_predare": "", ' +
				'"autobuz_predare": "' + removeSpecialCharacters("mentiune_destinatia") + '", ';
		}

		json_text = json_text +
				'"timp_predare": "' + timp_predare + '", ' + 
				'"cartier_predare": "' + cartier_predare + '", ' +
				'"aria": "' + aria + '", ' +
				'"timp_comanda": "' + timp_comanda + '", ' +
				'"greutate": "' + (document.getElementById("sub5kg").checked ? 0 : 1) + '", ' +
				'"mesaj": "' + removeSpecialCharacters("dimensiuni") + '", ' +
				'"speedy": "' + (document.getElementById("speedyradio").checked ? 1 : 0) + '", ' +
				'"slow": "' + (document.getElementById("slowradio").checked ? 1 : 0) + '", ' +
				'"save_your_time": "' + (document.getElementById("timeradio").checked ? 1 : 0) + '", ' +
				'"taxa_baza": "' + parseFloat(document.getElementById("totalprice").innerHTML) + '", ' +
				'"taxa_autobuz": "' + parseFloat(document.getElementById("totalprice_maxi").innerHTML) + '", ' +
				'"taxa_greutate": "' + parseFloat(document.getElementById("totalprice_greutate").innerHTML) + '", ' +
				'"taxa_speedy": "' + (!parseFloat(document.getElementById("speedyprice").innerHTML) ? 0 : parseFloat(document.getElementById("speedyprice").innerHTML)) + '", ' +
				'"taxa_slow": "' + (!parseFloat(document.getElementById("slowprice").innerHTML) ? 0 : parseFloat(document.getElementById("slowprice").innerHTML)) + '", ' +
				'"taxa_evening": "' + (!parseFloat(document.getElementById("eveningprice").innerHTML) ? 0 : parseFloat(document.getElementById("eveningprice").innerHTML)) + '", ' +
				'"taxa_save_your_time": "' + (!parseFloat(document.getElementById("timeprice").innerHTML) ? 0 : parseFloat(document.getElementById("timeprice").innerHTML)) + '", ' +
				'"taxa_total": "' + parseFloat(document.getElementById("total").innerHTML) + '", ' +
				'"distanta": "' + parseFloat(document.getElementById('distance').innerHTML.slice(0, -3)) + '"}';

		var json = JSON.parse(json_text);

		if (errors.length) {
			alert(errors);
			return;
		}

		if (confirm("Detalii comanda\n\n" + 
				"Nume expeditor: " + document.getElementById("nume_sursa").value + "\n" +
				"Telefon expeditor: " + document.getElementById("tel_sursa").value + "\n" +
				"Adresa expeditor: " + document.getElementById("sursa").value + "\n" +
				"Timp ridicare: " + document.getElementById("timp_ridicare").value + "\n\n" +
				"Nume destinatar: " + document.getElementById("nume_destinatia").value + "\n" +
				"Telefon destinatar: " + document.getElementById("tel_destinatia").value + "\n" +
				"Adresa destinatar: " + document.getElementById("destinatia").value + "\n" +
				"Timp predare: " + document.getElementById("timp_predare").value + "\n\n" +
				"Total: " + document.getElementById("total").innerHTML
		)) {
			var xhr = new XMLHttpRequest();

			var url = "procesare_comanda.php?tip="+tip;

			if ("".length) {
				url = url + "&id=" + "";
			}

			xhr.open("POST", url, true);
			xhr.setRequestHeader("Content-type", "application/json");
			xhr.onreadystatechange = function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					var resp = xhr.responseText.split("\n");
					console.log(resp);
					if (tip == 'nou') {
						window.location.replace("confirmare_comanda.php?id="+resp[resp.length-1]);
					}
					if (tip == 'update') {window.close();}
				}
			};

			xhr.send(json_text);
		} else {
			return;
		}

	}

	function updateArea() {
        const distanta = document.getElementById('distance').innerHTML.slice(0, -3);

        var area = 0;

        if (distanta < 1.5) {
            area = 0;
        } else {
            if (distanta < 3) {
                area = 1;
            } else {
                if (distanta < 6) {
                    area = 2;
                } else {
                    if (distanta >= 6) {
                        area = 3;
                    }
                }
            }
        }

		if (address && address2) {
			if (address.city) {
				if (address.city != 'Târgu Mureș') {
					area = 3;
				}
			} else {
				if (address.name != 'Târgu Mureș') {
					area = 3;
				}
			}

			if (address2.city) {
				if (address2.city != 'Târgu Mureș') {
					area = 3;
				}
			} else {
				if (address2.name != 'Târgu Mureș') {
					area = 3;
				}
			}
		}

		return area;
    }

	function calcAria() {
		var adresa_ridicare = "";
		var adresa_predare = "";

		adresa_ridicare = document.getElementById("sursa").value + " ";
		adresa_predare = document.getElementById("destinatia").value + " ";

		var maxi_ridicare = document.getElementById("mentiune_sursa").value;
		var maxi_predare = document.getElementById("mentiune_destinatia").value;

		if (document.getElementById("selectsursa").selectedIndex) {
			adresa_ridicare = adresa_ridicare + address.road + " " + address.house_number + " " + address.city + " ";
		}

		if (document.getElementById("selectdestinatia").selectedIndex) {
			adresa_predare = adresa_predare + address2.road + " " + address2.house_number + " " + address2.city + " ";
		}

		// adresa_ridicare = adresa_ridicare + document.getElementById("sursa").value;
		// adresa_predare = adresa_predare + document.getElementById("destinatia").value;

		console.log(adresa_ridicare, adresa_predare);

		aria = "NINCS";

		if (maxi_ridicare.length) {
			adresa_ridicare = maxi_ridicare;
		}

		if (maxi_predare.length) {
			adresa_predare = maxi_predare;
		}

		if (adresa_ridicare.length && adresa_predare.length) {
			var xhr = new XMLHttpRequest();

			xhr.open("POST", "xhr.php", false);
			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			xhr.onreadystatechange = function() {
				if (xhr.readyState === 4 && xhr.status === 200) {
					resp = xhr.responseText.trim().replace(/\n/g, " ").split(" "); 
					aria = updateArea();
					cartier_ridicare = resp[0];
					cartier_predare = resp[1];
				}
			}

			const data = "ridicare=" + encodeURIComponent(adresa_ridicare) + "&predare=" + encodeURIComponent(adresa_predare);
			xhr.send(data);
		}

		console.log(aria, cartier_ridicare, cartier_predare);
		return aria;
	}
	
	function desface(elem) {
		var el = elem+'div';
		document.getElementById(el).style.display = (document.getElementById(el).style.display=='block' ? 'none' : 'block');
	};
	
	
	function evallocalitate(oras,ctrl) {
		if (oras != 'Targu Mures') {
			document.getElementById('totalprice').innerHTML = "25.00 lei";
		} else {
			document.getElementById('totalprice').innerHTML = "0.00 lei";
		}
		document.getElementById(ctrl).value = "";
		document.getElementById(ctrl).focus();
		stabilirepret();
	};

	function evalblurstrada(ctrl) {
		let ujctrl='nota'+ctrl;
		if (document.getElementById('aktiviti').value=='no') {
			document.getElementById(ujctrl).style.display = "block";
			document.getElementById(ctrl).value = "";
			document.getElementById(ctrl).focus();
		};
	};
	
	async function serviciuales(ales) {
		var xales = ales.slice(0,-3);
		var elem = document.getElementById(xales);
		var ridicare = document.getElementById("timp_ridicare").value;
		
		// a basic-rol nem lehet lemondani
		if (xales=='basic') {
			await Swal.fire({
				position: 'center',
				icon: 'warning',
				title: 'Nu puteti renunta la tariful de baza',
				showConfirmButton: false,
				timer: 1500
			});
			return;
		};
	
		//nem lehet gyors is lassu is
		if (xales=='slow') {
			document.getElementById('speedyradio').checked = false;
			document.getElementById('speedybutton').innerHTML = "Alege";
		};
		if (xales=='speedy') {
			document.getElementById('slowradio').checked = false;
			document.getElementById('slowbutton').innerHTML = "Alege";
		};

		if (xales == 'evening'){
			const timeString = ridicare;
			const parts = timeString.split(':');
			const hours = parseInt(parts[0]);
			const minutes = parseInt(parts[1]);
			const date = new Date();
			date.setHours(hours);
			date.setMinutes(minutes+30);
			const predare = new Date(date + 60 * 60 * 1000);
			formattedTime = predare.toLocaleTimeString('en-GB', {hour: '2-digit', minute:'2-digit'});
			document.getElementById("timp_predare").setAttribute("min", formattedTime);
			document.getElementById("timp_predare").setAttribute("value", formattedTime); 

			if (ridicare >= '18:00'){
				let elname4toggle = elem.id+'radio';
				document.getElementById(elname4toggle).checked = true;
				document.getElementById(ales).style.display="none";
				stabilirepret();
				return;
			}  

			document.getElementById('eveningradio').checked = false;
			stabilirepret(); return
		}

		let elname4toggle = elem.id+'radio';
		let el4toggle = document.getElementById(elname4toggle);
		el4toggle.checked = (el4toggle.checked==true ? false : true); 
		var text = document.getElementById(xales+"button").innerHTML;
		document.getElementById(xales+"button").innerHTML = (text.trim()=="Alege" ? " Renunta " : " Alege ");
		document.getElementById(ales).style.display="none";
		stabilirepret();
	};
	
    function streetSearch(str,tip) {
		let ctrl = "select"+tip;
		if (document.getElementById(ctrl).value != 'Targu Mures') {
			document.getElementById('aktiviti').value='ok';
			return;
		};
		document.getElementById('aktiviti').value='no';
		var min=3;
		let tblctrl = (tip=='sursa' ? 'rezsursa' : 'rezdest');
		if (str.length >= min) {
            xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					document.getElementById(tblctrl).innerHTML = xmlhttp.responseText;
                };
            };
            xmlhttp.open("GET", "getstrada.php?q=" + str + "&control=" + tip, true);
            xmlhttp.send();
		};
		if (str.length >= min) {
			document.getElementById(tblctrl).className = 'table white';
		} else {
			document.getElementById(tblctrl).className += ' hidden white';
		};
    };

	function megvan(denumire,tip) {
		// document.getElementById('aktiviti').value='ok';
		// let ujctrl="nota"+tip;
		// document.getElementById(ujctrl).style.display = "none";
		// document.getElementById(tip).value = denumire.trim();
		// let tblctrl = (tip=='sursa' ? 'rezsursa' : 'rezdest');
		// document.getElementById(tblctrl).className += ' hidden white';

		var aria = calcAria();

		// switch (aria) {
		// 	case "NINCS":
		// 		document.getElementById('totalprice').innerHTML = "0.00 lei";
		// 		break;
		// 	case "0":
		// 		document.getElementById('totalprice').innerHTML = "10.00 lei";
		// 		break;
		// 	case "1":
		// 		document.getElementById('totalprice').innerHTML = "13.00 lei";
		// 		break;
		// 	case "2":
		// 		document.getElementById('totalprice').innerHTML = "15.00 lei";
		// 		break;	
		// 	case "3":
		// 		document.getElementById('totalprice').innerHTML = "25.00 lei";
		// 		break;
		// 	default:
		// 		document.getElementById('totalprice').innerHTML = "25.00 lei";
		// 		break;
		// }

		// stabilirepret();

		getDistance();
	};
	
	function amAutobuz(tip) {
		document.getElementById('select'+tip).selectedIndex = 0;
		document.getElementById(tip).value = "";
		document.getElementById('nr_'+tip).value = "";
		document.getElementById('mentiune_'+tip).value = "";

		if (document.getElementById('eltunok_'+tip).style.display == "none") {
			document.getElementById('eltunok_'+tip).style.display = "";
			document.getElementById('mentiune_'+tip).style.display = "none";
			megvan(document.getElementById(tip).value, tip);
			
		} else {
			document.getElementById('eltunok_'+tip).style.display = "none";
			document.getElementById('mentiune_'+tip).style.display = "";
			megvan(document.getElementById('mentiune_'+tip).value, tip);
		}
	}

	function stabilirepret() {
		const kg = parseFloat(5.00);
		const urgenta = parseFloat(5.00);
		const incet = parseFloat(-2.00);

		var baza = document.getElementById('totalprice').innerHTML;

		var smaxi = (document.getElementById('smaxi').checked == true ? 5 : 0);
		var dmaxi = (document.getElementById('dmaxi').checked == true ? 5 : 0);
		var maxi = parseFloat(smaxi)+parseFloat(dmaxi);
		// document.getElementById('busradio').checked = (maxi==0 ? false : true);
		maxi_text = (maxi==0 ? "0.00 lei" : "+"+maxi.toFixed(2)+" lei");
		document.getElementById('totalprice_maxi').innerHTML = maxi_text;

		var evening = (document.getElementById('eveningradio').checked == true ? 5 : 0); 
		var evening_text = (evening==0 ? "." : "+"+evening.toFixed(2)+" lei");
		document.getElementById('eveningprice').innerHTML = evening_text;
		
		var speedy = (document.getElementById('speedyradio').checked == true ? urgenta : 0);
		var speedy_text = (speedy==0 ? "." : "+"+speedy.toFixed(2)+" lei");
		document.getElementById('speedyprice').innerHTML = speedy_text;
		
		var slow = (document.getElementById('slowradio').checked == true ? incet : 0);
		var slow_text = (slow==0 ? "." : slow.toFixed(2)+" lei");
		document.getElementById('slowprice').innerHTML = slow_text;

		var time = (document.getElementById('timeradio').checked == true ? 5 : 0);
		var time_text = (time==0 ? "." : "+"+time.toFixed(2)+" lei");
		document.getElementById('timeprice').innerHTML = time_text;

		var greutate = (document.getElementById("sub20kg").checked == true ? kg : 0); 
		greutate = (document.getElementById("sub5kg").checked == true ? 0 : kg);
		var greutate_text = (greutate==0 ? "0.00 lei" : "+"+greutate.toFixed(2)+" lei");
		document.getElementById("totalprice_greutate").innerHTML = greutate_text;
		
		var total = parseFloat(baza) + maxi + evening + speedy + slow + time + greutate;
		var total_text = (total==0 ? "0.00 lei" : total.toFixed(2)+" lei");
		document.getElementById('total').innerHTML = total_text;
	};

	function fetchAPI() {
		const query = document.getElementById('sursa').value;
		const url = `https://us1.locationiq.com/v1/search?q=${encodeURIComponent(query)}&countrycodes=ro&format=json&normalizeaddress=1&accept-language=ro&key=pk.44dea3a2a30011dbb0ed593ce24bd887`;

		fetch(url, {
			method: 'GET',
			headers: {
			'Accept': 'application/json',
			}
		})
		.then(response => response.json())
		.then(data => {
			// Handle the JSON response here
			console.log(data);

			const resultList = document.getElementById('resultList');
          	resultList.innerHTML = ''; // Clear previous results

          	data.forEach(result => {
				const option = document.createElement('option');
				option.value = result.display_name;
				option.innerHTML = result.display_name;
				resultList.appendChild(option);
			});
		})
		.catch(error => {
			// Handle errors here
			console.error('Error:', error);
		});
	}

	// const url = 'https://us1.locationiq.com/v1/search?q=Strada%20Predeal%201%20Targu%20Mures&format=json&normalizeaddress=1&key=pk.44dea3a2a30011dbb0ed593ce24bd887';

	// fetch(url, {
	// 	method: 'GET',
	// 	headers: {
	// 		'Accept': 'application/json',
	// 	}
	// })
	// .then(response => response.json())
	// .then(data => {
	// 	// Handle the JSON response here
	// 	console.log(data);
	// })
	// .catch(error => {
	// 	// Handle errors here
	// 	console.error('Error:', error);
	// });
</script>


</body>
</html>