@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">Supplier 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">Supplier View</li>
				   </ol>
				</div>
				<div class="col-md-4">
					<a class="btn btn-primary button-1 float-right " href="{{ route('supplier-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="col-md-12 mobile-table-column stock-table">
				<div class="card">
					<div class="card-body">
					<div class="card mb-4 shadow-none">

		<div class="mobileinfo d-flex  justify-content-between">
		   <div class="mobileinfrigh grid-2 ">
		  
			  <p class="card-text mb-1"> <span class="h6">Supplier Name</span>
				@if(!empty($supdata->sup_name)){{ $supdata->sup_name }}@endif
			  </p>

			  <p class="card-text mb-1"> <span class="h6">Supplier Email</span>
				@if(!empty($supdata->sup_email)){{ $supdata->sup_email }}@endif
			  </p>

			  <p class="card-text mb-1"> <span class="h6"> GST Number </span>
				@if(!empty($supdata->sup_gst)){{ $supdata->sup_gst }}@endif
			  </p>

			  <p class="card-text mb-1"> <span class="h6"> Supplier Number </span>
				@if(!empty($supdata->sup_phone)){{ $supdata->sup_phone }}@endif
			  </p>

			  <p class="card-text mb-1"> <span class="h6"> Supplier Company Name </span>
				@if(!empty($supdata->sup_point)){{ $supdata->sup_point }}@endif
			  </p>

			  <p class="card-text mb-1"> <span class="h6"> Supplier Pincode No </span>
				@if(!empty($supdata->sup_pincode)){{ $supdata->sup_pincode }}@endif
			  </p>

			  <p class="card-text mb-1"> <span class="h6"> Supplier Address </span>
				@if(!empty($supdata->sup_address)){{ $supdata->sup_address }}@endif
			  </p>

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

			<table class="display" style="width:100%" id="dataList">
			 <thead>
				<tr>
					<th>S.no</th>
					<th>Lot Number</th>
					<th>Payment date</th>
					<th>Payment Status</th>
					<th>Total Amount</th>
					<th>Pending Amount</th>
					<th>Action</th>
				</tr>
			 </thead>
			 <tbody></tbody>
			</table>

		</div>
	</div>

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


	<!-- payment list popup -->
    <div class="modal fade stock-modal" id="paymentlist" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
         <div class="modal-dialog modal-lg">
            <div class="modal-content">
               <div class="modal-header">
                  <h1 class="modal-title fs-5" id="exampleModalLabel">Pay For Mobile</h1>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
               </div>
               <div class="modal-body">
                  <div class="container">
                     <div class="row stock-row">
                        <div class="col-md-12"><input type="hidden" id="selectsup" value="">
                           <div class="row">

						   <table id="paydataList" class="display" style="width:100%">
							<thead style="width:100%">
								<tr>
								<th>S.no</th>
								<th>Payment date</th>
								<th>Payment Amount</th>
								</tr>
							</thead>
								<tbody></tbody>
							</table>

                           </div>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
	<!-- payment list popup end-->



<!-- New Payment start 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">Pay For 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;">
				 <input type="hidden" id="selectidsup" name="selectidsup" value="">
	<div class="">
		<div class="mb-3 selectdraf">

		  <label for="exampleFormControlInput1" class="form-label w-100 d-flex justify-content-between">Total Amount</label>
		  <input type="text" disabled class=" form-control w-100  w-100 " id="totalamt" placeholder="" value="">
		  
	   </div>
		<div class="mb-3 selectdraf">

		  <label for="exampleFormControlInput1" class="form-label w-100 d-flex justify-content-between">Paid Amount</label>
		  <input type="text" disabled class=" form-control w-100  w-100 " id="paidamt" placeholder="" value="">
		  
	   </div>
		<div class="mb-3 selectdraf">

		  <label for="exampleFormControlInput1" class="form-label w-100 d-flex justify-content-between">Pending Amount</label>
		  <input type="text" disabled class=" form-control w-100  w-100 " id="pendingamt" placeholder="" value="">
		  
	   </div>
	   <div class="mb-3 selectdraf">

		  <label for="exampleFormControlInput1" class="form-label w-100 d-flex justify-content-between">Date </label>
		  <input type="date" class="form-control w-100 w-100 datepicker flatpickr-input" id="payment_date" placeholder="" data-date-format="d M, Y G:i K" data-enable-time="true" >

	   </div>
	   <div class="mb-3 selectdraf">

		  <label for="exampleFormControlInput1" class="form-label w-100 d-flex justify-content-between">Pay Now </label>
		  <input type="text" class="form-control w-100 w-100" id="paynowamt" placeholder="" maxlength="10" onkeypress="return isNumber(event)" onpaste="return false" >

	   </div>

	   <div class="d-flex justify-content-between align-items-center">
		  <button class="btn btn-success sumbtn"> Submit </button> 
	   </div>

	</div></div>
			  </div>
		   </div></div>
				 </div>
			  </div>
		   </div>
		</div>
	 </div>
  </div>
<!-- New Payment End  -->


@endsection

@section('scripts')


<script>

	//Add 
