<%@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"%>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.*" %>
<%@ page import="java.text.DecimalFormat" %>
<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);
	
	CheckNull chk = new CheckNull();
	CscCalendar calendar = new CscCalendar();
	DecimalFormat dfdate = new DecimalFormat("00");
	String filter_date= calendar.getEngYYYY()+"-"+dfdate.format(calendar.getMonth());
	SimpleDateFormat df = new SimpleDateFormat("hh:mm a", Locale.ENGLISH);
	GregorianCalendar gc= new GregorianCalendar();

	String screenname = chk.chkNullString(request.getParameter("__screen"));
	String conf = chk.chkNullString(request.getParameter("__confirm"));
	String conditionid = "";
	String conditiondesc ="";
	String condition="";
	String orderby="";
	String groupby="";
	String pagebreak="";
	String language="";
	String template="";
	String defaultreport="";
	String defaultcon="0";
	String norelationreport="0";

	String descReport = templateRecord.getTdesc();
	
%>

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" >




<!-- <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> -->

<script>		
	function showDate(mypicker){
		$(function() {
			$("#"+mypicker.id).datepicker({dateFormat: "dd-mm-yy",showAnim: "fadeIn",showOn: "focus",direction: 'up',showOtherMonths: true,selectOtherMonths: true,changeMonth: true,changeYear: true });
		});
	}	
	$(function() {
		var clssHighlight = "DodgerBlue"
			, 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);
		});
		
		$(".DodgerBlue>li").click(function(){
			$(this).toggleClass(clssSelected);
		});

		$(".table-search-condition").disableSelection();
	});
</script>
<style type="text/css">
	.style1 {color: #FF0000}
	#sortable1, #sortable2 {
		border: 1px solid black;
		width: 300px;
		min-height: 20px;
		list-style-type: none;
		margin: 0;
		float: left;
		margin-right: 10px;
		margin-left: 10px;
		overflow: auto;
		height:400px;
		border-color: #1874CD;
	}
	#sortable1 li, #sortable2 li {
		font-size: 1.2em;
		text-align: left;
	}

	.ui-sortable li.ui-selected{
		background: #C0C0C0; color: black;
		border-color:#1874CD ;
	}

	.DodgerBlue{
		background: #CAE1FF; color: black;
		border-color:#1874CD;
	}

	.DodgerBlue li.ui-selected{
		background: #eee; color: black;
		border-color:#1874CD;
	}

	.lineblue {
		border-color:#1874CD;
	}

	.bt-sort {
		cursor:pointer
	}


</style>
</head>

<div class="centered">
<div id="toolTipLayer" style="position:absolute; visibility: hidden"></div>
<script language="javascript">initToolTips();</script>
<form name="cscform" method="post" action="XLSOPTION.jsp">
<br>
<%
	Vector filterList = new Vector();
	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 align="center">
<table width="80%" align="center">
<tr>
<td>
<div id="filterColumn" align="center" class="panel panel-primary">
	<div class="panel-heading">
		<h3 class="panel-title" align="right">&nbsp</h3>
	</div>
		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="">
			<tr>
				<td 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 colspan="3"  class="column-label" style="width:100%;">
					<div align="center">
						<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 list-group" typesort="field_list" sheetname="<%=jxltemplate.getTemplate_sheet_name()%>">
<%

									for(int x = 0; x < jxltemplate.getFieldList().size(); x++){
										if( jxltemplate.getColumnChooseList().get(x) == null ){
											continue;
										}
										filterList.add(jxltemplate.getColumnChooseList().get(x));
										
%>
										<li class="ui-state-default list-group-item lineblue" index="<%=x%>" id="<%=jxltemplate.getFieldList().get(x)%>"><%=jxltemplate.getColumnChooseList().get(x)%></li>
<%
									}
%>
									</ul>
								</td>
								<td class="column-label">
									<div align="center">
										<button type="button" class="bt-sort btn btn-info" id="bt-next<%=i%>" typebt="next" sheetname="<%=jxltemplate.getTemplate_sheet_name()%>"><%=">>"%></button>
										<br>
										<br>
										<button type="button" class="bt-sort btn btn-info" id="bt-back<%=i%>" typebt="back" sheetname="<%=jxltemplate.getTemplate_sheet_name()%>"><%="<<"%></button>
									</div>
								</td>
								<td class="column-label">
									<ul id="sortable2" class="connectedSortable list-group" typesort="field_choose" sheetname="<%=jxltemplate.getTemplate_sheet_name()%>"></ul>
								</td>
							</tr>
							<tr>
								<td class="blankspace" colspan="3">&nbsp;</td>
							</tr>
							<tr>
								<td  colspan="3">
									<div align="center"><button type="button" class="btn btn-sm btn-primary" onclick="goFilter()">&nbsp;&nbsp;NEXT&nbsp;&nbsp;</button></div>
								</td>
							</tr>
							<tr>
								<td class="blankspace" colspan="3">&nbsp;</td>
							</tr>
						</table>
					</div>
				</td>
			</tr>
<%
		}
	}
%>
		</table>
	</div>
</div>
</td>
</tr>
</table>
</div>
<br> 
<br>