nhance/app/Views/tpa_branch.php

1158 lines
53 KiB
PHP
Executable File
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<style>
.modal-subtitle {
font-weight: 500;
font-style: normal;
font-size: 18px;
line-height: 100%;
letter-spacing: 0%;
text-align: center;
margin-top: 5px;
color: #6c757d;
}
</style>
<!-- Optional CSS -->
<style>
/* Make modal really XL and scrollable */
#tpaBranchModal .modal-dialog.modal-xl {
max-width: 90%;
height: 90vh;
}
#tpaBranchModal .modal-content {
height: 100%;
overflow: hidden;
}
#tpaBranchModal .modal-body {
overflow-y: auto;
max-height: 80vh;
}
#tpaBranchModal {
padding-right: 0 !important;
z-index: 1060;
}
#tpaBranchModal.show {
display: flex !important;
align-items: center;
justify-content: center;
}
.modal-backdrop {
z-index: 1050;
}
#tpa-branch-datatable{
width: 100% !important;
}
#tpa-branch-datatable_wrapper .datatable-search-wrapper{
width: auto !important;
}
#tpa-branch-datatable_wrapper .dataTables_filter input{
width: 220px !important;
padding-right: 34px !important;
}
#tpa-branch-datatable_wrapper .datatable-search-icon,
#tpa-branch-datatable_wrapper .datatable-clear-icon{
right: 11px !important;
}
/* Unset position on datatables filter to fix alignment issues */
#tpa-branch-datatable_wrapper div.dataTables_filter {
position: unset !important;
}
/* Fix DataTables scroll header and body alignment */
#tpa-branch-datatable_wrapper .dataTables_scrollHeadInner{
box-sizing: content-box !important;
padding-right: 0px !important;
width: 100% !important;
}
#tpa-branch-datatable_wrapper .dataTables_scrollHeadInner table,
#tpa-branch-datatable_wrapper .dataTables_scrollBody table{
width: 100% !important;
}
</style>
<div class="tab-pane fade" id="branch-tab">
<div class="row float-right" style="padding-bottom: 10px;position: relative;">
<a href="#" id="btnBranchAdd" class="btn app-btn-primary mr-2"><span class="mdi mdi-plus" aria-hidden="true" style="padding: 5px 10px;"></span>Add Branch</a>
</div>
<div class="table-responsive" id="branch_table" >
<table data-custom-table-css="table" class="table table-borderless table-nowrap mb-0 w-100 nowrap" id="tpa-branch-datatable">
<thead class="">
<tr>
<th>Branch Name</th>
<th>Branch Code</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tpa_branch_list">
</tbody>
</table>
</div>
<!-- <div class="row" id="add_branch">
<div class="col-12">
<div class="card-body">
<div class="row float-right" style="position: relative; bottom: 20px; right: 13px;">
<button type="button" id="btnBranchBack" class="btn btn-primary waves-effect waves-light btn-sm btnBack"><span class="mdi mdi-format-list-bulleted" aria-hidden="true" style="padding: 5px 10px;"></span>Back To List</button>
</div>
<hr>
<form role="form" class="parsley-examples" method="post" id="tpa_branch_form" enctype="multipart/form-data">
<input type="hidden" class="form-control" value="<?= csrf_hash() ?>" name="<?= csrf_token() ?>" />
<input type="hidden" name="PrimaryKey" id="tpa_Branch_PrimaryKey" />
<input type="hidden" name="tpa_id" id="tpa_id_branch" value="<?= isset($tpa['id']) ? $tpa['id'] : '' ?>"/>
<div class="form-group">
<div class="form-row">
<div class="form-group col-md-6">
<label for="branch_name">Branch Name<span
class="text-danger">*</span></label>
<input type="text" class="form-control" id="branch_name"
placeholder="Enter Branch Name" name="branch_name" required>
</div>
<div class="form-group col-md-6">
<label for="branch_code">Branch Code<span
class="text-danger">*</span></label>
<input type="text" class="form-control" id="branch_code"
placeholder="Enter Branch Code" name="branch_code" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="address1">Address Line 1<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="address1" name="address1" placeholder="Enter Address 1" required>
</div>
<div class="form-group col-md-6">
<label for="address2">Address Line 2<span class="text-danger"></span></label>
<input type="text" class="form-control" id="address2" placeholder="Enter Address 2" name="address2">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-3">
<label for="state">State<span
class="text-danger">*</span></label>
<select class="form-control" id="state" name="state" required>
<option value="">Select State</option>
<?php if ($state) {
foreach($state as $value) { ?>
<option value="<?= $value['id'] ?>"><?= $value['state'] ?></option>
<?php } }?>
</select>
</div>
<div class="form-group col-md-3">
<label for="district">District<span
class="text-danger">*</span></label>
<input type="text" class="form-control" id="district"
placeholder="Enter District" name="district" required>
</div>
<div class="form-group col-md-3">
<label for="city">City</label>
<input type="text" class="form-control" id="branch_city"
placeholder="Enter City" name="city" required>
</div>
<div class="form-group col-md-3">
<label for="gst">Pincode<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="pincode" placeholder="Enter Pincode" name="pincode" required>
</div>
</div>
<hr>
<h6 class="header-title">Contact 1</h6>
<br>
<div class="form-row">
<div class="form-group col-md-6">
<label for="first_name">Name<span class="text-danger">*</span></label>
<input value="" type="text" class="form-control" placeholder="Enter Contact Name" name="name[]" id="name" required>
</div>
<div class="form-group col-md-6">
<label for="designation">Designation<span class="text-danger">*</span></label>
<input value="" type="text" class="form-control" placeholder="Enter Designation Name" name="designation[]" id="designation" required>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="last_name">Email<span class="text-danger">*</span></label>
<input value="" data-parsley-type="email" type="email" data-parsley-type="email" class="form-control" placeholder="Enter Contact Email" name="email[]" id="email" required>
</div>
<div class="form-group col-md-6">
<label for="mobile">Mobile<span class="text-danger">*</span></label>
<input value="" data-parsley-type="number" data-parsley-length="[10,10]" type="tel" class="form-control" placeholder="Enter Contact Mobile" name="mobile[]" id="mobile" required>
</div>
</div>
<div class="form-group" style="display: flex;">
<button style="margin-right: 10px;" type="button" class="btn btn-primary btn-sm ac" onclick="appendContactHtml()" id="add">Add Contact</button>
<button type="button" class="btn btn-danger btn-sm" onclick="removeContact(this)" id="${uniqueId}_remove">Remove</button>
</div>
<div id="container"></div>
</div>
<div class="form-group text-right m-b-0">
<button type="submit" class="btn btn-primary waves-effect waves-light mr-1"
id="btnSubmit">Submit</button>
<button type="button" class="btn btn-secondary waves-effect btnBack"
id="btnBack">Cancel</button>
</div>
</form>
</div>
</div>
</div> !-- end col-- -->
</div>
<!-- end -->
<!-- Modal -->
<div class="modal fade" id="tpaBranchModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" style="max-width: 1140px !important;">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header flex-column">
<div class="d-flex w-100 justify-content-between align-items-center">
<h4 class="modal-title mb-0" id="modalLabel">New Branch</h4>
<button type="button" class="close js-tpa-branch-close" data-dismiss="modal" data-bs-dismiss="modal" aria-hidden="true" onclick="hideTPABranchModal()">×</button>
</div>
</div>
<!-- Modal Body -->
<div class="modal-body" style="overflow-y:auto; max-height:80vh;">
<form id="tpa_branch_form" role="form" class="parsley-examples" method="post" action="" enctype="multipart/form-data">
<div class="row">
<input type="hidden" class="form-control" value="<?= csrf_hash() ?>" name="<?= csrf_token() ?>" />
<input type="hidden" name="PrimaryKey" id="tpa_Branch_PrimaryKey" />
<input type="hidden" name="tpa_id" id="tpa_id_branch" value="<?= isset($tpa['id']) ? $tpa['id'] : '' ?>"/>
<!-- Left Section: Branch Details -->
<div class="col-md-8 d-flex flex-column" style="max-height: calc(80vh - 50px);">
<!-- Branch Name & Code -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="branch_name">Branch Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="branch_name" placeholder="Enter Branch Name" name="branch_name" required maxlength="255" data-parsley-maxlength="255"
data-parsley-minlength="3"
data-parsley-pattern="^[a-zA-Z0-9\s_-]+$"
data-parsley-pattern-message="Branch Name can contain letters, numbers, spaces, underscore (_) and hyphen (-).">
</div>
<div class="form-group col-md-6">
<label for="branch_code">Branch Code <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="branch_code" placeholder="Enter Branch Code" name="branch_code" required maxlength="100" data-parsley-maxlength="100"
data-parsley-pattern="^[a-zA-Z0-9\s_-]+$"
data-parsley-pattern-message="Branch Code can contain letters, numbers, spaces, underscore (_) and hyphen (-)."
oninput="this.value = this.value.replace(/[^A-Za-z0-9_\- ]/g, '')"
onblur="this.value = this.value.trim();">
</div>
</div>
<!-- Address Lines -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="address1">Address Line 1 <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="address1" name="address1" placeholder="Enter Address 1" required maxlength="255" data-parsley-maxlength="255">
</div>
<div class="form-group col-md-6">
<label for="address2">Address Line 2</label>
<input type="text" class="form-control" id="address2" placeholder="Enter Address 2" name="address2" maxlength="255" data-parsley-maxlength="255">
</div>
</div>
<!-- State & District -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="state">State <span class="text-danger">*</span></label>
<select class="form-control" id="state" name="state" required>
<option value="">Select State</option>
<?php if ($state) {
foreach($state as $value) { ?>
<option value="<?= $value['id'] ?>"><?= $value['state'] ?></option>
<?php } }?>
</select>
</div>
<div class="form-group col-md-6">
<label for="district">District <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="district" placeholder="Enter District" name="district" required maxlength="100" data-parsley-maxlength="100"
data-parsley-pattern="^[a-zA-Z0-9\s-]+$"
data-parsley-pattern-message="District can contain letters, numbers, spaces, and hyphens.">
</div>
</div>
<!-- City & Pincode -->
<div class="form-row">
<div class="form-group col-md-6">
<label for="branch_city">City <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="branch_city" placeholder="Enter City" name="city" required maxlength="100" data-parsley-maxlength="100"
data-parsley-pattern="^[a-zA-Z0-9\s-]+$"
data-parsley-pattern-message="City can contain letters, numbers, spaces, and hyphens.">
</div>
<div class="form-group col-md-6">
<label for="pincode">Pincode <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="pincode" placeholder="Enter Pincode" name="pincode" required data-parsley-type="digits" data-parsley-length="[6,6]" maxlength="6"
data-parsley-pattern="^[0-9]{6}$"
data-parsley-pattern-message="Pincode must be exactly 6 digits.">
</div>
</div>
<!-- Submit / Cancel -->
<div class="form-group d-flex justify-content-end m-b-0 mt-4" id="hide_smbt_btn">
<button type="button" class="btn app-btn-outline-secondary mr-2 js-tpa-branch-cancel" data-dismiss="modal" data-bs-dismiss="modal" aria-hidden="true" onclick="hideTPABranchModal()">Cancel</button>
<button type="submit" class="btn app-btn-secondary waves-effect waves-light" id="btnSubmit">Submit</button>
</div>
</div>
<!-- Right Section: Contact Details -->
<div class="col-md-4" style="background:#f8f9fa; max-height: calc(80vh - 50px); overflow-y:auto; border-radius:8px; padding:10px;">
<!-- First Contact -->
<div id="contact_1_wrapper" class="bg-white p-2 mb-2 rounded contact-block">
<div class="d-flex justify-content-between align-items-center mb-2">
<h6 class="modal-subtitle mb-0">Contact 1</h6>
<div class="d-flex align-items-center">
<i class="mdi mdi-trash-can text-danger" style="cursor:pointer; font-size:24px !important;" onclick="removeContact(this)" id="contact_1_remove"></i>
</div>
</div>
<!-- Contact Form Fields -->
<!-- <input type="hidden" name="primarykey[]" id="contact_id_1" value=""/> -->
<div class="form-row">
<div class="form-group col-md-12">
<label for="name">Name <span class="text-danger">*</span></label>
<input value="" type="text" class="form-control" placeholder="Enter Contact Name" name="name[]" id="name" required maxlength="100" data-parsley-maxlength="100"
data-parsley-pattern="^[a-zA-Z0-9\s_-]+$"
data-parsley-pattern-message="Contact name can contain letters, numbers, spaces, underscore (_) and hyphen (-).">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="designation">Designation <span class="text-danger">*</span></label>
<input value="" type="text" class="form-control" placeholder="Enter Designation Name" name="designation[]" id="designation" required maxlength="100" data-parsley-maxlength="100"
data-parsley-pattern="^[A-Za-z0-9\\-_\\/ ]+$"
data-parsley-pattern-message="Designation may only contain letters, numbers, /, -, _ and spaces.">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="email">Email <span class="text-danger">*</span></label>
<input value="" type="email" data-parsley-trigger="change" class="form-control" placeholder="Enter Contact Email" name="email[]" id="email" required
data-parsley-pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
data-parsley-pattern-message="Please enter a valid email format (e.g., name@domain.com).">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label for="mobile">Mobile <span class="text-danger">*</span></label>
<input value="" data-parsley-type="digits" data-parsley-length="[10,10]" data-parsley-trigger="change" type="text" class="form-control" placeholder="Enter Contact Mobile" name="mobile[]" id="mobile" required maxlength="10" inputmode="numeric"
data-parsley-pattern="^[0-9]{10}$"
data-parsley-pattern-message="Mobile number must be exactly 10 digits.">
</div>
</div>
</div>
<!-- Container for dynamically added contacts -->
<div id="container"></div>
<div>
<button type="button" class="btn btn-primary btn-sm ac me-3" style="width: 100%;" onclick="appendContactHtml()" id="add"><i class="mdi mdi-plus"></i> Add Contact</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
var contactCount = 1;
var tpaBranchDebugPrefix = '[TPABranch]';
function resetTPABranchFormState() {
var $form = $('#tpa_branch_form');
if ($form.length && $form[0] && typeof $form[0].reset === 'function') {
$form[0].reset();
}
if ($form.length && typeof $form.parsley === 'function') {
try {
$form.parsley().reset();
} catch (e) {}
}
contactCount = 1;
$('#container').empty();
$('#contact_1_wrapper input').val('');
$('#tpa_Branch_PrimaryKey').val('');
toggleAddButton();
}
$(document).ready(function () {
$('#tpa-branch-datatable').DataTable({
paging: true,
searching: true,
autoWidth: false,
scrollX: false,
responsive: false,
initComplete: function () {
var $wrapper = $('#tpa-branch-datatable_wrapper');
$wrapper.find('.dataTables_scrollHeadInner').css({
'box-sizing': 'content-box',
'padding-right': '0px',
'width': '100%'
});
this.api().columns.adjust();
},
dom: "<'datatable-top-section'f>" +
"tr" +
"<'datatable-bottom-section d-flex justify-content-between align-items-center mt-2'<'datatable-info'i><'datatable-controls d-flex align-items-center'<'me-2'l>p>>",
language: {
search: `
<div class="datatable-search-wrapper" style="position:relative; display:inline-block;">
_INPUT_
<i class="mdi mdi-magnify datatable-search-icon" style="position:absolute; right:11px; top:50%; transform:translateY(-53%); color:#666;"></i>
<i class="mdi mdi-close-circle datatable-clear-icon" style="position:absolute; right:11px; top:50%; transform:translateY(-53%); color:#666; display:none;"></i>
</div>`,
searchPlaceholder: "Search",
emptyTable: '<div class="text-center text-muted">No data available</div>'
}
});
var tpa_Branch_PrimaryKey = $('#tpa_id_branch').val();
var tpa_branch_form_action = '';
window.forceHideTPABranchModal = function () {
console.log(tpaBranchDebugPrefix + ' forceHideTPABranchModal() called.');
var modalEl = document.getElementById('tpaBranchModal');
if (modalEl) {
console.log(tpaBranchDebugPrefix + ' Modal element found. Hiding it.');
modalEl.classList.remove('show');
modalEl.style.display = 'none';
modalEl.setAttribute('aria-hidden', 'true');
modalEl.removeAttribute('aria-modal');
}
console.log(tpaBranchDebugPrefix + ' Removing modal-open class from body.');
document.body.classList.remove('modal-open');
console.log(tpaBranchDebugPrefix + ' Removing body padding-right style.');
document.body.style.removeProperty('padding-right');
console.log(tpaBranchDebugPrefix + ' Removing modal-backdrop.');
$('.modal-backdrop').remove();
console.log(tpaBranchDebugPrefix + ' forceHideTPABranchModal() finished.');
};
window.forceShowTPABranchModal = function () {
console.log(tpaBranchDebugPrefix + ' forceShowTPABranchModal() called.');
var modalEl = document.getElementById('tpaBranchModal');
if (!modalEl) {
console.log(tpaBranchDebugPrefix + ' Modal element not found. Aborting.');
return;
}
console.log(tpaBranchDebugPrefix + ' Displaying modal element.');
modalEl.style.display = 'block';
modalEl.classList.add('show');
modalEl.removeAttribute('aria-hidden');
modalEl.setAttribute('aria-modal', 'true');
document.body.classList.add('modal-open');
if (!document.querySelector('.modal-backdrop')) {
console.log(tpaBranchDebugPrefix + ' Creating and appending modal-backdrop.');
var backdrop = document.createElement('div');
backdrop.className = 'modal-backdrop fade show';
document.body.appendChild(backdrop);
} else {
console.log(tpaBranchDebugPrefix + ' Modal-backdrop already exists.');
}
console.log(tpaBranchDebugPrefix + ' forceShowTPABranchModal() finished.');
};
window.showTPABranchModal = function () {
console.log(tpaBranchDebugPrefix + ' showTPABranchModal() called.');
var $modal = $('#tpaBranchModal');
var modalEl = document.getElementById('tpaBranchModal');
try {
console.log(tpaBranchDebugPrefix + ' Trying to show modal using jQuery/Bootstrap.');
if (typeof jQuery !== 'undefined' && jQuery.fn && typeof jQuery.fn.modal === 'function') {
console.log(tpaBranchDebugPrefix + ' Using jQuery modal("show").');
$modal.modal('show');
console.log(tpaBranchDebugPrefix + ' Setting timeout to check if modal is visible.');
setTimeout(function () {
console.log(tpaBranchDebugPrefix + ' Timeout check: Modal has "show" class:', $modal.hasClass('show'), 'Is visible:', $modal.is(':visible'));
if (!$modal.hasClass('show') || !$modal.is(':visible')) {
console.log(tpaBranchDebugPrefix + ' Modal not visible after timeout, forcing show.');
window.forceShowTPABranchModal();
}
}, 120);
console.log(tpaBranchDebugPrefix + ' showTPABranchModal() finished via jQuery path.');
return;
}
console.log(tpaBranchDebugPrefix + ' jQuery modal not available. Checking for Bootstrap 5 API.');
if (window.bootstrap && bootstrap.Modal && modalEl) {
if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
console.log(tpaBranchDebugPrefix + ' Using bootstrap.Modal.getOrCreateInstance().show().');
bootstrap.Modal.getOrCreateInstance(modalEl).show();
console.log(tpaBranchDebugPrefix + ' showTPABranchModal() finished via BS5 getOrCreateInstance.');
return;
}
if (typeof bootstrap.Modal.getInstance === 'function') {
console.log(tpaBranchDebugPrefix + ' Using bootstrap.Modal.getInstance().');
var existing = bootstrap.Modal.getInstance(modalEl);
if (existing) {
console.log(tpaBranchDebugPrefix + ' Existing BS5 instance found, calling show().');
existing.show();
console.log(tpaBranchDebugPrefix + ' showTPABranchModal() finished via existing BS5 instance.');
return;
}
}
console.log(tpaBranchDebugPrefix + ' Using new bootstrap.Modal().show().');
(new bootstrap.Modal(modalEl)).show();
console.log(tpaBranchDebugPrefix + ' showTPABranchModal() finished via new BS5 instance.');
return;
}
} catch (e) {
console.error(tpaBranchDebugPrefix + ' failed to show modal:', e);
console.log(tpaBranchDebugPrefix + ' Falling back to forceShowTPABranchModal().');
window.forceShowTPABranchModal();
return;
}
console.log(tpaBranchDebugPrefix + ' No standard modal methods found, falling back to forceShowTPABranchModal().');
window.forceShowTPABranchModal();
};
window.hideTPABranchModal = function () {
console.log(tpaBranchDebugPrefix + ' hideTPABranchModal() called.');
var $modal = $('#tpaBranchModal');
var modalEl = document.getElementById('tpaBranchModal');
if (!modalEl) {
console.log(tpaBranchDebugPrefix + ' Modal element not found. Aborting.');
return;
}
var closed = false;
try {
console.log(tpaBranchDebugPrefix + ' Trying to hide modal using jQuery/Bootstrap.');
if (typeof jQuery !== 'undefined' && jQuery.fn && typeof jQuery.fn.modal === 'function') {
console.log(tpaBranchDebugPrefix + ' Using jQuery modal("hide").');
$modal.modal('hide');
closed = true;
}
if (!closed && window.bootstrap && bootstrap.Modal && modalEl) {
console.log(tpaBranchDebugPrefix + ' jQuery modal not available/failed. Checking for Bootstrap 5 API.');
if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
console.log(tpaBranchDebugPrefix + ' Using bootstrap.Modal.getOrCreateInstance().hide().');
bootstrap.Modal.getOrCreateInstance(modalEl).hide();
closed = true;
}
if (!closed && typeof bootstrap.Modal.getInstance === 'function') {
console.log(tpaBranchDebugPrefix + ' Using bootstrap.Modal.getInstance().');
var existing = bootstrap.Modal.getInstance(modalEl);
if (existing) {
console.log(tpaBranchDebugPrefix + ' Existing BS5 instance found, calling hide().');
existing.hide();
closed = true;
}
}
if (!closed) {
console.log(tpaBranchDebugPrefix + ' Using new bootstrap.Modal().hide().');
(new bootstrap.Modal(modalEl)).hide();
closed = true;
}
}
} catch (e) {
console.error('[TPABranch] Failed to hide modal, using fallback:', e);
}
if (!closed || modalEl.classList.contains('show')) {
console.log(tpaBranchDebugPrefix + ' Modal not closed or still has "show" class, using fallback.');
window.forceHideTPABranchModal();
}
console.log(tpaBranchDebugPrefix + ' hideTPABranchModal() finished.');
};
// $('#add_branch').hide();
// $('.btnBack').hide();
loadBranchList();
$('#btnBranchAdd').click(function(e){
console.log(tpaBranchDebugPrefix + ' #btnBranchAdd clicked.');
if (e && typeof e.preventDefault === 'function') {
console.log(tpaBranchDebugPrefix + ' Preventing default click action.');
e.preventDefault();
}
console.log(tpaBranchDebugPrefix + ' Setting form action for create.');
tpa_branch_form_action = '<?= base_url("master/tpa/branch/create"); ?>';
console.log(tpaBranchDebugPrefix + ' Calling showTPABranchModal().');
window.showTPABranchModal();
// $('#add_branch').show();
// $('#branch_table').hide();
// $('.btnBack').show();
// $('#btnBranchAdd').hide();
console.log(tpaBranchDebugPrefix + ' Resetting form fields.');
$('#branch_name').val('');
$('#branch_code').val('');
$('#state').val('');
$('#district').val('');
$('#branch_city').val('');
$('#name').val('');
$('#email').val('');
$('#mobile').val('');
$('#designation').val('');
console.log(tpaBranchDebugPrefix + ' Resetting "Add Contact" button visibility.');
var addButton = document.getElementById('add');
if (addButton.style.display === 'none') {
addButton.style.display = 'block';
}
console.log(tpaBranchDebugPrefix + ' Resetting contactCount to 1.');
contactCount = 1
console.log(tpaBranchDebugPrefix + ' Clearing dynamically added contacts from localStorage and DOM.');
var buttonIds = JSON.parse(localStorage.getItem('buttonIds')) || [];
console.log(tpaBranchDebugPrefix + ' Found buttonIds in localStorage:', buttonIds);
for (var i = 0; i < buttonIds.length; i++) {
var firstElement = buttonIds[i].split('_')[0];
console.log(tpaBranchDebugPrefix + ' Processing buttonId:', buttonIds[i], '-> element to remove ID:', firstElement);
// Find the element by its ID
var elementToRemove = document.getElementById(firstElement);
console.log(tpaBranchDebugPrefix + ' Found element to remove:', elementToRemove);
if (elementToRemove) {
console.log(tpaBranchDebugPrefix + ' Removing element:', elementToRemove);
elementToRemove.parentNode.removeChild(elementToRemove);
}
}
localStorage.removeItem('buttonIds');
console.log(tpaBranchDebugPrefix + ' #btnBranchAdd click handler finished.');
});
$('#tpaBranchModal').on('hidden.bs.modal', function () {
resetTPABranchFormState();
});
$(document).on('click', '.js-tpa-branch-close, .js-tpa-branch-cancel', function (e) {
e.preventDefault();
window.hideTPABranchModal();
});
if(tpa_Branch_PrimaryKey !== ''){
var branchTable = '';
var data = <?= isset($tpa_branch) ? json_encode($tpa_branch) : '[]' ?>;
$.each(data, function(index, item) {
branchTable += `
<tr>
<td>${item.branch_name}</td>
<td>${item.branch_code}</td>
<td><a class="mdi mdi-lead-pencil btnBranchEdit" href="#" data-id="${item.id}" style="font-size:18px;"></a></td>
</tr>
`;
});
$('#tpa_branch_list').append(branchTable);
}
$("#tpa_branch_form").submit(function(events) {
events.preventDefault();
var isValid = $('#tpa_branch_form').parsley().validate();
if (isValid) {
var formData = new FormData($('#tpa_branch_form')[0]);
$.ajax({
data: formData,
url: tpa_branch_form_action,
type: "POST",
dataType: 'json',
processData: false,
contentType: false,
success: function(res) {
setTimeout(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
}, 1000);
console.log(res);
$('#tpa_branch_list tr').remove();
var tpaBranchTableInsert = ''
if (data.length === 0) {
tpaBranchTableInsert += `
<tr>
<td colspan="3" class="text-center font-color-black">No data available in table</td>
</tr>
`;
} else {
$.each(res.data, function(index, item) {
tpaBranchTableInsert += `
<tr>
<td>${item.branch_name}</td>
<td>${item.branch_code}</td>
<td>
<a class="mdi mdi-lead-pencil btnBranchEdit" href="#" data-id="${item.id}" style="font-size:18px;"></a>
<a style="color:#02a8b5" data-id="${item.id}" onclick="removeTPABranch(this)"><i data-id="${item.id}" class="mdi mdi-delete" style="font-size:18px;"></i></a>
</td>
</tr>
`;
});
}
$('#tpa_branch_list').append(tpaBranchTableInsert);
$('#container').empty(); $('#contact_1_wrapper input').val('');
window.hideTPABranchModal();
// $('#add_branch').hide();
// $('#branch_table').show();
// $('.btnBack').hide();
// $('#btnBranchAdd').show();
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
console.error(status, error);
setTimeout(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
if (xhr.status === 400) {
let response = JSON.parse(xhr.responseText);
let errorMessages = "";
let seenMessages = []; // Array to store unique messages
if (response.errors) {
$.each(response.errors, function (field, message) {
if (!seenMessages.includes(message)) {
errorMessages += `• ${message}<br>`;
seenMessages.push(message); // Mark this message as "seen"
}
});
toastr.error(errorMessages, 'Validation Error', { "allowHtml": true });
} else {
toastr.warning(response.message || 'Validation failed', 'Warning');
}
} else if (xhr.status === 403) {
let response = JSON.parse(xhr.responseText);
toastr.error(response.message, 'Security Policy');
} else if (xhr.status === 500) {
toastr.error('Something went wrong . Please try again later.', 'Server Error');
} else {
toastr.error('An unexpected error occurred. Please try again later.', 'Error');
}
}, 1000);
},
complete: function() {
setTimeout(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
}, 1000);
window.hideTPABranchModal();
}
});
}
});
$('body').on('click', '.btnBranchEdit', function () {
$('#container').html("");
contactCount =1;
var branch_id = $(this).attr('data-id');
tpa_branch_form_action = '<?= base_url("master/tpa/branch/edit"); ?>';
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
$.ajax({
url: '<?php echo base_url('master/tpa/branch/editget/');?>'+branch_id,
type: "GET",
dataType: 'json',
success: function (res) {
setTimeout(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
}, 1000);
console.log("tpa.............");
console.log(res)
window.showTPABranchModal();
// $('#add_branch').show();
// $('#branch_table').hide();
$('.btnBack').show();
// $('#btnBranchAdd').hide();
$('#branch_name').val(res.tpabranch.branch_name);
$('#branch_code').val(res.tpabranch.branch_code);
$('#state option[value="' + res.tpabranch.state + '"]').prop('selected', true);
$('#district').val(res.tpabranch.district);
$('#branch_city').val(res.tpabranch.city);
$('#tpa_Branch_PrimaryKey').val(res.tpabranch.id);
$('#pincode').val(res.tpabranch.pincode);
$('#address1').val(res.tpabranch.address1);
$('#address2').val(res.tpabranch.address2);
$('.form-row').find('#name').val(res.levelcontact[0].name);
$('#email').val(res.levelcontact[0].email);
$('#mobile').val(res.levelcontact[0].mobile);
$('#designation').val(res.levelcontact[0].designation);
res.levelcontact.shift();
$.each(res.levelcontact, function(index, contact) {
console.log(contact);
if (contact !== undefined) {
appendContactHtml(contact);
}
});
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
console.error(status, error);
setTimeout(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
toastr.warning('Something Wrong!', 'Warning');
}, 1000);
}
});
});
function loadBranchList()
{
var base_url = '<?= base_url("master/tpa/branch/list/"); ?>';
var tpa_branch_action = base_url + tpa_Branch_PrimaryKey;
if ($('#tpa_id_branch').val() != '') {
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
$.ajax({
url: tpa_branch_action,
type: 'GET',
success: function(response) {
setTimeout(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
}, 1000);
var branchTable = '';
if (data.length === 0) {
branchTable += `
<tr>
<td colspan="3" class="text-center font-color-black ">No data available in table</td>
</tr>
`;
} else {
$.each(response.tpa_branch, function(index, item) {
branchTable += `
<tr>
<td>${item.branch_name}</td>
<td>${item.branch_code}</td>
<td>
<a class="mdi mdi-lead-pencil btnBranchEdit" href="#" data-id="${item.id}" style="font-size:18px;"></a>
<a style="color:#02a8b5" data-id="${item.id}" onclick="removeTPABranch(this)"><i data-id="${item.id}" class="mdi mdi-delete" style="font-size:18px;"></i></a>
</td>
</tr>
`;
});
}
$('#tpa_branch_list').html(branchTable);
},
error: function(xhr, status, error) {
console.error(xhr.responseText);
console.error(status, error);
setTimeout(function() {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
toastr.warning('Something Wrong!', 'Warning');
}, 1000);
}
});
}
}
});
// function appendContactHtml(contact = false, reset = false) {
// console.log('appendContactHtml function called ')
// contactCount++;
// var container = document.getElementById('container');
// var uniqueId = Date.now().toString();
// var html = `
// <div id="${uniqueId}">
// <hr>
// <h6 class="header-title">Contact ${contactCount}</h6>
// <br>
// <div class="form-row">
// <div class="form-group col-md-12">
// <label for="${uniqueId}_first_name">Name<span class="text-danger">*</span></label>
// <input value="${contact !== undefined && contact !== false ? contact.name : ''}" type="text" class="form-control" placeholder="Enter Contact Name" name="name[]" id="${uniqueId}_name" required>
// </div>
// </div>
// <div class="form-row">
// <div class="form-group col-md-12">
// <label for="${uniqueId}_designation">Designation<span class="text-danger">*</span></label>
// <input value="${contact !== undefined && contact !== false ? contact.designation : ''}" type="text" class="form-control" placeholder="Enter Designation Name" name="designation[]" id="${uniqueId}_designation" required>
// </div>
// </div>
// <div class="form-row">
// <div class="form-group col-md-12">
// <label for="${uniqueId}_last_name">Email<span class="text-danger">*</span></label>
// <input data-parsley-type="email" value="${contact !== undefined && contact !== false ? contact.email : ''}" type="email" class="form-control" placeholder="Enter Contact Email" name="email[]" id="${uniqueId}_email" required>
// </div>
// </div>
// <div class="form-row">
// <div class="form-group col-md-12">
// <label for="${uniqueId}_mobile">Mobile<span class="text-danger">*</span></label>
// <input value="${contact !== undefined && contact !== false ? contact.mobile : ''}" type="tel" class="form-control" placeholder="Enter Contact Mobile" name="mobile[]" id="${uniqueId}_mobile" required>
// </div>
// </div>
// <div class="form-group" style="display: flex;">
// <button type="button" class="btn btn-danger btn-sm" onclick="removeContact(this)" id="${uniqueId}_remove">Remove</button>
// </div>
// </div>
// `;
// if(reset == false){
// console.log(reset)
// container.insertAdjacentHTML('beforeend', html);
// storeButtonId(uniqueId + '_add');
// if (contactCount >= 3) {
// hideStoredAddButtons();
// }
// }
// }
function renumberContacts() {
var contacts = document.querySelectorAll('.contact-block');
contacts.forEach(function(contact, index) {
let title = contact.querySelector('.modal-subtitle');
if (title) {
title.textContent = "Contact " + (index + 1); // auto numbering
}
});
contactCount = contacts.length; // keep global in sync
}
function appendContactHtml(contact = false, reset = false) {
console.log('appendContactHtml function called ');
var container = document.getElementById('container');
var uniqueId = Date.now().toString();
// <input type="hidden" name="primarykey[]" value="${contact ? contact.id : ''}"/>
var html = `
<div id="${uniqueId}" class="bg-white p-2 mb-2 rounded contact-block">
<div class="d-flex justify-content-between align-items-center mb-2">
<h6 class="modal-subtitle mb-0"></h6>
<div class="d-flex align-items-center">
<i class="mdi mdi-trash-can text-danger" style="cursor:pointer; font-size:24px !important;" onclick="removeContact(this)" id="${uniqueId}_remove"></i>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Name<span class="text-danger">*</span></label>
<input value="${contact ? contact.name : ''}" type="text" class="form-control" placeholder="Enter Contact Name" name="name[]" required maxlength="100" data-parsley-maxlength="100"
data-parsley-pattern="^[a-zA-Z0-9\s_-]+$"
data-parsley-pattern-message="Contact name can contain letters, numbers, spaces, underscore (_) and hyphen (-).">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Designation<span class="text-danger">*</span></label>
<input value="${contact ? contact.designation : ''}" type="text" class="form-control" placeholder="Enter Designation Name" name="designation[]" required maxlength="100" data-parsley-maxlength="100"
data-parsley-pattern="^[A-Za-z0-9\\-_\\/ ]+$"
data-parsley-pattern-message="Designation may only contain letters, numbers, /, -, _ and spaces.">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Email<span class="text-danger">*</span></label>
<input value="${contact ? contact.email : ''}" type="email" data-parsley-trigger="change" class="form-control" placeholder="Enter Contact Email" name="email[]" required
data-parsley-pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$"
data-parsley-pattern-message="Please enter a valid email format (e.g., name@domain.com).">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-12">
<label>Mobile<span class="text-danger">*</span></label>
<input value="${contact ? contact.mobile : ''}" data-parsley-type="digits" data-parsley-length="[10,10]" data-parsley-trigger="change" type="text" class="form-control" placeholder="Enter Contact Mobile" name="mobile[]" required maxlength="10" inputmode="numeric"
data-parsley-pattern="^[0-9]{10}$"
data-parsley-pattern-message="Mobile number must be exactly 10 digits.">
</div>
</div>
</div>
`;
if(!reset){
container.insertAdjacentHTML('beforeend', html);
renumberContacts(); // ✅ fix numbering
toggleAddButton();
}
}
function removeContact(btn){
var $block = $(btn).closest('.contact-block');
var isFirst = $block.attr('id') === 'contact_1_wrapper';
if (isFirst) {
var $next = $('#container .contact-block').first();
if ($next.length){
$block.replaceWith($next);
$next.attr('id','contact_1_wrapper');
$next.find('.modal-subtitle').text('Contact 1');
} else {
$block.find('input').val('');
return;
}
} else {
$block.remove();
}
renumberContacts();
toggleAddButton();
}
function toggleAddButton() {
var totalContacts = document.querySelectorAll('.contact-block, #contact_1_wrapper').length;
var addButton = document.querySelector('.ac');
if (totalContacts >= 3) {
addButton.style.display = 'none';
} else {
addButton.style.display = 'block';
}
}
// function removeContact(button) {
// var uniqueId = button.id.split("_")[0];
// var contactSection = document.getElementById(uniqueId);
// if (contactSection) {
// contactSection.parentNode.removeChild(contactSection);
// contactCount --;
// if (contactCount < 3) {
// var addButton = document.querySelector('.ac');
// if (addButton) {
// addButton.style.display = 'block';
// }
// }
// }
// }
function storeButtonId(id) {
var buttonIds = JSON.parse(localStorage.getItem('buttonIds')) || [];
buttonIds.push(id);
localStorage.setItem('buttonIds', JSON.stringify(buttonIds));
}
function hideStoredAddButtons() {
var storedIds = JSON.parse(localStorage.getItem('buttonIds')) || [];
storedIds.forEach(function(id) {
var addButton = document.getElementById(id);
var first_addButton = document.querySelector('.ac')
if (addButton) {
addButton.style.display = 'none';
first_addButton.style.display = 'none';
}
});
}
function showNextAddButton() {
var storedIds = JSON.parse(localStorage.getItem('buttonIds')) || [];
var addButtonShown = false;
// Iterate through the stored IDs to find the next "Add" button to show
storedIds.forEach(function(id) {
if (!addButtonShown) {
var addButton = document.getElementById(id);
if (addButton && addButton.style.display === 'none') {
addButton.style.display = 'block';
addButtonShown = true; // Set to true once an "Add" button is shown
}
}
});
}
function validateForm() {
var isValid = true;
$('#branch_form input, #branch_form select').each(function() {
if ($(this).is('input[type="text"]') || $(this).is('select')) {
if ($.trim($(this).val()) == '') {
isValid = false;
return false;
}
}
});
return isValid;
}
function removeTPABranch(element) {
Swal.fire({
title: "Are you sure?",
text: "You need to remove this TPA branch.",
icon: "info",
showCancelButton: true,
confirmButtonColor: "#3085d6",
confirmButtonText: "Yes",
}).then((result) => {
if (result.isConfirmed) {
var id = element.getAttribute('data-id');
var form_action = '<?= base_url("master/tpa/branch/remove/") ?>' + id;
$.ajax({
url: form_action,
type: "GET",
dataType: 'json',
processData: false,
contentType: false,
success: function(res) {
// console.log(res.status == true);
if(res){
if (res.status == true) {
toastr.success('TPA branch removed successfully', 'Success');
location.reload();
} else {
toastr.warning('Failed to remove TPA branch', 'Warning');
}
}
},
error: function (xhr, status, error) {
console.error(xhr.responseText);
console.error(status, error);
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
toastr.warning('Failed to remove TPA branch', 'Warning');
}
});
}
});
}
</script>