
<!doctype>
<html>
<head>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id="></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '');
  </script>

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.min.css">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/assets/main.css">
  <link rel="stylesheet" href="/assets/segment.css">

  <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
  <link rel="manifest" href="/assets/site.webmanifest">
  <link rel="mask-icon" href="/assets/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="msapplication-TileColor" content="#da532c">
  <meta name="theme-color" content="#ffffff">

  <meta name="title" content="Kivi.ba">
  <meta name="description" content="Neka dom nađe vas">

  <meta property="og:title" content="Kivi.ba">
  <meta property="og:description" content="Neka dom nađe vas">
  <meta property="og:image" content="http://www.kivi.ba/assets/images/thumbnail-big.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="627">
  <meta property="og:url" content="https://www.kivi.ba">
  <meta name="twitter:card" content="summary_large_image">

  <meta property="og:site_name" content="Kivi.ba">
  <meta name="twitter:image:alt" content="Kivi.ba - Neka dom nađe vas">

  
    <title> Podaci o nekretnini - Kivi.ba</title>
    
</head>

<body>
  
    <nav style="background-color: #02adba; margin: auto;">
      <div class="row center-align">
        <h6 class="title">Podaci o nekretnini</h6>
      </div>
    </nav>
  

  <div class="container">
    <br>
<form id="publishForm" method="POST" novalidate>
  <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#publishBasicData">Osnovni podaci</a></li>
        <li class="tab col s3"><a href="#publishAdditionalData">Dodatni podaci</a></li>
        <li class="tab col s3"><a href="#publishLocation">Lokacija</a></li>
        <li class="tab col s3"><a href="#publishEnd">Kraj</a></li>

    </ul>
    </div>
    <div id="publishBasicData" class="col s12">
      <br>
<div class="row">

    <div class="input-field col s3 m4 l5">
    <input
            id="price"
            name="price"
            type="text"
            value=""
    >
    <label for="price">Cijena (KM)</label>
</div>

    <div class="input-field col s3 m4 l5">
    <input
            id="area"
            name="area"
            type="text"
            value=""
    >
    <label for="area">Površina (m²)</label>
</div>

    <div class="input-field col s3 m4 l5">
    <input
            id="gardenSize"
            name="gardenSize"
            type="text"
            value=""
    >
    <label for="gardenSize">Površina okućnice (m²)</label>
</div>

    <div class="input-field col s3 m4 l5">
    <input
            id="numberOfRooms"
            name="numberOfRooms"
            type="text"
            value=""
    >
    <label for="numberOfRooms">Broj soba</label>
</div>

    <div class="input-field col s3 m4 l5">
    <input
            id="numberOfFloors"
            name="numberOfFloors"
            type="text"
            value=""
    >
    <label for="numberOfFloors">Broj spratova</label>
</div>

    <div class="input-field col s3 m4 l5">
    <input
            id="title"
            name="title"
            type="text"
            value=""
    >
    <label for="title">Naslov</label>
</div>

    <div class="input-field col s3 m4 l5">
    <input
            id="shortDescription"
            name="shortDescription"
            type="text"
            value=""
    >
    <label for="shortDescription">Opis</label>
</div>

    <div class="input-field col s3 m4 l5">
    <input
            id="streetName"
            name="streetName"
            type="text"
            value=""
    >
    <label for="streetName">Adresa</label>
</div>

</div>
<br>
<div class="row">

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="balcony"
        >
      <span>Balkon</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="newBuilding"
        >
      <span>Novogradnja</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="recentlyAdapted"
        >
      <span>Nedavno adaptirano</span>
    </label>
  </p>

</div>

