<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/borders.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 href="{{context}}/static/css/fa/css/all.css" type="text/css" rel="stylesheet">
<script src="{{context}}/static/css/fa/js/all.js"></script>
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></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>
<script src="{{context}}/static/js/jsgrid/jsgrid.js"></script>
<link href="{{context}}/static/js/jsgrid/jsgrid.css" type="text/css" rel="stylesheet">
<link href="{{context}}/static/js/jsgrid/jsgrid-theme.css" type="text/css" rel="stylesheet">

<style>
    .layout {
        display:grid;
        gap:2px;
        grid-template-columns: 30% auto;
        margin-left:20%;
        margin-right:20%;
        height:85%;
        margin-top:5%;

    }
    body {
        font-size:18px;
        font-family:sans-serif;
    }
    .plan img {width:100px}
    .plan-info { margin:2px; padding:2px;}
    
    .active {border-bottom:2px solid transparent}
    .active:hover {border-bottom:2px solid #FF6500;}
    .amount {font-family: 'Courier New', Courier, monospace;}
    .transaction {
        display:grid;
        grid-template-columns: 120px 300px 200px auto;
        gap:2px;
        
        margin:4px;
        font-size:14px;
        text-transform: capitalize;
    }
    .transaction :nth-child(2){
        white-space: nowrap;
        overflow:hidden;
        text-overflow: ellipsis;
    }
    .transaction :nth-child(4){text-align:center}
    #payments > div:nth-child(odd){
        background-color:#f3f3f3;
    }
    .history { height:500px; overflow:none; overflow-y:auto; scrollbar-width: thin;}
    .transaction div {
        padding:4px;
        border-left:1px solid #cad5e0;
    }
    .transaction :nth-child(1){
        border-color:transparent;
    }
    .stdout {
        
        padding:4px;
        width:99%;
        
        overflow:hidden;
        
        
    }
    .stdout .slider {
        width:299% ;
        
        display:grid;
        grid-template-columns: repeat(3,33%);
        gap:1%;
        align-items:top;
    }
    input{
        border:2px solid transparent;
        background-color:#f3f3f3;
        padding:8px;
        outline: 0px;
        color:#000000;
    }
    input:focus{
        border-left-color: #FF6500;
    }
    .user-info{
        
        display:grid;
        gap:2px;
        ;
    }

    .error {border-color:maroon;}
    .button {
        width:auto;
        padding:6px;
        font-weight:bold;
        border-radius:0px;
        border:2px solid transparent;
        background-color:#FF6500;
        color:#ffffff;
        
        cursor:pointer;
        text-align:center;
        
    }
    .button .fa-times {color:#ffffff}
    .button:hover .fa-times {color:maroon}
    .button .text {color:#ffffff}
    .button:hover {
        background-color:#ffffff;
        color:#FF6500;
        border-color:#FF6500
        
    }
    .button:hover .text { color :#FF6500;}
    
</style>
<script>
    var me = {}
    me.plan = {}
    me.plan.cancel = function(){
        var httpclient = HttpClient.instance()
        
        var url = "{{context}}/{{product.name}}/cancel"
        httpclient.post(url,function(x){
            //alert(x.responseText)
            //if(x.responseText.match(/1/)){
              window.location.reload()
            //}else{
                //
                // Provide an error message
            //}
        })
    }
    me.logout = function(){
        //var url = "{{context}}/me/logout"
        var url = ([sessionStorage.store_context,"me/logout"]).join("/")
        var http = HttpClient.instance()
        http.post(url,function(x){
            //window.location = "{{context}}/{{product.name}}/plans"
            window.location = ([sessionStorage.store_context, sessionStorage.product_name,"plans"]).join("/")
        })
    }
    me.plan.upgrade = function(){
        var url = window.location.href.replace(/me$/,'{{product.name}}/plans')
        window.open(url,'_self')
        //jx.modal.show(url)
    }
    
    me.update_card = function(){
        var inputs = $('input')
        var values = jx.utils.patterns.visitor(inputs,function(item){
            return payment.validate({target:item})
        })
        
        if (jx.math.sum(values) != inputs.length){
            ;
        }else{
            payment.dialog('{{product.metadata.label}}','Updating Card Information','PROGRESS')
            var url = '{{context}}/me/card'
            var body = JSON.parse(sessionStorage.customer).info

            var http = HttpClient.instance()
            http.setData(body,"application/json")
            
            http.post(url,function(x){
                if(x.responseText="1"){
                    window.open("{{context}}/me",'_self')
                }else{
                    jx.modal.hide()
                }
                
            })
            
            
        }
    }
    var plot = function(){
        var data = {{user.usage|tojson}}
        var value = parseFloat(100* (data.used / data.size).toFixed(2))        
        var label = 'Space Used'
        var options = {
            series: [value],
            chart: {
            
            type: 'radialBar',
          },
          plotOptions: {       radialBar: {
              hollow: {
                size: '70%',
              }
            },
          },
          labels: [label]
          };
          
  
          var chart = new ApexCharts($('.chart')[0], options);
          chart.render();    
    }
    var logs = function(){
        var options = {}
        var data = {{payments|tojson}}
        var m ={}
        m.date= function(value) { var date =  new Date(value)
            var div = jx.dom.get.instance('DIV')
            _months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']            
            div.innerHTML = ([date.getFullYear(),_months[date.getMonth()],date.getDate()]).join('-')
            return div
        }
        m.amount = function(value){
            var div = jx.dom.get.instance('DIV')
            div.align='right'

            var _amount =  parseFloat((value/100).toFixed(2))
            div.innerHTML = _amount == 0? '0.00':_amount
            return div
        }
        m.status = function(value){ 
            var _name = value.match(/paid/i)? 'fas fa-check': 'fas fa-times'
            var icon = jx.dom.get.instance('I')
            icon.className = _name
            var div = jx.dom.get.instance('DIV')

            div.append(icon)
            return div
        }
        m.default = function(value){
            var div = jx.dom.get.instance('DIV')
            div.innerHTML = value
            return div
        }
        jx.utils.patterns.visitor(data,function(item){
            frame = jx.dom.get.instance('DIV')
            jx.utils.patterns.visitor(['date','label','amount','status'],function(key){
                var value = item[key]
    
                var div = m[key] == null ? m.default(value) : m[key](value)
                frame.append(div)
            })
            if (item.label.match(/{{product.name}}/i) == null){
                return 
            }

            frame.className = 'transaction active'
            frame.data = item
            frame.onclick = function(){
                window.open(this.data.hosted,"invoice")
                //jx.modal.show({url:this.data.pdf})
            }
            jx.dom.append('payments',frame)
        })
    }
    $(document).ready(function(){
        sessionStorage.store_context = "{{context}}"
        sessionStorage.customer = JSON.stringify({info:{}})
        var date = new Date()
        $('.year').html(date.getFullYear())
        plot()
        logs()
    })
</script>
<title style="text-transform: capitalize">Store Front</title>
<body>
    <div class="layout">
        <div class="user">
            <div class="bold name">{{user.uii}}</div>
            <div class="email small">{{user.uid}}</div>
            <p>
                <div class="border-round border">
                    <div class="active bold" onclick="$('.slider').animate({marginLeft:0})">
                        <i class="far fa-folder-open" style="color:green"></i>
                        Manage Plan
                    </div>
                    <div class="active bold" onclick="$('.slider').animate({marginLeft:'-101%'})">
                        <i class="fas fa-history" style="color:#4682B4;"></i>
                            Billing History
                    </div>

                    <div class="active bold" onclick="$('.slider').animate({marginLeft:'-201%'})">
                        <i class="fas fa-credit-card"></i>
                        Payment Method</div>
    
                    <div class="active bold" style="color:maroon" onclick="me.logout()">
                        <i class="fas fa-times" ></i>
                        Logout</div>
                </div>
    
            </p>
            <div class="cloud border-round border">
                <div class="bold" align="center" style="text-transform: capitalize;">{{user.sid.replace('-',' ')}}</div>
                <div class="chart"></div>
            </div>
        </div>
        <div style="display:grid; grid-template-rows:64px auto; gap:22px">
            <div align="center" >
                <div class="caption">
                    {% if product.metadata.label %}
                        {{product.metadata.label}}
                    {% else %}
                        {{product.name}}
                    {% endif %}
                </div>
                <div class="small border-top">Store Front Management</div>
            </div>
            <div class="stdout">
                <div class="slider">
                    <div class="plan-management">
                        <!-- PANE 0: Managing Plan -->
                        <div class="border-bottom" style="display:grid; grid-template-columns:100px auto; gap:2px; align-items:center">
                            <img src="{{product.images[0]}}"  style="height:100px; width:auto"/>
                            <div>
                                <div class="bold">Current Plan</div>
                                {% if plan %}
                                    <div class="caption">{{plan.nickname}}</div>
                                {% else %}
                                    <div><i class="fas fa-times"></i> No Subscription Available</div>
                                {% endif %}
            
                            </div>
                        
                        </div>
                        <div class="" style="margin-left:32px; margin-top:32px; display:grid; grid-template-columns: auto auto; gap:2px; align-items:center" align="left">
                            {% if plan %}
                                <div class=""> $ <span class="bold amount">{{'%0.2f'| format(plan.amount/100|float)}}</span> per <span class="" style="text-transform: capitalize;">{{plan.recurring.interval[:]}}</span></div>
                            {% else %}
                                <div></div>
                            {% endif %}
                            
                        </div>
                        <p></p>
                        {% if plan %}
                            <div style="margin-left:50%">
                                <div class="small" align="center">Plan</div>
                                <div style="display:grid; grid-template-columns:50% 50%; gap:4px;">
                                    <div class="button" align="center" onclick="me.plan.cancel()">
                                        <i class="fas fa-times"></i> Cancel
                                    </div>
                                    <div class="button" align="center" onclick="me.plan.upgrade()">
                                        <i class="fas fa-upload"></i> Upgrade
                                    </div>
            
                                </div>
                            </div>
                        {% else %}
                            <div style="margin-left:75%">
                                <div class="button" onclick="me.plan.upgrade()" style="margin:4px">
                                    <i class="fas fa-user-plus"></i>
                                    Signup
                                </div>
                            </div>
                        {% endif %}
                        <p>
                            <ul class="small" style="margin-top:15%; color:maroon; align-items:flex-end">
                                <li type="square">Cancellation of plans will be prorated</li>
                            </ul>
                        </p>
                        
                    </div>
                    <div class="billing-history">
                        <!-- PANE 1: BILLING HISTORY -->
                        <div class="bold">Billing History</div><p></p>
                            <div class="border" style="padding:0px">
                                <div class="transaction  bold" style="">
                                    <div style="border-color:transparent" align="center">Date</div>
                                    <div  align="center">label</div>
                                    <div  align="center">Amount</div>
                                    <div  align="center">Status</div>
                                    
                                </div>  
                            </div>                      
                            <div class="history border" style="border-top-color:transparent; padding:0px;">
                                <div class="history" style="height:98%">
                                    <div id="payments"></div>
                                </div>
                                    
                                
                            </div>
                    </div>
                    <div>
                        <!-- PANE 2: Card/Payment Info-->
                        <div class="bold">Payment</div> <p></p>
                        <div>
                            
                            <div class="user-info">
                                <input type="text" class="email" value="{{user.uid|safe}}" disabled data-pattern="^[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)*@[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)+$" onkeyup="payment.validate(event)"/>
                                <input type="text" class="name" placeholder="Name on Card" value="{{user.uii|safe}}" data-pattern="^[a-z,A-Z,-]{3,}\x20{1,}[a-z,A-Z,-]{3,}$" onkeyup="payment.validate(event)"/>
                            </div>
                            <br>

                            <div class="card-info">
                                <div class="number" style="margin-top:2px; margin-bottom:2px; display:grid; gap:2px; grid-template-columns:64px auto;">
                                    {% if cards %}
                                        <div class="" style="background:#f3f3f3; display:grid; align-items:center; justify-items:center">
                                            <img id="pay-icon" src="{{context}}/static/img/cards/{{cards[0].type.lower().replace(' ','-')}}.svg" style="width:32px; vertical-align:middle"/>
                                        </div>
                                        <input type="text" style="text-align:right" placeholder="Card Number" class="number" data-pattern="card" onkeyup="payment.validate(event)" value=" *** {{cards[0].number}}"/>
                                    {% else %}
                                        <div class="" style="background:#f3f3f3; display:grid; align-items:center; justify-items:center">
                                            <img id="pay-icon" src="" style="width:32px; vertical-align:middle"/>
                                        </div>
                                        <input type="text" style="text-align:right" placeholder="Card Number" class="number" data-pattern="card" onkeyup="payment.validate(event)" value=""/>

                                    {% endif %}
                                </div>
                
                                <div class="expire" style="display:grid; grid-template-columns:50% auto; gap:2px;">
                                    <input type="text" placeholder="MM/YYYY" class="exp" data-pattern="^(0[1-9]|1[0-2])/20[2-9][0-9]$" onkeyup="payment.validate(event)"/>
                                    <input type="text" placeholder="CVC" class="cvc" data-pattern="^[0-9]{3,}$" onkeyup="payment.validate(event)"/>
                                </div>
                
                            </div>
                        </div>
                        <p></p>
                        <div style="margin-left:75%;">
                            <div class="button" align="center" style="margin:4px;" onclick="me.update_card()">Update</div>
                        </div>
                        <p></p>
                        <!--
                            Add something to signal cards on file  only keep one not more

                        -->
                        
                        
                    </div>
                </div>
 
            </div>
        </div>
    </div>
    <div class="small border-top" style="padding:4px; margin-top:4px;">
        
        <div align="center">ALL Rights Reserved &copy; <span class="year"></span> The Phi Technology LLC</div>
        
    </div>
</body>