<div class="row">
	<div class="col-md-12">
		<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#openCreatePhonebookModal">Create Phonebook</button>
		<br><br>
		<div class="container">         
			<table id="phonebook-datatables" class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
				<thead >
					<tr>
						<th>Created Date</th>
						<th>Name</th>
						<th>Description</th>
						<th>Campaign</th>
						<th>Priority</th>
						<th>Caller ID</th>
						<th>Status</th>
						<th>Action</th>
					</tr>
				</thead>
				<tbody>
					@foreach($listofPhonebooks as $listofPhonebooksDetails)
					<tr class="item{{$listofPhonebooksDetails->id}}">	
						<td>{{$listofPhonebooksDetails->created_at}}</td>
						<td data-toggle="modal" data-target="#statsModal">{{$listofPhonebooksDetails->name}}</td>
						<td>{{$listofPhonebooksDetails->description}}</td>
						<td>{{$listofPhonebooksDetails->campaign}}</td>
						<td>{{$listofPhonebooksDetails->priority}}</td>
						<td>{{$listofPhonebooksDetails->caller_id}}</td>
						<td>{{$listofPhonebooksDetails->status}}</td>
						<td>
							<button type="button" class="btn btn-info btn-sm" id="MybtnModal"data-toggle="modal" data-target="#editModal"
							phonebook-id="{{$listofPhonebooksDetails->id}}" 
							phonebook-name="{{$listofPhonebooksDetails->name}}" 
							phonebook-desc="{{$listofPhonebooksDetails->description}}" 
							phonebook-campaign="{{$listofPhonebooksDetails->campaign}}" 
							phonebook-priority="{{$listofPhonebooksDetails->priority}}" 
							phonebook-callerid="{{$listofPhonebooksDetails->caller_id}}" 
							phonebook-status="{{$listofPhonebooksDetails->status}}">Edit</button>
						</td>
					</tr>
					@endforeach
				</tbody>
			</table>
		</div>
	</div>
</div>
<!-- Create PhonebookModal -->
<div class="modal fade" id="openCreatePhonebookModal"  data-backdrop="static" role="dialog">
	<div class="modal-dialog">    
		<!-- Create Phonebook Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Create Phonebook Form</h4>

			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					{{ csrf_field() }}
					<div class="form-group">
						<label class="control-label col-sm-2">Name:</label>
						<div class="col-sm-6">
							<input type="textbox" class="form-control" name="name" id="name" >
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2" >Description:</label>
						<div class="col-sm-6">
							<input type="textbox" class="form-control" name="description" id="description" >
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2" >Campaign:</label>
						<div class="col-sm-6">
							<select class="form-control" name="campaign" id="campaign">

							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2" >Priority:</label>
						<div class="col-sm-6">
							<input type="textbox" class="form-control" name="priority" id="priority" >
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2" >Callerid:</label>
						<div class="col-sm-6">
							<input type="textbox" class="form-control" name="callerid" id="callerid" >
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2" >Status:</label>
						<div class="col-sm-6">
							<select class="form-control" name="status" id="status">
								<option value="Active">Active</option>
								<option value="Inactive">Inactive</option>
							</select>
						</div>
					</div>
					<div class="form-group"> 
						<div class="col-sm-offset-2 col-sm-6">
							<button type="submit" class="btn btn-success" onclick="storePhonebookDetails();return false;">Submit</button>
						</div>
					</div>
				</form>      
			</div>
		</div>     
	</div>
</div>

<!-- Edit PhonebookModal -->
<!-- Modal -->
<!-- .modal -->
<div class="modal fade"  id="editModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button> 
				<h4 class="modal-title">Edit Phonebook</h4>                                                             
			</div> 
			<div class="modal-body">
				<form class="form-horizontal">
					{{ csrf_field() }}

					<div class="form-group">
						<label class="control-label col-sm-2" >Name:</label>
						<div class="col-sm-6">
							<input type="textbox" class="form-control" name="name" id="editname" >
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2" >Description:</label>
						<div class="col-sm-6">
							<input type="textbox" class="form-control" name="description" id="editdescription" >
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2" >Campaign:</label>
						<div class="col-sm-6">
							<select class="form-control" name="campaign" id="editcampaign">

							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2" >Priority:</label>
						<div class="col-sm-6">
							<input type="textbox" class="form-control" name="priority" id="editpriority" >
						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2" >Callerid:</label>
						<div class="col-sm-6" id="example">
							<input type="textbox" class="form-control" name="callerid" id="editcallerid" >

						</div>
					</div>
					<div class="form-group">
						<label class="control-label col-sm-2" >Status:</label>
						<div class="col-sm-6">
							<select class="form-control" name="status" id="editstatus">
								<option value="Active">Active</option>
								<option value="Inactive">Inactive</option>
							</select>
						</div>
					</div>
					<div class="form-group"> 
						<div class="col-sm-offset-2 col-sm-6">
							<button type="button" class="btn btn-success" id="save">Save</button>
						</div>
					</div>
				</form> 
			</div>   
		</div>                                                                       
	</div>                                          
