// NOTE: [This JS must loaded as last item]


	// ===============================================================
	// Initialize Form
	// ===============================================================
	function FORM_LOAD()
	{
		// Initialize
		// _______________________________________________________________________	
		var DGV_ELEMENT_CHILD = null;
		var DGV_ELEMENT_CHILD_INDEX = 0;
		
		
		// Load DataGridVuew
		// _______________________________________________________________________	
		PO_ORDER_DGV = DataGridView("PO_ORDER_DGV");
		PO_ORDER_LIST_DGV = DataGridView("PO_ORDER_LIST_DGV");
		PRODUCT_BRANCH_DGV = DataGridView("PRODUCT_BRANCH_DGV");
		//PO_ORDER_DGV.SETTING_ALLOW_USER_TO_ADD_ROWS = true;
		//PO_ORDER_DGV.SETTING_EDITABLE = true;
		PO_ORDER_DGV.ON_CLICK
		(			
			function(COL_INDEX, ROW_INDEX)
			{
				// If dialog supported
				// ...........................................
				if(JSOC_ELEMENT.VAR_ELEMENT_EXISTS("PO_ORDER_MODAL") == true)
				{
					// Clear Modal
					if(JSVC_VAR.VAR_ISSET(INPUT_INSTANCE))
					{
						JSOC_WINDOW.VAR_INPUT_INSTANCE_RESTORE(INPUT_INSTANCE);
					}
						
					// Display Modal
					PROPERTY_REC_PORDER_ID = PO_ORDER_DGV.CELL.VALUE('REC_PORDER_ID', ROW_INDEX);
					PROPERTY_REC_PORDER_CODE = PO_ORDER_DGV.CELL.VALUE('REC_PORDER_CODE', ROW_INDEX);
					PROPERTY_EDIT_ROW_INDEX = ROW_INDEX;

					JSOC_ELEMENT.VAR_VALUE("REC_PORDER_CODE_TXT", PROPERTY_REC_PORDER_CODE);
					JSOC_ELEMENT.VAR_GET("REC_PORDER_CODE_TXT").disabled = true;
					
					JSOC_ELEMENT.VAR_VALUE("REC_PORDER_DATE_REQUEST_TXT", PO_ORDER_DGV.CELL.VALUE("REC_PORDER_DATE_REQUEST",PROPERTY_EDIT_ROW_INDEX));
					JSOC_ELEMENT.VAR_GET("REC_PORDER_DATE_REQUEST_TXT").disabled = true;

					JSOC_ELEMENT.VAR_VALUE("REC_PORDER_DATE_EXPECT_DTP", PO_ORDER_DGV.CELL.VALUE("REC_PORDER_DATE_EXPECT", PROPERTY_EDIT_ROW_INDEX));
					JSOC_ELEMENT.VAR_VALUE("REC_PORDER_REMARKS_TXT", PO_ORDER_DGV.CELL.VALUE("REC_PORDER_REMARKS", PROPERTY_EDIT_ROW_INDEX));

					JSOC_ELEMENT.VAR_GET("REC_PORDER_CODE_DLG_BLOCK").style.display = "";
					JSOC_ELEMENT.VAR_GET("PO_ORDER_LIST_DIV").style.display = "";
					JSOC_ELEMENT.VAR_GET("PRODUCT_BRANCH_LIST_DIV").style.display = "none";

					PO_ORDER_LIST_DGV.ROW.CLEAR();

					EDIT_HANDLER.REF_IS_MODIFIED = false;

					JSOC_ELEMENT.VAR_VALUE("MODAL_TITLE_MM", "");
					JSOC_DIALOG.VAR_MODAL("PO_ORDER_MODAL", true);

					JSOC_DIALOG.VAR_MODAL_RESET_XY("PO_ORDER_MODAL");

					JSOC_ELEMENT.VAR_GET("PO_ORDER_MODAL").style.top = "6%";
					JSOC_ELEMENT.VAR_GET("PO_ORDER_MODAL").style.left = "15%";

					HTTP_LOAD();
					return;
				}
			}
		);   

		
		// Show Progress
		// _______________________________________________________________________	
		JSOC_DIALOG.VAR_LOADING_SPINNER(true);
		
		
		// Requires Authentication
		// _______________________________________________________________________	
		PAGE_AUTH_REQUIRES_LOGIN(HTTP_POPULATE_RESULT);			
		
		
		// Get Modal Instance (Add Modal Adjustment before this line)
		// _______________________________________________________________________	
		if(JSOC_ELEMENT.VAR_ELEMENT_EXISTS("PO_ORDER_MODAL") == true)
		{
			INPUT_INSTANCE = JSOC_WINDOW.VAR_INPUT_INSTANCE_CLONE("PO_ORDER_MODAL");
		}
		
		// Add Search Events for the SEARCH_DESCRIPTION_TXT - TextInput
		// _______________________________________________________________________		
		if(JSOC_ELEMENT.VAR_ELEMENT_EXISTS("SEARCH_REC_PORDER_CODE_TXT"))
		{
			var SEARCH_REC_PORDER_CODE_TXT = JSOC_ELEMENT.VAR_GET("SEARCH_REC_PORDER_CODE_TXT");
			SEARCH_REC_PORDER_CODE_TXT.onkeydown = 
				function() 
				{ 
					return function(e) 
					{
						if
						(
							(
								e.which == 13 || 
								e.keyCode == 13 || 
								e.key === "Enter"
							) &&
							JSOC_ELEMENT.VAR_ELEMENT_EXISTS("SEARCH_CMD")
						)
						{
							HTTP_SEARCH();
						}
					};
				}();;		
		}
		
		
		// Load Parent Data (if Exists)
		// _______________________________________________________________________	
		HTTP_PARENT_LOAD();
		
		
		// Pre-Load Items (uncomment if no foreign key pre-fetch)
		// _______________________________________________________________________	
		if(CUS_SEND_REQUEST_HAS_QUEUE() == false)
		{
			HTTP_SEARCH();
		}
		
		
		// Disable Dialogs
		// _______________________________________________________________________	
		CUS_SEND_DIALOG_TRY_DISMISS();
	}
	
	
	// ===============================================================
	// Populate Foreign Keys
	// ===============================================================
	function HTTP_POPULATE_RESULT(IS_SUCCESS, HTTP_RESPONSE)
	{
		// Disable Dialogs
		CUS_SEND_DIALOG_TRY_DISMISS();
			
		// Handle Error
		if(IS_SUCCESS === false)
		{
			alert("Unable to populate lists.");
		}
		else
		{
			PRELOAD_POS_SHIFT
			(
				function(IS_SUCCESS, RESPONSE)
				{
					if(IS_SUCCESS)
					{
						HTTP_SEARCH();

						if(JSOC_ELEMENT.VAR_ELEMENT_EXISTS("DEVICE_ID_LBL")) {
							JSOC_ELEMENT.VAR_VALUE('DEVICE_ID_LBL', JSCUS_SQL._RECORD._POSDEVICE._LOGIN.REC_POSDEVICE_ID);
						}
					}
				}
			);
			
		}
	}

	
	// ===============================================================
	// Request Search - PART.A
	// ===============================================================
	function HTTP_SEARCH(NEW_ITEM_ID, EDITED_ROW_INDEX)
	{
		// Optional Value
		NEW_ITEM_ID = JSVC_VAR.VAR_OPTIONAL(NEW_ITEM_ID, -1);
		EDITED_ROW_INDEX = JSVC_VAR.VAR_OPTIONAL(EDITED_ROW_INDEX, -1);
		
		// Parameter Validate
		JSVC_AV.VAR_VALIDATE_ARGUMENT_TYPE(NEW_ITEM_ID, 'NEW_ITEM_ID', 'NUMERIC');
		JSVC_AV.VAR_VALIDATE_ARGUMENT_TYPE(EDITED_ROW_INDEX, 'EDITED_ROW_INDEX', 'NUMERIC');
		
		
		// Actual Function
		GET_MAP_ARRAY = JSCUS_SQL._RECORD._PO_ORDER.CUS_PREPARE_MAPPED_ARRAY_FOR_GET();	
		//  if(JSVC_VAR.VAR_ISSET("PROPERTY_PARENT_ID"))
		// {
		//	JSVC_MAP_ARRAY.VAR_SET(GET_MAP_ARRAY, 'PARAM_PARENT_ID', PROPERTY_PARENT_ID);
		// }  // Parent ID Sample
		JSVC_MAP_ARRAY.VAR_SET(GET_MAP_ARRAY, 'PARAM_REC_PORDER_ACC_GROUP_ID', JSVC_NUM.VAR_NVALL(JSCUS_SQL._RECORD._POSDEVICE._LOGIN.REC_POSDEVICE_ACC_GROUP_ID)); 
		
		if
		(
			JSOC_ELEMENT.VAR_ELEMENT_EXISTS("SEARCH_REC_PORDER_CODE_TXT") == true &&
			JSVC_STR.VAR_IS_BLANK( JSOC_ELEMENT.VAR_VALUE("SEARCH_REC_PORDER_CODE_TXT")) == false
		)
		{
			JSVC_MAP_ARRAY.VAR_SET(GET_MAP_ARRAY, 'PARAM_REC_PORDER_CODE', JSOC_ELEMENT.VAR_VALUE("SEARCH_REC_PORDER_CODE_TXT"));
		}
		
		if
		(
			JSOC_ELEMENT.VAR_ELEMENT_EXISTS("START_DATE_TXT") == true &&
			JSOC_STYLE.VAR_IS_VISIBLE('START_DATE_TXT') == true &&
			JSVC_STR.VAR_IS_BLANK(JSOC_ELEMENT.VAR_VALUE("START_DATE_TXT")) == false
		)
		{
			JSVC_MAP_ARRAY.VAR_SET(GET_MAP_ARRAY, 'PARAM_REC_PORDER_DATE_REQUEST_FROM', JSVC_DATE.VAR_FORMAT(JSOC_ELEMENT.VAR_VALUE("START_DATE_TXT"), "YYYY-MM-DD") + " 00:00:00.000000");
		}
		if
		(
			JSOC_ELEMENT.VAR_ELEMENT_EXISTS("END_DATE_TXT") == true &&
			JSOC_STYLE.VAR_IS_VISIBLE('END_DATE_TXT') == true &&
			JSVC_STR.VAR_IS_BLANK(JSOC_ELEMENT.VAR_VALUE("END_DATE_TXT")) == false
		)
		{
			JSVC_MAP_ARRAY.VAR_SET(GET_MAP_ARRAY, 'PARAM_REC_PORDER_DATE_REQUEST_TO', JSVC_DATE.VAR_FORMAT(JSOC_ELEMENT.VAR_VALUE("END_DATE_TXT"), "YYYY-MM-DD") + " 23:59:59.999999");
		}

		JSVC_MAP_ARRAY.VAR_SET(GET_MAP_ARRAY, 'PARAM_REC_PORDER_STATUS', 1);

		JSVC_MAP_ARRAY.VAR_SET(GET_MAP_ARRAY, 'PARAM_ORDER_FIELD', 'REC_PORDER_ID');
		JSVC_MAP_ARRAY.VAR_SET(GET_MAP_ARRAY, 'PARAM_ORDER_TYPE', 'ASC');
		
		JSOC_DIALOG.VAR_LOADING_SPINNER(true);
		
		if(NEW_ITEM_ID < 0)
		{
			JSCUS_SQL._RECORD._PO_ORDER.CUS_GET
			(
				GET_MAP_ARRAY,
				HTTP_SEARCH_CALLBACK,
				true
			); 		
		}
		else
		{		
			GET_MAP_ARRAY = JSCUS_SQL._RECORD._PO_ORDER.CUS_PREPARE_MAPPED_ARRAY_FOR_GET();	
			JSVC_MAP_ARRAY.VAR_SET(GET_MAP_ARRAY, 'PARAM_REC_PORDER_ID', NEW_ITEM_ID);
			
			JSCUS_SQL._RECORD._PO_ORDER.CUS_GET
			(
				GET_MAP_ARRAY,
				function(IS_SUCCESS, RESPONSE_STRING)
				{
					// Update Existing Row
					if(EDITED_ROW_INDEX >= 0)
					{
						HTTP_SEARCH_LIMITED_ROWS_CALLBACK(IS_SUCCESS, RESPONSE_STRING, EDITED_ROW_INDEX);
					}
					
					// Add new item
					else
					{
						HTTP_SEARCH_LIMITED_ROWS_CALLBACK(IS_SUCCESS, RESPONSE_STRING, 0);
					}
				},
				true
			); 		
		}
	}
	
	
	// ===============================================================
	// Request Search - PART.B
	// ===============================================================
	function HTTP_SEARCH_CALLBACK(IS_SUCCESS, RESPONSE_STRING)
	{
		// Disable Dialogs
		// _______________________________________________________________________
		CUS_SEND_DIALOG_TRY_DISMISS();
		
		// Validate
		// _______________________________________________________________________
		if(IS_SUCCESS === false)
		{
			console.error("CONNECTION ERROR: \n" + RESPONSE_STRING);
			return;
		}
		
		// Validate JSON Response
		// _______________________________________________________________________
		var JSON_OBJECT = JSRC_JSON.REF_CREATE(RESPONSE_STRING);
		if(JSRC_JSON.REF_IS_SUCCESS(JSON_OBJECT) === false)
		{
			console.error("REQUEST ERROR: \n" + RESPONSE_STRING);
			return;
		}
		
		// JSON Empty (Clears the DataGrodView)
		// _______________________________________________________________________
		if(JSRC_JSON.REF_READ(JSON_OBJECT, "JSON_COUNT") <= 0)
		{
			PO_ORDER_DGV.ROW.CLEAR();

			JSOC_DIALOG.VAR_MESSAGE_BOX
			(
				'No transactions found',
				'Information',
				'OK', 'ERROR',
				function() {}
			);
			
			return;
		}

		// Populate DGV
		// _______________________________________________________________________
		PO_ORDER_DGV.POPULATE_FROM_QUERY
		(
				JSON_OBJECT, 
				'',
				false,
				false,
				1,
				[2, 1]
		);
		
		
		// For Applying CFormat
		// _______________________________________________________________________	
		
		
		// Initialize
		// _______________________________________________________________________	
		var WEBTABLE_DATE = null;
		var ROW_INDEX = 1;
	
		// DateTime Format
		// _______________________________________________________________________	
		if(PO_ORDER_DGV.COLUMN.IS_EXISTS("REC_PORDER_DATE_EXPECT"))
		{
			WEBTABLE_DATE = null;
			ROW_INDEX = 0;
			while(PO_ORDER_DGV.ROW.COUNT() > ROW_INDEX)
			{
				// Read Current Value
				// ...........................................
				 WEBTABLE_DATE = JSVC_DATE.VAR_TO_DATE
					 (
							PO_ORDER_DGV.CELL.VALUE
							(
									"REC_PORDER_DATE_EXPECT", 
									ROW_INDEX
							)
					 );
				
				// Apply CFormat, and DateFormat
				// ...........................................
				if(JSVC_VAR.VAR_ISSET(WEBTABLE_DATE))
				{
					PO_ORDER_DGV.CELL.VALUE
					(
							"REC_PORDER_DATE_EXPECT", ROW_INDEX, 
							JSVC_DATE.VAR_FORMAT(WEBTABLE_DATE, "MMMM DD, YYYY hh:mm TT")
					);				
				}			
				
				// Color Coding (Uncomment to use)
				// ...........................................	
				//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#1cc88a"; // Safe
				//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#5a5c69"; // Neutral
				//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#f6c23e"; // Caution
				//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#e74a3b"; // Warning
				
				// To next loop
				// ...........................................	
				ROW_INDEX ++;
			}			
		}

		if(PO_ORDER_DGV.COLUMN.IS_EXISTS("REC_PORDER_DATE_REQUEST"))
		{
			WEBTABLE_DATE = null;
			ROW_INDEX = 0;
			while(PO_ORDER_DGV.ROW.COUNT() > ROW_INDEX)
			{
				// Read Current Value
				// ...........................................
				 WEBTABLE_DATE = JSVC_DATE.VAR_TO_DATE
					 (
							PO_ORDER_DGV.CELL.VALUE
							(
									"REC_PORDER_DATE_REQUEST", 
									ROW_INDEX
							)
					 );
				
				// Apply CFormat, and DateFormat
				// ...........................................
				if(JSVC_VAR.VAR_ISSET(WEBTABLE_DATE))
				{
					PO_ORDER_DGV.CELL.VALUE
					(
							"REC_PORDER_DATE_REQUEST", ROW_INDEX, 
							JSVC_DATE.VAR_FORMAT(WEBTABLE_DATE, "MMMM DD, YYYY hh:mm TT")
					);				
				}			
				
				// Color Coding (Uncomment to use)
				// ...........................................	
				//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#1cc88a"; // Safe
				//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#5a5c69"; // Neutral
				//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#f6c23e"; // Caution
				//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#e74a3b"; // Warning
				
				// To next loop
				// ...........................................	
				ROW_INDEX ++;
			}			
		}
	}
	
	
	// ===============================================================
	// Request Search - PART.C
	// ===============================================================
	function HTTP_SEARCH_LIMITED_ROWS_CALLBACK(IS_SUCCESS, RESPONSE_STRING, ROW_INDEX)
	{
		// Disable Dialogs
		// _______________________________________________________________________
		CUS_SEND_DIALOG_TRY_DISMISS();
		
		// Validate
		// _______________________________________________________________________
		if(IS_SUCCESS === false)
		{
			console.error("CONNECTION ERROR: \n" + RESPONSE_STRING);
			return;
		}
		
		// Validate JSON Response
		// _______________________________________________________________________
		var JSON_OBJECT = JSRC_JSON.REF_CREATE(RESPONSE_STRING);
		if(JSRC_JSON.REF_IS_SUCCESS(JSON_OBJECT) === false)
		{
			console.error("REQUEST ERROR: \n" + RESPONSE_STRING);
			return;
		}
		
		// JSON Empty (Clears the DataGrodView)
		// _______________________________________________________________________
		if(JSRC_JSON.REF_READ(JSON_OBJECT, "JSON_COUNT") <= 0)
		{
			PO_ORDER_DGV.ROW.CLEAR();
			return;
		}

		// Validate Row Count
		// _______________________________________________________________________	
		if(PO_ORDER_DGV.ROW.COUNT() <= 0)
		{
			console.error("DataGridView has no rows to fill.");
			return;
		}
		JSVC_AV.VAR_VALIDATE_RANGE(ROW_INDEX, "ROW_INDEX", 0, PO_ORDER_DGV.ROW.COUNT() - 1);
		
		// Populate DGV
		// _______________________________________________________________________
		PO_ORDER_DGV.POPULATE_FROM_QUERY
		(
				JSON_OBJECT, 
				'',
				false,
				false,
				1,
				[2, 1],
				ROW_INDEX
		);
		
		
		// For Applying CFormat
		// _______________________________________________________________________	
		
		
		// Initialize
		// _______________________________________________________________________	
		var WEBTABLE_DATE = null;
	
	
		// DateTime Format
		// _______________________________________________________________________	
		if(PO_ORDER_DGV.COLUMN.IS_EXISTS("REC_PORDER_DATE_EXPECT"))
		{
			WEBTABLE_DATE = null;
			// Read Current Value
			// ...........................................
			 WEBTABLE_DATE = JSVC_DATE.VAR_TO_DATE
				 (
						PO_ORDER_DGV.CELL.VALUE
						(
								"REC_PORDER_DATE_EXPECT", 
								ROW_INDEX
						)
				 );
			
			// Apply CFormat, and DateFormat
			// ...........................................
			if(JSVC_VAR.VAR_ISSET(WEBTABLE_DATE))
			{
				PO_ORDER_DGV.CELL.VALUE
				(
						"REC_PORDER_DATE_EXPECT", ROW_INDEX, 
						JSVC_DATE.VAR_FORMAT(WEBTABLE_DATE, "MMM DD, YYYY")
				);				
			}			
			
			// Color Coding (Uncomment to use)
			// ...........................................	
			//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#1cc88a"; // Safe
			//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#5a5c69"; // Neutral
			//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#f6c23e"; // Caution
			//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#e74a3b"; // Warning
		}
		if(PO_ORDER_DGV.COLUMN.IS_EXISTS("REC_PORDER_DATE_REQUEST"))
		{
			WEBTABLE_DATE = null;
			// Read Current Value
			// ...........................................
			 WEBTABLE_DATE = JSVC_DATE.VAR_TO_DATE
				 (
						PO_ORDER_DGV.CELL.VALUE
						(
								"REC_PORDER_DATE_REQUEST", 
								ROW_INDEX
						)
				 );
			
			// Apply CFormat, and DateFormat
			// ...........................................
			if(JSVC_VAR.VAR_ISSET(WEBTABLE_DATE))
			{
				PO_ORDER_DGV.CELL.VALUE
				(
						"REC_PORDER_DATE_REQUEST", ROW_INDEX, 
						JSVC_DATE.VAR_FORMAT(WEBTABLE_DATE, "MMM DD, YYYY hh:mm TT")
				);				
			}			
			
			// Color Coding (Uncomment to use)
			// ...........................................	
			//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#1cc88a"; // Safe
			//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#5a5c69"; // Neutral
			//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#f6c23e"; // Caution
			//PO_ORDER_DGV.CELL.ELEMENT("COLUMN_NAME", ROW_INDEX).style.color = "#e74a3b"; // Warning
		}
	}
	
				
	// ===============================================================
	// Begin Processing the Page
	// ===============================================================
	FORM_INITIALIZE();
	FORM_LOAD();