<style>
.list-group{
padding: 5px;
margin: 0px;
overflow:auto;
width:100%
}
</style>	    
<div class="row">
	<div class="col-md-12">
		<div class="panel panel-info">
			<div class="panel-body">
				<?php //echo "<pre>";print_r($selectedDispositionPlan); ?>
				<div class="row" style="margin: 5px">
					<div class="col-md-2">
					<label>Select Disposition Plan:</label>
					</div>
					<div class="col-md-6">
						<select id="dispositionPlan" class="form-control" style='width:100%' required="">
							<option value>Select Disposition Plan</option>
							<?php 
							if(isset($dispositionPlans))
								foreach($dispositionPlans as $kay => $val){
										$sel= '';
										if($val->id == $selectedDispositionPlan->planid)$sel='selected';
										echo "<option value='$val->id' $sel>$val->name</option>";
									} 
							?> 
						</select>

					</div>
				</div>

				<!-- <div class="row" style="margin: 5px">
					<div class="col-md-2">
					<label>Select Disposition:</label>
					</div>
					<div class="col-md-6">
						<select id="disposition" class="form-control" onchange='subDisposition($(this).val());'>
							<option value></option>
							<?php if(isset($disposition))
								foreach($disposition as $kay => $val)
									{ 
										$code = $dispositionCode[$kay];
										echo "<option data-id='$code' data-text='$kay' value='$val'>$kay</option>";
									} ?> 
						</select>

					</div>
				</div> -->	
				<!-- <div class="row" style="margin: 5px">
					<div class="col-md-2">
					<label>Select Sub Disposition:</label>
					</div>
					<div class="col-md-6">
						<select id="subDisposition" class="select2multi" style='width:100%' multiple="">
						</select>
					</div>
				</div>-->
				<div class="row">
					<div class="col-md-2">
						<button id="assigndesposition" class="btn btn-xs btn-info">Assign Disposition
						</button>
					</div>
					<div class="col-md-8" id="error">
					</div>
				</div> 

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

	<div class="col-sm-12">
		<div class="panel panel-info">
			<div class="panel-heading"><strong>Disposition Plan :  <?php echo $selectedDispositionPlan->name; ?></strong></div>
			<div class="panel-body" id="">
				<ul class="list-group">
						<?php 
						foreach($dispositionList as $key => $val) { ?>
						<li class="list-group-item list-group">
							<div class="col-sm-12">
								<div class="col-sm-3"><label><?php  echo $val['disposition']; ?></label></div>
								<div class="col-sm-4">
									<?php $count = 0;
									$subDisposition = explode(",", $val['subDisposition']);
									if(count($subDisposition) > 0){
										foreach ($subDisposition as $key => $value) {
											if(!empty($value)){ 
												$count++;
												echo "$count. ".$value. "<br>";
											}
										}
									}
									?>	
								</div>
								<!-- <div class="col-sm-2"><a class="innerAll" href="#" onclick="deleteDesposition('<?php echo $val['disposition']; ?>');"> 
                                <span class="btn btn-primary btn-xs"><i class="fa fa-trash-o"></i></span>
                              </a></div>-->
							</div>
							
							</li>
						<?php } ?>
					</ul>
			</div>
		</div>
	</div>

</div>

<script>
	function subDisposition(dispo)
	{	
		var dispolist = dispo.split(',');
		/*var dispolist = [];
		
		$.each( dispo, function( index, value ){
		   dispolist = $.merge( dispolist, value.split(',') );
		});*/
		
		$("#subDisposition").select2("val", "Select");
		updateJSSelect('subDisposition',dispolist);
	}

	function deleteDesposition(key)
	{
		if (window.confirm('Are sure you want to delete disposition?'))
		{

			var selectCampaignField = $('#selectCampaignField').val();
			var postdata='disposition='+key;
				postdata+='&selectCampaignField='+selectCampaignField;
				
			doAjax("campaign/deleteAssignDisposition",postdata,"campaignDetailsArea","","","GET",function(retrstr){
					simpleNotification('Success','topRight',"Campaign assign suceesfully!"); 
					doAjax("campaign/show","campaign="+selectCampaignField,"campaignDetailsArea","","","GET",function(retrstr){
						$("#subDisposition").select2("val", "Select");
						$('.nav-tabs a[href="#disposition"]').tab('show');
					});

				});
		}else{
			return false;
		}
	}

	$('#assigndesposition').click(function()
	{	
		$("#error").html('');
		var plan = $('#dispositionPlan').val();//$('#dispositionPlan').find(':selected').text();
		var selectCampaignField = $('#selectCampaignField').val();

		//var disposition = $("#disposition option:selected").text();
		/*var disposition =  $('#disposition').find(':selected').attr('data-text')
		var subDisposition = $('#subDisposition').val();
		var selectCampaignField = $('#selectCampaignField').val();*/
//alert(selectCampaignField);

		//if(disposition&&selectCampaignField)
		if(plan&&selectCampaignField){
			var postdata='plan='+plan;
			postdata+='&selectCampaignField='+selectCampaignField;
			/*var postdata='disposition='+disposition;
			postdata+='&code='+code;
			postdata+='&disposition='+disposition;
			postdata+='&subDisposition='+subDisposition;
			postdata+='&selectCampaignField='+selectCampaignField;*/

			doAjax("campaign/assigndisposition",postdata,"campaignDetailsArea","","","GET",function(retrstr){
				simpleNotification('Success','topRight',"Campaign assign suceesfully!");
				doAjax("campaign/show","campaign="+selectCampaignField,"campaignDetailsArea","","","GET",function(retrstr){
					$("#subDisposition").select2("val", "Select");
					$('.nav-tabs a[href="#disposition"]').tab('show');
				});				
			});

		}else{
			simpleNotification('Error','topRight',"Please select disposition plan!");
			$("#error").html('<p class="text-danger text-center">Please select disposition plan.</p>');
			return false;
		}
	});

</script>