/home2/mshostin/crm.ms-hostingladz.com/resources/views/pages/customer/index.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row">
<div class="col-md-12 my-4">
<div class="card shadow">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<h1>Customer Management</h1>
<a href="{{ route('customer-management.create') }}" class="btn btn-primary">Add Customer</a>
</div>
@if (session('success'))
<div class="alert alert-success">{{ session('success') }}</div>
@endif
<div class="toolbar mb-3">
{{-- <form class="form"> --}}
<div class="form-row">
<div class="form-group col-auto mr-auto">
</div>
<!-- <div class="form-group col-auto">
<label for="town-filter" class="sr-only">Town Filter</label>
<select class="form-control" id="town-filter">
<option value="">All Towns</option>
<option value="1">Town 1</option>
<option value="2">Town 2</option>
<option value="3">Town 3</option>
</select>
</div> -->
<div class="form-group col-auto">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" id="search1" value=""
placeholder="Search customers...">
</div>
<div class="form-group col-auto">
<button type="button" class="btn btn-secondary" id="reset-filters">
<i class="fa fa-refresh"></i> Reset
</button>
</div>
</div>
{{-- </form> --}}
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Customer#</th>
<th>Name / Phone</th>
<th>Address</th>
{{-- <th class="text-center text-uppercase text-xxs font-weight-bolder opacity-7">Total Trucks</th> --}}
<th>Actions</th>
</tr>
</thead>
<tbody id="user-table-body">
{{-- @if (count($user) > 0) --}}
@foreach ($customer as $key => $row)
<tr>
<td>
<p class="text-xs font-weight-bold mb-0">{{ $row->customer_id }}</p>
</td>
<td class="align-middle text-center text-sm">
<p class="text-xs mb-0">{{ $row->customer_name }}</p>
<p class="text-xs mb-0">{{ $row->phone }}</p>
</td>
<td class="align-middle text-center text-sm">
<p class="text-xs mb-0">{{ $row->address }}</p>
</td>
<td>
<a href="{{ route('customer-management.edit', $row->id) }}" class="btn btn-sm btn-warning">Edit</a>
</td>
</tr>
@endforeach
</tbody>
</table>
<nav aria-label="Table Paging" class="mb-0 text-muted">
<ul class="pagination justify-content-center mb-0" id="user-pagination">
{{-- <li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li> --}}
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var search = null;
$("input").keyup(function() {
search = $(this).val();
fetchDataOnReady();
});
$("#reset-filters").click(function(){
// Reset all filter values
search = null;
// Reset form fields
$("#search1").val('');
// Fetch data with reset filters
fetchDataOnReady();
});
$(document).ready(function() {
// Call the function on document ready
fetchDataOnReady();
});
function fetchDataOnClick(page) {
console.log(page);
$.ajax({
url: "{{ route('customer-management.index') }}",
type: "GET",
data: {
search: search,
type: 'ajax',
page: page
},
success: function(response) {
console.log("Data fetched successfully on click:", response);
generateTableRows(response
.data); // Assuming data is returned as 'data' property in the response
generatePagination(response); // Pass the entire response to generate pagination
// Process the response data as needed
},
error: function(xhr, status, error) {
console.error("Error fetching data on click:", error);
}
});
}
// Function to send AJAX request on document ready
function fetchDataOnReady() {
$.ajax({
url: "{{ route('customer-management.index') }}",
type: "GET",
data: {
type: 'ajax',
search: search,
},
success: function(response) {
console.log("Data fetched successfully on document ready:", response);
$('#user-table-body').empty(); // Clear existing content
generateTableRows(response
.data); // Assuming data is returned as 'data' property in the response
generatePagination(response);
// Process the response data as needed
},
error: function(xhr, status, error) {
console.error("Error fetching data on document ready:", error);
}
});
}
// Function to generate table rows
function generateTableRows(complaints) {
var html = '';
const currentUrl = window.location.href;
$.each(complaints, function(index, row) {
html += '<tr>';
html += '<td><p class="text-xs font-weight-bold mb-0">' + row.customer_id + '</p></td>';
html += '<td class="align-middle text-center text-sm">';
html += '<p class="text-xs mb-0">' + row.customer_name + '</p>';
html += '<p class="text-xs mb-0">' + row.phone + '</p>';
html += '</td>';
html += '<td class="align-middle text-center text-sm">';
html += '<p class="text-xs mb-0">' + row.address + '</p>';
html += '</td>';
html += '<td>';
html += ' <button class="btn btn-sm rounded dropdown-toggle more-horizontal text-muted" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">';
html += '<span class="text-muted sr-only">Action</span>';
html += '</button>';
html += '<div class="dropdown-menu dropdown-menu-right shadow">';
html += '<a class="dropdown-item" href="'+currentUrl+'/'+row.id+'/edit"><i class="fe fe-edit-2 fe-12 mr-3 text-muted"></i>Edit</a>';
html += '</div></td>';
html += '</tr>';
});
$('#user-table-body').html(html);
}
// Function to generate pagination
pre = 0;
nxt = 0;
function generatePagination(response) {
var html = '';
var totalPages = response.last_page;
var currentPage = response.current_page;
// Determine how many pages to show at the start and end
var startPages = 2;
var endPages = 2;
var middlePages = 2;
var range = middlePages * 2 + 1;
if (response.prev_page_url) {
pre = currentPage - 1;
html += '<li class="page-item"><a onclick="fetchDataOnClick(\'' + pre +
'\')" href="javascript:void(0);" class="page-link">Previous</a></li>';
}
// Show first few pages
for (var i = 1; i <= startPages && i <= totalPages; i++) {
html += '<li class="page-item ' + (i == currentPage ? 'active' : '') +
'"><a class="page-link pg-btn" onclick="fetchDataOnClick(\'' + i + '\')" data-attr="page=' + i +
'" href="javascript:void(0);">' + i + '</a></li>';
}
// Show "..." if there are hidden pages before the current page
if (currentPage > startPages + middlePages + 1) {
html += '<li class="page-item disabled"><a class="page-link">...</a></li>';
}
// Show pages around the current page
var start = Math.max(startPages + 1, currentPage - middlePages);
var end = Math.min(totalPages - endPages, currentPage + middlePages);
for (var i = start; i <= end; i++) {
html += '<li class="page-item ' + (i == currentPage ? 'active' : '') +
'"><a class="page-link pg-btn" onclick="fetchDataOnClick(\'' + i + '\')" data-attr="page=' + i +
'" href="javascript:void(0);">' + i + '</a></li>';
}
// Show "..." if there are hidden pages after the current page
if (currentPage < totalPages - endPages - middlePages) {
html += '<li class="page-item disabled"><a class="page-link">...</a></li>';
}
// Show last few pages
for (var i = totalPages - endPages + 1; i <= totalPages; i++) {
if (i > startPages) {
html += '<li class="page-item ' + (i == currentPage ? 'active' : '') +
'"><a class="page-link pg-btn" onclick="fetchDataOnClick(\'' + i + '\')" data-attr="page=' + i +
'" href="javascript:void(0);">' + i + '</a></li>';
}
}
if (response.next_page_url) {
nxt = currentPage + 1;
html += '<li class="page-item"><a class="page-link" onclick="fetchDataOnClick(\'' + nxt +
'\')" href="javascript:void(0);">Next</a></li>';
}
$('#user-pagination').html(html);
}
</script>
@endsection