<?php echo view('common/top_header_backdesk.php') ?>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<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>
  select.form-control, .form-control { outline: 1px solid #67676b; }
  .dataTables_wrapper label { font-size: auto!important; }
  div.dt-buttons > .dt-button, div.dt-buttons > div.dt-button-split .dt-button { padding:1px 10px; }
  #office_hours_list_filter input { padding: 7px 15px; border-radius: 5px; }
  .buttons-html5 { border-radius: 0!important; background: beige!important; }
</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 (session()->getFlashdata('error')): ?>
              <div class="alert alert-danger"><?= session()->getFlashdata('error') ?></div>
            <?php endif; ?>

            <a href="<?= base_url('backdesk/contacts/office-hours/add') ?>" class="badge badge-gradient-primary">
              <i class="mdi mdi-file-add"></i>&nbsp;Add Office Hour
            </a>

            <div class="row mt-3">
              <div class="col-12">
                <table id="office_hours_list" class="table">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Title</th>
                      <th>Text 1</th>
                      <th>Text 2</th>
                      <th>Text 3</th>
                      <th>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php if (!empty($office_hours)): $i = 0; foreach ($office_hours as $row): $i++; ?>
                      <tr>
                        <td><?= $i ?></td>
                        <td><?= esc($row['title']) ?></td>
                        <td><?= esc($row['text1']) ?></td>
                        <td><?= esc($row['text2']) ?></td>
                        <td><?= esc($row['text3']) ?></td>
                        <td>
                          <a href="<?= base_url('backdesk/contacts/office-hours/edit/' . $row['id']) ?>" class="badge badge-gradient-primary">
                            <i class="mdi mdi-file-edit"></i>&nbsp;Edit
                          </a>
                          <a href="<?= base_url('backdesk/contacts/office-hours/delete/' . $row['id']) ?>" class="badge badge-gradient-danger"
                             onclick="return confirm('Are you sure you want to delete this record?')">
                            <i class="mdi mdi-delete"></i>&nbsp;Delete
                          </a>
                        </td>
                      </tr>
                    <?php endforeach; endif; ?>
                  </tbody>
                </table>
              </div>
            </div>

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

      <footer class="footer">
        <div class="d-sm-flex justify-content-center justify-content-sm-between">
          <span class="text-muted">© <?= date('Y') . ' ' . COMPANY_FULL_NAME ?>. All rights reserved.</span>
          <span class="float-sm-right">With gratitude from <i class="mdi mdi-heart text-danger"></i>
            <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 src="https://cdn.datatables.net/buttons/3.0.1/js/buttons.print.min.js"></script>

<script>
  $(document).ready(function () {
    $('#office_hours_list').DataTable({
      "iDisplayLength": 10,
      layout: {
        topStart: {
          buttons: ['excelHtml5', 'pdfHtml5']
        }
      },
      language: {
        search: ""
      }
    });

    let wrapper = $('#office_hours_list').closest('.dataTables_wrapper');
    wrapper.find('div[id$=_filter] input').attr('placeholder', 'Search').removeClass('form-control-sm');
    wrapper.find('div[id$=_length] select').removeClass('form-control-sm');
  });
</script>
</body>
</html>
