{{>header}}
<title>Users</title>
<div class="row p-2" style="margin: 0px !important;">
  <div class="col-md-12">
    <div class="card mt-2">
      <div class="card-header" style="background-color:white; color:#4B0F77;">
        <h4><b>Users</b></h4>
      </div>
      <div class="card-body p-2">
        <div id="example1_wrapper">
          <div class="row">
            <div class="col-sm-12">
              <ol class="float-sm-right"></ol>
            </div>
            <div class="col-sm-12 table-responsive">
              <table id="example143" class="table table-bordered table-striped" aria-describedby="example1_info">
                <thead>
                  <tr>
                    <th class="sorting" tabindex="0" aria-controls="example1">S.No</th>
                    <th class="sorting" tabindex="0" aria-controls="example1">First Name</th>
                    <th class="sorting" tabindex="0" aria-controls="example1">Last Name</th>
                    <th class="sorting" tabindex="0" aria-controls="example1">Email</th>
                    <th class="sorting" tabindex="0" aria-controls="example1">Mobile</th>
                    <th class="sorting" tabindex="0" aria-controls="example1">Status</th>
                    <th class="sorting" tabindex="0" aria-controls="example1">Action</th>
                  </tr>
                </thead>
                <tbody>
                  
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Update Modal -->
<div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h3 style="color: black; font-weight: bold;">Update Admin</h3>
      </div>
      <form method="post" enctype="multipart/form-data">
        <div class="modal-body">
          <label for="status" class="col-sm-3 col-form-label text-end">Status</label>
          <select name="status" id="status" class="form-control statuss">
            <option value="Active">Active</option>
            <option value="Inactive">Inactive</option>
          </select>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-success">Update</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModal" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 style="color: black; font-weight: 480;">Are you sure you want to delete this?</h4>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
        <a id="confirmDeleteBtn" href="#" class="btn btn-danger">Yes</a>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  $(document).ready(function () {
   $('#example143').DataTable({
      serverSide: true,
      ajax: {
        url: '/admin/v1/users/data', 
        type: 'GET'
      },
      pageLength: 10,
      lengthMenu: [10, 25, 50, 100],
      columns: [
        {
          data: null,
          render: function (data, type, row, meta) {
            return meta.row + meta.settings._iDisplayStart + 1; // S.No across pages
          }
        },
        { data: 'firstName', title: 'First Name', defaultContent: '' },
        { data: 'lastName', title: 'Last Name', defaultContent: '' },
        { data: 'email', title: 'Email', defaultContent: 'N/A' },
        { data: 'phone', title: 'Mobile', defaultContent: '' },
        { data: 'status', title: 'Status', defaultContent: '' },
        {
          data: '_id',
          title: 'Action',
          orderable: false,
          render: function (id, type, row) {
            return `
              <div class="actions d-flex justify-content-start align-items-center">
                <a href="/admin/v1/singleuser/${id}" class="btn btn-sm btn-info me-1" title="View">
                  <i class="fas fa-eye"></i>
                </a>
              </div>
            `;
          }
        }
      ]
    });

    // Optional: enhance fuzzy search
    $.fn.dataTable.ext.search.push(function (settings, data) {
      const searchValue = table.search().trim().toLowerCase().replace(/\s+/g, '');
      if (!searchValue) return true;
      return data.some(cell =>
        cell.toString().toLowerCase().replace(/\s+/g, '').includes(searchValue)
      );
    });

    // Redraw table on input
    $('#example22_filter input').on('input', function () {
      table.draw();
    });
  });
</script>
<script>
  $(document).ready(function () {
    $('#deleteModal').on('show.bs.modal', function (event) {
      const button = $(event.relatedTarget); // Button that triggered the modal
      const userId = button.data('id');      // Extract user ID
      const deleteUrl = '/admin/deleteuser/' + userId;
      $('#confirmDeleteBtn').attr('href', deleteUrl); // Set dynamic href
    });
  });
</script>
<script>
  $('#updateModal').on('show.bs.modal', function (event) {
    const button = $(event.relatedTarget);
    const modal = $(this);
    const userId = button.data('id');
    const status = button.data('status');

    modal.find('form').attr('action', '/admin/update-user/' + userId);
    modal.find('.statuss').val(status); // Pre-fill the status field
  });

</script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>

{{>footer}}

</html>