<script type="text/javascript" src="{{ asset('js/jquery-1.11.3.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/tether.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('jcrop/js/jquery.Jcrop.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('jcrop/js/jquery.color.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/dropzone/dropzone.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ asset('jcrop/css/jquery.Jcrop.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('css/dropzone/dropzone.css')}}">
<link rel="stylesheet" type="text/css" href="{{ asset('js/dropzone/dist/min/basic.min.css')}}">


<script>
	$(document).ready(function(){
	Dropzone.options.uploadImg = {
		
	   acceptedFiles : "image/*",
	   maxFiles: 1,
	   init: function() {
	  this.on("maxfilesexceeded", function(file){
	   this.removeAllFiles();
	   this.addFile(file);
	  });
	  this.on("thumbnail", function(file) {
		if (file.width < 10 || file.height < 10) {
		file.rejectDimensions()
		}
		else {
	   file.acceptDimensions();
		}
	  });
	  this.on('success', function(file, response) {
	   $("#preloadview").show();
	   $("#mydataone").hide().html(response);
		setTimeout(function(){
		  $("#preloadview").hide();
		  $("#mydataone").show();
		  Dropzone.discover();
		   }, 500);
		});
	   },
	   accept: function(file, done) {
	  file.acceptDimensions = done;
	  file.rejectDimensions = function() { done("Upload a JPG/GIF/PNG image with minimum dimensions of 10 X 10px (Width/Height)."); };
	   }
	 };

	});
</script>

<style>
	.closecolorbox {
		position: absolute;
		top: 15px;
		right: 20px;
		font-family: lato;
		font-size: 20px;
		color: #3b3e44;
	}
	.dropzoneheader h4 {
		font-size: 25px;
		margin: 0;
		font-family: lato;
		margin-bottom: 20px;
		color: #3b3e44;
	}
	#drphide {
		padding: 20px;
	}
	.dropzone.dz-clickable {
		cursor: pointer;
		background: #e1dede9e;
		border: none;
		position: relative;
		border-radius: 8px;
		font-family: lato;
		font-size: 14px;
		color: #00000078;
	}
	.dropzone::before {
		position: absolute;
		content: "";
		width: calc(100% - 12px);
		height: calc(100% - 12px);
		border: 1px dashed #26126f66;
		left: 6px;
		top: 5px;
		border-radius: 8px;
	}
	.dropzone {
		padding: 20px 30px 40px;
	}
	.panel-heading h4 {
		font-size: 21px;
		font-family: lato;
		margin: 0;
		margin: 10px 0 20px;
		color: #3b3e44;
	}
	.btn.btn-primary , .btn.btn-default {
		background: #26126f;
		border: 1px solid #26126f;
		box-sizing: border-box;
		border-radius: 4px;
		padding: 7px 15px;
		font-weight: 400;
		font-size: 11px;
		line-height: 16px;
		text-align: center;
		text-transform: uppercase;
		color: #FFFFFF;
		transition: all ease .6s;
		margin-right: 3px;
		position:relative;
		z-index:99;
	}
	.btn.btn-default {
		background: transparent;
		border: 1px solid #26126f;
		color: #26126f;
	}
	.btn.btn-primary:hover{
		background: transparent;
		border: 1px solid #26126f;
		color: #26126f;
	}
	.btn.btn-default:hover {
		background: #26126f;
		color: #fff;
	}
	.dz-default.dz-message {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 !important;
	}
	
</style>