<br>

  <div>
    <label class="checkbox-label">Namješten?: </label><br><br>
    <span class="segmented small">
      
        <label>
            <input type="radio" name="furnishingType" value="NOT_FURNISHED"
            >
            <span class="label">Nenamješten</span>
        </label>
      
        <label>
            <input type="radio" name="furnishingType" value="HALF_FURNISHED"
            >
            <span class="label">Polunamješten</span>
        </label>
      
        <label>
            <input type="radio" name="furnishingType" value="FURNISHED"
            >
            <span class="label">Namješten</span>
        </label>
      
    </span>
  </div>



  
    </div>
    <div id="publishAdditionalData" class="col s12">
      <br>
<div class="row">

    <div class="input-field col s3 m4 l5">
    <textarea
            id="longDescription"
            form="publishForm"
            name="longDescription"
            cols="80" rows="15"
            value=""
    ></textarea>
    <label for="longDescription">Detaljan opis</label>
</div>

</div>

<br>


  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="water"
        >
      <span>Voda</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="electricity"
        >
      <span>Struja</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="drainageSystem"
        >
      <span>Kanalizacija</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="registeredInZkBooks"
        >
      <span>Uknjiženo</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="parking"
        >
      <span>Parking</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="garage"
        >
      <span>Garaža</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="gas"
        >
      <span>Plin</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="antiTheftDoor"
        >
      <span>Blindirana vrata</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="airCondition"
        >
      <span>Klimatizirano</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="phoneConnection"
        >
      <span>Telefon</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="cableTV"
        >
      <span>Kablovska</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="internet"
        >
      <span>Internet</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="basementAttic"
        >
      <span>Podrum-Tavan</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="storeRoom"
        >
      <span>Ostava</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="videoSurveillance"
        >
      <span>Video nadzor</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="alarm"
        >
      <span>Alarm</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="suitableForStudents"
        >
      <span>Za studente</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="includingBills"
        >
      <span>Uključen trošak režija</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="animalsAllowed"
        >
      <span>Kućni ljubimci dozvoljeni</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="pool"
        >
      <span>Bazen</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="exchange"
        >
      <span>Zamjena</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="urbanPlanPermit"
        >
      <span>Urbanistička dozvola</span>
    </label>
  </p>

  <p>
    <label class="checkbox-label">
      <input type="checkbox" class="filled-in" name="buildingPermit"
        >
      <span>Građevinska dozvola</span>
    </label>
  </p>


