<?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; }
   .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 = "https://loyaltycard.dev11.com/static/uploads/logos/placeholder.jpg";
			$def = "static/uploads/logos/placeholder.jpg";
        }
        
        ?> Reward</h1>

        <form method="post" class="form form-profile" enctype="multipart/form-data" style="padding:0px 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;">
                    <img src="<?php if($reward) { echo "" .$reward['image']. ""; } else { echo "" . $def . ""; } ?>" style="height:auto; width:100%;" />
                    <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:center; 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;">Title:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="title" value="<?= $reward['title'] ?>" >
                    <p class="rs description-input"></p>
                </div>
                
                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Short:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="short" value="<?= $reward['short'] ?>">
                    <p class="rs description-input"></p>
                </div>                  
                
                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Text:</label>
                <div class="val" style="margin-left:0px;">
                    <textarea class="txt" name="content"><?= $reward['content'] ?></textarea>
                    <p class="rs description-input"></p>
                </div>

                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">QDate:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="artist" value="<?= $reward['artist'] ?>">
                    <p class="rs description-input"></p>
                </div>              

                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Link:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="link" value="<?= $reward['link'] ?>">
                    <p class="rs description-input"></p>
                </div>  

                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Label:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="label" value="<?= $reward['label'] ?>">
                    <p class="rs description-input"></p>
                </div>  

                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Custom:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="custom" value="<?= $reward['custom'] ?>">
                    <p class="rs description-input"></p>
                </div>  

                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Date:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt datepicker" type="text" name="date" value="<?= $reward['date'] ?>" placeholder="<?= date('m/d/Y g:i A') ?>">
                    <p class="rs description-input"></p>
                </div>  

                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">mm:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="mm" value="<?= $reward['mm'] ?>">
                    <p class="rs description-input"></p>
                </div>  

                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">dd:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="dd" value="<?= $reward['dd'] ?>">
                    <p class="rs description-input"></p>
                </div>  

                <label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">day:</label>
                <div class="val" style="margin-left:0px;">
                    <input class="txt" type="text" name="day" value="<?= $reward['day'] ?>">
                    <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'] ?>" disabled>
                    </div>   
                
                <!--<label class="lbl" for="txt_name1" style="text-align:left; width:50px; margin-right:5px;">Img:</label>-->
                <div class="val" style="margin-left:0px; display:none;">
                    <!--<input class="txt" type="file" name="image" >
                    <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;">
                    <center>
                    <input type="file" id="upload">
                    <br /><br />
                    <button class="btn btn-success upload-result" style="color:#fff;">Upload Image</button>
                    </center>
                </div>      
                <div class="clear"></div>
                <br />
                <div class="grid_12" style="background:#eee; display:none;">
                    <div id="upload-demo-i" style="background:#e1e1e1; width:696px; padding:0px; height:390px; margin:0px auto"></div>
                </div>
            </div>
        </div><!-- 6 -->
        <div class="clear"></div>
            
            <br />
            <center>
            <input type="submit" style="font-weight:300" class="btn btn-blue" /> 
            <input type="button" value="Cancel" class="btn btn-black" onclick="location = '/admin/'" />
            </center>
            <br /><br />            
        </form>
    </div><!-- 12 -->
</div><!-- HOME -->

<script type="text/javascript">
$uploadCrop = $('#upload-demo').croppie({
    enableExif: true,
    viewport: {
        width: 700,
        height: 500,
        type: 'square'
    },
    boundary: {
        width: 796,
        height: 490
    }
});


$('#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;
    
    $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {

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

</script>

<?php

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

?>