@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">Mobile 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">Mobile List</li>
				   </ol>
				</div>

				<div class="col-md-4">
					<a class="btn btn-primary button-1 float-right " href="{{ route('product-in-service') }}">
					<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 mb-1">
			<span class="h6">Admin Name : </span>@if(!empty($usersname->AdmName->name)){{ $usersname->AdmName->name }}@endif
		</p>

		<p class="card-text mb-1">
			<span class="h6">Service Enginner Name : </span>@if(!empty($usersname->EnggName->name)){{ $usersname->EnggName->name }}@endif
		</p>

		<p class="card-text mb-1">
			<span class="h6">Lot Number : </span>@if(!empty($usersname->lot_no)){{ $usersname->lot_no }}@endif
		</p>

		<p class="card-text mb-1">
			<span class="h6">Number of Product : </span> @if(!empty($nocount)){{ $nocount }}@endif
		</p>

	</div>

		</div>
	   <div class="col-md-4">
		   <div class="card-body d-flex justify-content-end">
				<div>

		<button class="btn btn-success me-3 acptcl" data-bs-toggle="modal" data-bs-target="#testedMobile">Received</button>

				</div>
		   </div>
	   </div>
	</div>

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

		<table class="display" style="width:100%" id="dataList">
			 <thead>
				<tr>
					<th>Temp Bar Code</th>
					<th>Product Name</th>
					<th>IMEI</th>
					<th>Quality Checking</th>
					<th>Accept Status</th>
					<th>Returned</th>
					<th>Received</th>
					<th>Action</th>
				</tr>
			 </thead>
			 <tbody>
			 </tbody>
		</table>

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

		 </div>
	  </div>
	</div>




 <!-- Accept Modal HTML -->
<div id="acceptModal" class="modal fade" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Accept Status</h4>
				<button type="button" class="closebtn close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<p>Are you sure you want to accept these Records?</p>
				<p class="text-warning"><small>This action cannot be undone.</small></p>
			</div>
			<input type="hidden" id="accept_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="acceptrecord()" value="Accept">
			</div>
		</div>
	</div>
</div>




 <!-- Returned Modal HTML -->
<div id="returnedModal" class="modal fade" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">Returned Status</h4>
				<button type="button" class="rclosebtn close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<p>Are you sure you want to Returned these Records?</p>
				<p class="text-warning"><small>This action cannot be undone.</small></p>
			</div>
			<input type="hidden" id="returned_id">
			<div class="modal-footer">
				<input type="button" class="btn btn-default rclosebtn" data-dismiss="modal" value="Cancel">
				<input type="button" class="btn btn-danger" onclick="returnedrecord()" value="Returned">
			</div>
		</div>
	</div>
</div>





<!--==== verified modal ==-->
<div class="modal fade stock-modal" id="testedMobile" tabindex="-1" aria-labelledby="exampleModalLabel"
 aria-hidden="true">
 <div class="modal-dialog">
	<div class="modal-content">
	   <div class="modal-header">
		  <h1 class="modal-title fs-5" id="exampleModalLabel">Admin received mobile</h1>
		  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
	   </div>
	   <div class="modal-body">
		  <div class="container">
			 <!-- Mobile visible table  -->
			 <div class="row stock-row">
				<div class="col-md-12">
				   <div class="row">
					  <div class="col-md-12">
						 <div class=" mb-3" style="max-width: 540px;">
							<div class="">

		<div class="mb-3 selectdraf">
		<label for="exampleFormControlInput1" class="form-label w-100 d-flex justify-content-between">Add Barcode <span class="barcode_count">0</span></label>

		<textarea class="form-control w-100 w-100 tags" id="barcodescd" name="barcodescd" rows="7" placeholder=""></textarea>

		</div>
		<input type="hidden" id="slotno" name="slotno" value="@if(!empty($usersname->lot_no)){{ $usersname->lot_no }}@endif">
		<input type="hidden" id="selectdv" name="selectdv" value="">
		<div class="d-flex justify-content-between align-items-center">
		<button class="btn btn-success gebarcode" type="button"> Submit </button> 

							   </div>
							</div>
						 </div>
					  </div>
				   </div>
				</div>
			 </div>
		  </div>		 
	   </div>
	   <!-- <div class="modal-footer">
		  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
		  <button type="button" class="btn btn-primary">Save changes</button>
		  </div> -->
	</div>
 </div>
</div>



@endsection

@section('scripts')



