<?php
require_once '../lib/Kendo/Autoload.php';
?>

<?php

$position = new \Kendo\UI\NotificationPosition();
$position->pinned(true);
$position->top(30);
$position->right(30);

$infoTemplate = new \Kendo\UI\NotificationTemplate();
$infoTemplate->type('info');
$infoTemplate->templateId('emailTemplate');

$errorTemplate = new \Kendo\UI\NotificationTemplate();
$errorTemplate->type('error');
$errorTemplate->templateId('errorTemplate');

$uploadSuccess = new \Kendo\UI\NotificationTemplate();
$uploadSuccess->type('upload-success');
$uploadSuccess->templateId('successTemplate');

$notification = new \Kendo\UI\Notification('notification');
$notification->position($position);
$notification->autoHideAfter(0);
$notification->stacking("down");
$notification->addTemplate($infoTemplate);
$notification->addTemplate($errorTemplate);
$notification->addTemplate($uploadSuccess);

echo $notification->render();

?>

<span id="notification" style="display:none;"></span>

<div class="demo-section k-content" style="text-align: center;">

    <h4>Show notification:</h4>
    <p>
        <button id="showEmailNotification" class="k-button">Email</button><br />
        <button id="showErrorNotification" class="k-button">Error</button><br />
        <button id="showSuccessNotification" class="k-button">Upload Success</button>
    </p>
    <h4>Hide notification:</h4>
    <p>
        <button id="hideAllNotifications" class="k-button">Hide All Notifications</button>
    </p>

</div>

<script id="emailTemplate" type="text/x-kendo-template">
  <div class="new-mail">
    <img src="../content/web/notification/envelope.png" />
    <h3>#= title #</h3>
    <p>#= message #</p>
  </div>
</script>

<script id="errorTemplate" type="text/x-kendo-template">
  <div class="wrong-pass">
    <img src="../content/web/notification/error-icon.png" />
    <h3>#= title #</h3>
    <p>#= message #</p>
  </div>
</script>

<script id="successTemplate" type="text/x-kendo-template">
  <div class="upload-success">
    <img src="../content/web/notification/success-icon.png" />
    <h3>#= message #</h3>
  </div>
</script>

<script>
  $(document).ready(function() {

  var notification = $("#notification").data("kendoNotification");

  $("#showEmailNotification").click(function(){
    notification.show({
      title: "New E-mail",
      message: "You have 1 new mail message!"
    }, "info");
  });

  $("#showErrorNotification").click(function(){
    notification.show({
      title: "Wrong Password",
      message: "Please enter your password again."
    }, "error");
  });

  $("#showSuccessNotification").click(function(){
    notification.show({
      message: "Upload Successful"
    }, "upload-success");
  });

  $("#hideAllNotifications").click(function(){
    notification.hide();
  });

  });
</script>

<style>
   .demo-section p {
        margin: 3px 0 20px;
        line-height: 50px;
    }
    .demo-section .k-button {
        width: 250px;
    }

    .k-notification {
        border: 0;
    }


    /* Info template */
    .k-notification-info.k-group {
        background: rgba(0%,0%,0%,.7);
        color: #fff;
    }
    .new-mail {
        width: 300px;
        height: 100px;
    }
    .new-mail h3 {
        font-size: 1em;
        padding: 32px 10px 5px;
    }
    .new-mail img {
        float: left;
        margin: 30px 15px 30px 30px;
    }

    /* Error template */
    .k-notification-error.k-group {
        background: rgba(100%,0%,0%,.7);
        color: #ffffff;
    }
    .wrong-pass {
        width: 300px;
        height: 100px;
    }
    .wrong-pass h3 {
        font-size: 1em;
        padding: 32px 10px 5px;
    }
    .wrong-pass img {
        float: left;
        margin: 30px 15px 30px 30px;
    }

    /* Success template */
    .k-notification-upload-success.k-group {
        background: rgba(0%,60%,0%,.7);
        color: #fff;
    }
    .upload-success {
        width: 240px;
        height: 100px;
        padding: 0 30px;
        line-height: 100px;
    }
    .upload-success h3 {
        font-size: 1.7em;
        font-weight: normal;
        display: inline-block;
        vertical-align: middle;
    }
    .upload-success img {
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
    }
</style>