   <%- header %>
   <!-- pre-rendered navbar inserted -->
   <main class="dashboard-main">
     <%- navbar %>
     <!-- pre-rendered navbar inserted -->

<script src="/js/pagination.js"></script>


 

  <div class="container flex-1 pt-20 w-full my-4">

    <%- include('../../partials/utils/title.ejs', {title: "Promo manager"}) %>



    <% 
      const breadcrumbs = [
        { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
         { label: " Promo manager" }
      ];
    %>

    <%- include('../../partials/utils/breadcrumb', { breadcrumbs }) %>
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <%- include('../../partials/utils/export-buttons.ejs') %>
      <!-- Offcanvas for Search Filter Panel -->
      <div style="display: flex; justify-content: space-between; align-items: center; gap: 10px;">
        <button data-tooltip="Delete selected promos" id="deleteSelected" class="btn shadow btn-danger" style="padding-block: 6px;">
          <i class="fas fa-trash"></i>
        </button>
        <div style="display: flex; justify-content: end;">
          <%- include('../../partials/utils/searchFilter.ejs') %>
        </div>
      </div>
    </div>

    <div class="card basic-data-table" style="margin-top: 20px;">
      <div class="card-header">
        <h5 class="card-title mb-0">Total Promos: <span id="totalRows"></span> </h5>
      </div>

      <%- include('../../partials/globalSearch.ejs') %>


      <!-- Responsive Table -->
      <div style="padding-inline: 20px; overflow-x: auto;">
        <div class="table-responsive bordered-table">
          <table id="tripsTable" class="table table-striped table-bordered">
            <thead>
              <tr>
                <th scope="col">
                  <div class="form-check style-check d-flex align-items-center">
                    <input id="selectAll" class="form-check-input" type="checkbox">
                  </div>
                </th>
                <th data-sort="promo_id">
                  ID
                  <span class="sort-icons">
                    <i class="fa fa-sort sort-neutral"></i>
                    <i class="fa fa-sort-up sort-asc"></i>
                    <i class="fa fa-sort-down sort-desc"></i>
                  </span>
                </th>



                <th>Basic Details</th>
                <th>Usage Limit</th>
                <th>Promo Date</th>
                <th>Options</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
      <div class="pagination">
        <div id="pagination"></div>
      </div>
    </div>

</main>




<script>
  // Configure the export component
  window.exportConfig = {
    csv: {
      headers: [
        "Promo ID",
        "Promo Code",
        "Promo Value (%)",
        "Total Rides",
        "Max Usage",
        "Per User",
        "Start Date",
        "End Date",
        "Status"
      ],
      dataMapper: (promo) => [
        promo.promo_id || "N/A",
        promo.promo_code || "N/A",
        promo.promo_value || "N/A",
        promo.trip_count || "N/A",
        promo.promo_max_limit || "N/A",
        promo.user_usage_limit || "N/A",
        promo.promo_start_date || "N/A",
        promo.promo_end_date || "N/A",
        promo.promo_status === '1' ? "Active" : "Inactive"
      ],
      filename: 'promos.csv'
    },
    pdf: {
      headers: [
        "Promo ID",
        "Promo Code",
        "Promo Value (%)",
        "Total Rides",
        "Max Usage",
        "Per User",
        "Start Date",
        "End Date",
        "Status"
      ],
      dataMapper: (promo) => [
        promo.promo_id || "N/A",
        promo.promo_code || "N/A",
        promo.promo_value || "N/A",
        promo.trip_count || "N/A",
        promo.promo_max_limit || "N/A",
        promo.user_usage_limit || "N/A",
        promo.promo_start_date || "N/A",
        promo.promo_end_date || "N/A",
        promo.promo_status === '1' ? "Active" : "Inactive"
      ],
      title: 'Promos Report',
      filename: 'promos.pdf'
    },
    fetchAllUrl: '/admin/getpromos?limit=99999',
    currentData: []
  };

  // Set global search input for pagination
  window.globalSearchInput = '#globalSearch';

  // Initialize pagination
  const pagination = new Pagination({
    fetchUrl: '/admin/getpromos',
    defaultSort: {
      column: 'promo_id',
      order: 'DESC'
    },
    dataMapper: (promo) => {
      return `
        <tr>
          

                  <td>
                        <div class="form-check style-check d-flex align-items-center">
                            <input class="promo-checkbox form-check-input" type="checkbox" data-id="${promo.promo_id}" value="${promo.promo_id}">
                        </div>
                    </td>
          <td>${promo.promo_id || "N/A"}</td>
          <td>
            <div class="text-[#0f3c86] font-bold">
              <i class="fas fa-tag"></i> ${promo.promo_code || "N/A"}
            </div>
            <br />
            <div>
              <i class="fas fa-percent"></i> Promo Value(%): ${promo.promo_value || "N/A"}
            </div>
            <div>
              <i class="fas fa-car"></i> Total Rides: ${promo.trip_count || "N/A"}
            </div>
          </td>
          <td>
            <div>
              <i class="fas fa-user-times"></i> Max Usage: ${promo.promo_max_limit || "N/A"}
            </div>
            <br />
            <div>
              <i class="fas fa-user"></i> Per User: ${promo.user_usage_limit || "N/A"}
            </div>
          </td>
          <td>
            <div>
              <i class="fas fa-calendar-alt"></i> Start: ${formatDate(promo.promo_start_date) || "N/A"}
            </div>
            <div>
              <i class="fas fa-calendar-check"></i> End: ${formatDate(promo.promo_end_date) || "N/A"}
            </div>
          </td>
          <td>
            <button data-tooltip="${promo.promo_status == '1' ? "Click to deactivate promo"  :"Click to activate promo"}" class="btn change-status cursor-pointer"
                    data-id="${promo.promo_id}" data-status="${promo.promo_status}"    style=" background: transparent; border: none; padding: 0.25rem;">
                  <iconify-icon icon="${promo.promo_status == '1' ? 'mdi:account-check' : 'mdi:account-remove'}" 
                  style="font-size: 1.5rem;"
                  class="${promo.promo_status == '1'? 'text-success' : 'text-danger'}">
                  </iconify-icon>
            </button>

            <button  data-tooltip="Edit promo"  class="btn  btn-primary cursor-pointer edit-trip" 
                    onclick="window.location.href='/admin/edit-promo/${promo.promo_id}'"  style="background: transparent; border: none; padding: 0.25rem; margin-left: 0.5rem;">
             <a href="javascript:void(0)" class="w-32-px h-32-px bg-success-focus text-success-main rounded-circle d-inline-flex align-items-center justify-content-center">
                <iconify-icon icon="lucide:edit"></iconify-icon>
             </a>
            </button>

 

          </td>
        </tr>
      `;
    }
  });

  $(document).ready(function() {
    // Initialize with default limit
    const defaultLimit = $("#pageLength").val();
    pagination.loadData(1, defaultLimit);

    // Handle page length change
    $("#pageLength").change(function() {
      const newLimit = $(this).val();
      pagination.loadData(1, newLimit);
    });

    // Select all checkboxes
    $("#select-all").on("click", function() {
      $(".promo-checkbox").prop("checked", this.checked);
    });

    // Toggle promo status
    $(document).on("click", ".change-status", function() {
      const button = $(this);
      const promoId = button.data("id");
      const currentStatus = button.data("status");
      const newStatus = currentStatus === "1" ? "0" : "1";

      Swal.fire({
        title: 'Are you sure?',
        text: `Do you want to ${newStatus === "1" ? "activate" : "deactivate"} this promo?`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#28a745',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, update it!'
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: "/admin/update-promo-status",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify({
              promo_id: promoId,
              promo_status: newStatus
            }),
            success: function(data) {
              if (data.success) {
                // Swal.fire('Updated!', 'Promo status has been updated.', 'success');
                pagination.loadData(pagination.currentPage, $("#pageLength").val());

              } else {
                Swal.fire('Failed!', data.message || 'Could not update promo status.', 'error');
              }
            },
            error: function(xhr) {
              let errorMsg = 'Something went wrong!';
              if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMsg = xhr.responseJSON.message;
              } else if (xhr.responseText) {
                try {
                  const parsed = JSON.parse(xhr.responseText);
                  if (parsed.message) errorMsg = parsed.message;
                } catch (e) {
                  errorMsg = xhr.responseText;
                }
              }
              Swal.fire('Error!', errorMsg, 'error');
            }
          });
        }
      });
    });

    // Delete selected promos
    $("#deleteSelected").on("click", function() {
      const selectedIds = $(".promo-checkbox:checked").map(function() {
        return $(this).data("id");
      }).get();

      if (selectedIds.length === 0) {
        Swal.fire('No Selection', 'Please select at least one promo to delete.', 'info');
        return;
      }

      Swal.fire({
        title: 'Are you sure?',
        text: 'You will not be able to recover these promos!',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Yes, delete them!'
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: "/admin/delete-promos",
            method: "POST",
            contentType: "application/json",
            data: JSON.stringify({
              promo_ids: selectedIds
            }),
            success: function(data) {
              if (data.success) {
                Swal.fire('Deleted!', 'Selected promos have been deleted.', 'success');
                pagination.loadData(pagination.currentPage, $("#pageLength").val());
              } else {
                Swal.fire('Failed!', data.message || 'Could not delete promos.', 'error');
              }
            },
            error: function(xhr) {
              let errorMsg = 'Something went wrong!';
              if (xhr.responseJSON && xhr.responseJSON.message) {
                errorMsg = xhr.responseJSON.message;
              } else if (xhr.responseText) {
                try {
                  const parsed = JSON.parse(xhr.responseText);
                  if (parsed.message) errorMsg = parsed.message;
                } catch (e) {
                  errorMsg = xhr.responseText;
                }
              }
              Swal.fire('Error!', errorMsg, 'error');
            }
          });
        }
      });
    });
  });
</script>

<%- footer %>