<!doctype html>
<html lang='en-GB'>

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-strap/1.0.11/vue-strap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"
        type="text/css" />
    <link href="src/styles.css" rel="stylesheet" type="text/css" />
    <meta charset='utf-8'>
    <title>Avaya Customer Interaction Services Client SDK - Databinding Test Application</title>
</head>

<body>
    <!-- navigation bar -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <a class="navbar-brand"><i class="glyphicon glyphicon-bullhorn"></i> Avaya Customer Interaction Services
                Client SDK - Databinding Test Application</a>
        </div>
    </nav>
    <div id="appContainer" class="container-fluid">

        <div v-show="token && !agent.active">
            <div class="col-lg-6 form-signin">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3>Activate</h3>
                    </div>
                    <div class="panel-body">

                        <div class="form-group row">
                            <div class="col-xs-12 col-sm-4">
                                <v-select :options="user.profileList" :value.sync="profileId"
                                    placeholder="Select an Agent Profile"></v-select>
                            </div>

                            <div class="col-xs-12 col-sm-8">
                                <input class="form-control" placeholder="Override default extension" v-model="extension"
                                    autocomplete="on">
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block"
                            @click="agent.activate(user.user.userHandle, profileId[0], extension)">Activate</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- main view -->
        <div v-show="token && agent.active">
            <div class="col-lg-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3>Agent Details</h3>
                    </div>

                    <div class="panel-body">
                        <h4>{{agent.data.firstName}}&nbsp;{{agent.data.lastName}}&nbsp;</h4>
                        <h4>{{agent.state}}&nbsp;</h4>
                        <button class="btn btn-xs btn-success" @click="agent.login()"
                            v-if="agent.capabilities.canLogin">Start Work</button>
                        <button class="btn btn-xs btn-danger" @click="agent.logout()"
                            v-if="agent.capabilities.canLogout">End Work</button>
                        <button class="btn btn-xs btn-success" @click="agent.goReady()"
                            v-if="agent.capabilities.canSetReady">Go Ready</button>
                        <button class="btn btn-xs btn-warning" @click="agent.goNotReady()"
                            v-if="agent.capabilities.canSetNotReady">Go Not Ready</button>
                        <button class="btn btn-xs btn-danger" @click="agent.deactivate()"
                            v-if="agent.capabilities.canDeactivate">De-Activate</button>
                    </div>

                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3>Start Interaction</h3>
                    </div>
                    <div class="panel-body">
                        <div class="form-group">
                            <input class="form-control" placeholder="Address" v-model="startInteractionAddress"
                                required>
                        </div>
                        <div class="form-group">
                            <select id="interaction-type" class="form-control">
                                <option value="VOICE">Voice</option>
                            </select>
                        </div>
                        <button type="submit" class="btn btn-primary btn-block"
                            @click="work.createInteraction('VOICE', startInteractionAddress)">Start</button>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <tabset>
                    <tab header="Interactions">
                        <div class="list-group">
                            <div class="list-group-item" v-for="interaction in interactionCollection">
                                <h4 class="list-group-item-heading">
                                    <i class="glyphicon glyphicon-bell"
                                        v-if="interaction.data.state === 'ALERTING'"></i>
                                    <i class="glyphicon glyphicon-pause" v-if="interaction.data.state === 'HELD'"></i>
                                    <i class="glyphicon glyphicon-play" v-if="interaction.data.state === 'ACTIVE'"></i>
                                    <i class="glyphicon glyphicon-play"
                                        v-if="interaction.data.state === 'INITIATED'"></i>
                                    {{ interaction.data.channel }} - {{ interaction.data.state }} [{{
                                    interaction.data.id }}]
                                    <button class="btn btn-xs btn-success" @click="interaction.accept()"
                                        v-if="interaction.data.capabilities.canAccept">Accept</button>
                                    <button class="btn btn-xs btn-warning" @click="interaction.hold()"
                                        v-if="interaction.data.capabilities.canHold">Hold</button>
                                    <button class="btn btn-xs btn-success" @click="interaction.unhold()"
                                        v-if="interaction.data.capabilities.canUnhold">Unhold</button>
                                    <button class="btn btn-xs btn-danger" @click="interaction.end()"
                                        v-if="interaction.data.capabilities.canEnd">End</button>
                                    <button class="btn btn-xs btn-success"
                                        @click="interaction.consult(startInteractionAddress)"
                                        v-if="interaction.data.capabilities.canConsult">Consult</button>
                                    <button class="btn btn-xs btn-success"
                                        @click="interaction.singleStepTransfer(startInteractionAddress)"
                                        v-if="interaction.data.capabilities.canSingleStepTransfer">Transfer</button>
                                    <button class="btn btn-xs btn-success" @click="interaction.completeTransfer()"
                                        v-if="interaction.data.capabilities.canTransferComplete">Complete As
                                        Transfer</button>
                                    <button class="btn btn-xs btn-success" @click="interaction.completeConference()"
                                        v-if="interaction.data.capabilities.canConferenceComplete">Complete As
                                        Conference</button>
                                </h4>

                                <div class="chat-history"
                                    v-show="interaction.data.state !== 'ALERTING' && interaction.data.channel === 'WEBCHAT'">
                                    <ul>
                                        <li class="clearfix" v-for="message in getMessages(interaction)">
                                            <div v-if="message.isSelf">
                                                <div class="message-data align-left">
                                                    <span class="message-data-name">{{message.from}}</span>
                                                    <span
                                                        class="message-data-time">{{message.created.toLocaleString()}}</span>
                                                    &nbsp;
                                                </div>
                                                <div class="message my-message">{{message.content}}</div>
                                            </div>
                                            <div v-else>
                                                <div class="message-data align-right">
                                                    <span
                                                        class="message-data-time">{{message.created.toLocaleString()}}</span>
                                                    &nbsp;
                                                    <span class="message-data-name">{{message.from}}</span>
                                                </div>
                                                <div class="message other-message float-right">{{message.content}}</div>
                                            </div>
                                        </li>
                                    </ul>

                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="Type message..."
                                            v-model="messageContent" @keyup.enter="sendMessage(interaction);">
                                        <span class="input-group-btn">
                                            <button class="btn btn-default" type="button"
                                                @click="sendMessage(interaction);">Send</button>
                                        </span>
                                    </div>

                                </div>

                            </div>

                        </div>
                    </tab>
                    <tab header="Work Requests">
                        <div class="list-group">
                            <div class="list-group-item" v-for="workRequest in workRequestCollection">
                                <h4 class="list-group-item-heading">Work Request: [{{workRequest.id}}]</h4>
                                <ul>
                                    <li v-for="interaction in workRequest.getInteractions()">
                                        <h4 class="list-group-item-heading">
                                            <i class="glyphicon glyphicon-bell"
                                                v-if="interaction.data.state === 'ALERTING'"></i>
                                            <i class="glyphicon glyphicon-pause"
                                                v-if="interaction.data.state === 'HELD'"></i>
                                            <i class="glyphicon glyphicon-play"
                                                v-if="interaction.data.state === 'ACTIVE'"></i>
                                            <i class="glyphicon glyphicon-play"
                                                v-if="interaction.data.state === 'INITIATED'"></i>
                                            {{ interaction.data.channel }} - {{ interaction.data.state }} [{{
                                            interaction.data.id }}]
                                            <button class="btn btn-xs btn-success" @click="interaction.accept()"
                                                v-if="interaction.data.capabilities.canAccept">Accept</button>
                                            <button class="btn btn-xs btn-warning" @click="interaction.hold()"
                                                v-if="interaction.data.capabilities.canHold">Hold</button>
                                            <button class="btn btn-xs btn-success" @click="interaction.unhold()"
                                                v-if="interaction.data.capabilities.canUnhold">Unhold</button>
                                            <button class="btn btn-xs btn-danger" @click="interaction.end()"
                                                v-if="interaction.data.capabilities.canEnd">End</button>
                                            <button class="btn btn-xs btn-success"
                                                @click="interaction.consult(startInteractionAddress)"
                                                v-if="interaction.data.capabilities.canConsult">Consult</button>
                                            <button class="btn btn-xs btn-success"
                                                @click="interaction.singleStepTransfer(startInteractionAddress)"
                                                v-if="interaction.data.capabilities.canSingleStepTransfer">Transfer</button>
                                            <button class="btn btn-xs btn-success"
                                                @click="interaction.completeTransfer()"
                                                v-if="interaction.data.capabilities.canTransferComplete">Complete As
                                                Transfer</button>
                                            <button class="btn btn-xs btn-success"
                                                @click="interaction.completeConference()"
                                                v-if="interaction.data.capabilities.canConferenceComplete">Complete As
                                                Conference</button>
                                        </h4>

                                        <div class="chat-history"
                                            v-show="interaction.data.state !== 'ALERTING' && interaction.data.channel === 'WEBCHAT'">
                                            <ul>
                                                <li class="clearfix" v-for="message in getMessages(interaction)">
                                                    <div v-if="message.isSelf">
                                                        <div class="message-data align-left">
                                                            <span class="message-data-name">{{message.from}}</span>
                                                            <span
                                                                class="message-data-time">{{message.created.toLocaleString()}}</span>
                                                            &nbsp;
                                                        </div>
                                                        <div class="message my-message">{{message.content}}</div>
                                                    </div>
                                                    <div v-else>
                                                        <div class="message-data align-right">
                                                            <span
                                                                class="message-data-time">{{message.created.toLocaleString()}}</span>
                                                            &nbsp;
                                                            <span class="message-data-name">{{message.from}}</span>
                                                        </div>
                                                        <div class="message other-message float-right">
                                                            {{message.content}}</div>
                                                    </div>
                                                </li>
                                            </ul>

                                            <div class="input-group">
                                                <input type="text" class="form-control" placeholder="Type message..."
                                                    v-model="messageContent" @keyup.enter="sendMessage(interaction);">
                                                <span class="input-group-btn">
                                                    <button class="btn btn-default" type="button"
                                                        @click="sendMessage(interaction);">Send</button>
                                                </span>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </tab>
                </tabset>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="libs/AvayaCustomerServices.js"></script>
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script type="text/javascript" src="src/app.js"></script>
</body>

</html>