<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <title>SmartSales : Restaurant</title>
  <%= csrf_meta_tags %>
  <!-- Favicon-->
  <link rel="icon" href="/favicon.ico" type="image/x-icon">

  <!-- Google Fonts -->
    <!-- <link href="https://fonts.googleapis.com/css?family=Roboto:400,700&subset=latin,cyrillic-ext" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> -->

    <!-- Bootstrap Core Css -->
    <!-- <link href="plugins/bootstrap/css/bootstrap.css" rel="stylesheet"> -->

    <!-- Waves Effect Css -->
    <!-- <link href="plugins/node-waves/waves.css" rel="stylesheet" /> -->

    <!-- Animation Css -->
    <!-- <link href="plugins/animate-css/animate.css" rel="stylesheet" /> -->

    <!-- Morris Chart Css-->
    <!-- <link href="plugins/morrisjs/morris.css" rel="stylesheet" /> -->

    <!-- Custom Css -->
    <!-- <link href="css/style.css" rel="stylesheet"> -->

    <!-- AdminBSB Themes. You can choose a theme from css/themes instead of get all themes -->
    <!-- <link href="css/themes/all-themes.css" rel="stylesheet" /> -->
    <%= stylesheet_link_tag    'login', media: 'all', 'data-turbolinks-track': 'reload' %>

    <!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> -->
    <%= javascript_include_tag 'login', 'data-turbolinks-track': 'reload' %>
  </head>

  <body class="login-page">
    <!-- Page Loader -->
    <div class="page-loader-wrapper">
      <div class="loader">
        <div class="preloader">
          <div class="spinner-layer pl-red">
            <div class="circle-clipper left">
              <div class="circle"></div>
            </div>
            <div class="circle-clipper right">
              <div class="circle"></div>
            </div>
          </div>
        </div>
        <p>Please wait...</p>
      </div>
    </div>
    <!-- #END# Page Loader -->
    <% flash.each do |type, message| %>
    <%
    if type == "notice"
     color = "alert-success"
   elsif type == "error"
    color = "alert-danger"
  elsif type == "warning"
    color = "alert-warning"
  else
    color = "bg-black"
    end %>

    <p id="noti" class="hidden noti" data-placement-from="top" data-message="<%=message%>" data-placement-align="center"
      data-animate-enter="" data-animate-exit="" data-color-name="<%=color%>" >
    </p>
    <% end %>
    <div class="login-box">
      <div class="logo text-center">
        <img src="/image/SX-logo.png" width="150px" height="150px">
        <p>
          <small>Version - 1.0.1</small>
        </p>
      </div>
      <div class="row">
          <div class="col-lg-12_ col-md-12 col-sm-12 col-xs-12 text-center">
            <div class="current-shop-name">
                <span><%= current_shop.name %></span>
              </div>
          </div>
        </div>
      <%= simple_form_for(@login_form, url: login_path, method: "post") do |f| %>
      <div class="card padding-10">
        <div class="card-header m-l-">
          <div class="row clearfix">
            <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 login_pwd">
              <%= f.input :emp_id, as: :hidden, required: false, class: "form-control" %>

              <%= f.input :password, label: "Access PIN", required: false, class: "form-control" %>

            </div>
            <div class="col-lg-2 col-md-2 col-sm-2 col-xs-10 login_ent">
              <br>
              <span class="input-group-addon enter m-t-25 m-l--25" data-value="ENT" style="cursor: pointer;padding:0.1rem !important;">
                <i class="material-icons">send</i>
              </span>
            </div>
          </div>
        </div>

        <div class="card-content">
          <div class='col-md-12'>
            <div class='row bottom'>
              <div class="pin_pad " data-value="1">1</div>
              <div class="pin_pad left" data-value="2">2</div>
              <div class="pin_pad left" data-value="3">3</div>
            </div>
            <div class='row bottom'>
              <div class="pin_pad" data-value="4">4</div>
              <div class="pin_pad left" data-value="5">5</div>
              <div class="pin_pad left" data-value="6">6</div>
            </div>
            <div class='row bottom'>
              <div class="pin_pad" data-value="7">7</div>
              <div class="pin_pad left" data-value="8">8</div>
              <div class="pin_pad left" data-value="9">9</div>
            </div>
            <div class='row bottom'>
              <!--  <div class="pin_pad bg-grey" data-value="CLR">CLR</div>
               <div class="pin_pad left" data-value="0">0</div>
               <div class="pin_pad left bg-indigo" data-value="ENT">ENT</div> -->
               <% if request.user_agent.include? 'Mobile' %>
                <div class="pin_pad bg-blue-grey" data-value="CLR">CLR</div>
                <div class="pin_pad left" data-value="0">0</div>
                <div class="pin_pad bg-grey left" data-value="ENT">ENTER</div>
               <% else %>
               <div class="pin_pad bg-blue-grey" data-value="BAC">BACK</div>
               <div class="pin_pad left" data-value="0">0</div>
               <div class="pin_pad bg-blue-grey" data-value="CLR">CLR</div>
               <% end %>
            </div>
          </div>
         </div>
        <% end %>
 </div>
 <script type="text/javascript">
  $(document).ready(function () {
    $("#login_form_password").focus();

    $(".pin_pad").click(function (event) {
      event.preventDefault();
      var value = $(this).data("value");

      if (value == "CLR") {
        $("#login_form_password").val("");
      } else if (value == "ENT") {
        $("#new_login_form").submit();
      } else if (value == "BAC") {
        window.location.href = "/"
      } else {
        var old_value = $("#login_form_password").val();
        $("#login_form_password").val(old_value + value);
      }
    });
    $(".enter").click(function (event) {
      event.preventDefault();
      var value = $(this).data("value");

      if (value == "ENT") {
        $("#new_login_form").submit();
      }
    });
  });
  function showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit) {
    if (colorName === null || colorName === '') { colorName = 'bg-black'; }
    if (animateEnter === null || animateEnter === '') { animateEnter = 'animated fadeInDown'; }
    if (animateExit === null || animateExit === '') { animateExit = 'animated fadeOutUp'; }
    var allowDismiss = true;
    $.notify({
      message: text
    },
    {
      type: colorName,
      allow_dismiss: allowDismiss,
      newest_on_top: true,
      timer: 1000,
      placement: {
        from: placementFrom,
        align: placementAlign
      },
      animate: {
        enter: animateEnter,
        exit: animateExit
      },
      template: '<div data-notify="container" class="bootstrap-notify-container alert alert-dismissible {0} ' + (allowDismiss ? "p-r-30" : "") + '" role="alert">' +
      '<button type="button" aria-hidden="true" class="close float-right m-l-20 m-t--5" data-notify="dismiss">×</button>' +
      '<span data-notify="icon"></span> ' +
      '<span data-notify="title">{1}</span> ' +
      '<span data-notify="message">{2}</span>' +
      '<div class="progress" data-notify="progressbar">' +
      '<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>' +
      '</div>' +
      '<a href="{3}" target="{4}" data-notify="url"></a>' +
      '</div>'
    });
  }
  //end Notificaiotn message
</script>
</body>
</html>
