@extends('layouts.argo')
@section('content')
<div class="col">    
    <div class="card">
        <div class="card-header">
            <h3>Aplicativo Pabx Virtual</h3>
        </div>
        
        <div class="card-body">
            <h4>Escolha um número para realizar chamada</h4>
            @foreach($phones as $key => $phone)
             
                <div >
                    <input type="hidden" id="url" value="{{ url('api/seg/v1/pipedrive/') }}">
                    <input type="hidden" value="{{ $user->token }}" id="token{{$key}}" name="token">
                    <input type="hidden" value="{{ $verifica->extension }}" id="extension{{$key}}" name="extension">
                    <input type="hidden" value="{{ $phone->value }}" id="phone{{$key}}" name="phone">
                    <input type="hidden" value="{{ $person_id }}" id="person{{$key}}" name="person">
                    <h5>{{ $phone->value }}      <button class="btn btn-success btn-sm" onclick="call({{$key}})" id="btnCall" type="submit" title="Realizar ligação"><i class="fas fa-phone"></i></button></h5>
                </div>
            <br>
            @endforeach
        </div>
    </div>
</div>
@endsection

<script type="text/javascript">
    
    function call(key) {
        console.log(key);
        
        const   token = document.querySelector('#token'+key).value,
        extension = document.querySelector('#extension'+key).value,
        phone = document.querySelector('#phone'+key).value,
        person = document.querySelector('#person'+key).value;
        url = document.querySelector('#url').value;
        
        var urlPabx = url + "/" + token + "/" + extension + "/" + phone + "/" + person;
        
        $.get(urlPabx, function(data, status) {
            console.log("Status: " + status);
            console.log(data);
        });
    }
    
</script>