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

    <% 
    const breadcrumbs = [
      { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
       { label: "Category 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 categories" 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 Categories: <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="category_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 data-sort="d_can_fee">
                  Cancellation Fee
                  <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="wait_free_min">
                  Wait Details
                  <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>Options</th>



              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>


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

    </div>

</main>




<script>

let city_cur = "<%= city_cur %>"

  // Configure the export component
  window.exportConfig = {
    csv: {
      headers: [
        "Category ID", "Category Name", "Base Fare", "Fare/km",
        "Fare/min", "Max Size", "Driver Fee", "Driver Free Cancel (min)",
        "Rider Fee", "Rider Free Cancel (min)", "Free Wait (min)",
        "Wait Fare", "Status"
      ],
      dataMapper: (cat) => [
        cat.category_id || "N/A",
        cat.cat_name || "-",
        cat.cat_base_price || 0,
        cat.cat_fare_per_km || 0,
        cat.cat_fare_per_min || 0,
        cat.cat_max_size || 0,
        cat.d_can_fee_type === 'P' ? (cat.d_can_fee || 0) + '%' : (cat.d_can_fee || 0),
        cat.d_can_free_min || 0,
        cat.r_can_fee_type === 'P' ? (cat.r_can_fee || 0) + '%' : (cat.r_can_fee || 0),
        cat.r_can_free_min || 0,
        cat.wait_free_min || 0,
        cat.wait_per_min || 0,
        cat.cat_status == '1' ? "Active" : "Inactive"
      ],
      filename: 'categories.csv'
    },
    pdf: {
      headers: [
        "Category ID", "Category Name", `Base Fare (${city_cur})`, `Fare/km (${city_cur})`,
        `Fare/min (${city_cur})`, "Max Size", `Driver Fee (${city_cur})`, "Driver Free Cancel (min)",
        `Rider Fee (${city_cur})`, "Rider Free Cancel (min)", "Free Wait (min)",
        `Wait Fare (${city_cur}/min)`, "Status"
      ],
      dataMapper: (cat) => [
        cat.category_id || "N/A",
        cat.cat_name || "-",
        cat.cat_base_price || 0,
        cat.cat_fare_per_km || 0,
        cat.cat_fare_per_min || 0,
        cat.cat_max_size || 0,
        cat.d_can_fee_type === 'P' ? (cat.d_can_fee || 0) + '%' : (cat.d_can_fee || 0),
        cat.d_can_free_min || 0,
        cat.r_can_fee_type === 'P' ? (cat.r_can_fee || 0) + '%' : (cat.r_can_fee || 0),
        cat.r_can_free_min || 0,
        cat.wait_free_min || 0,
        cat.wait_per_min || 0,
        cat.cat_status == '1' ? "Active" : "Inactive"
      ],
      title: 'Categories Report',
      filename: 'categories.pdf',
      pageSize: 'A4',
      margin: {
        top: 20,
        right: 10,
        bottom: 20,
        left: 10
      },
      fontSize: 10
    },
    fetchAllUrl: '/admin/catData?limit=99999',
    currentData: []
  };

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

  // Initialize pagination
  const pagination = new Pagination({
    fetchUrl: '/admin/catData',
    defaultSort: {
      column: 'category_id',
      order: 'DESC'
    },
    dataMapper: (cat) => {
      return `
        <tr class="hover:bg-gray-50 transition border-b">
 
                <td>
                        <div class="form-check style-check d-flex align-items-center">
                            <input class="selectRow form-check-input" type="checkbox" value="${cat.category_id}">
                        </div>
                    </td>

          <td class="px-6 py-4 text-gray-900 font-medium">
            ${cat?.category_id || '-'}
          </td>

          <td class="px-6 py-4">
            <div class="flex items-center space-x-4">


              <img src="<%=CATEGORY_BASE_URL %>${cat.cat_icon_path}"   alt="Icon" class="w-[120px] h-[120px] rounded-md object-contain border" />
              <div>
                <a href="/admin/edit-category/${cat?.category_id}" class="text-blue-600 hover:underline font-semibold text-lg">
                  ${cat?.cat_name || '-'}
                </a>
                <div class="text-sm text-gray-500 mt-1">
                  <p><i class="fas fa-rupee-sign"></i> Base Fare: ${city_cur}${cat?.cat_base_price || 0}</p>
                  <p><i class="fas fa-road"></i> Fare/km: ${city_cur}${cat?.cat_fare_per_km || 0}</p>
                  <p><i class="fas fa-users"></i> Max Size: ${cat?.cat_max_size || 0} person(s)</p>
                </div>
              </div>
            </div>
          </td>

          <td class="px-6 py-4 text-sm text-gray-700">
            <p><i class="fas fa-user-shield"></i> Driver Fee: ${cat?.d_can_fee_type === 'P' ? (cat?.d_can_fee || 0) + '%' : city_cur + (cat?.d_can_fee || 0)}</p>
            <p><i class="fas fa-clock"></i> Locking Time: ${cat?.d_can_free_min || 0} min</p>
            <p><i class="fas fa-user"></i> Rider Fee: ${cat?.r_can_fee_type === 'P' ? (cat?.r_can_fee || 0) + '%' : city_cur + (cat?.r_can_fee || 0)}</p>
            <p><i class="fas fa-stopwatch"></i> Free Cancel: ${cat?.r_can_free_min || 0} min</p>
          </td>

          <td class="px-6 py-4 text-sm text-gray-700">
            <p><i class="fas fa-clock"></i> Free Wait: ${cat?.wait_free_min || 0} min</p>
            <p><i class="fas fa-money-bill-wave"></i> After: ${city_cur}${cat?.wait_per_min || 0}/min</p>
          </td>

          <td class=" ">

             <button class="btn btn-sm btn-warning change-status" 
             data-tooltip="${cat.cat_status ? 'Click to deactivate category' : 'Click to activate category'}"
                    data-id="${cat.category_id}" style="background: transparent; border: none; padding: 0.25rem;">
                   <iconify-icon icon="${cat.cat_status ? 'mdi:account-check' : 'mdi:account-remove'}" 
                  style="font-size: 1.5rem;"
                  class="${cat.cat_status ? 'text-success' : 'text-danger'}">
    </iconify-icon>
            </button>
            <button class="    edit-btn" data-tooltip="Edit category"
                    onclick="window.location.href='/admin/edit-category/${cat.category_id}'" 
                    data-id="${cat?.category_id}" >
                <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/Deselect all checkboxes
    $("#selectAll").on("click", function() {
      $(".selectRow").prop("checked", this.checked);
    });

    // Change status handler
    $(document).on('click', '.change-status', function() {
      const categoryId = $(this).data('id');
      const currentStatus = $(this).data('status');
      const newStatus = currentStatus == '1' ? '0' : '1';

      $.ajax({
        url: `/admin/toggle-category-status/${categoryId}`,
        type: 'POST',
        data: {
          status: newStatus
        },
        success: function(response) {
          Swal.fire({
            icon: 'success',
            title: 'Status updated!',
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 2000
          });
          pagination.loadData(1, $("#pageLength").val());
        },
        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 categories
    $("#deleteSelected").on("click", function() {
      const selectedCategories = $(".selectRow:checked").map(function() {
        return $(this).val();
      }).get();

      if (selectedCategories.length === 0) {
        Swal.fire({
          icon: 'warning',
          title: 'No categories selected',
          text: 'Please select at least one category to delete.',
          toast: true,
          position: 'top-end',
          showConfirmButton: false,
          timer: 3000
        });
        return;
      }

      Swal.fire({
        title: 'Are you sure?',
        text: "Selected categories will be permanently deleted.",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete'
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: "/admin/delete-categories",
            type: "POST",
            contentType: "application/json",
            data: JSON.stringify({
              category_ids: selectedCategories
            }),
            success: function(response) {
              Swal.fire({
                icon: 'success',
                title: response.message || 'Deleted successfully!',
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 3000
              });
              pagination.loadData(1, $("#pageLength").val());
            },
            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 %>