{% extends "base.html" %}
{% load staticfiles compress %}

{% block title %}Pricing - It's Free! - healthchecks.io{% endblock %}

{% block content %}

<!-- Plans -->
<section id="plans">
    <div class="container">
        {% if messages %}
        <div class="alert alert-danger">
            <p>
                <strong>We're sorry!</strong> There was a problem setting
                up the subscription. Response from payment gateway:</p>

            {% for message in messages %}
            <p class="error-message">{{ message }}</p>
            {% endfor %}
        </div>
        {% endif %}

        {% if sub.is_active %}
        <div class="row">
            <div class="col-md-12">
                <div id="subscription-status" class="jumbotron">
                    <p>
                        {% if first_charge %}
                        You just paid <strong>${{ sub.price }}</strong>
                        {% else %}
                        You are currently paying <strong>${{ sub.price }}/month</strong>
                        {% endif %}

                        {% if sub.pm_is_credit_card %}
                        using {{ sub.card_type }} card
                        ending with {{ sub.last_4 }}.
                        {% endif %}

                        {% if sub.pm_is_paypal %}
                        using PayPal account {{ sub.paypal_email }}.
                        {% endif %}
                    </p>
                    <p>
                        Next billing date will be {{ sub.next_billing_date }}.
                        Thank you for supporting healthchecks.io!
                    </p>
                    <form method="post" action="{% url 'hc-cancel-plan' %}">
                        {% csrf_token %}
                        <button type="submit" class="btn btn-default">
                            Cancel Subscription
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {% endif %}


        <div class="row">

            <!-- item -->
            <div class="col-sm-4 text-center">
                <div class="panel panel-success panel-pricing">
                    <div class="panel-heading">
                        <i class="glyphicon glyphicon-heart"></i>
                        <h3>Free Plan</h3>
                    </div>
                    <div class="panel-body text-center">
                        <p><strong>$0 / Month</strong></p>
                    </div>
                    <ul class="list-group text-center">
                        <li class="list-group-item"><i class="fa fa-check"></i> Personal or Commercial use</li>
                        <li class="list-group-item"><i class="fa fa-check"></i> Unlimited Checks</li>
                        <li class="list-group-item"><i class="fa fa-check"></i> Unlimited Alerts</li>
                        <li class="list-group-item">&nbsp;</li>
                    </ul>
                    <div class="panel-footer">
                        {% if request.user.is_authenticated %}
                            {% if sub.subscription_id %}
                                <form method="post" action="{% url 'hc-cancel-plan' %}">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-lg btn-default">
                                        Switch To Free
                                    </button>
                                </form>
                            {% else %}
                                <a class="btn btn-lg btn-success disabled" href="#">Selected</a>
                            {% endif %}
                        {% else %}
                        <a class="btn btn-lg btn-success" href="{% url 'hc-login' %}">Get Started</a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- /item -->

            <!-- item -->
            <div class="col-sm-8 text-center">
                <div class="panel panel-success panel-pricing">
                    <div class="panel-heading">
                        <div id="piggy">
                            <i class="glyphicon glyphicon-piggy-bank"></i>
                        </div>
                        <h3>Pay What You Want Plan</h3>
                    </div>
                    <div class="panel-body text-center">
                        <p>
                        <strong>
                        {% if sub.is_active %}
                            $<span id="pricing-value">{{ sub.price }}</span> / Month
                        {% else %}
                            $<span id="pricing-value">10</span> / Month
                        {% endif %}
                        </strong>

                        <span class="btn-group" role="group">
                            <button id="pay-minus" type="button" class="btn btn-default">
                                <i class="glyphicon glyphicon-chevron-down"></i>
                            </button>
                            <button id="pay-plus" type="button" class="btn btn-default">
                                <i class="glyphicon glyphicon-chevron-up"></i>

                            </button>
                        </span>


                        </p>
                    </div>

                    <ul class="list-group text-center">
                        <li class="list-group-item"><i class="fa fa-check"></i> Personal or Commercial use</li>
                        <li class="list-group-item"><i class="fa fa-check"></i> Unlimited Checks</li>
                        <li class="list-group-item"><i class="fa fa-check"></i> Unlimited Alerts</li>
                        <li class="list-group-item"><i class="fa fa-check"></i> Priority Support</li>
                    </ul>
                    <div class="panel-footer">
                        {% if request.user.is_authenticated %}
                            {% if sub.is_active %}
                                <button id="pww-selected-btn"
                                    class="btn btn-lg btn-success disabled">Selected</button>

                                <form method="post" action="{% url 'hc-update-plan' %}">
                                    {% csrf_token %}
                                    <input class="selected-price" type="hidden" name="price" />
                                    <button
                                        id="pww-switch-btn"
                                        type="submit"
                                        class="btn btn-lg btn-default">
                                        Switch To
                                    </button>
                                </form>
                            {% else %}
                                <button
                                    id="pww-create-payment-method"
                                    class="btn btn-lg btn-default">Select</button>
                            {% endif %}
                        {% else %}
                            <a class="btn btn-lg btn-primary" href="{% url 'hc-login' %}">Get Started</a>
                        {% endif %}
                    </div>
                </div>
            </div>
            <!-- /item -->
        </div>

    </div>
</section>
<!-- /Plans -->

<section id="faq">
    <div class="container">
        <div class="page-header">
            <h1>FAQ</h1>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <h2>The Free plan and the Pay-What-You-Want plan look almost the same.
                    What's up with that?</h2>
                <p>
                    healtchecks.io is a free service. You can use it as much
                    as you want (in good faith, without abusing it), and you
                    should not feel obliged to pay anything. However, if you
                    find the service useful and important to you, you do have the option
                    to switch to the Paid plan. The Paid plan is effectively
                    a monthly donation to guarantee project's
                    continued existence and future improvements.
                </p>

                <h2>If I cancel my paid plan, do I get a refund?</h2>
                <p>No, you don't.</p>
            </div>
        </div>
    </div>
</section>

<div id="payment-method-modal" class="modal" data-client-token="{{ client_token }}">
    <div class="modal-dialog">
        <form method="post" action="{% url 'hc-create-plan' %}">
            {% csrf_token %}
            <input class="selected-price" type="hidden" name="price" value="10" />

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</span></button>
                    <h4>Set Up Subscription</h4>
                </div>
                <div class="modal-body" id="payment-method-body">
                    <div id="payment-form"></div>
                </div>
                <div class="modal-footer">
                    <button id="payment-method-cancel" type="button" class="btn btn-default">
                        Cancel
                    </button>
                    <button type="submit" class="btn btn-primary">
                        Set Up Subscription
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script src="https://js.braintreegateway.com/v2/braintree.js"></script>
{% compress js %}
<script src="{% static 'js/jquery-2.1.4.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<script src="{% static 'js/pricing.js' %}"></script>
{% endcompress %}
{% endblock %}