<%- header %>
<!-- pre-rendered navbar inserted -->
<main class="dashboard-main">
  <%- navbar %>
  <!-- pre-rendered navbar inserted -->
  <%- include('../../partials/utils/mask.ejs') %>

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

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

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

    <% 
      const breadcrumbs = [
        { label: "Dashboard", href: "/admin/dashboard", icon: "bi bi-house-door" },
        { label: "Owner 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 owners" id="deleteSelected" class="btn shadow btn-danger" style="padding-block: 6px;">
          <i class="fas fa-trash"></i>
        </button>
        <button data-tooltip="Add new owner" onclick="window.location.href='/admin/owner/add'" class="btn shadow btn-success" style="padding-block: 6px;">
          <i class="fas fa-plus"></i> Add Owner
        </button>
        <div style="display: flex; justify-content: end;">
          <%- include('../../partials/utils/searchFilter-withApi.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 Owners: <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="ownersTable" 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="driver_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>Owner Details</th>
                <th data-sort="d_wallet">
                  Wallet Balance
                  <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>Status</th>
                <th>Actions</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>

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

    </div>

</main>

<script>
  let city_cur = "<%= city_cur %>";
  // Set global search input for pagination
  window.globalSearchInput = '#globalSearch';
  
  // --- Export config ---
  window.exportConfig = {
    csv: {
      headers: ["Owner ID", "First Name", "Last Name", "Email", "Country Code", "Phone", "Wallet"],
      dataMapper: (owner) => [
        owner.driver_id,
        maskName(owner.d_fname || 'N/A', owner.d_lname || ''),
        maskEmail(owner.d_email || 'N/A'),
        owner.c_code || "N/A",
        maskPhone(owner.d_phone || 'N/A'),
        `${(owner.d_wallet || 0).toFixed(2)}`
      ],
      filename: 'owners.csv'
    },
    pdf: {
      headers: ["Owner ID", "First Name", "Last Name", "Email", "Country Code", "Phone", "Wallet"],
      dataMapper: (owner) => [
        owner.driver_id,
        maskName(owner.d_fname || 'N/A', owner.d_lname || ''),
        maskEmail(owner.d_email || 'N/A'),
        owner.c_code || "N/A",
        maskPhone(owner.d_phone || 'N/A'),
        `${city_cur}${(owner.d_wallet || 0).toFixed(2)}`
      ],
      title: 'Owners Report',
      filename: 'owners.pdf'
    },
    fetchAllUrl: '/admin/owner/data?limit=99999',
    currentData: []
  };

  // --- Pagination table rows ---
  const pagination = new Pagination({
    fetchUrl: '/admin/owner/data',
    defaultSort: { column: 'driver_id', order: 'DESC' },
    dataMapper: (owner) => {
      const phoneNumber = owner.c_code ?
        `${owner.c_code} ${maskPhone(owner.d_phone || 'N/A')}` :
        maskPhone(owner.d_phone || 'N/A');

      const walletAmount = (owner.d_wallet || 0).toFixed(2);

      return `
        <tr>
          <td>
            <div class="form-check style-check d-flex align-items-center">
              <input class="select-owner form-check-input" type="checkbox" value="${owner.driver_id}">
            </div>
          </td>
          <td>${owner.driver_id}</td>
          <td>
            <div class="d-flex align-items-center">
              <img 
                src="<%= IMAGE_FOLDER_PATH %>${owner.image?.img_path || '/placeholder.jpg'}" 
                alt="Profile Image" 
                class="pi-css rounded-circle me-2" 
                width="40" 
                height="40"
                onerror="this.onerror=null; this.src='/placeholder.jpg';"
              >
              <div>
                <a href="/admin/owner/details/${owner.driver_id}">
                  <strong>${maskName(owner.d_fname || 'N/A', owner.d_lname || '')}</strong>
                </a><br>
                <strong>${maskEmail(owner.d_email || 'N/A')}</strong><br>
                <span>${phoneNumber}</span>
              </div>
            </div>
          </td>
          <td style="color:${ walletAmount < 0 ? 'red' : 'green' }">${city_cur}${walletAmount}</td>
          <td>
            <button class="btn btn-sm change-status" 
                    style="${owner.d_active ? 'background: var(--success-focus) !important; color:#45B369; border-radius:20px' : 'background: #dc3545; color:white; border-radius:20px'}"
                    data-id="${owner.driver_id}" 
                    data-value="${owner.d_active}">
              ${owner.d_active ? 'Active' : 'Inactive'}
            </button>
          </td>
          <td>
            <button data-tooltip="View owner details" class="view-owner" data-id="${owner.driver_id}" style="background: transparent; border: none; padding: 0.25rem;">
              <a href="javascript:void(0)" class="w-32-px h-32-px bg-info-focus text-info-main rounded-circle d-inline-flex align-items-center justify-content-center">
                <iconify-icon icon="lucide:eye"></iconify-icon>
              </a>
            </button>
            <button data-tooltip="Edit owner" class="edit-owner" data-id="${owner.driver_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() {
    pagination.loadData(1);
    
    // View owner handler
    $(document).on("click", ".view-owner", function() {
      const ownerId = $(this).data("id");
      window.location.href = `/admin/owner/details/${ownerId}`;
    });
    
    // Edit owner handler
    $(document).on("click", ".edit-owner", function() {
      const ownerId = $(this).data("id");
      window.location.href = `/admin/owner/edit/${ownerId}`;
    });
    
    // Change status handler
    $(document).on("click", ".change-status", function() {
      const ownerId = $(this).data("id");
      const currentStatus = $(this).data("value");
      const isActive = currentStatus === 1 || currentStatus === '1';
      
      Swal.fire({
        title: isActive ? 'Deactivate Owner?' : 'Activate Owner?',
        text: isActive ? 'Do you want to deactivate this owner?' : 'Do you want to activate this owner?',
        icon: isActive ? 'warning' : 'question',
        showCancelButton: true,
        confirmButtonColor: isActive ? '#ffc107' : '#28a745',
        cancelButtonColor: '#6c757d',
        confirmButtonText: isActive ? 'Yes, deactivate!' : 'Yes, activate!',
        cancelButtonText: 'Cancel'
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: '/admin/owner/change-status',
            method: 'POST',
            data: { driver_id: ownerId },
            success: function(response) {
              if (response.success) {
                pagination.loadData(pagination.currentPage);
                Swal.fire('Success!', response.message || 'Owner status has been changed.', 'success');
              } else {
                Swal.fire('Error!', response.message || 'Failed to change owner status.', 'error');
              }
            },
            error: function(xhr) {
              const errorMessage = xhr.responseJSON?.message || 'An error occurred while changing owner status.';
              Swal.fire('Error!', errorMessage, 'error');
            }
          });
        }
      });
    });
    
    // Delete selected owners
    $('#deleteSelected').click(function() {
      const selectedOwners = $('.select-owner:checked').map(function() {
        return $(this).val();
      }).get();
      
      if (selectedOwners.length === 0) {
        toastr.warning('Please select owners to delete');
        return;
      }
      
      Swal.fire({
        title: 'Are you sure?',
        text: `You are about to delete ${selectedOwners.length} owner(s). This action cannot be undone!`,
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#d33',
        cancelButtonColor: '#3085d6',
        confirmButtonText: 'Yes, delete them!',
        cancelButtonText: 'Cancel'
      }).then((result) => {
        if (result.isConfirmed) {
          $.ajax({
            url: '/admin/owner/delete',
            method: 'POST',
            data: { driver_id: selectedOwners },
            success: function(response) {
              if (response.success) {
                pagination.loadData(pagination.currentPage);
                Swal.fire('Deleted!', response.message || 'Owners have been deleted.', 'success');
                $('#selectAll').prop('checked', false);
              } else {
                Swal.fire('Error!', response.message || 'Failed to delete owners.', 'error');
              }
            },
            error: function(xhr) {
              const errorMessage = xhr.responseJSON?.message || 'An error occurred while deleting owners.';
              Swal.fire('Error!', errorMessage, 'error');
            }
          });
        }
      });
    });
    
    // Select all checkbox
    $('#selectAll').change(function() {
      $('.select-owner').prop('checked', $(this).is(':checked'));
    });
  });
</script>

<%- footer %>