<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>


	<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL; ?>css/jquery-ui.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL; ?>css/ui.jqgrid.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL; ?>css/jquery.jqplot.min.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL; ?>css/style-old.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL; ?>css/grid.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL; ?>css/jquery-ui.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL; ?>css/ui.jqgrid.css" />
	<link rel="stylesheet" type="text/css" href="<?php echo CDN_URL; ?>css/jquery.jqplot.min.css" />
    <link rel="stylesheet" type="text/css" href="<?php echo CDN_URL; ?>css/expense.css"/>

	<style type="text/css">
		.graph .graphLeft {
			width: 503px;
			float: left;
			padding: 10px;
			min-height: 285px;
			overflow: auto;
		}

		.graph .graphRight {
			width: 207px;
			float: left;
			border-left: 1px solid #abc6df;
			padding: 10px 10px 10px 3px;
			min-height: 285px;
		}
	</style>

	<script type="text/javascript">
		var lblParticipantList = "<?php echo __('LBL_INCOME_LIST'); ?>";
		var lblForWhatReason = '<?php echo __("LBL_WHAT_REASON"); ?>';
		var lblExpenseList = '<?php echo __("LBL_EXPENSE_LIST"); ?>';
		var lblCategory = '<?php echo __("LBL_CATEGORY"); ?>';
		var lblExpenseNOTFOUND = '<?php echo __("LBL_EXPENSE_NOT_FOUND"); ?>';
		var lblCreatedOna = '<?php echo __("LBL_CREATED_ON"); ?>';
		var lblWhen = '<?php echo __("LBL_WHEN"); ?>';
		var lblDay = '<?php echo __("LBL_DAY"); ?>';
		var lblAmount = '<?php echo __("LBL_AMOUNT"); ?>';
		var lblAddExpense = '<?php echo __("LBL_ADD_EXPENSE"); ?>';
		var lblModifyExpense = '<?php echo __("LBL_MODIFY_EXPENSE"); ?>';
		var lblDeleteExpense = '<?php echo __("LBL_DELETE_EXPENSE"); ?>';
		var lblFindExpenses = '<?php echo __("LBL_FIND_EXPENSES"); ?>';
		var lblSave = '<?php echo __("LBL_SAVE"); ?>';
		var lblCancel = '<?php echo __("LBL_CANCEL"); ?>';
		var lblSaveContinue = '<?php echo __("LBL_SAVE_CONTINUE"); ?>';
		var lblWantDeleteExpense = '<?php echo __("LBL_WANT_DELETE_EXPENSE"); ?>';
		var lblIncomeList = '<?php echo __("LBL_INCOME_LIST"); ?>';
		var lblFindIncome = '<?php echo __("LBL_FIND_INCOME"); ?>';
		var lblAddIncome = '<?php echo __("LBL_ADD_INCOME"); ?>';
		var lblModifyIncome = '<?php echo __("LBL_MODIFY_INCOME"); ?>';
		var lblDeleteIncome = '<?php echo __("LBL_DELETE_INCOME"); ?>';
		var lblWantDeleteIncome = '<?php echo __("LBL_DO_YOU_DELETE_INCOME"); ?>';
		var lblEnterNameOfExpense = '<?php echo __("LBL_ENTER_NAME_OF_YOUR_EXPENSE"); ?>';
		var lblExpenseNameLessThanChar = '<?php echo __("LBL_EXPENSE_NAME_LESS_THAN_CHARACTER"); ?>';
		var lblValidAmount = '<?php echo __("LBL_VALID_AMOUNT"); ?>';
		var lblDateNotValid = '<?php echo __("LBL_DATE_NOT_VALID"); ?>';
		var lblCantDownload = "<?php echo __('LBL_SORRY_CANT_DOWNLOAD'); ?>";
		var lblIncomesOf = '<?php echo __("LBL_INCOMES_OF"); ?>';
		var lblTotalIncome = '<?php echo __("LBL_TOTAL_INCOME"); ?>';
		var lblTotalExpense = '<?php echo __("LBL_TOTAL_EXPENSE"); ?>';
		var lblBalance = '<?php echo __("LBL_BALANCE"); ?>';
		var lblDataSavingFailed = '<?php echo __("LBL_DATA_SAVING_FAILED"); ?>';
		var lblIncome = '<?php echo __("LBL_INCOME"); ?>';
		var lblExpens = '<?php echo __("LBL_EXPENS"); ?>';
		var lblDataSaved = '<?php echo __("LBL_DATA_SAVED_SUCCESSFULLY"); ?>';
		var lblEmailSent = '<?php echo __("LBL_EMAIL_SENT"); ?>';
		var lblEmailSentFail = '<?php echo __("LBL_EMAIL_SENT_FAIL"); ?>';
        var baseUrl = "<?php echo HTTP_SITE_URL; ?>";
        var session_profile_id = "<?php echo $session_profile_id; ?>";
        var session_user_id = "<?php echo $print_uid; ?>";
        var isPermitted = "<?php echo $isPermitted?>";
        var permission_permitted = "<?php echo $permission_permitted ?>";
        var delete_permitted = "<?php echo $delete_permitted ?>";
        var permitted = "<?php echo $permitted ?>";
        var lblExpenseNotPermitted = "<?php echo __("LBL_EXPENSE_NOT_EDIT_PERMISSION"); ?>";
        var OPERATION_TYPE = <?php echo json_encode($operation_type); ?>;
        var permission_list = <?php echo json_encode($permissions); ?>;
        var owner = <?php echo OWNER; ?>;
        var lblPermissionList = "<?php echo __('LBL_PERMISSION_LIST'); ?>";
        var lblAddPermission = "<?php echo __('LBL_ADD_PERMISSION'); ?>";
        var lblEditPermission = "<?php echo __('LBL_EDIT_PERMISSION'); ?>";
        var lblDeletePermission = "<?php echo __('LBL_DELETE_PERMISSION'); ?>";
        var lblEnableRestrictionPermission = "<?php echo __('LBL_ENABLE_RESTRICTION_MESSAGE_PERMISSION'); ?>";
        var lblErrorEditPermission = "<?php echo __('LBL_ERROR_NOT_EDIT_PERMISSION'); ?>";
        var lblDeleteMessagePermission = "<?php echo __('LBL_DELETE_MESSAGE_PERMISSION'); ?>";
        var lblNotDeleteMessagePermission = "<?php echo __('LBL_NOT_DELETE_MESSAGE_PERMISSION'); ?>";
        var lblSelectPermission = "<?php echo __('LBL_SELECT_PERMISSION_MESSAGE'); ?>";
        var lblEmailExistMessage = "<?php echo __('LBL_EMAIL_EXIST_MESSAGE'); ?>";
        var lblRestrictedMessage = "<?php echo __('LBL_RESTRICTED'); ?>";
        var lblOff = "<?php echo __('LBL_OFF'); ?>";
        var lblRestrictedOn = "<?php echo __('LBL_ON_MESSAGE'); ?>";
        var lblRestrictedModeErrorMessage = "<?php echo __('LBL_MODE_ERROR_MESSAGE'); ?>";
        var lblEmail= "<?php echo __('LBL_EMAIL'); ?>";
        var lblPermission= "<?php echo __('LBL_PERMISSION'); ?>";
        var lblErrorSavingMessage = "<?php echo __("ERROR_SAVING_DATA"); ?>";
    </script>


