<?= 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>
  .media-thumb { width: 80px; height: auto; }
  .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/page-media/add') ?>" class="badge badge-gradient-primary">
              <i class="mdi mdi-file-plus"></i>&nbsp;Add Page Media
            </a>

            <table id="media_table" class="table mt-3">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Menu</th>
                  <th>Submenu</th>
                  <th>Image</th>
                  <th>Link</th>
                  <th>Created At</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
              </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 () {
    fetchMediaList();

    function fetchMediaList() {
      $.ajax({
        url: "<?= base_url('api/page-media/get-media-list') ?>",
        method: "GET",
        headers: {
          "Authorization": "Bearer <?= session('jwt_token') ?>",
        },
        success: function (response) {
          if (response.status === 200 && response.data.length > 0) {
            renderTable(response.data);
          } else {
            $('#media_table tbody').html('<tr><td colspan="6">No media found.</td></tr>');
          }
        },
       
      });
    }

    function renderTable(data) {
      let tableBody = '';
      data.forEach((item, index) => {
        tableBody += `
          <tr>
            <td>${index + 1}</td>
            <td>${item.menu_name ?? '-'}</td>
            <td>${item.submenu_name ?? '-'}</td>
            <td>
              ${item.image 
                ? `<img src="${item.image}" alt="Media" class="media-thumb">` 
                : 'No image'}
            </td>
            <td>
              ${item.image
                ? `<a href="#" class="copy-link" data-link="${item.image}">Copy Link</a>`
                : '-'}
            </td>
            <td>${item.created_at ?? '-'}</td>
            <td>
              <a href="<?= base_url('backdesk/page-media/edit/') ?>${item.id}" class="badge badge-gradient-primary">Edit</a>
              <a href="<?= base_url('backdesk/page-media/delete/') ?>${item.id}" onclick="return confirm('Delete this media?')" class="badge badge-gradient-danger">Delete</a>
            </td>
          </tr>
        `;
      });

      $('#media_table tbody').html(tableBody);

      // Initialize or reinitialize DataTable
      if ($.fn.DataTable.isDataTable('#media_table')) {
        $('#media_table').DataTable().destroy();
      }

      $('#media_table').DataTable({
        iDisplayLength: 10,
        layout: {
          topStart: {
            buttons: ['excelHtml5', 'pdfHtml5']
          }
        }
      });
    }
  });
  $(document).on('click', '.copy-link', function (e) {
  e.preventDefault();
  const link = $(this).data('link');
  navigator.clipboard.writeText(link).then(() => {
    alert('Link copied to clipboard!');
  }).catch(err => {
    console.error('Failed to copy: ', err);
  });
});
</script>
</body>
</html>
