@extends('layouts.master')

@section('banner') active @endsection

@section('content')
<link rel="stylesheet" href="js/dropzone/dropzone.css">
<link rel="stylesheet" href="css/banner.css">

<script src="js/dropzone/dropzone.js"></script>
<script src="js/bootbox.min.js"></script>

<script>
	Dropzone.autoDiscover = false;
	
	$(document).ready(function()
	{
        var banner_dropzone = new Dropzone(".banner_dropzone", { 
            url: "banner/banner_image_upload",
            params: {
                _token: "{!! csrf_token() !!}"
            },
            maxFilesize: 8,
            uploadMultiple: true,
            addRemoveLinks: false,
            parallelUploads: 1,
            autoProcessQueue: true,
            error: function(file, response) {
                if($.type(response) === "string")
                    var message = response; //dropzone sends it's own error messages in string
                else
                    var message = response.message;

                $('.dropzone').append(message);
            },
            paramName: "file"
        });

        // Hide the total progress bar when nothing's uploading anymore
        banner_dropzone.on("queuecomplete", function(progress) {
            window.location.reload();
        });
		
		$(".banner-img-preview .controls .modify-image").click(function()
		{
			var imgPreview = $(this).parents(".banner-img-preview");
			var msg = "";
			
			$.get("banner/banner_image_modify_form/" + imgPreview.attr("data-bannerid"), function(response)
				{
					msg = response;
					
					var modal = bootbox.dialog(
					{
						message: msg,
						title: "Edit Image",
						buttons:
						{
							save:
							{
								label: "Save",
								className: "btn-primary",
								callback: function()
								{
									//$("#modify-image-form").submit();
									
									$.post("banner/modify_banner_image",
									{
										_token: $("#modify-image-form input[name='_token']").val(),
										id: imgPreview.attr("data-bannerid"),
										url: $("#modify-image-form input[name='url']").val(),
										sort: $("#modify-image-form input[name='sort']").val(),
										enable: $("#modify-image-form input[name='enable']").is(":checked")
									}, function(response)
									{
										if(response == "success")
										{
											window.location.reload();
										}
									});
								}
							},
							close:
							{
								label: "Close",
								className: "btn-default"
							}
						},
						closeButton: false,
						onEscape: function()
						{
							modal.modal("hide");
						}
					});
				});
		});
		
		$(".banner-img-preview .controls .delete-image").click(function()
		{
			var imgPreview = $(this).parents(".banner-img-preview");
			
			var modal = bootbox.dialog(
			{
				message: "Confirm delete banner image?",
				title: "Delete Image",
				buttons:
				{
					save:
					{
						label: "Delete",
						className: "btn-danger",
						callback: function()
						{
							$.get("banner/delete_banner_image/" + imgPreview.attr("data-bannerid"), function(response)
							{
								if(response == "success")
								{
									window.location.reload();
								}
							});
						}
					},
					close:
					{
						label: "Cancel",
						className: "btn-default"
					}
				},
				closeButton: false,
				onEscape: function()
				{
					modal.modal("hide");
				}
			});
		});
		$(".banner-img-preview .content > img").click(function()
		{
			$(".banner-img-popup").fadeIn(350);
			$(".banner-img-popup .content > img").attr("src", $(this).attr("src"));
		});
		
		$(".banner-img-popup .content .btn-close").click(function()
		{
			$(".banner-img-popup").fadeOut(350);
		});
		
		$(".banner-img-popup").click(function(e)
		{
			if(this == e.target) $(this).fadeOut(350);
		});
	});
</script>

<div class="banner-img-popup">
	<div class="content">
		<i class="fa fa-window-close btn-close"></i>
		<img src="img/banner/banner4.jpg" />
	</div>
</div>

<!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
	<!-- Content Header (Page header) -->
	<div class="content-header">
	  <div class="container-fluid">
		<div class="row mb-2">
		  <div class="col-sm-6">
			<h1 class="m-0 text-dark">Banner</h1>
		  </div><!-- /.col -->
		</div><!-- /.row -->
	  </div><!-- /.container-fluid -->
	</div>
	<!-- /.content-header -->

	<!-- Main content -->
	<div class="content">
	  <div class="container-fluid">
		<div class="row">
		  <div class="col-lg-12">
			<div class="card card-primary card-outline">
			  <div class="card-body">
				<form method="POST" action="banner/banner_image_upload" class="dropzone banner_dropzone" enctype="multipart/form-data">
					{!! csrf_field() !!}
				</form>
				<span style="float: right;">Max image size: 8MB</span>
				
				<div class="row" style="padding-top: 1.5rem;">
					@foreach($banner_images as $key=>$value)
						<div class="col-md-3 banner-img-preview" data-bannerid="{{ $value->id }}">
							<div class="content">
								<img src="{{ $value->url }}">
								
								<span class="controls">
									<i class="fa fa-edit modify-image"></i>&nbsp;
									<i class="fa fa-trash delete-image"></i>
									
									@if($value->enable == "0")
										<span style="float: right;font-size: 1rem;font-weight: bold;color: red;">Disabled</span>
									@endif
								</span>
							</div>
						</div>
					@endforeach
				</div>
			  </div>
			</div><!-- /.card -->
		  </div>
		  <!-- /.col-md-6 -->
		  
		</div>
		<!-- /.row -->
	  </div><!-- /.container-fluid -->
	</div>
	<!-- /.content -->
  </div>
  <!-- /.content-wrapper -->
@endsection