SVG.extends({
	field: `<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="1" rx="0.5" x="2" y="3"></rect><rect x="2" y="7" width="12" height="1" rx="0.5"></rect><rect x="2" y="11" width="8" height="1" rx="0.5"></rect></svg>`,
	info: `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16"> \t\t\t\t\t                    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path></svg>`,
	package_manual: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12.5 16C13.4283 16 14.3185 15.6313 14.9749 14.9749C15.6313 14.3185 16 13.4283 16 12.5C16 11.5717 15.6313 10.6815 14.9749 10.0251C14.3185 9.36875 13.4283 9 12.5 9C11.5717 9 10.6815 9.36875 10.0251 10.0251C9.36875 10.6815 9 11.5717 9 12.5C9 13.4283 9.36875 14.3185 10.0251 14.9749C10.6815 15.6313 11.5717 16 12.5 16ZM12.854 10.146L14.354 11.646C14.4479 11.7399 14.5006 11.8672 14.5006 12C14.5006 12.1328 14.4479 12.2601 14.354 12.354C14.2601 12.4479 14.1328 12.5006 14 12.5006C13.8672 12.5006 13.7399 12.4479 13.646 12.354L13 11.707V14.5C13 14.6326 12.9473 14.7598 12.8536 14.8536C12.7598 14.9473 12.6326 15 12.5 15C12.3674 15 12.2402 14.9473 12.1464 14.8536C12.0527 14.7598 12 14.6326 12 14.5V11.707L11.354 12.354C11.2601 12.4479 11.1328 12.5006 11 12.5006C10.8672 12.5006 10.7399 12.4479 10.646 12.354C10.5521 12.2601 10.4994 12.1328 10.4994 12C10.4994 11.8672 10.5521 11.7399 10.646 11.646L12.146 10.146C12.1924 10.0994 12.2476 10.0625 12.3084 10.0373C12.3691 10.0121 12.4342 9.99911 12.5 9.99911C12.5658 9.99911 12.6309 10.0121 12.6916 10.0373C12.7524 10.0625 12.8076 10.0994 12.854 10.146ZM11 5C11 5.79565 10.6839 6.55871 10.1213 7.12132C9.55871 7.68393 8.79565 8 8 8C7.20435 8 6.44129 7.68393 5.87868 7.12132C5.31607 6.55871 5 5.79565 5 5C5 4.20435 5.31607 3.44129 5.87868 2.87868C6.44129 2.31607 7.20435 2 8 2C8.79565 2 9.55871 2.31607 10.1213 2.87868C10.6839 3.44129 11 4.20435 11 5ZM8 7C8.53043 7 9.03914 6.78929 9.41421 6.41421C9.78929 6.03914 10 5.53043 10 5C10 4.46957 9.78929 3.96086 9.41421 3.58579C9.03914 3.21071 8.53043 3 8 3C7.46957 3 6.96086 3.21071 6.58579 3.58579C6.21071 3.96086 6 4.46957 6 5C6 5.53043 6.21071 6.03914 6.58579 6.41421C6.96086 6.78929 7.46957 7 8 7Z" fill="black"/> <path d="M8.256 14C8.14128 13.6753 8.06444 13.3384 8.027 12.996H3C3.001 12.75 3.154 12.01 3.832 11.332C4.484 10.68 5.711 10 8 10C8.26 10 8.507 10.009 8.74 10.025C8.966 9.684 9.236 9.375 9.544 9.107C9.077 9.038 8.564 9 8 9C3 9 2 12 2 13C2 14 3 14 3 14H8.256Z" fill="black"/> </svg>`,
	package_schedule: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_179513_178791)"> <path d="M14 0H2C1.46957 0 0.960859 0.210714 0.585786 0.585786C0.210714 0.960859 0 1.46957 0 2L0 14C0 14.5304 0.210714 15.0391 0.585786 15.4142C0.960859 15.7893 1.46957 16 2 16H14C14.5304 16 15.0391 15.7893 15.4142 15.4142C15.7893 15.0391 16 14.5304 16 14V2C16 1.46957 15.7893 0.960859 15.4142 0.585786C15.0391 0.210714 14.5304 0 14 0ZM1 3.857C1 3.384 1.448 3 2 3H14C14.552 3 15 3.384 15 3.857V14.143C15 14.616 14.552 15 14 15H2C1.448 15 1 14.616 1 14.143V3.857Z" fill="black"/> <path d="M6.5 7C6.76522 7 7.01957 6.89464 7.20711 6.70711C7.39464 6.51957 7.5 6.26522 7.5 6C7.5 5.73478 7.39464 5.48043 7.20711 5.29289C7.01957 5.10536 6.76522 5 6.5 5C6.23478 5 5.98043 5.10536 5.79289 5.29289C5.60536 5.48043 5.5 5.73478 5.5 6C5.5 6.26522 5.60536 6.51957 5.79289 6.70711C5.98043 6.89464 6.23478 7 6.5 7ZM9.5 7C9.76522 7 10.0196 6.89464 10.2071 6.70711C10.3946 6.51957 10.5 6.26522 10.5 6C10.5 5.73478 10.3946 5.48043 10.2071 5.29289C10.0196 5.10536 9.76522 5 9.5 5C9.23478 5 8.98043 5.10536 8.79289 5.29289C8.60536 5.48043 8.5 5.73478 8.5 6C8.5 6.26522 8.60536 6.51957 8.79289 6.70711C8.98043 6.89464 9.23478 7 9.5 7ZM12.5 7C12.7652 7 13.0196 6.89464 13.2071 6.70711C13.3946 6.51957 13.5 6.26522 13.5 6C13.5 5.73478 13.3946 5.48043 13.2071 5.29289C13.0196 5.10536 12.7652 5 12.5 5C12.2348 5 11.9804 5.10536 11.7929 5.29289C11.6054 5.48043 11.5 5.73478 11.5 6C11.5 6.26522 11.6054 6.51957 11.7929 6.70711C11.9804 6.89464 12.2348 7 12.5 7ZM3.5 10C3.76522 10 4.01957 9.89464 4.20711 9.70711C4.39464 9.51957 4.5 9.26522 4.5 9C4.5 8.73478 4.39464 8.48043 4.20711 8.29289C4.01957 8.10536 3.76522 8 3.5 8C3.23478 8 2.98043 8.10536 2.79289 8.29289C2.60536 8.48043 2.5 8.73478 2.5 9C2.5 9.26522 2.60536 9.51957 2.79289 9.70711C2.98043 9.89464 3.23478 10 3.5 10ZM6.5 10C6.76522 10 7.01957 9.89464 7.20711 9.70711C7.39464 9.51957 7.5 9.26522 7.5 9C7.5 8.73478 7.39464 8.48043 7.20711 8.29289C7.01957 8.10536 6.76522 8 6.5 8C6.23478 8 5.98043 8.10536 5.79289 8.29289C5.60536 8.48043 5.5 8.73478 5.5 9C5.5 9.26522 5.60536 9.51957 5.79289 9.70711C5.98043 9.89464 6.23478 10 6.5 10ZM9.5 10C9.76522 10 10.0196 9.89464 10.2071 9.70711C10.3946 9.51957 10.5 9.26522 10.5 9C10.5 8.73478 10.3946 8.48043 10.2071 8.29289C10.0196 8.10536 9.76522 8 9.5 8C9.23478 8 8.98043 8.10536 8.79289 8.29289C8.60536 8.48043 8.5 8.73478 8.5 9C8.5 9.26522 8.60536 9.51957 8.79289 9.70711C8.98043 9.89464 9.23478 10 9.5 10ZM12.5 10C12.7652 10 13.0196 9.89464 13.2071 9.70711C13.3946 9.51957 13.5 9.26522 13.5 9C13.5 8.73478 13.3946 8.48043 13.2071 8.29289C13.0196 8.10536 12.7652 8 12.5 8C12.2348 8 11.9804 8.10536 11.7929 8.29289C11.6054 8.48043 11.5 8.73478 11.5 9C11.5 9.26522 11.6054 9.51957 11.7929 9.70711C11.9804 9.89464 12.2348 10 12.5 10ZM3.5 13C3.76522 13 4.01957 12.8946 4.20711 12.7071C4.39464 12.5196 4.5 12.2652 4.5 12C4.5 11.7348 4.39464 11.4804 4.20711 11.2929C4.01957 11.1054 3.76522 11 3.5 11C3.23478 11 2.98043 11.1054 2.79289 11.2929C2.60536 11.4804 2.5 11.7348 2.5 12C2.5 12.2652 2.60536 12.5196 2.79289 12.7071C2.98043 12.8946 3.23478 13 3.5 13ZM6.5 13C6.76522 13 7.01957 12.8946 7.20711 12.7071C7.39464 12.5196 7.5 12.2652 7.5 12C7.5 11.7348 7.39464 11.4804 7.20711 11.2929C7.01957 11.1054 6.76522 11 6.5 11C6.23478 11 5.98043 11.1054 5.79289 11.2929C5.60536 11.4804 5.5 11.7348 5.5 12C5.5 12.2652 5.60536 12.5196 5.79289 12.7071C5.98043 12.8946 6.23478 13 6.5 13ZM9.5 13C9.76522 13 10.0196 12.8946 10.2071 12.7071C10.3946 12.5196 10.5 12.2652 10.5 12C10.5 11.7348 10.3946 11.4804 10.2071 11.2929C10.0196 11.1054 9.76522 11 9.5 11C9.23478 11 8.98043 11.1054 8.79289 11.2929C8.60536 11.4804 8.5 11.7348 8.5 12C8.5 12.2652 8.60536 12.5196 8.79289 12.7071C8.98043 12.8946 9.23478 13 9.5 13Z" fill="black"/> </g> <defs> <clipPath id="clip0_179513_178791"> <rect width="16" height="16" fill="white"/> </clipPath> </defs> </svg>`,
	lock: `<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z'/></svg>`,
});

