<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<!-- SEO Meta Tags -->
	<meta name="description" content="@yield('description')" />
	<meta name="keywords" content="@yield('keywords')" />
	<meta name="author" content="GigaPixel" />

	<title>Mazfer - @yield('title')</title>

	<!-- Favicon -->
	<link href="/favicon.ico" rel="icon" />
	<link href="/css/fontawesome-all.min.css" rel="stylesheet" />

	<link href="/admin/plugins/bootstrap/bootstrap.min.css" rel="stylesheet" />
	<link href="/admin/plugins/animate/animate.css" rel="stylesheet" />
	<link href="/admin/plugins/dropzone/dropzone.css" rel="stylesheet" />
	<link href="/admin/plugins/datapicker/datepicker3.css" rel="stylesheet" />

	<link href="/admin/css/style.css" rel="stylesheet" />
	<link href="/admin/css/admin.css" rel="stylesheet" />
	@stack('css')

	<script type="text/javascript">
		window.APP = {}

		const myDropzone = []
		function createMyDropzone(keyId, elem) {
			const myDZ = new Dropzone(elem, {
				url: '/admin/upload',
				paramName: elem.dataset.name,
				uploadMultiple: false,
				createImageThumbnails: true,
				thumbnailWidth: 120,
				thumbnailMethod: "contain",
				maxFiles: 1,
				maxFilesize: 16,
				acceptedFiles: 'image/*',
				autoProcessQueue: false,
				autoQueue: false,
				disablePreviews: false,
				previewTemplate: document.querySelector('#dz-template-container').innerHTML.trim(),
				previewsContainer: document.getElementById(keyId + '-thumbnails'),
				addedfile: function(file) {
					if (this.element === this.previewsContainer) {
						this.element.classList.add("dz-started")
					}

					if (this.previewsContainer && !this.options.disablePreviews) {
						file.previewTemplate = file.previewElement = Dropzone.createElement(this.options.previewTemplate)

						if (this.options.uploadMultiple) {
							this.previewsContainer.appendChild(file.previewElement)
						} else {
							this.previewsContainer.innerHTML = ''
							this.previewsContainer.appendChild(file.previewElement)
						}

						for (const node of file.previewElement.querySelectorAll("[data-dz-name]")) node.textContent = file.name
						for (const node of file.previewElement.querySelectorAll("[data-dz-size]")) node.innerHTML = this.filesize(file.size)

						let removeFileEvent = (e) => {
							e.preventDefault()
							e.stopPropagation()

							if (file.status === Dropzone.UPLOADING) {
								return Dropzone.confirm(this.options.dictCancelUploadConfirmation, () => this.removeFile(file))
							} else {
								if (this.options.dictRemoveFileConfirmation) {
									return Dropzone.confirm(this.options.dictRemoveFileConfirmation, () => this.removeFile(file))
								} else {
									return this.removeFile(file);
								}
							}
						}

						for (let removeLink of file.previewElement.querySelectorAll("[data-dz-remove]")) {
							removeLink.addEventListener("click", removeFileEvent);
						}
					}
				},
				removedfile: function(file) {
					if (file.previewElement != null && file.previewElement.parentNode != null) {
						file.previewElement.parentNode.removeChild(file.previewElement)
					}

					return this._updateMaxFilesReachedClass()
				},
				thumbnail: function(file, dataUrl) {
					if (file.previewElement) {
						file.previewElement.classList.remove("dz-file-preview");
						for (let thumbnailElement of file.previewElement.querySelectorAll("[data-dz-thumbnail]")) {
							thumbnailElement.alt = file.name;
							thumbnailElement.src = dataUrl;
						}

						return setTimeout(() => file.previewElement.classList.add("dz-image-preview"), 1);
					}
				},
				error(file, message) {
					if (file.previewElement) {
						file.previewElement.classList.add("dz-error")
						if (typeof message !== "string" && message.error) {
							message = message.error;
						}

						for (let node of file.previewElement.querySelectorAll("[data-dz-errormessage]")) {
							node.textContent = message;
						}
					}
				},
				uploadprogress: function(file, progress, bytesSent) {
					console.log('uploadprogress', { file, progress, bytesSent })
				},
				dictDefaultMessage: 'Arraste e solte a imagem aqui ou clique para fazer upload',
				dictFallbackMessage: 'Seu navegador não suporta upload de arquivos por arrastar e soltar.',
				dictFallbackText: 'Por favor, use o formulário de backup abaixo para fazer o upload de seus arquivos como nos velhos tempos.',
				dictFileTooBig: 'O arquivo é muito grande (@{{filesize}}MiB). Tamanho máximo do arquivo: @{{maxFilesize}}MiB.',
				dictInvalidFileType: 'Você não pode fazer upload de arquivos desse tipo.',
				dictResponseError: 'O servidor respondeu com o código @{{statusCode}}.',
				dictCancelUpload: 'Cancelar upload',
				dictUploadCanceled: 'Upload cancelado.',
				dictCancelUploadConfirmation: 'Tem certeza de que deseja cancelar este upload?',
				dictRemoveFile: 'Remover arquivo',
				dictRemoveFileConfirmation: 'Tem certeza de que deseja remover este arquivo?',
				dictMaxFilesExceeded: 'Você não pode fazer upload de mais arquivos.',
				dictFileSizeUnits: { tb: 'TB', gb: 'GB', mb: 'MB', kb: 'KB', b: 'b' },
			})

			myDropzone.push(myDZ)
		}
	</script>
</head>

<body>
	<!--[if lte IE 9]>
		<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
	<![endif]-->

	<div id="wrapper">
		@include('admin.layouts.navbar')
		<div id="page-wrapper" class="gray-bg">
			@include('admin.layouts.top')
			@yield('content')
			@include('admin.layouts.footer')
		</div>
	</div>

	<script src="/js/fontawesome-all.min.js"></script>

	<script src="/admin/plugins/jQuery/jquery-3.1.1.min.js"></script>
	<script src="/admin/plugins/bootstrap/bootstrap.min.js"></script>
	<script src="/admin/plugins/metisMenu/jquery.metisMenu.js"></script>
	<script src="/admin/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script src="/admin/plugins/pace/pace.min.js"></script>
	<script src="/admin/plugins/dropzone/dropzone.min.js"></script>
	<script src="/admin/plugins/datapicker/bootstrap-datepicker.js"></script>
	<script src="/admin/plugins/datapicker/bootstrap-datepicker.pt-BR.min.js"></script>

	<script src="/admin/js/popper.min.js"></script>
	<script src="/admin/js/inspinia.js"></script>
	<script src="/admin/js/doT.min.js"></script>
	<script src="/admin/js/admin.js"></script>
	@stack('js')

	<template id="dz-template-container">
		<div class="dz-preview dz-file-preview">
			<div class="dz-details">
				<div class="btn-actions">
					<a class="btn btn-danger btn-xs" data-dz-remove>Remover</a>
				</div>
				<div class="dz-filename"><span data-dz-name></span></div>
				<div class="dz-size" data-dz-size></div>
				<img data-dz-thumbnail style="width: 120px" />
			</div>

			<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
			<div class="dz-error-message"><span data-dz-errormessage></span></div>
			<div style="display: flex; justify-content: space-around">
				<div class="dz-success-mark"><span>✔</span></div>
				<div class="dz-error-mark"><span>✘</span></div>
			</div>
		</div>
	</template>
</body>

</html>
