buy_lab.html

{% extends "payment/base_payment.html" %}
{% load custom_template %}
{% load staticfiles %}

{% block content %}
    <div class="block-area">
        <h3 class="block-title">Buy lab</h3>
    </div>
    <div class="block-area">
        <div class="tile p-15">
            {% for key, value in form.errors.items %}
                <p>{{ value }}</p>
                <p>{{ key }}</p>
            {% endfor %}
            <form action="{{ action }}" method="post" role="form">{% csrf_token %}
                <div class="form-group" id="id_lab_div">
                    <label>Choose Lab</label>
                    <ul class="lists-caret">
                        <li>$20/lab/user/semester</li>
                        <li>$50/all lab/user/semester</li>
                    </ul>
                    <select class="form-control" id="id_lab_option">
                        <option value="all_lab" selected="selected">All Lab</option>
                        <option value="custom_lab">Custom Lab</option>
                    </select>
                </div>

                <div class="form-group hide" id="id_lab_choice">
                    <br/>
                    <label>Labs :</label>
                    {% for value, text in form.lab.field.choices %}
                        <div class="checkbox m-b-5">
                            <label for="aslam">
                                <input type="checkbox" class="aslam" name="{{ form.lab.name }}" value="{{ value }}">{{ text }}
                            </label>
                        </div>
                    {% endfor %}
                </div>
                <br/>
                <div class="form-group">
                    <label> Payment type </label>
                    <select class="form-control" id="id_payment_type" name="{{ form.payment_type.name }}">
                        {% for value, text in form.payment_type.field.choices %}
                            <option value="{{ value }}" >{{ text }}</option>
                        {% endfor %}
                    </select>
                </div>
                <br/>
                <div class="form-group">
                    <label>Month subscription</label>
                    <select class="form-control" id="id_subscription">
                        {% for value, text in form.month_subscription.field.choices %}
                            <option value="{{ value }}">{{ text }}</option>
                        {% endfor %}
                    </select>
                </div>
                <br/>
                <div class="form-group">
                    <label> Total license </label>
                    <input type="number" id="id_license_count" class="form-control" name="{{ form.license_count.name }}"
                           required/>
                </div>
                <br/>
                <div class="form-group">
                    <label> Total </label>
                    <div class="input-icon">
                        <input class="form-control" id="id_total" name="total" type="number" disabled="disabled"/>
                        <span class="add-on">
                            $
                        </span>
                    </div>
                </div>
                <br/>
                <button type="submit" class="btn btn-default">Submit</button>

            </form>
        </div>
    </div>
{% endblock %}

{% block script %}

    <script src="{% static 'bootstrap/js/icheck.js' %}"></script> <!-- Custom Checkbox + Radio -->
    <script>
        function count_total() {
            $('#id_lab_choice').find('input[type="checkbox"]').prop('checked', true);
            // Update total value
            var license_count = $('#id_license_count').val();
            var month_subscription = $('#id_subscription').val() / 6;
            var lab_type = $('#id_lab_option').val();
            var total = 0;

            if(lab_type == 'all_lab'){
                total = license_count * month_subscription * 50;
            } else {
                total = license_count * month_subscription * 20;
            }

            $("#id_total").val(total);

            if (total >= 500){
                // Set the payment type to Manual and disabled the control
                $('#id_payment_type').val('Manual');
                document.getElementById('id_payment_type').disabled = true;
            } else {
                document.getElementById('id_payment_type').disabled = false;
            }
        }

        $('#id_subscription').change(function () {
            count_total();
        });

        $('#id_license_count').keyup(function () {
            count_total();
        });

        $('#id_lab_div').change(function(){
           var choice = $('#id_lab_option').val();
            if (choice == 'custom_lab'){
                $('#id_lab_choice').removeClass('hide');
            } else {
                $('#id_lab_choice').addClass('hide');
            }
        });
        $('input[type="checkbox"]').click(function(){
            alert("banana");
        });
        $('.aslam').click(function(){
            alert("banana");
        });
        $(".aslam input:checkbox").on('change', function(){
            alert("banana");
        });
        $('input[type="checkbox"]').on('ifChecked', function(){
            alert("banana");
        });
    </script>
{% endblock %}