<div id="preloadview" class="prelod" style="display:none;">
<img src="<?php echo url('public/img/twppre.gif'); ?>">
</div>
<div id="mydataone">
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Crop & Upload</title>

    </head>
    <body class="cropwrp">

    <style>
	.prelod {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: rgba(0, 0, 0, 0);
    background-image: url("<?php echo url('public/img/twppre.gif'); ?>");
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: auto auto;
    display: block;
    height: 35px;
    width: 35px;
}
</style>

	<script>
	    function closeColorBox(){
		parent.$.fn.colorbox.close();
	    }


	    jQuery(function($){
		 var jcrop_api;

		$('#target').Jcrop({
		    boxWidth: 375,
		    	aspectRatio: <?php echo $data['imageSizes']["width"];?>/<?php echo $data['imageSizes']["height"];?>,
		    	minSize: [ <?php echo $data['imageSizes']["width"];?>, <?php echo $data['imageSizes']["height"];?> ],
		    	setSelect: [ 0, 0, <?php echo $data['imageSizes']["width"];?>, <?php echo $data['imageSizes']["height"];?> ],
		    allowSelect: false,
		    onChange:   attachCoords,
		    onSelect:   attachCoords,

		},function(){
		  jcrop_api = this;
		});
	    });


	    function attachCoords(c){
	      $('#x1').val(c.x);
	      $('#y1').val(c.y);
	      $('#x2').val(c.x2);
	      $('#y2').val(c.y2);
	      $('#w').val(c.w);
	      $('#h').val(c.h);
	    };

	$(document).ready(function(){
		$("#preloaddiv").html('');
			$("#firstsub").click(function(){
				$("#preloaddiv").html('<div class="preInnr">Please wait while we upload…<span class="prelod cuspreNW"></span></div>');
			});

	});
	function withoutcrops(){
		 $('#withoutcrop').val('yes');
		  $('#cropcreate').submit();
	}
	</script>

	<div class="UPerror">{{ $data['error'] }}</div>

	<div id="drphide">
	@if($data['view'] == 1)
		<div class="dropzoneheader"><h4 class="modal-title">Upload an image</h4><a class="closecolorbox" onclick="closeColorBox()">x</a></div>
	<form method="POST" action="{{ url('crop/'.$data['type']) }}" class="edit-form dropzone" id="uploadImg" enctype="multipart/form-data">
    @csrf	
		<div class="fallback">
		 <input name="img" type="file" />
		</div>
		<input type="hidden" id="uldoctypeimage" name="doctype" value=""/>
		 <input type="hidden" name="fileupload" value="1"/>
		 <input type="hidden" name="imtype" value="{{ $data['type'] }}"/>
		  <input type="hidden" name="cropview" value="{{ $data['cropview'] }}"/>
		 <input type="hidden" id="uldoctypeimage" name="doctype" value=""/>
   </form>
   </div>



			<?php /* <input type="hidden" name="fileupload" value="1"/>
			 <input type="hidden" name="imtype" value="{{ $type }}"/>
			<div class="fallback">
				<input name="myfile" type="file" />
			</div>
			<input type="hidden" id="uldoctypeimage" name="doctype" value=""/> */ ?>

	@endif


    @if($data['view']==2)

    <form method="POST" action="{{ url('crop/'.$data['type']) }}" id="cropcreate" enctype="multipart/form-data">
    @csrf

		<input type="hidden" name="thumbnail" value="1" />
		<input type="hidden" id="x1" name="x1" value="0"/>
		<input type="hidden" id="y1" name="y1" value="0"/>
		<input type="hidden" id="x2" name="x2" value="0"/>
		<input type="hidden" id="y2" name="y2" value="0"/>
		<input type="hidden" id="w" name="w" value="0"/>
		<input type="hidden" id="h" name="h" value="0"/>
		<input type="hidden" name="imagekey" value="{{ $data['imagekey'] }}" />


		<div class="panel panel-default">
		    <div class="panel-heading">
		      <h4 class="modal-title">Upload an image and crop</h4>
		    </div>

		    <div class="panel-body">
			  <img src="{{ $data['imageLink'] }}" id="target" alt="Crop" />
		    </div>

		    <left class="upboxbtnwrp" style="padding: 0 15px;">

             @if($data['cropview']==1)
				 <p class="alert alert-warning tc"></p>
               <button class="btn btn-primary" type="button" onClick="withoutcrops()">Skip Crop</button>
               <input type="hidden" name="withoutcrop" value="no" id="withoutcrop"/>
				   <button class="btn btn-primary" type="submit">Crop</button>
               @else
               <button class="btn btn-primary" type="submit">Upload</button>
             @endif
             <button class="btn btn-default" type="button" onClick="closeColorBox();">Cancel</button>

			</left>

		    <br/>
		</div>
	   </form>

	@endif

	 @if($data['view']==3)
	 	@if( $data['type'] == 'logo')
		<script>
		    parent.logoImage('{{ $data['imagekey'] }}','{{ $data['imagePath'] }}');
		    parent.$.fn.colorbox.close();
		</script> 	
		
		@elseif( $data['type'] == 'bg')
		<script>
		    parent.bgImage('{{ $data['imagekey'] }}','{{ $data['imagePath'] }}');
		    parent.$.fn.colorbox.close();
		</script>
		@elseif( $data['type'] == 'category')
		<script>
		    parent.categoryImage('{{ $data['imagekey'] }}','{{ $data['imagePath'] }}');
		    parent.$.fn.colorbox.close();
		</script>
		@elseif( $data['type'] == 'thumbnail')
		<script>
		    parent.thumbnailImage('{{ $data['imagekey'] }}','{{ $data['imagePath'] }}');
		    parent.$.fn.colorbox.close();
		</script>
		@elseif( $data['type'] == 'news')
		<script>
		    parent.newsImage('{{ $data['imagekey'] }}','{{ $data['imagePath'] }}');
		    parent.$.fn.colorbox.close();
		</script>
		@else
		<script>
		    parent.profileImage('{{ $data['imagekey'] }}','{{ $data['imagePath'] }}');
		    parent.$.fn.colorbox.close();
		</script>
	    	
		@endif
		@endif

    </body>
</html>
</div>