@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"> Dashboard</h6>
						<ol class="breadcrumb m-0">
							<li class="breadcrumb-item"><a href="#">Star mobiles</a></li>
							<li class="breadcrumb-item active" aria-current="page">Dashboard</li>
						</ol>
					</div>

				</div>
			</div>

		<div class="dash-stock pb-4">
			<div class="row stock ">

				<div class="col-lg-4">
				   <div class="card">
					  <div class="stock-table-title total-stock">
					  <div>
						 <p class="fs-5 mb-0">Total Products</p>
						 <h4 class="text-start"> {{ $procount }}</h4>
						 </div>
						 <div class="stock-image">
							<img src="{{ asset('backend/assets/images/total-stock.png') }}" alt="">
						 </div>
					  </div>
				   </div>
				</div>

				<div class="col-lg-4">
				   <div class="card">
					  <div class="stock-table-title stock-verified">
						<div>
						 <p class="fs-5 mb-0">Tested Product</p>
						 <h4> -</h4>
						</div>
						 <div class="stock-image">
							<img src="{{ asset('backend/assets/images/verified-stock.png') }}" alt="">
						 </div>
					  </div>
				   </div>
				</div>

				<div class="col-lg-4">
				   <div class="card">
					  <div class="stock-table-title stock-pending">
						<div>
						  <p class="fs-5 mb-0">Pending Products</p>
						 <h4> -</h4>
						 </div>
						 <div class="stock-image">
							<img src="{{ asset('backend/assets/images/pending-stock.png') }}" alt="">
						 </div>
					  </div>
				   </div>
				</div>
			 </div>
			</div>
		
		<!-- end row -->

		</div>
		<div class="row">
			<div class="col-md-12">

		<div class="col-md-12 mobile-table-column">
			<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 d-none" href="{{ route('users-export') }}">Export User Data</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">
							<label class="form-label">Product Imei/Serial</label>
							<input type="text" class="form-control" id="pro_no" name="pro_no" 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">Product Add Date</label>
							<input type="date" class="form-control" id="pro_date" name="pro_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">Product Name</th>
						<th scope="col">Product Imei/Serial</th>
						<th scope="col">Add Date</th>
						<th scope="col">Qc Status</th>
						<th scope="col" width="140px" align="center"><div align="center">Action</div></th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>


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

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

@endsection


@section('scripts')

<script>

$(document).ready(function() {
	
	var pathn = $('meta[name="base_url"]').attr("content")+'/dofy-data';
	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.pro_name = $("#pro_name").val(),
			   d.pro_no = $("#pro_no").val(),
			   d.qc_status = $("#qc_status").val(),
			   d.pro_date = $("#pro_date").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.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 ) {
				return row.created_at;
			}
		},
		{
			"targets": 4,
			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="'+row.viewurl+'" class="edit text-info btn btn-sm btn-info text-white">';
					<!-- tbl +='<i class="fas fa-eye"></i>';
					<!-- tbl +='</a>';-->

					tbl +='<a href="'+row.editurl+'" class="edit mx-2 text-info btn btn-sm btn-success text-white">';
						tbl +='<i class="fas fa-edit"></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;
			}
		}
	  ]
	});
});

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

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

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