<?php

include('views/_header_shop.tpl.php');

?>

<link rel="stylesheet" href="/static/css/jquery.datetimepicker.css"/>
<script src='/static/js/jquery.datetimepicker.js'></script>

<!--THIS IS CONFLICTING WITH THE TIME PICKER. I THINK I MAY HAVE BEEN USING IT FOR THE CROPPER
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>-->

<script src="/3rdparty/croppie/croppie.js"></script>
<link rel="stylesheet" href="/3rdparty/croppie/croppie.css">

<style>
    #mmen { display:none; }
    .spacer { padding-top: 35px; }
    button.btn.btn-success.upload-result { background:#325fac; }
   /*.cr-viewport.cr-vp-square { max-width:384px !important; width:384px !important; height:250px !important; }*/
  /* Reduce the width and height by 4px */
  /* .cr-viewport.cr-vp-square { max-width: 300px !important; width: 300px !important; height: 300px !important; } */
   /*.cr-viewport.cr-vp-square { max-width: 696px !important; width: 696px !important; height: 235px !important; }*/
   .btn { padding: 15px 40px; min-width:150px; }
   .form .row-item .lbl { font-weight:300; }
   
   hr {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75), rgba(128, 128, 128, 0));
    width: 85%;
    }
    
    div.cr-boundary { 
        background:#000 url(<?php if($loc) { echo "" .$loc['image']. ""; } else { echo "" . $def . ""; } ?>) no-repeat center center; 
        background-size: auto 100%;
    }
    
    .textareaexample {
		font-size:15px; 
		background:#fff; 
		color:#000;
		min-height:170px;
		line-height:23px;
		border: 1px solid #d9d9d9;
		margin-bottom: 3px;
		padding: 8px 10px;
		background: #fff;
		max-width: 350px;
		width: 98%;
		border-radius: 4px;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		box-shadow: inset 0 0 0 rgb(0 0 0 / 0%), 0 0 0 rgb(0 0 0 / 0%);
		-moz-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(0, 0, 0, 0);
		-webkit-box-shadow: inset 0 0 0 rgb(0 0 0 / 0%), 0 0 0 rgb(0 0 0 / 0%);
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		transition: border linear 0.2s, box-shadow linear 0.2s;
		-o-transition: border linear 0.2s, box-shadow linear 0.2s;
		-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
		-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;    	
    }
   
/* ############################################### */
/* ####### The Switch - the box around the slider ####### */
/* ############################################### */

