@extends('backend.layout')

@section('content')

<div class="navbar navbar-default navbar-component navbar-xs">
	<ul class="nav navbar-nav visible-xs-block">
		<li class="full-width text-center"><a data-toggle="collapse" data-target="#navbar-filter"><i class="icon-menu7"></i></a></li>
	</ul>

	<div class="navbar-collapse collapse" id="navbar-filter">
		<ul class="nav navbar-nav">
			<li class=""><a href="{{ route('backend.profile.info') }}" ><i class="icon-menu7 position-left"></i> Thông tin cá nhân</a></li>
			@if( \Auth::user()->hasPermission('setting-profile') )
			<li class=""><a href="{{ route('backend.profile.setting') }}"><i class="icon-calendar3 position-left"></i> Cài đặt</a></li>
			@endif
			<li class=""><a href="{{ route('backend.profile.logs') }}"><i class="icon-cog3 position-left"></i> Logs</a></li>
			<li class="active"><a href="#"><i class="icon-media position-left"></i> Cài đặt hình ảnh</a></li>
		</ul>
	</div>
</div>

<h6 class="panel-title">ẢNH GIỚI THIỆU (1024x500 pixcel)</h6>
<div class="row">
	<div class="col-lg-9">
		<div class="tabbable">
			<div class="tab-content">
				<div class="tab-pane fade @if(@$active == null) in active @endif" id="activity">
					<!-- Profile info -->
					<div class="panel panel-flat">
						<div class="panel-body">
							<form class="form-horizontal" action="{{ route('backend.profile.post') }}" method="POST">
								{{ csrf_field() }}
								<div class="form-group">
									<div class="col-lg-12">
										<input type="file" class="file-input-ajax" multiple="multiple" accept="image/*">
									</div>
								</div>
							</form>
						</div>
					</div>
					<!-- /profile info -->
				</div>
			</div>
		</div>
	</div>

	<div class="col-lg-3">

		<!-- User thumbnail -->
		<div class="thumbnail">
			<div class="thumb thumb-slide">
				<form class="form-horizontal" action="{{ route('backend.profile.post') }}" method="POST">
					{{ csrf_field() }}
					<div class="form-group">
						<div class="col-lg-12">
							<input type="file" class="logo-hotel" accept="image/*">
						</div>
					</div>
				</form>
			</div>
		
	    	<div class="caption text-center" style="padding: 11px;">
	    		<h6 class="text-semibold no-margin"> Logo (200x400 pixcel)</h6>
            	</ul>
	    	</div>
    	</div>
    	<!-- /user thumbnail -->

	</div>
</div>
<style type="text/css">
	.file-footer-caption{
		display:none;
	}
	.file-preview-image{
		width:240px !important;
		object-fit:cover;
	}
	.file-caption-name{
		display:none;
	}
</style>
@endsection

@push('scripts')
<script src="{{ URL::asset('backend/global_assets/js/plugins/uploaders/fileinput/plugins/purify.min.js')}}"></script>
<script src="{{ URL::asset('backend/global_assets/js/plugins/uploaders/fileinput/plugins/sortable.min.js')}}"></script>
<script src="{{ URL::asset('backend/global_assets/js/plugins/uploaders/fileinput/fileinput.min.js')}}"></script>

<script>
	document.addEventListener('DOMContentLoaded', function() {
		//
	    // Define variables
	    //

	    // Modal template
	    var modalTemplate = '<div class="modal-dialog modal-lg" role="document">\n' +
	        '  <div class="modal-content">\n' +
	        '    <div class="modal-header">\n' +
	        '      <div class="kv-zoom-actions btn-group">{toggleheader}{fullscreen}{borderless}{close}</div>\n' +
	        '      <h6 class="modal-title">{heading} <small><span class="kv-zoom-title"></span></small></h6>\n' +
	        '    </div>\n' +
	        '    <div class="modal-body">\n' +
	        '      <div class="floating-buttons btn-group"></div>\n' +
	        '      <div class="kv-zoom-body file-zoom-content"></div>\n' + '{prev} {next}\n' +
	        '    </div>\n' +
	        '  </div>\n' +
	        '</div>\n';

	    // Buttons inside zoom modal
	    var previewZoomButtonClasses = {
	        toggleheader: 'btn btn-default btn-icon btn-xs btn-header-toggle',
	        fullscreen: 'btn btn-default btn-icon btn-xs',
	        borderless: 'btn btn-default btn-icon btn-xs',
	        close: 'btn btn-default btn-icon btn-xs'
	    };

	    // Icons inside zoom modal classes
	    var previewZoomButtonIcons = {
	        prev: '<i class="icon-arrow-left32"></i>',
	        next: '<i class="icon-arrow-right32"></i>',
	        toggleheader: '<i class="icon-menu-open"></i>',
	        fullscreen: '<i class="icon-screen-full"></i>',
	        borderless: '<i class="icon-alignment-unalign"></i>',
	        close: '<i class="icon-cross3"></i>'
	    };

	    // File actions
	    var fileActionSettings = {
	        zoomClass: 'btn btn-link btn-xs btn-icon',
	        zoomIcon: '<i class="icon-zoomin3"></i>',
	        dragClass: 'btn btn-link btn-xs btn-icon',
	        dragIcon: '<i class="icon-three-bars"></i>',
	        removeClass: 'btn btn-link btn-icon btn-xs',
	        removeIcon: '<i class="icon-trash"></i>',
	        indicatorNew: '<i class="icon-file-plus text-slate"></i>',
	        indicatorSuccess: '<i class="icon-checkmark3 file-icon-large text-success"></i>',
	        indicatorError: '<i class="icon-cross2 text-danger"></i>',
	        indicatorLoading: '<i class="icon-spinner2 spinner text-muted"></i>'
	    };

		$(".file-input-ajax").fileinput({
	        uploadUrl: '{{ route('backend.file.uploadSlider') }}', // server upload action
	        uploadAsync: true,
	        maxFileCount: 6,
	        ajaxSettings: { headers: { 
	        	'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
	        	'user-id' : '{{ $user->id }}'
	        } },
	        initialPreview: [],
	        fileActionSettings: {
	            removeIcon: '<i class="icon-bin"></i>',
	            removeClass: 'btn btn-link btn-xs btn-icon',
	            uploadIcon: '<i class="icon-upload"></i>',
	            uploadClass: 'btn btn-link btn-xs btn-icon',
	            zoomIcon: '<i class="icon-zoomin3"></i>',
	            zoomClass: 'btn btn-link btn-xs btn-icon',
	            indicatorNew: '<i class="icon-file-plus text-slate"></i>',
	            indicatorSuccess: '<i class="icon-checkmark3 file-icon-large text-success"></i>',
	            indicatorError: '<i class="icon-cross2 text-danger"></i>',
	            indicatorLoading: '<i class="icon-spinner2 spinner text-muted"></i>',
	        },
	        layoutTemplates: {
	            icon: '<i class="icon-file-check"></i>',
	            modal: modalTemplate
	        },

	        @if(count($sliders) > 0)

	        initialPreview: [
	        	@foreach($sliders as $item)
	            "