bug fix in clients controller
This commit is contained in:
Kwesi Banson Jnr
125
resources/views/clients/export-pdf.blade.php
Normal file
125
resources/views/clients/export-pdf.blade.php
Normal file
@@ -0,0 +1,125 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Clients Report</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
.header {
|
||||
margin-bottom: 30px;
|
||||
border-bottom: 2px solid #5c4df0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.header h2 {
|
||||
margin: 0;
|
||||
color: #5c4df0;
|
||||
font-size: 22px;
|
||||
}
|
||||
.header p {
|
||||
margin: 5px 0 0;
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
}
|
||||
th, td {
|
||||
padding: 8px 10px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
th {
|
||||
background-color: #f8f9fa;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
tbody tr:nth-child(even) {
|
||||
background-color: #fdfdfd;
|
||||
}
|
||||
.badge {
|
||||
padding: 3px 6px;
|
||||
font-size: 10px;
|
||||
font-weight: bold;
|
||||
border-radius: 4px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.badge-active { background-color: #d1e7dd; color: #0f5132; }
|
||||
.badge-other { background-color: #fff3cd; color: #664d03; }
|
||||
.footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
font-size: 10px;
|
||||
color: #aaa;
|
||||
border-top: 1px solid #eee;
|
||||
padding-top: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Report Header -->
|
||||
<div class="header">
|
||||
<h2>Click ERP - Client Master Report</h2>
|
||||
<p>Generated on: {{ date('d M Y, h:i A') }} • Total Records: {{ count($clients) }}</p>
|
||||
</div>
|
||||
|
||||
<!-- Data Table -->
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th>Client Name</th>
|
||||
<th>Contact Person</th>
|
||||
<th>Email</th>
|
||||
<th>Pay Mode</th>
|
||||
<th>Country</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@forelse($clients as $index => $client)
|
||||
<tr>
|
||||
<td>{{ $index + 1 }}</td>
|
||||
<td><strong>{{ $client->name }}</strong></td>
|
||||
<td>{{ $client->contact_person ?? 'N/A' }}</td>
|
||||
<td>{{ $client->email ?? 'N/A' }}</td>
|
||||
<td><span style="text-transform: uppercase;">{{ $client->pay_mode ?? 'N/A' }}</span></td>
|
||||
<td>{{ $client->country ?? 'N/A' }}</td>
|
||||
<td>
|
||||
@php
|
||||
$isActive = $client->status === 'Live' || $client->status === 'active';
|
||||
@endphp
|
||||
<span class="badge {{ $isActive ? 'badge-active' : 'badge-other' }}">
|
||||
{{ $client->status ?? 'N/A' }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" style="text-align: center; color: #777; padding: 20px;">No client records found matching the criteria.</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer">
|
||||
Click ERP • Confidential Business Report
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -32,6 +32,13 @@
|
||||
border-color: #dc3545;
|
||||
}
|
||||
.avatar-circle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-size: 0.85rem; }
|
||||
/* Ensure all Select2 containers expand to fill their grid column width */
|
||||
.select2-container {
|
||||
width: 100% !important;
|
||||
}
|
||||
.select2-selection--multiple {
|
||||
min-height: 38px !important;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@@ -46,12 +53,10 @@
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h4 class="fw-bold mb-1">Client Management</h4>
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage clients, payment modes, services etc.</p>
|
||||
<p class="text-secondary mb-0" style="font-size: 0.9rem;">Manage clients, payment modes, contact person, services etc.</p>
|
||||
</div>
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary d-flex align-items-center dropdown-toggle" type="button" data-bs-toggle="dropdown" style="border-radius: 8px;">
|
||||
<i class="bi bi-download me-2"></i> Export
|
||||
</button>
|
||||
|
||||
<ul class="dropdown-menu shadow-sm border-0">
|
||||
<li>
|
||||
<a class="dropdown-item btn-export d-flex align-items-center" href="#" data-format="csv">
|
||||
@@ -73,9 +78,9 @@
|
||||
|
||||
<!-- Data Table Card -->
|
||||
<div class="content-card">
|
||||
<!-- Filters -->
|
||||
<!-- Filters & Export Header -->
|
||||
<div class="p-3 border-bottom bg-light bg-opacity-50">
|
||||
<div class="row g-3">
|
||||
<div class="row g-3 align-items-center">
|
||||
<div class="col-md-4">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text bg-white border-end-0 text-secondary"><i class="bi bi-search"></i></span>
|
||||
@@ -89,8 +94,6 @@
|
||||
<option value="ussd">USSD</option>
|
||||
<option value="airtime">Airtime</option>
|
||||
<option value="voice">Voice</option>
|
||||
<option value="aggregatevoice">Aggregation Voice</option>
|
||||
<option value="voice">Voice</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-2">
|
||||
@@ -107,9 +110,28 @@
|
||||
<option value="Prospective">Prospective</option>
|
||||
<option value="Cancelled">Cancelled</option>
|
||||
<option value="Inactive">Inactive</option>
|
||||
<option value="Prospective">Prospective</option>
|
||||
</select>
|
||||
</div>
|
||||
<!-- Moved Export Button Here -->
|
||||
<div class="col-md-2 text-end">
|
||||
<div class="dropdown">
|
||||
<button class="btn btn-outline-secondary dropdown-toggle w-100 bg-white" type="button" data-bs-toggle="dropdown">
|
||||
<i class="bi bi-download me-1"></i> Export
|
||||
</button>
|
||||
<ul class="dropdown-menu shadow-sm border-0 w-100">
|
||||
<li>
|
||||
<a class="dropdown-item btn-export d-flex align-items-center" href="#" data-format="csv">
|
||||
<i class="bi bi-filetype-csv me-2 text-success"></i> Export CSV
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="dropdown-item btn-export d-flex align-items-center" href="#" data-format="pdf">
|
||||
<i class="bi bi-filetype-pdf me-2 text-danger"></i> Export PDF
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -120,6 +142,7 @@
|
||||
<tr>
|
||||
<th>Client Details</th>
|
||||
<th>Primary Contact</th>
|
||||
<th>Account Manager</th>
|
||||
<th>Services</th>
|
||||
<th>Billing</th>
|
||||
<th>Date Added</th>
|
||||
@@ -147,405 +170,11 @@
|
||||
|
||||
@push('modals')
|
||||
@include('clients.partials.create')
|
||||
@include('clients.partials.edit-modal')
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#clientService').select2({
|
||||
placeholder: "-- Select Services --",
|
||||
allowClear: true,
|
||||
dropdownParent: $('#createClientModal')
|
||||
});
|
||||
let searchTimer;
|
||||
|
||||
// Initialize the table on page load
|
||||
fetchClients();
|
||||
|
||||
// Event Listeners for Search and Filters
|
||||
$('#searchClient').on('keyup', function() {
|
||||
clearTimeout(searchTimer);
|
||||
// Debounce the search so we don't spam the server on every keystroke
|
||||
searchTimer = setTimeout(() => fetchClients(1), 400);
|
||||
});
|
||||
|
||||
$('#filterService, #filterBilling').on('change', function() {
|
||||
fetchClients(1);
|
||||
});
|
||||
$('#filterService, #filterStatus').on('change', function() {
|
||||
fetchClients(1);
|
||||
});
|
||||
// Handle Pagination Clicks dynamically
|
||||
$(document).on('click', '.page-link-ajax', function(e) {
|
||||
e.preventDefault();
|
||||
let page = $(this).data('page');
|
||||
if (page) fetchClients(page);
|
||||
});
|
||||
|
||||
$('#btnOpenClientModal').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
// Replace '#createClientModal' with the actual ID of the modal in your clients.partials.create file
|
||||
$('#createClientModal').modal('show');
|
||||
});
|
||||
|
||||
$(document).on('click', '.btn-view-client', function(e) {
|
||||
e.preventDefault();
|
||||
let clientId = $(this).data('id');
|
||||
|
||||
// OPTION A: Redirect to a view page
|
||||
window.location.href = base_url + "/clients/" + clientId;
|
||||
|
||||
// OPTION B: If you are using a View Modal instead, uncomment this:
|
||||
// fetchClientDetailsForView(clientId);
|
||||
// $('#viewClientModal').modal('show');
|
||||
});
|
||||
|
||||
|
||||
$(document).on('click', '.btn-edit-client', function(e) {
|
||||
e.preventDefault();
|
||||
let clientId = $(this).data('id');
|
||||
|
||||
// OPTION A: Redirect to an edit page
|
||||
window.location.href = base_url + "/clients/" + clientId + "/edit";
|
||||
|
||||
// OPTION B: If you are using an Edit Modal instead, uncomment this:
|
||||
// fetchClientDetailsForEdit(clientId);
|
||||
// $('#editClientModal').modal('show');
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------
|
||||
// AJAX FORM SUBMISSION (Create Client)
|
||||
// ---------------------------------------------------------
|
||||
$('#createClientForm').on('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let $form = $(this);
|
||||
let $submitBtn = $('#btnSubmitClient');
|
||||
let originalText = $submitBtn.html();
|
||||
let $alertBox = $('#clientModalAlert');
|
||||
|
||||
// 1. Show loading state & reset previous alerts/errors
|
||||
$submitBtn.html('<span class="spinner-border spinner-border-sm me-2"></span>Saving...').prop('disabled', true);
|
||||
$alertBox.html('');
|
||||
$form.find('.is-invalid').removeClass('is-invalid');
|
||||
$form.find('.invalid-feedback').remove();
|
||||
|
||||
$.ajax({
|
||||
url: $form.attr('action'),
|
||||
method: 'POST',
|
||||
data: $form.serialize(),
|
||||
success: function(response) {
|
||||
if(response.success) {
|
||||
// Show success message inside the modal
|
||||
$alertBox.html(`
|
||||
<div class="alert alert-success d-flex align-items-center" role="alert">
|
||||
<i class="bi bi-check-circle-fill me-2"></i>
|
||||
<div>${response.message || 'Client added successfully!'}</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
// Refresh the background datatable
|
||||
fetchClients(1);
|
||||
|
||||
// Optional: Automatically close the modal after 2 seconds
|
||||
setTimeout(() => {
|
||||
$('#createClientModal').modal('hide');
|
||||
$form[0].reset();
|
||||
$alertBox.html('');
|
||||
}, 2000);
|
||||
}
|
||||
},
|
||||
error: function(xhr) {
|
||||
if (xhr.status === 401) {
|
||||
window.location.href = base_url + '/login';
|
||||
}
|
||||
// Handle Laravel Validation Errors (Status 422)
|
||||
if (xhr.status === 422) {
|
||||
let errors = xhr.responseJSON.errors;
|
||||
|
||||
// Show general warning alert at the top
|
||||
$alertBox.html(`
|
||||
<div class="alert alert-danger d-flex align-items-center" role="alert">
|
||||
<i class="bi bi-exclamation-triangle-fill me-2"></i>
|
||||
<div>Please fix the errors highlighted below.</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
// Highlight specific fields
|
||||
$.each(errors, function(key, value) {
|
||||
// Account for array names like services[]
|
||||
let fieldName = key;
|
||||
if(key === 'services') fieldName = 'services[]';
|
||||
|
||||
let $input = $form.find('[name="' + fieldName + '"]');
|
||||
|
||||
if ($input.length) {
|
||||
$input.addClass('is-invalid');
|
||||
// Append the specific error message right below the field
|
||||
$input.parent().append('<div class="invalid-feedback d-block fw-medium">' + value[0] + '</div>');
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// Handle standard 500 server errors
|
||||
$alertBox.html(`
|
||||
<div class="alert alert-danger d-flex align-items-center" role="alert">
|
||||
<i class="bi bi-x-circle-fill me-2"></i>
|
||||
<div>An unexpected server error occurred. Please try again.</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
// Restore the button to its original state
|
||||
$submitBtn.html(originalText).prop('disabled', false);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Clear alerts and errors when the modal is closed manually
|
||||
$('#createClientModal').on('hidden.bs.modal', function () {
|
||||
$('#createClientForm')[0].reset();
|
||||
$('#clientService').val(null).trigger('change');
|
||||
$('#clientModalAlert').html('');
|
||||
$('#createClientForm').find('.is-invalid').removeClass('is-invalid');
|
||||
$('#createClientForm').find('.invalid-feedback').remove();
|
||||
});
|
||||
// AJAX Fetch Function
|
||||
function fetchClients(page = 1) {
|
||||
const search = $('#searchClient').val();
|
||||
const service = $('#filterService').val();
|
||||
const billing = $('#filterBilling').val();
|
||||
const status = $('#filterStatus').val();
|
||||
|
||||
// Show loading state
|
||||
$('#clientTableBody').html(`
|
||||
<tr>
|
||||
<td colspan="7" class="text-center py-5">
|
||||
<div class="spinner-border text-primary" role="status" style="color: #5c4df0 !important;"></div>
|
||||
<div class="mt-2 text-secondary" style="font-size: 0.85rem;">Loading clients...</div>
|
||||
</td>
|
||||
</tr>
|
||||
`);
|
||||
|
||||
$.ajax({
|
||||
url: base_url + "/clients/data",
|
||||
type: "GET",
|
||||
data: { page: page, search: search, service: service, billing: billing, status:status },
|
||||
success: function(response) {
|
||||
renderTable(response.data);
|
||||
renderPagination(response);
|
||||
},
|
||||
error: function() {
|
||||
$('#clientTableBody').html('<tr><td colspan="6" class="text-center text-danger py-4">Failed to load data. Please try again.</td></tr>');
|
||||
}
|
||||
});
|
||||
}
|
||||
// Handle Export Actions
|
||||
$('.btn-export').on('click', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get current filter values
|
||||
const search = $('#searchClient').val();
|
||||
const service = $('#filterService').val();
|
||||
const billing = $('#filterBilling').val();
|
||||
const status = $('#filterStatus').val();
|
||||
const format = $(this).data('format'); // 'csv' or 'pdf'
|
||||
|
||||
// Build the query string
|
||||
const queryParams = $.param({
|
||||
search: search,
|
||||
service: service,
|
||||
billing: billing,
|
||||
status : billing,
|
||||
format: format
|
||||
});
|
||||
|
||||
window.location.href = "{{ route('clients.export') }}?" + queryParams;
|
||||
});
|
||||
// Render Table Rows
|
||||
function renderTableOld(clients) {
|
||||
let html = '';
|
||||
|
||||
if (clients.length === 0) {
|
||||
$('#clientTableBody').html('<tr><td colspan="6" class="text-center text-secondary py-4">No clients found matching your criteria.</td></tr>');
|
||||
return;
|
||||
}
|
||||
|
||||
clients.forEach(client => {
|
||||
// Extract initials for the avatar
|
||||
let initials = client.name.substring(0, 2).toUpperCase();
|
||||
|
||||
let servicesHtml = '<span class="text-secondary" style="font-size: 0.8rem;">N/A</span>';
|
||||
if (client.services) {
|
||||
try {
|
||||
let servicesArray = JSON.parse(client.services);
|
||||
|
||||
// 2. Map each service into a Bootstrap badge
|
||||
if (Array.isArray(servicesArray) && servicesArray.length > 0) {
|
||||
servicesHtml = servicesArray.map(service =>
|
||||
`<span class="badge bg-secondary bg-opacity-10 text-secondary border me-1 mb-1" style="font-size: 0.7rem;">${service}</span>`
|
||||
).join('');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Could not parse services for client: " + client.name);
|
||||
}
|
||||
}
|
||||
// Status Badge Logic
|
||||
let statusBadge = client.status === 'active'
|
||||
? '<span class="badge bg-success bg-opacity-10 text-success px-2 py-1"><i class="bi bi-check-circle me-1"></i>Active</span>'
|
||||
: '<span class="badge bg-warning bg-opacity-10 text-warning px-2 py-1"><i class="bi bi-clock me-1"></i>' + client.status + '</span>';
|
||||
|
||||
html += `
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-circle bg-primary bg-opacity-10 text-primary me-3">${initials}</div>
|
||||
<div>
|
||||
<div class="fw-bold text-dark">${client.name}</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;"><i class="bi bi-geo-alt me-1"></i>${client.country || 'N/A'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold">${client.contact_person || 'N/A'}</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;">${client.email || 'N/A'}</div>
|
||||
</td>
|
||||
<td style="max-width: 200px; white-space: normal;">
|
||||
${servicesHtml}
|
||||
</td>
|
||||
<td><span class="badge bg-info bg-opacity-10 text-info text-uppercase">${client.pay_mode || 'N/A'}</span></td>
|
||||
<td><span class="fw-medium text-primary">${client.created_at}</span></td>
|
||||
<td>${statusBadge}</td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-light text-primary me-1 btn-view-client"
|
||||
data-id="${client.id}">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-light text-primary me-1 btn-edit-client"
|
||||
data-id="${client.id}">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
$('#clientTableBody').html(html);
|
||||
}
|
||||
function renderTable(clients) {
|
||||
let html = '';
|
||||
|
||||
if (clients.length === 0) {
|
||||
$('#clientTableBody').html('<tr><td colspan="7" class="text-center text-secondary py-4">No clients found matching your criteria.</td></tr>');
|
||||
return;
|
||||
}
|
||||
|
||||
clients.forEach(client => {
|
||||
// 1. Extract initials for the avatar
|
||||
let initials = client.name.substring(0, 2).toUpperCase();
|
||||
|
||||
// 2. Handle Services
|
||||
let servicesHtml = '<span class="text-secondary" style="font-size: 0.8rem;">N/A</span>';
|
||||
if (client.services) {
|
||||
try {
|
||||
let servicesArray = JSON.parse(client.services);
|
||||
if (Array.isArray(servicesArray) && servicesArray.length > 0) {
|
||||
servicesHtml = servicesArray.map(service =>
|
||||
`<span class="badge bg-secondary bg-opacity-10 text-secondary border me-1 mb-1" style="font-size: 0.7rem;">${service}</span>`
|
||||
).join('');
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Could not parse services for client: " + client.name);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Status Badge Logic
|
||||
let statusBadge = client.status === 'Live' || client.status === 'active'
|
||||
? '<span class="badge bg-success bg-opacity-10 text-success px-2 py-1"><i class="bi bi-check-circle me-1"></i>Active</span>'
|
||||
: '<span class="badge bg-warning bg-opacity-10 text-warning px-2 py-1"><i class="bi bi-clock me-1"></i>' + client.status + '</span>';
|
||||
|
||||
// 4. Format the Date (Human Friendly)
|
||||
let formattedDate = 'N/A';
|
||||
if (client.created_at) {
|
||||
const dateObj = new Date(client.created_at);
|
||||
// Formats to: "23 Jul 2026"
|
||||
formattedDate = dateObj.toLocaleDateString('en-GB', {
|
||||
day: 'numeric',
|
||||
month: 'short',
|
||||
year: 'numeric'
|
||||
});
|
||||
}
|
||||
|
||||
html += `
|
||||
<tr>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<div class="avatar-circle bg-primary bg-opacity-10 text-primary me-3">${initials}</div>
|
||||
<div>
|
||||
<div class="fw-bold text-dark">${client.name}</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;"><i class="bi bi-geo-alt me-1"></i>${client.country || 'N/A'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="fw-semibold">${client.contact_person || 'N/A'}</div>
|
||||
<div class="text-secondary" style="font-size: 0.8rem;">${client.email || 'N/A'}</div>
|
||||
</td>
|
||||
<td style="max-width: 200px; white-space: normal;">
|
||||
${servicesHtml}
|
||||
</td>
|
||||
<td><span class="badge bg-info bg-opacity-10 text-info text-uppercase">${client.pay_mode || 'N/A'}</span></td>
|
||||
|
||||
<!-- Updated Date Column -->
|
||||
<td><span class="fw-medium text-primary">${formattedDate}</span></td>
|
||||
|
||||
<td>${statusBadge}</td>
|
||||
<td class="text-end">
|
||||
<button class="btn btn-sm btn-light text-primary me-1 btn-view-client"
|
||||
data-id="${client.id}">
|
||||
<i class="bi bi-eye"></i>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-light text-primary me-1 btn-edit-client"
|
||||
data-id="${client.id}">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
|
||||
$('#clientTableBody').html(html);
|
||||
}
|
||||
|
||||
// Render Pagination Links
|
||||
function renderPagination(response) {
|
||||
// Update "Showing X to Y of Z entries"
|
||||
$('#paginationInfo').text(`Showing ${response.from || 0} to ${response.to || 0} of ${response.total} entries`);
|
||||
|
||||
let paginationHtml = '';
|
||||
|
||||
// Only show pagination if there is more than 1 page
|
||||
if (response.last_page > 1) {
|
||||
// Previous Button
|
||||
let prevDisabled = response.current_page === 1 ? 'disabled' : '';
|
||||
paginationHtml += `<li class="page-item ${prevDisabled}"><a class="page-link page-link-ajax" href="#" data-page="${response.current_page - 1}">Previous</a></li>`;
|
||||
|
||||
// Page Numbers
|
||||
for (let i = 1; i <= response.last_page; i++) {
|
||||
let activeClass = response.current_page === i ? 'active' : '';
|
||||
let style = response.current_page === i ? 'style="background-color: #5c4df0; border-color: #5c4df0;"' : 'class="page-link text-dark"';
|
||||
|
||||
paginationHtml += `<li class="page-item ${activeClass}"><a class="page-link page-link-ajax" href="#" ${style} data-page="${i}">${i}</a></li>`;
|
||||
}
|
||||
|
||||
// Next Button
|
||||
let nextDisabled = response.current_page === response.last_page ? 'disabled' : '';
|
||||
paginationHtml += `<li class="page-item ${nextDisabled}"><a class="page-link page-link-ajax" href="#" data-page="${response.current_page + 1}">Next</a></li>`;
|
||||
}
|
||||
|
||||
$('#paginationLinks').html(paginationHtml);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="{{ asset('public/assets/js/client-index.js') }}"></script>
|
||||
@endpush
|
||||
@@ -22,7 +22,13 @@
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Location / Country *</label>
|
||||
<!-- Changed name from 'location' to 'country' -->
|
||||
<input type="text" class="form-control" id="country" name="country" required placeholder="e.g. Ghana">
|
||||
<!-- <input type="text" class="form-control" id="country" name="country" required placeholder="e.g. Ghana"> -->
|
||||
<!-- <div class="col-md-4"> -->
|
||||
<label class="form-label text-muted small fw-bold">Country</label>
|
||||
<select name="country" id="create_country" class="form-select w-100">
|
||||
<option value="">Select Country</option>
|
||||
</select>
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Company Type *</label>
|
||||
|
||||
@@ -51,10 +51,8 @@
|
||||
<div class="col-md-6">
|
||||
<label class="form-label text-muted small fw-bold">Message Types</label>
|
||||
<select name="message_types[]" id="edit_message_types" class="form-select select2-tags" multiple="multiple">
|
||||
<option value="SMS">SMS</option>
|
||||
<option value="USSD">USSD</option>
|
||||
<option value="Voice">Voice</option>
|
||||
<option value="Email">Email</option>
|
||||
<option value="International">International</option>
|
||||
<option value="Local">Local</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
@@ -89,7 +87,9 @@
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<label class="form-label text-muted small fw-bold">Country</label>
|
||||
<input type="text" name="country" id="edit_country" class="form-control">
|
||||
<select name="country" id="edit_country" class="form-select w-100">
|
||||
<option value="">Select Country</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user