<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
{% if product.images|length > 0 %}
	<link rel="shortcut icon" href="{{product.images[0]}}">
{% else %}
	<link rel="shortcut icon" href="{{context}}/static/img/logo-0.png">
{% endif %}
<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">
<link rel="stylesheet" href="{{context}}/static/css/dialog.css" type="text/css">
<link rel="stylesheet" href="{{context}}/static/css/themes.css" type="text/css">
<link rel="stylesheet" href="{{context}}/static/css/plans.css" type="text/css">

<script src="https://kit.fontawesome.com/ab15160345.js" crossorigin="anonymous"></script>
<!--
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid-theme.min.css" /> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.5.3/jsgrid.min.js"></script>
-->
<script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/rpc.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/utils.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/dom.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/ext/modal.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/ext/math.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/jx/ext/cloud-view.js"></script>
<script type="text/javascript" src="{{ context }}/static/js/payment.js"></script>
<title style="text-transform: capitalize">
	{% if product.metadata.label %}
		{{product.metadata.label}}
	{% else %}
		{{product.name.replace('-',' ')}}
	{% endif %}
</title>
<style>
	
</style>
<script>
		sessionStorage.context = "{{context|safe}}"
		var url = "{{ session['cloud-view'] |safe}}"
	
		var signup_form = function(index,caller){
			
			
			var url = '{{context}}/{{product.name|safe}}/signup?index=:index'.replace(/:index/,index)
			var httpclient = HttpClient.instance()
			httpclient.get(url,function(x){
				var html = x.responseText ;
				var data = JSON.parse($(caller).attr('data'))
				
				jx.modal.show({html:html,id:'dialog'})
				jx.dom.set.value('signup-plan',data.nickname)
				if(data.unit_amount == 0){
					var price = 'Free'
				}else{
					var price = parseFloat(data.unit_amount / 100 ).toFixed(2)
					price = ([price, data.recurring.interval]).join(' / ')
				}
				
				jx.dom.set.value('plan-price',price)
				
				var image = jx.dom.get.attribute('product-logo','src')
				
				jx.dom.set.attribute('plan-image','src',image)
				//jx.dom.set.focus('email')
				
				bind (data)

				//bind( JSON.parse( $(caller).attr('data')) )
				
			})
		}
		var signup_card = function(p){
			var http = HttpClient.instance()
			http.get('{{context}}/card.html')
		}
		
		/*
		* Binding buttons to oauth 2.0 interface
		*/
		var bind = function(data){
			
			var buttons = $('.signup-button') ;
			
			jx.utils.patterns.visitor(buttons,function(button){
				$(button).attr('data',data)
				$(button).click(function(event){
					var id = ( $(this).attr('data-value'))
					var plan_id = ( $(this).attr('plan-id'))
					var protocol = window.location.href.match(/^(https|http)/)[0]
					var host = window.location.href.match(/^.+\/\/([a-z,\-,.]+)\/.+$/)[1]
					var key = ([protocol,'://',host,'/cloud-view/oauth']).join('')
					//jx.cloudview.init(host,protocol)					
					$('.auth').slideUp(function(){
						$('.dialog').slideDown()
						jx.dom.set.value('message','Waiting for <b>'+id+'</b>')
					})
					
					jx.cloudview.init("{{session['cloud-view']|safe}}")
					jx.cloudview.oauth.init(id,key,function(p){
						//
						// @TODO:
						// At this point we need to provide a screen to provide credit card information
						// And or redirect to application framework
						//
						if (p == null){
							$('.dialog').slideUp(function(){
								$('.auth').slideDown()
							})
							return
						}
						var info = {"auth":p,"plan":data}
						var httpclient = HttpClient.instance()
						httpclient.setHeader("Content-Type","application/json")
						httpclient.setData(JSON.stringify(info) )
						httpclient.post('{{context|safe}}/store',function(x){})
						if (data.unit_amount == 0|| data.amount == 0){
							//
							// We should not be prompting the user but automatically logging her into her session
							//
							redirect_now(p,data)							
							
						}else{
							pay_now(p,data)
							
						}

						
						
					})
					//alert(window.location.href.match(/^(https|http):\/\/([a-z,-,.]+)/)[2])
				})
			})
		}
