Server : ApacheSystem : Linux host44.registrar-servers.com 4.18.0-513.18.1.lve.2.el8.x86_64 #1 SMP Sat Mar 30 15:36:11 UTC 2024 x86_64 User : vapecompany ( 2719) PHP Version : 7.4.33 Disable Function : NONE Directory : /home/vapecompany/demo.vapecompany.com.bd/resources/views/backend/region/ |
Upload File : |
@extends('backend.layout.app')
@section('content')
<style type="text/css">
.dataTables_length{
margin-top: 10px;
}
</style>
<!-- ============================================================== -->
<!-- Page wrapper -->
<!-- ============================================================== -->
<div class="page-wrapper">
<!-- ============================================================== -->
<!-- Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<div class="page-breadcrumb">
<div class="row">
<div class="col-5 align-self-center">
<h4 class="page-title">Region List</h4>
<!-- <div class="d-flex align-items-center">
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>
</div> -->
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End Bread crumb and right sidebar toggle -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Container fluid -->
<!-- ============================================================== -->
<div class="container-fluid">
<!-- ============================================================== -->
<!-- Start Page Content -->
<!-- ============================================================== -->
<div class="row">
<div class="col-12">
<!-- Column -->
<div class="card">
<div class="card-body table-responsive-sm table-responsive-md">
<!-- <h4 class="card-title">Table Responsive </h4>
<h6 class="card-subtitle">Data table example</h6> -->
<div class="row">
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Region Id:</label>
<input type="text" class="form-control datatable-input" placeholder="Enter Region ID" data-col-index="0" />
</div>
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Region Name:</label>
<input type="text" class="form-control datatable-input" placeholder="Enter Region Name" data-col-index="1" />
</div>
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Status:</label>
<select class="form-control datatable-input" data-col-index="2">
<option value="">Select</option>
<option value="1">Active</option>
<option value="0">In Active</option>
</select>
</div>
</div>
<div class="row mt-8" style="margin-top: 15px;text-align: center;">
<div class="col-lg-12">
<button class="btn btn-primary btn-primary--icon" id="kt_search">
<span>
<i class="la la-search"></i>
<span>Search</span>
</span>
</button>
<button class="btn btn-secondary btn-secondary--icon" id="kt_reset">
<span>
<i class="la la-close"></i>
<span>Reset</span>
</span>
</button></div>
</div>
<table id="dtables" class="table table-striped table-bordered dt-responsive nowrap" style="width:100%">
<thead>
<tr>
<th>Region ID</th>
<th>Region Name</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- ============================================================== -->
<!-- End PAge Content -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- Right sidebar -->
<!-- ============================================================== -->
<!-- .right-sidebar -->
<!-- ============================================================== -->
<!-- End Right sidebar -->
<!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Container fluid -->
@endsection
@section('script')
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.6/js/responsive.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>
<script src=" https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="{{url('public/backend/js/buttons.html5.js')}}"></script>
<!--<script src="https://cdn.datatables.net/buttons/1.2.3/js/buttons.html5.js"></script>-->
<script type="text/javascript">
$(document).ready(function() {
var datas="";
$('#dtables tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
var ts= $('#dtables').DataTable({
"lengthMenu": [[10, 50, 100,250,500,1000,-1], [10, 50, 100,250,500,1000,'All']],
responsive: true,
orderCellsTop: true,
dom: 'Blrtip',
scrollX: true,
buttons: [
{
extend: 'excel',
title: 'Region List',
exportOptions: {
columns: [ 0, 1, 2]
}
,customize: function (xlsx) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
// console.log(sheet);
var colRange = sheet.getElementsByTagName('col').length - 1;
//var colRange = createCellPos( lastCol ) + '1';
var numrows = 5;
var clR = $('row', sheet);
//update Row
clR.each(function () {
var attr = $(this).attr('r');
var ind = parseInt(attr);
ind = ind + numrows;
$(this).attr("r",ind);
});
// Create row before data
$('row c ', sheet).each(function () {
var attr = $(this).attr('r');
var pre = attr.substring(0, 1);
var ind = parseInt(attr.substring(1, attr.length));
ind = ind + numrows;
$(this).attr("r", pre + ind);
});
function Addrow(index,data, colRange, sheet) {
msg='<row r="'+index+'">'
for(i=0;i<data.length;i++){
var key=data[i].key;
var value=data[i].value;
var style=data[i].style;
mergeCells( index, colRange, sheet );
msg += '<c t="inlineStr" s="'+ style +'" r="' + key + index + '">';
msg += '<is>';
msg += '<t>'+value+'</t>';
msg+= '</is>';
msg+='</c>';
}
msg += '</row>';
return msg;
}
var mergeCells = function ( row, colspan, sheet ) {
//console.log(sheet);
var mergeCells = $('mergeCells', sheet);
//console.log(mergeCells);
mergeCells[0].appendChild( _createNode( sheet, 'mergeCell', {
attr: {
ref: 'A'+row+':'+createCellPos(colspan)+row
}
} ) );
//mergeCells.attr( 'count', mergeCells.attr( 'count' )+1 );
//$('row:eq('+(row-1)+') c', sheet).attr( 's', '51' ); // centre
};
function createCellPos( n ){
var ordA = 'A'.charCodeAt(0);
var ordZ = 'Z'.charCodeAt(0);
var len = ordZ - ordA + 1;
var s = "";
while( n >= 0 ) {
s = String.fromCharCode(n % len + ordA) + s;
n = Math.floor(n / len) - 1;
}
return s;
}
function _createNode( doc, nodeName, opts ) {
var tempNode = doc.createElement( nodeName );
if ( opts ) {
if ( opts.attr ) {
$(tempNode).attr( opts.attr );
}
if ( opts.children ) {
$.each( opts.children, function ( key, value ) {
tempNode.appendChild( value );
} );
}
if ( opts.text !== null && opts.text !== undefined ) {
tempNode.appendChild( doc.createTextNode( opts.text ) );
}
}
return tempNode;
}
//insert
var r1 = Addrow(1, [{ key: 'A', value: '{{$companyInfo ? $companyInfo->company_name: "MAKTEL LIMITED"}}', style: '51' }], colRange, sheet);
var r2 = Addrow(2, [{ key: 'A', value: '{{$companyInfo ? $companyInfo->company_address : "House-277(Level-4),Lane-4,Baridhara DOHS,Dhaka-1206."}}', style: '51' }], colRange, sheet);
var r3 = Addrow(3, [{ key: 'A', value: 'Hotline: +{{$companyInfo ? $companyInfo->company_phone: "88 01844241530"}}', style: '51' }], colRange, sheet);
var r4 = Addrow(4, [{ key: 'A', value: 'Email: {{$companyInfo ? $companyInfo->company_email : "info@maktel.com.bd"}}', style: '51' }], colRange, sheet);
var r5 = Addrow(5, [{ key: 'A', value: 'Web: {{$companyInfo ? $companyInfo->company_website : "www.maktel.com.bd"}}', style: '51' }], colRange, sheet);
var mergeCells = $('mergeCells', sheet);
//console.log(mergeCells);
mergeCells[0].appendChild( _createNode( sheet, 'mergeCell', {
attr: {
ref: 'A6:D6'
}
} ) );
sheet.childNodes[0].childNodes[1].innerHTML = r1 + r2+ r3+ r4+ r5+ sheet.childNodes[0].childNodes[1].innerHTML;
}
},
{
text: 'PDF',
extend: 'pdfHtml5',
filename: 'Brand List',
orientation: 'landscape', //portrait
pageSize: 'A4', //A3 , A5 , A6 , legal , letter
exportOptions: {
columns: [ 0, 1, 2],
search: 'applied',
order: 'applied'
},
customize: function (doc) {
//Remove the title created by datatTables
doc.content.splice(0,1);
//Create a date string that we use in the footer. Format is dd-mm-yyyy
var now = new Date();
var jsDate = now.getDate()+'-'+(now.getMonth()+1)+'-'+now.getFullYear();
// Logo converted to base64
doc.pageMargins = [20,120,20,30];
// Set the font size fot the entire document
doc.defaultStyle.fontSize = 7;
// Set the fontsize for the table header
doc.styles.tableHeader.fontSize = 7;
doc.styles.tableBodyOdd.fillColor = "#fff";
doc.styles.tableBodyOdd.alignment = "center";
doc.styles.tableBodyEven.alignment = "center";
// Create a header object with 3 columns
// Left side: Logo
// Middle: brandname
// Right side: A document title
doc.content[0].table.widths =['20%','40%','40%'];
doc['header']=(function() {
return {
columns: [
{
image: datas,
width: 120,
height: 30,
},
{
alignment: 'center',
text: '{{$companyInfo ? $companyInfo->company_name: "MAKTEL LIMITED"}}\n{{$companyInfo ? $companyInfo->company_address : "House-277(Level-4),Lane-4,Baridhara DOHS,Dhaka-1206."}}\nHotline:+{{$companyInfo ? $companyInfo->company_phone: "88 01844241530"}}\nEmail:{{$companyInfo ? $companyInfo->company_email : "info@maktel.com.bd"}}\nWeb:{{$companyInfo ? $companyInfo->company_website : "www.maktel.com.bd"}}\n Title: Region List',
fontSize: 15,
margin: [100,0]
},
],
margin: 10
}
});
// Create a footer object with 2 columns
// Left side: report creation date
// Right side: current page and total pages
doc['footer']=(function(page, pages) {
return {
columns: [
{
alignment: 'left',
text: ['Created on: ', { text: jsDate.toString() }]
},
{
alignment: 'right',
text: ['page ', { text: page.toString() }, ' of ', { text: pages.toString() }]
}
],
margin: 20
}
});
// Change dataTable layout (Table styling)
// To use predefined layouts uncomment the line below and comment the custom lines below
// doc.content[0].layout = 'lightHorizontalLines'; // noBorders , headerLineOnly
var objLayout = {};
objLayout['hLineWidth'] = function(i) { return .5; };
objLayout['vLineWidth'] = function(i) { return .5; };
objLayout['hLineColor'] = function(i) { return '#aaa'; };
objLayout['vLineColor'] = function(i) { return '#aaa'; };
objLayout['paddingLeft'] = function(i) { return 4; };
objLayout['paddingRight'] = function(i) { return 4; };
doc.content[0].layout = objLayout;
}
},
{
extend: 'print',
exportOptions: {
columns: [ 0, 1, 2],
},
//autoPrint: false,
title: '',
customize: function (doc) {
var now = new Date();
var jsDate = now.getDate()+'-'+(now.getMonth()+1)+'-'+now.getFullYear();
$(doc.document.body)
.prepend('<img style="position:absolute; top:10; left:0;width:200px" src="http://localhost/maktel/public/images/text_logo.png">')
.prepend('<div style="text-align:center"><h2 class="name">{{$companyInfo ? $companyInfo->company_name: "MAKTEL LIMITED"}}</h2><div>{{$companyInfo ? $companyInfo->company_address : "House-277(Level-4),Lane-4,Baridhara DOHS,Dhaka-1206."}}</div><div>Hotline:+{{$companyInfo ? $companyInfo->company_phone: "88 01844241530"}}</div><div>Email:{{$companyInfo ? $companyInfo->company_email : "info@maktel.com.bd"}}</div><div>Web:{{$companyInfo ? $companyInfo->company_website : "www.maktel.com.bd"}}</div><div>Title: Region List</div></div>')
// .prepend('<div style="position:absolute; bottom:20; left:100;">Pagina '+page.toString()+' of '+pages.toString()+'</div>');
$(doc.document.body).find('table').css('text-align','center');
// .removeClass('dataTable')
// .css('font-size','12px')
// .css('margin-top','65px')
// .css('margin-bottom','60px')
$(doc.document.body).find('th').each(function(index){
$(this).css('font-size','18px');
$(this).css('color','#fff');
$(this).css('background-color','black');
$(this).css('text-align','center');
});
},
},
],
initComplete: function () {
// Apply the search
var ethis=this;
$('#kt_search').on('click',function(){
event.preventDefault();
$( '.datatable-input').each(function(){
//if(this.value != ""){
var t=$(this).data("col-index");
var that = ethis.api().columns(t);
if ( that.search() !== this.value ) {
that
.search( this.value );
}
// }
});
ethis.api().table().draw();
});
$('#kt_reset').on('click',function(){
event.preventDefault();
$( '.datatable-input').each(function(){
$(this).val('');
var t=$(this).data("col-index");
var that = ethis.api().columns(t);
if ( that.search() !== this.value ) {
that
.search( "");
}
});
ethis.api().table().draw();
});
},
processing: true,
serverSide: true,
ajax: {
"url": "{{route('all_region')}}",
"type": "POST",
complete: function (data) {
// console.log(data);
},
error: function (data) {
//console.log(data);
},
},
"pageLength": 10,
columns: [
{ data: 'region_id' },
{ data: 'region_name' },
{ data: 'status' },
{ data: 'Action' },
]
});
function getBase64FromImageUrl(url) {
var img = new Image();
img.crossOrigin = "anonymous";
img.src = "{{$companyInfo ? $companyInfo->company_logo ? url('public/images/company/'.$companyInfo->company_logo): url('/public/images/text_logo.png') : url('/public/images/text_logo.png')}}";
img.onload = function () {
var canvas = document.createElement("canvas");
canvas.width =this.width;
canvas.height =this.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
//console.log(this.src);
var dataURL = canvas.toDataURL("image/png");
var res= dataURL.replace(/^data:image\/(png|jpg);base64,/, "data:image/jpeg;base64,/");
//console.log(dataURL);
datas=dataURL;
//resultTable();
return res;
};
}
getBase64FromImageUrl('');
});
</script>
@endsection