$(document).on("click", ".sumbtn", function () {

	var err = true;
	
	var input = $("#payment_date");
	var urlvl = $("#payment_date").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#nmb").remove();
		$('<div id="nmb" class="text-danger">Payment date is required</div>').insertAfter("#payment_date");
		$("#payment_date").focus();
		err = false;
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#nmb").remove();
	}


	var input = $("#paynowamt");
	var urlvl = $("#paynowamt").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#pamt").remove();
		$('<div id="pamt" class="text-danger">Pay now is required</div>').insertAfter("#paynowamt");
		$("#paynowamt").focus();
		err = false;
	} else {

		var pending_amount = parseInt($("#pendingamt").val());
		var paynow = parseInt($("#paynowamt").val());
		var input = $("#paynowamt");
		if(paynow > pending_amount) {
			input.removeClass("valid").addClass("invalid");
			$("#pamt").remove();
		$('<div id="pamt" class="text-danger">You cannot pay more than the pending amount!</div>').insertAfter("#paynowamt");
			$("#paynowamt").focus();
			err = false;
		} else {
			input.removeClass("invalid").addClass("valid");
			$("#pamt").remove();
		}
	}

	if(err == true) {

		$(".sumbtn").attr("disabled", true);
		var token = $('meta[name="csrf-token"]').attr("content");
		var path = $('meta[name="base_url"]').attr("content") + "/paynow-save";

		var fd = new FormData();
			fd.append('_token',token);
			fd.append('selectidsup', $("#selectidsup").val());
			fd.append('payment_date', $("#payment_date").val());
			fd.append('paynowamt', $("#paynowamt").val());
		$.ajax({
			url: path,
			type: "POST",
			data: fd,
			contentType: false,
			processData: false,
			dataType: 'json',
			success: function (data) {
				$(".sumbtn").attr("disabled", false);
				if(data.status == true) {
					custom_noty("success", data.msg);
					$(".btn-close").click();
					$('#dataList').DataTable().ajax.reload();
				} else {
					custom_noty("error", data.msg);
				}
			},
		});
	}
});


$("#payment_date").on("change", function(event) {
	var input = $("#payment_date");
	var urlvl = $("#payment_date").val();
	if(urlvl==''){
		input.removeClass("valid").addClass("invalid");
		$("#nmb").remove();
		$('<div id="nmb" class="text-danger">Payment date is required</div>').insertAfter("#payment_date");
		$("#payment_date").focus();
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#nmb").remove();
	}
});

$("#paynowamt").on("input", function(event) {
	var pending_amount = parseInt($("#pendingamt").val());
	var paynow = parseInt($("#paynowamt").val());
	var input = $("#paynowamt");
	if(paynow > pending_amount) {
		input.removeClass("valid").addClass("invalid");
		$("#pamt").remove();
		$('<div id="pamt" class="text-danger">You cannot pay more than the pending amount!</div>').insertAfter("#paynowamt");
		$("#paynowamt").focus();
	} else {
		input.removeClass("invalid").addClass("valid");
		$("#pamt").remove();
	}
});

</script>


<script>

$(document).ready(function() {

	var pathn = $('meta[name="base_url"]').attr("content")+'/supplier-viewdata';
	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 = "{{ encrypt_decrypt('decrypt', basename(url()->current())) }}"
			}
		},
		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.index;
			}
		},
		{
			"targets": 1,
			orderable: true,
			className: "text-center",
			"render": function ( data, type, row, meta ) {
				return row.lot_no;
			}
		},
		{
			"targets": 2,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.payment_date;
			}
		},
		{
			"targets": 3,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				var tbl = '';
				if(row.payment_status == 'Part Payment') {
					var tbl = '<span class="badge badge-success bg-warning">Part payment</span>';
				} else {
					var tbl = '<span class="badge badge-success bg-success">Full payment</span>';
				}
				return tbl;
			}
		},
		{
			"targets": 4,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.total_amount;
			}
		},
		{
			"targets": 5,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				if(row.payment_status == 'Part Payment') {
					return row.pending_amount;
				} else {
					return '';
				}
			}
		},
		{
			"targets": 6,
			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.payment_status == 'Part Payment') {
					tbl +='<button class="btn btn-primary me-3 paymd" data-id="'+row.lot_id+'" data-total="'+row.total_amount+'" data-pending="'+row.pending_amount+'" data-paidamt="'+row.paid_amounts+'" data-bs-toggle="modal" data-bs-target="#testedMobile">';
						tbl +='<i class="fas fa-rupee-sign"></i>';
					tbl +='</button>';
					}
					tbl +='<button class="btn btn-purple me-3 paylist" data-id="'+row.lot_id+'" data-bs-toggle="modal" data-bs-target="#paymentlist">';
						tbl +='<i class="far fa-list-alt"></i>';
					tbl +='</button>';

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


</script>

<script>

$(document).on('click', '.paylist', function(){
	var rid = $(this).data("id");
	$("#selectsup").val(rid);
	$('#paydataList').DataTable().ajax.reload();
});

$(document).on('click', '.paymd', function(){

	$("#nmb").remove();
	$("#pamt").remove();
	$("#paynowamt").val('');
	$("#payment_date").val('');

	var rid = $(this).data("id");
	$("#selectidsup").val(rid);
	
	var total = $(this).data("total");
	$("#totalamt").val(total);
	
	var pending = $(this).data("pending");
	$("#pendingamt").val(pending);
	
	var paidamts = $(this).data("paidamt");
	$("#paidamt").val(paidamts);
});


$(document).ready(function() {

	var pathn = $('meta[name="base_url"]').attr("content")+'/payment-viewdata';
	var reporttables =  $('#paydataList').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 = $("#selectsup").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.index;
			}
		},
		{
			"targets": 1,
			orderable: true,
			className: "text-center",
			"render": function ( data, type, row, meta ) {
				return row.payment_date;
			}
		},
		{
			"targets": 2,
			orderable: true,
			"render": function ( data, type, row, meta ) {
				return row.final_amount;
			}
		}
	  ]
	});
});


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

</script>

@endsection