.switch {
  position: relative;
  display: inline-block;
  width: 60px !important;
  height: 32px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.sliderr {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.sliderr:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 28px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .sliderr {
  background-color: #98cb54;
}

input:focus + .sliderr {
  box-shadow: 0 0 1px #98cb54;
}

input:checked + .sliderr:before {
  -webkit-transform: translateX(28px);
  -ms-transform: translateX(28px);
  transform: translateX(28px);
}

/* Rounded sliders */
.sliderr.round {
  border-radius: 32px; -moz-border-radius: 32px; -webkit-border-radius: 32px;
}

.sliderr.round:before {
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  
}
/* ############################################### */
/* ##############     The Switch ENDS     ############## */
/* ############################################### */   
</style>

<script type="text/javascript">
$(document).ready(function(){ 
    $(".timepicker").datetimepicker({
        //hours12: false,
        format: 'H:i A',
        formatTime: 'h:i A',
        timepicker: true,
        datepicker: false,
        timepickerScrollbar: true,
        step: 15
    });
});
</script>

 <div class="home-feature-category" style="background:none; border:none;">
    <div class="container_12 clearfix" style="background:none;">
    	<div class="grid_4 marked-category" style="background:none; margin-top:10px; overflow:hidden">

        <h1 style="margin-bottom:0px;"><a href="/admin/">&laquo; Back</a> | <?php        
            if ($loc) {
                echo "Edit";
				$def = "/static/images/placeholder_sqcat.jpg";
            } else {
                echo "Add";
                $def = "/static/images/placeholder_sqcat.jpg";
            }
            
            ?> Location
        </h1>

		<form method="post" class="form form-profile" enctype="multipart/form-data" style="padding:10px 0px 0px;">
            <div class="row-item clearfix" style="padding-bottom:10px;">
                <!--<label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Image:</label>-->
                <div id="imgpreview"  class="val" style="margin-left:0px; margin-bottom:10px; width:100%; background:#ccc; min-height:124px;">
                    <img src="<?php if($loc) { echo "" .$loc['image']. ""; } else { echo "" . $def . ""; } ?>" style="height:auto; width:100%;" />  
                </div>      

                <div style="font-weight:300; color:#aaa; text-align:center; background:none;">
                    <!-- Recommended Size: 750(w)x256(h) pixels @ 2X resolution &amp; 375x128 @ 1x -->
                    Recommended Size: 600(w)x240(h) pixels @ 2X resolution &amp; 300x120 @ 1X
                </div>

                <div style="font-weight:300; color:#000; font-size:11px; word-wrap: break-word;">
                      <span style="font-weight:800; color:#bbb;">Img Path:</span> <?= $loc['image'] ?>
                </div>
                
                <br /><hr /><br />
                
                <label class="lbl" for="txt_name1" style="text-align:left; width:100px; margin-right:5px; 
                padding-bottom:3px;">Location Name:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="name" value="<?= $loc['name'] ?>" >
                    <p class="rs description-input"></p>
                </div>
                
                <!-- ########### SWITCH FIELD STARTS HERE ########### -->
                <label class="lbl" for="txt_name1" style="text-align:left; width:auto; margin-right:5px; margin-top:12px">Active</label>
                    <div style="display:inline-block; float:left; width:auto; min-width:150px; height:41px; 
                    line-height:41px; background:none; padding-top:9px; margin-top:5px;">
                        <?php 
                            $is_displayed = !empty($loc['is_active']) ? " checked='checked'" : ""; 
                            $is_active = isset($loc['is_active']) ? 1 : 0;                            
                        ?>
                         <label class='switch'>                           
                           <input class='' id='' data-toggle='toggle' type='checkbox' name="is_active"<?= $is_displayed ?> /><span 
                           class='sliderr round'></span>
                         </label>                                          
                    </div>                         
                    <div class="clear"></div>     
                    
					<label class="lbl" for="txt_name1" style="text-align:left; width:100px; margin-right:5px; 
					padding-bottom:3px;">Wait Time:</label>
					<div class="val" style="margin-left:0px;">
						<input class="txt" type="text" name="ave_wait_time" value="<?= $loc['ave_wait_time'] ?>" >
						<p class="rs description-input">average wait time in minutes</p>
					</div>
					                                                             
                
                <h4 style="text-transform: uppercase; font-size:14px; font-weight:800; margin-bottom:0px">
                    Order Ahead Cut-Off Hours<br />
                    <span style="font-weight:300; font-size:12px;">(Start Accepting Orders - Stop Accepting Orders)</span>
                </h4>
                <label class="lbl" for="txt_name1" 
                style="text-align:left; width:100%; display:block; margin-right:5px; background:none; padding-bottom:5px;">Monday:</label>
                <div class="val" style="margin-left:0px; width:100%; background:none;">
                    <?php 
                        $mon_open = date('h:i A', strtotime($loc['mon_open']));
                        $mon_close = date('h:i A', strtotime($loc['mon_close']));
                    ?>
                    <input class="txt timepicker" type="text" name="mon_open" value="<?= $loc['mon_open'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <input class="txt timepicker" type="text" name="mon_close" value="<?= $loc['mon_close'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <p class="rs description-input"><?= $mon_open ?> to <?= $mon_close ?> </p>
                </div>      
                
                <label class="lbl" for="txt_name1" 
                style="text-align:left; width:100%; display:block; margin-right:5px; background:none; padding-bottom:5px;">Tuesday:</label>
                <div class="val" style="margin-left:0px; width:100%; background:none;">
                    <?php 
                        $tue_open = date('h:i A', strtotime($loc['tue_open']));
                        $tue_close = date('h:i A', strtotime($loc['tue_close']));
                    ?>                    
                    <input class="txt timepicker" type="text" name="tue_open" value="<?= $loc['tue_open'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <input class="txt timepicker" type="text" name="tue_close" value="<?= $loc['tue_close'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <p class="rs description-input"><?= $tue_open ?> to <?= $tue_close ?></p>
                </div>   
                
                <label class="lbl" for="txt_name1" 
                style="text-align:left; width:100%; display:block; margin-right:5px; background:none; padding-bottom:5px;">Wednesday:</label>
                <div class="val" style="margin-left:0px; width:100%; background:none;">
                    <?php 
                        $wed_open = date('h:i A', strtotime($loc['wed_open']));
                        $wed_close = date('h:i A', strtotime($loc['wed_close']));
                    ?>                   
                    <input class="txt timepicker" type="text" name="wed_open" value="<?= $loc['wed_open'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <input class="txt timepicker" type="text" name="wed_close" value="<?= $loc['wed_close'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <p class="rs description-input"><?= $wed_open ?> to <?= $wed_close ?></p>
                </div>   
                
                 <label class="lbl" for="txt_name1" 
                style="text-align:left; width:100%; display:block; margin-right:5px; background:none; padding-bottom:5px;">Thursday:</label>
                <div class="val" style="margin-left:0px; width:100%; background:none;">
                    <?php 
                        $thu_open = date('h:i A', strtotime($loc['thu_open']));
                        $thu_close = date('h:i A', strtotime($loc['thu_open']));
                    ?>                        
                    <input class="txt timepicker" type="text" name="thu_open" value="<?= $loc['thu_open'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <input class="txt timepicker" type="text" name="thu_close" value="<?= $loc['thu_close'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <p class="rs description-input"><?= $thu_open ?> to <?= $thu_close ?></p>
                </div>   
                
                 <label class="lbl" for="txt_name1" 
                style="text-align:left; width:100%; display:block; margin-right:5px; background:none; padding-bottom:5px;">Friday:</label>
                <div class="val" style="margin-left:0px; width:100%; background:none;">
                    <?php 
                        $fri_open = date('h:i A', strtotime($loc['fri_open']));
                        $fri_close = date('h:i A', strtotime($loc['fri_close']));
                    ?>                        
                    <input class="txt timepicker" type="text" name="fri_open" value="<?= $loc['fri_open'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <input class="txt timepicker" type="text" name="fri_close" value="<?= $loc['fri_close'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <p class="rs description-input"><?= $fri_open ?> to <?= $fri_close ?></p>
                </div>   
                
                 <label class="lbl" for="txt_name1" 
                style="text-align:left; width:100%; display:block; margin-right:5px; background:none; padding-bottom:5px;">Saturday:</label>
                <div class="val" style="margin-left:0px; width:100%; background:none;">
                    <?php 
                        $sat_open = date('h:i A', strtotime($loc['sat_open']));
                        $sat_close = date('h:i A', strtotime($loc['sat_close']));
                    ?>                        
                    <input class="txt timepicker" type="text" name="sat_open" value="<?= $loc['sat_open'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <input class="txt timepicker" type="text" name="sat_close" value="<?= $loc['sat_close'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <p class="rs description-input"><?= $sat_open ?> to <?= $sat_close ?></p>
                </div>   
                
                 <label class="lbl" for="txt_name1" 
                style="text-align:left; width:100%; display:block; margin-right:5px; background:none; padding-bottom:5px;">Sunday:</label>
                <div class="val" style="margin-left:0px; width:100%; background:none;">
                    <?php 
                        $sun_open = date('h:i A', strtotime($loc['sun_open']));
                        $sun_close = date('h:i A', strtotime($loc['sun_close']));
                    ?>                        
                    <input class="txt timepicker" type="text" name="sun_open" value="<?= $loc['sun_open'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <input class="txt timepicker" type="text" name="sun_close" value="<?= $loc['sun_close'] ?>" 
                    style="display:inline-block; width:48%; margin-right:1%;">
                    <p class="rs description-input"><?= $sun_open ?> to <?= $sun_close ?></p>
                </div>      
                
                <br />                                                                                         
                
                <label class="lbl" for="txt_name1" style="text-align:left; width:100px; margin-right:5px;">Square ID:</label>
                <div class="val" style="margin-left:0px;">
                    <input id="eventid" class="txt" type="text" name="id" value="<?= $loc['id'] ?>" readonly style="background:#ccc;">
                    <p class="rs description-input"></p>
                </div>     
                
				<label class="lbl" for="txt_name1" style="text-align:left; width:100px; 
				margin-right:5px; padding-bottom:3px;">Hours:</label>
				<div class="val" style="margin-left:0px;">
				
					<textarea class="txt" type="text" name="hours"
					style="font-size:15px; background:#fff; min-height:150px; line-height:23px"><?= $loc['hours'] ?></textarea>
				
					<p class="rs description-input">just a user-friendly preview for main shop page</p>
				</div>    



				<label class="lbl" for="txt_name1" style="text-align:left; width:100px; 
				margin-right:5px; padding-bottom:3px;">Example:</label>
				<br />
				<div class="val" style="margin-left:0px; margin-top:10px">
				
					<div class="textareaexample">
						Monday 11:00 am - 5:00 pm,<br />
						Tuesday 11:00 am - 10:00 pm,<br />
						Wednesday 11:00 am - 10:00 pm,<br />
						Thursday 11:00 am - 10:00 pm,<br />
						Friday 11:00 am - 10:00 pm,<br />
						Saturday 11:00 am - 10:00 pm,<br />
						Sunday 11:00 am - 9:00 pm<br />
						<br />
					</div>
					<div class="clear"></div>				
					
				</div>  
				
				<br />
				
				<h4 style="text-transform: uppercase; font-size:14px; font-weight:800; margin-bottom:0px">
					Available Order Dates<br />
					<span style="font-weight:300; font-size:12px;">ie. for Pickup, Delivery, etc.</span>
				</h4>				
				
				<!-- ########### SWITCH FIELD STARTS HERE ########### -->
				<label class="lbl" for="txt_name1" style="text-align:left; width:auto; margin-right:5px; 
				margin-top:12px">Use Specific Open Dates:</label>
				
				<div style="display:inline-block; float:left; width:auto; min-width:150px; height:41px; line-height:41px; background:none; 
				padding-top:9px; margin-top:5px; border-bottom:2px solid #ccc">
				
				<?php
					$use_open_dates = !empty($loc['useopendates']) ? " checked='checked'" : "";
					//$useod_on = isset($loc['useopendates']) ? 1 : 0;
				?>
					<label class='switch'>
						<input class='' id='' data-toggle='toggle' type='checkbox' 
						name="useopendates"<?= $use_open_dates ?> /><span class='sliderr round'></span>
					</label>
					<br />
					<p class="rs description-input" style="line-height:17px; color:#777">Set to OFF to automatically display next 14 days</p>
					
				</div>
				<div class="clear"></div> 
				  				
				<br /><br />
				
				<label class="lbl" for="txt_name1" style="text-align:left; width:200px;
				margin-right:5px; padding-bottom:3px;">Specify Open Dates:</label>
				<div class="val" style="margin-left:0px;">

					<textarea class="txt" type="text" name="open_dates"
						style="font-size:15px; background:#fff; min-height:120px; max-height:120px;
						 line-height:23px"><?= $loc['open_dates'] ?></textarea>

					<p class="rs description-input">ie: 2022-10-07,2022-10-08,2022-10-09, etc.</p>
				</div> 				
                        
        		<!-- END OF ALL FIELDS -->     
        		
				<label class="lbl" for="txt_name1" style="text-align:left; width:200px;
				margin-right:5px; padding-bottom:3px;"></label>
				<div class="val" style="margin-left:0px; background:none;
				box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;">
					<input type="submit" style="font-weight:300; width:98%" class="btn btn-black" />
					<br /><br />
					<input type="button" value="Cancel" class="btn btn-black" onclick="location = '/admin/'"
					style="font-weight:300; width:98%" />
					<br /><br />
					<center>
						<a href="/admin/">&laquo; Back to Main Admin</a> |
						<a href="/admin/dash">New Admin &raquo;</a></center>
				</div> 	        		
				<br /> 
				    
            </div><!-- ROW -->
		</form>
        </div><!-- LEFT SIDE OF 4 COLS -->
     
       <!-- ######################################### -->
       <!-- ############    RIGHT SIDE    ########### -->
       <!-- ######################################### -->
       
        <div class="grid_8 marked-category" style="background:none; margin-top:40px;">      
        	<div style="width:100%; background:none;">  
				<form action="" id="form" method="post">
					<div class="grid_12 text-center" style="background:none; min-height:260px; margin-top:0px;"> 
					    <div id="upload-demo" style="width:auto;"></div>
					</div>  
					<div class="clear"></div>
					<div class="grid_12" style="background:none; margin-top:20px; text-align:center; 
						color:#000; text-shadow:0px 1px 0px #fff; font-size:16px; line-height:24px;">
					    <center>
					    <input type="file" id="upload">
					    <br /><br />
					    <button class="btn btn-success upload-result" style="color:#fff;">Upload Image</button>
					    <br /><br />
					    You can upload &amp; crop images without clicking the submit button (below). 
					    After you upload your image, 
					    simply click this <a href="/admin/?square_loc&edit=<?= $loc['id'] ?>">refresh</a> link. 
					    
					    Note: sometimes it may look 
					    like your image didn&rsquo;t upload - just refresh this page to see if it loads in first! 
						<br /><br />
						<hr />
						<br />
						BULK OPEN/CLOSE TIMES (FOR ADMINS)
						<br /><br />
						<div style="height:auto; background:none; overflow:hidden; color:#bbb;">
							UPDATE `square_locations` SET `mon_open`="00:00:01",`mon_close`="23:59:59",`tue_open`="00:00:01",
							`tue_close`="23:59:59",`wed_open`="00:00:01",`wed_close`="23:59:59",`thu_open`="00:00:01",
							`thu_close`="23:59:59",`fri_open`="00:00:01",`fri_close`="23:59:59",`sat_open`="00:00:01",
							`sat_close`="23:59:59",`sun_open`="00:00:01",`sun_close`="23:59:59" WHERE is_active < 99
							
							<!--<br /><br />-->
							<input type="hidden" id="imagebase64" name="imagebase64" placeholder="base64...">
						</div>                   
					    </center>
					</div>      
					<div class="clear"></div>
				</form>
			</div>
        </div><!-- 8 -->
        <div class="clear"></div>
<!--            <center>
        		<input type="submit" style="font-weight:300" class="btn btn-black" /> 
            	<br /><br />
            	<input type="button" value="Cancel" class="btn btn-black" onclick="location = '/admin/'" />
            </center>-->
            <br /><br /> 
        <!--</form> was here -->
    </div><!-- CONTIANER 12 ENDS -->
</div><!-- HOME -->

<!-- https://stackoverflow.com/questions/34237020/jquery-plugin-croppie-to-crop-image-error -->

<!-- https://medium.com/analytics-vidhya/crop-image-with-croppie-26146a4b933 -->
<!-- downloaded this full code -->

<script type="text/javascript">
	$(document).ready(function() {
		var $uploadCrop;

		function readFile(input){
			if (input.files && input.files[0]) {
				var reader = new FileReader();
				reader.onload = function (e) {
					$uploadCrop.croppie('bind', {
						url: e.target.result
					});
					$('.upload-demo').addClass('ready');
				}
				reader.readAsDataURL(input.files[0]);
			}
		}

		$uploadCrop = $('#upload-demo').croppie({
			enableExif: true,
			enableOrientation: true,
			viewport: {
				width: 600,
				height: 240,
				type: 'square'
			},
			boundary: {
				width: 735,
				height: 360
			}
		});

		$('#upload').on('change', function () { readFile(this); });
		
		$('.upload-result').on('click', function (ev) {
			
			var site_root   = window.location.origin;   // Returns base URL like https://example.com
			var cropUrl = site_root + "/admin/squarelocCropped"

			//alert('URL: ' + cropUrl);

			var id = $("#eventid").val();			
			
			$uploadCrop.croppie('result', {
				type: 'canvas',
				size: 'original'
			}).then(function (resp) {
				$('#imagebase64').val(resp);
				//$('#form').submit();
				// AJAX BEGINS
				$.ajax({
					url: cropUrl,
					type: "POST",
					data: {"image": resp,
						"edit": id
					},
					success: function (data) {
						alert('Your cropped image is uploading... Refresh/Reload page to see the results.');
						// THESE 3 LINES ARE THE ONES WE WANT TO DISPLAY
						//html = '<img src="' + resp + '" />';
						//$("#imgpreview").html(html);
						$('#imgpreview').load(document.URL +  ' #imgpreview');

						//$("#upload-demo-i").html(html);
						//$("#idtext").html(id);
					},
					error: function (jqXHR, status, err) {
						alert("Local error callback.");
					},
				});					
				// AJAX ENDS
			});
		});
		
//		$('.upload-result').on('click', function (ev) {
//
//			//var pathname = window.location.pathname; // Returns path only (/path/example.html)
//			//var url      = window.location.href;     // Returns full URL (https://example.com/path/example.html)
//			var site_root   = window.location.origin;   // Returns base URL (https://example.com)
//			var cropUrl = site_root + "/admin/squarelocCropped"
//			// The url under $.ajax was: https://preorder.sqdash.co/admin/squarelocCropped
//
//			alert('URL: ' + cropUrl);
//
//			var id = $("#eventid").val();
//
//			//var url = "https://preorder.sqdash.co/admin/?square_loc&edit=" + id;
//			//var url = site_root + "/admin/?square_loc&edit=" + id;
//
//			$uploadCrop.croppie('result', {
//				type: 'canvas',
//				size: 'viewport'
//			}).then(function (resp) {
//
//				$.ajax({
//					url: cropUrl,
//					type: "POST",
//					data: {"image": resp,
//						"edit": id
//					},
//					success: function (data) {
//						alert('Your cropped image is uploading... Refresh/Reload page to see the results.');
//						// THESE 3 LINES ARE THE ONES WE WANT TO DISPLAY
//						//html = '<img src="' + resp + '" />';
//						//$("#imgpreview").html(html);
//						//$('#imgpreview').load(document.URL +  ' #imgpreview');
//
//						//$("#upload-demo-i").html(html);
//						//$("#idtext").html(id);
//					},
//					error: function (jqXHR, status, err) {
//						alert("Local error callback.");
//					},
//				});
//			});
//		});		

	}); // DOC READY ENDS
</script>

<script type="text/javascript">
//	$(document ).ready(function() {
//		var $uploadCrop;
	
//	$uploadCrop = $('#upload-demo').croppie({
//		enableExif: true,
//		enableOrientation: true,
//		viewport: {
//			width: 600,
//			height: 240,
//			type: 'square'
//		},
//		boundary: {
//			width: 735,
//			height: 360
//		}
//	});

//	$('#upload').on('change', function () {
//		var reader = new FileReader();
//		reader.onload = function (e) {
//			$uploadCrop.croppie('bind', {
//				url: e.target.result
//			}).then(function() {
//				console.log('jQuery bind complete');
//			});
//
//		}
//		reader.readAsDataURL(this.files[0]);
//	});


	//});// DOC READY ENDS
</script>

<?php

include('views/_footer.tpl.php');

?>