<!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"> -->

    <%= 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_dashboard">
    <!-- 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>
     <% 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 %>

    <!-- #END# Page Loader -->
    <div class="container">
        <div class="row">
            <div class="col-lg-12_ col-md-12 col-sm-12 col-xs-12 text-center">
                <img src="/image/SX-logo.png" width="150px" height="150px">
                 <p>
                    <small>Version - 1.0.1</small>
                </p>
            </div>
        </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><%= shop_detail.name %></span>
                </div>
            </div>
        </div>
        <div class="row bg-white box">
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 p-t-20 p-l-10 p-r-10 p-b-50 bg-white">
                <div class="row justify-content-center form-group">
                    <input type="text" class="form-control col-4" id="emp_id" placeholder="Employee ID">
                </div>

                <br>
                <div class="card padding-10">
                <div class="card-content card-btn">
                  <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> -->
                       <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-grey left" data-value="CLR">CLR</div>
                    </div>
                  </div>
                 </div>
                 </div>

            </div>
            <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 p-t-20 p-l-10 p-r-10 p-b-50 bg-white">
                <ul class="nav nav-tabs" role="tablist">
                    <% @roles.each do |role| %>
                        <%if role != "administrator" %>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#<%=role%>" role="tab"><b><%=role%></b></a>
                            </li>
                        <% end %>
                    <% end %>

                </ul>

                <div class="tab-content" style="max-height:650px; overflow:auto">

                    <% @roles.each do |role| %>
                        <%if role != "administrator" %>
                            <div class="tab-pane"  id="<%=role%>" role="tabpanel" style="max-height:; overflow:auto">
                                <% @employees.each do |employee| %>
                                    <%if employee.role == role %>
                                        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 empBtn mbl-btn-usrgp" data-formid="#form_<%= employee.emp_id %>" style="float: left;">
                                            <form id="form_<%= employee.emp_id %>" action="<%= emp_login_path(employee.emp_id) %>" method="PATCH">
                                            </form>
                                            <%if employee.image_path.present? %>
                                                <div class="login_dashboard p-card">
                                                    <%= image_tag employee.image_path, :class => "style_image" %>
                                                    <div class="p-name"><b><%=  employee.name%></b>
                                                    </div>
                                                </div>
                                            <% else %>
                                                <div class="login_dashboard p-card">
                                                    <i class="material-icons style_icon">person</i>
                                                    <div class="p-name"><b><%=  employee.name%></b>
                                                    </div>
                                                </div>
                                            <% end %>
                                        </div>
                                    <% end %>
                                <% end %>
                            </div>
                        <% end %>
                    <% end %>
                </div>
            </div>
            <!-- <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2"> </div> -->
        </div>
    </div>
</body>
</html>

<script>


    $(document).ready(function () {
         // for Notificaiotn message
         var placementFrom  = $("#noti").attr('data-placement-from');
         var placementAlign = $("#noti").attr('data-placement-align');
         var animateEnter   = $("#noti").attr('data-animate-enter');
         var animateExit    = $("#noti").attr('data-animate-exit');
         var colorName      = $("#noti").attr('data-color-name');
         var text           = $("#noti").attr('data-message');

         if (text != null || colorName != null){
            showNotification(colorName, text, placementFrom, placementAlign, animateEnter, animateExit);
         }

        $(".empBtn").click(function (event) {
            event.preventDefault();
            var item = $(this).data("formid");
            $(item).submit();
        });

        $('ul.nav.nav-tabs li a').click(function() {
            var bb = $('.nav-item').children()[0];
            $(bb).removeClass('active_tab');
            $(this).parent().addClass('active_tab').siblings().removeClass('active_tab');
        });

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

            if (value == "CLR") {
                $("#emp_id").val("");
            } else if (value == "BAC") {
                window.location.href = "/"
            } else {
                var old_value = $("#emp_id").val();
                $("#emp_id").val(old_value + value);
            }
            if((old_value + value).length == 3){
                if($.isNumeric(old_value + value)){
                    if((old_value + value).length === 3){
                        window.location.href = '/auth/'+(old_value + value);
                    }else{
                        alert("Please Enter Numeric Number");
                    }
                }
            }
        });

        $('#emp_id').keyup(function(e) {
            e.preventDefault();
            var txtVal = this.value;

            if(txtVal!=''){
                if ($.isNumeric(txtVal)) {
                    if( txtVal.length === 3 ) {
                        window.location.href = '/auth/'+txtVal;
                    }
                }else{
                    alert("Please Enter Numeric Number");
                }
            }
        });

        var aa = $('.nav-item').children().attr('href').replace('#','');
        $('#'+aa).addClass('active');
        var bb = $('.nav-item').children()[0];
        $(bb).parent().addClass('active_tab').siblings().removeClass('active_tab');

    });

    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>
