nhance/app/Views/dms_search.php

325 lines
12 KiB
PHP

<style>
.col-12 {
max-width: 98% !important;
}
.autocomplete-suggestions {
border: 1px solid #d4d4d4;
max-height: 150px;
overflow-y: auto;
position: absolute;
background-color: white;
width: inherit;
z-index: 1;
}
.autocomplete-suggestion {
padding: 8px;
cursor: pointer;
}
.autocomplete-suggestion:hover {
background-color: #e9e9e9;
}
.dataTables_length label {height: 21px !important;}
.filter-sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1001;
top: 0;
right: 0;
background-color: #f8f9fa;
overflow-x: hidden;
transition: 0.5s;
box-shadow: -2px 0 5px rgba(0,0,0,0.1);
display: flex;
flex-direction: column;
}
.filter-sidebar-header {
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #dee2e6;
flex-shrink: 0;
}
.filter-sidebar-header .closebtn {
font-size: 28px;
text-decoration: none;
color: #6c757d;
}
.filter-sidebar .closebtn:hover {
color: #000;
}
.filter-sidebar-content {
padding: 20px;
flex-grow: 1;
overflow-y: auto;
}
.filter-sidebar-footer {
padding: 15px 20px;
display: flex;
justify-content: flex-end;
border-top: 1px solid #dee2e6;
flex-shrink: 0;
gap: 10px;
}
</style>
<div id="filter-sidebar" class="filter-sidebar">
<div class="filter-sidebar-header">
<h4 class="m-0">Filter</h4>
<a href="javascript:void(0)" class="closebtn" onclick="closeFilterNav()">&times;</a>
</div>
<div class="filter-sidebar-content">
<form method="post" action="<?= base_url("/dmsSearch"); ?>" id='dms_search_form'>
<div class="form-row">
<div class="form-group col-md-12">
<label for="customer">Customer</label>
<input type="text" class="form-control" id="customer" placeholder="Enter customer name">
<input type="hidden" name="customer_id" class="form-control" id="customer_id" placeholder="Enter customer name">
<div id="customer_suggestions" class="autocomplete-suggestions" style="display:none;"></div>
</div>
<div class="form-group col-md-12">
<label for="customer">Customer document name</label>
<input type="text" name="cus_doc_name" class="form-control" id="cus_doc_name" placeholder="Enter customer doc name ">
</div>
<div class="form-group col-md-12" style="text-align: center; font-size: small;">
OR
</div>
<div class="form-group col-md-12">
<label for="customer">Policy</label>
<input type="text" class="form-control" id="policy" placeholder="Enter policy no">
<input type="hidden" name="policy_id" class="form-control" id="policy_id" placeholder="Enter policy no">
<div id="policy_suggestions" class="autocomplete-suggestions" style="display:none;"></div>
</div>
<div class="form-group col-md-12">
<label for="customer">Policy document name</label>
<input type="text" name="policy_doc_name" class="form-control" id="policy_doc_name" placeholder="Enter policy doc name ">
</div>
</div>
</form>
</div>
<div class="filter-sidebar-footer">
<button type="button" class="btn btn-secondary" id="clear-filters">Clear</button>
<button type="submit" class="btn btn-primary" id="get-emp-list" onclick="fetchFileList(event);closeFilterNav();">Submit</button>
</div>
</div>
<!-- end page title -->
<div class="col-12" id="second_page">
<div class="card">
<div class="card-body">
<div class="row" style="padding-bottom: 10px;">
<div class="col-6" style="align-self: center;">
<h4 style="position: relative;">Files</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">
<thead class="bg-light">
<tr>
<th>S.No&nbsp;</th>
<th>Doc name&nbsp;</th>
<th>File name&nbsp;</th>
<th>Action&nbsp;</th>
</tr>
</thead>
<tbody>
<?php if (isset($files)) { ?>
<?php foreach($files as $index => $row){ ?>
<tr>
<td><?= $index + 1 ?></td>
<td><?php echo $row['doc_name']; ?></td>
<td><?php echo $row['file_name']; ?></td>
<td>
<a id="download_1"
data-id="1"
class="mdi mdi-download"
style="font-size: 18px;"
target="_blank"
href="<?= base_url("/downloadGdriveFile?client_id=" . $row['client_id'] . "&file_type=" . $row['file_type'] . "&file_name=" . $row['file_name']."&client_policy_id=".$row['client_policy_id']); ?>">
</a>
</td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>
<div>
</div>
</div>
</div><!-- end col -->
</div>
</div>
<script>
function openDMSFilterNav() {
document.getElementById("filter-sidebar").style.width = "350px";
}
function closeFilterNav() {
document.getElementById("filter-sidebar").style.width = "0";
}
$(document).ready(function() {
const customer_suggestions = <?php echo json_encode($customers); ?>;
const policy_suggestions = <?php echo json_encode($policies); ?>;
showSuggestions('customer', 'customer_suggestions', 'customer_id', customer_suggestions);
showSuggestions('policy', 'policy_suggestions', 'policy_id', policy_suggestions);
})
// Datatable document ready
$(document).ready(function() {
var ticketsTable = $('#scroll-horizontal-datatable');
if (ticketsTable.length) {
ticketsTable.DataTable({
scrollX: true,
dom: "<'row'<'col-12 d-flex justify-content-between align-items-center'<'datatable-search dataTables_filter'f><'datatable-buttons dt-buttons'B>>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row align-items-center'<'col-5 text-start'i><'col-7 d-flex justify-content-end align-items-center'<'me-2'l>p>>",
lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
buttons: [
{
text: '<i class="mdi mdi-filter"></i><span class="btn-custom"> Filter </span>',
className: 'btn app-btn-primary mr-2',
action: function (e, dt, node, config) {
openDMSFilterNav();
},
attr: {
id: 'openDMSFilterNav'
}
},
{
extend: 'collection',
text: '<span class=" btn-custom"> Export </span><i class="mdi mdi-menu-down"></i>',
className: 'btn app-btn-secondary ',
buttons: [{
extend: 'csv',
text: '<i class="mdi mdi-file-delimited " ></i><span class=" btn-custom"> CSV </span>',
className: 'app-btn-primary ',
},
{
extend: 'excel',
text: '<i class="mdi mdi-file-excel " ></i><span class=" btn-custom"> EXCEL </span>',
exportOptions: {
orthogonal: 'sort'
},
className: 'app-btn-primary ',
}
]
}],
paging: true,
pageLength: 10,
language: {
search: `
<div class="datatable-search-wrapper" style="position:relative; display:inline-block; width:100%;">
_INPUT_
<i class="mdi mdi-magnify datatable-search-icon"
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666;"></i>
<i class="mdi mdi-close-circle datatable-clear-icon"
style="position:absolute; right:10px; top:50%; transform:translateY(-50%); color:#666; display:none; cursor:pointer;"></i>
</div>
`,
searchPlaceholder: "Search",
emptyTable: '<div class="text-center text-muted">No Data found</div>'
},
order: [
[0, 'desc']
]
});
} else {
console.error("Table not found.");
}
});
function showSuggestions(inputID, suggestionBoxID, hiddenInputID, suggestions) {
const input = document.getElementById(inputID);
const suggestionBox = document.getElementById(suggestionBoxID);
const hiddenInput = document.getElementById(hiddenInputID);
input.addEventListener('input', function() {
const value = this.value.toLowerCase();
suggestionBox.innerHTML = ''; // Clear previous suggestions
if (value) {
const filteredSuggestions = suggestions.filter(item =>
item.display_value.toLowerCase().includes(value)
);
filteredSuggestions.forEach(suggestion => {
const suggestionItem = document.createElement('div');
suggestionItem.textContent = suggestion.display_value;
suggestionItem.classList.add('autocomplete-suggestion');
suggestionItem.addEventListener('click', function() {
input.value = suggestion.display_value; // Display value in input
hiddenInput.value = suggestion.id; // Store id in hidden input
suggestionBox.innerHTML = ''; // Clear suggestions after selecting
suggestionBox.style.display = 'none';
});
suggestionBox.appendChild(suggestionItem);
suggestionBox.style.display = 'block';
});
}
});
}
function fetchFileList(event) {
event.preventDefault();
var customer = document.getElementById('customer').value;
var customer_id = document.getElementById('customer_id').value;
var policy = document.getElementById('policy').value;
var policy_id = document.getElementById('policy_id').value;
var cus_doc_name = document.getElementById('cus_doc_name').value;
var policy_doc_name = document.getElementById('policy_doc_name').value;
if (policy == '' && customer == '') {
alert('choose customer or policy');
return false;
}
if (customer == '' && cus_doc_name != '') {
alert('choose customer');
return false;
}
if (policy == '' && policy_doc_name != '') {
alert('choose policy');
return false;
}
$('#dms_search_form').submit();
}
document.getElementById('clear-filters').addEventListener('click', function() {
document.getElementById('customer').value = '';
document.getElementById('customer_id').value = '';
document.getElementById('cus_doc_name').value = '';
document.getElementById('policy').value = '';
document.getElementById('policy_id').value = '';
document.getElementById('policy_doc_name').value = '';
});
</script>