<?= view('common/top_header_backdesk.php') ?>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.3/css/dataTables.dataTables.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.1/css/buttons.dataTables.css">

<style>
  .submenu { padding-left: 30px; color: #555; }
  .badge { cursor: pointer; }
</style>
</head>

<body>
<div class="container-scroller">
  <?= view('common/top_navbar') ?>
  <div class="container-fluid page-body-wrapper">
    <?= view('common/side_navbar') ?>

    <div class="main-panel">
      <div class="content-wrapper">
        <div class="card">
          <div class="card-body">

            <?php if (!empty($error)): ?>
              <div class="alert alert-danger"><?= esc($error) ?></div>
            <?php endif; ?>

            <a href="<?= base_url('backdesk/menu/add') ?>" class="badge badge-gradient-primary">
              <i class="mdi mdi-file-plus"></i>&nbsp;Add Menu
            </a>

            <table id="menu_table" class="table mt-3">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Menu Name</th>
                  <th>Parent</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <?php
                if (!empty($menu)) {
                  $i = 1;
                  foreach ($menu as $item) {
                    if ((int)$item['parent_id'] === 0): ?>
                      <tr>
                        <td><?= $i++ ?></td>
                        <td><strong><?= esc($item['name']) ?></strong></td>
                        <td>—</td>
                        <td>
                          <a href="<?= base_url('backdesk/menu/edit/' . $item['id']) ?>" class="badge badge-gradient-primary">Edit</a>
                          <a href="<?= base_url('backdesk/menu/delete/' . $item['id']) ?>"
                             onclick="return confirm('Delete this menu?')"
                             class="badge badge-gradient-danger">Delete</a>
                         
                        </td>
                      </tr>
                      <?php
                      // Render Submenus
                      foreach ($menu as $child) {
                        if ((int)$child['parent_id'] === (int)$item['id']) { ?>
                          <tr>
                            <td>↳</td>
                            <td class="submenu"><?= esc($child['name']) ?></td>
                            <td><?= esc($item['name']) ?></td>
                            <td>
                              <a href="<?= base_url('backdesk/menu/edit/' . $child['id']) ?>" class="badge badge-gradient-primary">Edit</a>
                              <a href="<?= base_url('backdesk/menu/delete/' . $child['id']) ?>"
                                 onclick="return confirm('Delete this submenu?')"
                                 class="badge badge-gradient-danger">Delete</a>
                            </td>
                          </tr>
                        <?php }
                      }
                    endif;
                  }
                }
                ?>
              </tbody>
            </table>

          </div>
        </div>
      </div>

      <footer class="footer">
        <div class="d-sm-flex justify-content-center justify-content-sm-between">
          <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">
            © <?= date('Y') ?> <?= COMPANY_FULL_NAME ?>
          </span>
          <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">
            With love from <a href="<?= CREDIT_LINK ?>" target="_blank"><?= CREDIT_TITLE ?></a>
          </span>
        </div>
      </footer>
    </div>
  </div>
</div>

<?= view('common/footer_backdesk.php') ?>

<script src="https://cdn.datatables.net/2.0.3/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/dataTables.buttons.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.html5.min.js"></script>
<script>
  $(document).ready(function () {
    $('#menu_table').DataTable({
      iDisplayLength: 10,
      layout: {
        topStart: {
          buttons: ['excelHtml5', 'pdfHtml5']
        }
      }
    });
  });
</script>
</body>
</html>
