sx-fc/app/views/home/index.html.erb

<!--
<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: login_path, method: "POST") do |f| %>
          <div class="card">
                <h4 class="card-title text-center" style="margin:10px">Login</h4>
                <div class="content" style="margin:10px">
                    <div class="form-group">
                        <%= f.input :emp_id, required: false, autofocus: true, class: "form-control" %>
                    </div>
                    <div class="form-group">
                        <%= f.input :password, required: false, class: "form-control" %>
                    </div>

                </div>
                <div class="footer text-center" style="margin:10px">
                    <%= f.button :submit, "Log in", class: "form-control btn btn-fill btn-warning btn-wd" %>

                </div>

            </div>

      <% end %>
    </div>
</div> -->
<div class="row">
  <div class="col-md-8 col-lg-8">
    <div class="card-columns" style="column-gap: 10px;">

      <% @employees.each do |employee| %>

          <div data-formid="#form_<%= employee.emp_id %>" class="empBtn card card-primary white mb-3 text-center" style="">
            <form id="form_<%= employee.emp_id %>" action="<%= emp_login_path(employee.emp_id) %>" method="PATCH"></form>
            <div class="card-block">
              <h4 class="card-title">
                <%= employee.name %>
              </h4>
              <div class="card-content">
                (<%= employee.emp_id %>)
              </div>
              <div class="card-footer">
                <small><%= employee.role %></small>
              </div>
            </div>
          </div>
      <% end %>
    </div>
  </div>

  <div class="col-md-4 col-lg-4">
    <div class="card">
      <h4 class="card-title text-center">Role Features</h4>
      <!--  <p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p> -->
      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#admin">Administrator
                <span class="glyphicon glyphicon-plus"></span></a>
            </h4>
          </div>
          <div id="admin" class="panel-collapse collapse in">
            <div class="panel-body">
              <ul class="">
                <li class="">All Accept</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#manager">Manager
                <span class="glyphicon glyphicon-plus"></span></a>
            </h4>
          </div>
          <div id="manager" class="panel-collapse collapse">
            <div class="panel-body">
              <ul class="">
                <li class="">All Accept except Membership and Payment Settings</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#supervisor">Supervisor
                <span class="glyphicon glyphicon-plus"></span></a>
            </h4>
          </div>
          <div id="supervisor" class="panel-collapse collapse">
            <div class="panel-body">
              <ul class="">
                <li class="">Void</li>
                <li class="">FOC</li>
                <li class="">Edit</li>
                <li class="">Credit</li>
                <li class="">and Payment</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#cashier">Cashier
                <span class="glyphicon glyphicon-plus"></span></a>
            </h4>
          </div>
          <div id="cashier" class="panel-collapse collapse">
            <div class="panel-body">
              <ul class="">
                <li class="">Orgami Panel except Edit and Void</li>
                <li class="">Sale and Order</li>
                <li class="">and Queue in CRM</li>
              </ul>
            </div>
          </div>
        </div>
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a data-toggle="collapse" data-parent="#accordion" href="#accountant">Accountant
                <span class="glyphicon glyphicon-plus"></span></a>
            </h4>
          </div>
          <div id="accountant" class="panel-collapse collapse">
            <div class="panel-body">
              <ul class="">
                <li class="">Daily Sale Report</li>
                <li class="">Sale Item Report</li>
                <li class="">Receipt No Report</li>
                <li class="">ShiftSale Report</li>
              </ul>
            </div>
          </div>
        </div>
      </div> <!-- end accordion id -->
    </div>
  </div> <!-- end col-md-4 -->
</div>

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

        // Add minus icon for collapse element which is open by default
        $(".collapse.in").each(function () {
            $(this).siblings(".panel-heading").find(".glyphicon").addClass("glyphicon-minus").removeClass("glyphicon-plus");
        });
        
        // Toggle plus minus icon on show hide of collapse element
        $(".collapse").on('show.bs.collapse', function () {
            $(this).parent().find(".glyphicon").removeClass("glyphicon-plus").addClass("glyphicon-minus");
        }).on('hide.bs.collapse', function () {
            $(this).parent().find(".glyphicon").removeClass("glyphicon-minus").addClass("glyphicon-plus");
        });
    });

</script>