<script type="text/javascript">
$(document).ready(function() {
    $(window).keydown(function(event){
    	const key = event.originalEvent.key;
            if(event.keyCode == 13) {
    		    var count=$("#barcodescd").tagsinput('items').length;
    		    $('.barcode_count').html(count+1);
            }
        });
    });

    $(document).on("click",".label-info",function(){
	    var count=$("#barcodescd").tagsinput('items').length;
		$('.barcode_count').html(count);
    })

	//Tested Mobile
    $(document).on("click", ".gebarcode", function () {
	
	var err = true;

	var input = $("#barcodescd");
	var urlvl = $("#barcodescd").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#nmb").remove();
		$('<div id="nmb" class="text-danger">Please scan barcode and try again!</div>').insertAfter("#barcodescd");
		$("#barcodescd").focus();
		err = false;
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#nmb").remove();
	}
	if(err == true) {

		var pathn = $('meta[name="base_url"]').attr("content")+'/barcode-eng-received';
		var token = $('meta[name="csrf-token"]').attr("content");
		var rid = $('#barcodescd').val();
		var slotno = $('#slotno').val();
		var acceptst = $('#selectdv').val();

		$.ajax({
			url: pathn,
			type: "POST",
			data: {
				_token: token,
				scanbarcode: rid,
				acceptst: acceptst,
				slotno: slotno
			}, success: function (data) {
				$('#dataList').DataTable().ajax.reload();
				if(data.status == true) {
					custom_noty("success", data.msg);
				} else {
					custom_noty("error", data.msg);
				}
				$(".btn-close").click();
			}
		});
	}
});

$(document).on("click", ".acptcl", function () {
	$('#selectdv').val('');
	$("#barcodescd").val('');
	var element = $('.bootstrap-tagsinput');
	element.find("span").remove();
	var rid = $('#selectdv').val('acceptd');
});



 $("#barcodescd").on("change", function(event) {
	var input = $("#barcodescd");
	var urlvl = $("#barcodescd").val();
	var selectdv = $('#selectdv').val();
	var temcodeValue = $(this).val().trim(); // Get the value of the temcode field

	if (temcodeValue !== '') {
		// Make an AJAX request to check if the temcode is already assigned
		$.ajax({
		
			url: "{{route('check-service-recived')}}",
			method: 'POST',
			data: {
				_token: '{{ csrf_token() }}', // Include CSRF token
				temcode: temcodeValue,
				selectdv : selectdv
			},
			success: function(response) {
			    
				if (response.isAssigned == false) {
					input.removeClass("valid").addClass("invalid");
					$("#ltdt").remove();
					$('<div id="ltdt" class="text-danger">'+response.msg +'</div>').insertAfter("#barcodescd");
					$("#barcodescd").focus();
					$(".gebarcode").prop("disabled", true);
				} else {
					input.removeClass("invalid").addClass("valid");
					$("#ltdt").remove();
					$(".gebarcode").prop("disabled", false);
				}
			},
			error: function(xhr, status, error) {
				// Handle errors
				console.error(error);
			}
		});
	}
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#ltdt").remove();
		$('<div id="ltdt" class="text-danger">Temporary code is required</div>').insertAfter("#temcode");
		$("#temcode").focus();
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#ltdt").remove();
	}
});

</script>


<script type="text/javascript">

	//Returned Record
$(document).on("click", ".rclosebtn", function () {
	var rid = $('#returned_id').val();
	if ($('.rvd_'+rid).is(':checked')) {
		$('.rvd_'+rid).prop('checked',false);
	}
});
	//Returned Record
$(document).on("click", ".returnedcheck", function () {
var rid = $(this).data("id");
$('#returned_id').val(rid);
});

	//Returned Record
function returnedrecord() {
	var rid = $('#returned_id').val();
	var pathn = $('meta[name="base_url"]').attr("content")+'/product-eng-returned';
	var token = $('meta[name="csrf-token"]').attr("content");

	if ($('.rvd_'+rid).is(':checked')) {
		var acceptst ='Yes';
	} else {
		var acceptst ='No';
	}

	$.ajax({
		url: pathn,
		type: "POST",
		data: {
			_token: token,user_id: rid,acceptst: acceptst
		}, success: function (data) {

			if(data.status == true) {
				custom_noty("success", data.msg);
				$(".rclosebtn").click();
				if(acceptst == 'Yes') {
					$('.rvd_'+rid).prop('checked',true);
				} else {
					$('.rvd_'+rid).prop('checked',false);
				}
			} else {
				custom_noty("error", data.msg);
			}
		}
	});
}

</script>

<script type="text/javascript">

	//Accept Record
$(document).on("click", ".closebtn", function () {
	var rid = $('#accept_id').val();
	if ($('.vd_'+rid).is(':checked')) {
		$('.vd_'+rid).prop('checked',false);
	}
});
	//Accept Record
$(document).on("click", ".acceptcheck", function () {
var rid = $(this).data("id");
$('#accept_id').val(rid);
});

	//Accept Record
