<div class="row">
  <div class="col-md-9 col-lg-9">
      <h4><strong>Role Features</strong></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">
        <% if current_user.role == 'administrator' %>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  Administrator
                </h4>
              </div>
              <div id="admin" class="panel-collapse collapse in">
                <div class="panel-body">
                  <ul class="col-md-4">
                    <li><strong>All Settings</strong></li>
                    <ul>
                      <li>Zone</li>
                      <li>OQS</li>
                      <li>Menu</li>
                      <li>Cashier Terminal</li>
                      <li>Payment</li>
                      <li>Merbership</li>
                      <li>Print</li>
                      <li>Employees</li>
                      <li>Accounts</li>
                    </ul>
                  </ul>
                  <ul class="col-md-4">
                    <li><strong>Transactions</strong></li>
                    <ul class="">
                      <li>Order</li>
                      <li>Sale</li>
                      <li>Credit Note</li>
                    </ul><br>
                    <li><strong>Reports</strong></li>
                    <ul class="">
                      <li>Daily Sale</li>
                      <li>Sale Item</li>
                      <li>Receipt</li>
                      <li>Shift Sale</li>
                      <li>Credit Sale</li>
                      <li>Void Sale</li>
                    </ul>
                  </ul>
                  <ul class="col-md-4">
                    <li><strong>OQS</strong></li><br>
                    <li><strong>Cashier</strong></li><br>
                    <li><strong>CRM</strong></li>
                  </ul>
                </div>
              </div>
            </div>
        <% elsif current_user.role == 'manager' %>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  Manager
                </h4>
              </div>
              <div id="admin" class="panel-collapse collapse in">
                <div class="panel-body">
                  <ul class="col-md-4">
                    <li class="">All Settings</li>
                    <ul class="">
                      <li>Zone</li>
                      <li>OQS</li>
                      <li>Menu</li>
                      <li>Cashier Terminal</li>
                      <li>Print</li>
                      <li>Employees</li>
                      <li>Accounts</li>
                    </ul>
                  </ul>
                  <ul class="col-md-4">
                    <li class="">Transactions</li>
                    <ul class="">
                      <li>Order</li>
                      <li>Sale</li>
                      <li>Credit Note</li>
                    </ul><br>
                    <li>Reports</li>
                    <ul class="">
                      <li>Daily Sale</li>
                      <li>Sale Item</li>
                      <li>Receipt</li>
                      <li>Shift Sale</li>
                      <li>Credit Sale</li>
                      <li>Void Sale</li>
                    </ul>
                  </ul>
                  <ul class="col-md-4">
                    <li>OQS</li><br>
                    <li>Cashier</li><br>
                    <li>CRM</li>
                  </ul>
                </div>
              </div>
            </div>
        <% elsif current_user.role == 'supervisour' %>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  Supervisor
                </h4>
              </div>
              <div id="supervisor" class="panel-collapse collapse in">
                <div class="panel-body">
                  <ul class="">
                    <li>OQS</li>
                    <ul>
                      <li class="">Void</li>
                      <li class="">FOC</li>
                      <li class="">Edit</li>
                      <li class="">Credit</li>
                      <li class="">Payment</li>
                    </ul>
                  </ul>
                </div>
              </div>
            </div>
        <% elsif current_user.role == 'cashier' %>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  Cashier
                </h4>
              </div>
              <div id="cashier" class="panel-collapse collapse in">
                <div class="panel-body">
                  <ul class="">
                    <li class="">Cashier Panel except Edit and Void</li>
                    <li class="">Sale and Order</li>
                    <li class="">and Queue in CRM</li>
                  </ul>
                </div>
              </div>
            </div>
        <% elsif current_user.role == 'account' %>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  Accountant
                </h4>
              </div>
              <div id="accountant" class="panel-collapse collapse in">
                <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>
        <% end %>
    </div>
  </div>

  <div class="col-md-3">
    <div class="card" id="oqs" onclick="location.href='<%= oqs_root_path %>'">
      <div class="card-content dashboard-nav">OQS</div>
    </div>
    
    <div class="card" id="origami" onclick="location.href='<%= origami_root_path %>'">
      <div class="card-content dashboard-nav">Cashier</div>
    </div>
    
    <div class="card" id="crm" onclick="location.href='<%= crm_root_path %>'">
      <div class="card-content dashboard-nav">CRM</div>
    </div>
    
    <!-- No Needs
    <div class="card" id="backend" onclick="location.href='<%= dashboard_path %>'">
      <div class="card-content">
        <span class="card-title">Backend</span>
      </div>
    </div> -->
    
    <div class="card" id="backend" onclick="location.href='<%= inventory_path %>'">
      <div class="card-content dashboard-nav">Inventory</div>
    </div>
  </div>
</div>

<div class="footer" style="background-color: inherit">
  <div class="card">
    <div class="page-header center-text">
     <h4 class="footer-header">
      <%= @shop.name %>
     </h4>
    </div>
    <div class="center-text">
      <%= @shop.address %>
    </div>
    <div class="center-text">
      <%= @shop.phone_no %>
    </div>
  </div>
</div>