/**
*/
var pay_now = function(auth,plan){
	jx.modal.close()
	var http = HttpClient.instance()	
	var body ={auth:auth,plan:plan}
	
	http.setData(body)
	http.post('{{context}}/store',function(x){
		var _http = HttpClient.instance()
		_http.get('{{context}}/{{product.name}}/pay',function(x){
			
			jx.modal.show({html:x.responseText,id:'dialog'})
			payment.do_post = redirect_now
			payment.setup("{{context|safe}}",[],"{{product.name}}")
		})
	})
	

}
var _pay_now = function(auth,plan){
	
	var http = HttpClient.instance()
	http.get('{{context}}/signup',function(x){
		x = JSON.parse(x.responseText)
		
		var form = jx.dom.get.instance('FORM')
		form.id = plan.id
		form.method = 'POST'
		form.action = '{{context}}/signup'
		var script = jx.dom.get.instance('SCRIPT')
		var input = jx.dom.get.instance('INPUT')
		input.type = 'submit'
		input.type = 'stripe-button'
		script.setAttribute('data-key', x['data-key'].trim())
		script.setAttribute('data-email', auth.user.uid)
		script.setAttribute('data-name', plan.nickname)
		script.setAttribute('data-amount', plan.unit_amount)
		script.setAttribute('data-description','{{description|safe}} ' + plan.nickname)
		script.src = 'https://checkout.stripe.com/checkout.js'
		script.setAttribute('data-amount',plan.unit_amount)
		script.setAttribute('data-image','https://s3.amazonaws.com/stripe-uploads/acct_15kiA1EUWsmgY81Amerchant-icon-1493912370912-logo-0.png')
		
		script.setAttribute('data-label',(['Pay $',plan.unit_amount,plan.recurring.interval]).join(' '))
		script.className = 'stripe-button'
		
		form.appendChild(script)
		form.appendChild(input)
		//jx.dom.set.value('form','')							
		//jx.dom.append('form',form)
		jx.modal.close('signup')

		$('#form').html('')							
		$('#form').append(form)
		setTimeout(function(){
				console.log('###')
				$('.stripe-button-el').click()
		},500)
		
		


	})	
}
/**
* This function will redirect the call to the product homepage
*/
var redirect_now = function(auth,plan){
	
	var info = {'auth':auth,'plan':plan}
	var http = HttpClient.instance()
	http.setHeader('Content-Type','application/json')
	http.setData(JSON.stringify(info))
	http.post('{{context|safe}}/goto/{{product.name|safe}}',function(x){
		//var uri = x.getResponseHeader('location')
		var uri = '{{context}}/me'
		if (uri != null){
			
			var msg = 'Redirecting to <b>{{product.name|safe}}</b>'		
			
		}else{
			var icon= '<i class="fas fa-times fa-3x"></i>'
			var msg = "Error found, please try again"
			
		}
		if(jx.dom.exists('message')){
			jx.dom.set.value('message',msg)
		}
		
		$('.auth').slideUp(function(){
			$('.dialog').slideDown()
			
		})
		setTimeout(()=>{
			if(uri != null){
				http = HttpClient.instance()
				http.post('{{context|safe}}/signup',function(x){
					window.location = uri
				})
				

			}else{
				
			}
		},1700)

	})	
}

$(document).ready(function(){
	jx.cloudview.init( "{{session['cloud-view']}}")
	
})
	
</script>
<body >



<div class="pricing-frame">
	<div class="header">
		<div align="right">
			<img id='product-logo' src="{{product.images[0]}}">
		</div>
		<div class="caption" align="left">
					{% if product.metadata.label %}
						{{product.metadata.label}}
					{% else %}
						{{product.name.replace('-',' ')}}
					{% endif %}
			
	
	
		</div>
		<div align="center" style="text-transform:capitalize;grid-row:2; grid-column:1 /span 2;">{{description}}</div>
			
				
			
	</div>
	<div class="pricing">		
			
		{% for item in plans%}
			<div class="plan {{theme}}">
				<div class="title" align="center">
					<div class="nickname">{{ item.nickname }}</div>
					{% if item.id in active_plans %}
						<div class="current-plan"></div>
					{% else %}
						<div></div>
					{% endif %}
                    {% if 'unit_amount' in item %}
                        {% if item.unit_amount == 0%}
                            <div class="default">
                                    <span class="bold"></span>
                            </div>
                            
                        {%else%}
                        <div class="default" >
                            
                            <span class="bold">$ {{ item.unit_amount/100 }}</span>
                                 / <span class="small">{{item.recurring.interval[:]}}</span>

                        </div>
                        {% endif %}	
                   {% else %}
                        <div>
                        </div>
                   {% endif %}
				</div>
				
				<div class="">
					{% for key,value in item.metadata['features'].items() %}
						<div class="feature">
							<div class="label">{{ key.replace('_',' ') }}</div>
							{% if value == True %}
								<div class="status"><i class="fas fa-check"></i></div>
							{% elif value == False %}
								<div class="status"><i class="fas fa-times"></i></div>
							{%else %}
								<div class="status">{{value}}</div>
							{% endif %}
						</div>
						
					{% endfor %}
				</div>
				
					<div align="right" class="border-top">
						<p>
									    {% if 'unit_amount' in item %}	
                                            
                                        <div align="center" style="width:50%; margin-right:25%;" class="button action"  data='{{item|tojson|safe}}' onclick="signup_form( {{loop.index-1}} , this )">
                                                <div>Signup Now</div>
                                            
                                            {% if item.unit_amount == 0 %}
                                                <div class="small text">
                                                        <span class="bold">Free</span>
                                                </div>
                                                    
                                                {%else%}
                                                <div class="small text" >
                                                    <span class="bold">$ {{ item.unit_amount/100 }}</span>
                                                        / <span >{{item.recurring.interval[:]}}</span>

                                                </div>
                                            {% endif %}	
                                        </div>
                                        {% else %}

                                        <div align="center" style="display:grid; height:32px; align-items:center; width:50%; margin-right:25%;" class="button action"  data='{{item|tojson|safe}}' onclick="window.location.href='mailto:info@the-phi.com?subject=Inquiery about {{product.name}}::Parser {{item.nickname|safe}}'">
                                                <div>Contact Us</div>
                                         </div>
                                        {% endif %}
						</p>
						

					</div>
					
					
			</div>
		{% endfor %}

		</div>
		
</div>
<div id="form" class="border-top" style="display:none">

</div>
<div class="small black footer " >
	<div align="center">support@the-phi.com</div> 
	<div align="center">
		all rights reserved &copy; {{ now }}, The Phi Technologys
	</div>
	<div align="center">
		Privacy & Terms
	</div>

</div>
	
</body>
