<%@page contentType="text/html; charset=windows-874"%>
<%@page import="com.csc.library.entry.HelpEntry,com.csc.library.system.*,com.csc.library.utilities.*,com.csc.library.session.*,com.csc.library.report.*"%>
<%@page import="com.csc.library.export.*"%>
<%@page import="jxl.Workbook,java.io.File"%>
<jsp:useBean id="XLSOPTION" class="com.csc.library.system.Task" scope="page" />
<%
	XLSOPTION.setChannel(request, response);
	XLSOPTION.checkProfile();
	UProfile up=XLSOPTION.getUProfile();
	String xlsname=request.getParameter("__xlsname");
	JxlOption jop=new JxlOption(xlsname,up);

	File exlFile=new File(JxlConfig.TEMPLATE_PATH.concat(xlsname));

	Workbook workbook = Workbook.getWorkbook(exlFile);
	JxlTemplateRecord templateRecord=new JxlTemplateRecord(workbook , up);
%>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" >
<link rel="stylesheet" type="text/css" href="./CSS/EMV_LAYOUT.css" />
<link rel="stylesheet" type="text/css" href="./CSS/EMV_TEXT.css" />

<script language='javascript' src="./JS/VIEWCALENDAR.js"></script>
<script  language="JavaScript" src="./JS/SCREEN.js"></script>
<script type='text/javascript' src="./JS/ICONSMENU.js"></script>
<script language='javascript' src="./JS/HOTKEY.js"></script>
<script language="JavaScript" type="text/JavaScript">
<!--
function goUpload(page){
    with(document.cscform){
	           open(page,"header","height=600,width=800");
	}
}

function goPreview(){
	with(document.cscform){
		bCon=confirm("Do you want to print data?");
		if (bCon==true)	{
					action = "/hr/servlet/exportexcel/";
					var temp =  target;
					target = "_blank";
					method="post";
					submit();
					target=temp;
		}
	}
}

function goExport(){
	with(document.cscform){
		bCon=confirm("Do you want to export data?");
		if (bCon==true)	{
				__cmd.value="save";
				action = "/hr/EXPEXCEL.jsp";
				var temp =  target;
				target = "_blank";
				method="post";
				submit();
				target=temp;
		}
	}
}

/*function goHelp(helpName,helpReturn){
	     linkHelp_Return(helpName,helpReturn);
}*/

//-->
</script>
<script type='text/javascript' src='JS/jquery-1.7.2.js'></script>
<script type='text/javascript' src='JS/jquery-ui-1.9.2.js'></script>
<script type="text/javascript" src="JS/jquery.blockUI.js"></script>
<link href="./JS/jquery/css/redmond/jquery-ui-1.7.1.custom.css" rel="stylesheet" type="text/css">
<script>


	$(function() {
		var clssHighlight = "ui-state-highlight"
			, clssSelected = "ui-selected"
			,clssSortalbe = "connectedSortable";
		var elem_fieldList = $( "."+clssSortalbe+"[typesort=field_list]");
		var elem_dataSource = $( "."+clssSortalbe+"[typesort=field_choose]" );

		elem_fieldList.each(function(){
			var self = $(this);
			var optionsSort = {};
			optionsSort["connectWith"] = ".connectedSortable[sheetname="+self.attr("sheetname")+"]";
			$.extend( optionsSort , {
				cursor: "move",
				receive: function( event, ui ) {
					if(ui.item){
						ui.item.removeClass(clssHighlight).removeClass(clssSelected);
					}
					var self = $(ui.item);
					var idx = parseInt(self.attr("index"))-1;
					var siblings = self.siblings("[index="+idx+"]");
					if( siblings.length > 0 ){
						siblings.after(self);
					}else{
						self.parent().prepend(self);
					}
				}
			});

			self.sortable(optionsSort).disableSelection();
		});

		elem_dataSource.each(function(){
			var selfDs = $(this);
			var shName = selfDs.attr("sheetname");
			var optionsSort = {};
			optionsSort["connectWith"] = ".connectedSortable[sheetname="+shName+"]";
			$.extend( optionsSort , {
				update: function( event , ui ){
					var self = $(this);
					$(".columnchoose[sheetname="+shName+"]").val(self.sortable("toArray").toString());
				},
				cursor: "move",
				receive: function( event, ui ) {
					if(ui.item){
						ui.item.each(function(){
							$(this).addClass(clssHighlight).removeClass(clssSelected);
						});
					}
				}
			});
			selfDs.sortable(optionsSort).disableSelection();

		});

		$(".bt-sort[typebt=next]").button().click(function(e){
			var shName = $(this).attr("sheetname");
			var dsLink = $( "."+clssSortalbe+"[typesort=field_choose][sheetname="+shName+"]");
			var optsDsLink = dsLink.sortable("option");
			$( "."+clssSortalbe+"[typesort=field_list][sheetname="+shName+"]").find("li."+clssSelected).each(function(){
				var self = $(this);
				self.appendTo(dsLink);
				if( optsDsLink.receive ){
					optsDsLink.receive.call( elem_dataSource , null , {
						item : self
					});
				}
				if( optsDsLink.update ){
					optsDsLink.update.call( elem_dataSource , null , {
						item : self
					});
				}
			});
		});

		$(".bt-sort[typebt=back]").button().click(function(e){
			var shName = $(this).attr("sheetname");
			var listLink = $( "."+clssSortalbe+"[typesort=field_list][sheetname="+shName+"]");
			var optsListLink = listLink.sortable("option");
			$( "."+clssSortalbe+"[typesort=field_choose][sheetname="+shName+"]").find("li."+clssSelected).each(function(){
				var self = $(this);
				self.appendTo(listLink);
				if( optsListLink.receive ){
					optsListLink.receive.call( elem_dataSource , null , {
						item : self
					});
				}

				if( optsListLink.update ){
					optsListLink.update.call( elem_dataSource , null , {
						item : self
					});
				}
			});
		});



		$(".ui-sortable>li").click(function(){
			$(this).toggleClass(clssSelected);
		});

		/*$("bt-sort[typebt=next]").button().click(function(e){
			var optsSort = elem_dataSource.sortable("option");
			elem_fieldList.find("li."+clssSelected).each(function(){
				var self = $(this);
				elem_dataSource.sortable("option","receive").call( elem_dataSource , null , {
					item : self
				});
				elem_dataSource.sortable("option","update").call( elem_dataSource , null , {
					item : self.appendTo(elem_dataSource)
				});
			});
		});*/


	//	$(".table-search-condition").disableSelection();
	});

		</script>

