add segmented control for ad type selection

app/public/segment.css

@@ -0,0 +1,32 @@
+.ui-segment{
+	color: #02adba;
+	border: 1px solid #02adba;
+	border-radius: 4px;
+	display:inline-block;
+}
+.ui-segment span.option.active{
+	background-color: #02adba;
+	color: white;
+}
+.ui-segment span.option{
+	padding-left: 30px;
+	padding-right: 30px;
+	height: 35px;
+	text-align:center;
+	display:inline-block;
+	line-height: 35px;
+	margin: 0px;
+	float:left;
+	cursor:pointer;
+	border-right:1px solid #02adba;
+}
+.ui-segment span.option[disabled]{
+	color: gray;
+}
+
+.ui-segment span.option:last-child{
+	border-right: none;
+}
+.segment-select{
+	display:none;
+}

app/views/layout.ejs

@@ -19,6 +19,7 @@
   <script src="https://code.jquery.com/jquery-2.1.1.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">

app/views/realEstateType.ejs

@@ -1,23 +1,68 @@
+<br><br>
 <form method="POST" id="form-real-estate-type">
-<div class="row center-align">
-  <div class="collection">
-    <% for(const realEstateType of realEstateTypes) { %>
+    <div class="center-align">
 
-      <a href="#" class="waves-effect collection-item"
-         style="color: #02adba"
-         id="<%= realEstateType.id %>"
-         onclick="saveAndSubmit(this.id)"
-      >
-        <%= realEstateType.title %>
-      </a>
+        <div class="row">
+            <div class="col offset-s2 offset-m3 offset-l4">
+                <select class="segment-select">
+                    <option value="1">Prodaja</option>
+                    <option value="2" disabled>Najam</option>
+                </select>
+            </div>
+        </div>
 
-    <% } %>
-  </div>
-  <input type="hidden" name="realEstateType" id="realEstateType" />
-</div>
+        <br>
+        <div class="collection">
+            <% for(const realEstateType of realEstateTypes) { %>
+
+                <a class="waves-effect row collection-item offset-s4 offset-m5 offset-l6"
+                   id="<%= realEstateType.id %>"
+                   href="#"
+                   style="color: #02adba"
+                   onclick="saveAndSubmit(this.id)"
+                >
+                    <span class="col offset-s3 offset-m4 offset-l5 left-align"><%= realEstateType.title %></span>
+                </a>
+
+            <% } %>
+        </div>
+        <input type="hidden" name="realEstateType" id="realEstateType" />
+    </div>
 </form>
 
 <script>
+    (function($) {
+        $.fn.extend({
+            Segment: function() {
+                $(this).each(function() {
+                    const wrapper = $("<div>", { class: "ui-segment" });
+                    $(this)
+                        .find("option")
+                        .each(function(param, param2) {
+                            const isDisabled = $(param2).attr("disabled");
+                            const option = $("<span>", {
+                                class: "option",
+                                text:  $(this).text(),
+                                value: $(this).val(),
+                                disabled: isDisabled
+                            });
+                            if ($(this).is(":selected")) {
+                                option.addClass("active");
+                            }
+                            wrapper.append(option);
+                        });
+
+                    $(this).after(wrapper);
+                    $(this).hide();
+                });
+            }
+        });
+    })(jQuery);
+
+    $(document).ready(() => {
+        $(".segment-select").Segment();
+    });
+
   function saveAndSubmit(id) {
    $("#realEstateType").val(id);
    $("#form-real-estate-type").submit();