</head>

<body>
	<?php
	echo $this->Form->input('expenseData', array('type' => 'hidden', 'id' => 'expenseData', 'value' => $expenseData));
	echo $this->Form->input('justCreated', array('type' => 'hidden', 'id' => 'justCreated', 'value' => $justCreated));
	echo $this->Form->create(null, array('id' => 'loadForm', 'url' => array('controller' => 'Expense', 'action' => 'loadTab')));
	echo $this->Form->end();
    echo $this->Form->create(null, array('id' => 'permissionForm', 'url' => array('controller' => 'GroupSetting', 'action' => 'addPermission')));
    echo $this->Form->end();
	?>

    <?php if ($permissionLevel === NO_PERMIT) { ?>
		<div style="color: red;text-align: center;"><?php echo __("LBL_EXPENSE_NOT_PERMITTED"); ?></div>
	<?php } else { ?>

		<h1 class="tabTitle">
			<div id="expenseTitleDiv"></div>
		</h1>
		<table>
			<tr>
				<td>
					<div id="expenseDescDiv"></div>
				</td>
				<td style="text-align:right">
					<div id="expenseLoginAsDiv" style="text-align:right"></div>
				</td>
			</tr>
		</table>
		<table>
			<tr>
				<td><strong>
						<div id="expenseCreatedByDiv"></div>
					</strong></td>
				<td class="tabRight" style="text-align:right">
					<a style="cursor:pointer" onClick="gotoHome()"> <img title="Visit Home Page" src="<?php echo CDN_URL; ?>images/home-icon.png" alt="" /> <?php echo __("LBL_HOME"); ?> </a>
					|<a style="cursor:pointer" onClick="createGroupExpense()"><?php echo __("LBL_NEW_GROUP_EXPENSECOUNT"); ?></a>
					|<a style="cursor:pointer" onClick="createMessExpense()"><?php echo __("LBL_NEW_MESS_EXPENSECOUNT"); ?></a>
					|<a style="cursor:pointer" onClick="createFamilyExpense()"><?php echo __("LBL_NEW_FAMILY_EXPENSECOUNT"); ?></a>
					<!-- <a style="cursor:pointer"  onClick="dashBoard.printExpense()">| <?php echo __("LBL_PRINT"); ?></a> -->
					<a style="cursor:pointer" onClick="printReport()">| <?php echo __("LBL_PRINT"); ?></a>

				</td>

			</tr>
		</table>
		<div id="participantBox">

			<div class="round">
				<table class="gridTable" style="text-align:left">
					<tr>
						<th>
							<div id="expense_table_title_id"></div>
						</th>
						<th>

						</th>
					</tr>
				</table>
			</div>



			<div class="contentDisplay" id="div_participant">

			</div>

		</div>

		<div id="tabs" style="display:none">
			<ul>
				<li><a href="#tabs-1"><img alt="Expenses" src="<?php echo CDN_URL; ?>images/expense_icon.png" align="absmiddle"><?php echo __("LBL_INCOMES"); ?></a></li>
				<li><a href="#tabs-2"><img alt="Expenses" src="<?php echo CDN_URL; ?>images/expense_icon.png" align="absmiddle"> <?php echo __("LBL_EXPENSE"); ?></a></li>
				<li><a href="#tabs-3"><img alt="Expenses" src="<?php echo CDN_URL; ?>images/balance_icon.png" align="absmiddle"> <?php echo __("LBL_BALANCE"); ?></a></li>
				<li><a href="#tabs-4"><img alt="Expenses" src="<?php echo CDN_URL; ?>images/share_icon.png" align="absmiddle"> <?php echo __("LBL_SHARE"); ?></a></li>
				<li><a href="#tabs-5"><img alt="Expenses" src="<?php echo CDN_URL; ?>images/setting_icon.png" align="absmiddle"> <?php echo __("LBL_SETTINGS"); ?></a></li>
                <?php if (RESTRICTION_MODE_HIDE && $is_permission_visible) { ?>
                    <li><a href="#tabs-6"><img alt="Expenses" src="<?php echo CDN_URL; ?>images/permission_icon.png"
                                               align="absmiddle"> <?php echo __("LBL_PERMISSION"); ?></a></li>
                <?php } ?>
            </ul>

			<div id="tabs-1">
				<div class="tabContent">
					<!-- Tab Participant List -->
					<table id="income_grid">
						<tr>
							<td />
						</tr>
					</table>
					<div id="income_pager"> </div>
				</div>
			</div>

			<div id="tabs-2">
				<div class="tabContent">
					<style type="text/css">
						.jqplot-yaxis-tick {
							white-space: nowrap;
						}
					</style>

					<table id="grid">
						<tr>
							<td />
						</tr>
					</table>
					<div id="expense_pager"> </div>
				</div>
			</div>



			<div id="tabs-3">
				<div class="tabContent">

					<div id="balanceDivId" class="graph">
						<div class="graphLeft">
							<a id="slideRight" href="#"><img src="<?php echo CDN_URL; ?>images/slide-right-icon.png" alt="" /></a>
							<div id="income_chart" style=" height:130px;"></div>
							<div id="expense_chart" style=" height:130px;"></div>
						</div>
						<div class="graphRight">
							<a id="slideLeft" href="#"><img src="<?php echo CDN_URL; ?>images/slide-left-icon.png" alt="" /></a>

							<div id="balance_chart" style=" height:190px;"></div>
							<div id="balance_description_div"> </div>

						</div>
					</div>

				</div>
			</div>


			<div id="tabs-4">
				<div class="tabContent">
					<?php
					echo $this->Form->create(null, array('id' => 'sendEmailForm', 'url' => array('controller' => 'Expense', 'action' => 'sendEmail')));
					echo $this->Form->hidden('emailExpenseTitle');
					echo $this->Form->hidden('emailUniqueURL');

					?>

					<div><b><?php echo __("LBL_COPY_TEXT_BELOW_AND_SEND_EMAIL"); ?></b><br /> </div>
					<div id="divExpenseURL"></div>
					<div id="divExpenseFacebookURL"></div><br />
					<p><?php echo __("LBL_EXPENSECOUNT_TOOL_CREATE_GROUP_MESS_FAMILY_EXPENSE"); ?></p>
					<table>
						<tr>
							<td> <?php echo __("LBL_OR"); ?> </br /> </br /> <?php echo __("LBL_PUT_EMAIL_ADDRESS"); ?>:<?php echo $this->Form->input('email', array('label' => false, 'email' => __('LBL_PLEASE_PROVIDE_EMAIL'), 'length' => '200px', 'required' => 'true', 'style' => 'width:240px; height:20px;'));    ?>
								<br />

								<?php
								if ($isPermitted) {
									echo $this->Form->end('Send');
								} else {

									echo '<input type="button" value="Send" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" onclick="alert(lblExpenseNotPermitted);">';
								}

								?>

								<img id="loadImg" style="display:none;" src="<?php echo CDN_URL; ?>images/loading.gif" /></p>
							</td>
						</tr>
					</table>
				</div>
			</div>
			<div id="tabs-5">
				<div class="tabContent">
					<b><?php echo __("LBL_GENERAL_INFORMATION"); ?></b><br />

					<?php
					echo $this->Form->create(null, array('id' => 'updateGroupExpenseForm', 'url' => array('controller' => 'Home', 'action' => 'updateGroupExpense')));
					?>
					<span id="error_title"></span><br />
					<span id="error_currency"></span><br />
					<?php
					echo $this->Form->hidden('expenseid');
					echo $this->Form->hidden('version');
					echo $this->Form->hidden('expenseType', array("value" => "2"));
					?>
					<table>
						<tr>
							<td><?php echo __("LBL_TITLE"); ?></td>
							<td><?php echo $this->Form->input('title', array('label' => false, 'title' => '<?php echo __("LBL_EXPENSE_TITLE_MESSAGE"); ?>', 'length' => '200px', 'required' => 'false'));    ?></td>
						</tr>

						<tr>
							<td><?php echo __("LBL_CURRENCY"); ?></td>
							<td><?php echo $this->Form->input('currency', array('label' => false)); ?></td>
						</tr>

						<tr>
							<td><?php echo __("LBL_DESCRIPTION"); ?></td>
							<td><?php echo $this->Form->textarea('description', array('rows' => '5', 'cols' => '45')); ?></td>
						</tr>

						<tr>
							<td>&nbsp;</td>
							<td><br />
								<?php
								if ($isPermitted) {
									echo $this->Form->end('Save');
								} else {

									echo '<input type="button" value="Save" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" onclick="alert(lblExpenseNotPermitted);">';
								}
								?>
                                <img id="loadImg2" style="display:none;" src="<?php echo CDN_URL; ?>images/loading.gif"/>
							</td>
						</tr>

					</table>
				</div>
			</div>
            <?php if (RESTRICTION_MODE_HIDE && $is_permission_visible) { ?>
                <div id="tabs-6">
                    <div class="tabContent">
                        <?php if ($permitted) { ?>
                            <div class="switch-container">
                                <label class="switch">
                                    <input type="checkbox" id="restrictedMode" onchange="toggleRestrictedMode(this)">
                                    <span class="slider"></span>
                                </label>
                                <span id="restrictedLabel"><?php echo __("LBL_RESTRICTED")?>: <?php echo __("LBL_OFF")?></span>
                            </div>
                        <?php } ?>
                        <table id="permission_grid">
                            <tr>
                                <td></td>
                            </tr>
                        </table>
                        <div id="permission_pager"></div>
                    </div>
                </div>
            <?php } ?>
		</div>
	<?php } ?>

	<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="<?php echo CDN_URL; ?>js/excanvas.js"></script><![endif]-->


	<script src="<?php echo CDN_URL; ?>js/jquery-1.11.0.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/jquery-ui.js"></script>
	<script src="<?php echo CDN_URL; ?>js/i18n/grid.locale-en.js"></script>
	<script src="<?php echo CDN_URL; ?>js/jquery.jqGrid.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/jquery.jqplot.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/plugins/jqplot.barRenderer.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/plugins/jqplot.pieRenderer.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/plugins/jqplot.categoryAxisRenderer.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/plugins/jqplot.pointLabels.min.js"></script>
	<script src="<?php echo CDN_URL; ?>js/family_expense.js?v=1.0.3"></script>
    <script src="<?php echo CDN_URL; ?>js/permission.js?v=1.0.3"></script>

	<?php

	echo $this->Form->create(null, array('id' => 'expenseForm', 'url' => array('controller' => 'Expense', 'action' => 'changeGroupExpense')));

	echo $this->Form->end();

	echo $this->Form->create(null, array('id' => 'participantForm', 'url' => array('controller' => 'Expense', 'action' => 'changeParticipant')));


	echo $this->Form->end();

	?>


	<?php
	echo $this->Form->create("Expense", array('target' => 'blank', 'id' => 'printForm', 'url' => array('controller' => 'Expense', 'action' => 'printExpense')));

	echo $this->Form->input('printExpenseList', array('type' => 'hidden', 'id' => 'printExpenseList'));
	echo $this->Form->input('printIncomeList', array('type' => 'hidden', 'id' => 'printIncomeList'));
	echo $this->Form->input('printExpense', array('type' => 'hidden', 'id' => 'printExpense'));
	echo $this->Form->input('printNames', array('type' => 'hidden', 'id' => 'printNames'));

	echo $this->Form->end();
	?>


	<script type="application/javascript">
		$(function() {
            $("#tabs").tabs();
			$("#tabs").tabs({
				activate: function(event, ui) {
					var newIndex = ui.newTab.index();
					if (newIndex == 0) {
						dashBoard.setCategory(2);
						dashBoard.setIncomeGridExtension();
					} else if (newIndex == 1) {
						dashBoard.setCategory(1);
						dashBoard.setExpenseGridExtension();
					} else if (newIndex == 2) {
						dashBoard.drawGraph();
					} else if (newIndex == 3) {
						var expense_url = "<?php echo HTTP_SITE_URL . "/"; ?>" + dashBoard.expense.unique_url;
						$("#divExpenseURL").html('<br/><?php echo __("LBL_THE_FAMILY_EXPENSE"); ?> "' + dashBoard.expense.title + '" <?php echo __("LBL_ACCESSIBLE_ON_EXPENSECOUNT"); ?><?php echo __("LBL_THE_URL_IS"); ?> :<br/> <a style="color:#0000CD; background-color:transparent;" target=blank  href="' + expense_url + '"  >' + expense_url + '</a> ');
						$("#divExpenseFacebookURL").html("<br/><?php echo __('LBL_ACCESS_FROM_MOBILE'); ?><br/>");
					} else if (newIndex == 4) {
						$("#ExpenseExpenseid").val(dashBoard.expense.id);
						$("#ExpenseTitle").val(dashBoard.expense.title);
						$("#ExpenseCurrency").val(dashBoard.expense.currency);
						$("#ExpenseDescription").val(dashBoard.expense.description);
					}
                    else if (newIndex == 5) {
                        if(permitted) {
                            var label = document.getElementById("restrictedLabel");
                            if (userPermission.restrict_mode == 1) {
                                $('#restrictedMode').prop('checked', true);
                                label.textContent = lblRestrictedMessage+": "+lblRestrictedOn;
                            } else {
                                $('#restrictedMode').prop('checked', false);
                                label.textContent = lblRestrictedMessage+": "+lblOff;
                            }
                        }
                        userPermission.displayPermissionList();
                        userPermission.setPermissionGridExtension();
                    }
				}
			});
            $("input[type=submit]").button()
		});

		$("#slideRight").hide();
		//Slider js
		$("#slideLeft").click(function() {
			$('.graphRight').hide(1000);
			$('.graphLeft').animate({
				width: 740
			}, {
				duration: 1000
			});
			$("#slideRight").show();
		});
		$("#slideRight").click(function() {
			$("#slideRight").hide();
			$('.graphLeft').animate({
				width: 507
			}, {
				duration: 1000
			});
			$('.graphRight').show(1000);
		});

		$("#btnDownloadImage").click(function(event) {
			dashBoard.createGraphImage()
		});

		function createGroupExpense() {

			if (top.location != self.location) {
				top.location = "<?php echo HTTP_SITE_URL; ?>/Home/createGroupExpense";
			}

		}

		function createMessExpense() {

			if (top.location != self.location) {
				top.location = "<?php echo HTTP_SITE_URL; ?>/Home/createMessExpense";
			}

		}

		function createFamilyExpense() {

			if (top.location != self.location) {
				top.location = "<?php echo HTTP_SITE_URL; ?>/Home/createFamilyExpense";
			}

		}

		function gotoHome() {

			if (top.location != self.location) {
				top.location = "<?php echo HTTP_SITE_URL; ?>";
			}

		}

		function printGroupExpense() {

			if (top.location != self.location) {
				top.location = "<?php echo HTTP_SITE_URL; ?>/Home/print";
			}

		}

		function printReport() {

			if (top.location != self.location) {
				var targetUrl = "<?php echo HTTP_SITE_URL . '/Expense/printReport/' . $uniqueURL . '/' . $print_uid; ?>";
				window.open(targetUrl, "_blank");
			}

		}

        function toggleRestrictedMode(checkbox) {
            var label = document.getElementById("restrictedLabel");
            var restrict = 0;
            var level_value = lblOff;
            if (checkbox.checked) {
                restrict = 1;
            }
            if(Object.keys(userPermission.permissions).length > 1) {
                $('#restrictedMode').prop('checked', true);
                alert(lblRestrictedModeErrorMessage);
                return false;
            }
            var permissionObj = {
                expense_id: dashBoard.expense.id,
                mode: restrict,
                unique_url: getUniqueUrl()
            }

            $.ajax({
                type: 'POST',
                url: "<?php echo HTTP_SITE_URL . '/GroupSetting/addRestriction'?>",
                data: permissionObj,
                success: function (data, textStatus, xhr) {
                    if(data.restricted_mode === true) {
                        userPermission.restrict_mode = 1;
                        level_value = lblRestrictedOn;
                        $('#restrictedMode').prop('checked', true);
                    }else {
                        userPermission.restrict_mode = 0;
                        $('#restrictedMode').prop('checked', false);
                    }
                    dashBoard.expense.version = parseInt(dashBoard.expense.version) + 1;
                    $("#ExpenseVersion").val(dashBoard.expense.version);
                    label.textContent = lblRestrictedMessage+": " + level_value;
                    alert(data.message);
                },
                error: function (xhr, textStatus, error) {
                    return false;
                }
            });

        }
	</script>
	<script src="<?php echo CDN_URL; ?>js/common.js"></script>

</body>

</html>