@extends('layouts.backend.app')

@section('content')

<!-- Start right Content here -->
<div class="main-content">
	<div class="page-content">
	
		<!-- Page Preloder -->
	<div id="preloder"><div class="loader"></div></div>
	

	<div class="container-fluid">
		<div class="page-title-box">
			<div class="row align-items-center">
				<div class="col-md-8">
				   <h6 class="page-title">Lot View</h6>
				   <ol class="breadcrumb m-0">
					  <li class="breadcrumb-item"><a href="{{ dashboardurl() }}">Home </a></li>
					  <li class="breadcrumb-item active" aria-current="page">Lot View</li>
				   </ol>
				</div>
				<div class="col-md-4">
					<a class="btn btn-primary button-1 float-right " href="{{ route('lot-list') }}">
					<span class="pe-1 color-primary"><i class="ti-angle-left"></i></span> Back</a>
				</div>
			</div>
		</div>
	</div>
	

	 <div class="row">
	  <div class="col-md-12">
		 <div class="card mb-3" >
			<div class="row g-0 align-items-center ">
			<div class="col-md-8">

	<div class="card-body">
		<p class="card-text">
			<span class="card-title h-5">Lot Number : </span>@if(!empty($lotdata->lot_no)){{ $lotdata->lot_no }}@endif
		</p>

		<p class="card-text">
			<span class="card-title h-5">No of Product : </span>@if(!empty($lotdata->no_pro)){{ $lotdata->no_pro }}@endif
		</p>

		<p class="card-text">
			<span class="card-title h-5">Supplier Name : </span>@if(!empty($lotdata->SupName->sup_name)){{ $lotdata->SupName->sup_name }}@endif
		</p>

		<p class="card-text">
			<span class="card-title h-5">Payment Status : </span> @if(!empty($lotdata->pay_status)){{ $lotdata->pay_status }}@endif
		</p>

		<p class="card-text">
			<span class="card-title h-5">Total Amount : </span>@if(!empty($lotdata->amount)){{ $lotdata->amount }}@endif
		</p>
		
		@if(!empty($lotdata->pay_status) && $lotdata->pay_status =='Part Payment')
		<p class="card-text">
			@php
				$zrlv=0;
			@endphp
			<span class="card-title h-5">Paid Amount : </span>@if(!empty($lotdata->pay_note)){{ $lotdata->pay_note }}@else{{$zrlv}}@endif
		</p>
		@endif
	</div>

		</div>
	   <div class="col-md-4">
		   <div class="card-body d-flex justify-content-end">
				<button class="btn btn-primary prbtn"><i class="fas fa-print"></i> Print Barcodes</button>
		   </div>
	   </div>
	</div>

	<div class="row">
		<div class="col-md-12 px-4">

		<table class="display" style="width:100%" id="dataList">
			 <thead>
				<tr>
				   <th width="10%"><input name="select_all" value="1" class="chbx form-group" id="selectAllAgents" type="checkbox" /></th>
				   <th width="10%">S.No</th>
				   <th width="10%">Id</th>
				   <th width="70%">Barcode </th> 
				   <th width="10%" >Action</th>
				</tr>
			 </thead>
			 <tbody>
			 </tbody>
		</table>

		</div>
	</div>
	<input type="hidden" id="previewImg">

		 </div>
		
	  </div>
	</div>
	
	<style>
	    .barcode-img {
            display: block;
            margin: 0 auto;
            text-align: center; /* Center the images horizontally */
        }
	</style>

  
  
  
  
<div id="prnpg"></div>

@endsection

@section('scripts')

<script src="https://cdn.bootcss.com/html2pdf.js/0.9.1/html2pdf.bundle.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.1/html2pdf.bundle.min.js"></script>

<script>

$(document).on('click', '.prbtn', function(){
    var chkId = '';
    $('.chbxvs').each(function () {
        if ($(this).is(':checked')) {
            chkId += $(this).val() + ",";  
        } 
    });
    chkId = chkId.slice(0, -1); 

    var pathn = $('meta[name="base_url"]').attr("content")+'/barcode-multiple';
    var token = $('meta[name="csrf-token"]').attr("content");

    $("#preloder").fadeIn();

    $.ajax({
        url: pathn,
        type: "get",
        data: {
            _token: token,
            chkId: chkId
        },
        success: function (data) {
            $('#prnpg').html(data.msg);
            var element = document.getElementById('prnpg');

            var printContents = document.getElementById('prnpg').innerHTML;
            var originalContents = document.body.innerHTML;
            document.body.innerHTML = printContents;
            self.print();
            document.body.innerHTML = originalContents;

            // html2pdf(element, {
            //     margin: [0, 0, 0, 20],
            //     padding: 0,
            //     filename: 'barcodes.pdf',
            //     image: { type: 'element', quality: 1 },
            //     html2canvas: { scale: 2, logging: true },
            //     jsPDF: {
            //         unit: 'px', 
            //         format: [142, 71], 
            //         orientation: 'l'
            //     },
            //     pagebreak: { mode: 'avoid-all', after: '.barcode-img' }
            // }).from('element-to-print').outputPdf().get('pdf').then(function (pdfObj) { 
            //     pdfObj.autoPrint(); 
            //     window.open(pdfObj.output("bloburl"), "F");
            // });

            const myTimeout = setTimeout(myGreeting, 2000);
        }
    });
});