function acceptrecord() {
	var rid = $('#accept_id').val();
	var pathn = $('meta[name="base_url"]').attr("content")+'/product-eng-accept';
	var token = $('meta[name="csrf-token"]').attr("content");

	if ($('.vd_'+rid).is(':checked')) {
		var acceptst ='Yes';
	} else {
		var acceptst ='No';
	}

	$.ajax({
		url: pathn,
		type: "POST",
		data: {
			_token: token,user_id: rid,acceptst: acceptst
		}, success: function (data) {

			if(data.status == true) {
				custom_noty("success", data.msg);
				$(".closebtn").click();
				if(acceptst == 'Yes') {
					$('.vd_'+rid).prop('checked',true);
				} else {
					$('.vd_'+rid).prop('checked',false);
				}
			} else {
				custom_noty("error", data.msg);
			}
		}
	});
}

</script>

<script>

$(document).ready(function() {

	var token = $('meta[name="csrf-token"]').attr("content");
	var pathn = $('meta[name="base_url"]').attr("content")+'/product-eng-view-data';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,
			'_token': token,
			'beforeSend': function (request) {
             request.setRequestHeader("X-CSRF-TOKEN", '{{ csrf_token() }}');
			},
			"data": function(d){
               d.pagenme = '@if(!empty($usersname->lot_no)){{ $usersname->lot_no }}@endif',
               d.user_id = '@if(!empty($usersname->engineer_id)){{ $usersname->engineer_id }}@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: true,
		"iDisplayLength": 20,
		"columnDefs": [
		{
			'targets': 0,
			'searchable': false,
			'orderable': false,
			'className':'dt-body-center text-center',
			"render": function ( data, type, row, meta ) {
				return row.barcode;
			}
		},
		{
			"targets": 1,
			orderable: true,
			className: "text-center",
			"render": function ( data, type, row, meta ) {
				return row.product_name;
			}
		},
		{
			"targets": 2,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.imei;
			}
		},
		{
			"targets": 3,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				var tbl = '';
				if(row.check == 'Okay') {

					tbl +="<div class='verified pending'><a href='#'><img src='{{ asset('backend/assets/images/verified.png') }}' alt=''></a>";
						tbl +='<a href="#"><p>Ok</p></a>';
					tbl +='</div>';

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

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

				} else {
					tbl +="-";
				}
				return tbl;
			}
		},
		{
			"targets": 4,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				var tbl = '';
					tbl +='<label class="switch">';
					if(row.accept_status == 'Yes') {
					tbl +='<input type="checkbox" checked="checked" href="#acceptModal"  disabled  data-toggle="modal" data-id="'+row.id+'" class="acceptcheck vd_'+row.id+'">';
					} else {
					tbl +='<input type="checkbox" href="#acceptModal" data-toggle="modal"  disabled  data-id="'+row.id+'" class="acceptcheck vd_'+row.id+'">';
					}
					tbl +='<span class="slider round"></span></label>';
				return tbl;
			}
		},
		{
			"targets":5,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				var tbl = '';
					tbl +='<label class="switch">';
					if(row.returned_status == 'Yes') {
						tbl +='<input type="checkbox" checked="checked" href="#returnedModal"  disabled  data-toggle="modal" data-id="'+row.id+'" class="returnedcheck rvd_'+row.id+'">';
					} else {
						tbl +='<input type="checkbox" href="#returnedModal" data-toggle="modal"  disabled  data-id="'+row.id+'" class="returnedcheck rvd_'+row.id+'">';
					}
					tbl +='<span class="slider round"></span></label>';
				return tbl;
			}
		},
		{
			"targets":6,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				var tbl = '';
					tbl +='<label class="switch">';
					if(row.received_status == 'Yes') {
						tbl +='<input type="checkbox" checked="checked" href="#returnedModal"  disabled  data-toggle="modal" data-id="'+row.id+'" class="returnedcheck rvd_'+row.id+'">';
					} else {
						tbl +='<input type="checkbox" href="#returnedModal" data-toggle="modal"  disabled  data-id="'+row.id+'" class="returnedcheck rvd_'+row.id+'">';
					}
					tbl +='<span class="slider round"></span></label>';
				return tbl;
			}
		},
		{
			"targets": 7,
			orderable: true,
			className: "text-center",
			"render": function ( data, type, row, meta ) {

				var tbl = '';
				tbl +='<div class="action bank d-flex justify-content-start">';
					if(row.sales_status == '') {

					tbl +='<a href="'+row.editurl+'" class="edit text-info btn btn-sm btn-success text-white">';
						tbl +='<i class="fas fa-edit"></i>';
					tbl +='</a>';
					}
					else{
					    tbl +='<a href="'+row.editurl+'" class="edit text-info btn btn-sm btn-success text-white"  style="pointer-events: none; cursor: default;">';
						tbl +='<i class="fas fa-eye-slash"></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>

<style>
.pending {
    display: flex;
    align-items: center;
    justify-content: start;
}
</style>

@endsection