   <%- 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: "Reward Manager"}) %>

    <% 
    const breadcrumbs = [
    { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
    { label: " Reward 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 -->
      <%- include('../../partials/utils/searchFilter.ejs') %>
    </div>



    <div class="card basic-data-table" style="margin-top: 20px;">
      <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
        <h5 class="card-title mb-0">Total Rewards: <span id="totalRows"></span> </h5>

        <!-- Include Heroicons or your icon set -->
        <!-- Example: Add Icon (Plus Icon from Heroicons) -->
        <button onclick="window.location.href='/admin/add-reward'" data-tooltip="Add new reward"  class="bg-green-600 hover:bg-green-700 text-white font-semibold py-[10px] px-[12px] rounded-lg flex items-center justify-center" title="Add Reward">
          <!-- Reusable Icon Component -->
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
          </svg>
        </button>

      </div>

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

      <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 data-sort="reward_id" style="text-align: center;">
                  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 data-sort="type" style="text-align: center;">Reward Mode <span class="sort-icons" style="text-align: center;">
                    <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 data-sort="type" style="text-align: center;">Reward Type <span class="sort-icons" style="text-align: center;">
                    <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 data-sort="r_value" style="text-align: center;">Reward Value <span class="sort-icons" style="text-align: center;">
                    <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 data-sort="created" style="text-align: center;">Created <span class="sort-icons" style="text-align: center;">
                    <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 style="text-align: center;">Options</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>


      <div class="pagination">
        <div id="pagination"></div>
      </div>

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




<script>
  function showToast(message, type = "success") {
    Swal.fire({
      toast: true,
      position: 'top-end',
      icon: type, // "success", "error", "warning", "info", or "question"
      title: message,
      showConfirmButton: false,
      timer: 3000,
      timerProgressBar: true,
      didOpen: (toast) => {
        toast.addEventListener('mouseenter', Swal.stopTimer)
        toast.addEventListener('mouseleave', Swal.resumeTimer)
      }
    });
  }

  // Configure the export component
  window.exportConfig = {
    csv: {
      headers: ["Reward ID", "City", "Reward Mode", "Reward Type", "Reward Value", "Description", "Created Date"],
      dataMapper: (reward) => [
        reward.reward_id || "N/A",
         reward.type || "N/A",
        reward.type === "driver" ? "Driver Cash" : "User Cash",
        reward.r_value || "N/A",
        reward.r_desc || "N/A",
        reward.created ? formatDate(reward.created) : "N/A"
      ],
      filename: 'rewards.csv'
    },
    pdf: {
      headers: ["Reward ID", "City", "Reward Mode", "Reward Type", "Reward Value", "Description", "Created Date"],
      dataMapper: (reward) => [
        reward.reward_id || "N/A",
         reward.type || "N/A",
        reward.type === "driver" ? "Driver Cash" : "User Cash",
        reward.r_value || "N/A",
        reward.r_desc || "N/A",
        reward.created ? formatDate(reward.created) : "N/A"
      ],
      title: 'Rewards Report',
      filename: 'rewards.pdf',
      pageSize: 'A4',
      margin: {
        top: 20,
        right: 10,
        bottom: 20,
        left: 10
      },
      fontSize: 10
    },
    fetchAllUrl: '/admin/getReward?limit=99999',
    currentData: []
  };

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

  // Initialize pagination
  const pagination = new Pagination({
    fetchUrl: '/admin/getReward',
    defaultSort: {
      column: 'reward_id',
      order: 'DESC'
    },
    dataMapper: (reward) => {
      return `
        <tr>
          <td class="text-center">${reward?.reward_id || "N/A"}</td>
           <td class="text-center">${reward?.type || "N/A"}</td>
          <td class="text-center">
            ${reward?.type === "driver" ? "Driver Cash" : "User Cash"}
          </td>
          <td class="text-center">${reward?.r_value || "N/A"}</td>
          <td class="text-center">
            <i class="fas fa-calendar-alt"></i>
            ${reward?.created ?formatDate(reward.created) : "N/A"}
          </td>
   <td class="text-center">
  <!-- Edit Button -->

                <button  data-tooltip="Edit promo"   class="btn  btn-primary cursor-pointer edit-trip" 
                              onclick="window.location.href='/admin/edit-reward/${reward.reward_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>
  <!-- Delete Button -->
  <button class="btn-icon delete-reward ml-2"
  data-tooltip="Delete reward" 
          data-id="${reward.reward_id}"
          aria-label="Delete reward"
          data-tooltip="Delete">
    <iconify-icon icon="lucide:trash-2" class="text-red-500 hover:text-red-700"></iconify-icon>
  </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);
    });

    // Delete reward
    $(document).on('click', '.delete-reward', function() {
      const rewardId = $(this).data('id');

      Swal.fire({
        title: 'Delete Reward?',
        text: 'Are you sure you want to delete this reward?',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete it!'
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: '/admin/delete-reward/' + rewardId,
            type: 'POST',
            success: function() {
              showToast('Reward deleted successfully', "success");
              pagination.loadData(1, $("#pageLength").val());
            },
            error: function(xhr) {
              console.error("Error:", xhr);
              let message = 'Please try again later.';
              if (xhr.responseJSON && xhr.responseJSON.message) {
                message = xhr.responseJSON.message;
              }
              showToast(message, "error");
            }
          });
        }
      });

    });

  });
</script>

<%- footer %>