File: /var/www/html/orbidirectory.com/resources/views/admin/users/index.blade.php
@extends('adminlte::page')
@section('title', 'ORBI Dashboard')
@section('content_header')
<h1>Transporters</h1>
{{-- <small>Manage Transporters</small> --}}
@stop
@section('content')
<div class="card card-dark">
<div class="card-header">
<h3 class="card-title"></h3>
<div class="card-tools">
<a href="{{ route('users.create') }}" class="btn btn-dark"><i class="fas fa-plus"></i> Add Transporters</a>
</div>
</div>
<div class="card-body">
{{-- @if (session('success'))
<h6 class = 'alert alert-success'>
{{ Session('success') }}
</h6>
@endif --}}
<form method="POST" id="search-form" role="form">
@csrf
<div class="form-group row">
<div class="col-md-3">
<label for="search">Search</label>
<x-adminlte-input class="form-control" id="search_keyword" name="search_keyword"
placeholder="Enter Name" />
</div>
<div class="col-md-3">
<label for="status">Status</label>
@php
$options = [
'all' => 'All',
App\Models\Transporter::STATUS_ACTIVE => 'Active',
App\Models\Transporter::STATUS_INACTIVE => 'Inactive',
App\Models\Transporter::STATUS_BANNED => 'Banned',
];
@endphp
<x-adminlte-select name="status_filter" id="status_filter">
<x-adminlte-options :options="$options" empty-option="Select status..." />
</x-adminlte-select>
</div>
<div class="col-md-3">
@php
$config = [
'showDropdowns' => true,
'cancelButtonClasses' => 'btn-danger',
'locale' => ['format' => 'YYYY/MM/DD'],
];
@endphp
<x-adminlte-date-range name="date_range_filter" id="date_range_filter"
placeholder="Select a date range..." label="Date Range" :config="$config" autocomplete="off">
<x-slot name="prependSlot">
{{-- <div class="input-group-text">
<i class="fas fa-calendar-alt"></i>
</div> --}}
</x-slot>
</x-adminlte-date-range>
</div>
<div class="col-md-3 mt-4 pt-2" id="bulk-delete-wrapper" style="display: none;">
<button id="delete-selected" class="btn btn-danger mb-3">Delete Selected</button>
</div>
</div>
</form>
<table class="table table-bordered yajra-datatable">
<thead>
<tr>
<th>All<br><input type="checkbox" id="select-all"></th>
<th>Name</th>
<th>Email</th>
<th>City</th>
<th>Status</th>
<th>Verification</th>
<th>Created Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
@stop
@section('js')
<script type="text/javascript">
$(function() {
var dataTable = $('.yajra-datatable').DataTable({
processing: true,
serverSide: true,
pageLength: 10,
searching: false,
'ajax': {
'url': "{{ url('/admin/users') }}",
'data': function(data) {
data.search_keyword = $('#search_keyword').val();
// data.status_filter = $('#status_filter option:selected').val();
data.status_filter = $('#status_filter option:selected').val();
var dateRange = $('#date_range_filter').val();
if (dateRange) {
data.date_range_filter = dateRange;
}
}
},
columns: [
/*{data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},*/
/* {data: 'id', name: 'ID'}, */
{
data: 'id',
name: 'id',
render: function(data, type, row) {
return '<input type="checkbox" class="row-checkbox" value="' + data +
'">';
},
orderable: false,
searchable: false
},
{
data: 'name',
name: 'name'
},
{
data: 'email',
name: 'email'
},
{
data: 'city',
name: 'city'
},
{
data: 'status',
name: 'status'
},
{
data: 'verification',
name: 'verification'
},
{
data: 'created_at',
name: 'created_at'
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
]
});
var table = $('.yajra-datatable').DataTable();
// Handle 'Select All' checkbox
$('#select-all').on('click', function() {
var rows = table.rows({
'search': 'applied'
}).nodes();
$('input[type="checkbox"].row-checkbox', rows).prop('checked', this.checked);
});
// Uncheck 'Select All' if any row is manually unchecked
$('.yajra-datatable tbody').on('change', '.row-checkbox', function() {
if (!this.checked) {
$('#select-all').prop('checked', false);
}
});
// Handle Delete Selected
$('#delete-selected').on('click', function() {
var selectedIds = [];
$('.row-checkbox:checked').each(function() {
selectedIds.push($(this).val());
});
if (selectedIds.length === 0) {
// alert("Please select at least one user to delete.");
return;
}
if (!confirm("Are you sure you want to delete the selected users?")) {
return;
}
$.ajax({
url: "{{ route('admin.users.bulk-delete') }}",
type: "POST",
data: {
ids: selectedIds,
_token: "{{ csrf_token() }}"
},
success: function(response) {
alert(response.message);
table.ajax.reload();
$('#select-all').prop('checked', false);
$('#bulk-delete-wrapper').hide();
},
error: function(xhr) {
alert("An error occurred while deleting.");
}
});
});
function toggleDeleteButton() {
var anyChecked = $('.row-checkbox:checked').length > 0;
$('#bulk-delete-wrapper').toggle(anyChecked);
}
$('#select-all').on('click', function() {
var rows = table.rows({
'search': 'applied'
}).nodes();
$('input[type="checkbox"].row-checkbox', rows).prop('checked', this.checked);
toggleDeleteButton();
});
$('.yajra-datatable tbody').on('change', '.row-checkbox', function() {
if (!this.checked) {
$('#select-all').prop('checked', false);
}
toggleDeleteButton();
});
$('#search_keyword').keyup(function() {
dataTable.draw();
});
$('#status_filter').on('change', function() {
dataTable.draw();
});
$('#date_range_filter').on('apply.daterangepicker', function(ev, picker) {
//console.log(picker.startDate.format('YYYY-MM-DD'));
//console.log(picker.endDate.format('YYYY-MM-DD'));
dataTable.draw();
});
$(document).on('click', '.update_status', function(e) {
e.preventDefault();
var $statusLink = $(this);
var current_status = $statusLink.data('current-status');
var new_status = current_status == 0 ? 1 : 0;
var new_status_label = new_status == 1 ? 'Active' : 'Inactive';
var url = $statusLink.data('update-url');
axios.put(url, {
new_status: new_status
})
.then(response => {
// Handle success response
if (response.data.status === 'success') {
$statusLink.hide();
$statusLink.siblings('.update_status').show();
$statusLink.data('current-status', new_status);
$('#success-container').html(response.data.message).show('slow');
// Hide success message after 5 seconds
setTimeout(function() {
$('#success-container').hide('slow');
}, 5000);
} else {
$('#error-container').html(response.data.message).show('slow');
// Hide error message after 5 seconds
setTimeout(function() {
$('#error-container').hide('slow');
}, 5000);
}
})
.catch(error => {
console.error(error);
});
});
$('#search-form').on('submit', function(e) {
e.preventDefault(); // prevent default form submission
$('.yajra-datatable').DataTable().draw(); // trigger datatable filter
});
});
</script>
@stop