<?php

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

?>

<link rel="stylesheet" href="/static/css/jquery.datetimepicker.css"/>
<script src='/static/js/jquery.datetimepicker.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: 696px !important; width: 696px !important; height: 235px !important; }*/
   .btn { padding: 15px 40px; min-width:150px; }
   .form .row-item .lbl { font-weight:300; }
   
    div.cr-boundary { 
        background:#000 url(<?php if($cat) { echo "" .$cat['image']. ""; } else { echo "" . $def . ""; } ?>) no-repeat center center; 
        background-size: auto 100%;
    }   
	.btn-black { }
	.form .row-item .btn {
		margin-left:5px;
		margin-right: 5px; 
		width:90%;
		display:block;
		min-width:200px;
	}
 
/* ###################################################### */
/* ####### 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()
{
    $(".datepicker").datetimepicker({
        hours24: true,
        format: 'Y-m-d H:i',
        formatTime: 'H:i',
        datepicker: true,
        timepicker: true,
        timepickerScrollbar: true,
        step: 30        
    });
    
        //hours12: true,
        //format: 'Y-m-d hh:mm A',
        //formatDate: 'Y-m-d hh:mm A',
        //datepicker: true,
        //timepicker: true,
        //step: 30,
        //showMeridian:true    

    $(".timepicker").datetimepicker({
        hours12: true,
        format: 'h:i A',
        formatTime: 'h:i',
        timepicker: true,
        datepicker: false,
        timepickerScrollbar: false,
        step: 30
    });
});
</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 ($cat) {
            echo "Edit";
			$def = "/static/images/placeholder_sqcat.jpg";
			//onerror="this.src='/static/images/placeholder_sqcat.jpg'"
        } else {
            echo "Add";
            $def = "/static/images/placeholder_sqcat.jpg";
        }
        
        ?> Category</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;">
                    <img src="<?php if($cat) { echo "" .$cat['image']. ""; } else { echo "" . $def . ""; } ?>" 
					onerror="this.src='/static/images/placeholder_sqcat.jpg'" style="height:auto; width:100%;" alt="CatImg" />  
                    <p class="rs description-input"></p>
                </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;">
                      <strong>Img Path:</strong> <?= $cat['image'] ?>
                </div>
                
				<label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Order:</label>
				<div class="val" style="margin-left:0px;">
					<input class="txt" type="text" name="order_num" value="<?= $cat['order_num'] ?>" >
					<p class="rs description-input">sort order</p>
				</div>                 
                
                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Name:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="name" value="<?= $cat['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">Hide?</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_excluded = !empty($cat['is_excluded']) ? " checked='checked'" : ""; 
                            $is_exclude = isset($cat['is_excluded']) ? 1 : 0;                            
                        ?>
                         <label class='switch'>                           
                           <input class='' id='' data-toggle='toggle' type='checkbox' name="is_excluded"<?= $is_excluded ?> /><span class='sliderr round'></span>
                         </label>                                          
                    </div>                         
                    <div class="clear"></div>                                                   
                
                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Square ID:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="square_id" value="<?= $cat['square_id'] ?>" readonly style="background:#ccc;">
                    <p class="rs description-input"></p>
                </div>
                
                 <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">ID:</label>
                <div class="val" style="margin-left:0px;">
                    <input id="eventid" class="txt" type="text" name="id" value="<?= $cat['id'] ?>" readonly style="background:#ccc;">
                    <p class="rs description-input"></p>
                </div>      
                <br /><br />
				<center>
					<input type="submit" style="font-weight:300" class="btn btn-black" />
					<br />
					<input type="button" value="Cancel" class="btn btn-black" onclick="location = '/admin/'" />
					<br /><br />
					<a href="/admin/">&laquo; Back to Main Admin</a> |
					<a href="/admin/dash">New Admin &raquo;</a>							
				</center>		
				<br /><br /><br /><br />
				</form>         
                
            </div>
        </div><!-- LEFT SIDE OF 6 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_cat&edit=<?= $cat['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! 
					<input type="hidden" id="imagebase64" name="imagebase64" placeholder="base64...">
                    </center>
                </div>      
                <div class="clear"></div>
            </form>
            </div>
        </div><!-- 6 -->
        <div class="clear"></div>
    </div><!-- 12 -->
</div><!-- HOME -->

<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/squarecatCropped"

			//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
			});
		});
	}); // DOC READY ENDS
</script>

<?php

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

?>