function myGreeting() {
  $("#prnpg").html('');
  $("#preloder").fadeOut();
}

$(document).ready(function() {

	var reporttables =  $('#dataList').DataTable({
		"order": [[ 0, "desc" ]],
        "serverSide": true,
		"stateSave": true,
        'processing': true,
		"pageLength": 20,
		"lengthMenu": [
            [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420, 450, 475, 500],
            [20, 50, 75, 100, 125, 150, 175, 200, 225, 250, 275, 300, 325, 350, 375, 400, 420, 450, 475, 500]
        ],
        oLanguage: {sProcessing: '<div class="lds-css"><div style="width:100%;height:100%" class="lds-eclipse"><div></div><p>Please wait while we are processing your request.</p></div></div>' },
		"ajax": {
			'type': 'GET',
			'url': '{{ route("barcode-data") }}',
			"data": function(d){
               d.pagenme = '@if(!empty($lotdata->lot_no)){{ $lotdata->lot_no }}@endif',
			   d.lot_no = $("#lot_no").val(),
			   d.no_pro = $("#no_pro").val(),
			   d.sup_name = $("#sup_name").val(),
			   d.pay_status = $("#pay_status").val()
			}
		},
		searching: false,
		"iDisplayLength": 20,
		"columnDefs": [
		{
			'targets': 0,
			'searchable': false,
			'orderable': false,
			'className':'dt-body-center text-center',
			"render": function ( data, type, row, meta ) {
				return '<input type="checkbox" name="lotid[]" class="chbx form-group chbxvs" id="vlis_'+row.id+'" value="'+row.id+'">';
			}
		},
		{
			"targets": 1,
			orderable: true,
			className: "text-center",
			"render": function ( data, type, row, meta ) {
				return row.index;
			}
		},
		{
			"targets": 2,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.bar_id;
			}
		},
		{
			"targets": 3,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.barcodesimg;
			}
		},
		{
			"targets": 4,
			orderable: true,
			className: "text-center",
			"render": function ( data, type, row, meta ) {

				var tbl = '';
				tbl +='<div class="action bank d-flex justify-content-start">';

					tbl +='<a href="javascript:(0)" class="edit text-info btn btn-sm btn-info text-white" data-barcode="'+row.barcodes+'" data-id="'+row.id+'" id="btn_convert">';
						tbl +='<i class="fas fa-download"></i>';
					tbl +='</a>';

				tbl +='</div>';
				return tbl;
			}
		}
	  ]
	});
});

$('body').on('change', '#selectAllAgents', function() {
	var rows, checked;
	rows = $('#dataList').find('tbody tr');
	checked = $(this).prop('checked');
	$.each(rows, function() {
	  var checkbox = $($(this).find('td').eq(0)).find('input').prop('checked', checked);
	});
});

$('body').on('click', '.dt-body-center', function() {
	
	var sld = $(this).find('input').val();
	if ($('#vlis_'+sld).prop("checked") == true) {
		$('#vlis_'+sld).prop('checked',true);
	} else {
		$('#vlis_'+sld).prop('checked',false);
	}
});
	
</script>

<script>
	
$(document).on('click', '#btn_convert', function(){
	
	var chkId = $(this).data("id");
	var barcode = $(this).data("barcode");

	var pathn = $('meta[name="base_url"]').attr("content")+'/barcode-multiple';
	var token = $('meta[name="csrf-token"]').attr("content");

	$("#preloder").fadeIn();

	$.ajax({
		url: pathn,
		type: "get",
		data: {
			_token: token,chkId: chkId
		}, success: function (data) {
		
			$('#prnpg').html(data.msg);
			var element = document.getElementById('prnpg');
			html2pdf(element, {
				margin:[0, 0, 0, 15],
				padding:0,
				filename: barcode+'.pdf',
				image: { type: 'element', quality: 1 },
				html2canvas: { scale: 2, logging: true },
				jsPDF: {
				unit: 'px', 
                format: [207, 94], 
					orientation: 'l'
					},
				pagebreak: { before: '.beforeClass', after: ['#after1', '#after2'], avoid: 'img' }

			}).from('element-to-print').outputPdf().get('pdf')
			  .then(function (pdfObj) { pdfObj.autoPrint(); window.open(pdfObj.output("bloburl"), "F")
			});

			const myTimeout = setTimeout(myGreeting, 2000);

		}
	});
});


function vldfn(){
	$('#dataList').DataTable().ajax.reload();
}

</script>

@endsection