nhance/app/Views/claim_files_upload.php

697 lines
26 KiB
PHP

<div class="tab-pane" id="fileupload">
<div id="required_id_docs_div" class="card">
<div class="card-body" style="background-color: #F5FFFF !important; border-radius: 10px; box-shadow: 0px 4px 4px 0px #00000040;">
<div class="form-group">
<!-- Header Row: Title + Switch + Save -->
<div class="row mb-3 align-items-center">
<div class="col-md-6">
<h5 class="mb-0"><strong>IR Documents</strong></h5>
</div>
<div class="col-md-6 text-right">
<div class="d-inline-block mr-3">
<div class="custom-control custom-switch d-inline-block">
<input type="checkbox" class="custom-control-input"
id="action_freeze_switch"
onchange="toggleActionFreeze()">
<label class="custom-control-label" for="action_freeze_switch">
<strong>Freeze User Actions</strong>
</label>
</div>
</div>
<button type="button"
class="btn btn-success waves-effect waves-light"
onclick="saveConfiguration()"> Save
</button>
</div>
</div>
<!-- Document List Container -->
<div class="row mb-3">
<div class="col-md-12">
<!-- Header Row -->
<div class="form-row mb-2">
<div class="col-md-7"><strong>Document Name</strong></div>
<div class="col-md-3"><strong>Status</strong></div>
<div class="col-md-2 text-center"><strong>Action</strong></div>
</div>
<!-- Dynamic Document Rows -->
<div id="document-list-container"></div>
<!-- Add Button -->
<!-- <div class="row mt-3">
<div class="col-md-12 text-right">
<button type="button"
class="btn btn-primary waves-effect waves-light"
onclick="addDocument()">
<i class="mdi mdi-plus"></i> Add Document
</button>
</div>
</div> -->
</div>
</div>
</div>
<!-- Hidden field to store JSON data for form submission -->
<input type="hidden" id="document_config_json" name="document_config">
</div>
</div>
<div class="row">
<div class="col-xl-12">
<div id="accordion" class="mb-3">
<div class="card mb-1" style="background-color: #F5FFFF !important; border-radius: 10px; box-shadow: 0px 4px 4px 0px #00000040;">
<h5 class="m-1">
<a id="toggleIcon" class="text-dark float-right" data-toggle="collapse" href="#collapseOne"
aria-expanded="true">
<i id="icon" class="mdi mdi-chevron-down mr-1 text-primary" style="font-size: 28px;color:black;"></i>
</a>
</h5>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<form class="parsley-examples" id="drive_file_upload_form" method="post"
enctype="multipart/form-data">
<input type="hidden" id="ticket_id_url" name="ticket_id_url">
<div class="form-group">
<div id="dynamic-form-container">
<div align="right">
<a id="toggle-upload-btn" class="btn btn-info waves-effect waves-light mr-1" onclick="toggleUploadType(this)">
File Upload
</a>
<a class="btn btn-primary waves-effect waves-light" id="add_btn_for_claim_file_upload" onclick="addHTMLInput(this)">+ Add</a>
</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="g_drive_file_upload_sbt_btn">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="file_table" class="card">
<div class="card-body" style="background-color: #F5FFFF !important; border-radius: 10px; box-shadow: 0px 4px 4px 0px #00000040;">
<div class="row" style="padding-bottom: 10px;">
<div class="col-6" style="align-self: center;">
<h4 style="position: relative;">File List</h4>
</div>
</div>
<div class="table-responsive" style="overflow-x: auto;">
<table data-custom-table-css="table" id="scroll-horizontal-datatable" class="table w-100 nowrap">
<thead class="bg-light">
<tr>
<th class="text-center">S.No&nbsp;</th>
<th>Docs Name&nbsp;</th>
<th>File Name&nbsp;</th>
<th>Action&nbsp;</th>
</tr>
</thead>
<tbody id="table_bd">
</tbody>
</table>
<div>
</div>
</div>
</div><!-- end col -->
</div>
</div>
<!-- edit modal -->
<div class="modal fade" id="edit_url_modal" tabindex="-1" role="dialog" aria-labelledby="editUrlModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<form id="edit_url_form">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Edit URL</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span>&times;</span>
</button>
</div>
<div class="modal-body">
<input type="hidden" id="edit_url_id" name="id">
<div class="form-group">
<label for="edit_doc_name">Document Name</label>
<input type="text" class="form-control" id="edit_doc_name" name="doc_name">
</div>
<div class="form-group">
<label for="edit_url_link">URL</label>
<input type="text" class="form-control" id="edit_url_link" name="url">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save Changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
</div>
</div>
</form>
</div>
</div>
<script>
$(document).ready(function(){
let ticket_id = $('#ticket_master_id').val();
$('#ticket_id_url').val(ticket_id);
let urlData = getUrlDataByTicketId(ticket_id);
})
$("#drive_file_upload_form").submit(function(event) {
event.preventDefault();
var isValid = $('#drive_file_upload_form').parsley().validate();
if (!isValid) {
console.log('Form is Empty', 'Warning');
return ;
}
form_action = '<?php echo base_url() . 'ticket/upload_url' ?>';
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
var formData = new FormData($('#drive_file_upload_form')[0]);
$.ajax({
data:formData,
url: form_action,
type: "POST",
dataType: 'json',
processData: false,
contentType: false,
success: function(res) {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
if(res.status == true){
toastr.success(res.message, 'Success');
window.location.reload();
}else{
toastr.error(res.message, 'Error');
}
},
error: function (xhr, status, error) {
console.log("error in submission of url data");
console.error(xhr.responseText);
console.error(status, error);
},
complete : function(){
console.log("ajax call is completed for submission of url data..!!");
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
}
});
});
function addHTMLInput() {
const container = document.getElementById('dynamic-form-container');
const newRow = document.createElement('div');
newRow.className = 'form-row dynamic-form-row';
newRow.innerHTML = `
<div class="form-group col-md-5">
<label for="file_name">Document Name<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="docs_name" name="docs_name[]" placeholder="Enter file name" required
value=""
>
</div>
<div class="form-group col-md-5">
<label for="file">URL<span class="text-danger">*</span></label>
<input type="text" class="form-control" id="url_name" name="url[]" required
value=""
>
</div>
<div class="form-group col-md-2" style="position: relative;top: 28px;">
<a class="btn btn-danger waves-effect waves-light" onclick="removeHTMLInput(this)" style="background-color: #BD0707;">
<i class="mdi mdi-delete" ></i>
</a>
</div>
`;
container.appendChild(newRow);
}
function removeHTMLInput(element) {
const container = document.getElementById('dynamic-form-container');
const rows = container.querySelectorAll('.dynamic-form-row');
if (rows.length > 1) {
const row = element.closest('.dynamic-form-row');
row.remove();
}
}
function getUrlDataByTicketId(ticket_id) {
// Show loader
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
$.ajax({
url: "<?= base_url('ticket/getUrlDataByTicketId')?>", // base_url must be defined in JS
type: "POST",
data: { ticket_id: ticket_id },
dataType: 'json',
success: function(response) {
console.log('Form submitted response:', response);
if (response.status === true) {
create_url_list(response.data);
addHTMLInput();
return ;
} else {
addHTMLInput();
console.warn("No Data");
}
},
error: function(xhr, status, error) {
console.log("error in get urldata api");
console.error("AJAX Error:", error);
},
complete: function() {
// Hide loader
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
console.log("Ajax is completed for get url data..!!");
}
});
}
function openEditModal(id, docName, url) {
$('#edit_url_id').val(id);
$('#edit_doc_name').val(docName);
$('#edit_url_link').val(url);
$('#edit_url_modal').modal('show'); // Bootstrap modal
}
function create_url_list(data) {
$('#table_bd').empty(); // clear existing rows
let base_url = "<?php echo base_url() ?>";
if (data && data.length > 0) {
let html = "";
data.forEach((item, index) => {
html += `
<tr>
<td class="text-center">${index + 1}</td>
<td>${item.doc_name}</td>
<td><a href="${item.url}" target="_blank">${item.file_type == 1 ? item.url : item.doc_name}</a></td>
<td>
<a href="javascript:void(0);" class="delete-url"
style="bacolor:black;"
data-href="${base_url}/ticket/remove_url?id=${item.id}">
<i class="mdi mdi-delete mr-1"></i>
</a>
</td>
</tr>
`;
});
$('#table_bd').append(html);
} else {
$('#table_bd').html('<tr><td colspan="4">No Data Found</td></tr>');
}
}
$(document).on('click', '.delete-url', function (e) {
e.preventDefault();
const url = $(this).data('href');
const $row = $(this).closest('tr'); // capture the row before async execution
confirmActionSweertAlert("Do you want to delete?", "Yes, Proceed!", "No, Cancel")
.then((confirmed) => {
if (confirmed) {
$.ajax({
url: url,
type: "GET",
dataType: "json",
beforeSend: function () {
$('.loader').fadeIn();
$('.loader-mask').fadeIn();
},
success: function (response) {
if (response.status === true) {
toastr.success('Removed Successfully');
$row.remove();
} else {
toastr.error(response.message || 'Deletion failed');
}
},
error: function (xhr, status, error) {
console.log("error ");
console.error("AJAX Error:", error);
toastr.error('AJAX request failed');
},
complete: function () {
$('.loader').fadeOut();
$('.loader-mask').delay(350).fadeOut('slow');
console.log("Ajax is completed for get url data..!!");
}
});
}
});
});
function addFileUploadHtml() {
const container = document.getElementById('dynamic-form-container');
const newRow = document.createElement('div');
newRow.className = 'form-row dynamic-form-row';
newRow.innerHTML = `
<div class="form-group col-md-5">
<label for="file_name">Document Name <span class="text-danger">*</span></label>
<input type="text" class="form-control" id="docs_name" name="docs_name[]" placeholder="Enter file name" required>
</div>
<div class="form-group col-md-5">
<label for="file">Choose File <span class="text-danger">*</span></label>
<input type="file" class="form-control" id="file_upload" name="file_upload[]" accept=".pdf,.jpg,.jpeg,.png" required>
</div>
<div class="form-group col-md-2" style="position: relative; top: 28px;">
<a class="btn btn-danger waves-effect waves-light" onclick="removeHTMLInput(this)" style="background-color: #BD0707;">
<i class="mdi mdi-delete"></i>
</a>
</div>
`;
container.appendChild(newRow);
}
function toggleUploadType(btn) {
const $btn = $(btn);
const $addBtn = $('#add_btn_for_claim_file_upload');
console.log('addBtn', $addBtn);
const $container = $('#dynamic-form-container');
const currentType = $btn.text().trim();
console.log('currentType', currentType);
// Remove all existing dynamic rows when mode changes
$container.find('.dynamic-form-row').remove();
if (currentType === 'URL Upload') {
$btn.text('File Upload').removeClass('btn-success').addClass('btn-info');
// Change the Add button action
$addBtn.attr('onclick', 'addHTMLInput(this)');
// Handle switching to file upload mode here
console.log('Switched to File Upload mode');
// call the function
addHTMLInput();
} else {
$btn.text('URL Upload').removeClass('btn-info').addClass('btn-success');
// Change the Add button action
$addBtn.attr('onclick', 'addFileUploadHtml(this)');
// Handle switching to URL upload mode here
console.log('Switched to URL Upload mode');
// call the function
addFileUploadHtml();
}
}
</script>
<script>
let documentConfig = {
is_action_freeze: false,
docs: []
};
$(document).ready(function(){
let jsonDocumentConfig = <?= isset($ticket_data['required_docs']) && !empty($ticket_data['required_docs'])
? $ticket_data['required_docs']
: '{"is_action_freeze": false, "docs": [{"document_name":"","document_received":false}]}' ?>;
console.log('loadConfiguration pre', jsonDocumentConfig);
loadConfiguration(jsonDocumentConfig);
})
// Initialize the form with JSON data
function initializeForm(jsonData) {
documentConfig = jsonData;
// Set the freeze switch
const freezeSwitch = document.getElementById('action_freeze_switch');
if (freezeSwitch) {
freezeSwitch.checked = documentConfig.is_action_freeze;
}
// Render document list
renderDocumentList();
}
// Render the document input list
function renderDocumentList() {
const container = document.getElementById('document-list-container');
if (!container) return;
container.innerHTML = '';
documentConfig.docs.forEach((doc, index) => {
const docRow = createDocumentRow(doc, index);
container.appendChild(docRow);
});
}
// Create a single document row
function createDocumentRowOld(doc, index) {
const row = document.createElement('div');
row.className = 'form-row align-items-center mb-2';
row.dataset.index = index;
row.innerHTML = `
<div class="col-md-7">
<input type="text" class="form-control"
placeholder="Document Name"
value="${doc.document_name}"
onchange="updateDocumentName(${index}, this.value)"
${documentConfig.is_action_freeze ? 'disabled' : ''}>
</div>
<div class="col-md-3">
<span class="badge ${doc.document_received ? 'badge-success' : 'badge-danger'} text-center d-block"
style="cursor:pointer; font-size:14px; padding:13px 12px; font-weight:600; border-radius:9px;"
onclick="${documentConfig.is_action_freeze ? '' : `updateDocumentReceived(${index}, ${!doc.document_received})`}">
${doc.document_received ? 'Received' : 'Not Received'}
</span>
</div>
<div class="col-md-2">
<button type="button" class="btn btn-sm btn-danger"
onclick="removeDocument(${index})"
${documentConfig.is_action_freeze ? 'disabled' : ''}>
<i class="mdi mdi-delete"></i> Remove
</button>
</div>
`;
return row;
}
function createDocumentRow(doc, index) {
const row = document.createElement('div');
row.className = 'form-row align-items-center mb-2';
row.dataset.index = index;
const isLastRow = index === documentConfig.docs.length - 1; // 👉 Check last item
row.innerHTML = `
<div class="col-md-7">
<input type="text" class="form-control"
placeholder="Document Name"
value="${doc.document_name}"
onchange="updateDocumentName(${index}, this.value)"
${documentConfig.is_action_freeze ? 'disabled' : ''}>
</div>
<div class="col-md-3">
<span class="badge ${doc.document_received ? 'badge-success' : 'badge-danger'} text-center d-block"
style="cursor:pointer; font-size:14px; padding:13px 12px; font-weight:600; border-radius:9px;"
onclick="${documentConfig.is_action_freeze ? '' : `updateDocumentReceived(${index}, ${!doc.document_received})`}">
${doc.document_received ? 'Received' : 'Not Received'}
</span>
</div>
<div class="col-md-2 text-center">
<button type="button" class="btn btn-sm btn-danger"
onclick="removeDocument(${index})"
${documentConfig.is_action_freeze ? 'disabled' : ''}>
<i class="mdi mdi-delete"></i>
</button>
${isLastRow && !documentConfig.is_action_freeze ? `
<button type="button" class="btn btn-sm btn-primary ml-1"
onclick="addDocument()">
<i class="mdi mdi-plus"></i>
</button>` : ''}
</div>
`;
return row;
}
// Add new document
function addDocument() {
if (documentConfig.is_action_freeze) {
toastr.warning('Cannot add documents when action is frozen', 'WARNING');
return;
}
documentConfig.docs.push({
document_name: '',
document_received: false
});
renderDocumentList();
}
// Remove document
function removeDocumentold(index) {
if (documentConfig.is_action_freeze) {
alert('Cannot remove documents when action is frozen');
return;
}
documentConfig.docs.splice(index, 1);
renderDocumentList();
}
function removeDocument(index) {
if (documentConfig.is_action_freeze) {
toastr.warning('Cannot remove documents when action is frozen', 'WARNING');
return;
}
const doc = documentConfig.docs[index];
// ❗ If document is already received, do not remove
if (doc.document_received === true) {
toastr.warning('Cannot remove a received document', 'WARNING');
return;
}
// 👉 First row cannot be removed
if (index === 0) {
documentConfig.docs[0].document_name = '';
documentConfig.docs[0].document_received = false;
renderDocumentList();
return;
}
// 👉 Other rows can be removed
documentConfig.docs.splice(index, 1);
renderDocumentList();
}
// Update document name
function updateDocumentName(index, value) {
documentConfig.docs[index].document_name = value;
}
// Update document received status
function updateDocumentReceived(index, value) {
documentConfig.docs[index].document_received = value === 'true';
}
// Toggle freeze state
function toggleActionFreeze() {
const freezeSwitch = document.getElementById('action_freeze_switch');
documentConfig.is_action_freeze = freezeSwitch.checked;
// Re-render to update disabled states
renderDocumentList();
}
// Save configuration
function saveConfiguration() {
const hasEmptyNames = documentConfig.docs.some(doc => !doc.document_name.trim());
if (hasEmptyNames) {
toastr.warning('Please fill in all document names', 'WARNING');
return false;
}
let ticket_id = $('#ticket_id_url').val();
let required_docs = JSON.stringify(documentConfig);
console.log('Saving configuration:', JSON.stringify(documentConfig, null, 2));
console.log('ticket_id', ticket_id);
// Data to send in the AJAX request
let requestData = {
ticket_id: ticket_id,
required_docs: required_docs
};
let url = '<?= base_url('ticket/saveIRDocsJson') ?>';
// Send AJAX request
sendAjaxRequestForGlobal(url, 'POST', requestData, function(response) {
console.log('Data fetched successfully:', response);
if (response.status) {
loadConfiguration(response.data);
toastr.success(response.message, 'SUCCESS');
} else {
toastr.warning(response.message, 'WARNING');
}
}, function(xhr, status, error) {
console.error('Error fetching data:', error);
console.error(xhr.responseText);
toastr.error('An error occurred while saving docs.', 'ERROR');
});
}
// Get current configuration as JSON
function getConfiguration() {
return documentConfig;
}
// Edit mode - load existing configuration
function loadConfiguration(jsonString) {
try {
const data = typeof jsonString === 'string' ? JSON.parse(jsonString) : jsonString;
initializeForm(data);
} catch (e) {
console.error('Invalid JSON:', e);
}
}
</script>