function displayField(label, content, icon='field', use_tooltip = false) {
	var value = `<div class="core-field-value core-ap-xdot">${content}</div>`;
	if (use_tooltip) {
		value = `
			<div class="core-field-value core-ap-xdot">
				<span title='${content}'>${content}</span>
			</div>
		`;
	}

	return `
		<div class="core-display-field">
			<div class="core-field-label">${label}</div>
			<div class="core-field-value core-ap-xdot">${content}</div>
		</div>
	`;
}

var Package = new function __Package() {
	this.CREATED_FROM_SOURCES = [
		{
			id: 'manual',
			content: __("Manual"),
			icon: 'package_manual'
		},
		{
			id: 'schedule',
			content: __("Schedule"),
			icon: 'package_schedule'
		}
	];
	this.database_config = {
		'host': '',
		'port': '',
		'database': '',
		'user': '',
		'password': '',
		'charset': '',
		'collation': '',
	};

	this.displayArchiveFile = function() {
		var package = context;
		if (!se(package.is_archive_files, 1)) {
			return '';
		}
		var exclude_paths = AP.word.split(";", package.archive_files_settings.exclude_paths);
		var exclude_paths_html = AP.render(exclude_paths, function(exclude_path) {
			return `<p>${exclude_path}</p>`;
		});
		var location_paths_html = '';
		var location_paths = package.storage_settings.location_paths;
		for (var storage in location_paths) {
			var data_storage = AP.array.findObj(Package.STORAGES, storage);
			if (!data_storage) {
				data_storage = {content: storage};
			}
			location_paths_html += `
				<div class='core-full' style='line-break: anywhere;'><span class='label'>${data_storage.content} ${__("path")}</span>: ${location_paths[storage]}</div>
				<core-sep value='4'></core-sep>
			`;
		}
		if (exclude_paths_html == '') {
			exclude_paths_html = '---';
		}
		if (location_paths_html != '') {
			location_paths_html = displayField('Storage', location_paths_html);
		}
		return `
			<div class="core-divider  -has-label -label-left">Configuration files</div>
			<div class="core-sep" style="height: 16px;"></div>
			${location_paths_html}
			${displayField('Exclude paths', exclude_paths_html)}
			${displayField('Exclude extensions', package.archive_files_settings.exclude_extensions || '---')}
		`;
	}
}

