File: //var/www/html/owlcrm/resources/views/users/task/index.blade.php
@extends('adminlte::page')
@section('title', 'OWL CRM Dashboard')
@section('content_header')
<h1>Task</h1>
<small>Manage Task</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('task.create') }}" class="btn btn-dark"><i class="fas fa-plus"></i> Add Task</a>
</div>
</div>
<div class="card-body">
@if (session('success'))
<h6 class = 'alert alert-success'>
{{ Session('success') }}
</h6>
@endif
@if (session('error'))
<h6 class="alert alert-danger">
{{ session('error') }}
</h6>
@endif
<form id="search-form" role="form">
<div class="form-group">
<label for="search">Search</label>
<x-adminlte-input class="form-control" id="search_keyword" name="search_keyword"
placeholder="Enter Subject" />
</div>
<div class="form-group">
<label for="status">Status</label>
@php
$options = ['all' => 'All', STATUS_DISABLED => 'Disabled', STATUS_ENABLED => 'Active'];
@endphp
<x-adminlte-select name="status_filter" id="status_filter">
<x-adminlte-options :options="$options" empty-option="Select an option..." />
</x-adminlte-select>
</div>
<div class="form-group">
<label for="filterByUser">Filter by user</label>
@php
$options = ['assigned_to_me' => 'Assigned to me', 'created_by_me' => 'Created by me', 'all_tasks' => 'All tasks'];
@endphp
<x-adminlte-select name="filter_by_user" id="filter_by_user" >
<x-adminlte-options :options="$options" empty-option="Select an option..." />
</x-adminlte-select>
</div>
@php
$config = [
'showDropdowns' => true,
'cancelButtonClasses' => 'btn-danger',
'locale' => ['format' => 'YYYY/MM/DD'],
];
@endphp
</form>
<div class="table-responsive w-100">
<table class="table table-bordered w-100 yajra-datatable">
<thead>
<tr>
<th>Subject</th>
<th>Start Date</th>
<th>Due Date</th>
<th>Priority</th>
<th>Assigned To</th>
{{-- <th>Created By</th> --}}
<th>Entity Type</th>
{{-- <th>Entity Id</th> --}}
{{-- <th>Description</th> --}}
<th>State</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</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': "{{ route('task.index') }}",
'data': function(data) {
// Read values
var search_keyword = $('#search_keyword').val();
var shop_filter = $('#shop_filter option:selected').val();
var status_filter = $('#status_filter option:selected').val();
var filter_by_user = $('#filter_by_user option:selected').val();
// Append to data
data.search_keyword = search_keyword;
data.shop_filter = shop_filter;
data.status_filter = status_filter;
data.filter_by_user = filter_by_user;
;
}
},
columns: [
/*{data: 'checkbox', name: 'checkbox', orderable: false, searchable: false},*/
/* {data: 'id', name: 'ID'}, */
{
data: 'subject',
name: 'Subject'
},
{
data: 'start_date',
name: 'Start Date'
},
{
data: 'due_date',
name: 'Due Date'
},
{
data: 'priority',
name: 'Priority'
},
{
data: 'assigned_to',
name: 'Assigned To'
},
// {
// data: 'created_by',
// name: 'Created By'
// },
{
data: 'entity_type',
name: 'Entity Type'
},
// {
// data: 'entity_id',
// name: 'Entity Id'
// },
// {
// data: 'description',
// name: 'Description',
// },
{
data: 'state',
name: 'State',
},
{
data: 'status',
name: 'Status',
},
{
data: 'action',
name: 'Actions',
},
]
});
$('#search_keyword').keyup(function() {
dataTable.draw();
});
$('#shop_filter').on('change', function() {
dataTable.draw();
});
$('#status_filter').on('change', function() {
dataTable.draw();
});
$('#filter_by_user').on('change', function() {
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);
});
});
});
$(document).on('change', '.toggle-status', function() {
// alert('ngkjhgkljgkjg');
const $this = $(this); // Save reference to the toggle switch
const taskId = $this.data('id');
const isChecked = $this.is(':checked');
const statusLabel = $this.siblings('label');
if (!confirm(`Are you sure you want to ${isChecked ? 'mark as done' : 'mark as not done'}?`)) {
$this.prop('checked', !isChecked); // Revert the change
return;
}
$.ajax({
url: '/task/' + taskId + '/update-payment-status', // Update the route here
method: 'POST',
data: {
_token: '{{ csrf_token() }}',
payment_status: paymentStatus
},
success: function(response) {
console.log(response);
if (response.success) {
// Update the label based on the payment status
$(checkbox).next('label').text(paymentStatus ? 'Payment Done' : 'Mark as Done');
} else {
alert('Failed to update payment status. Please try again.');
}
},
error: function(xhr, status, error) {
console.log(xhr.responseText); // Log any errors from the server
alert('An error occurred. Please try again.');
}
})
});
</script>
@stop