@section('content')
	<div class="row">
		<div class="col-xs-8">
			{{Breadcrumb::withLinks($breadcrumbs)}}
		</div>
		<div class="col-xs-4">
			@if (Sentry::getUser()->hasAccess('admin.banner.create'))
				{{Button::success(trans('admin.buttons.add-banner'))->prependIcon(Icon::plus_sign())->asLinkTo(route('admin.banner.create'))->withAttributes(['class' => 'pull-right'])}}
			@endif
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<div role="tabpanel">
				{{Navigation::tabs($tabs)->withAttributes(['role' => 'tablist', 'class' => 'flags'])}}

				<div class="tab-content">
					@foreach($tabs as $tab)
						<div role="tabpanel" class="tab-pane {{$tab['active'] ? 'active' : ''}}" id="{{$tab['route']}}">
							<ul class="list-group sortable">
								@forelse($banners as $banner)
									<li class="list-group-item" data-banner-id="{{$banner->id}}">
										<div class="panel panel-default">
											<div class="panel-heading">
												<div class="row">
													<div class="col-xs-6">
														{{Form::open(['route' => ['admin.banner.update', $banner->id], 'method' => 'PATCH', 'secure' => true])}}
															<i class="glyphicon glyphicon-resize-vertical"></i> {{$banner->id}}
															{{Form::hidden('order', $banner->order)}}
														{{Form::close()}}
													</div>

													<div class="col-xs-6 text-right">
														@if (Sentry::getUser()->hasAccess('admin.banner.edit'))
															{{Button::normal(trans('admin.buttons.edit'))->asLinkTo(route('admin.banner.edit', [$banner->id]))->extraSmall()->prependIcon(Icon::pencil())->withAttributes(['class' => 'edit'])}}
														@endif
														@if (Sentry::getUser()->hasAccess('admin.banner.destroy'))
															{{Button::normal(trans('admin.buttons.delete'))->extraSmall()->prependIcon(Icon::trash())->withAttributes(['data-toggle' => 'modal', 'data-target' => '#confirmDelete', 'data-route' => route('admin.banner.destroy', [$banner->id]), 'data-item' => $banner->id])}}
														@endif
													</div>
												</div>
											</div>
											<div class="panel-body no-padding">
												{{HTML::image($banner->banner_translations->keyBy('language_id')->get($tab['id'])->image->url('thumb'))}}
											</div>
										</div>
									</li>
								@empty
									<li class="list-group-item text-center">
										{{trans('admin.messages.empty-list-of-banners')}}
									</li>
								@endforelse
							</ul>
						</div>
					@endforeach
				</div>
			</div>
		</div>
	</div>
@stop

@section('modals')
	<div id="confirmDelete" class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
		<div class="modal-dialog modal-md">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title">{{trans('admin.labels.confirm-delete')}}</h4>
				</div>
				<div class="modal-body">
					{{trans('admin.messages.realy-delete-banner', ['banner' => '<span class="banner"></span>'])}}
				</div>
				<div class="modal-footer">
					{{Form::open(['method' => 'DELETE', 'secure' => true])}}
						{{Button::danger(trans('admin.buttons.delete'))->prependIcon(Icon::trash())->submit()}}
						{{Button::normal(trans('admin.buttons.close'))->withAttributes(['data-dismiss' => 'modal'])}}
					{{Form::close()}}
				</div>
			</div>
		</div>
	</div>
@stop

@section('scripts')
	$('#confirmDelete').on('show.bs.modal', function (event)
	{
		var modal = $(this);
		var button = $(event.relatedTarget);
		var route = button.data('route');
		var item = button.data('item');

		modal.find('form').attr('action', route);
		modal.find('span.banner').text(item);
	});

	@if (Sentry::getUser()->hasAccess('admin.banner.update'))
		$('ul.sortable').sortable(
		{
			placeholder: "list-group-item placeholder",
			items: "> li[data-banner-id]",

			update: function(event, ui)
			{
				var $form = $(ui.item).find('form');
				var url = $form.prop('action');
				var type = $form.prop('method');
				var order = $(ui.item).next().find('form input[name=order]').val();

				$form.find('input[name=order]').val(order);

				$.ajax(
				{
					url: url,
					type: type,
					data: new FormData($form.get(0)),
					processData: false,
					contentType: false,
					success: function(response)
					{
						if (response.banners)
						{
							$('ul.sortable li[data-banner-id]').each(function()
							{
								var id = $(this).data('banner-id');

								$(this).find('form input[name=order]').val(response.banners[id].order);
							});
						}
					}
				});
			}
		});

		$('tbody.sortable').disableSelection();
	@endif

	@if (Sentry::getUser()->hasAccess('admin.banner.revision'))
		$(document).keyup(function (event)
		{
			var code = event.keyCode || event.which;

			if (code == 20)
			{
				$('a.edit').each(function()
				{
					var href = $(this).attr('href');

					if (href.match(/edit$/))
					{
						$(this).attr('href', href.replace(/(edit)$/, 'revision'));
						$(this).removeClass('btn-default').addClass('btn-dark');
						$(this).html($(this).html().replace('pencil', 'hourglass'));
						$(this).html($(this).html().replace('{{trans('admin.buttons.edit')}}', '{{trans('admin.buttons.revisions')}}'));
					}
					else
					{
						$(this).attr('href', href.replace(/(revision)$/, 'edit'));
						$(this).removeClass('btn-dark').addClass('btn-default');
						$(this).html($(this).html().replace('hourglass', 'pencil'));
						$(this).html($(this).html().replace('{{trans('admin.buttons.revisions')}}', '{{trans('admin.buttons.edit')}}'));
					}
				});
			}
		});
	@endif
@stop