<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">
<link rel="shortcut icon" href="{{product.images[0]}}">

<script type="text/javascript" src="{{ context }}/static/js/jquery/jquery.min.js"></script>
<link rel="stylesheet" href="{{context}}/static/css/borders.css" type="text/css">
<link rel="stylesheet" href="{{context}}/static/css/fa/css/all.css" type="text/css">
<script type="text/javascript" src="{{ context }}/static/css/fa/js/all.js"></script>

<script src="{{context}}/static/js/jx/utils.js"></script>
<script src="{{context}}/static/js/jx/dom.js"></script>
<script src="{{context}}/static/js/jx/rpc.js"></script>
<script src="{{context}}/static/js/jx/ext/modal.js"></script>
<script src="{{context}}/static/js/jx/ext/math.js"></script>
<script src="{{context}}/static/js/payment.js"></script>
<title>
    {% if not product.metadata.label %}
        {{product.name}}
    {% else %}
        {{product.metadata.label}}
    {% endif %}
</title>
<style>
   
    
 
    /*.frame {
        font-size:16px;
        font-weight:lighter;
        width:800px;

        display:grid;
        grid-template-columns: 50% 50%;
        gap:2px;
        align-items:center;
        justify-content: center;
        
        
    }
    .product-info {
        display:grid;
        grid-template-rows: 48px 250px auto;
        gap:2px;
        align-items:center;
        border-right:1px solid #CAD5E0;
        padding:32px;
        
    }
    .product-info .visual {
        background-color: #f3f3f3; padding:32px; width:256px;
    }
    .product-info .description {
        padding:4px;
        
    }
    .product-info .caption {
        font-size:28px;
        padding:8px;
        text-align:center;
    }
    .product-info img {
        width:150px;
        margin:4px; }
    .card-info {
        padding:4px;
        
       
    }
    
    
    .payment-amount .menu {display:none; position:absolute; z-index:9; background-color:#ffffff; padding:4px;}
    .menu .item {padding:4px}
    .card-info input {width:100%;}
    
    .email { width:100%;}
    .fname { width:100% }
    .lname {width:100%}
    */
    .card-info .amount {text-align:right;}
    .payment-amount .payment-list {display:none; position:absolute; z-index:9; background-color:#ffffff; padding:4px;}
    input {
        height:48px;
        border:2px solid transparent;
        padding:6px;
        font-weight:normal;
        color:#000000;
        background-color:#f3f3f3;
    }
    .fa-exclamation-triangle{
        color:#ff6500  ;
    }
    input:focus {
        /*border-left: 2px solid #ff6500 ;*/
        border-left: 2px solid #4682B4;
    }
    
    .error {
        border-color: maroon;
    }
    .location{padding:4px; display:none; grid-template-columns:50% 50%; gap:2px;}
    .location input {width:100%}
    .gray {color:#d3d3d3}
    .steel-blue{color:#4682B4;}
    .dialog-frame {
       min-width:320px;
       min-height:125px;

    }
    /*
    .dialog {
        display:grid;
        padding:4px;
        display:grid;
        grid-template-columns: 25% auto;
        gap:2px;
    }
    .dialog-frame .close {display:grid; gap:2px; grid-template-columns:auto 32px; 
        text-align:right; ; 
        background-color:#f3f3f3;
    }
    .dialog .icon { font-size:42px;justify-items:center; display:grid; align-items:center}
    .dialog .message {
        display:grid;
        align-items:center;
        padding:8px;
        font-weight:bold ;
        color:#4682B4 ;
    } */
    @media only screen and (max-width: 960px){   
        /*body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 20px;}*/
        .payment-pane {display:grid; justify-items:center; align-items:center; height:auto; min-width:350px; max-width:450px}
        
     
        .frame {
            display:block;
            
            gap:2px;
            padding:4px;
            
        }
        .product-info {display:block;
            align-items:center;
            margin-bottom:2px;

        }
        
        .visual{
            
            
            display:grid;
            align-items: center;
            justify-items: center;
            margin-left:25%;
            margin-right:25%;
            width:50%;

            
        }
        .description {display:none}
        .visual img {width:100px}     
        .card input {width:100%;}  
        .pay-frame {margin-top:10px;}
        
        

    }

    @media only screen and (min-width: 1024px){      
        /*body {font-size:14px; font-family:sans-serif; font-weight:lighter; line-height: 28px;}*/
        .payment-pane {display:grid; justify-items:center; align-items:center; height:96%;}
        .frame {
            width:800px;
            display:grid;
            grid-template-columns: 50% auto; gap:2px;
            
            
        }  
        .frame .title { grid-column: 1 / span 2; padding:4px;}
        .visual { vertical-align:middle;
            display:grid;
            justify-items: center;
            align-items:center;
            

        }
        .visual img {width:110px;}
        .product-info{
            display:grid;
            grid-template-rows: 70% auto; gap:2px;
            border-right:1px solid #CAD5E0;
            padding:4px;
        }     
        .card {padding:4px;;}
        .card input {width:100%; }
        .pay-frame {margin-top:30px;}
    }
    @media only screen and (min-width: 1080px){        
        .-frame {width:800px}
    }
    @media only screen and (min-device-width: 1920px){   
    }

</style>
<script >
    $(document).ready(function(){
        
        $('head').append('<link rel="stylesheet" href="{{context}}/static/css/default.css" type="text/css">')
        payment.setup("{{context|safe}}",{{pricing|tojson}},"{{product.name|safe}}")
        payment.dialog('','Loading ...','PROGRESS')
        

        setTimeout(function(){
            jx.modal.close()
        },1700)

    })
    /*sessionStorage.store_context = "{{context|safe}}"
    sessionStorage.pricing = JSON.stringify({{pricing|tojson}})
    sessionStorage.customer = JSON.stringify({info:{}})
    
     $(document).ready(function(){
        $('.payment-amount > input').on('focusin',function(){            
            $('.payment-amount > .menu').slideDown('fast')
        })
        $('.payment-amount > input').on('focusout',function(){
            $('.payment-amount > .menu').slideUp('slow')
        })
        payment.dialog('','Loading ...','PROGRESS')
        payment.init(0)
        //  jx.dom.set.focus('amount')
        var d = new Date()
        $('#copyright').text(d.getFullYear())

        setTimeout(function(){
            jx.modal.close()
        },1700) 
    })*/
</script>
<div class="payment-pane">
    
    <div class="frame">
        <div class="caption title" align="center" style="display:grid; gap:2px; grid-template-columns: auto 32px; align-items:center; justify-items:center; text-transform:capitalize">
            
            <div class="bold">
                {% if not product.metadata.label %}
                    {{product.name}}
                {% else %}
                    {{product.metadata.label}}
                {% endif %}
            </div>

            <div class="active close-dialog" onclick="jx.modal.close()"><i class="fa fa-times"></i></div>
        </div>
        <div class="product-info" >
            
            
            <div class="border-round visual" >
                <img src="{{product.images[0]}}">
            </div>
        
    
        <div class="description" align="center">
            <!-- 
                @TODO: if a plan is being loaded it should display here
            -->
            {{product.metadata.about}}
        </div>
        </div>
        <div class="card" style="vertical-align:middle;">
            
            <div style="margin-top:2px">
                {% if email %}
                    <input value="{{email}}" type="text" placeholder="Email@domain.com"  class="email" data-pattern="^[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)*@[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)+$" readonly />    
                
                {% else %}
                    <input type="text" placeholder="Email@domain.com"  class="email" data-pattern="^[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)*@[-!#-'*+\/-9=?^-~]+(?:\.[-!#-'*+\/-9=?^-~]+)+$" onkeyup="payment.validate(event)"/>    
                {% endif %}
            </div>
            <div style="display:grid; grid-template-columns:50% 50%; gap:2px; margin-top:2px;">
                <div>
                    <input value="{{fname|safe}}" type="text" placeholder="First Name" class="fname black" data-pattern="^[a-z,A-Z,-]{2,}$" onkeyup="payment.validate(event)"/>
                </div>
                <div>
                    <input value="{{lname|safe}}" type="text" placeholder="Last Name" class="lname black"  data-pattern="^[a-z,A-Z,-]{2,}$" onkeyup="payment.validate(event)"/>
                </div>
            </div>
            <div class="card-info" style="margin-top:2px">
                
                
                   
                    <div class="" style="display:grid; grid-template-columns:50% auto; gap:2px">
                        <div class="payment-amount">
                            
                            {% if pricing %}
                                <input type="text" id="amount" class="amount" readonly="true" title="Amount" placeholder="00.00" onchange="payment.validate(event)" style="text-align:right"/>
                                <div class="border payment-list" style="margin:4px">
                                    <div style="margin:4px;">Choose an amount</div>
                                    {%for item in pricing %}
                                        <div class="item active" style="font-weight:lighter" onclick="payment.init({{loop.index -1 }})">
                                            
                                            {{'%0.2f'| format(item.unit_amount/100|float) }} <span style="text-transform: uppercase">{{item.currency}}</span>
                                        
                                        </div>
                                    {% endfor %}
                                    <div style="margin:4px"></div>
                                </div>
                            {% else %}
                                <input type="text" value= "{{'%0.2f'| format(amount/100|float)}}" readonly id="amount" class="amount" title="Amount" placeholder="00.00" />
                            {% endif %}
                            
                        </div>
                        <div class="currency bold" style="padding:4px; display:grid; align-items:center" align="left"></div>
                        
                    </div>
                
                <div class="number" style="margin-top:2px; margin-bottom:2px; display:grid; gap:2px; grid-template-columns:64px auto;">
                    <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" placeholder="Card Number" class="number" data-pattern="card" onkeyup="payment.validate(event)"/>
                </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])/202[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 class="location">
                <div class="state">
                    <_input type="text" placeholder="State" data-pattern="[A-Z]+" value="USA" onkeyup="payment.validate(event)"/>
                </div>
                <div class="zip">
                    <_input type="text" placeholder="Zip Code" data-pattern="[0-9]{5,}" onkeyup="payment.validate(event)"/>
                </div>
            </div>
            

            <div class="pay-frame">
                {% if not pricing %}
                    <div class="active" onclick="payment.card_onfile()" style="padding:8px; margin-bottom:4px; align-items:center; display:grid; grid-template-columns:28px auto; gap:2px; font-size:14">
                        <div class="card_onfile" >
                            <i class="far fa-square"></i>
                        </div>
                        <div>
                            Use Card On File
                        </div>
                    </div>
                {% endif %}
                <div class="active " align="center" style=" background-color:#f3f3f3; color:#4682b4; display:grid; ;align-items:center; height:48px; padding:4px;"
                    onclick="payment.proceed()"
                >
                
                    <div style="font-size:18px" class="bold">
                        
                        {% if not pricing %}
                            Signup
                        {% else %}
                            Make Payment
                        {% endif %}
                     </div>
                </div>
            </div>
        

            
        </div>
        <div class="small border-top" align="center" style="margin-top:32px; grid-column: 1 / span 2; font-weight:lighter; font-family:sans-serif">
            <p>The Phi Technology
    
                - {{product.name}} &copy; <span class="copyright"></span>
            </p>
        </div>
   </div>
    
    
</div>
