{% extends 'base.html.twig' %}

{% block title %}Add Infrastructure{% endblock %}

{% block content %}
<div class="kt-subheader kt-grid__item"></div>

{{ form_start(form, { 'attr': { 'id': 'infrastructure-form', 'class': 'kt-form', 'enctype':'multipart/form-data' }}) }}
<div class="kt-container kt-grid__item kt-grid__item--fluid">
	<div class="kt-portlet kt-portlet--mobile">
		<div class="kt-portlet__head kt-portlet__head--lg">
			<div class="kt-portlet__head-label">
				<h3 class="kt-portlet__head-title">Add Infrastructure</h3>
			</div>

			<div class="kt-portlet__head-toolbar">
				<div class="kt-portlet__head-wrapper">
					<a href="{{ path('infrastructure_index') }}" class="btn btn-clean btn-icon-sm mr-2"><i
							class="la la-long-arrow-left"></i>Back</a>
					<a href="{{ app.request.uri }}" class="btn btn-secondary btn-bold mr-2">Reset</a>
					<button class="btn btn-primary btn-bold">Submit</button>
				</div>
			</div>
		</div>

		<div class="kt-portlet__body">
			{% include 'parts/flash.html.twig' %}
			{% include 'infrastructure/_form.html.twig' %}
		</div>
	</div>
</div>
{{ form_end(form) }}
{% endblock %}

{% block scripts %}
{{ parent() }}

<script>
	$(function () {
		var htmlPrefilter = $.htmlPrefilter,
			rdel = /<(del)(?=[\s>])[\w\W]*?<\/\1\s*>/gi;
		$.htmlPrefilter = function (html) {
			return htmlPrefilter.call(this, html).replace(rdel, "");
		};
	});
	$('.select_dropdown').selectpicker();

	var fileNames = [];

	$('#infrastructure-form').on('submit', function () {
		var fileNames = $('#infrastructure-photo');
		$('input[name="photos[]"]').val(fileNames);
	});

	var infraDropzone = new Dropzone('#infrastructure-photo', {
		url: '{{ path('infrastructure_upload_handler') }}',
		maxFiles: 3,
		dictMaxFilesExceeded: 'Max. only 3 photos can be uploaded.',
		acceptedFiles: 'image/*',
		maxFilesize: 15,  // in Mb
		addRemoveLinks: true,
		dictRemoveFileConfirmation: 'Are you sure to remove this photo?',
		renameFile: function (file) {
			return newName = new Date().getTime() + '_' + file.name;
		},
		init: function () {
			if ($('.infrastructure_photo').length >= 3) {
				this.disable();

				$('.dropzone-msg-desc').html('Max. only 3 photos are allowed. Please remove a photo to add a new one.');
			}

			this.on('removedfile', function (file) {
				$.ajax({
					method: "POST",
					url: "{{ path('infrastructure_photo_delete_handler') }}",
					data: { 'fileName': file.upload.filename },
					dataType: "JSON",
					success: function (response) {
						fileNames.splice($.inArray(file.upload.filename, response.fileNames), 1);

						infraDropzone.enable();
					}
				});
			});

			this.on('maxfilesexceeded', function (file) {
				alert('Maxi. only 3 photos can be uploaded.');
			});

			this.on('sending', function (file, xhr, formData) {
			});

			this.on('success', function (file, response) {
				if (response.uploaded) {
					fileNames.push(response.fileName);
					$('.photos').val(fileNames.join(","));
				}
				if (fileNames.length + $('.infrastructure_photo').length > 4) {
					this.disable();
				}
			});
		}
	});

	$('.delete_photo').on('click', function () {
		var element = $(this), image = element.data('photo');
		Swal.fire({
			title: 'Are you sure to delete this photo?',
			icon: 'danger',
			showCancelButton: true,
			confirmButtonColor: '#3085d6',
			cancelButtonColor: '#d33',
			confirmButtonText: 'Yes, delete it!'
		}).then((result) => {
			if (result.isConfirmed) {
				$.ajax({
					method: "POST",
					url: "{{ path('infrastructure_photo_delete_handler') }}",
					data: { 'fileName': image },
					dataType: "JSON",
					success: function (response) {
						element.parent().remove();
						infraDropzone.enable();
						$('.dropzone-msg-desc').html($.htmlPrefilter('Allowed mime types: image/*'));
					}
				});
			}
		})
	});

	$('.kt-media img').click(function (e) {
		var src = this.src;

		swal.fire({
			imageUrl: src,
			imageWidth: 400,
			imageHeight: 200,
			animation: false,
			showConfirmButton: false,
			showCancelButton: true,
			cancelButtonText: "Close",
			cancelButtonClass: "btn btn-default"
		});
	});
</script>
{% endblock %}