<style type="text/css">
<!--
.style1 {color: #FF0000}
  #sortable1, #sortable2 {
    border: 1px solid black;
    width: 200px;
    min-height: 20px;
    list-style-type: none;
    margin: 0;
    padding: 5px 0 0 0;
    float: left;
    margin-right: 10px;
	overflow: auto;
	height:200px;
  }
  #sortable1 li, #sortable2 li {
    margin: 0 5px 5px 5px;
    padding: 5px;
    font-size: 1.2em;
    width: 150px;
	text-align: left;
  }

  .ui-sortable li.ui-selected{
	background: #F39814; color: white;
  }

  .bt-sort {
	cursor:pointer
  }
-->
</style>
						<%
						boolean checkForPrint = false;
						for(int i = 0; i < templateRecord.getTemplate().size(); i++){
							JxlTemplate jxltemplate = templateRecord.getTemplate().get(i);
							if( jxltemplate.getColumnChooseList() == null ){
								continue;
							}else{
								checkForPrint = true;
								break;
							}
						}
						if( checkForPrint ){
					%>


  	<div class="box-search-condition">
      <div class="content-title"><%=XLSOPTION.getUProfile().get("lang").equals("tha")?"กำหนดเงื่อนไข":"Condition Asset"%></div>
      <table width="100%" border="0" cellpadding="0" cellspacing="0" class="table-search-condition">
        <tr>
          <td colspan="5" class="column-label">&nbsp;</td>
        </tr>
					<%
						for(int i = 0; i < templateRecord.getTemplate().size(); i++){
							JxlTemplate jxltemplate = templateRecord.getTemplate().get(i);
							if( jxltemplate.getColumnChooseList() == null ){
								continue;
							}

					%>

		<tr>
		  <td class="column-label" style="width:20%;">
			Choose Column
		  </td>
          <td colspan="3" class="column-label" style="width:60%;">
				<table border="0" cellspacing="0" cellpadding="0" align="center">
					<tr>
						<td class="blankspace" colspan="3"></td>
					</tr>
					<tr>
						<td class="column-label">
							<input type="hidden" class="columnchoose" id="__column_choose$<%=i%>" name="__column_choose$<%=i%>" sheetname="<%=jxltemplate.getTemplate_sheet_name()%>" value="">
							<ul id="sortable1" class="connectedSortable" typesort="field_list" sheetname="<%=jxltemplate.getTemplate_sheet_name()%>">
					<%

							for(int x = 0; x < jxltemplate.getFieldList().size(); x++){
								if( jxltemplate.getColumnChooseList().get(x) == null ){
									continue;
								}
								//out.println(jxltemplate.getFieldList().get(x)+"</br>");
					%>
								<li class="ui-state-default" index="<%=x%>" id="<%=jxltemplate.getFieldList().get(x)%>"><%//=jxltemplate.getFieldList().get(x)%><%=jxltemplate.getColumnChooseList().get(x)%></li>
					<%
							}
					%>
							</ul>
						</td>
						<td class="column-label">
							<div class="bt-sort" id="bt-next<%=i%>" typebt="next" sheetname="<%=jxltemplate.getTemplate_sheet_name()%>">>></div>
							</br>
							<div class="bt-sort" id="bt-back<%=i%>" typebt="back" sheetname="<%=jxltemplate.getTemplate_sheet_name()%>"><<</div>
						</td>
						<td class="column-label">
							<ul id="sortable2" class="connectedSortable" typesort="field_choose" sheetname="<%=jxltemplate.getTemplate_sheet_name()%>">

							  <!-- <li class="ui-state-highlight">Item 5</li> -->
							</ul>
						</td>
					</tr>

					<tr>
						<td class="columnobject1" colspan="3"></td>
					</tr>
				   <tr>
						<td class="blankspace" colspan="3"></td>
					</tr>
				</table>
			</td>
			<td class="column-label" style="width:20%;">
		  </td>
        </tr>
		<%
			}
		}
		%>
      </table>
    </div>