@extends('themes.public.'.setting('active_admin_theme').'.layouts.default')
	@section('content')
	@push('custom-css')

	@endpush
	<div class="gadmin-pagesidebar-width-1 gadmin-mhide">
		<div class="panel panel-default gadmin-pagesidebar-width-1-panel ">
				<!-- begin panel-heading -->
				<div class="panel-heading gadmin-pagesidebar-width-1-heading">
					<h4 class="panel-title">{{__('admin.modules_modulesoptions')}}</h4>
				</div>
				<!-- end panel-heading -->
				<div class="gadmin-pagesidebar-body">
					<div class="gadmin-pagesidebar-main">
						<ul class="nav gadmin-pagesidebar-ul">
							<li><a class=" active">{{__('install_module')}}</a></li>
							<li><a href="{{url('admin/modules/show')}}" class="">{{__('installed_modules')}}</a></li>
							<li><hr></li>
							<li><a href="{{url('admin/utility/backup')}}" class="">{{__('backup')}}</a></li>
							<li><a href="{{url('admin/utility/restore')}}" class="">{{__('restore')}}</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

<div class="gadmin-pagesidebar-width-2">
	<!-- begin panel -->
	<div class="panel panel-default " data-sortable-id="ui-widget-6">
		<div class="panel-heading">
			<h4 class="panel-title">
				{{$title}}
			</h4>
		</div>
		<div id="info-alert" class="alert" style="display:none">
			<span class="close"  onclick="$('#info-alert').fadeOut()">×</span>
			<div class="alert-container"></div>
		</div>
		<div class="panel-body">
			<div class="row">
				<div id="res-row" class="col-md-5">
					<form id="install-module" method="post" enctype="multipart/form-data">
						<input id="file" type="file" name="module"  value="" />
						<!--
						<progress id="progressBar" class="progress progress-bar progress-bar-info progress-lg" value="0" max="100" style="width:100%;margin:20px 20px 20px 0"></progress>

						<h3 id="status"></h3>
						<p id="loaded_n_total"></p>
						-->
						<div class="progress" style="margin-top:20px;display:none">
							<div id="progressBar" class="progress-bar bg-success" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
						</div>

						<div class="text-center" style="margin-top:20px">
							<button type="submit" class="btn btn-md btn-success"><span id="submit-btn"><i class="fa fa-cloud-upload-alt"></i> {{__('install')}}</span></button>
						</div>
					</form>
				</div>
				<div class="col-md-7">
					<div class="alert alert-info fade show">
						<span class="close" data-dismiss="alert">×</span>
						<i class="fa fa-info-circle fa-2x pull-left m-r-10"></i>
						{!! __('module_req_info') !!}
						<div class="m-l-15 p-10">
							<img src="{{ asset('assets/images/platform/module_structure.png') }}" class="img-responsive m-5" style="max-width:300px;margin-right:10px;" />
							<a href="{{asset('files/test/modules/test.zip')}}" class="btn btn-sm btn-warning"><i class="fa fa-cloud-download-alt"></i> {{__('download_module_example')}}</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	<!-- end panel -->
	@push('custom-js')
		<script>
			function _(el) {
				return document.getElementById(el);
			}

			function progressHandler(event) {
				//_("loaded_n_total").innerHTML = "Uploaded " + event.loaded + " bytes of " + event.total;
				var percent = (event.loaded / event.total) * 100;
				$("#progressBar").css('width',Math.round(percent) + '%').html(Math.round(percent) + '%');
				//_("status").innerHTML = Math.round(percent) + "% uploaded... Please wait";
			}

			function completeHandler(event) {

				_("progressBar").value = 0; // clear progress bar after successful upload
			}

			function errorHandler(event) {
				_("status").innerHTML = "Upload Failed";
			}

			function abortHandler(event) {
				_("status").innerHTML = "Upload Aborted";
			}

			$(document).ready(function() {

				$('#install-module').on('submit', function (e) {
					e.preventDefault();
					$('#info-alert').fadeOut();
					var data = new FormData($('#install-module')[0]);
					if (data.length !== 0) {
						$('.progress').show();
						$('#submit-btn').empty().html('<i class="fas fa-spinner fa-spin"></i> {{__('processing')}}');
						setTimeout(function () {
							$.ajax({
								xhr: function () {
									var xhr = new window.XMLHttpRequest();
									xhr.upload.addEventListener("progress", progressHandler, false);
									xhr.addEventListener("load", completeHandler, false);
									xhr.addEventListener("error", errorHandler, false);
									xhr.addEventListener("abort", abortHandler, false);
									return xhr;
								},
								url: site_root + 'admin/ajax/install_module',
								method: 'POST',
								processData: false,
								contentType: false,
								cache: false,
								data: data,
							}).fail(function () {
								$('#submit-btn').empty().html('<i class="fa fa-cloud-upload-alt"></i> {{__("install")}}');
								$('#info-alert').gaidoAlert({
									text: '{{__('form_error')}}',
									type: 'error',
									mode: 'auto'
								});
							}).done(function (response) {
								$('#res-row').empty().append(response);
								$('.progress').hide();
							});
						}, 200);
					} else {
						// show alert box -> params: text, type ('error','warning','info','success'), mode ('manual', 'auto', 'quick')
						$('#info-alert').gaidoAlert({
							text: '{{__('module_form_empty')}}',
							type: 'error',
							mode: 'auto'
						});
						return false;
					}
				});
			});
		</script>
	@endpush
	@endsection