{% extends "corporate_memberships/base-wide.html" %}
{% load base_filters %}
{% load i18n %}
{% load corporate_memberships_tags %}
{% load styled_forms %}

{% block title %}{% endblock %}
{% block meta_description %}{% endblock %}
{% block meta_keywords %}{% endblock %}
{% block meta_canonical_url %}<link rel="canonical" href="" />{% endblock %}

{% block extra_head %}
{{ block.super }}
<link rel="stylesheet" href="{{ STATIC_URL }}css/jquery-ui/jquery-ui-1.8.2.custom.css">
<link rel="stylesheet" href="{{ STATIC_URL }}css/timepicker.css" />
<link rel="stylesheet" href="{{ STATIC_URL }}css/corporate_memberships.css">
<style>
    .inline-block{
        display: inline-block;
    }
    div.short-label{
        width: 125px;
    }
    div.float-left{
        float: left;
        margin-right: 3px;
    }
    div.clear{
        clear: both;
    }
    div.form-field{
        margin: 3px 0;
    }
    div.admin-only-header{
        color: #CC0000;
    }
    div.section-break{
        margin: 2em 0 1em 0;
    }
    div.form-field ul{
        list-style-type: none;
    }
    div.form-field{
        margin-left: 2em;
    }
    div.form-field .error{
        color: #990000;
    }
    div.form-errors{
        margin-left: 0;
        background-color: #ffebe8;
        border: 2px solid #ff8b78;
        margin-bottom: 20px;
        padding: 10px;
        width: 75%;
    }
    div.submit-wrap{
        margin-top: 2em;
    }
</style>
{% endblock %}

{% block body %}
<div class="t">
<div class="application-form-wrap">
{% corpmemb_nav request.user %} 
        <h1>{{ app.name }}</h1>
        {{ app.description|safe }}

   <form action="" enctype="multipart/form-data" method="post">{% csrf_token %}
       
    {% if corpmembership_form.errors.values or corpprofile_form.errors.values %}
        <div class="form-errors">
            
            There were some problems in the form. Please review. Thanks!
            {% if corpprofile_form.errors.values %}
            {% for error in corpmembership_form.non_field_errors %}
                <p><a href="#">{{ error }}</a></p>
            {% endfor %}
            {% endif %}
            {% if corpmembership_form.errors.values %}
            {% for error in corpmembership_form.non_field_errors %}
                <p><a href="#">{{ error }}</a></p>
            {% endfor %}
            {% endif %}
            
            {% for field in corpprofile_form %}
                {% if field.errors %}
                      {% for error in field.errors %}
                        <p><a href="{{ request.get_full_path }}#{{ field.auto_id }}">{{ field.label }} - {{ error }}</a></p>
                      {% endfor %}
                {% endif %}
            {% endfor %}
            {% for field in corpmembership_form %}
                {% if field.errors %}
                      {% for error in field.errors %}
                        <p><a href="{{ request.get_full_path }}#{{ field.auto_id }}">{{ field.label }} - {{ error }}</a></p>
                      {% endfor %}
                {% endif %}
            {% endfor %}
    
        </div>
  {% endif %}
           
       {% for field_obj in app_fields %}
            {% render_corpmembership_field request field_obj corpprofile_form corpmembership_form %} 
        {% endfor %}
        
        <div class="submit-wrap">
        <input class="btn" type="submit" name="submit" value="Submit" />
        </div>
    </form>
    
</div>
</div>
{% endblock %}


{% block extra_body %}
    {{ block.super }}
      <script type="text/javascript" 
      src="{{ STATIC_URL }}js/jquery-ui-1.8.2.custom.min.js"></script>
      <script src="{{ STATIC_URL }}js/jquery.time.picker.js" type="text/javascript"></script>
      <script type="text/javascript">
            $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd' });
            $('.timepicker').timePicker({
              show24Hours: false,
              step: 15
            });
      </script>
      
      <script type="text/javascript" >
        var op;
        var payment_method_block = $(".id_payment_method").closest('.form-field');
        var selected_type = $('input[name=corporate_membership_type]:checked');
        if (selected_type.length > 0){
            if ($(selected_type).closest('label').html().split('$')[1] == 0){
                payment_method_block.hide();
            }else{
                payment_method_block.show();
            }
        }
        
        var membership_type = $(".id_corporate_membership_type");
        var type_options = membership_type.find('li');
        $(type_options).each(function() {
            var $this = $(this);
            $this.find('label').click(function() {
                if(parseFloat($this.find('label').html().split('$')[1])==0) {
                    payment_method_block.hide();
                 }else{
                     payment_method_block.show();
                 }
            });
        });
        
        
    </script>
{% endblock extra_body %}