<br>

  <div>
    <label class="checkbox-label">Pristupni put: </label><br><br>
    <span class="segmented small">
      
        <label>
            <input type="radio" name="accessRoadType" value="ANY"
            >
            <span class="label">Svi</span>
        </label>
      
        <label>
            <input type="radio" name="accessRoadType" value="ASPHALT"
            >
            <span class="label">Asfalt</span>
        </label>
      
        <label>
            <input type="radio" name="accessRoadType" value="CONCRETE"
            >
            <span class="label">Beton</span>
        </label>
      
        <label>
            <input type="radio" name="accessRoadType" value="MACADAM"
            >
            <span class="label">Makadam</span>
        </label>
      
        <label>
            <input type="radio" name="accessRoadType" value="OTHER"
            >
            <span class="label">Drugo</span>
        </label>
      
    </span>
  </div>

  <div>
    <label class="checkbox-label">Grijanje: </label><br><br>
    <span class="segmented small">
      
        <label>
            <input type="radio" name="heatingType" value="ANY"
            >
            <span class="label">Svi</span>
        </label>
      
        <label>
            <input type="radio" name="heatingType" value="NO_HEATING"
            >
            <span class="label">Nije uvedeno</span>
        </label>
      
        <label>
            <input type="radio" name="heatingType" value="ELECTRICITY"
            >
            <span class="label">Struja</span>
        </label>
      
        <label>
            <input type="radio" name="heatingType" value="GAS"
            >
            <span class="label">Plin</span>
        </label>
      
        <label>
            <input type="radio" name="heatingType" value="WOOD"
            >
            <span class="label">Drva</span>
        </label>
      
        <label>
            <input type="radio" name="heatingType" value="CENTRAL_CITY"
            >
            <span class="label">Centralno (gradsko)</span>
        </label>
      
        <label>
            <input type="radio" name="heatingType" value="CENTRAL_BOILER"
            >
            <span class="label">Centralno (kotlovnica)</span>
        </label>
      
        <label>
            <input type="radio" name="heatingType" value="CENTRAL_GAS"
            >
            <span class="label">Centralno (plin)</span>
        </label>
      
        <label>
            <input type="radio" name="heatingType" value="HEAT_PUMP"
            >
            <span class="label">Toplotna pumpa</span>
        </label>
      
        <label>
            <input type="radio" name="heatingType" value="OTHER"
            >
            <span class="label">Drugo</span>
        </label>
      
    </span>
  </div>

    </div>
    <div id="publishLocation" class="col s12">
     <div class="row center-align">
    <h3>
        Izaberite lokaciju nekretnine na mapi. 
    </h3>
  </div>
  
  <div class="row center-align">
    <div class="col s12 m12 l12 xl12">
      <input
        id="autocompleteInput"
        placeholder="Unesite grad, naselje ili ulicu..."
        type="text"
      />
    </div>
  </div>
  
  <div class="row center-align">
    <div class="col s12">
      <div id="map"></div>
    </div>
  </div>
  
    <input type="hidden" name="north" id="north" />
    <input type="hidden" name="south" id="south" />
    <input type="hidden" name="east" id="east" />
    <input type="hidden" name="west" id="west" />
    <input type="hidden" name="lat" id="lat" />
    <input type="hidden" name="lng" id="lng" />

    <input type="hidden" name="locationInput" id="locationInput" />
    <input type="hidden" name="locationInputData" id="locationInputData" />
  
  <script>
    let autocomplete;
    let map;
    let places;
    let geocoder;
    let marker =false; //Initialy no marker on map
  
    function locateMe() {
      if (navigator.geolocation) {
        function onLocationSuccess(position) {
          const coordinates =
            position && position.coords ? position.coords : null;
          if (coordinates) {
            const longitude = coordinates.longitude || null;
            const latitude = coordinates.latitude || null;
  
            if (longitude && latitude && map) {
              map.setCenter({ lat: latitude, lng: longitude });
              map.setZoom(16);
            }
          }
        }
  
        navigator.geolocation.getCurrentPosition(onLocationSuccess);
      }
    }
  
    function initMap() {
      const BOSNIA_BOUNDS = {
        north: 45.7,
        south: 41.69,
        west: 15.55,
        east: 20.77
      };
      const SARAJEVO_COORDINATES = {
        lat: 43.85,
        lng: 18.41
      };
  
      const mapElement = document.getElementById("map");
      const restrictMapPanningToBosniaOnly = {
        latLngBounds: BOSNIA_BOUNDS,
        strictBounds: true
      };
      const initialMapParams = {
        center: SARAJEVO_COORDINATES,
        zoom: 12,
        restriction: restrictMapPanningToBosniaOnly,
        mapTypeControl: false,
        panControl: false,
        zoomControl: true,
        streetViewControl: false
      };
      map = new google.maps.Map(mapElement, initialMapParams);
  
      const inputElement = document.getElementById("autocompleteInput");
      const restrictAutocompleteResultsToBosniaOnly = { country: "ba" };
      const initialAutocompleteParams = {
        types: ["geocode"],
        componentRestrictions: restrictAutocompleteResultsToBosniaOnly,
        fields: ["geometry", "types", "address_components"]
      };
  
      autocomplete = new google.maps.places.Autocomplete(
        inputElement,
        initialAutocompleteParams
      );
      autocomplete.bindTo("bounds", map);
      autocomplete.addListener("place_changed", onPlaceChanged);
      pacSelectFirst(inputElement);
      addLocateMeButton(map);
      //Add event listener to position marker on map
      google.maps.event.addListener(map, 'click', positionMarker);
      
    }

    function positionMarker(event) {
        let clickedLocation = event.latLng;
        if(marker === false){
            marker = new google.maps.Marker({
                position: clickedLocation,
                map: map,
                draggable: true 
            });
            google.maps.event.addListener(marker, 'dragend', function(event){
                markerLocation();
            });
        } else{
            marker.setPosition(clickedLocation);
        }
    }

    function addLocateMeButton(map) {
      var parent = document.createElement("div");
      parent.className = "locate-me-container";
  
      var a = document.createElement("a");
      a.id = "locateMe";
      a.className = "btn-floating";
  
      var i = document.createElement("i");
      i.innerText = "gps_fixed";
      i.className = "material-icons right";
  
      a.appendChild(i);
      a.addEventListener("click", locateMe);
      parent.appendChild(a);
  
      map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(parent);
    }
  
    function onPlaceChanged() {
      const place = autocomplete.getPlace();
      if (place.geometry) {
        map.fitBounds(place.geometry.viewport);
        map.setZoom(map.getZoom() + 1);
        $("#locationInputData").val(JSON.stringify(place));
      }
    }
  
    function pacSelectFirst(input) {
      // store the original event binding function
      const _addEventListener = input.addEventListener
        ? input.addEventListener
        : input.attachEvent;
  
      function addEventListenerWrapper(type, listener) {
        // Simulate a 'down arrow' keypress on hitting 'return' when no pac suggestion is selected,
        // and then trigger the original listener.
        if (type == "keydown") {
          const originalListener = listener;
          listener = function(event) {
            const suggestionSelected = $(".pac-item-selected").length > 0;
            if (event.key == "Enter" && !suggestionSelected) {
              const simulatedDownArrow = $.Event("keydown", {
                keyCode: 40,
                which: 40
              });
              originalListener.apply(input, [simulatedDownArrow]);
            }
  
            originalListener.apply(input, [event]);
          };
        }
  
        _addEventListener.apply(input, [type, listener]);
      }
  
      input.addEventListener = addEventListenerWrapper;
      input.attachEvent = addEventListenerWrapper;
    }
      
  
  </script>
  <script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuqZ6MWvDrquwc-TN6rPS6188D608Zj3Q&language=bs&libraries=places&callback=initMap"
    async
    defer
  ></script>
  

    </div>
    <div id="publishEnd" class="col s12">
     <br>
