449 lines
21 KiB
PHP
Executable File
449 lines
21 KiB
PHP
Executable File
<style>
|
||
.table th,
|
||
.table td {
|
||
padding: 8px;
|
||
}
|
||
|
||
table.dataTable tbody td {
|
||
padding: 4px 4px !important;
|
||
}
|
||
|
||
table.dataTable thead th {
|
||
padding: 4px 4px !important;
|
||
}
|
||
|
||
.col-12{
|
||
|
||
max-width: 98% !important;
|
||
}
|
||
|
||
.dataTables_length label {height: 21px !important;}
|
||
|
||
</style>
|
||
|
||
<div class="row" id="client_list">
|
||
<div class="col-12">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<!-- <div class="row" style="margin-bottom:1rem;">
|
||
<div class="col-6" style="align-self: center;">
|
||
<h4 style="position: relative;">Advertisement Images</h4>
|
||
</div>
|
||
<div class="col-6" style="text-align: right; position: relative;top: 5px;">
|
||
<a data-toggle="modal" data-target="#bike_make_login-modal" href="#" type="button" id="btnAdd" class="btn btn-primary waves-effect waves-light" data-toggle="" data-placement="top" title="Add" data-trigger="hover">ADD</a>
|
||
</div>
|
||
</div> -->
|
||
<!-- <table data-custom-table-css="table" class="table table-sm table-hover m-0 table-centered dt-responsive nowrap w-100" cellspacing="0"
|
||
id="tickets-table"> -->
|
||
<div class="table-responsive">
|
||
<table data-custom-table-css="table" class="table mb-0 nowrap w-100 table-centered" cellspacing="0" id="tickets-table">
|
||
<thead class="bg-light">
|
||
<tr>
|
||
<th class="font-weight-medium"><div class="column-header">Advertisement Image Name</div></th>
|
||
<th class="font-weight-medium"><div class="column-header">Client Name</div></th>
|
||
<th class="font-weight-medium"><div class="column-header">Client Short Name</div></th>
|
||
<th class="font-weight-medium"><div class="column-header">Status</div></th>
|
||
<th class="font-weight-medium"><div class="column-header">Action</div></th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<?php foreach($addImageList as $row){ ?>
|
||
<tr >
|
||
<td class="client_info" data-id="<?php echo $row['id']; ?>"><?php echo $row['name']; ?></td>
|
||
<td class="client_info" ><?php echo $row['client_id'] != 0 ? $row['client_name'] : '-' ; ?></td>
|
||
<td class="client_info" ><?php echo $row['client_id'] != 0 ? $row['short_name'] : '-'; ?></td>
|
||
<td class="client_info" ><?php echo $row['status']; ?></td>
|
||
<td>
|
||
<div class="btn-group dropdown">
|
||
<a href="javascript: void(0);" class="dropdown-toggle arrow-none btn btn-light btn-sm" data-toggle="dropdown" aria-expanded="false"><i class="mdi mdi-dots-horizontal"></i></a>
|
||
<div class="dropdown-menu dropdown-menu-right">
|
||
<a class="dropdown-item advertise_image_edit" href="#" data-toggle="modal" data-wholearray='<?php echo json_encode($row, JSON_HEX_APOS); ?>' data-target="#bike_make_login-modal"><i class="mdi mdi-pencil mr-2 text-muted font-18 vertical-middle"></i>Edit</a>
|
||
<?php if($row['client_id'] != 0) { ?> <a class="dropdown-item" onclick="remove_advertise_image('<?= $row['id'];?>')"><i class="mdi mdi-delete mr-2 text-muted font-18 vertical-middle"></i>Delete</a> <?php } ?>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<?php } ?>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- end col -->
|
||
</div>
|
||
<!-- end row -->
|
||
|
||
|
||
<div id="append_client_info"></div>
|
||
|
||
<div id="bike_make_login-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<div class="mt-2 mb-4">
|
||
<h4 id="advertise_add_edit">Add Advertise Image </h4>
|
||
</div>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
|
||
<form id="model_form_data" class="px-4" enctype="multipart/form-data">
|
||
<input type="hidden" name="add_image_id" id="add_image_id" value="0">
|
||
|
||
<!-- old
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="form-group">
|
||
<label for="branchname">Upload Image</label>
|
||
<div class="input-icon">
|
||
<input type="file" class="form-control" name="advertise_image" id="advertise_image" accept="image/*" onchange="PreviewImage();" required>
|
||
<i class="mdi mdi-upload additional-icon"></i>
|
||
</div>
|
||
</div>
|
||
<div class="form-group col-md-6 float-left" style="position: relative;top: 0px;">
|
||
<img src=" " width="100" height="100" id="uploadPreview" class="avatar img-circle img-thumbnail" alt="avatar"/>
|
||
</div>
|
||
<div class="form-group col-md-3">
|
||
<label for="client_branch">Client<span class="text-danger">*</span></label>
|
||
<select class="form-control" id="client_id" name="client_id" required>
|
||
<option value="">Select Client</option>
|
||
<?php
|
||
if (isset($client) && count($client)) {
|
||
foreach ($client as $key => $value) {
|
||
echo "<option value='" . $value['id'] . "'>" . $value['client_name'] . "</option>";
|
||
}
|
||
}
|
||
?>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
-->
|
||
|
||
<div class="row mb-2 align-items-stretch">
|
||
<!-- Left column: col-8 -->
|
||
<div class="col-md-8 d-flex flex-column justify-content-between">
|
||
<!-- Top section -->
|
||
<div class="form-group">
|
||
<label for="branchname">Upload Image</label>
|
||
<div class="input-icon">
|
||
<input type="file" class="form-control" name="advertise_image" id="advertise_image" accept=".jpg,.jpeg,.png" onchange="PreviewImage();" required>
|
||
<i class="mdi mdi-upload additional-icon"></i>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bottom section -->
|
||
<div class="form-group">
|
||
<label for="client_branch">Client <span class="text-danger">*</span></label>
|
||
<select class="form-control" id="client_id" name="client_id" required>
|
||
<option value="">Select Client</option>
|
||
<option value="0">Default Image</option>
|
||
<?php
|
||
if (isset($client) && count($client)) {
|
||
foreach ($client as $value) {
|
||
echo "<option value='" . $value['id'] . "'>" . $value['client_name'] . "</option>";
|
||
}
|
||
}
|
||
?>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right column: col-4, preview image -->
|
||
<div class="col-md-4 d-flex flex-column align-items-center justify-content-center">
|
||
<img src="" class="avatar img-circle img-thumbnail" id="uploadPreview" alt="Preview" style="max-width: 100%; height: auto;">
|
||
|
||
<small style="font-size: x-small; margin-top: 5px; text-align: center;">
|
||
dimensions - 1640x664 pixels <br> size - 200kb
|
||
</small>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div class="form-group text-center">
|
||
<button type="button" class="btn btn-primary" onclick="submitBranch()">Submit</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<script>
|
||
|
||
|
||
function submitBranch() {
|
||
const fileInput = $('#advertise_image')[0].files[0]; // get actual file object
|
||
const imageId = $('#add_image_id').val();
|
||
const clientId = $('#client_id').val();
|
||
|
||
|
||
if (!fileInput) {
|
||
toastr.warning('Please upload an image before submitting', 'Warning');
|
||
$('#advertise_image').focus();
|
||
return;
|
||
}
|
||
|
||
if(!clientId){
|
||
toastr.warning('Please Select Client.', 'Warning');
|
||
$('#client_id').focus();
|
||
return;
|
||
}
|
||
|
||
var url = '<?= base_url("add_advertise_image") ?>';
|
||
var formData = new FormData();
|
||
formData.append('advertise_image', fileInput);
|
||
formData.append('add_image_id', imageId);
|
||
formData.append('client_id', clientId);
|
||
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: url,
|
||
data: formData,
|
||
processData: false,
|
||
contentType: false,
|
||
dataType: 'json',
|
||
success: function(response) {
|
||
console.log(response);
|
||
if (response.status) {
|
||
$('#bike_make_login-modal').modal('hide');
|
||
$('#advertise_image').val('');
|
||
$('#client_id').val(null).trigger('change');
|
||
$('#uploadPreview').attr('src', '<?= base_url('public/assets/images/avatar_2x.png') ?>');
|
||
toastr.success('Image uploaded successfully!');
|
||
window.location.reload();
|
||
} else {
|
||
toastr.error(response.message || 'Something went wrong.');
|
||
}
|
||
},
|
||
error: function(xhr, status, error) {
|
||
console.error(xhr.responseText);
|
||
console.error('Status:', status);
|
||
console.error('Error:', error);
|
||
|
||
let msg = 'Something went wrong. Please try again later.';
|
||
|
||
switch (xhr.status) {
|
||
case 400:
|
||
let response = xhr.responseJSON || JSON.parse(xhr.responseText);
|
||
if (response.errors) {
|
||
$.each(response.errors, function (field, message) {
|
||
toastr.warning(message, 'Validation Error');
|
||
});
|
||
} else {
|
||
toastr.warning(response.message || 'Validation failed', 'Warning');
|
||
}
|
||
msg = response.message || 'Bad Request — Invalid input.';
|
||
break;
|
||
case 401:
|
||
msg = 'Unauthorized — Please log in again.';
|
||
break;
|
||
case 403:
|
||
msg = 'Forbidden — You do not have permission.';
|
||
break;
|
||
case 404:
|
||
msg = 'Not Found — Requested URL or resource not found.';
|
||
break;
|
||
case 500:
|
||
console.log('Internal Server Error — Please contact support.');
|
||
msg = xhr.responseJSON?.message || xhr.responseText || msg;
|
||
break;
|
||
default:
|
||
msg = xhr.responseJSON?.message || xhr.responseText || msg;
|
||
}
|
||
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
|
||
function PreviewImage() {
|
||
console.log('function called');
|
||
var fileInput = document.getElementById("advertise_image");
|
||
var file = fileInput.files[0];
|
||
|
||
if (file) {
|
||
var allowedExtensions = ["jpg", "jpeg", "png"];
|
||
var fileExtension = file.name.split('.').pop().toLowerCase();
|
||
|
||
if (!allowedExtensions.includes(fileExtension) || file.size > 200 * 1024) {
|
||
toastr.warning('Maximum file size allowed is 200KB.', 'File size exceeds limit.');
|
||
fileInput.value = ""; // Clear the file input
|
||
document.getElementById("uploadPreview").src = "<?= base_url()."public/assets/images/avatar_2x.png" ?>"; // Remove the preview image
|
||
return;
|
||
}
|
||
|
||
var reader = new FileReader();
|
||
reader.readAsDataURL(file);
|
||
|
||
reader.onload = function (event) {
|
||
var img = new Image();
|
||
img.src = event.target.result;
|
||
|
||
img.onload = function () {
|
||
if (img.width !== 1640 || img.height !== 664) {
|
||
toastr.warning('Image dimensions must be 1640x664 pixels.', 'Invalid image dimensions.');
|
||
|
||
fileInput.value = ""; // Clear the file input
|
||
document.getElementById("uploadPreview").src = "<?= base_url()."public/assets/images/avatar_2x.png" ?>"; // Remove the preview image
|
||
} else {
|
||
document.getElementById("uploadPreview").src = img.src;
|
||
}
|
||
};
|
||
};
|
||
}
|
||
}
|
||
|
||
|
||
var table;
|
||
|
||
$(document).ready(function() {
|
||
$('#client_id').select2();
|
||
$('#add_image_id').val('');
|
||
$('#client_id').val(null).trigger('change');
|
||
$('#advertise_image').val('');
|
||
table = $('#tickets-table').DataTable({
|
||
// dom: "<'row'<'col-sm-1'f><'col-sm-11 text-right'B>>" + // Filter left, button right
|
||
// "<'row'<'col-sm-12'tr>>" +
|
||
// "<'row'<'col-sm-5'i><'col-sm-7'p>>",
|
||
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-plus"></i> <span class="btn-custom">Add</span>',
|
||
className: 'btn app-btn-primary',
|
||
action: function (e, dt, node, config) {
|
||
// ✅ Call your modal logic
|
||
callmodal();
|
||
}
|
||
}
|
||
],
|
||
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: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;"></i>
|
||
</div>`,
|
||
searchPlaceholder: "Search",
|
||
emptyTable: '<div class="text-center text-muted">No Data found</div>'
|
||
},
|
||
paging: true
|
||
});
|
||
});
|
||
|
||
// ✅ Define your modal function separately
|
||
function callmodal() {
|
||
$('#add_image_id').val(0);
|
||
$('#client_id').val(null).trigger('change');
|
||
$('#advertise_add_edit').html('Add Advertise Image');
|
||
$('#uploadPreview').attr('src', '<?= base_url()."public/assets/images/avatar_2x.png" ?>');
|
||
$('#bike_model_login-modal').modal('show'); // ✅ this shows the modal
|
||
var myModal = new bootstrap.Modal(document.getElementById('bike_make_login-modal'));
|
||
myModal.show();
|
||
}
|
||
|
||
|
||
function remove_advertise_image(id) {
|
||
if (!confirm("Are you sure you want to delete this image?")) return;
|
||
|
||
$.ajax({
|
||
type: 'POST',
|
||
url: '<?= base_url("remove_advertise_image"); ?>',
|
||
data: { add_image_id: id },
|
||
success: function (response) {
|
||
toastr.success('Deleted successfully');
|
||
location.reload(); // refresh page
|
||
},
|
||
error: function (xhr) {
|
||
console.error(xhr.responseText);
|
||
}
|
||
});
|
||
}
|
||
|
||
|
||
// $('#btnAdd').click(function () {
|
||
// $('#add_image_id').val(0);
|
||
// $('#advertise_add_edit').html('Add Advertise Image');
|
||
// $('#uploadPreview').attr('src', '<?= base_url()."public/assets/images/avatar_2x.png" ?>');
|
||
|
||
// })
|
||
|
||
// $('.advertise_image_edit').click(function (params) {
|
||
// // console.log($(this).data('id'));
|
||
// $('#add_image_id').val($(this).data('id'));
|
||
// var url = '<?= base_url("getAdvertiseImage/"); ?>'+$(this).data('id') ;
|
||
// $.ajax({
|
||
// type: 'GET',
|
||
// url: url,
|
||
// success: function (response) {
|
||
// console.log(response);
|
||
// $('#advertise_add_edit').html('Edit Advertise Image');
|
||
// $('#uploadPreview').attr('src', '<?= base_url() . "public/uploads/advertiseImage/"?>' + response)
|
||
// .on('error', function() {
|
||
// $(this).attr('src', '<?= base_url()."public/assets/images/avatar_2x.png" ?>');
|
||
// });
|
||
|
||
|
||
// },
|
||
// error: function (xhr, status, error) {
|
||
// console.error(xhr.responseText);
|
||
// }
|
||
|
||
// })
|
||
// })
|
||
$(document).on('click', '.advertise_image_edit', function (e) {
|
||
e.preventDefault();
|
||
|
||
// 1. Clear fields first for a clean state (Good practice)
|
||
$('#add_image_id').val('');
|
||
$('#client_id').val(null).trigger('change');
|
||
$('#advertise_image').val('');
|
||
// Reset preview to default before processing to avoid flicker/old image
|
||
$('#uploadPreview').attr('src', '<?= base_url("public/assets/images/avatar_2x.png") ?>');
|
||
|
||
let wholearray = JSON.parse($(this).attr('data-wholearray'));
|
||
let ad_name = wholearray.name;
|
||
let ad_id = wholearray.id;
|
||
let c_id = wholearray.client_id; // This holds the Client ID for the dropdown
|
||
|
||
// console.log('Whole array:', wholearray);
|
||
// console.log('Clicked ID:', ad_id);
|
||
|
||
// 2. Set the data fields and title
|
||
$('#add_image_id').val(ad_id);
|
||
$('#advertise_add_edit').html('Edit Advertise Image');
|
||
|
||
// 🎯 CRITICAL FIX: Set the value of the Client SELECT dropdown
|
||
// This pre-selects the client associated with the image.
|
||
$('#client_id').val(c_id).trigger('change');
|
||
|
||
|
||
// 3. Construct the image URL
|
||
// NOTE: If this path fails (404/403), revert to the previous controller path:
|
||
const imgUrl = '<?= base_url("showAdvertiseImage/"); ?>' + ad_name;
|
||
// const imgUrl = '<?= base_url('public/uploads/add_image_upload/'); ?>' + ad_name;
|
||
|
||
// 4. Set the image source AND add robust error handling for default image
|
||
$('#uploadPreview').attr('src', imgUrl).on('error', function() {
|
||
// Fallback: If the image fails to load, set the source to the default image.
|
||
$(this).attr('src', '<?= base_url("public/assets/images/avatar_2x.png") ?>');
|
||
});
|
||
|
||
// 5. Clear the file input
|
||
$('#advertise_image').val('');
|
||
|
||
// 6. Show the modal
|
||
var myModal = new bootstrap.Modal(document.getElementById('bike_make_login-modal'));
|
||
myModal.show();
|
||
});
|
||
|
||
|
||
</script>
|