gitkwesi/ERP-upgrade
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated client views and routes

Browse Source
This commit is contained in:
Kwesi Banson Jnr
2026-07-23 21:16:22 +00:00
parent 7b29bb278c
commit 08ded57875
10 changed files with 1685 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
resources/views/clients/index.blade.php
View File

@@ -3,8 +3,35 @@
@section('title', 'Click ERP - Client Management')
@push('styles')
<style>
.avatar-circle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: bold; font-size: 0.85rem; }
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
/* Custom styling to make Select2 match Bootstrap 5 form controls */
.select2-container .select2-selection--multiple {
min-height: 38px;
border: 1px solid #dee2e6;
border-radius: 0.375rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
background-color: #5c4df0;
border: none;
color: white;
border-radius: 4px;
padding: 2px 8px;
margin-top: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: white;
margin-right: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
color: #ffcccc;
background: transparent;
}
/* Fix for validation red border */
.is-invalid + .select2-container .select2-selection {
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; }
</style>
@endpush
@@ -83,6 +110,7 @@
<th>Primary Contact</th>
<th>Services</th>
<th>Billing</th>
<th>Date Added</th>
<th>Status</th>
<th class="text-end">Actions</th>
</tr>
@@ -110,8 +138,14 @@
@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
@@ -134,18 +168,13 @@
let page = $(this).data('page');
if (page) fetchClients(page);
});
// ---------------------------------------------------------
// 1. CREATE BUTTON (Open Modal)
// ---------------------------------------------------------
$('#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');
});
// ---------------------------------------------------------
// 2. VIEW BUTTON (Event Delegation for AJAX buttons)
// ---------------------------------------------------------
$(document).on('click', '.btn-view-client', function(e) {
e.preventDefault();
let clientId = $(this).data('id');
@@ -158,9 +187,7 @@
// $('#viewClientModal').modal('show');
});
// ---------------------------------------------------------
// 3. EDIT BUTTON (Event Delegation for AJAX buttons)
// ---------------------------------------------------------
$(document).on('click', '.btn-edit-client', function(e) {
e.preventDefault();
let clientId = $(this).data('id');
@@ -173,6 +200,100 @@
// $('#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) {
// 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();
@@ -224,7 +345,7 @@
window.location.href = "{{ route('clients.export') }}?" + queryParams;
});
// Render Table Rows
function renderTable(clients) {
function renderTableOld(clients) {
let html = '';
if (clients.length === 0) {
@@ -275,6 +396,91 @@
${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"

236
resources/views/clients/partials/create.blade.php
View File

@@ -1,108 +1,132 @@
<div class="modal fade" id="clientModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fw-bold" id="clientModalTitle">Add New Client</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="clientForm">
<div class="modal-body p-4">
<input type="hidden" id="clientId" name="id">
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Company Details</h6>
<div class="row g-3 mb-4">
<div class="col-md-6">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Company Name *</label>
<input type="text" class="form-control" id="clientName" name="name" required placeholder="e.g. Kasapreko Distilleries">
</div>
<div class="col-md-6">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Location / Country</label>
<input type="text" class="form-control" id="country" name="location" placeholder="">
</div>
<div class="col-md-6">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Company Type</label>
<select class="form-select" id="companyType" name="company_type">
<option value="" selected disabled>--Select--</option>
<option value="aggregator">Aggregator/Supplier</option>
<option value="enterprise">Enterprice</option>
<option value="hybrid">Hybrid</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Industry Type</label>
<select class="form-select" id="industryType" name="industry_type">
<option value="" selected disabled>--Select--</option>
<option value="aggregator">Aggregator SMS/USSD/Voice</option>
<option value="delivery">Delivery Service</option>
<option value="education">Education </option>
<option value="financial">Financial Institution</option>
<option value="games">Games & Gambling</option>
<option value="general">General</option>
<option value="government">Government</option>
<option value="health">Health</option>
<option value="hospitality">Hospitality</option>
<option value="mobile_network_operator">Mobile Network Operator</option>
<option value="ngo">NGO</option>
</select>
</div>
</div>
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Primary Contact</h6>
<div class="row g-3 mb-4">
<div class="col-md-4">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Full Name</label>
<input type="text" class="form-control" id="clientContact" name="contact_name" placeholder="Contact person">
</div>
<div class="col-md-4">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Email Address *</label>
<input type="email" class="form-control" id="clientEmail" name="email" required placeholder="name@company.com">
</div>
<div class="col-md-4">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Phone Number</label>
<input type="text" class="form-control" id="clientPhone" name="phone" placeholder="+233 ...">
</div>
</div>
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Service & Billing Configuration</h6>
<div class="row g-3">
<div class="col-md-4">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Primary Service</label>
<select class="form-select" id="clientService" name="service_type">
<option value="" selected disabled>--Select--</option>
<option value="sms">SMS</option>
<option value="ussd">USSD</option>
<option value="airtime">Airtime</option>
<option value="voice">Voice</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Billing Type</label>
<select class="form-select" id="clientBilling" name="billing_type">
<option value="" selected disabled>--Select--</option>
<option value="postpaid">Postpaid (Invoice)</option>
<option value="prepaid">Prepaid (Balance)</option>
</select>
</div>
<div class="col-md-4">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Account Status</label>
<select class="form-select" id="clientStatus" name="status">
<option value="" selected disabled>--Select--</option>
<option value="active">Active</option>
<option value="onboarding">Prospective</option>
<option value="suspended">In Discussion</option>
</select>
</div>
</div>
</div>
<div class="modal-footer bg-light">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn text-white fw-bold px-4" style="background-color: #5c4df0;" id="btnSubmitClient">
Save Client
</button>
</div>
</form>
<div class="modal fade" id="createClientModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title fw-bold" id="clientModalTitle">Add New Client</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form id="createClientForm" action="{{ route('clients.store') }}" method="POST">
@csrf
<div class="modal-body p-4">
<input type="hidden" id="clientId" name="id">
<div id="clientModalAlert"></div>
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Company Details</h6>
<div class="row g-3 mb-4">
<div class="col-md-6">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Company Name *</label>
<input type="text" class="form-control" id="clientName" name="name" required placeholder="e.g. Kasapreko Distilleries">
</div>
<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">
</div>
<div class="col-md-6">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Company Type *</label>
<select class="form-select" id="companyType" name="company_type" required>
<option value="" selected disabled>--Select--</option>
<option value="Aggregator/Supplier">Aggregator/Supplier</option>
<option value="Enterprise">Enterprise</option>
<option value="Hybrid">Hybrid</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Industry Type *</label>
<!-- Changed name from 'industry_type' to 'industry' -->
<select class="form-select" id="industryType" name="industry" required>
<option value="" selected disabled>--Select--</option>
<option value="Aggregator SMS/USSD/Voice">Aggregator SMS/USSD/Voice</option>
<option value="Delivery Service">Delivery Service</option>
<option value="Education">Education</option>
<option value="Financial Institution">Financial Institution</option>
<option value="Games & Gambling">Games & Gambling</option>
<option value="General">General</option>
<option value="Government">Government</option>
<option value="Health">Health</option>
<option value="Hospitality">Hospitality</option>
<option value="Mobile Network Operator">Mobile Network Operator</option>
<option value="NGO">NGO</option>
</select>
</div>
</div>
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Primary Contact</h6>
<div class="row g-3 mb-4">
<div class="col-md-4">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Full Name</label>
<!-- Changed name from 'contact_name' to 'contact_person' -->
<input type="text" class="form-control" id="clientContact" name="contact_person" placeholder="Contact person">
</div>
<div class="col-md-4">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Email Address *</label>
<input type="email" class="form-control" id="clientEmail" name="email" required placeholder="name@company.com">
</div>
<div class="col-md-4">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Phone Number</label>
<input type="text" class="form-control" id="clientPhone" name="phone" placeholder="+233 ...">
</div>
</div>
<h6 class="fw-bold mb-3 text-secondary text-uppercase" style="font-size: 0.75rem;">Service & Billing Information</h6>
<div class="row g-3">
<div class="col-md-12">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Primary Services *</label>
<select class="form-select" id="clientService" name="services[]" multiple required style="width: 100%;">
@foreach($service_types as $row)
<option value="{{ $row }}">{{ $row }}</option>
@endforeach
</select>
</div>
<div class="col-md-6">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Billing Type *</label>
<!-- Changed name from 'billing_type' to 'payment_mode' -->
<select class="form-select" id="clientBilling" name="payment_mode" required>
<option value="" selected disabled>--Select--</option>
<option value="Postpaid">Postpaid (Invoice)</option>
<option value="Prepaid">Prepaid (Balance)</option>
</select>
</div>
<div class="col-md-6">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Account Status *</label>
<select class="form-select" id="clientStatus" name="status" required>
<option value="" selected disabled>--Select--</option>
<option value="Live">Active / Live</option>
<option value="Prospective">Prospective</option>
<option value="Cancelled">Cancelled</option>
</select>
</div>
<!-- Added Missing Required Fields for the Controller -->
<div class="col-md-6 mt-3">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Currency *</label>
<select class="form-select" id="clientCurrency" name="currency" required>
<option value="" selected disabled>--Select--</option>
<option value="USD">USD</option>
<option value="EUR">EUR</option>
</select>
</div>
<div class="col-md-6 mt-3">
<label class="form-label text-secondary fw-semibold" style="font-size: 0.85rem;">Account Manager *</label>
<select class="form-select" id="authUserId" name="account_manager" required>
<option value="" selected disabled>--Select--</option>
<option value="{{ Auth()->user()->id }}">Assign to Me</option>
@foreach($staff_members as $id => $name)
<option value="{{ $id }}">{{ $name }}</option>
@endforeach
</select>
</div>
</div>
</div>
<div class="modal-footer bg-light">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" class="btn text-white fw-bold px-4" style="background-color: #5c4df0;" id="btnSubmitClient">
Save Client
</button>
</div>
</form>
</div>
</div>
</div>
</div>

474
resources/views/clients/show.blade.php Normal file
View File

@@ -0,0 +1,474 @@
@extends('layouts.masterbeta')
@section('page-title')
Clients | {{ $showclient->name }}
@endsection
@section('breadcrumbs')
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="{{ url('/clients') }}" class="text-decoration-none">Clients</a></li>
<li class="breadcrumb-item active" aria-current="page">{{ $showclient->name }}</li>
</ol>
</nav>
@endsection
@section('content')
<div class="container-fluid px-0">
<!-- Header Section -->
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="d-flex align-items-center">
<div class="avatar-circle bg-primary text-white me-3 d-flex justify-content-center align-items-center fw-bold shadow-sm" style="width: 54px; height: 54px; border-radius: 50%; font-size: 1.5rem;">
{{ substr($showclient->name, 0, 2) }}
</div>
<div>
<h3 class="fw-bold mb-1 text-dark">{{ $showclient->name }}</h3>
<div class="text-secondary d-flex align-items-center" style="font-size: 0.9rem;">
<i class="bi bi-geo-alt-fill text-danger me-1"></i> {{ $showclient->country ?? 'Unknown Location' }}
<span class="mx-2">•</span>
<i class="bi bi-building me-1"></i> {{ $showclient->company_type ?? 'N/A' }}
<span class="mx-2">•</span>
@if($showclient->status == 'Live' || $showclient->status == 'active')
<span class="badge bg-success bg-opacity-10 text-success"><i class="bi bi-check-circle me-1"></i>Active</span>
@else
<span class="badge bg-warning bg-opacity-10 text-warning"><i class="bi bi-clock me-1"></i>{{ ucfirst($showclient->status) }}</span>
@endif
</div>
</div>
</div>
<div>
<!-- Button to trigger the Edit modal or go to edit page -->
<button class="btn btn-primary fw-bold shadow-sm px-4" data-bs-toggle="modal" data-bs-target="#editClientModal">
<i class="bi bi-pencil-square me-2"></i> Edit Client
</button>
</div>
</div>
<!-- Main Grid Layout -->
<div class="row g-4 mb-5">
<!-- COLUMN 1 -->
<div class="col-lg-4 d-flex flex-column">
<!-- Company Profile -->
<div class="card border-light-subtle shadow-sm mb-4">
<div class="card-header bg-white py-3 border-bottom border-light">
<h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
<i class="bi bi-info-circle text-primary me-2"></i> Company Profile
</h6>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
<span class="text-muted small">Industry</span>
<span class="fw-medium text-dark">{{ $showclient->industry ?? 'N/A' }}</span>
</li>
<li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
<span class="text-muted small">Type</span>
<span class="fw-medium text-dark">{{ $showclient->type ?? 'N/A' }}</span>
</li>
<li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
<span class="text-muted small">Acquisition</span>
<span class="fw-medium text-dark">{{ $showclient->how_we_got_client ?? 'N/A' }}</span>
</li>
<li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
<span class="text-muted small">Date Added</span>
<span class="fw-medium text-dark">{{ $showclient->created_at ? \Carbon\Carbon::parse($showclient->created_at)->format('d M Y') : 'N/A' }}</span>
</li>
</ul>
</div>
</div>
<!-- Primary Contact (Will now stretch automatically) -->
<div class="card border-light-subtle shadow-sm flex-grow-1">
<div class="card-header bg-white py-3 border-bottom border-light">
<h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
<i class="bi bi-person-badge text-primary me-2"></i> Primary Contact
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<div class="text-muted small mb-1">Contact Person</div>
<div class="fw-bold text-dark">{{ $showclient->contact_person ?? 'N/A' }}</div>
</div>
<div class="mb-3">
<div class="text-muted small mb-1">Email Address</div>
<div class="fw-medium text-primary"><a href="mailto:{{ $showclient->email }}" class="text-decoration-none">{{ $showclient->email ?? 'N/A' }}</a></div>
</div>
<div class="mb-3">
<div class="text-muted small mb-1">Phone Number</div>
<div class="fw-medium text-dark">{{ $showclient->phone ?? 'N/A' }}</div>
</div>
<div class="row">
<div class="col-6">
<div class="text-muted small mb-1">Skype</div>
<div class="fw-medium text-dark">{{ $showclient->skype_name ?? 'N/A' }}</div>
</div>
<div class="col-6">
<div class="text-muted small mb-1">LinkedIn</div>
<div class="fw-medium text-dark">{{ $showclient->linkedin_name ?? 'N/A' }}</div>
</div>
</div>
</div>
</div>
</div>
<!-- COLUMN 2 -->
<div class="col-lg-4">
<!-- Service & Billing -->
<div class="card border-light-subtle shadow-sm mb-4">
<div class="card-header bg-white py-3 border-bottom border-light">
<h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
<i class="bi bi-wallet2 text-primary me-2"></i> Service & Billing
</h6>
</div>
<div class="card-body">
<div class="mb-3">
<div class="text-muted small mb-2">Subscribed Services</div>
<div>
@php
$services = json_decode($showclient->services, true) ?? [];
@endphp
@if(count($services) > 0)
@foreach($services as $service)
<span class="badge bg-secondary bg-opacity-10 text-secondary border me-1">{{ $service }}</span>
@endforeach
@else
<span class="text-muted small">N/A</span>
@endif
</div>
</div>
<div class="row mb-3">
<div class="col-6">
<div class="text-muted small mb-1">Billing Mode</div>
<div class="fw-bold text-dark text-uppercase">{{ $showclient->pay_mode ?? 'N/A' }}</div>
</div>
<div class="col-6">
<div class="text-muted small mb-1">Currency</div>
<div class="fw-bold text-dark">{{ $showclient->currency ?? 'N/A' }}</div>
</div>
</div>
<div class="mb-2">
<div class="text-muted small mb-1">Message Types</div>
<div>
@php
$msgTypes = json_decode($showclient->message_types, true) ?? [];
@endphp
@if(count($msgTypes) > 0)
@foreach($msgTypes as $type)
<span class="badge bg-info bg-opacity-10 text-info border border-info me-1">{{ $type }}</span>
@endforeach
@else
<span class="text-muted small">N/A</span>
@endif
</div>
</div>
</div>
</div>
<!-- Contract Details -->
<div class="card border-light-subtle shadow-sm">
<div class="card-header bg-white py-3 border-bottom border-light">
<h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
<i class="bi bi-file-earmark-text text-primary me-2"></i> Contract Details
</h6>
</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
<span class="text-muted small">Contract Type</span>
<span class="fw-medium text-dark">{{ $showclient->contract_type ?? 'N/A' }}</span>
</li>
<li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
<span class="text-muted small">Auto Renew</span>
@if($showclient->contract_auto_renew == 'YES')
<span class="badge bg-success">Yes</span>
@else
<span class="badge bg-secondary">No</span>
@endif
</li>
<li class="list-group-item px-0 py-2 d-flex justify-content-between align-items-center border-0">
<span class="text-muted small">Validity (Expiry)</span>
@if($showclient->contract_validity && $showclient->contract_validity != '1970-01-01 22:00:00')
<span class="fw-medium text-dark">{{ \Carbon\Carbon::parse($showclient->contract_validity)->format('d M Y') }}</span>
@else
<span class="text-muted small">N/A</span>
@endif
</li>
<li class="list-group-item px-0 py-2 border-0 mt-2 bg-light rounded">
<div class="text-muted small mb-1">SMPP Username</div>
<div class="fw-bold text-dark font-monospace">{{ $showclient->smpp_username ?? 'N/A' }}</div>
</li>
</ul>
</div>
</div>
</div>
<!-- COLUMN 3 -->
<div class="col-lg-4">
<!-- Onboarding Progress -->
<div class="card border-light-subtle shadow-sm mb-4">
<div class="card-header bg-white py-3 border-bottom border-light">
<h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
<i class="bi bi-graph-up text-primary me-2"></i> Onboarding Progress
</h6>
</div>
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="text-muted small fw-bold">Current Stage</div>
<div class="badge bg-primary">{{ $showclient->progress_indicator ?? 'N/A' }}</div>
</div>
@php
$score = $showclient->progress_indicator_score ?? 0;
$scoreColor = $score >= 100 ? 'bg-success' : ($score >= 50 ? 'bg-primary' : 'bg-warning');
@endphp
<div class="d-flex justify-content-between align-items-center mt-3 mb-1">
<span class="text-muted small">Completion Score</span>
<span class="fw-bold text-dark">{{ $score }}%</span>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar {{ $scoreColor }}" role="progressbar" style="width: {{ $score }}%" aria-valuenow="{{ $score }}" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
<!-- Communication Channels -->
<div class="card border-light-subtle shadow-sm">
<div class="card-header bg-white py-3 border-bottom border-light">
<h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
<i class="bi bi-chat-dots text-primary me-2"></i> Communications
</h6>
</div>
<div class="card-body">
<!-- Helper Macro for JSON Emails/Phones -->
@php
function renderBadges($jsonString, $type = 'email') {
$items = json_decode($jsonString, true) ?? [];
if(count($items) === 0) return '<span class="text-muted small">N/A</span>';
$html = '';
foreach($items as $item) {
$icon = $type == 'email' ? 'bi-envelope' : 'bi-telephone';
$html .= '<span class="badge bg-light text-dark border me-1 mb-1"><i class="bi '.$icon.' text-secondary me-1"></i>'.$item.'</span>';
}
return $html;
}
@endphp
<div class="mb-3">
<div class="text-muted small mb-1">Finance Emails</div>
<div>{!! renderBadges($showclient->finance_email, 'email') !!}</div>
</div>
<div class="mb-3">
<div class="text-muted small mb-1">Support Emails</div>
<div>{!! renderBadges($showclient->support_emails, 'email') !!}</div>
</div>
<div class="mb-3">
<div class="text-muted small mb-1">Rate Emails</div>
<div>{!! renderBadges($showclient->rate_emails, 'email') !!}</div>
</div>
<div class="mb-0">
<div class="text-muted small mb-1">Support Phones</div>
<div>{!! renderBadges($showclient->support_phones, 'phone') !!}</div>
</div>
</div>
</div>
</div>
</div>
<!-- Tabs Navigation for Additional Records -->
<div class="card border-light-subtle shadow-sm mt-5 mb-4">
<div class="card-header bg-white pt-3 pb-0 border-bottom">
<ul class="nav nav-tabs card-header-tabs" id="clientRecordTabs" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active fw-bold text-dark" id="shortcodes-tab" data-bs-toggle="tab" data-bs-target="#shortcodes-pane" type="button" role="tab">
<i class="bi bi-code-square text-primary me-1"></i> Short Codes
<span class="badge bg-primary bg-opacity-10 text-primary ms-1">{{ count($voice_codes) + count($sms_codes) + count($ussd_codes) }}</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fw-bold text-dark" id="payments-tab" data-bs-toggle="tab" data-bs-target="#payments-pane" type="button" role="tab">
<i class="bi bi-wallet2 text-primary me-1"></i> Payments
<span class="badge bg-primary bg-opacity-10 text-primary ms-1">{{ count($recent_payments) }}</span>
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link fw-bold text-dark" id="files-tab" data-bs-toggle="tab" data-bs-target="#files-pane" type="button" role="tab">
<i class="bi bi-file-earmark-arrow-down text-primary me-1"></i> Documents
<span class="badge bg-primary bg-opacity-10 text-primary ms-1">{{ count($showdocuments) }}</span>
</button>
</li>
</ul>
</div>
<div class="card-body bg-light tab-content" id="clientRecordTabsContent">
<!-- TAB 1: SHORT CODES -->
<div class="tab-pane fade show active" id="shortcodes-pane" role="tabpanel" tabindex="0">
@php
$allCodes = collect($voice_codes)->concat($sms_codes)->concat($ussd_codes);
@endphp
@if($allCodes->count() > 0)
<div class="table-responsive">
<table class="table table-hover align-middle mb-0 bg-white border rounded">
<thead class="table-light">
<tr style="font-size: 0.8rem;" class="text-secondary text-uppercase">
<th>Type</th>
<th>Shortcode</th>
<th>Network</th>
<th>Status</th>
<th>Expiry Date</th>
</tr>
</thead>
<tbody>
@foreach($allCodes as $code)
<tr>
<td><span class="badge bg-secondary text-uppercase" style="font-size: 0.7rem;">{{ $code->code_type ?? 'N/A' }}</span></td>
<td class="fw-bold text-dark font-monospace">{{ $code->shortcode ?? 'N/A' }}</td>
<td>{{ $code->network ?? 'N/A' }}</td>
<td>
<span class="badge bg-success bg-opacity-10 text-success">{{ $code->status ?? 'Active' }}</span>
</td>
<td class="text-muted small">{{ $code->expiry_date ? \Carbon\Carbon::parse($code->expiry_date)->format('d M Y') : 'N/A' }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@else
<div class="text-center py-4 text-muted small">
<i class="bi bi-folder2-open fs-4 d-block mb-1"></i> No short codes assigned to this client.
</div>
@endif
</div>
<!-- TAB 2: PAYMENTS -->
<div class="tab-pane fade" id="payments-pane" role="tabpanel" tabindex="0">
@if(isset($recent_payments) && count($recent_payments) > 0)
<div class="table-responsive" style="max-height: 450px; overflow-y: auto;">
<table class="table table-hover align-middle mb-0 bg-white border rounded">
<thead class="table-light">
<tr style="font-size: 0.8rem;" class="text-secondary text-uppercase">
<th>Invoice #</th>
<th>Amount</th>
<th>Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
@foreach($recent_payments as $payment)
<tr>
<td class="fw-bold text-dark">{{ $payment->invoice_number ?? 'N/A' }}</td>
<td class="fw-semibold text-success">{{ number_format($payment->invoice_amount ?? 0, 2) }}</td>
<td class="text-muted small">{{ $payment->invoice_date ? \Carbon\Carbon::parse($payment->invoice_date)->format('d M Y') : 'N/A' }}</td>
<td>
<span class="badge bg-info bg-opacity-10 text-info text-uppercase">{{ $payment->invoice_status ?? 'Pending' }}</span>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@else
<div class="text-center py-4 text-muted small">
<i class="bi bi-wallet fs-4 d-block mb-1"></i> No payment records found.
</div>
@endif
</div>
<!-- TAB 3: DOCUMENTS -->
<div class="tab-pane fade" id="files-pane" role="tabpanel" tabindex="0">
@if(isset($showdocuments) && count($showdocuments) > 0)
<div class="row g-3">
@foreach($showdocuments as $file)
<div class="col-md-4">
<div class="card border bg-white shadow-sm p-3 d-flex flex-row align-items-center justify-content-between">
<div class="d-flex align-items-center overflow-hidden">
<i class="bi bi-file-earmark-text fs-3 text-primary me-3"></i>
<div class="text-truncate">
<div class="fw-bold text-dark text-truncate" style="font-size: 0.9rem;" title="{{ $file->name }}">{{ $file->name }}</div>
<small class="text-muted text-uppercase" style="font-size: 0.7rem;">{{ $file->file_extension ?? 'file' }}</small>
</div>
</div>
@if(!empty($file->file_path))
<a href="{{ asset('storage/client_files/' . $file->file_path) }}" target="_blank" class="btn btn-sm btn-light text-primary" title="Download File">
<i class="bi bi-download"></i>
</a>
@endif
</div>
</div>
@endforeach
</div>
@else
<div class="text-center py-4 text-muted small">
<i class="bi bi-file-earmark-x fs-4 d-block mb-1"></i> No documents uploaded for this client.
</div>
@endif
</div>
</div>
</div>
<!-- Notes / Activity Log Section -->
<div class="card border-light-subtle shadow-sm mt-5 mb-5">
<div class="card-header bg-white py-3 border-bottom border-light d-flex justify-content-between align-items-center">
<h6 class="fw-bold mb-0 text-secondary text-uppercase" style="font-size: 0.8rem; letter-spacing: 0.5px;">
<i class="bi bi-journal-text text-primary me-2"></i> Client Notes & Activity Logs
</h6>
<span class="badge bg-primary bg-opacity-10 text-primary">{{ count($show_notes) }} Entries</span>
</div>
<!-- Scrollable Container -->
<div class="card-body bg-light p-3" style="max-height: 450px; overflow-y: auto;">
@if(isset($show_notes) && count($show_notes) > 0)
<div class="timeline">
@foreach($show_notes as $note)
<div class="card border-0 shadow-sm mb-3">
<div class="card-body p-3">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="d-flex align-items-center">
<!-- Author Avatar or Name -->
<div class="fw-bold text-dark me-2">
<i class="bi bi-person-circle text-secondary me-1"></i>
{{ $note->created_by_info->name ?? 'System User' }}
</div>
@if(isset($note->highlight) && $note->highlight == 'YES')
<span class="badge bg-warning bg-opacity-10 text-warning border border-warning-subtle" style="font-size: 0.7rem;">Highlighted</span>
@endif
</div>
<small class="text-muted" style="font-size: 0.8rem;">
<i class="bi bi-clock me-1"></i>{{ \Carbon\Carbon::parse($note->created_at)->format('d M Y, h:i A') }}
</small>
</div>
<!-- Note Content -->
<p class="mb-0 text-dark" style="white-space: pre-wrap; font-size: 0.95rem;">
{{ $note->notes_body ?? $note->note ?? $note->content ?? 'No content found' }}
</p>
</div>
</div>
@endforeach
</div>
@else
<div class="text-center py-4 text-muted small">
<i class="bi bi-journal-x fs-4 d-block mb-1"></i> No notes recorded for this client yet.
</div>
@endif
</div>
</div>
</div>
@endsection