<style>
  .pin_pad {
    width: 30%;
  	height:70px;
  	line-height:70px;
  	text-align:center;
  	background:#54A5AF;
  	font-size:20px;
  	color:white;
  }
  .bottom{
  	margin-bottom: 1px;
  }
  .left{
  	margin-left:1px;
  }
  .orange{
  	 background-color:#FF7F50;
  }
  .purple {
  	background-color:#7a62d3;
  }
</style>

<div class="row">
    <div class="col-md-4 col-sm-6 col-md-offset-4 col-sm-offset-3">
        <%= simple_form_for(@login_form, url: emp_login_update_path, method: "PATCH") do |f| %>
          <div class="card">
                <div class="content" style="margin:10px">
                    <div class="form-group">
                      <%= f.input :emp_id,as: :hidden, label: "Access PIN", required: false, class: "form-control" %>

                        <%= f.input :password, label: "Access PIN", required: false, class: "form-control" %>
                    </div>
                </div>
                <div class="content row" style="padding-left:10px;margin-left:10px; margin-top:0px; text-align:center">
                  <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 orange" data-value="CLR">CLR</div>
                  <div class="pin_pad left" data-value="8">0</div>
                  <div class="pin_pad left purple" data-value="ENT">ENT</div>
                </div>
              </div>
                <div class="footer text-center" style="margin:10px">

                </div>

            </div>

      <% end %>
    </div>
</div>

<script type="text/javascript">
$(document).on('turbolinks:load', function() {
  $(".pin_pad").click(function(event){
    event.preventDefault();
    console.log($(this).data("value"));
    var value = $(this).data("value");

    if (value == "CLR") {
      $("#login_form_password").val("");
    } else if(value == "ENT") {
      $("#new_login_form").submit();
    } else {
      var old_value = $("#login_form_password").val();
      $("#login_form_password").val(old_value + value);
    }
  });
});
</script>
