{include file="header.html"}

<style>

	#file-status {
		margin-top: 1em;
		margin-bottom: 0;
	}

</style>

<h3>{button class="btn btn-secondary" href="?m=helpdesk" icon="cancel" label="Back"} {trans($title)}</h3>
<form method="post" id="newmessage" action="?m=helpdesk&id={$ticket.id}" name="helpdesk" enctype="multipart/form-data">
    {box title="Message"}
    <input type="hidden" name="helpdesk[inreplyto]" value="{$helpdesk.inreplyto}" />
	<input type="hidden" name="helpdesk[references]" value ="{$helpdesk.references|escape|default:""}" />
    <div class="table-responsive">
		<table class="table">
			<tr>
				<th>
					{trans("Subject:")}
				</th>
				<td>
					<input type="text" name="helpdesk[subject]" value="{$helpdesk.subject}" {userpaneltip class="form-control" text="Enter message subject" trigger="subject"} />
				</td>
			</tr>
			<tr>
				<th>
					{trans("Body:")}
				</th>
				<td>
					<textarea name="helpdesk[body]" {userpaneltip class="form-control" text="Enter message content" trigger="body"} rows="5" cols="40">{$helpdesk.body}</textarea>
				</td>
			</tr>
			<tr>
				<th>
					{trans("Attachments:")}
				</th>
				<td>
					<input type="file" name="files[]" id="attachments" {userpaneltip class="form-control-file" text="Enter path to file or click 'Browse' button" trigger="files"} multiple />
					<input type="hidden" id="post_max_size" value="{$post_max_size.bytes}">
					<input type="hidden" id="upload_max_filesize" value="{$upload_max_filesize.bytes}">
					<div id="file-status" class="alert alert-danger"{if !isset($error.files)} style="display: none;"{/if}>
						{if isset($error.files)}
							{$error.files}
						{/if}
					</div>
					<small class="form-text">
						{t a=$post_max_size.text}Maximum total file size: $a{/t}
					</small>
					<small class="form-text">
						{t a=$upload_max_filesize.text}Maximum single file size: $a{/t}
					</small>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					{button type="submit" class="btn btn-danger submit-button" accesskey="S" icon="message" label="<!helpdesk>Submit"}
				</td>
			</tr>
		</table>
    </div>
    {/box}
</form>
<script>

	$(function() {
		function check_file_sizes() {
			var attachments = $('#attachments').get(0);
			$('#file-status').hide().text();
			if (attachments.files.length) {
				var error = '';
				var post_max_size = parseInt($('#post_max_size').val());
				var upload_max_filesize = parseInt($('#upload_max_filesize').val());
				var total_size = 0;
				$.each(attachments.files, function (index, file) {
					if (upload_max_filesize && file.size > upload_max_filesize) {
						error = '{trans("One from files is too large!")}';
					}
					total_size += file.size;
				});
				if (post_max_size && total_size > post_max_size) {
					error = '{trans("Total file size is too large!")}';
				}
				if (error.length) {
					$('#file-status').text(error).show();
					return false;
				}
			}
			return true;
		}

		$('#attachments').change(function() {
			check_file_sizes();
		});

		$('#newmessage .submit-button').click(function() {
			if (check_file_sizes()) {
				document.helpdesk.submit();
			}
		});
	});

</script>
{include file="footer.html"}