</div>
<!-- Edit PhonebookModal -->

<!-- StatsModal -->
<div class="modal fade" id="statsModal" role="dialog">
	<div class="modal-dialog">  
		<!-- StatsModal content-->
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">Campaign Wise Call Stats</h4>
			</div>
			<div class="modal-body">
				<div class="container">         
					<table class="table table-striped table-bordered table-sm" cellspacing="0" width="100%">
						<thead>
							<tr>
								@if(isset($newDataCount))
								<th>Total Data Uploaded</th>
								<td>{{$newDataCount}}</td>
								@endif
							</tr>
							<tr><th>Total Data Called</th>
								@if(isset($calledDataCount))
								<td>{{$calledDataCount}}</td>
								@endif
							</tr>
							<tr>
								<th colspan="2" style="text-align: center;">Disposition Count</th>
							</tr>
							@if(isset($dispositionWiseCount))
							@foreach($dispositionWiseCount as $dispositionWiseDetails)
							<tr>
								<th>
									{{$dispositionWiseDetails->dialer_status}}
								</th>
								<td>{{$dispositionWiseDetails->count_status}}</td>
							</tr>
							@endforeach
							@endif
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

</div>
</div>  
</div>
</div>
</div>

<script type="text/javascript">
	var selectedCampaign = $("#selectCampaignField").val();
	$("#campaign").append('<option value="' + selectedCampaign + '">' + selectedCampaign + '</option>');


	$('#name').keypress(function (e) {
		var regex = new RegExp("^[a-zA-Z0-9]+$");
		var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
		if (regex.test(str)) {
			return true;
		}
		else
		{
			e.preventDefault();
			simpleNotification('error','topRight',"Please enter Valid Phonebook Name");
			return false;
		}
	});

	$('#editname').keypress(function (e) {
		var regex = new RegExp("^[a-zA-Z0-9]+$");
		var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
		if (regex.test(str)) {
			return true;
		}
		else
		{
			e.preventDefault();
			simpleNotification('error','topRight',"Please enter Valid Phonebook Name");
			return false;
		}
	});


	function storePhonebookDetails()
	{
		var selectedCampaign = $("#selectCampaignField").val();
		doAjax("phonebook","name="+$("#name").val()+"&description="+$("#description").val()+"&campaign="+$("#campaign").val()+"&priority="+$("#priority").val()+"&callerid="+$("#callerid").val()+"&status="+$("#status").val(),'', '','','POST',function(retstr){
	});

		campaignDetailsShow(selectedCampaign);
		simpleNotification('success','topRight','Phonebook is created Successfully');
	}

	$('#editModal').on('show.bs.modal', function (e) 
	{
// get information to update quickly to modal view as loading begins
var opener=e.relatedTarget;//this holds the element who called the modal
//we get details from attributes
var phonebookid=$(opener).attr('phonebook-id');
var phonebookName=$(opener).attr('phonebook-name');
var phonebookDesc=$(opener).attr('phonebook-desc');
var campaignName=$(opener).attr('phonebook-campaign');
var Priority=$(opener).attr('phonebook-priority');
var callerID=$(opener).attr('phonebook-callerid');
var phonebookStatus=$(opener).attr('phonebook-status');
$("#editstatus option").each(function()
{
	if($(this).val() == phonebookStatus){
		$(this).prop('selected','true');
//$("#editcampaign").attr("selected","selected");
}
});


$('#editname').val(phonebookName);
$('#editdescription').val(phonebookDesc);
$("#editcampaign").empty();
$("#editcampaign").append('<option value="' + campaignName + '">' + campaignName + '</option>');
$('#editpriority').val(Priority);
$('#editcallerid').val(callerID);

$("#save").click(function()
{	
	doAjax("phonebook/"+phonebookid,"_method=PUT&name="+$("#editname").val()+"&description="+$("#editdescription").val()+"&campaign="+$("#editcampaign").val()+"&priority="+$("#editpriority").val()+"&callerid="+$("#editcallerid").val()+"&status="+$("#editstatus").val()+"&ph_id="+phonebookid,'', '','','POST',function(retstr){
		
	});
	campaignDetailsShow(selectedCampaign);
	simpleNotification('success','topRight','Phonebook is edited Successfully');
});

});

	$(document).ready(function () 
	{
		$('#phonebook-datatables').DataTable();

	});

</script>