@extends('layouts.backend.app')

@section('content')

<!-- Start right Content here -->
<div class="main-content">
	<div class="page-content">

	<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"><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>

@endsection

@section('scripts')

<script>

$(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" 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-id="'+row.barcodes+'" 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 src="{{ asset('backend/assets/js/html2canvas.js') }}"></script>

<script>
$(document).on('click', '#btn_convert', function(){
	var rid = $(this).data("id");
	html2canvas(document.getElementById(rid),{
		allowTaint: true,
		useCORS: true
	}).then(function (canvas) {
		var anchorTag = document.createElement("a");
		document.body.appendChild(anchorTag);
		document.getElementById("previewImg").appendChild(canvas);
		anchorTag.download = rid+".jpg";
		anchorTag.href = canvas.toDataURL();
		anchorTag.target = '_blank';
		anchorTag.click();
	});
});


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

</script>

@endsection