{% extends "admin_base.html" %}
{% block title %}Provisions List{% endblock %}

{% block content %}
<div class="container" style="max-width:95%">
  <h1>Provisions</h1>

  
  <!-- Flash Messages -->
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
      {% for category, message in messages %}
        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
          {{ message }}
          <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
      {% endfor %}
    {% endif %}
  {% endwith %}

  <table id="provisionsTable" class="display" style="width:100%">
   <thead>
  <tr>
    <th>Status</th>
    <th>Provisioned Date</th>
    <th>Offer Terms</th>
    <th>Provisioned For</th>
    <th>Name</th>
    <th>Email</th>
    <th>Company</th>
    <th>Job Title</th>
    <th>CRM</th>
    <th>Comments</th>
    <th>Actions</th>
  </tr>
</thead>  
  </table>
</div>

<style>
  /* DataTables pagination buttons */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #1e40af !important;
    color: #fff !important;   /* ✅ force white font */
    border: none !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    margin: 2px !important;
    cursor: pointer;
    font-weight: 500;
    text-decoration: none !important; /* remove underline */
  }

 .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: #1e3a8a !important;
  color: #ffffff !important;
}

/* Active (current page) */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background-color: #1e40af !important;
  color: #ffffff !important;
}

/* Disabled (when no prev/next) */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  background-color: #9ca3af !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
}
</style>

<script>
$(document).ready(function() {
    function getUrlParam(name) {
        const url = new URL(window.location.href);
        return url.searchParams.get(name);
    }

    $('#provisionsTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "/admin/provisions/data",
            data: function(d) {
                d.feature = getUrlParam("feature");  // dynamic
                d.setup   = getUrlParam("setup");    // dynamic
            }
        },
        order: [[0, 'desc']],
       columns: [
          { data: 'setup' },
          { data: 'provisioned_date' },
          { data: 'terms' },
          { data: 'features' },
          { data: 'name' },
          { data: 'email' },
          { data: 'company' },
          { data: 'job_title' },
          { data: 'crm' },
          { data: 'comments' },
          {
              data: 'id',
              orderable: false,
              searchable: false,
              render: function(data) {
                  return `
                      <a href="/admin/provision/edit/${data}" class="btn-action"><i class="fa fa-edit"></i></a>
                      <a href="#" onclick="deleteProvision(${data}); return false;" class="btn-action text-danger"><i class="fa fa-trash"></i></a>
                  `;
              }
          }
      ]
    });
});


function deleteProvision(id) {
  if (confirm("Delete this provision?")) {
    $.post(`/admin/provision/delete/${id}`, function(resp) {
      $('#provisionsTable').DataTable().ajax.reload();
    });
  }
}
</script>
{% endblock %}