@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">Products List</h6>
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item"><a href="{{ dashboardurl() }}">Home</a></li>
							<li class="breadcrumb-item active" aria-current="page">Products List</li>
						</ol>
					</div>					
					<div class="col-md-4 text-end">
						<div class="btn-container float-right">
							<a href="{{ route('product-add') }}" class="btn btn-primary"><span class="pe-2">
							<i class="ti-plus"></i></span> Add New</a>							
						</div>
					</div>					
				</div>
			</div>
		<!-- end row -->

			<div class="row">
	  			<div class="col-md-12">
		 			<div class="col-md-12 mobile-table-column stock-table">
						<div class="card">
							<div class="card-body">
								<div class="row gutters-5 pb-2">
									<div class="col text-left text-md-left">
										<h5 class="mb-md-0 h6">All Products</h5>
									</div>
									<div class="col-md-2 text-right">
                                        <a class="btn btn-sm btn-secondary btn-st btn-thrd"
                                            href="{{ route('dofy_stock_export1') }}">Export Stock</a>
                                    </div>									
									<div class="col-md-1 text-right">
										<button class="btn btn-sm btn-secondary btn-st btn-thrd fltr-btn fltrbtn">Filter<i class="las la-filter"></i></button>
									</div>
								</div>

								<form method="POST" action="memberdata" name="memberdata" id="memberdata" enctype="multipart/form-data">
								@csrf

								<!--Filter-->
								<div class="fltr-main pt-2 pb-2" style="display: none;">
									<div class="row">
										<!-- <div class="form-group col-md-4 col-sm-6">
											<label class="form-label">Product Name</label>
											<input type="text" class="form-control" id="pro_name" name="pro_name" value="">
										</div> -->
										<div class="form-group col-md-4 col-sm-6"><br/>
											<label class="form-label">Dofy Lot No</label>
											<input type="text" class="form-control" id="lot_no" name="lot_no" value="">
										</div>

										<div class="form-group col-md-4 col-sm-6"><br/>
											<label class="form-label">Location</label>
											<input type="text" class="form-control" id="location" name="location" value="">
										</div>

										<!-- <div class="form-group col-md-4 col-sm-6">
											<label class="form-label">Qc Status</label>
											<select class="form-control single-sel sel-style serviceSelect" id="qc_status" name="qc_status">
												<option value="">Select</option>
												<option value="Okay">Okay</option>
												<option value="Not Okay">Not Okay</option>
											</select>
										</div> -->

										<div class="form-group col-md-4 col-sm-6"><br/>
											<label class="form-label">Date</label>
											<input type="date" class="form-control" id="dofylot_date" name="dofylot_date" value="">
										</div>

										<div class="form-group col-md-4"><br/>
											<label class="form-label" style="font-size: 2px;">&nbsp;</label>
												<div class="srch-same-line pt-2 pb-2">

											<button type="button" class="searchdata btn btn-sm btn-primary btn-st">Search <i class="la la-search"></i></button>

											<button type="button" class="btn btn-sm btn-secondary btn-st reset_searchdata">Reset <i class="la la-refresh"></i></button>

											</div>
										</div>
									</div>
								</div><br/>
							</form>		
							<!--Filter-->

							<table class="display" style="width:100%" id="dataList">
								<thead>
									<tr>
										<th scope="col" width="40px"><div align="center">S.No</div></th>
										<th scope="col">Dofy Lot No</th>
										<th scope="col">Date</th>
										<th scope="col">Location</th>
										<th scope="col">No of Products</th>
										<th scope="col" width="140px" align="center"><div align="center">Action</div></th>
									</tr>
								</thead>
								<tbody>
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- end row -->

		</div>
	</div>
</div>
<!-- end main content-->


 <!-- Delete Modal HTML -->
<div id="deleteModal" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Delete Record</h4>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<p>Are you sure you want to delete these Records?</p>
				<p class="text-warning"><small>This action cannot be undone.</small></p>
			</div>
			<input type="hidden" id="delete_id">
			<div class="modal-footer">
				<input type="button" class="btn btn-default closebtn" data-dismiss="modal" value="Cancel">
				<input type="button" class="btn btn-danger" onclick="deleterecord()" value="Delete">
			</div>
		</div>
	</div>
</div>

@endsection

@section('scripts')

<script>

