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/product/ |
Upload File : |
@extends('backend.layout.app')
@section('content')
<style type="text/css">
@media screen and (max-width: 767px){
#dtables_filter{
margin-top: 10px;
}
}
.dataTables_length{
margin-top: 10px;
}
.product_show_more{
height: 50px;
overflow: hidden;
}
</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">Product 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">Product List</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">
<h4 class="card-title">Product List</h4>
<div class="row">
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Product ID:</label>
<input type="text" class="form-control datatable-input" placeholder="Enter Product ID" data-col-index="0" />
</div>
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Category:</label>
<input type="text" class="form-control datatable-input" placeholder="Enter Category Name" data-col-index="1" />
</div>
{{-- <div class="col-lg-3 mb-lg-0 mb-6">
<label>Brand:</label>
<input type="text" class="form-control datatable-input" placeholder="Enter Brand Name" data-col-index="2" />
</div> --}}
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Product Code:</label>
<input type="text" class="form-control datatable-input" placeholder="Enter Product Code" data-col-index="3" />
</div>
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Product Name:</label>
<input type="text" class="form-control datatable-input" placeholder="Enter Product Name" data-col-index="4" />
</div>
{{-- <div class="col-lg-3 mb-lg-0 mb-6">
<label>Model:</label>
<input type="text" class="form-control datatable-input" placeholder="Enter Model Name" data-col-index="5" />
</div> --}}
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Sale Price:</label>
<input type="text" class="form-control datatable-input" placeholder="Enter Sale Price" data-col-index="6" />
</div>
{{-- <div class="col-lg-3 mb-lg-0 mb-6">
<label>Incentive Price:</label>
<input type="text" class="form-control datatable-input" placeholder="Enter Incentive Price" data-col-index="7" />
</div> --}}
<div class="col-lg-3 mb-lg-0 mb-6">
<label>Status:</label>
<select class="form-control datatable-input" data-col-index="8">
<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 class="min-mobile">Product ID</th>
<th class="not-mobile">Category</th>
{{-- <th class="not-mobile">Brand</th> --}}
<th class="min-mobile">Product Code</th>
<th class="min-mobile">Product Name</th>
{{-- <th class="not-mobile">Model</th> --}}
<th class="min-mobile">Sale Price</th>
<th class="min-mobile">Purchase Price</th>
{{-- <th class="min-mobile">Incentive Price</th> --}}
{{-- <th class="not-mobile">Color</th> --}}
{{-- <th class="not-mobile">Specification</th> --}}
<th class="not-mobile">Status</th>
<th class="not-mobile">Product Image</th>
<th class="not-mobile">Quantity</th>
<th class="not-mobile">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal fade" id="price_setup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Enter Price</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form id="form_price_setup">
<div class="modal-body mx-3">
<input type="hidden" name="product_id" id="product_id">
<div class="md-form mb-2">
<label data-error="wrong" data-success="right" for="defaultForm-email">Price Date</label>
<input type="text" id="price_date" name="price_date" class="form-control validate">
</div>
<div class="md-form mb-2">
<label data-error="wrong" data-success="right" for="defaultForm-email">Sale Price</label>
<input type="number" id="sale_price" name="sale_price" class="form-control validate">
</div>
{{-- <div class="md-form mb-2">
<label data-error="wrong" data-success="right" for="defaultForm-email">Intentive Price</label>
<input type="text" id="intentive_price" name="intentive_price" class="form-control validate">
</div> --}}
</div>
</form>
<div class="modal-footer d-flex justify-content-center">
<button id="priceSetupSave" onclick="savePriceSetup(this);" class="btn btn-default">Save</button>
</div>
</div>
</div>
</div>
<div id="barCodeQty" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" class="modal fade mt-5" style="display: none;" aria-hidden="true">
<div role="document" class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 id="exampleModalLabel" class="modal-title">Input Barcode Quantity</h5>
<button type="button" data-dismiss="modal" aria-label="Close" class="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form target="_blank" action="https://mbpos.devintime.com/product-barcode/130" id="productBarCode" method="get">
<div class="row">
<div class="col-md-8">
<input type="number" name="quantity" value="1" min="1" max="500" placeholder="Input Barcode Quantity" required="required" class="form-control">
</div>
<div class="col-md-8">
<label>Color</label>
<select id="color" name="color" class="form-control select2 ">
<option value="">Select Color</option>
@foreach($colors as $color)
<option value="{{$color->color_id}}">{{$color->color_name}}</option>
@endforeach
</select>
</div>
<div class="col-md-4">
<button onclick='if($("#color").val() == ""){alert("select color");return false}' type="submit" class="btn btn-primary btn-block">Genarate Barcode
</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-danger">Close</button>
</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="{{url('public/backend/js/bootstrap-datepicker.min.js')}}"></script>
<!-- <script src="https://cdn.datatables.net/buttons/1.2.3/js/buttons.html5.js"></script> -->
<script type="text/javascript">
function getshowmodal(id){
$('#productBarCode').attr('action',"{{url('print_barcode/')}}"+'/'+id);
$('#barCodeQty').modal('show');
}
$(document).ready(function() {
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#price_date').datepicker({
format: 'dd-mm-yyyy',
autoclose: true,
todayHighlight: true
});
$( '#price_date').datepicker( 'setDate', today );
var datas="ss";
$('#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: 'Blfrtip',
scrollX: true,
buttons: [
{
extend: 'excelHtml5',
title: 'Product List',
exportOptions: {
columns: [0, 1, 2, 3,4,5,6,7,8,9,11 ],
},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: 'Product List',
orientation: 'landscape', //portrait
pageSize: 'A4', //A3 , A5 , A6 , legal , letter
exportOptions: {
columns: [0, 1, 2, 3,4,5,6,7,8,9,11 ],
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
//console.log(Array(doc.content[0].table.body[0].length + 1).join('*').split(''));
doc.content[0].table.widths =['5%','10%','6%','8%','15%','6%','6%','13%','20%','6%','5%'];
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: Product List',
fontSize: 15,
margin: [0,0,0,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, 3,4,5,6,7,8,10,12 ],
},
// 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: Product 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')
var i=1;
$(doc.document.body).find('th').each(function(index){
$(this).css('font-size','10px');
if(i == 1 || i == 11){
$(this).attr('width','5%');
}else{
$(this).attr('width','10%');
}
$(this).css('color','#fff');
$(this).css('background-color','blue');
});
},
//For repeating heading.
// repeatingHead: {
// logo: 'https://www.google.co.in/logos/doodles/2018/world-cup-2018-day-22-5384495837478912-s.png',
// logoPosition: 'right',
// logoStyle: '',
// title: '<h3>Sample Heading</h3>'
// }
},
],
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_product')}}",
"type": "POST",
complete: function (data) {
$('.download-bar-code').click(function(){
getshowmodal($(this).attr('data-id'));
});
},
error: function (data) {
//console.log(data);
},
},
"pageLength": 10,
columns: [
{ data: 'product_id' },
{ data: 'category_name' },
// { data: 'brand_name' },
{ data: 'product_code' },
{ data: 'product_name' },
// { data: 'model_name' },
{data: 'sale_price' },
{data: 'purchase_price' },
// {data: 'intentive_price' },
// {data: 'color_id' },
// { data: 'specification' },
{data: 'status' },
{ data: 'product_image' },
{ data: 'qty' },
{ 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('');
});
function create_price(id){
$('#priceSetupSave').attr('disabled',false);
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$( '#price_date').datepicker( 'setDate', today );
$( '#sale_price').val( '' );
// $( '#intentive_price').val( '' );
$('#price_setup #product_id').val(id);
$('#price_setup').modal({backdrop: false});
}
function savePriceSetup(arg){
console.log(this);
$(arg).attr('disabled',true);
var data = new FormData(document.getElementById('form_price_setup'));
$.ajax({
type : 'POST',
url : "{{url('admin/add_price')}}",
data : data,
cache:false,
contentType: false,
processData: false,
//dataType: 'json',
success : function (data)
{
$('#price_setup').modal('hide');
$('#sale'+data).html($('#sale_price').val());
$('#incentive'+data).html($('#intentive_price').val());
//console.log(data);
},error: function(response) {
//console.log(response);
}
});
}
</script>
@endsection