/home/awneajlw/public_html/safeeyesjewelers.com/resources/views/admin/user/index.blade.php
@include('admin.component.header')
@include('admin.component.topnav')
@include('admin.component.navbar')
<div class="content-body">
<div class="container-fluid mt-3">
{{-- Users Card --}}
<div class="row">
<div class="col-lg-3 col-sm-6">
<div class="card gradient-1">
<div class="card-body">
<h3 class="card-title text-white">{{ __('SE.users') }}</h3>
<div class="d-inline-block">
<h2 class="text-white">{{ $users }}</h2>
</div>
<span class="float-right display-5 opacity-5"><i class="fa fa-users"></i></span>
</div>
</div>
</div>
</div>
{{-- Users Table --}}
<div class="row mt-4">
<div class="col">
<div class="card" style="overflow:auto; width:100% !important;">
<div class="card-header d-flex justify-content-between align-items-center">
<p class="m-0"><i class="fa fa-user"></i>
<button class="btn btn-sm btn-info ml-2 my-3 add" type="button">{{ __('SE.add_user') }}</button>
</p>
<form id="filter-form" class="d-flex align-items-center mb-0">
<input type="date" id="from_date" class="form-control me-2" name="from_date" style="width:40%;">
<label for="to_date" class="me-2 h4">-</label>
<input type="date" id="to_date" class="form-control me-2" name="to_date" style="width:40%;">
<button type="submit" class="btn btn-primary"><i class="fas fa-check"></i></button>
</form>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-hover user-listing table-listing" style="width:100%;">
<thead>
<tr>
<th>{{ __('SE.id') }}</th>
<th>{{ __('SE.branches') }}</th>
<th>{{ __('SE.name') }}</th>
<th>{{ __('SE.email') }}</th>
<th>{{ __('SE.status') }}</th>
<th>{{ __('SE.created_at') }}</th>
<th>{{ __('SE.action') }}</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{{-- Add User Modal --}}
<div class="modal fade" id="addUser" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header d-flex justify-content-between">
<h5 class="modal-title text-dark">{{ __('SE.add_user') }}</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body text-dark">
<form id="addUserForm" enctype="multipart/form-data">
<div id="sending-message" class="text-danger fw-bold"></div>
<br>
<div class="row d-flex justify-content-center align-items-center">
<div class="form-group col-md-12">
<label>{{ __('SE.branches') }}</label>
<select name="branch_id" id="branch_id" class="form-select" required>
<option selected disabled>{{ __('SE.select_branch') }}</option>
@foreach ($branches as $branch)
<option value="{{ $branch->id }}">{{ $branch->name }}</option>
@endforeach
</select>
<label>{{ __('SE.name') }}</label>
<input type="text" name="user_name" id="user_name" class="form-control" required>
<label>{{ __('SE.email') }}</label>
<input type="email" name="user_email" id="user_email" class="form-control" required>
<label>{{ __('SE.password') }}</label>
<input type="password" name="user_password" id="user_password" class="form-control" required>
<label>{{ __('SE.status') }}</label>
<select name="user_status" id="user_status" class="form-select">
<option value="pending">Pending</option>
<option value="active">Active</option>
<option value="block">Block</option>
</select>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">{{ __('SE.submit') }}</button>
</div>
</form>
</div>
</div>
</div>
</div>
{{-- Edit User Modal --}}
<div class="modal fade" id="editUser" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-header d-flex justify-content-between">
<h5 class="modal-title text-dark">{{ __('SE.edit_user') }}</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body text-dark">
<input type="hidden" name="user_id" id="user_id">
<div id="update-message" class="text-danger fw-bold"></div>
<div class="row d-flex justify-content-center align-items-center">
<div class="form-group col-md-12">
<label>{{ __('SE.branches') }}</label>
<select name="update_branch_id" id="update_branch_id" class="form-select">
<option selected disabled>{{ __('SE.select_branch') }}</option>
@foreach ($branches as $branch)
<option value="{{ $branch->id }}">{{ $branch->name }}</option>
@endforeach
</select>
<label>{{ __('SE.name') }}</label>
<input type="text" name="update_name" id="update_name" class="form-control">
<label>{{ __('SE.email') }}</label>
<input type="email" name="update_email" id="update_email" class="form-control">
<label>{{ __('SE.status') }}</label>
<select name="update_status" id="update_status" class="form-select">
<option value="pending">Pending</option>
<option value="active">Active</option>
<option value="block">Block</option>
</select>
</div>
</div>
<button type="submit" class="btn btn-primary float-lg-right" id="updateBtn">{{ __('SE.submit') }}</button>
</div>
</div>
</div>
</div>
</div>
</div>
@include('admin.component.footer')
{{-- Dependencies --}}
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js" defer></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap4.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap4.min.css">
<script type="text/javascript">
$(function () {
setTimeout(function () {
var table = $('.user-listing').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ url('/users-list') }}",
data: function (d) {
d.from_date = $('#from_date').val();
d.to_date = $('#to_date').val();
d.status = "{{ request()->get('status') }}"; // 👈 add this line
}
},
columns: [
{ data: 'id', name: 'id' },
{ data: 'branch.name', name: 'branch.name' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'status', name: 'status' },
{ data: 'created', name: 'created' },
{
data: null,
name: 'action',
orderable: false,
searchable: false,
render: function (data, type, row) {
if (row.status === 'pending') {
return `
<button class="btn btn-sm btn-warning update-status" data-id="${row.id}">
Update Status
</button>
`;
} else {
return `
<button class="btn btn-sm btn-info edit" value="${row.id}">Edit</button>
<button class="btn btn-sm btn-danger delete" value="${row.id}">Delete</button>
`;
}
}
},
],
order: [[0, 'desc']],
});
$('#filter-form').on('submit', function (e) {
e.preventDefault();
$('.user-listing').DataTable().ajax.reload();
});
}, 2000);
});
// Add User AJAX
$(document).on('click', '.add', function () {
$('#addUser').modal('show');
});
$('#addUserForm').submit(function (e) {
e.preventDefault();
var formData = new FormData(this);
$('#sending-message').text('Processing...');
$.ajax({
url: "{{ url('/add-user') }}",
type: "POST",
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
data: formData,
contentType: false,
processData: false,
success: function () {
$('#addUser').modal('hide');
$('.user-listing').DataTable().ajax.reload();
}
});
});
// Edit User
$(document).on('click', '.edit', function () {
var userId = $(this).val();
$('#editUser').modal('show');
$.get("edit-user/" + userId, function (response) {
$('#user_id').val(userId);
$('#update_name').val(response.user.name);
$('#update_branch_id').val(response.user.branch_id);
$('#update_email').val(response.user.email);
$('#update_status').val(response.user.status);
});
});
// Update User
$('#updateBtn').on('click', function () {
var data = {
userId: $('#user_id').val(),
name: $('#update_name').val(),
email: $('#update_email').val(),
status: $('#update_status').val(),
branch_id: $('#update_branch_id').val()
};
$.ajax({
url: "{{ url('/update-user') }}",
type: 'GET',
data: data,
success: function () {
$('#editUser').modal('hide');
$('.user-listing').DataTable().ajax.reload();
}
});
});
// Update User Status
$(document).on('click', '.update-status', function () {
var userId = $(this).data('id');
Swal.fire({
title: 'Change Status',
input: 'select',
inputOptions: {
'pending': 'Pending',
'active': 'Active',
'block': 'Block'
},
inputPlaceholder: 'Select status',
showCancelButton: true,
}).then((result) => {
if (result.isConfirmed) {
var status = result.value;
$.ajax({
url: "{{ url('/update-user') }}", // same as your edit method
type: 'GET', // keep consistent with your edit-user AJAX
data: {
userId: userId,
status: status
},
success: function () {
Swal.fire('Success', 'Status updated successfully!', 'success');
$('.user-listing').DataTable().ajax.reload();
},
error: function () {
Swal.fire('Error', 'Something went wrong!', 'error');
}
});
}
});
});
</script>