@extends('master-admin')

@section('title', 'Users')

@section('content')
<section class="py-8">
  <div class="bg-white rounded-xl shadow max-w-7xl mx-auto px-4">
    <div class="mb-6">
      <h3 class="text-2xl font-bold text-[#3a3058] mb-4">Users</h3>
      <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4">
        <div></div>
        <div id="datatable-search-container" class="w-full md:w-1/3 flex justify-end"></div>
      </div>
      <div class="overflow-x-auto rounded-lg">
        <form id="bulk-action-form" method="POST" action="">
          @csrf
          <div class="mb-2 flex items-center space-x-2">
            <select id="bulk-action-select" name="action" class="px-3 py-2 border rounded text-sm">
              <option value="">Bulk Actions</option>
              <option value="active">Mark Active</option>
              <option value="inactive">Mark Inactive</option>
              <option value="unblock_login">Unblock Login</option>
              <option value="login_block">Block Login</option>
              <option value="delete">Delete</option>
            </select>
            <button type="button" id="bulk-action-apply" class="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700 text-sm">Apply</button>
          </div>
          <table id="users-table" class="min-w-full divide-y divide-gray-200">
            <thead class="bg-[#3a3058] text-white">
              <tr>
                <th class="px-4 py-3"><input type="checkbox" id="select-all-users"></th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider bg-[#3a3058] text-white">ID</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider bg-[#3a3058] text-white">Name</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider bg-[#3a3058] text-white">Email</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider bg-[#3a3058] text-white">Mobile</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider bg-[#3a3058] text-white">Role</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider bg-[#3a3058] text-white">Status</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider bg-[#3a3058] text-white">Created At</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider bg-[#3a3058] text-white">Updated At</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider bg-[#3a3058] text-white">Active</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider bg-[#3a3058] text-white">Login Blocked</th>
                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider bg-[#3a3058] text-white">Actions</th>
              </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-100 text-lg">
              <!-- DataTables will populate rows here -->
            </tbody>
          </table>
        </form>
      </div>
      <div id="datatable-error" class="text-red-600 mt-4 hidden"></div>
      <input type="hidden" class="hidden fetchUsers" value="{{ route('admin.users.fetch') }}">
      <input type="hidden" class="hidden viewUserUrl" value="{{ url('admin/users/:id') }}">
      <input type="hidden" class="hidden editUserUrl" value="{{ url('admin/users/:id/edit') }}">
      <input type="hidden" class="hidden deleteUserUrl" value="{{ url('admin/users/:id') }}">
    </div>
  </div>
</section>
@endsection

@push('post_js')
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script>
// Bulk selection logic
$(document).on('change', '#select-all-users', function() {
  var checked = $(this).is(':checked');
  $('.user-select-checkbox').prop('checked', checked);
});
$(document).on('change', '.user-select-checkbox', function() {
  if (!$(this).is(':checked')) {
    $('#select-all-users').prop('checked', false);
  }
});
// Bulk action apply
$('#bulk-action-apply').on('click', function(e) {
  e.preventDefault();
  var action = $('#bulk-action-select').val();
  var ids = $('.user-select-checkbox:checked').map(function(){ return $(this).val(); }).get();
  if (!action || ids.length === 0) {
    alert('Select at least one user and an action.');
    return;
  }
  $.ajax({
    url: '{{ route('admin.users.bulk') }}',
    type: 'POST',
    data: { _token: $('input[name=_token]').val(), action: action, ids: ids },
    success: function(resp) {
      window.location.reload();
    },
    error: function(xhr) {
      alert('Bulk action failed.');
    }
  });
});
</script>
@endpush