<div class="row center-align">
    <h3>Vaš oglas je spreman!</h3> 
    Unesite kontakt email i objavite oglas.

<br>
<div class="row center-align input-field col s3 m4 l5 form-group">
  <input
          id="email"
          name="email"
          type="email"
  >
  <div class="messages"></div>
  <label for="email">Email</label>
</div>
</div>
<br>
<div class="row center-align">
    <div class="col s6 push-s3">
      <a id="submit" href="#" form="publishForm" class="welcome-center-button waves-effect waves-light btn">Objavi oglas</a>
    </div>
  </div>

<br>
    </div>
  </div>

  
</form>

<script>

  $(document).ready(function(){
    $('.tabs').tabs();

   

    $("#submit").click( function () {
      const mapBounds = map.getBounds();
      const currentLocation = marker.getPosition();


        $("#north").val(mapBounds.getNorthEast().lat());
        $("#south").val(mapBounds.getSouthWest().lat());
        $("#east").val(mapBounds.getNorthEast().lng());
        $("#west").val(mapBounds.getSouthWest().lng());

        $("#lat").val(currentLocation.lat());
        $("#lng").val(currentLocation.lng());

        $("#locationInput").val(
          document.getElementById("autocompleteInput").value
        );

        const validateEmail = email => {
          const regexEmail = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/

          return regexEmail.test(String(email).toLowerCase());
        }

        const errors = validateEmail($("#email").val());

        if (!errors) {
          $("#publishForm").submit();
        }
        else {
          console.log('Error!');
        }
    });
  });
 
</script>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/13.1.5/nouislider.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
</body>
</html>