var Step = new function __Step() {
	this.STEP_DEPLOYMENT = 'deployment';
	this.STEP_INSTALL_DATABASE = 'install_database';
	this.STEP_UPDATE_DATA = 'update_data';
	this.STEP_TEST_SITE = 'test_site';
	this.STEP_CURRENT = this.STEP_DEPLOYMENT;
	this.STEPS = [
		{
			id: this.STEP_DEPLOYMENT,
			name: 'Deployment',
			content: ''
		},
		{
			id: this.STEP_INSTALL_DATABASE,
			name: 'Install database',
			content: ''
		},
		{
			id: this.STEP_UPDATE_DATA,
			name: 'Update data',
			content: ''
		},
		{
			id: this.STEP_TEST_SITE,
			name: 'Test site',
			content: ''
		}
	];

	this.renderSteps = function(canvas) {
		var html_steps = '';
		var index_step_current = 0;
		for (var i=0; i<this.STEPS.length; i++) {
			var step = this.STEPS[i];
			if (step.id == this.STEP_CURRENT) {
				index_step_current = i;
				break;
			}
		}
		for (var i=0; i<this.STEPS.length; i++) {
			var step = this.STEPS[i];
			var current_step_class = '';
			if (step.id == this.STEP_CURRENT) {
				current_step_class = '-current';
			}
			var done_step_class = '';
			if (i < index_step_current) {
				done_step_class = '-done';
			}
			html_steps += `
				<div class="step ${current_step_class} ${done_step_class}">
					<span class="step-number">${i + 1}</span>
					<span class="step-title">${step.name}</span>
					<div class="step-content">${step.content}</div>
			    </div>
			`;
		}
		var html = `
			<div class="step-process">
			    ${html_steps}
			  </div>
		`;
		$(canvas).html(html);
	}

	this.renderStepContent = function(canvas) {
		var html = '';
		switch (this.STEP_CURRENT) {
			case this.STEP_INSTALL_DATABASE:
				html = renderStepInstallDatabase();
				break;
			case this.STEP_UPDATE_DATA:
				html = renderStepUpdateData();
				break;
			case this.STEP_TEST_SITE:
				html = renderStepTestSite();
				break;
			default:
				html = renderStepDeployment();
		}
		$(canvas).html(html);

		$(document).on("click", ".btn-next-step-2", function() {
			$(canvas).html(renderStepInstallDatabase());
			Step.STEP_CURRENT = Step.STEP_INSTALL_DATABASE;
			Step.renderSteps("#js-install-steps");
		});

		$(document).on("click", ".btn-next-step-3", function() {
			if ($(this).hasClass('-disabled')) {
				return AP.toastr.error('Please test connect database before click next step');
			}
			$(canvas).html(renderStepUpdateData());
			Step.STEP_CURRENT = Step.STEP_UPDATE_DATA;
			Step.renderSteps("#js-install-steps");
		});

		$(document).on("click", ".btn-next-step-4", function() {
			if ($(this).hasClass('-disabled')) {
				return AP.toastr.error('This package does not qualify for parameters related to "Required parameters"');
			}
			Step.action.installPackage(function (code) {
				$(canvas).html(renderStepTestSite(code));
				Step.STEP_CURRENT = Step.STEP_TEST_SITE;
				Step.renderSteps("#js-install-steps");
			});
		});

		$(document).on("click", ".btn-test-connection-db", function(e) {
			e.preventDefault();
			Step.action.checkConnectionDatabase();
		});

		$(document).on("click", ".btn-admin-login", function(e) {
			e.preventDefault();
			Step.action.removeInstallerFiles();
		});
	}

	function renderStepDeployment() {
		var created_from_source = ARR.findObj(Package.CREATED_FROM_SOURCES, context.created_from_source);
		var created_from_source_html = '---';
		if (created_from_source) {
			created_from_source_html = `
                <text-title class='core-ap-xdot'>
                    <text-icon icon='${created_from_source.icon}'>${created_from_source.content}</text-icon>
                </text-title>
            `;
		}
		return `
			<div class='core-block -size-df -content-compact'>
				<div class="core-block-title">Archive</div>
				<div class="core-block-content ">
					<div class="core-side ">
						<div class="core-button btn-next-step-2 -cta -size-df core-fit"><span class="-txt">Next Step</span></div>
					</div>
					<div class="core-display-obj">
						<div class="core-flex-cols  -col-2 -spacing">
							${displayField('Package Name', context.name)}
							${displayField('Size', numberFormatByte(context.size))}
							${displayField('Created At', AP.time.time("%d/%m/%Y %H:%i", context.since))}
							${displayField('Created By', context.employee_name || "---")}
							${displayField('Type', created_from_source_html)}
							${displayField('Storage', AP.word.join(context.storage_settings.storage, ", "))}
						</div>
						${displayField('Description', context.description || "---")}
						${Package.displayArchiveFile()}
						<div class="core-divider  -has-label -label-left">Server information</div>
						<div class="core-sep" style="height: 16px;"></div>
						<div class="core-flex-cols  -col-2 -spacing">
							${displayField('Server information', server.server_information)}
							${displayField('Server software version', server.server_software_version)}
							${displayField('PHP version', php_information.version)}
							${displayField('Memory limit', php_information.memoryLimit)}
							${displayField('Max execution time', php_information.maxExecutionTime)}
							${displayField('Upload Max File size', php_information.maxFileSizeUpload)}
							${displayField('PrestaShop version', context.prestashop_version || "---")}
						</div>
					</div>
				</div>
			</div>
		`;
	}

	function numberFormatByte(byte) {
		var value = parseFloat(byte);
		value = (value / 1024).toFixed(2);
		if(value >= 1024 && value < 1024000){
			value = AP.data.numberFormat((value / 1024).toFixed(2)) + ' MB';
		}else if(value >= 1024000 && value < 1000000000){
			value = AP.data.numberFormat((value / 1024000).toFixed(2)) + ' GB';
		}else{
			value = AP.data.numberFormat(value) + ' KB';
		}
		return value;
	}

	function renderStepInstallDatabase() {
		var db = context.database_information;
		var excl_tables = context.archive_db_settings.excl_tables;
		var excl_tables_html = AP.render(excl_tables, function(excl_table) {
			return `${excl_table}, `;
		});
		excl_tables_html.slice(0, -2);
		if (excl_tables_html == '') {
			excl_tables_html = '---';
		}
		var db_fulfill = context.archive_db_settings.db_fulfill;
		return `
			<div class='core-block -size-df -content-compact'>
				<div class="core-block-title">Setup</div>
				<div class="core-block-content ">
					<div class="core-side ">
						<div class="core-button -disabled btn-next-step-3 -cta -size-df core-fit"><span class="-txt">Next Step</span></div>
					</div>
					<div class="core-display-obj">
						<div class="core-flex-cols  -col-2 -spacing">
							${displayField('MySQL version', db?.version || "---")}
							${displayField('MySQL server', db?.server || "---")}
							${displayField('Tables prefix', db?.prefix || "---")}
							${displayField('MySQL engine', db?.engine || "---")}
							${displayField('MySQL driver', db?.driver || "---")}
						</div>
						${displayField('Exclude Tables', excl_tables_html)}
					</div>
					<form id='js-form-install-database' action='./installer.php'>
						${inputHorizontal('Host *', 'db_cf_host', 'example: localhost', db_fulfill.host)}
						${inputHorizontal('Host Port *', 'db_cf_host_port', 'example: 3306', db_fulfill.port)}
						${inputHorizontal('Database *', 'db_cf_database', 'example: DatabaseName', db_fulfill.database)}
						${inputHorizontal('User *', 'db_cf_user', 'example: DatabaseUserName', db_fulfill.user)}
						${inputHorizontal('Password *', 'db_cf_password', 'example: DatabasePassword', db_fulfill.password || "")}
						${inputHorizontal('Charset', 'db_cf_charset', 'example: utf8 (value is optional)', db_fulfill.charset)}
						${inputHorizontal('Collation', 'db_cf_collation', 'example: utf8_general_ci (value is optional)', db_fulfill.collation)}
						<div class="core-field core-is-horizontal ">
						    <div class="core-field-label core-is-normal" style="flex-basis: 0%;"> <label class="core-label"></label> </div>
						    <div class="core-field-body">
						        <div class="core-field" >
						            <label class="core-label"></label> 
						            <div class="core-control"> 
						                <div class="core-button core-inline btn-test-connection-db -size-df core-fit">
											<span class="-txt">Test Connection Database</span>
										</div>
										<div class="core-button core-inline -disabled btn-next-step-3 -cta -size-df core-fit"><span class="-txt">Next Step</span></div>
					                </div>
						        </div>
						    </div>
						</div>
					</form>
				</div>
			</div>
		`;
	}

	function renderStepUpdateData() {
		var required_parameters = `<span class='core-text-success'>OK</span>`;
		if (!context.required_parameters) {
			required_parameters = `<span class='core-text-danger'>NOT OK</span>`;
		}
		var optional_parameters = `<span class='core-text-success'>OK</span>`;
		if (!context.optional_parameters) {
			optional_parameters = `<span class='core-text-danger'>NOT OK</span>`;
		}
		var list_overrides_html = AP.render(Object.values(context.list_of_overrides), function(path) {
			return `<p>${path}</p>`;
		});
		var mail_configuration_html = '';
		if (se(context.mail_configuration.is_native_php_mail, 1)) {
			mail_configuration_html = displayField('Mail configuration', 'You are using /usr/sbin/sendmail');
		} else {
			var smtp = context.mail_configuration.smtp;
			mail_configuration_html = `
				<div class="core-flex-cols  -col-2 -spacing">
					${displayField('Mail method', 'You are using your own SMTP parameters')}
					${displayField('SMTP server', smtp.server)}
					${displayField('SMTP username', smtp.user)}
					${displayField('SMTP password', smtp.password)}
					${displayField('Encryption', smtp.encryption)}
					${displayField('SMTP port', smtp.port)}
				</div>
			`;
		}
		var class_disable_next_step = '';
		if (!context.required_parameters) {
			class_disable_next_step = '-disabled';
		}
		return `
			<div class='core-block -size-df -content-compact'>
				<div class="core-block-title">Settings</div>
				<div class="core-block-content ">
					<div class="core-side ">
						<div class="core-button ${class_disable_next_step} btn-next-step-4 -cta -size-df core-fit"><span class="-txt">Next Step</span></div>
					</div>
					<div class="core-display-obj">
						<div class="core-flex-cols  -col-2 -spacing">
							${displayField('Required parameters', required_parameters)}
							${displayField('Optional parameters', optional_parameters)}
							${displayField('Enable SSL', se(context.enable_ssl, 1) ? "Enable" : "Disabled")}
							${displayField('Enable multistore', se(context.enable_multistore, 1) ? "Enable" : "Disabled")}
							${displayField('Maintenance mode', se(context.maintenance_mode, 1) ? "Enable" : "Disabled")}
							${displayField('Smarty Cache', context.smarty_cache ? "Enable" : "Disabled")}
							${displayField('Debug mode', context.debug_mode ? "Enable" : "Disabled")}
						</div>
						${displayField('List of overrides', list_overrides_html)}
						${mail_configuration_html}
					</div>
					${inputHorizontal('Site Url *', 'site_url', 'Enter your site url', `https://${context.shop_domain}/${context.extract_path_info.basename}`)}
					${inputHorizontal('Path store', 'path_store', 'Enter your path store to extract package', context.extract_path, true)}
					${inputHorizontal('Package path', 'package_path', 'Enter your path store to extract package', context.package_path, true)}
					${inputHorizontal('New Admin Account', 'new_admin_account', 'Enter your new admin acount')}
					${inputHorizontal('New Admin Account Password', 'new_admin_account_password', 'Enter your new admin account password')}
				</div>
			</div>
		`;
	}

	function inputHorizontal(label, name_input, placeholder = '', value = '', read_only = false) {
		var input_html = `
			<div class="core-control"> 
                <input value="${value}" class="core-input " name="${name_input}" type="text" placeholder="${placeholder}">   
            </div>
		`;
		if (read_only) {
			input_html = `
				<div class="core-control  core-has-icons-left"> 
	                <input value="${value}" read-only class="core-input " name="${name_input}" type="text" placeholder="${placeholder}">   
	            	<span class="core-icon core-is-small core-is-left" style='color: #42b814;'>${SVG['lock']}</span>
	            </div>
			`;
		}
		var html = `
			<div class="core-field core-is-horizontal ">
			    <div class="core-field-label core-is-normal" style="flex-basis: 0%;"> <label class="core-label">${label}</label> </div>
			    <div class="core-field-body">
			        <div class="core-field" >
			            <label class="core-label"></label> 
			            ${input_html}
			        </div>
			    </div>
			</div>
		`;
		if (!read_only) {
			return html;
		}
		return `
			<fieldset disabled>
				${html}
			</fieldset>
		`;
	}

	function renderStepTestSite(code) {
		var new_account_html = '';
		if (typeof Package.database_config.new_admin_account !== 'undefined' && typeof Package.database_config.new_admin_account_password !== 'undefined'
		&& !AP.data.isEmpty(Package.database_config.new_admin_account) && !AP.data.isEmpty(Package.database_config.new_admin_account_password)) {
			new_account_html = `
				${displayField('New Admin Account', Package.database_config.new_admin_account, 'field', true)}
				${displayField('New Admin Account Password', Package.database_config.new_admin_account_password, 'field', true)}
			`;
		}
		return `
			<div class='core-block -size-df -content-compact'>
				<div class="core-block-title">Report installer</div>
				<div class="core-block-content">
					<div class="core-side">
						<div class="core-button -cta -size-df core-fit btn-admin-login"><span class="-txt">Admin Login</span></div>
					</div>
					<div class="core-message  -colorful -fill -size-df -picon -alert" style="background-color:rgba(145, 213, 255, 0.15); color:#202223; border:1px solid #67c7fe">
					    <div class="bm-inner-wrapper std-padding">
					        <div class="-icon" style="color: #91d5ff;">
					            <span class="-icon-svg" data-svgicon="info" style="">
					                ${SVG.info}
					            </span>
					        </div>
					        <div class="bm-inner">
					        	FINAL STEP: Login to the Back Office to remove all installation files and complete the installation process. 
					        	The installation is NOT complete until all installer files have been completely removed. 
					        	Leaving installer files behind can lead to security issues.
					        </div>
					    </div>
					</div>
					<div class="core-sep" style="height: 16px;"></div>
					<div class="core-display-obj">
						<div class="core-flex-cols  -col-2 -spacing">
							${displayField('Number of tables', AP.data.numberFormat(context.number_table_db))}
							${displayField('Number of rows', AP.data.numberFormat(context.number_row_db))}
							${displayField('Size', Render.render("text_byte", {value: context.size, byte_unit: 1}))}
							${displayField('Number of images', code ? AP.data.numberFormat(code.data.total_image) : 0)}
							${displayField('Number of products', code ? AP.data.numberFormat(code.data.total_product) : 0)}
							${displayField('Number of orders', code ? AP.data.numberFormat(code.data.total_order) : 0)}
							${displayField('Modules installed', code ? AP.data.numberFormat(code.data.total_module) : 0)}
						</div>
						${displayField('Path Store', context.extract_path, 'field', true)}
						${new_account_html}
					</div>
				</div>
			</div>
		`;
	}
}

Step.action = new function __StepAction() {
	this.removeInstallerFiles = function() {
		UI.ajaxShow();
		AP.post('./installer.php', {
			_a: 'remove_install_files',
			package_path: context.package_path
		}, function(code) {
			UI.ajaxHide();
			if (!code.good()){
				UI.ajaxHide();
				return AP.alertError(code.message);
			}
			AP.toastr.success(code.message);
			window.open(`https://${context.shop_domain}/${context.extract_path_info.basename}/${context.folder_admin_name}`);
		});
	}

	this.installPackage = function(callback) {
		var new_admin_account = $("input[name='new_admin_account']").val();
		var new_admin_account_password = $("input[name='new_admin_account_password']").val();
		if (!AP.data.isEmpty(new_admin_account)) {
			if (isNotValidEmail(new_admin_account)) {
				return AP.toastr.error('The email of new admin account is invalid');
			}
			if (AP.data.isEmpty(new_admin_account_password)) {
				return AP.toastr.error('The password of new admin account is empty');
			}
		}
		Package.database_config['new_admin_account'] = new_admin_account;
		Package.database_config['new_admin_account_password'] = new_admin_account_password;
		UI.ajaxShow();
		AP.post('./installer.php', {
			_a: 'install_package',
			new_admin_account: $("input[name='new_admin_account']").val(),
			new_admin_account_password: $("input[name='new_admin_account_password']").val(),
			site_url: $("input[name='site_url']").val(),
			database_host: Package.database_config.host,
			database_port: Package.database_config.port,
			database_database: Package.database_config.database,
			database_user: Package.database_config.user,
			database_password: Package.database_config.password,
			database_charset: Package.database_config.charset,
			database_collation: Package.database_config.collation,
			extract_path: context.extract_path,
			package_path: context.package_path
		}, function(code) {
			if (!code.good()){
				UI.ajaxHide();
				return AP.alertError(code.message);
			}
			if (se(context.is_archive_db, 0)) {
				UI.ajaxHide();
				return AP.toastr.success("Install successfully");
			}
			AP.toastr.success(code.message);
			Step.action.importDatabase(callback);
		});
	}

	this.importDatabase = function(callback) {
		AP.post('./installer.php', {
			database_host: Package.database_config.host,
			database_port: Package.database_config.port,
			database_database: Package.database_config.database,
			database_user: Package.database_config.user,
			database_password: Package.database_config.password,
			database_charset: Package.database_config.charset,
			database_collation: Package.database_config.collation,
			extract_path: context.extract_path,
			package_path: context.package_path,
			_a: 'import_database',
			new_admin_account: $("input[name='new_admin_account']").val(),
			new_admin_account_password: $("input[name='new_admin_account_password']").val(),
			site_url: $("input[name='site_url']").val(),
		}, function(code) {
			if (!code.good()){
				UI.ajaxHide();
				return AP.alertError(code.message);
			}
			if (code.continue) {
				return Step.action.importDatabase(callback);
			}
			Step.action.getDBIndexAfterInstallPackage(callback);
		});
	}

	this.getDBIndexAfterInstallPackage = function(callback) {
		AP.post('./installer.php', {
			database_host: Package.database_config.host,
			database_port: Package.database_config.port,
			database_database: Package.database_config.database,
			database_user: Package.database_config.user,
			database_password: Package.database_config.password,
			database_charset: Package.database_config.charset,
			database_collation: Package.database_config.collation,
			_a: 'get_db_index_after_install_package',
			new_admin_account: $("input[name='new_admin_account']").val(),
			new_admin_account_password: $("input[name='new_admin_account_password']").val(),
		}, function(code) {
			if (!code.good()){
				UI.ajaxHide();
				return AP.alertError(code.message);
			}
			UI.ajaxHide();
			AP.toastr.success("Install successfully");
			callback(code);
		});
	}

	this.checkConnectionDatabase = function() {
		var new_admin_account = $("input[name='new_admin_account']").val();
		var new_admin_account_password = $("input[name='new_admin_account_password']").val();
		Form.submit("#js-form-install-database", function(code){
			UI.ajaxHide();
			if (!code.good()){
				return AP.alertError(code.message);
			}
			AP.toastr.success("Connection database successfully");
			Package.database_config = {
				'host': $("input[name='db_cf_host']").val(),
				'port': $("input[name='db_cf_host_port']").val(),
				'database': $("input[name='db_cf_database").val(),
				'user': $("input[name='db_cf_user']").val(),
				'password': $("input[name='db_cf_password']").val(),
				'charset': $("input[name='db_cf_charset']").val(),
				'collation': $("input[name='db_cf_collation']").val(),
				'new_admin_account': new_admin_account,
				'new_admin_account_password': new_admin_account_password,
			};
			$(".btn-next-step-3").removeClass('-disabled');
		}, {
			_a: 'test_connection_database',
			_r: 1
		});
	}

	function isNotValidEmail(email) {
		var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

		return !emailPattern.test(email);
	}
}