@include('layout.head')
@include('layout.scripts')

<div class="col-md-6 order-md-2 mb-4">
    <div class="card">
        <h5 class="card-header">
            Talk to support now
        </h5>
        <div class="card-body">
            <div class="form-group row">
                <label for="call-status" class="col-2 col-form-label">Status</label>
                <div class="col-10">
                    <input id="call-status" class="form-control" type="text" placeholder="Connecting to Twilio..." readonly>
                </div>
            </div>
            <button class="btn btn-lg btn-primary call-support-button" onclick="callSupport()">
                Call support
            </button>
            <button class="btn btn-lg btn-danger hangup-button" disabled onclick="hangUp()">Hang up</button>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://sdk.twilio.com/js/client/v1.13/twilio.min.js"></script>
<script type="text/javascript" src="{{asset('js/caller.js')}}"></script>