diff --git a/public/order.js b/public/order.js
new file mode 100644
index 0000000000000000000000000000000000000000..5d469368a1ea1ba65131459c3ef5172a6c25314d
--- /dev/null
+++ b/public/order.js
@@ -0,0 +1,42 @@
+
+// Hide other page section
+(function() {
+ showLocationPage();
+})();
+
+
+function showLocationPage() {
+ var finishPage = document.getElementById('order-page-finish');
+ finishPage.style.display = 'none';
+ var driverPage = document.getElementById('order-page-driver');
+ driverPage.style.display = 'none';
+ var locationPage = document.getElementById('order-page-location');
+ locationPage.style.display = 'block';
+ document.getElementById('page-tab-driver').classList.remove("selected");
+ document.getElementById('page-tab-finish').classList.remove("selected");
+ document.getElementById('page-tab-location').classList.add("selected");
+}
+
+function showDriverPage() {
+ var locationPage = document.getElementById('order-page-location');
+ locationPage.style.display = 'none';
+ var finishPage = document.getElementById('order-page-finish');
+ finishPage.style.display = 'none';
+ var driverPage = document.getElementById('order-page-driver');
+ driverPage.style.display = 'block';
+ document.getElementById('page-tab-driver').classList.add("selected");
+ document.getElementById('page-tab-finish').classList.remove("selected");
+ document.getElementById('page-tab-location').classList.remove("selected");
+}
+
+function showFinishPage() {
+ var locationPage = document.getElementById('order-page-location');
+ locationPage.style.display = 'none';
+ var driverPage = document.getElementById('order-page-driver');
+ driverPage.style.display = 'none';
+ var finishPage = document.getElementById('order-page-finish');
+ finishPage.style.display = 'block';
+ document.getElementById('page-tab-driver').classList.remove("selected");
+ document.getElementById('page-tab-finish').classList.add("selected");
+ document.getElementById('page-tab-location').classList.remove("selected");
+}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 18976aacecf7bb5b7b8f5d64383f1fd8579d3d56..4085e98dddda2c01226428377b4033151a7b9c48 100644
--- a/public/style.css
+++ b/public/style.css
@@ -276,4 +276,4 @@ table, th, td {
display: flex;
flex-direction: column;
justify-content: center;
-}
\ No newline at end of file
+}
diff --git a/src/view/order.php b/src/view/order.php
index 3d3d0a4057fa73d030e5c5a32a372fc9d8bf3451..ee887517a3da3f66dab43da7cbc0a6e7e9e9bd44 100644
--- a/src/view/order.php
+++ b/src/view/order.php
@@ -24,7 +24,7 @@
</div>
<div class="row">
<div class="col-2">
- <div class="page-tab selected">
+ <div id="page-tab-location" class="page-tab selected" onclick="showLocationPage()">
<div class="page-tab-image">
<div class="circle">1</div>
</div>
@@ -34,7 +34,7 @@
</div>
</div>
<div class="col-2">
- <div class="page-tab">
+ <div id="page-tab-driver" class="page-tab" onclick="showDriverPage()">
<div class="page-tab-image">
<div class="circle">2</div>
</div>
@@ -44,7 +44,7 @@
</div>
</div>
<div class="col-2">
- <div class="page-tab">
+ <div id="page-tab-finish" class="page-tab" onclick="showFinishPage()">
<div class="page-tab-image">
<div class="circle">3</div>
</div>
@@ -55,14 +55,89 @@
</div>
</div>
<br>
- <div>
- Ini konten order
+ <br>
+ <div id="order-page-location">
+ <div class="row">
+ <div class="col-2" style="line-height: 40px">
+ <span style="padding-left: 30%;">Picking Point</span> <br>
+ </div>
+ <div class="col-4" style="line-height: 30px">
+ <input style="width: 80%;height: 30px;padding-left: 5px;font-size: medium" type="text" name="picking_point" placeholder="Pick up point">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-2" style="line-height: 40px">
+ <span style="padding-left: 30%">Destination</span> <br>
+ </div>
+ <div class="col-4" style="line-height: 30px">
+ <input style="width: 80%; height: 30px;padding-left: 5px;font-size: medium" type="text" name="destination" placeholder="Destination">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-2" style="line-height: 40px">
+ <span style="padding-left: 30%">Preferred Driver</span>
+ </div>
+ <div class="col-4">
+ <input style="width: 80%;height: 30px;padding-left: 5px;font-size: medium" type="text" name="driver" placeholder="(optional)"><br>
+ </div>
+ </div>
+ <br>
+ <br>
+ <br>
+ <div class="row text-center">
+ <a href="#" class="btn green" style="font-size: 2em" onclick="showDriverPage()">Next</a>
+ </div>
+ </div>
+
+ <div id="order-page-driver">
+ <div style="width: 100%; border: 1px solid black; border-radius: 10px;">
+ <h2 style="margin-left: 10px; margin-top: 0px">PREFERRED DRIVERS: </h2>
+ <div class="text-center" style="font-size: large; color: #989898; margin: 30px">
+ Nothing to display :(
+ </div>
+ </div>
+ <br>
+ <div style="width: 100%; border: 1px solid black; border-radius: 10px;">
+ <h2 style="margin-left: 10px; margin-top: 0px">OTHER DRIVERS: </h2>
+ <div style="margin: 0 30px 30px 30px">
+ <div class="row">
+ <img src="/img/profile/VGdWZUZ2dlJlUkM5eWpjVDcyQXJoZz09" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">
+ <p style="font-size: 1.4em; margin:20px 10px 3px 10px">Pokemon Kuning Unyu</p>
+ <p style="margin-top: 0"><span class="text-orange"><b><i class="icon icon-star"></i> 4.3</b></span> (1002 votes)</p>
+ <a href="#" class="btn green" style="float: right; margin: 10px">I CHOOSE YOU!</a>
+ </div>
+ <div class="row">
+ <img src="/img/profile/VGdWZUZ2dlJlUkM5eWpjVDcyQXJoZz09" style="float: left; border: 1px solid black; margin: 10px" width="120" height="125">
+ <p style="font-size: 1.4em; margin:20px 10px 3px 10px">Pokemon Kuning Unyu</p>
+ <p style="margin-top: 0"><span class="text-orange"><b><i class="icon icon-star"></i> 4.3</b></span> (1002 votes)</p>
+ <a href="#" class="btn green" style="float: right; margin: 10px">I CHOOSE YOU!</a>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div id="order-page-finish" style="width: 100%;">
+ <h2 style="margin-left: 10px; margin-top: 0px">HOW WAS IT? </h2>
+ <div class="text-center profil" style="padding-bottom: 60px">
+ <img class="img-circle" src="<?=$user->photo?>"/><br>
+ <h2>@bombarattata</h2>
+ <p>Fadhil Imam Kurnia</p>
+ <i class="icon icon-star"></i>
+ <i class="icon icon-star"></i>
+ <i class="icon icon-star"></i>
+ <i class="icon icon-star"></i>
+ <i class="icon icon-star"></i>
+ <br>
+ <br>
+ <br>
+ <textarea style="width: 100%; height: 100px; padding: 10px; resize: none" placeholder="Your comment..." ></textarea>
+ <a class="btn green" style="float: right; margin: 10px">COMPLETE<br>ORDER</a>
+ </div>
</div>
- </div>
- <script type="text/javascript">
- </script>
+ </div>
+ <script type="text/javascript" src="/order.js"></script>
</body>
</html>
\ No newline at end of file