{% extends 'ccc/campaigns/base.html' %}
{% load tz static i18n staticfiles %}
{% block title %}My Voice Campaigns
{% endblock title %}
{% block css %}
 <link rel="stylesheet" type="text/css" href="{% static 'assets/plugins/select2/select2.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'assets/plugins/select2/select2-metronic.css' %}"/>
<link rel="stylesheet" href="{% static 'assets/plugins/data-tables/DT_bootstrap.css' %}"/>
<!-- END PAGE LEVEL STYLES -->
 {% endblock css %}
{% block content %}
			<!-- BEGIN PAGE HEADER-->
			<div class="row">
				<div class="col-md-12">
					<!-- BEGIN PAGE TITLE & BREADCRUMB-->
					<h3 class="page-title">
					My Voice Campaigns <small></small>
					</h3>
					<ul class="page-breadcrumb breadcrumb">
						 <li class="btn-group">
{#              <span class="primary yellow">#}
{#                  <button class="btn default" id="new-cp">#}
{#                    <i class="fa fa-plus"></i> Add Campaign <i class="fa fa-bullhorn"></i>#}
{#                  </button>#}
{#              </span>#}
						</li>

						<li>
							<i class=" active fa fa-volume-up" ></i>
							<a href="#">
								My Voice Campaigns
							</a>
							<i class="fa fa-angle-right"></i>
						</li>
						<li>
							<a href="/vco-report/">
								Outgoing Calls
							</a>
							<i class="fa fa-angle-right"></i>
						</li>

                        <li>
							<a href="/vci-report/">
								Received Calls
							</a>
						</li>
					</ul>
					<!-- END PAGE TITLE & BREADCRUMB-->
				</div>
			</div>
			<!-- END PAGE HEADER-->
			<!-- BEGIN PAGE CONTENT-->
			<div class="row">
				<div class="col-md-12">

					<!-- BEGIN EXAMPLE TABLE PORTLET-->
					<div class="portlet box blue">
						<div class="portlet-title">
							<div class="caption">
								<i class="fa fa-phone"></i> My Voice Campaigns
							</div>
							<div class="actions">
								<div class="btn-group">
									<a class="btn default" href="#" data-toggle="dropdown">
										 Columns <i class="fa fa-angle-down"></i>
									</a>
									<div id="sample_2_column_toggler" class="dropdown-menu hold-on-click dropdown-checkboxes pull-right">
										<label><input type="checkbox" checked data-column="1">Created at</label>
										<label><input type="checkbox" checked data-column="2">Name</label>
										<label><input type="checkbox" checked data-column="3">Description</label>
										<label><input type="checkbox" checked data-column="4">Campaign No</label>
										<label><input type="checkbox" checked data-column="5">Team</label>
                    <label><input type="checkbox" checked data-column="6">Redirect  No</label>
                    <label><input type="checkbox" checked data-column="7">Ended</label>
									</div>
								</div>
							</div>
						</div>
						<div class="portlet-body">
							<table class="table table-striped table-bordered table-hover table-full-width" id="sample_2">
							<thead>
							<tr>
							    <th></th>
								<th>
									 <i class="fa fa-calendar"></i> Created at
								</th>

                                <th>
									<i class="fa fa-bullhorn"></i> Name
								</th>


                                <th class="hidden-xs">
									<i class="fa fa-book"></i> Description
								</th>

                                <th class="hidden-xs">

									 <i class="fa fa-phone"></i> Campaign No
								</th>
                                 <th class="hidden-xs">

									 <i class="fa fa-users"></i> Team
								</th>
                                <th class="hidden-xs">

									 <i class="fa fa-phone"></i> Redirect  No
								</th>


                                <th class="hidden-xs">
									 <i class="fa fa-lock"></i>Ended
								</th>


							</tr>
							</thead>
							<tbody>
                            {% for vc in campaigns%}



							<tr ondblclick="$('#edit_voice_{{ vc.id }}').modal({remote: '/edit-voice/{{ vc.id }}/'})">
							    <td onclick="$('#edit_voice_{{ vc.id }}').modal({remote: '/edit-voice/{{ vc.id }}/'})">
							        <i class="fa fa-edit"></i></td>
								<td>
									{{ vc.date_created }}
								</td>


                                <td>
									{{ vc.campaign.name }}
								</td>
                                <td title="{{ vc.campaign.description }}">
									{{ vc.campaign.description|truncatechars:25 }}
								</td>
                                <td>
									{{ vc.campaign.phone }}
								</td>
                                <td>
									{{ vc.campaign.team }}
								</td>

                                <td>
									{{ vc.campaign.redirect_no }}
								</td>


								<td>
                                    {% if vc.ended_at %}
									 {{ vc.ended_at}}
                                        {% else %}
                                        -
                                   {% endif %}
								</td>

							</tr>

                            {% endfor %}

							</tbody>
							</table>
						    {% for vc in campaigns %}
							
	                            <div id="edit_voice_{{ vc.id }}" class="modal fade" tabindex="-1" role="basic" aria-hidden="true">
                                <div class="modal-dialog">
                                <div class="modal-content"></div>
                                </div>
                                </div>
    
                            {% endfor %}
						</div>
					</div>
					<!-- END EXAMPLE TABLE PORTLET-->
				</div>
			</div>


	{% endblock content %}

{% block scripts %}

<!-- BEGIN PAGE LEVEL PLUGINS -->
<script type="text/javascript" src="{% static 'assets/plugins/select2/select2.min.js' %}"></script>
<script type="text/javascript" src="{% static 'assets/plugins/data-tables/jquery.dataTables.min.js' %}"></script>
<script type="text/javascript" src="{% static 'assets/plugins/data-tables/DT_bootstrap.js' %}"></script>
    <script type="text/javascript" src="{% static 'assets/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js' %}"></script>
    <script src="{% static 'audiojs/audio.min.js' %}"></script>
    <script src="{% static 'assets/scripts/custom/components-pickers.js' %}"></script>

<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->

<script src="{% static 'assets/scripts/custom/table-advanced.js' %}"></script>
<script>
jQuery(document).ready(function() {

   TableAdvanced.init();

    $('#show_schedule').click( function(){
        $('#schedule').toggle()
    });
    $('#dates').change( function(){
       var opt =  $("#dates option").filter(":selected").val();
        if (opt==1){
         $('#mini-schedule').show()
        }
            else{
            $('#mini-schedule').hide()
        }

    });
});
</script>
    <script>
  audiojs.events.ready(function() {
    var as = audiojs.createAll();
      ComponentsPickers.init();
  });
</script>



{% endblock scripts %}