<?php 
/*=======================================================================
 *
 * price_finder.php
 *
 * Autor: Carsten Annacker
 *
  =======================================================================*/

include_once("../include/global.inc.php");

?>
<!DOCTYPE html>
<html>
<head>
  <meta charset="charset=iso-8859-1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
  <link rel="stylesheet" href="./price_finder/stabo-style.css" />
  <script src="../js/jquery.js"></script>
  <script src="../include/maps.googleapis.com_maps_api_js_places.php" async defer></script>
  <script src="./price_finder/price_finder.js"></script>
<script>
</script>
  <title></title>
  <style>
    .container{
    padding: 5%;
    text-align: center;
   } 
<!--
class="alert alert-danger" is additionally used in js-code for input fields
-->
 </style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-12">
      <h3>Wo soll's hingehen?</h3>
    </div>
    <div class="col-12">
      <div class="input-group" id="input-group" style="padding-bottom:6px">
        <input id="autocomplete1" type="text" class="form-control" placeholder="Geben Sie die Start-Adresse ein." onblur="check_input('1');" />
        <a href="javascript:add_station(1);" class="btn btn-info" role="button" id="add_stationsButton1">+</a>
      </div>
      <div class="input-group" id="input-group2" style="padding-bottom:6px;display:none">
        <input id="autocomplete2" type="text" class="form-control" placeholder="Geben Sie die Adresse einer Zwischenstation ein." onblur="check_input('2');" />
        <a href="javascript:del_station(2);" class="btn btn-info" role="button" id="del_stationsButton2">-</a>&nbsp;
        <a href="javascript:add_station(2);" class="btn btn-info" role="button" id="add_stationsButton2">+</a>
      </div>
      <div class="input-group" id="input-group3" style="padding-bottom:6px;display:none">
        <input id="autocomplete3" type="text" class="form-control" placeholder="Geben Sie die Adresse einer Zwischenstation ein." onblur="check_input('3');" />
        <a href="javascript:del_station(3);" class="btn btn-info" role="button" id="del_stationsButton3">-</a>&nbsp;
        <a href="javascript:add_station(3);" class="btn btn-info" role="button" id="add_stationsButton3">+</a>
      </div>
      <div class="input-group" id="input-group4" style="padding-bottom:6px;display:none">
        <input id="autocomplete4" type="text" class="form-control" placeholder="Geben Sie die Adresse einer Zwischenstation ein." onblur="check_input('4');" />
        <a href="javascript:del_station(4);" class="btn btn-info" role="button" id="del_stationsButton4">-</a>&nbsp;
        <a href="javascript:add_station(4);" class="btn btn-info" role="button" id="add_stationsButton4">+</a>
      </div>
      <div class="input-group" id="input-group5" style="padding-bottom:6px;display:none">
        <input id="autocomplete5" type="text" class="form-control" placeholder="Geben Sie die Adresse einer Zwischenstation ein." onblur="check_input('5');" />
        <a href="javascript:del_station(5);" class="btn btn-info" role="button" id="del_stationsButton5">-</a>&nbsp;
        <a href="javascript:add_station(5);" class="btn btn-info" role="button" id="add_stationsButton5">+</a>
      </div>
      <div class="input-group" id="input-group6" style="padding-bottom:6px;display:none">
        <input id="autocomplete6" type="text" class="form-control" placeholder="Geben Sie die Adresse einer Zwischenstation ein." onblur="check_input('6');" />
        <a href="javascript:del_station(6);" class="btn btn-info" role="button" id="del_stationsButton6">-</a>&nbsp;
        <a href="javascript:add_station(6);" class="btn btn-info" role="button" id="add_stationsButton6">+</a>
      </div>
      <div class="input-group" id="input-group7" style="padding-bottom:6px;display:none">
        <input id="autocomplete7" type="text" class="form-control" placeholder="Geben Sie die Adresse einer Zwischenstation ein." onblur="check_input('7');" />
        <a href="javascript:del_station(7);" class="btn btn-info" role="button" id="del_stationsButton7">-</a>&nbsp;
        <a href="javascript:add_station(7);" class="btn btn-info" role="button" id="add_stationsButton7">+</a>
      </div>
      <div class="input-group" id="input-group8" style="padding-bottom:6px;display:none">
        <input id="autocomplete8" type="text" class="form-control" placeholder="Geben Sie die Adresse einer Zwischenstation ein." onblur="check_input('8');" />
        <a href="javascript:del_station(8);" class="btn btn-info" role="button" id="del_stationsButton8">-</a>&nbsp;
        <a href="javascript:add_station(8);" class="btn btn-info" role="button" id="add_stationsButton8">+</a>
      </div>
      <div class="input-group" id="input-group9" style="padding-bottom:6px;display:none">
        <input id="autocomplete9" type="text" class="form-control" placeholder="Geben Sie die Adresse einer Zwischenstation ein." onblur="check_input('9');" />
        <a href="javascript:del_station(9);" class="btn btn-info" role="button" id="del_stationsButton9">-</a>&nbsp;
      </div>
      <div class="input-group" style="padding-bottom:18px">
        <input id="autocomplete10" type="text" class="form-control" placeholder="Geben Sie die Ziel-Adresse ein." onblur="check_input('10');" />
      </div>
      <div class="form-group">
        <label for="vht_id">Benötigter Fahrzeugtyp:</label>
        <select class="form-control" id="vht_id">
          <option value="2">PKW</option>
          <option value="3">Kombi</option>
          <option value="4">Kastenwagen</option>
          <option value="5">Transporter</option>
          <option value="6">Transporter XL</option>
        </select>
      </div>
      <div id="priceButton" class="form-group" style="display:none">
        <a href="javascript:openDistancepriceDoit();" class="btn btn-primary" role="button">Preis berechnen</a>
      </div>
      <div class="form-group" id="result" style="padding-bottom:6px;display:none">
        <p id="result_text"></p>
      </div>
      <div class="form-group" id="contact" style="display:none">
        <div style="padding-bottom:6px;display:none"><h3>Soll's losgehen?</h3></div>
        <p>Schreiben Sie uns eine Mail oder Rufen Sie uns an:</b></p>
        <p><b>Email</b></p>
        <p id="mail_link"></p>
        <p><b>Telefon</b></p>
        <p id="tel_link"></p>
      </div>
      <div id="refreshButton" class="form-group" style="display:none">
        <a href="javascript:window.location.reload(true);" class="btn btn-primary" role="button">Neue Anfrage</a>
      </div>
    </div>
  </div>
</div>
</body>
</html>
