<script src="//tinymce.cachefly.net/4.2/tinymce.min.js"></script>
<style>
.table th, .table td{ text-align:center; vertical-align: middle!important; }
.adv-pos:hover .close{ display	:block; }
.adv-pos .close{ display:none; position:absolute;top:10;right:10; z-index:99;}
</style>

<?php 
$groupData = array(	'1'=>'TRANG HOME',
					'2'=>'TRANG TÌM KIẾM',
					'3' => 'TRANG CHI TIẾT' );
					
$cityData = array(	'1' => 'Sài Gòn | Hà Nội', 
					'0' => 'Cả nước'
				);

$cateData = array(	1 	=> 'Bất động sản <br/> Oto - Xe máy', 
					0 	=> 'Các danh mục khác'
				);	
?>

<ul class="nav nav-tabs">
<?php foreach($groupData as $groupId=>$groupName){ ?>
	<li class="<?=$groupId==1?'active':''?>">
		<a href="#<?=alias($groupName)?>" data-toggle="tab" aria-expanded="false"><strong><?=$groupName?></strong></a>
	</li>
<?php  } ?>
</ul>

<div class="tab-content col-xs-12 nopadding">
<?php foreach($groupData as $groupId=>$groupName){ ?>
<div id="<?=alias($groupName)?>" class="tab-pane col-xs-12 nopadding <?=$groupId==1?'active':''?>">
<table class="table table-bordered" data-group="<?=$groupId?>">
   <thead>
      <tr class="info">        
         <th rowspan="2" class="uppercase"><?=$groupName?></th>
         <th rowspan="2">Danh mục</th>
         <th colspan="3">Giá</th>
      </tr>
	   <tr><?php foreach($cityData as $city=>$cityName){?>
			<th data-id="<?=$city?>"><?=$cityName?></th>
	   <?php }?>
      </tr>
   </thead>
   <tbody>
		<?php 
			$adIndex = 0;
			$advPos = get_adv_ids($groupId);
			
			$newpos = array(	'adId' => 'NEWID',
								'price' => 'Nhập giá mới',
								'note' => 'Nhập note'			
							);
			array_push($advPos, (object)$newpos);
			
			foreach($advPos as $adv) {
				$adIndex++;
				$rowIndex = 0;				
				foreach($cateData as $cateId=>$cateName){
					$rowIndex++;
		?>
		<tr class="<?=$adIndex%2==1?'active':''?> <?=$adv->adId?> <?=$adv->adId=='NEWID' ? 'hidden' :''?>">      
			<!-- Cột AD-ID và NOTE -->
			<?php if($rowIndex==1){?>
			<td rowspan="2" class="adv-pos">
				<button data-adid="<?=$adv->adId?>" class="close btn btn-circle-sm btn-default">x</button>
				<h4 class="text-primary adv-id <?=$adv->adId=='NEWID' ? 'editable' :''?>"><b><?=$adv->adId?></b></h4>
				<p data-list="<?=alias($groupName)?>" data-adid="<?=$adv->adId?>" class="editable adv-note"><?=!empty($adv->note) ?$adv->note : 'Mô tả vị trí này'?></p>
			</td>
			<?php }?>
			
			<!-- Cột danh mục -->
			<td><?=$cateName?></td>	
			
			<!-- 3 cột giá -->
			
			<?php foreach($cityData as $city=>$cityName){ $adPos = get_adv_position_g($adv->adId, $cateId, $city);?>
				<td data-list="<?=alias($groupName)?>" data-group="<?=$groupId?>" data-adid="<?=$adv->adId?>" data-city="<?=$city?>" data-cate="<?=$cateId?>" class="adv-price editable" style="color:red;font-size:22px;font-weight:bold">
					<?=$adPos ? $adPos->price : '<p><span style="color:#666;font-size:16px;font-weight:normal">Nhập giá mới</span></p>'?>
				</td>
		    <?php }?>
			
		</tr>
		
		<?php } }?>
		

		<tr>
			<th colspan="4">
				<div class="btn-group pull-right">
					<a data-list="<?=alias($groupName)?>" class="add-adv-position btn btn-success"><i class="fa fa-plus"></i> Thêm vị trí mới</a>
					<a data-list="<?=alias($groupName)?>" class="update-ad-list_btn btn btn-info"><i class="fa fa-plus"></i> Update bảng giá</a>
				</div>
			</th>
		</tr>
      
   </tbody>
   
</table>
</div>
<?php } ?>