$(document).ready(function() {
	var base=$('meta[name="base_url"]').attr("content");
	var pathn = $('meta[name="base_url"]').attr("content")+'/dofy_products_list_data1'; console.log(pathn);
	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': pathn,
			"data": function(d){
            d.pagenme = '{{ basename(url()->current()) }}',
			d.lot_no = $("#lot_no").val(),
			// d.qc_status = $("#qc_status").val(),
			d.location = $("#location").val(),
			d.dofylot_date = $("#dofylot_date").val()
			// d.pro_no = $("#imei").val()
			
			}
		},
		searching: false,
		"iDisplayLength": 20,
		"columnDefs": [
		{
			"targets": 0,
			className: "text-center",
			"render": function ( data, type, row, meta ) {
				return row.index;
			}
		},
		{
			"targets": 1,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.lot_no;
			}
		},
		{
			"targets": 2,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.dofylot_date;
			}
		},
		{
			"targets": 3,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.city_name;
			}
		},
		{
			"targets": 4,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.no_pro;
			}
		},
		// {
		// 	"targets": 5,
		// 	orderable: true,
		// 	"render": function ( data, type, row, meta ) {
		// 		var tbl = '';
		// 		if(row.check == 'Okay') {
		// 			tbl +="<div class='verified pending'><a href='javascript:(0)'><img src='{{ asset('backend/assets/images/verified.png') }}' alt=''></a>";
		// 				tbl +='<a href="javascript:(0)"><p>Okay</p></a>';
		// 			tbl +='</div>';

		// 		} else if(row.check == 'Not Okay') {

		// 			tbl +="<div class='verified pending' ><a href='javascript:(0)'><img src='{{ asset('backend/assets/images/not-verified.png') }}' alt=''></a><a href='#'><p>Not Okay</p></a></div>";

		// 		} else {
		// 			tbl +="-";
		// 		}
		// 		return tbl;
		// 	}
		// },
		{
			"targets": 5,
			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="'+base+'/dofy-lot/'+row.lot_no+'" data-id='+row.id+' class="view product_view text-info center">';
				// 		tbl +='<i class="bi bi-eye-fill"></i>';
				// 	tbl +='</a>';

				// // 	tbl +='<a href="#deleteModal" data-toggle="modal" data-id="'+row.id+'" class="edit text-info btn btn-sm  btn-danger text-white me-2 removrd">';
				// // 		tbl +='<i class="fas fa-trash"></i>';
				// // 	tbl +='</a>';

				// tbl +='</div>';
				// return tbl;
				
				var tbl='';      
                tbl+='<div class="action">';               
      	        tbl+='<a data-id='+row.id+' href="'+base+'/dofy-lot-view/'+row.lot_no+'" class="view product_view text-info" type="button"> <i class="bi bi-eye-fill"></i></a>';
      	        tbl+='</div>';       
                return tbl;
			}
		}
	  ]
	});
});

$(document).on('click', '.searchdata', function(){
	$('#dataList').DataTable().ajax.reload();
});

$(document).on('click', '.reset_searchdata', function(){
    $('#memberdata').trigger("reset");
    $('#lot_no').val('');
    $('#location').val('');
    // $('#sup_name').val('');
    // $('#pay_status').val('');
	$("#dofylot_date").val('')
    $('#dataList').DataTable().ajax.reload();
	// $('.fltr-btn').trigger('click');
});

</script>

<script type="text/javascript">

	//Remove Record
$(document).on("click", ".removrd", function () {
	var rid = $(this).data("id");
	$('#delete_id').val(rid);
});

	//Remove Record
function deleterecord() {
	var rid = $('#delete_id').val();
	var pathn = $('meta[name="base_url"]').attr("content")+'/dofy-remove';
	var token = $('meta[name="csrf-token"]').attr("content");
	$.ajax({
		url: pathn,
		type: "POST",
		data: {
			_token: token,user_id: rid
		}, success: function (data) {

			if(data.status == true) {
				custom_noty("success", data.msg);
				$(".closebtn").click();
				$('#dataList').DataTable().ajax.reload();
			} else {
				custom_noty("error", data.msg);
			}
		}
	});
}

</script>

<script type="text/javascript">

$(".fltrbtn").click(function(){

	if($('.fltr-main').is(':visible')){
		$(".fltr-main").hide(1000);
	} else {
		$(".fltr-main").show(1000);
	}
});

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

</script>

@endsection