<?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; }*/
   /*.cr-viewport.cr-vp-square { max-width:696px !important; width:696px !important; height:390px !important; }*/
   
    div.cr-boundary { 
        background:#000 url(<?php if($reward) { echo "" .$reward['image']. ""; } else { echo "" . $def . ""; } ?>) no-repeat center center; 
        background-size: auto 100%;
    }   
   
   .btn { padding: 15px 40px; min-width:150px; }
   .form .row-item .lbl { font-weight:300; }
</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;"><?php
        
        if ($reward) {
            echo "Edit";
        } else {
            echo "Add";
            $def = "static/uploads/logos/placeholder.jpg";
        }
        
        ?> Reward</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%;">
                    <!--<img src="<?php if($reward) { echo "" .$reward['image']. ""; } else { echo "" . $def . ""; } ?>" style="height:auto; width:100%;" />-->
					<img src="<?php
					if ($reward) {
						echo "" .$reward['image']. ""; } else {
						echo "" . $def . ""; } ?>" onerror="this.src='/static/client/square-reward-img.png'"
						style="height:auto; width:100%; max-height:150px;" />
					
                        <!--<img src="/static/client/square-reward-img.png" title="Square Reward" style="height:150px;" />-->
                    <p class="rs description-input"></p>
                </div>      
                    
                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;"></label>
                
                <div style="font-weight:300; color:#000; text-align:left; background:none;">
                    Recommended Size: 700(w)x394(h) pixels
                </div>
                <br />
                <div style="font-weight:300; color:#000; font-size:11px; word-wrap: break-word;">
                      <?= $reward['image'] ?>
                </div>
                <br />
                
                <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="<?= $reward['name'] ?>" >
                    <p class="rs description-input"></p>
                </div>
                
                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Stars/Points:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="stars" value="<?= $reward['stars'] ?>">
                    <p class="rs description-input"></p>
                </div>                  
                
                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Definition:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="definition" value="<?= $reward['definition'] ?>" >
                    <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="<?= $reward['id'] ?>" readonly style="background:#ccc;">
					<p class="rs description-input"></p>
				</div>   
                
            </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;">
	   		<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/?reward&edit=<?= $reward['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!
	   			</center>
	   		</div>
	   		<div class="clear"></div>
	   	</div>
	   </div><!-- 6 -->
	   <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 /><br /><br />
	   </form>
    </div><!-- 12 -->
</div><!-- HOME -->

<script type="text/javascript">
$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]);
});
 

$('.upload-result').on('click', function (ev) {

    var id = $("#eventid").val();
    var url = "admin/editRewards&edit=" + id;
    
	//alert('Woorks and ID: ' + id);
    
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {

        $.ajax({
            url: "admin/rewardCropped",
            type: "POST",
            data: {"image": resp, 
                    "edit": id
            },
            success: function (data) {
				alert('Your cropped image is uploading...');
//                html = '<img src="' + resp + '" />';
//                $("#upload-demo-i").html(html);
//                $("#idtext").html(id);
//                $('#imgpreview').load(document.URL +  ' #imgpreview');
            }
        });
    });
});

</script>

<?php

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

?>