<?php defined('BASEPATH') OR exit('No direct script access allowed');

$allowedFields = array(
	"payeeOnly", "payee", "bearer",
	"d1", "d2", "m1", "m2", "y1", "y2", "y3", "y4",
	"amtText1", "amtText2", "amt"
);

// $content["preview"] = base_url('assets/templates/sbi.jpg');
if (!empty($content["preview"]) && is_file($content["preview"]))
{
	echo '<img class="imgpreview" src="' . $content["preview"] . '" />';
}

$amt = "";
foreach($content["fields"] as $key => $field)
{
	if (isset($data[$key]) && in_array($key, $allowedFields))
	{
		if ($key == "payeeOnly")
		{
			// echo '<div text-rotate="45" class="' . $key . '">' . $data[$key] . '</div>' . PHP_EOL;
			if ($field["width"])
			{
				echo '<img src="data:image/png;base64,' . base64_encode(file_get_contents(APPPATH . "third_party/banks/payeeonly.png")) . '" class="' . $key . '" />' . PHP_EOL;
			}
		}
		else
		{
			if ($key == "amt")
			{
				$amt = $field;
				// echo strlen($data["amt"]) * 2.5;echo $field["width"];
			}

			echo '<div class="' . $key . '">' . $data[$key] . '</div>' . PHP_EOL;
		}
	}
}
?>
<style>
div {
	font-family: arial;
	font-size: 14px;
}
.imgpreview {
	position: absolute;
	display: inline-block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.d1, .d2, .m1, .m2, .y1, .y2, .y3, .y4 {
	text-align: center;
}
<?php if ((strlen($data["amt"]) * 2.5 ) > $amt["width"]) { ?>
.amt {
	text-align: right;
	font-size: 14px;
}
<?php } else { ?>
.amt {
	text-align: right;
	font-size: 16px;
}
<?php } ?>
.payeeOnly, .payee, .bearer, .d1, .d2, .m1, .m2, .y1, .y2, .y3, .y4, .amtText1, .amtText2, .amt {
	position: absolute;
	display: inline-block;
<?php

if (!empty($content["preview"]))
{
	echo "	border: 1px solid #CCCCCC;";
}
?>
}
<?php
foreach($content["fields"] as $key => $field)
{
	echo "." . $key . "{" . PHP_EOL;
	echo "	width: " . $field["width"] . "mm;" . PHP_EOL;
	echo "	left: " . $field["left"] . "mm;" . PHP_EOL;
	echo "	top: " . $field["top"] . "mm;" . PHP_EOL;
	echo "}" . PHP_EOL;
}
?>
/*
.payeeOnly{
	border-top: 2px solid #000000;
	border-bottom: 2px solid #000000;
	padding-top: 3px;
	padding-bottom: 3px;
	text-align: center;
	rotate: -45;
}
*/
</style>
