<%@ include file="/component/header.html"%>
<%@ include file="/component/nav.html"%>
<div class = "container" ng-app="myApp">
    <div class="wrapper row">
        <div>
            <div class="page-title row txt-center height-fit float-container">
                <div class="float-left">
                    <h1 class="inline-block">MAKE AN ORDER</h1>
                </div>
            </div>
        </div>

        <div class="order-menu">
            <ul class="order-ul">
                <li class="order-item">
                    <div class="order-number">1</div>
                    <div class="order-number-desc">Select Destination</div>
                </li>
                <li class="order-item">
                    <div class="order-number">2</div>
                    <div class="order-number-desc">Select a Driver</div>
                </li>
                <li class="order-item active">
                    <div class="order-number">3</div>
                    <div class="order-number-desc"><span>Chat Driver</div>
                </li>
                <li class="order-item">
                    <div class="order-number">4</div>
                    <div class="order-number-desc"><span>Complete your order</div>
                </li>
            </ul>
        </div>

        <div ng-controller="chatController as chatList">
            <div id="scrollArea">
                <div ng-repeat="chat in chatList.chats">
                    <p class="chat-bubble">{{chat.text}}</p>
                </div>
            </div>
            <div class="chat-box">
                <form class="form-chat-box" ng-submit="chatList.addChat()">
                    <input class="text-input" ng-model="chatList.chatText"
                           placeholder="Enter a message">
                    <input class="send-button" type="submit" value="Kirim">
                </form>
            </div>
        </div>

        <div class="close-box">
            <form action="complete_order" class="chat-input" method="get">
                <input type="hidden" name="pickUp" value="${pickup}">
                <input type="hidden" name="destination" value="${destination}">
                <input type="hidden" name="driverId" value="${driverProfile.getUsername()}">
                <input type="submit" class="close-button" value="CLOSE">
            </form>
        </div>

    </div>


</div>
<%@ include file="/component/footer.html"%>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script>
    window.onload = toggleActive("nav-order");
</script>
<script>
    angular.module('myApp', [])
        .controller('chatController', function() {
            var chatList = this;
            chatList.chats = [];

            chatList.addChat = function() {
                chatList.chats.push({text:chatList.chatText});
                chatList.chatText = '';
            };

        });
</script>