<script>
$(document).ready(function(){

	for (var i = tinymce.editors.length - 1 ; i > -1 ; i--) {
		var ed_id = tinymce.editors[i].id;
		tinyMCE.execCommand("mceRemoveEditor", true, ed_id);
	}
	
	tinymce.init({
		selector: ".editable",			
		language_url : $conf.commonCdn + 'js/tinymce/langs/vi.js',
		entity_encoding : "raw",
		inline: true,
		relative_urls: false,
		paste_as_text: true, 				// clear all html, all iamge. ...
		paste_auto_cleanup_on_paste : true, // clear style
		plugins: ["paste preview code"],		
		toolbar1: "preview code",
		menubar: false, 
		toolbar_items_size: 'small'
	});
	
	// UPDATE lại giá toàn bộ vị trí trong một bảng
	$('.update-ad-list_btn').click(function(){
		var $form 		= $('#'+$(this).attr('data-list'));	
		
		var $data		= {};
			$data.note 	= [];
			$data.list 	= [];
		
		// Tìm tất cả các ô giá
		$form.find('.adv-price').each(function(){
			var $adv 		= {};
				$adv.price 	= $(this).text();
				$adv.adId 	= $(this).attr('data-adid');
				$adv.adId 	= $adv.adId == 'NEWID' ? $form.find('.' + $adv.adId + ' h4.adv-id').text() : $adv.adId;
				
				$adv.groupId= $(this).attr('data-group');
				$adv.cityId = $(this).attr('data-city');
				$adv.cateId = $(this).attr('data-cate');
				Logger.debug( $adv.adId );			
			if($form.find('.' +  $adv.adId).hasClass('hidden')==false)$data.list.push($adv);
		});
		
		// Tìm tất cả các ô giá
		$form.find('.adv-note').each(function(){
			var $note 		= {};
				$note.adId 	= $(this).attr('data-adid');				
				$note.note 	= $(this).html();
				
			if($form.find('.' +  $note.adId).hasClass('hidden')==false)$data.note.push($note);
		});
		
		//Logger.debug($data);return;
		
		jQuery.ajax({			
			type:"POST",
			url:$conf.base_url('ajax_update_position'), 
			data:$data,		 
			success:function(result){
				try{ 	result = $.parseJSON(result);			
						Alertt.show(result);	
						window.location.reload();
				}catch(e){
						Alertt.show(e.message,'danger');
				}
			}
		});	
	})
	
	
	// XÓA một vị trí quảng cáo
	$('.adv-pos .close').click(function(){
		var $data		= {};
			$data.adId  = $(this).attr('data-adid');
		
		//Logger.debug($data);return;
		
		if($data.adId=='NEWID'){$('.NEWID').addClass('hidden');return false;}
		
		jQuery.ajax({			
			type:"POST",
			url:$conf.base_url('ajax_delete_position'), 
			data:$data,		 
			success:function(result){
				try{ 	result = $.parseJSON(result);			
						Alertt.show(result);
						// Xóa các hàng này khỏi bảng
						$('.' + $data.adId).remove();
				}catch(e){
						Alertt.show(e.message,'danger');
				}
			}
		});	
	})
	
	// HIỆN form thêm một vị trí quảng cáo
	$('.add-adv-position').click(function(){
		$('#'+$(this).attr('data-list') + ' .NEWID').removeClass('hidden');
	})

})
</script>