{% extends 'layouts/backend_old.jinja2' %}
{% import 'macros/items.jinja2' as items %}
{% import 'macros/form.jinja2' as f with context %}
{% import 'leads/macros/lead.jinja2' as support with context %}
{% block title %}Forwarding Agents & Groups List{% endblock %}
{% block heading %} Agents & Groups {% endblock %}
{% block body %}
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-tabs card-header-padding" data-background-color="light-blue" {% if current_user.role == 'agent' %} style="display:none" {% endif %}>
<div class="nav-tabs-navigation">
<div class="nav-tabs-wrapper">
<ul class="nav nav-tabs" data-tabs="tabs">
<li style="width:100%;">
<div class="row form-group" style="padding-bottom: 0; margin: 0;">
<div class="col-md-2 col-xs-3 filter-from-field filter-padding-right filter-label">
<label class="label-control" style="color:white; font-size: 12px; padding-top:7px;">FILTER FROM:</label>
</div>
<div class="col-md-2 col-xs-4 filter-date-field filter-padding-left filter-padding-top">
<input type="text" class="form-control date-from" style="color:white;"/>
</div>
<div class="col-md-1 col-xs-1 filter-to-field filter-padding-left filter-padding-right filter-label">
<label class="label-control" style="color:white; padding-top:7px; font-size: 12px;">TO:</label>
</div>
<div class="col-md-2 col-xs-4 filter-date-field filter-padding-left filter-padding-top">
<input type="text" class="form-control date-to" style="color:white; "/>
</div>
<div class="col-md-2 col-xs-12">
<div class="dropdown">
<button href="#" class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-expanded="true" >
<div style="float:left;" class="divFriendlyName">Friendly Name...</div>
<b class="caret"></b>
</button>
<ul class="dropdown-menu cbFriendlyname">
</ul>
</div>
</div>
<div class="col-md-2 col-xs-12">
<div class="dropdown">
<button href="#" class="btn dropdown-toggle btn-primary" data-toggle="dropdown" aria-expanded="true" >
<div style="float:left;" class="divPhoneNumber">Phonenumber...</div>
<b class="caret"></b>
</button>
<ul class="dropdown-menu cbPhonenumber">
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="card-content">
<div class="tab-content">
<div class="tab-pane active" id="monthly_agents" {% if current_user.role == 'agent' %} style="display:none" {% endif %}>
{% if monthly_calls %}
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<ul class="timeline timeline-simple timeline-stats">
<li class="timeline-inverted time-line-inverted-margin">
<div class="timeline-badge light-blue">
<i class="material-icons">phone</i>
</div>
<div class="timeline-panel dashboard-stat-panel">
<div class="timeline-heading">
<span class="label label-light-blue">Available Agents</span>
</div>
<h3 class="dashboard-stat-number chart-available-agents">
{{ available_agents }} <graph>
{{ total_agents }} total agents</graph>
</h3>
</div>
</li>
<li class="timeline-inverted time-line-inverted-margin">
<div class="timeline-badge success">
<i class="material-icons">phone_in_talk</i>
</div>
<div class="timeline-panel dashboard-stat-panel">
<div class="timeline-heading">
<span class="label label-success">Average Agent Calls</span>
<h3 class="dashboard-stat-number chart-average-calls">
{{ avg_calls_agent }}
</h3>
</div>
</div>
</li>
<li class="timeline-inverted time-line-inverted-margin">
<div class="timeline-badge warning">
<i class="material-icons">alarm_on</i>
</div>
<div class="timeline-panel dashboard-stat-panel">
<div class="timeline-heading">
<span class="label label-warning">Average Response Time</span>
<h3 class="dashboard-stat-number chart-response-times">
{{ avg_response_agent_min }} :
{{ avg_response_agent_sec }}<graph> min </graph>
</h3>
</div>
</div>
</li>
</ul>
</div>
<div class="col-md-9">
<div id="agentBarChart" class="ct-chart"></div>
<div class="chart-legend text-muted">
<i class="fa fa-circle text-primary"></i> Calls per forwarding agent
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="yearly_calls">
{% for item in monthly_data_points %}
{{item}}
{% endfor %}
<br />
{% for item in monthly_missed_data_points %}
{{item}}
{% endfor %}
<br />
{% for item in monthly_answered_data_points %}
{{item}}
{% endfor %}
<br />
{% for item in monthly_days %}
{{item}}
{% endfor %}
<br />
{% for item in agent_labels %}
{{item}}
{% endfor %}
<br />
{% for item in agent_leads %}
{{item}}
{% endfor %}
</div>
{% else %}
<div class="col-md-12 text-center no-data-section">
<i class="material-icons md-48">timeline</i>
<h3 class="title">
The magic will start as soon as you receive your first call!
</h3>
<p class="category">
We don't have anything to report on yet. As soon as you start receiving calls
from toll-free or local number we'll update this section with some statistics
and snapshots.
<br /><br />
Don't have a phone number yet? <a href="{{ url_for('phonenumbers.inbound_new') }}">
Set up first number here</a>
</p>
</div>
{% endif %}
</div>
<h4 class="card-title">Agents & Groups Table
</h4>
<div class="toolbar">
</div>
{% if (current_user.role == 'admin') or (current_user.is_viewing_partnership) %}
<div class="add-agent-btn">
<a href={{ url_for('agents.agent_new') }} class="btn btn-success add-agent-btn btn"> Add new agent</a>
<a href={{ url_for('agents.group_new') }} class="btn btn-success add-agent-btn btn"> Add new group</a>
</div>
{% endif %}
<div class="material-datatables table-responsive">
<table id="agent-datatable" class="table table-striped table-vcenter" style="width: 100%">
<thead>
<tr role="row">
<th style="width: 5%">No</th>
<th style="width: 15%"><i class="material-icons md-18">search</i> Name</th>
<th style="width: 30%">Description</th>
<th style="width: 10%">Phone Number</th>
<th style="width: 10%">Type</th>
<th style="width: 5%">Available Now</th>
<th class="text-center" style="width: 20%">
Actions
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
{% if (current_user.role == 'admin') or (current_user.is_viewing_partnership) %}
{% call f.form_tag('agents.convert_to_user', fid='agent_to_user_form', class='hidden', method='post') %}
<input type='text' name='a_to_u_agent_id'/>
{% endcall %}
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block pagescripts %}
<script>
window.appConfig = {
server_url: document.location.host,
}
</script>
{{ javascript_tag("agents_dashboard_js") }}
<script>
window.setTimeout(function() { $('#flash-messages').hide('slow') }, 10000);
</script>
{% endblock %}