@extends('marketing.main')

@push('marketing_title') Non Paid Fresh Data | POLI - Marketing Panel @endpush

@push('page-custom-css')

    <link rel="stylesheet" href="{{ asset('assets/polipop-master/dist/css/polipop.core.min.css')}}"/>
    <link rel="stylesheet" href="{{asset('assets/polipop-master/dist/css/polipop.default.min.css')}}" />
	<style type="text/css">

	</style>
@endpush

@section('MarketingPanel')
	

    <div class="content">
    	<div class="container">
		    <div class="row">
		        <div class="col-md-6">
		            <h2 class="page-title">Add Payment Details</h2>
		            <div class="page-pretitle"> 
		             	<a href="{{ Request::url() }}">Add Payment Details Manually</a>
		            </div>
		        </div>
		        <div class="col-md-3">
		        	<p class="page-title"> {{ Str::of(explode(' ',Auth::guard('marketing')->user()->name)[0])->limit(12,'..') }} </p>
		        	<p class="page-pretitle show_time"> {{ date('D,d M') }} <span></span> </p> 
		        </div>
		    </div>
		</div> 
    		<div class="row">
    			<div class="container">
    				<div class="card">
    					<div class="card-body">
    						<form class="needs-validation" id="PaymentDtlsAdd" method="POST" action='{{route("marketing.save.payment.details")}}' autocomplete="off" novalidate="" accept-charset="utf-8">
		    					@csrf	
		    					<div class="col-md-4 mb-3">
	    							<label for="poli_id" class="form-label">POLI ID</label>
	    							 <div class="input-group">
                                      <input type="text" class="form-control" name="poli_id" id="poli_id" value="{{ old('poli_id') }}" placeholder="Enter POLI" required="">
                                      <button class="btn btn-primary hoverslide" type="button" id="get_poli_id"><i class="fas fa-search"></i></button>
                                    </div>
	    						</div>
	    						<div class="othersection" style="display:none">
			    					<div class="row g-2 mb-3 ">
			    						<div class="col-4">
			    							<label for="order_id" class="form-label">ORDER ID</label>
			    							<input type="text" class="form-control" name="order_id" id="order_id" placeholder="Enter ORDER ID" value="{{ old('order_id') }}" required="">
			    						</div>
			    						<div class="col-4">
			    							<label for="amount" class="form-label">Amount(₹)</label>
			    							<input type="number" value="{{ old('amount') }}" class="form-control" name="amount" id="amount" placeholder="Enter Amount" required="">
			    						</div>
			    					</div>
			    					<div class="row g-2 mb-3">
			    						<div class="col-4">
			    							<label for="pay_type" class="form-label">Paid For?</label>
			    							<select class="form-control" name="pay_type" id="pay_type" required>
			    								<option value="" readonly>--select--</option>
			    								<option value="REGISTRATION">Registration</option>
			    								<option value="PLAN BUY">Plan buy</option>
			    							</select>
			    						</div>
			    						<!-- <div class="col-4">
			    							<label for="payment_date" class="form-label">TXN ID</label>
			    							<input type="text" class="form-control" name="txn_id" id="txn_id" placeholder="TXN ID" required="">
			    						</div> -->
			    						<div class="col-4">
			    							<label for="payment_date" class="form-label">Payment Date</label>
			    							<input type="datetime-local" class="form-control" name="payment_date" id="payment_date" placeholder="yyyy/mm/dd H:i:s" required="" value="{{ old('payment_date') }}" >
			    						</div>
			    					</div>
			    					<div class="submit">
			    						<button id="submit_btn" style="display:none;" class="btn btn-primary"> Save Data </button>
			    					</div>		
	    						</div>
    						</form>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>

@endsection


@push('marketing-page-js')

<script>

 var polipop = new Polipop('mypolipop', {
        layout: 'popups',
        theme: 'default',
        icons: true,
        insert: 'before',
        position: 'bottom-right',
        pool: 0,
        sticky: false,
        pauseOnHover: true,
        life: 5000,
        progressbar: true,
        effect: 'slide',
        easing: 'ease-in-out',
    });

	// Starter JavaScript for disabling form submissions if there are invalid fields
		(()=> {
		  'use strict'
		  // Fetch all the forms we want to apply custom Bootstrap validation styles to
		  var forms = document.querySelectorAll('.needs-validation')
		  // Loop over them and prevent submission
		  Array.prototype.slice.call(forms)
		    .forEach( (form) => {
		      form.addEventListener('submit', (event) => {
		        if (!form.checkValidity()) 
		        {
		          event.preventDefault()
		          event.stopPropagation()
		        }
		        form.classList.add('was-validated')
		      }, false)
		    })
		})();

	document.querySelector("#get_poli_id").addEventListener('click',getPoliData);

	function getPoliData(){
		let input = document.querySelector("#poli_id");
		if( input.value.length < 15 ){
			polipop.add({
				  content: 'Invalid id or onvalid format',
				  title: "Invalid ID",
				  type: 'error',
			});
			input.focus();
			$("#submit_btn").css({'display':'none'});
			return false;
		}
		const data = { poli_id: input.value, _token:'{{csrf_token()}}', mode:'validate' };
		fetch('{{route("marketing.save.payment.details")}}', {
			method: 'POST', 
			headers: {
				'Content-Type': 'application/json',
			},
			body: JSON.stringify(data),
		})
		.then((response) => response.json())
		.then((data) => {
			if(data.status){
				$("#submit_btn").css({'display':'block'});
				$("#get_poli_id i").removeAttr('class').addClass('fas fa-check');
				$("#get_poli_id").addClass('btn-success').css({'pointer-events':'none', 'opacity':'0.5' });
				$("#poli_id").css({'pointer-events':'none', 'opacity':'0.5' }).attr('readonly','');
				$(".othersection").removeAttr('style');
			}else{
				polipop.add({
				  content: 'Data Not Found....',
				  title: "Not Found",
				  type: 'info',
				});
			}

		})
		.catch((error) => {
			console.error(error);
		});
	}

</script>

@if(\Session::has('success'))
<script type="text/javascript">
	polipop.add({
	  content: 'Data hasbeen saved succesfully..',
	  title: "Data Saved",
	  type: 'success',
	});
</script>
@endif


@if (\Session::has('warning'))
<script type="text/javascript">
	polipop.add({
	  content: 'Duplicate Data Found...',
	  title: "Data error",
	  type: 'error',
	});
</script>
@endif


@endpush